/* Additive public experience and shared layout views. */
.x-welcome,.x-studio,.x-rolodex,.x-onboard,.x-help { color:var(--ink); }
.x-welcome { --x-cyan:#7de9e6; --x-blue:#9bcdf7; }
.x-welcome button,.x-studio button,.x-rolodex button,.x-onboard button,.x-dock button { cursor:pointer; }
.x-welcome .x-section { margin:clamp(72px,10vw,150px) auto 0; max-width:1240px; }
.x-welcome .x-section-heading { display:flex; align-items:baseline; gap:clamp(20px,5vw,70px); margin-bottom:32px; }
.x-section-heading>span,.x-kicker { color:var(--cyan); font:600 10px/1.5 var(--font-mono,monospace); letter-spacing:.19em; text-transform:uppercase; }
.x-section-heading h2 { margin:0; color:var(--ink-strong); font:600 clamp(34px,4.4vw,62px)/1.04 var(--font-display,sans-serif); letter-spacing:-.045em; }
.x-hero { position:relative; isolation:isolate; min-height:min(850px,88vh); display:flex; align-items:center; overflow:hidden; margin:-54px calc(-1 * clamp(18px,4vw,64px)) 0; padding:clamp(120px,13vw,190px) clamp(24px,8vw,140px) 110px; background:#03111c; }
.x-hero:after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#04121e 0%,rgba(4,18,30,.94) 31%,rgba(4,18,30,.3) 70%),linear-gradient(0deg,#04121e,transparent 34%); }
.x-hero-image { position:absolute; z-index:-2; inset:0; background:url('/uploads/reef-hero-poster.jpg') center/cover no-repeat; filter:saturate(.85) brightness(.68); transform:scale(1.03); }
.x-hero-content { position:relative; max-width:760px; }
.x-hero .x-kicker { display:block; margin-bottom:26px; color:#a1f5ef; }
.x-hero .x-kicker b { margin:0 8px; color:#90bed0; }
.x-hero h1 { margin:0 0 26px; color:#f4fdfa; font:600 clamp(58px,8vw,120px)/.94 var(--font-display,sans-serif); letter-spacing:-.075em; text-wrap:balance; }
.x-hero h1 em { color:#87ebe4; font-style:normal; }
.x-hero-statement { max-width:650px; margin:0 0 17px; color:#e0f3f5; font:500 clamp(21px,2.4vw,32px)/1.3 var(--font-display,sans-serif); letter-spacing:-.025em; }
.x-hero-description { max-width:630px; margin:0; color:#aec6d0; font-size:clamp(14px,1.3vw,17px); line-height:1.75; }
.x-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.x-hero-actions .btn { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; }
.x-hero-status { display:flex; align-items:center; gap:10px; margin-top:42px; color:#a9cbd1; font:500 10px var(--font-mono,monospace); text-transform:uppercase; letter-spacing:.1em; }
.x-hero-coordinate { position:absolute; right:5vw; bottom:65px; color:#a5d6d8; text-align:right; font:500 10px/1.8 var(--font-mono,monospace); letter-spacing:.2em; }
.x-hero-rings { position:absolute; width:min(42vw,580px); height:min(42vw,580px); right:-6%; top:9%; border:1px solid rgba(91,220,221,.2); border-radius:50%; pointer-events:none; }
.x-hero-rings i { position:absolute; inset:12%; border:1px solid rgba(91,220,221,.17); border-radius:50%; }
.x-hero-rings i:nth-child(2) { inset:25%; }.x-hero-rings i:nth-child(3) { inset:38%; background:rgba(103,221,224,.09); box-shadow:0 0 110px #42cbd544; }
.x-intro-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,8vw,110px); }
.x-intro-grid p,.x-system>p,.x-countries>p { margin:0; max-width:650px; color:var(--muted); font-size:clamp(16px,1.55vw,20px); line-height:1.75; }
.x-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.x-feature { position:relative; min-height:230px; padding:25px; text-align:left; color:var(--ink); border:1px solid var(--line-strong); border-radius:16px; background:linear-gradient(145deg,rgba(27,71,79,.35),rgba(7,27,40,.77)); transition:transform .2s,border-color .2s,background .2s; }
.x-feature:hover,.x-feature:focus-visible { transform:translateY(-3px); border-color:var(--cyan); background:rgba(33,84,93,.4); }
.x-feature>span { color:var(--cyan); font:600 10px var(--font-mono,monospace); letter-spacing:.12em; }
.x-feature h3 { margin:43px 0 8px; color:var(--ink-strong); font:600 24px var(--font-display,sans-serif); }
.x-feature p { margin:0; max-width:28ch; color:var(--muted); font-size:14px; line-height:1.55; }
.x-feature>b { position:absolute; right:24px; top:19px; font:300 25px sans-serif; color:var(--cyan); }
.x-system { padding:35px; border:1px solid var(--line-strong); border-radius:20px; background:linear-gradient(110deg,rgba(25,71,78,.3),rgba(4,23,38,.45)); }
.x-system-line { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin:35px 0; border-block:1px solid var(--line-strong); }
.x-system-line div { min-height:130px; display:flex; flex-direction:column; justify-content:space-between; padding:18px 12px; border-right:1px solid var(--line); }
.x-system-line div:last-child { border:0; }.x-system-line span { color:var(--cyan); font:500 10px var(--font-mono,monospace); }.x-system-line strong { font-size:clamp(13px,1.3vw,19px); line-height:1.2; }
.x-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.x-proof-grid article { padding:25px; border-top:2px solid var(--cyan); background:var(--surface-card-2); }
.x-proof-grid span { color:var(--cyan); font:500 11px var(--font-mono,monospace); }.x-proof-grid h3 { margin:36px 0 10px; font:600 26px var(--font-display,sans-serif); }.x-proof-grid p { margin:0; color:var(--muted); line-height:1.6; }.x-proof>.btn { margin-top:20px; }
.x-audience { display:flex; flex-wrap:wrap; gap:9px; }.x-audience button { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:48px; padding:0 15px; color:var(--ink); border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-card); font-size:13px; }.x-audience button:hover { border-color:var(--cyan); }.x-audience span { color:var(--cyan); }
.x-country-strip { display:flex; gap:10px; overflow-x:auto; padding:22px 0; scroll-snap-type:x mandatory; }.x-country-strip button { flex:0 0 170px; min-height:145px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:18px; color:var(--ink); text-align:left; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card-2); scroll-snap-align:start; }.x-country-strip button:hover { border-color:var(--cyan); }.x-country-strip span { color:var(--cyan); font:600 11px var(--font-mono,monospace); }.x-country-strip strong { font:600 21px var(--font-display,sans-serif); }.x-country-strip small { color:var(--muted); line-height:1.3; }.x-countries>.btn { margin-top:12px; }
.x-invitation { max-width:1220px; margin:clamp(85px,13vw,180px) auto 0; padding:clamp(35px,6vw,85px); border:1px solid rgba(117,229,225,.36); border-radius:24px; background:radial-gradient(circle at 100% 0%,rgba(31,131,137,.28),transparent 52%),linear-gradient(125deg,#0a2b36,#071c2c); }.x-invitation>span { color:var(--cyan); font:600 10px var(--font-mono,monospace); letter-spacing:.18em; }.x-invitation h2 { max-width:850px; margin:25px 0; color:#f4fdfa; font:600 clamp(35px,5vw,65px)/1.07 var(--font-display,sans-serif); letter-spacing:-.05em; }.x-invitation p { color:#b4d3d6; font-size:18px; line-height:1.6; }.x-invitation .btn { margin-top:14px; }
.x-footer { display:flex; flex-wrap:wrap; gap:10px 24px; max-width:1220px; margin:45px auto 0; padding:25px 0; border-top:1px solid var(--line-strong); }.x-footer button { padding:4px 0; border:0; background:none; color:var(--muted); font-size:12px; }.x-footer button:hover { color:var(--cyan); }
.x-onboard,.x-help { max-width:900px; margin:40px auto 90px; padding:clamp(24px,5vw,58px); }.x-onboard h1,.x-studio-head h1,.x-rolo-head h1,.x-help h1 { margin:16px 0; color:var(--ink-strong); font:600 clamp(37px,5vw,65px)/1.04 var(--font-display,sans-serif); letter-spacing:-.05em; }.x-onboard>p,.x-studio-head>p,.x-rolo-head>p,.x-help>p { color:var(--muted); line-height:1.65; }.x-interest-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:30px 0; }.x-interest-grid button { display:flex; justify-content:space-between; gap:16px; min-height:65px; align-items:center; padding:16px 20px; color:var(--ink); text-align:left; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-card); }.x-interest-grid button.selected { border-color:var(--cyan); background:rgba(63,201,201,.12); }.x-interest-grid span { color:var(--cyan); }.x-onboard-actions,.x-help-links { display:flex; flex-wrap:wrap; gap:10px; }.x-fine { font-size:12px; }
.x-studio,.x-rolodex { max-width:1320px; margin:0 auto; }.x-studio-head,.x-rolo-head { max-width:730px; margin:10px 0 30px; }.x-mode-tabs,.x-rolo-collections { display:flex; gap:7px; flex-wrap:wrap; padding:6px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card); }.x-mode-tabs button,.x-rolo-collections button { flex:1 1 145px; min-height:46px; padding:8px 13px; color:var(--muted); border:0; border-radius:9px; background:none; font-weight:600; }.x-mode-tabs button.active,.x-rolo-collections button[aria-selected="true"] { color:#07242a; background:var(--cyan); }.x-studio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:17px 0; color:var(--muted); font-size:13px; }.x-studio-toolbar label { display:flex; gap:10px; align-items:center; }.x-studio-toolbar select { padding:9px; border:1px solid var(--line-strong); border-radius:8px; color:var(--ink); background:var(--surface-card); }.x-mode-surface { min-height:430px; margin-top:15px; }.x-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.x-stat-grid button { position:relative; min-height:160px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:20px; text-align:left; color:var(--ink); border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card-2); }.x-stat-grid strong { color:var(--cyan); font:600 48px var(--font-display,sans-serif); }.x-stat-grid span { color:var(--muted); font-size:13px; }.x-stat-grid b { position:absolute; right:18px; top:16px; color:var(--cyan); }.x-work-grid,.x-mag-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }.x-work-grid>section,.x-mag-grid>article { padding:24px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card); }.x-work-grid h3,.x-mag-grid h3 { margin:0 0 12px; color:var(--ink-strong); font:600 23px var(--font-display,sans-serif); }.x-work-grid p,.x-mag-grid p { color:var(--muted); line-height:1.6; }.x-mag-feature { min-height:300px; padding:45px; border-radius:20px; background:linear-gradient(100deg,rgba(5,27,40,.9),rgba(15,77,83,.6)),url('/uploads/reef-hero-poster.jpg') center/cover; }.x-mag-feature span,.x-mag-grid span { color:var(--cyan); font:600 10px var(--font-mono,monospace); letter-spacing:.1em; }.x-mag-feature h3 { max-width:700px; margin:25px 0 10px; color:#fff; font:600 clamp(32px,4vw,56px)/1.05 var(--font-display,sans-serif); }.x-mag-feature p { max-width:600px; color:#cee1e4; line-height:1.6; }.x-magazine button { border:0; padding:8px 0; background:none; color:var(--cyan); }
.x-map-first { position:relative; min-height:570px; overflow:hidden; border:1px solid var(--line-strong); border-radius:18px; background:radial-gradient(ellipse at 62% 46%,#14566b,#061b2b 58%,#04141f); }.x-map-art { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; opacity:.45; }.x-map-art span { font:300 680px/.8 sans-serif; color:#86d4df; transform:rotate(-25deg); }.x-map-art i { position:absolute; width:10px; height:10px; border-radius:50%; background:#b3ffef; box-shadow:0 0 25px #95f8e8; }.x-map-art i:nth-child(2) { left:40%; top:37%; }.x-map-art i:nth-child(3) { left:62%; top:57%; }.x-map-art i:nth-child(4) { left:77%; top:31%; }.x-map-overlay { position:relative; z-index:1; max-width:560px; margin:55px; padding:28px; border:1px solid rgba(122,225,226,.4); border-radius:16px; backdrop-filter:blur(20px); background:rgba(3,24,35,.77); }.x-map-overlay span { color:var(--cyan); font:600 10px var(--font-mono,monospace); }.x-map-overlay h3 { color:#fff; font:600 42px var(--font-display,sans-serif); margin:18px 0; }.x-map-overlay p { color:#c4d9df; line-height:1.6; }.x-map-countries { position:relative; display:flex; gap:7px; flex-wrap:wrap; padding:0 55px 40px; }.x-map-countries button { display:flex; flex-direction:column; gap:4px; padding:10px 13px; color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; background:rgba(4,26,39,.8); }.x-map-countries span { color:var(--muted); font-size:10px; }
.x-kanban { display:grid; grid-template-columns:repeat(6,minmax(185px,1fr)); gap:10px; overflow-x:auto; }.x-kanban section { min-height:390px; padding:13px; border:1px solid var(--line-strong); border-radius:13px; background:var(--surface-card); }.x-kanban h3 { display:flex; justify-content:space-between; margin:0 0 14px; font-size:15px; }.x-kanban small { color:var(--muted); }.x-kanban section>button { display:grid; gap:8px; width:100%; margin-bottom:8px; padding:13px; text-align:left; color:var(--ink); border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-card-2); }.x-kanban section>button:hover { border-color:var(--cyan); }.x-kanban section>button span { color:var(--cyan); font-size:11px; }.x-kanban section>p { color:var(--muted); font-size:12px; }
.x-timeline { max-width:850px; margin:auto; }.x-timeline article { display:grid; grid-template-columns:150px 1fr; gap:25px; padding:22px 0; border-bottom:1px solid var(--line); }.x-timeline time { color:var(--cyan); font:600 11px var(--font-mono,monospace); }.x-timeline article span { color:var(--muted); font-size:11px; text-transform:uppercase; }.x-timeline h3 { margin:7px 0 10px; }.x-timeline button { border:0; background:none; color:var(--cyan); padding:0; }.x-layout-rolodex,.x-empty { padding:70px 30px; text-align:center; border:1px dashed var(--line-strong); border-radius:16px; }.x-layout-rolodex p,.x-empty p { color:var(--muted); }.x-layout-rolodex .btn { margin-top:10px; }
.x-rolo-collections { max-width:660px; }.x-rolo-controls { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }.x-rolo-controls label { display:grid; gap:6px; flex:1 1 180px; color:var(--muted); font-size:12px; }.x-rolo-controls label:first-child { flex:3 1 280px; }.x-rolo-controls input,.x-rolo-controls select { min-height:43px; padding:0 12px; border:1px solid var(--line-strong); border-radius:9px; color:var(--ink); background:var(--surface-card); }.x-rolo-notice { color:var(--muted); }.x-rolo-stage { display:grid; grid-template-columns:55px minmax(0,720px) 55px; justify-content:center; align-items:center; gap:15px; min-height:550px; touch-action:pan-y; }.x-rolo-arrow { width:50px; height:50px; border:1px solid var(--line-strong); border-radius:50%; color:var(--cyan); background:var(--surface-card); font-size:23px; }.x-rolo-arrow:disabled { opacity:.3; cursor:default; }.x-rolo-card { min-height:480px; display:flex; flex-direction:column; padding:clamp(22px,4vw,42px); border:1px solid #59c6ca88; border-radius:20px; background:radial-gradient(circle at 100% 0%,rgba(70,167,171,.22),transparent 40%),linear-gradient(140deg,#0b303b,#071b2a); box-shadow:0 24px 80px #0005; }.x-rolo-card.flipped { background:radial-gradient(circle at 0% 100%,rgba(119,170,204,.22),transparent 45%),linear-gradient(140deg,#09293a,#081829); }.x-rolo-card>img { width:75px; height:75px; object-fit:cover; border-radius:50%; margin:20px 0; }.x-rolo-number { display:flex; justify-content:space-between; color:#91d9dc; font:600 11px var(--font-mono,monospace); letter-spacing:.14em; }.x-rolo-status { width:max-content; margin-top:50px; padding:5px 9px; border:1px solid #8ed7db88; border-radius:20px; color:#9fe5e3; font:600 10px var(--font-mono,monospace); }.x-rolo-card h2 { margin:16px 0 5px; color:#f5fffd; font:600 clamp(28px,4vw,44px)/1.1 var(--font-display,sans-serif); }.x-rolo-location { color:#7fe4e0!important; }.x-rolo-card p { color:#c3d8db; line-height:1.6; }.x-rolo-tags { display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 20px; }.x-rolo-tags span { padding:6px 9px; border-radius:20px; background:#ffffff12; color:#d9edf0; font-size:11px; }.x-rolo-card-actions { display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid #ffffff24; padding-top:16px; }.x-rolo-card-actions button { padding:8px 10px; color:#bde7e5; border:1px solid #ffffff27; border-radius:8px; background:#ffffff0b; font-size:12px; }.x-rolo-card-actions button:hover { border-color:#83e8df; }.x-rolo-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:720px; margin:10px auto 0; color:var(--muted); font-size:11px; }.x-rolo-preview { position:fixed; z-index:90; inset:0; display:grid; place-items:center; padding:20px; background:#020c14cc; }.x-rolo-preview>div { position:relative; width:min(560px,100%); max-height:90vh; overflow:auto; padding:30px; border:1px solid var(--line-strong); border-radius:16px; background:#0a2935; box-shadow:0 25px 90px #0008; }.x-rolo-preview button:first-child { position:absolute; right:20px; top:18px; background:none; border:0; color:#fff; font-size:25px; }.x-rolo-preview h2 { color:#fff; }.x-rolo-preview p,.x-rolo-preview dd { color:#c1d5d8; line-height:1.6; }.x-rolo-preview dt { color:#8de4df; font-size:11px; text-transform:uppercase; }.x-compare { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:24px; padding:15px; border:1px solid var(--line-strong); border-radius:10px; }.x-compare span { padding:5px 8px; border-radius:5px; background:var(--surface-card-2); font-size:11px; }.x-compare button { margin-left:auto; border:0; background:none; color:var(--cyan); }
.x-dock { position:fixed; z-index:39; left:50%; bottom:max(13px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:3px; max-width:calc(100vw - 20px); padding:6px; border:1px solid rgba(115,220,221,.4); border-radius:19px; background:rgba(6,26,37,.93); box-shadow:0 16px 55px #0008; backdrop-filter:blur(22px); }.x-dock>button { min-width:77px; min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#a9c8cd; border:0; border-radius:12px; background:none; }.x-dock>button.active { color:#8aede3; background:#4fe1df20; }.x-dock>button>span { font-size:19px; line-height:1; }.x-dock small { font-size:10px; }.x-create-wrap { position:relative; order:0; }.x-create { width:53px; height:53px; margin:-20px 3px 0; border:2px solid #befcf5; border-radius:50%; color:#07222b; background:#83e9e1; box-shadow:0 5px 25px #53dcdf77; font-size:32px; line-height:1; }.x-create-menu { position:absolute; bottom:65px; left:50%; transform:translateX(-50%); width:190px; padding:6px; border:1px solid var(--line-strong); border-radius:12px; background:#0a2b38; box-shadow:0 15px 45px #0009; }.x-create-menu button { display:block; width:100%; padding:12px; border:0; border-radius:7px; text-align:left; color:#e8f6f6; background:none; }.x-create-menu button:hover { background:#ffffff17; }.x-dock.x-side-nav { left:12px; top:50%; bottom:auto; transform:translateY(-50%); flex-direction:column; }.x-side-nav .x-create { margin:3px 0; }.x-side-nav .x-create-menu { bottom:auto; left:65px; top:0; transform:none; }
body:has(.x-dock) .mobile-nav { display:none!important; }body:has(.x-dock) .page { padding-bottom:155px; }body:has(.x-dock) .site-footer { padding-bottom:105px; }
.x-welcome button:focus-visible,.x-studio button:focus-visible,.x-rolodex button:focus-visible,.x-onboard button:focus-visible,.x-dock button:focus-visible,.x-rolo-stage:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media(max-width:900px){.x-feature-grid { grid-template-columns:repeat(2,1fr); }.x-system-line { grid-template-columns:repeat(3,1fr); }.x-system-line div:nth-child(3) { border-right:0; }.x-stat-grid { grid-template-columns:repeat(2,1fr); }.x-dock.x-side-nav { left:50%; top:auto; bottom:max(13px,env(safe-area-inset-bottom)); transform:translateX(-50%); flex-direction:row; }.x-side-nav .x-create-menu { bottom:65px; left:50%; top:auto; transform:translateX(-50%); }}
@media(max-width:620px){.x-hero { min-height:650px; margin:-36px -14px 0; padding:110px 24px 75px; }.x-hero:after { background:linear-gradient(90deg,#04121ee8,#04121e88),linear-gradient(0deg,#04121e,transparent 60%); }.x-hero-image { background-position:63% center; }.x-hero h1 { font-size:clamp(49px,13vw,75px); }.x-hero-statement { font-size:21px; }.x-hero-description { font-size:13px; }.x-hero-coordinate,.x-hero-rings { display:none; }.x-welcome .x-section { margin-top:75px; }.x-section-heading { display:block!important; }.x-section-heading>span { display:block; margin-bottom:12px; }.x-intro-grid,.x-proof-grid,.x-feature-grid,.x-work-grid,.x-mag-grid,.x-interest-grid { grid-template-columns:1fr; }.x-feature { min-height:175px; }.x-feature h3 { margin-top:27px; }.x-system { padding:20px; }.x-system-line { grid-template-columns:repeat(2,1fr); }.x-system-line div:nth-child(3) { border-right:1px solid var(--line); }.x-system-line div:nth-child(even) { border-right:0; }.x-system-line div { min-height:100px; }.x-invitation { padding:30px 25px; }.x-studio-toolbar { align-items:flex-start; flex-direction:column; }.x-mode-tabs button { flex:1 1 110px; font-size:12px; }.x-map-overlay { margin:20px; }.x-map-countries { padding:0 20px 20px; }.x-rolo-stage { grid-template-columns:30px minmax(0,1fr) 30px; gap:4px; }.x-rolo-arrow { width:30px; height:40px; }.x-rolo-card { min-height:490px; padding:20px; }.x-rolo-card-actions button { font-size:10px; }.x-rolo-bottom span { display:none; }.x-dock { left:6px; right:6px; max-width:none; bottom:max(6px,env(safe-area-inset-bottom)); transform:none; justify-content:space-around; gap:0; padding:5px 2px; }.x-dock>button { min-width:0; flex:1; min-height:51px; }.x-dock small { font-size:8px; }.x-dock>button>span { font-size:17px; }.x-create { width:45px; height:45px; margin:-17px 0 0; font-size:26px; }.x-dock.x-side-nav { left:6px; right:6px; bottom:max(6px,env(safe-area-inset-bottom)); transform:none; }.x-timeline article { grid-template-columns:1fr; gap:6px; }}
@media(prefers-reduced-motion:reduce){.x-feature { transition:none; }.x-feature:hover { transform:none; }}
.x-compare { align-items:stretch; }.x-compare>strong { flex:1 0 100%; }.x-compare article { flex:1 1 190px; display:grid; gap:6px; min-width:0; padding:12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-card-2); }.x-compare article small { color:var(--cyan); text-transform:uppercase; }.x-compare article b { overflow-wrap:anywhere; }.x-compare article span { color:var(--muted); font-size:12px; }.x-saved-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; margin:20px 0; }.x-saved-grid button { display:grid; gap:7px; padding:14px; color:var(--ink); text-align:left; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface-card); }.x-saved-grid button:hover { border-color:var(--cyan); }.x-saved-grid span { color:var(--muted); font-size:11px; }.x-saved-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.x-personal-links { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 25px; }.x-personal-links .btn { min-height:38px; }
/* Keep the welcome hero legible with either saved light or dark app theme. */
.x-hero { align-items:flex-start; padding-top:clamp(70px,7vw,105px); padding-bottom:145px; min-height:760px; }
.x-hero-actions .btn { color:#f4fffd!important; border-color:#86dfdc!important; background:#082c3acc!important; }
.x-hero-actions .btn.primary { color:#05232a!important; border-color:#8aebe2!important; background:#8aebe2!important; }
.x-dock svg { width:19px; height:19px; }
@media(max-width:620px){ .x-hero { min-height:650px; padding-top:110px; padding-bottom:125px; }.x-dock svg { width:18px; height:18px; } }
.x-command-feed { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-top:12px; }.x-command-feed>section { padding:24px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-card); }.x-command-feed h3 { margin:0 0 16px; }.x-command-feed p { color:var(--muted); line-height:1.6; }.x-command-feed section>button:not(.btn) { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:12px 0; color:var(--ink); text-align:left; border:0; border-top:1px solid var(--line); background:none; }.x-command-feed button span { color:var(--muted); font-size:11px; }@media(max-width:620px){.x-command-feed{grid-template-columns:1fr;}}
@media(min-width:901px){body:has(.x-side-nav) .page { max-width:calc(1500px - 96px); margin-left:max(105px,calc((100vw - 1400px)/2)); margin-right:auto; }body:has(.x-side-nav) .site-footer { padding-left:96px; }}
.x-rolo-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-height:280px; overflow:auto; margin:4px 0 20px; }.x-rolo-fields div { padding:8px 10px; border:1px solid #ffffff24; border-radius:7px; background:#ffffff0b; }.x-rolo-fields dt { color:#7fe5e1; font:600 9px var(--font-mono,monospace); letter-spacing:.08em; text-transform:uppercase; }.x-rolo-fields dd { margin:5px 0 0; color:#e2f3f3; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }.x-rolo-preview .x-rolo-fields { max-height:none; }.x-rolo-preview .x-rolo-fields dd { color:#d7eeef; }@media(max-width:620px){.x-rolo-fields{grid-template-columns:1fr;}}

/* Landing hero video (uploads/fishfootsdg.mp4, compressed web copy). The poster and the existing
   hero image remain the fallback; reduced motion shows the still poster. */
.x-hero-image { background-image:url('/uploads/fishfootsdg-poster.jpg'), url('/uploads/reef-hero-poster.jpg'); }
.x-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .x-hero-video { display:none; } }
.user-reduced-motion .x-hero-video { display:none; }

/* Full-bleed landing hero with scroll parallax (hero-parallax.js sets --hp in px scrolled). */
.page .x-hero { width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.x-hero-image { transform:translate3d(0,calc(var(--hp,0) * .45px),0) scale(1.08); will-change:transform; }
.x-hero-rings { transform:translate3d(0,calc(var(--hp,0) * -.22px),0) rotate(calc(var(--hp,0) * .03deg)); will-change:transform; }
.x-hero-content { transform:translate3d(0,calc(var(--hp,0) * .2px),0); opacity:var(--hp-fade,1); will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce) { .x-hero-image,.x-hero-rings,.x-hero-content { transform:none; opacity:1; } }