/* Creators Collective Platform
   A portal rather than a page. Light by default, deep navy in dark mode.
   Depth comes from perspective, layering, translucency and parallax:
   no glow and no drop shadows, per the studio house rules. */

@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-variable.woff2) format('woff2')}
@font-face{font-family:'PP Monument Extended';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/monument-extended-400.woff2) format('woff2')}
@font-face{font-family:'PP Monument Extended';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/monument-extended-300.woff2) format('woff2')}

/* ================= TOKENS ================= */
:root{
  --bg:#F5F7FB; --bg2:#EEF2F8; --card:#FFFFFF; --hover:rgba(10,26,56,.04);
  --ink:#0A1A38; --body:#46567A; --muted:#7A8AA3;
  --line:#E1E7F0; --line2:#ECF0F6;
  --brand:#0038FF; --btn:#0038FF; --btn-hover:#002ED6; --brand-soft:#EAF0FF;
  --navy:#050E22; --navy2:#0B1E40;
  --blue:#0038FF; --violet:#6A4DF4; --gold:#A1650F; --rose:#C63B70; --teal:#0A8A6B; --sky:#0A72BE; --coral:#CB5129; --indigo:#3B40CF;
  --ok:#0A8A6B;
  --glass:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.42); --glass-line:rgba(10,26,56,.08); --glass-hi:rgba(255,255,255,.95);
  --floor:rgba(0,56,255,.12); --field-a:rgba(0,56,255,.07); --field-b:rgba(106,77,244,.06); --star:rgba(10,26,56,.14);
  --blur:saturate(1.6) blur(22px);
  --r-xl:30px; --r-lg:22px; --r:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ui:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'PP Monument Extended','Outfit',sans-serif;
  --code:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#050E22; --bg2:#081631; --card:#0B1A38; --hover:rgba(214,226,245,.05);
  --ink:#EEF3FD; --body:#B3C0D7; --muted:#8190AD;
  --line:rgba(214,226,245,.11); --line2:rgba(214,226,245,.065);
  --brand:#7B9BFF; --btn:#3A63FF; --btn-hover:#5277FF; --brand-soft:rgba(92,130,255,.14);
  --blue:#7B9BFF; --violet:#A495FF; --gold:#E3B45C; --rose:#F08FAE; --teal:#49C79E; --sky:#5AB4FF; --coral:#F2946E; --indigo:#9296FF;
  --ok:#49C79E;
  --glass:rgba(14,31,66,.52); --glass-2:rgba(14,31,66,.32); --glass-line:rgba(214,226,245,.1); --glass-hi:rgba(255,255,255,.07);
  --floor:rgba(123,155,255,.16); --field-a:rgba(58,99,255,.17); --field-b:rgba(164,149,255,.1); --star:rgba(214,226,245,.55);
  color-scheme:dark;
}
.h-blue{--h:var(--blue)} .h-violet{--h:var(--violet)} .h-gold{--h:var(--gold)} .h-rose{--h:var(--rose)}
.h-teal{--h:var(--teal)} .h-sky{--h:var(--sky)} .h-coral{--h:var(--coral)} .h-indigo{--h:var(--indigo)} .h-mute{--h:var(--muted)}
[class^="h-"],[class*=" h-"]{--h-soft:color-mix(in srgb,var(--h) 10%,var(--card));--h-line:color-mix(in srgb,var(--h) 32%,var(--line))}

/* ================= BASE ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--ui);font-size:15px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;transition:background .4s var(--ease),color .4s var(--ease)}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block}
[hidden]{display:none!important}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--brand-soft)}

/* the space every page sits in */
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.space i{position:absolute;display:block}
.space .fa{width:80vw;height:80vw;left:-20vw;top:-38vw;background:radial-gradient(closest-side,var(--field-a),transparent);animation:drift 44s ease-in-out infinite alternate}
.space .fb{width:64vw;height:64vw;right:-22vw;top:18vh;background:radial-gradient(closest-side,var(--field-b),transparent);animation:drift 58s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(7vw,5vh,0)}}
.space .stars{inset:0;opacity:.55;background-image:radial-gradient(var(--star) .8px,transparent 1.3px),radial-gradient(var(--star) .6px,transparent 1.1px);background-size:97px 89px,151px 137px;background-position:0 0,43px 61px;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.space .floor{left:-60%;right:-60%;bottom:-6vh;height:60vh;transform-origin:50% 100%;transform:perspective(640px) rotateX(66deg);background-image:linear-gradient(var(--floor) 1px,transparent 1px),linear-gradient(90deg,var(--floor) 1px,transparent 1px);background-size:76px 76px;animation:travel 22s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 88%);mask-image:linear-gradient(to top,#000 5%,transparent 88%)}
@keyframes travel{to{background-position:0 76px}}

/* ================= TYPE ================= */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow.h{color:var(--h)}
.display{font-size:clamp(32px,3.8vw,52px);line-height:1.04;font-weight:200;letter-spacing:-.03em;color:var(--ink)}
.display b{font-weight:600}
.title{font-size:clamp(22px,2.2vw,30px);line-height:1.15;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.title b{font-weight:600}
.lede{font-size:16px;line-height:1.65;color:var(--body);max-width:62ch}
.num{font-family:var(--mono);font-weight:400;letter-spacing:.02em}
.muted{color:var(--muted)}
.big-num{font-size:clamp(40px,4.6vw,64px);font-weight:150;letter-spacing:-.04em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}

/* ================= PRIMITIVES ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:var(--r-sm);background:var(--btn);color:#fff;font-size:14.5px;font-weight:500;white-space:nowrap;border:1px solid transparent;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn .ic{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover{background:var(--btn-hover)}
.btn:hover .ic.go{transform:translateX(3px)}
.btn:active{transform:scale(.985)}
.btn.lg{min-height:52px;padding:0 26px;border-radius:14px;font-size:15.5px}
.btn.block{width:100%}
.btn.ghost{background:var(--glass);color:var(--ink);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.btn.ghost:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.btn.light{background:#fff;color:var(--navy)}
.btn.light:hover{background:#E4EBFA}
.btn[disabled]{opacity:.4;pointer-events:none}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--body);border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:color .2s,border-color .2s}
.iconbtn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 20%,var(--line))}

.glass,.card{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);border-radius:var(--r-lg)}
.card{padding:24px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:500;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--body);white-space:nowrap}
.chip .ic{width:14px;height:14px}
.chip.h{background:var(--h-soft);color:var(--h)}
.chip.line{background:transparent;border:1px solid var(--line)}
.chip.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.tile{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--h-soft);color:var(--h);border:1px solid var(--h-line)}
.tile .ic{width:22px;height:22px}
.tile.sm{width:34px;height:34px;border-radius:10px}.tile.sm .ic{width:17px;height:17px}
.tile.lg{width:60px;height:60px;border-radius:18px}.tile.lg .ic{width:28px;height:28px}
.bar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--h,var(--brand));transition:width 1.1s var(--ease)}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:5px;border-radius:3px;background:var(--line2);transition:background .5s var(--ease)}
.segs i.on{background:var(--h,var(--brand))}
.ring{position:relative;display:grid;place-items:center;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .rt{stroke:var(--line2)}
.ring .rf{stroke:var(--h,var(--brand));stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease)}
.avatar{border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:500;letter-spacing:.02em}
.av-ring .avatar{width:calc(100% - 22px);height:calc(100% - 22px);font-size:30px;font-weight:300}
.av-ring .lvl{position:absolute;right:-2px;bottom:4px;min-width:34px;height:34px;padding:0 8px;border-radius:99px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:12px}

.sec{margin-top:48px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-h h2{font-size:21px;font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.sec-h p{font-size:13.5px;color:var(--muted);margin-top:3px}
.sec-h a{font-size:13.5px;font-weight:500;color:var(--brand);display:inline-flex;align-items:center;gap:4px;min-height:32px}
.sec-h a .ic{width:15px;height:15px}

.rise{animation:enter .95s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translate3d(0,18px,0) scale(.985);filter:blur(8px)}}
.rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.18s}.rise.d4{animation-delay:.24s}.rise.d5{animation-delay:.3s}
[data-tilt]{transform-style:preserve-3d;transition:transform .8s var(--ease);will-change:transform}
[data-tilt].tilting{transition:transform .15s linear}

/* ================= THE SPHERE =================
   A frosted glass sphere with light moving inside it. Shading and a rim,
   no halo: the house rules still hold. */
.sphere{position:relative;border-radius:50%;flex:none;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.98) 0,rgba(255,255,255,.62) 11%,transparent 34%),
             radial-gradient(circle at 70% 82%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 58%),
             radial-gradient(circle at 50% 55%,#F7F9FF 0%,#DEE6FF 54%,#B8C7F6 100%);
  border:1px solid rgba(255,255,255,.95)}
:root[data-theme="dark"] .sphere{
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 16%,transparent 36%),
             radial-gradient(circle at 70% 82%,rgba(91,130,255,.5),transparent 60%),
             radial-gradient(circle at 50% 50%,#1D3270 0%,#0E1D45 66%,#081230 100%);
  border-color:rgba(214,226,245,.22)}
.sphere svg{position:absolute;inset:0;width:100%;height:100%}
.sphere .waves{animation:waves 14s linear infinite;mix-blend-mode:multiply;opacity:.9}
:root[data-theme="dark"] .sphere .waves{mix-blend-mode:screen}
@keyframes waves{to{transform:translateX(-251.3px)}}
.sphere .shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.7),transparent 26%);pointer-events:none}

/* ================= APP SHELL ================= */
.app{position:relative;z-index:1;display:grid;grid-template-columns:288px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:16px;height:calc(100vh - 32px);margin:16px 0 16px 16px;display:flex;flex-direction:column;gap:6px;padding:22px 16px 18px;border-radius:28px}
.side .brandrow{display:flex;flex-direction:column;gap:8px;padding:2px 12px 24px}
.logo{height:30px;width:auto;align-self:flex-start;flex:none;object-fit:contain}
.logo.dk{display:none}
:root[data-theme="dark"] .logo.lt{display:none}
:root[data-theme="dark"] .logo.dk{display:block}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:14px;font-size:14.5px;font-weight:500;color:var(--body);transition:background .2s,color .2s}
.nav a:hover{background:var(--hover);color:var(--ink)}
.nav a.on{background:var(--brand-soft);color:var(--brand)}
.nav .badge-n{margin-left:auto;font-size:11px;font-weight:600;min-width:22px;height:22px;padding:0 7px;border-radius:99px;display:grid;place-items:center;background:var(--brand);color:#fff}
:root[data-theme="dark"] .nav .badge-n{background:var(--btn)}
.side-lv{margin-top:auto;padding:16px;border-radius:var(--r)}
.side-lv .top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.side-lv .ring .num{font-size:12px;color:var(--ink)}
.side-lv b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.side-lv .top div span{display:block;font-size:12px;color:var(--muted)}
.side-lv .xp{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px}
.side-tools{display:flex;gap:8px;padding-top:10px}
.side-tools .iconbtn{flex:1;width:auto;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:500}
.main{min-width:0;padding:16px 40px 96px}
.topbar{position:sticky;top:16px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:8px 8px 8px 20px;border-radius:20px;max-width:1240px;margin:0 auto 30px}
.topbar::before{content:"";position:absolute;left:-1px;right:-1px;bottom:100%;height:18px;background:linear-gradient(var(--bg) 55%,transparent);pointer-events:none;opacity:0;transition:opacity .25s}
body.scrolled:not(.focus) .topbar::before{opacity:1}
.topbar .crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);min-width:0}
.topbar .crumb a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--body)}
.topbar .crumb a:hover{color:var(--ink)}
.topbar .crumb .ic{width:15px;height:15px}
.topbar .right{display:flex;align-items:center;gap:10px}
.topbar .me{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:99px;border:1px solid var(--glass-line);background:var(--glass);min-height:44px}
.topbar .me .avatar{width:34px;height:34px;font-size:13px}
.topbar .me span{font-size:13.5px;font-weight:500;color:var(--ink)}
.topbar .mlogo{display:none;align-items:center}
.topbar .mlogo .logo{height:26px}
body.focus .topbar{position:relative;top:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.focus .topbar .mlogo{display:flex}
body.focus .topbar .me{display:none}
body.focus .app{grid-template-columns:minmax(0,1fr)}
body.focus .side,body.focus .tabbar{display:none!important}
.view{max-width:1240px;margin:0 auto}
.tabbar{display:none}

/* ================= PORTAL (TODAY) ================= */
.portal{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.15fr) minmax(260px,.85fr);align-items:stretch}
.portal .floorplane{position:absolute;left:-30%;right:-30%;bottom:-8%;height:62%;transform-origin:50% 100%;transform:perspective(620px) rotateX(70deg);background-image:linear-gradient(var(--floor) 1px,transparent 1px),linear-gradient(90deg,var(--floor) 1px,transparent 1px);background-size:64px 64px;animation:travel2 18s linear infinite;-webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000 20%,transparent 75%);pointer-events:none}
@keyframes travel2{to{background-position:0 64px}}
.p-copy{position:relative;z-index:2;padding:40px 0 40px 40px;display:flex;flex-direction:column;justify-content:center}
.p-copy .eyebrow{display:flex;align-items:center;gap:8px}
.p-copy .display{margin-top:18px}
.p-copy .lv{margin-top:14px;font-size:15px;color:var(--body)}
.p-copy .lv b{color:var(--ink);font-weight:600}
.p-xp{margin-top:40px}
.p-xp .row{display:flex;align-items:baseline;gap:10px}
.p-xp .row span{font-size:13px;color:var(--muted)}
.p-xp .row .big-num{font-size:clamp(44px,4.8vw,68px);color:var(--ink);font-weight:150}
.p-xp .bar{margin-top:14px;max-width:320px}
.p-xp .to{margin-top:10px;font-size:13px;color:var(--muted)}
.p-xp .to b{color:var(--ink);font-weight:600}
.p-copy .btn{margin-top:26px;align-self:flex-start}
.p-stage{position:relative;z-index:1;display:grid;place-items:center;min-height:460px}
.p-stage .plinth{position:absolute;left:50%;bottom:13%;width:62%;aspect-ratio:3.2;transform:translateX(-50%);pointer-events:none}
.p-stage .plinth ellipse{fill:none;stroke:color-mix(in srgb,var(--brand) 26%,var(--line));stroke-width:1;vector-effect:non-scaling-stroke}
.p-side{position:relative;z-index:2;padding:22px 22px 22px 0;display:flex;flex-direction:column;gap:12px}
.w{padding:18px;border-radius:var(--r-lg);display:block;transition:border-color .25s,transform .4s var(--ease)}
a.w:hover{border-color:var(--h-line,var(--line));transform:translate3d(0,-2px,0)}
.w .eyebrow{display:flex;justify-content:space-between;gap:10px}
.w h3{margin-top:10px;font-size:17px;font-weight:500;color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.w p{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.5}
.w .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.w .go{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:500;color:var(--h,var(--brand))}
.w .go .ic{width:15px;height:15px}
.w.next li{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;color:var(--ink)}
.w.next li .tile{--h:var(--muted);--h-soft:transparent;--h-line:var(--line)}

/* level orbit */
.orbitv{position:relative;width:100%;height:420px}
.orbitv svg.arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbitv .arc path{fill:none;stroke:color-mix(in srgb,var(--brand) 34%,var(--line));stroke-width:1;vector-effect:non-scaling-stroke}
.orbitv .arc.back{z-index:1}.orbitv .arc.front{z-index:4}
.orbitv .core{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3}
.orb{position:absolute;left:0;top:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;line-height:1;color:var(--body);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);will-change:transform,opacity}
.orb .ic{width:13px;height:13px;stroke-width:2.2}
.orb.done{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .orb.done{background:var(--btn);border-color:var(--btn)}
.orb.now{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:13px;background:var(--card);border:2px solid var(--brand);color:var(--brand)}
.orb .tag{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);padding:5px 12px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* test scene stack */
.stack{position:relative;perspective:900px;display:grid;place-items:center}
.plates{position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-42deg)}
.plate{position:absolute;inset:0;border-radius:18px;border:1px solid var(--glass-line);background:var(--glass-2);transform:translateZ(calc(var(--i) * var(--gap,22px)));transition:background .6s var(--ease),border-color .6s var(--ease)}
.plate.done{background:color-mix(in srgb,var(--h) 26%,var(--glass));border-color:var(--h)}
.plate.now{border:1.5px solid var(--h);animation:breathe2 3.4s ease-in-out infinite}
.plate.brief{border-style:dashed;border-color:var(--h-line)}
.plate.brief.done{border-style:solid;background:color-mix(in srgb,var(--h) 44%,var(--glass))}
@keyframes breathe2{50%{background:color-mix(in srgb,var(--h) 12%,var(--glass-2))}}
.w.scene .stack{height:150px;padding-top:40px;margin:0}
.w.scene .plates{width:92px;height:92px;--gap:11px}
.w.scene .plate{border-radius:12px}

/* ================= ECOSYSTEM MAP ================= */
.eco-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch}
.eco{position:relative;border-radius:var(--r-xl);padding:26px 26px 20px;display:flex;flex-direction:column;gap:18px}
/* the flow: three columns, the wires drawn between them */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(0,1fr);column-gap:clamp(36px,5vw,72px)}
.fwires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.fwires path{fill:none;stroke:var(--h,var(--brand));stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.fwires circle{fill:var(--card);stroke:var(--h,var(--brand));stroke-width:1.5;opacity:0;transition:opacity .3s .35s}
.fwires.in path{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}
.fwires.in circle{opacity:1}
.fcol{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0}
.fh{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line2)}
.fh .fnum{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--brand);width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));display:grid;place-items:center;flex:none;line-height:1}
.fh b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.fh div span{display:block;font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}
.fl{display:flex;flex-direction:column;flex:1}
.f-role .fl,.f-work .fl{justify-content:space-between;gap:6px}
.fg+.fg{margin-top:10px}
.fgl{display:block;padding:0 10px 4px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* a node is one row */
.fnode{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:5px 10px;border-radius:11px;text-align:left;border:1px solid transparent;background:transparent;transition:background .2s,border-color .2s,opacity .3s}
.fnode:hover,.fnode.hot{background:var(--card);border-color:var(--line)}
.flow.focus .fnode.faint{opacity:.5}
.fnode .t{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode .t small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fnode .nm{font-family:var(--mono);font-size:10px;color:var(--muted);width:20px;flex:none;line-height:1}
/* status disc: complete, in progress (a filling ring), open, locked */
.sd{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--h,var(--brand));color:#fff;font-style:normal}
.sd .ic{width:11px;height:11px;stroke-width:2.4}
.n-mod.done .sd{background:var(--h);border-color:var(--h)}
.n-mod.now .sd{border:0;background:conic-gradient(var(--h) var(--p),color-mix(in srgb,var(--h) 16%,transparent) 0);-webkit-mask:radial-gradient(circle,transparent 5px,#000 5.5px);mask:radial-gradient(circle,transparent 5px,#000 5.5px)}
.n-mod.lock .sd,.n-work.lock .sd{border-color:var(--line);color:var(--muted)}
.n-mod.lock .t,.n-work.lock .t{color:var(--body);font-weight:400}
.n-mod.lock .sd .ic,.n-work.lock .sd .ic{width:10px;height:10px;stroke-width:1.8}
/* roles */
.n-role{min-height:46px}
.n-role .tile.sm{width:30px;height:30px;border-radius:9px}
.n-role .tile.sm .ic{width:15px;height:15px}
.n-role.mine{background:var(--h-soft);border-color:var(--h-line)}
.n-role.mine .t{color:var(--h)}
.n-role.any .tile{--h:var(--muted);--h-soft:transparent;--h-line:var(--line)}
/* work */
.n-work{min-height:44px}
.n-work .sd{--h:var(--brand);border-color:var(--brand)}
.n-work.open .sd{background:var(--brand)}
:root[data-theme="dark"] .n-work.open .sd{background:var(--btn);border-color:var(--btn)}
.n-work.sent .sd{background:var(--ok);border-color:var(--ok)}
.n-work .lv{font-family:var(--mono);font-size:10px;color:var(--muted);padding:4px 7px;border-radius:99px;border:1px solid var(--line);line-height:1;flex:none}
.n-work.open .lv{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.n-work.sel{background:var(--card);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.n-work.sel .t{font-weight:600}
/* the path in words, under the flow */
.fcap{margin-top:auto;padding:14px 16px;border-radius:14px;background:var(--glass-2);border:1px solid var(--glass-line);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--body);min-height:50px}
.fcap b{color:var(--ink);font-weight:600}
.fcap span{position:relative;padding-left:14px}
.fcap span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brand);opacity:.5}
.eco-legend{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:-4px;font-size:12px;color:var(--muted)}
.eco-legend span{display:inline-flex;align-items:center;gap:7px}
.eco-legend .k{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--brand)}
.eco-legend .k.done{background:var(--brand)}
.eco-legend .k.now{border-color:color-mix(in srgb,var(--brand) 25%,transparent);border-top-color:var(--brand);border-right-color:var(--brand)}
.eco-legend .k.lock{border-color:var(--line)}
.eco-legend .k.path{width:20px;height:0;border-radius:0;border:0;border-top:1.5px solid var(--brand)}
.eco-panel{padding:24px;border-radius:var(--r-xl);display:flex;flex-direction:column}
.eco-panel .chips{display:flex;gap:6px;flex-wrap:wrap}
.eco-panel h3{margin-top:16px;font-size:22px;font-weight:300;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.eco-panel p{margin-top:8px;font-size:14px;color:var(--body)}
.eco-panel .kv{margin-top:18px;border-top:1px solid var(--line2)}
.eco-panel .kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.eco-panel .kv span{color:var(--muted)}
.eco-panel .kv b{color:var(--ink);font-weight:500;text-align:right}
.eco-panel .needs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.eco-panel .gate{margin-top:auto;padding-top:20px}
.eco-panel .gate .lk{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--glass-2);border:1px solid var(--glass-line);font-size:13.5px;color:var(--body)}
.eco-panel .gate .lk b{display:block;color:var(--ink);font-weight:600}
.eco-panel .gate .bar{margin-top:10px}
.sent-ok{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);font-weight:500}
.eco-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.eco-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);text-align:left;transition:border-color .2s}
.eco-row:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.eco-row b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.eco-row div span{display:block;font-size:12px;color:var(--muted)}
.eco-row .st{margin-left:auto}
.eco-row.locked b{color:var(--body)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--glass-line);background:var(--glass);font-size:13.5px;font-weight:500;color:var(--body);transition:all .2s}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ================= MODULES ================= */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.hello p{margin-top:10px;color:var(--muted);max-width:64ch}
.ringsec+.ringsec{margin-top:40px}
.ringsec .rh{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ringsec .rh b{font-size:19px;font-weight:500;color:var(--ink)}
.ringsec .rh span{font-size:13px;color:var(--muted)}
.ringsec .rh .rl{flex:1;height:1px;background:var(--line);min-width:40px}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.mod{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:22px;border-radius:var(--r-lg);min-height:230px;transition:border-color .25s var(--ease),transform .45s var(--ease)}
.mod:hover{border-color:var(--h-line);transform:translate3d(0,-3px,0)}
.mod .n{font-size:44px;font-weight:150;letter-spacing:-.04em;line-height:1;color:var(--h)}
.mod h3{margin-top:18px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.mod p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mod .foot{margin-top:auto;padding-top:18px}
.mod .foot .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:12.5px;color:var(--muted)}
.mod .foot .row b{color:var(--h);font-weight:600}
.mod.locked{background:var(--glass-2)}
.mod.locked .n{color:var(--muted);opacity:.6}
.mod.locked h3{color:var(--body)}
.mod .lockrow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
.mod .lockrow .ic{width:15px;height:15px}
.mod.done .foot .row b{color:var(--ok)}
.mod .mini{position:absolute;right:12px;top:26px}
.mod .mini .stack{width:84px;height:84px}
.mod .mini .plates{width:52px;height:52px;--gap:6px}
.mod .mini .plate{border-radius:8px}

/* ================= MODULE PAGE ================= */
.mhero{position:relative;overflow:hidden;padding:34px;border-radius:var(--r-xl);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:center;background:color-mix(in srgb,var(--h) 9%,var(--glass));border-color:var(--h-line)}
.mhero .n{font-size:88px;font-weight:120;letter-spacing:-.05em;line-height:.9;color:var(--h)}
.mhero h1{margin-top:14px;font-size:clamp(30px,3.4vw,46px);font-weight:250;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.mhero p.line{margin-top:12px;max-width:60ch;font-size:15.5px}
.mhero .outc{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);max-width:60ch;font-size:14px;color:var(--ink)}
.mhero .outc .eyebrow{color:var(--h);font-size:10px;margin-bottom:4px}
.mhero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mhero .meta .chip{background:var(--glass)}
.mhero .scene{display:flex;flex-direction:column;align-items:center;text-align:center}
.mhero .scene .stack{width:300px;height:290px;padding-top:80px}
.mhero .scene .plates{width:170px;height:170px;--gap:24px}
.mhero .scene b{margin-top:6px;font-size:15px;font-weight:600;color:var(--ink)}
.mhero .scene span{font-size:12.5px;color:var(--muted);max-width:30ch}
.lockban{display:flex;gap:14px;align-items:center;margin-top:16px;padding:16px 18px;border-radius:var(--r)}
.lockban b{color:var(--ink);font-weight:600}
.mwrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.path{padding:10px;border-radius:var(--r-lg)}
.pstep{position:relative}
.pstep a{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:14px;transition:background .2s}
.pstep a:hover{background:var(--hover)}
.pstep.sel a{background:var(--h-soft)}
.pstep+.pstep::before{content:"";position:absolute;left:29px;top:-9px;width:2px;height:18px;background:var(--line);z-index:0}
.pstep.done+.pstep::before{background:var(--h)}
.pnode{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px}
.pnode .ic{width:17px;height:17px}
.pstep.done .pnode{background:var(--h);border-color:var(--h);color:#fff}
.pstep.now .pnode{border:2px solid var(--h);color:var(--h);background:var(--h-soft)}
.pstep.now .pnode::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--h);opacity:.3;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.06}}
.pstep.brief .pnode{border-radius:12px}
.pstep b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.pstep.lock b{color:var(--body)}
.pstep a>div>span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.reads{padding:18px;border-radius:var(--r-lg)}
.reads li{padding:10px 0;border-top:1px solid var(--line2)}
.reads li:first-of-type{border-top:0}
.reads a,.reads div{display:block}
.reads b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.reads b .ic{width:14px;height:14px;color:var(--muted)}
.reads a:hover b{color:var(--brand)}
.reads span{font-size:12.5px;color:var(--muted);line-height:1.45}

.reader{padding:36px;border-radius:var(--r-xl);min-width:0}
.reader .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.reader .chips .pos{margin-left:auto;font-size:12.5px;color:var(--muted)}
.reader h1{margin-top:18px;font-size:clamp(28px,3vw,40px);font-weight:250;letter-spacing:-.03em;color:var(--ink);line-height:1.08}
.oneth{margin-top:18px;padding:14px 18px;border-radius:16px;background:var(--h-soft);border:1px solid var(--h-line)}
.oneth .eyebrow{color:var(--h);font-size:10px}
.oneth p{margin-top:2px;font-size:16px;font-weight:500;color:var(--ink)}
.reader .body{margin-top:22px;font-size:16px;line-height:1.75;color:var(--body);max-width:68ch}
.reader h4{margin-top:34px;margin-bottom:12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.yt{border-radius:18px;overflow:hidden;background:var(--glass);border:1px solid var(--glass-line)}
.yt .play{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.yt .play img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.yt .play:hover img{transform:scale(1.04)}
.yt .play .pb{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--navy);transition:transform .3s var(--ease)}
.yt .play:hover .pb{transform:scale(1.08)}
.yt .play .pb .ic{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px}
.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.yt .meta{padding:12px 14px}
.yt .meta b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.yt .meta span{font-size:12px;color:var(--muted)}
.yt.studio .play{display:grid;place-items:center;cursor:default;background:linear-gradient(135deg,var(--navy),var(--navy2))}
.yt.studio .play .soon{color:#C9D4EA;font-size:13px;text-align:center;padding:0 20px}
.yt.studio .play .soon b{display:block;color:#fff;font-size:15px;font-weight:500;margin-top:10px}
.secs{display:grid;gap:18px}
.secs h3{font-size:17px;font-weight:600;color:var(--ink)}
.secs p{margin-top:6px;font-size:15px;line-height:1.7;max-width:68ch}
.rows{border-radius:16px;border:1px solid var(--glass-line);overflow:hidden;background:var(--glass-2)}
.rows div{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.6fr);gap:16px;padding:13px 18px;border-top:1px solid var(--line2);font-size:14.5px;align-items:baseline}
.rows div:first-child{border-top:0}
.rows b{color:var(--ink);font-weight:600}
.rows span{color:var(--body);line-height:1.55}
.sample{border-radius:16px;overflow:hidden;border:1px solid rgba(214,226,245,.12);background:var(--navy)}
.sample .sh{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 16px;border-bottom:1px solid rgba(214,226,245,.1);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8FA0C2}
.sample .sh button{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:#C9D4EA;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:8px}
.sample .sh button:hover{background:rgba(255,255,255,.06)}
.sample .sh button .ic{width:15px;height:15px}
.sample pre{margin:0;padding:16px 18px;font-family:var(--code);font-size:13px;line-height:1.7;color:#DDE6F7;white-space:pre-wrap;word-break:break-word}
.note{padding:16px 18px;border-radius:16px;background:var(--h-soft);border:1px solid var(--h-line);border-left:3px solid var(--h)}
.note b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.note p{margin-top:4px;font-size:14.5px;line-height:1.65;color:var(--body)}
.build{margin-top:34px;padding:24px;border-radius:var(--r-lg);background:var(--glass-2);border:1px solid var(--glass-line)}
.build .bh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.build .bh b{font-size:17px;font-weight:600;color:var(--ink)}
.build .bh>span:last-child{margin-left:auto;font-size:12.5px;color:var(--muted)}
.steps{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);font-size:14.5px;color:var(--ink);transition:border-color .2s,background .2s}
.step:hover{border-color:var(--h-line)}
.step .bx{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:all .25s var(--ease)}
.step .bx .ic{width:14px;height:14px;stroke-width:2.4}
.step[aria-checked="true"]{background:color-mix(in srgb,var(--h) 8%,var(--glass))}
.step[aria-checked="true"] .bx{background:var(--h);border-color:var(--h);color:#fff}
.step[aria-checked="true"] .t{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.step[disabled]{pointer-events:none;opacity:.65}
.adds{margin-top:16px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--h-soft);border:1px solid var(--h-line);font-size:14.5px;color:var(--ink)}
.adds .ic{color:var(--h);margin-top:2px}
.adds small{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--h)}
.checks{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.act{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.act .note2{font-size:13px;color:var(--muted)}
.donebox{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--ok) 11%,transparent);color:var(--ok);font-size:14.5px;font-weight:500}
.donebox .ic{stroke-width:2}

/* the brief: a mission, on navy */
.mission{position:relative;overflow:hidden;padding:40px;border-radius:var(--r-xl);background:var(--navy);color:#C9D4EA;border:1px solid rgba(214,226,245,.1);
  --blue:#7B9BFF;--violet:#A495FF;--gold:#E3B45C;--rose:#F08FAE;--teal:#49C79E;--sky:#5AB4FF;--coral:#F2946E;--indigo:#9296FF;--card:#0B1A38;--line:rgba(214,226,245,.12);--line2:rgba(214,226,245,.07);--ink:#EEF3FD;--muted:#8FA0C2;--glass:rgba(255,255,255,.04);--glass-line:rgba(214,226,245,.12);--brand:#7B9BFF;--btn:#3A63FF;--btn-hover:#5277FF}
.mission::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(214,226,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(214,226,245,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 80% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 80% 0%,#000,transparent 70%);pointer-events:none}
.mission>*{position:relative}
.mission .code{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--h)}
.mission h1{margin-top:14px;font-size:clamp(30px,3.4vw,48px);font-weight:200;letter-spacing:-.03em;color:#fff;line-height:1.05}
.mission .client{margin-top:10px;font-size:14px;color:#8FA0C2}
.mission .ctx{margin-top:22px;font-size:17px;line-height:1.65;color:#DDE6F7;max-width:62ch}
.mission .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.mission .box{padding:20px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(214,226,245,.1)}
.mission .box .eyebrow{color:#8FA0C2}
.mission .box li{display:flex;gap:10px;margin-top:10px;font-size:14.5px;color:#EEF3FD;line-height:1.5}
.mission .box li .ic{width:17px;height:17px;color:var(--h);margin-top:2px;stroke-width:2}
.mission .crit{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.mission .crit .chip{background:rgba(255,255,255,.06);color:#C9D4EA;height:30px;padding:0 12px}
.mission .crit .chip.on{background:color-mix(in srgb,var(--h) 24%,transparent);color:#fff}
.mission .form{margin-top:28px;display:grid;gap:10px;max-width:640px}
.mission .input{background:rgba(255,255,255,.05);border-color:rgba(214,226,245,.16);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.mission .input::placeholder{color:#8190AD}
.mission .lockban{background:rgba(255,255,255,.04);border:1px solid rgba(214,226,245,.12);color:#C9D4EA}
.mission .lockban b{color:#fff}
.mission .donebox{background:rgba(73,199,158,.14);color:#6FE0B5}

/* ================= SIGN IN ================= */
.auth{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.auth-l{display:flex;flex-direction:column;padding:32px 48px}
.auth-top{display:flex;align-items:center;justify-content:space-between}
.auth-form{width:100%;max-width:400px;margin:auto;padding:48px 0}
.auth-form .display{margin-top:16px}
.auth-form .lede{margin-top:16px;font-size:15.5px}
.field{display:block;margin-top:32px}
.field span{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px}
.input{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);font-size:15.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--muted)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
textarea.input{height:auto;min-height:96px;padding:14px 16px;resize:vertical;line-height:1.55}
.auth-form .btn.lg{margin-top:14px}
.or{display:flex;align-items:center;gap:14px;margin:24px 0;font-size:12.5px;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.note-s{font-size:12.5px;line-height:1.55;color:var(--muted)}
.auth-form .note-s{margin-top:14px}
.err{margin-top:10px;font-size:13px;color:var(--coral)}
.auth .sent{margin-top:32px;padding:22px;border-radius:var(--r)}
.auth .sent .tile{margin-bottom:14px}
.auth .sent b{color:var(--ink);font-weight:600}
.auth .sent .btn{margin-top:16px}
.auth-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.auth-r{position:relative;margin:14px;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line)}
.auth-r .floorplane{position:absolute;left:-40%;right:-40%;bottom:-6%;height:55%;transform-origin:50% 100%;transform:perspective(560px) rotateX(68deg);background-image:linear-gradient(var(--floor) 1px,transparent 1px),linear-gradient(90deg,var(--floor) 1px,transparent 1px);background-size:56px 56px;animation:travel2 16s linear infinite;-webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%)}
.auth-r .orbitv{height:470px;max-width:620px;margin:0 auto}
.auth-r .cap{position:relative;z-index:2;margin-top:-6px;text-align:center;padding:0 24px}
.auth-r .cap b{display:block;font-size:22px;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.auth-r .cap span{font-size:13.5px;color:var(--muted)}

/* ================= ONBOARDING ================= */
.ob{max-width:800px;margin:0 auto;min-height:calc(100vh - 150px);display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.welcome{text-align:center;align-items:center}
.welcome .orbitv{height:330px;max-width:600px;margin:0 auto}
.welcome .display{max-width:16ch;margin:14px auto 0}
.welcome .lede{margin:18px auto 0;text-align:center}
.wsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:36px 0 32px;text-align:left;width:100%}
.wstep{padding:20px;border-radius:var(--r)}
.wstep .num{font-size:11px;color:var(--brand)}
.wstep b{display:block;margin-top:12px;font-size:15px;font-weight:600;color:var(--ink)}
.wstep span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.qhead{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.qhead .segs{flex:1}
.qhead .step-n{font-size:12.5px;color:var(--muted);white-space:nowrap}
.q h1{font-size:clamp(26px,3vw,38px);line-height:1.15;font-weight:250;letter-spacing:-.025em;color:var(--ink)}
.q .hint{margin-top:10px;color:var(--muted)}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
.opts.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:14px;text-align:left;min-height:74px;padding:14px 48px 14px 14px;border-radius:var(--r);transition:border-color .2s,background .2s}
.opt:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.opt .tile{--h:var(--muted);--h-soft:transparent;--h-line:var(--line);transition:all .25s var(--ease)}
.opt b{display:block;font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.opt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.opt .tick{position:absolute;right:16px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent;transition:all .2s}
.opt .tick .ic{width:13px;height:13px;stroke-width:2.4}
.opt[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--glass))}
.opt[aria-pressed="true"] .tile{--h:var(--brand);--h-line:color-mix(in srgb,var(--brand) 30%,var(--line))}
.opt[aria-pressed="true"] .tick{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.multi .tick{border-radius:6px}
.qtext{margin-top:32px}
.qtext .input{height:62px;font-size:20px}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:36px}
.result-h{text-align:center;margin-bottom:32px}
.result-h .display{max-width:18ch;margin:14px auto 0}
.result-h .lede{margin:14px auto 0}
.placed{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:8px 14px 8px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok) 12%,var(--glass));color:var(--ok);font-size:13.5px;font-weight:500}
.placed .tile{width:28px;height:28px;border-radius:50%;--h:var(--ok)}
.res-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px}
.startcard{padding:26px;background:color-mix(in srgb,var(--h) 10%,var(--glass));border-color:var(--h-line)}
.startcard .eyebrow{color:var(--h)}
.startcard h2{margin-top:14px;font-size:28px;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.week{margin-top:14px}
.week li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line2);font-size:14px;color:var(--ink)}
.week li:first-child{border-top:0}
.week li span{color:var(--muted);font-size:12.5px}
.dir{display:flex;gap:14px;align-items:center}
.dir b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.dir div span{display:block;font-size:13px;color:var(--muted)}
.need li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line2);font-size:14px;color:var(--ink)}
.need li:first-child{border-top:0}
.need li .ic{width:18px;height:18px;color:var(--ok);margin-top:2px}
.need li small{display:block;font-size:12.5px;color:var(--muted)}
.res-foot{display:flex;justify-content:center;margin-top:30px}

/* ================= PROFILE ================= */
.phero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;padding:32px;border-radius:var(--r-xl)}
.phero h1{font-size:clamp(30px,3.4vw,48px);font-weight:200;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.phero h1 b{font-weight:600}
.phero .rl{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--h)}
.phero .rl i{width:7px;height:7px;border-radius:50%;background:var(--h)}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.facts .chip{height:30px;padding:0 12px;font-size:12.5px}
.facts .chip b{color:var(--ink);font-weight:600}
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.pstat{padding:16px;border-radius:var(--r)}
.pstat b{display:block;font-size:26px;font-weight:200;color:var(--ink);letter-spacing:-.02em}
.pstat span{font-size:12px;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.skillrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line2)}
.skillrow:first-child{border-top:0;padding-top:4px}
.skillrow b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.skillrow .v{font-size:12.5px;color:var(--muted)}
.dims{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dim{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.dim .ring circle{stroke-width:2}
.dim .ring .num{font-size:13px;color:var(--muted)}
.dim>span{font-size:12px;line-height:1.3;color:var(--body)}
.dims-note{margin-top:18px;font-size:13px;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 10px 16px;border-radius:var(--r)}
.bdg .medal{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--h-soft);color:var(--h);border:1.5px solid var(--h-line)}
.bdg .medal .ic{width:24px;height:24px}
.bdg b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.bdg>span:last-child{font-size:11.5px;line-height:1.35;color:var(--muted)}
.bdg.off .medal{--h:var(--muted);--h-soft:transparent;--h-line:var(--line);border-style:dashed}
.bdg.off b{color:var(--body)}
.settings li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line2)}
.settings li:first-child{border-top:0;padding-top:0}
.settings b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.settings span{font-size:12.5px;color:var(--muted)}
.seg-toggle{display:inline-flex;padding:3px;border-radius:12px;background:var(--glass-2);border:1px solid var(--glass-line)}
.seg-toggle button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--muted)}
.seg-toggle button .ic{width:16px;height:16px}
.seg-toggle button[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.cross{display:flex;align-items:center;gap:20px;padding:22px 24px;margin-bottom:18px;border-radius:var(--r-lg);background:var(--navy);color:#C9D4EA;border:1px solid rgba(214,226,245,.1)}
.cross .tile{--h:#9FB4FF;--h-soft:rgba(255,255,255,.06);--h-line:rgba(255,255,255,.14)}
.cross b{display:block;font-size:17px;font-weight:600;color:#fff}
.cross .btn{margin-left:auto}

/* ================= MOMENTS ================= */
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.overlay.in{opacity:1;pointer-events:auto}
.lvup{background:var(--navy);color:#C9D4EA;overflow-y:auto;--blue:#7B9BFF;--violet:#A495FF;--gold:#E3B45C;--rose:#F08FAE;--teal:#49C79E;--sky:#5AB4FF;--coral:#F2946E;--indigo:#9296FF;--card:#0B1A38;--line:rgba(214,226,245,.12)}
.lvup::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(214,226,245,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(214,226,245,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 10%,transparent 65%);mask-image:radial-gradient(circle at 50% 45%,#000 10%,transparent 65%)}
.lvup .inner{position:relative;max-width:640px;width:100%;text-align:center}
.lvup .eyebrow{color:#9FB4FF}
.lvup .big{margin-top:10px;font-family:var(--mono);font-size:clamp(88px,15vw,148px);line-height:1;color:#fff;letter-spacing:.02em}
.lvup h2{margin-top:8px;font-size:clamp(28px,4vw,44px);font-weight:200;letter-spacing:-.02em;color:#fff}
.lvup p.line{margin-top:10px;font-size:15.5px}
.lvup .got{margin-top:34px;display:flex;flex-direction:column;gap:10px;text-align:left}
.lvup .got li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(214,226,245,.12)}
.lvup .got .tile{--h-soft:rgba(255,255,255,.06);--h-line:rgba(255,255,255,.14)}
.lvup .got b{display:block;color:#fff;font-weight:600;font-size:15px}
.lvup .got div span{display:block;font-size:12.5px;color:#8FA0C2}
.lvup .btn{margin-top:30px}
.overlay.in .stg{animation:enter .9s var(--ease) both}
.overlay.in .s1{animation-delay:.15s}.overlay.in .s2{animation-delay:.35s}.overlay.in .s3{animation-delay:.55s}.overlay.in .s4{animation-delay:.75s}.overlay.in .s5{animation-delay:.95s}.overlay.in .s6{animation-delay:1.1s}.overlay.in .s7{animation-delay:1.25s}
.modal{background:color-mix(in srgb,var(--navy) 55%,transparent)}
.modal .sheet{width:100%;max-width:880px;max-height:calc(100vh - 48px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px;transform:translateY(12px);transition:transform .5s var(--ease)}
.modal.in .sheet{transform:none}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.roleopt{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;border-radius:var(--r);border:1px solid var(--line);transition:border-color .2s,background .2s}
.roleopt:hover{background:var(--hover)}
.roleopt b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.roleopt span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.roleopt[aria-pressed="true"]{border-color:var(--h);background:var(--h-soft)}
.roleopt .rec{margin-left:auto;align-self:flex-start}
.sheet-f{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.toast{position:fixed;left:50%;bottom:28px;z-index:120;display:flex;align-items:center;gap:14px;padding:12px 22px 12px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.toast.in{transform:translate(-50%,0);opacity:1}
.toast b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.toast div span{display:block;font-size:12.5px;color:var(--muted)}
.toast .xp{margin-left:10px;font-size:13px;font-weight:600;color:var(--h)}

/* the signal */
.signal{border-radius:var(--r-xl);padding:8px 26px}
.signal ol{display:grid}
.signal li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 0;border-top:1px solid var(--line2)}
.signal li:first-child{border-top:0}
.signal li.more{display:none}
.signal.all li.more{display:grid}
.signal time{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);line-height:1}
.sg-t b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.sg-t span{display:block;margin-top:2px;font-size:13px;color:var(--muted);line-height:1.45}
.sg-m{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.sg-src{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;color:var(--body);min-height:32px}
.sg-src .ic{width:13px;height:13px}
.sg-src:hover{color:var(--brand)}
.sg-all{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border-top:1px solid var(--line2);font-size:13px;font-weight:500;color:var(--brand)}
.sg-all .ic{width:14px;height:14px;transition:transform .3s var(--ease);transform:rotate(90deg)}
.sg-all[aria-expanded="true"] .ic{transform:rotate(-90deg)}
.chip.upd,.mhero .meta .chip.upd{background:var(--brand-soft);color:var(--brand);border:0}
/* the live feed: the same rows as the studio's list, titles link out */
.signal.live .sg-t a.lt{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.signal.live .sg-t a.lt:hover{color:var(--brand)}
.signal.live .sg-t span{display:flex;align-items:center;gap:6px;margin-top:3px}
.signal.live .sg-t span .ic{width:13px;height:13px;flex:none}
.live-st{display:flex;align-items:center;gap:10px;padding:20px 0;font-size:14px;color:var(--muted)}
.live-st .ic{width:16px;height:16px}
.live-foot{padding:12px 0 14px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted)}
.checked{margin-top:14px}
.checked>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:500;color:var(--body)}
.checked>summary::-webkit-details-marker{display:none}
.checked>summary .ic{width:15px;height:15px;color:var(--ok)}
.checked>summary:hover{color:var(--ink)}
.checked[open]>summary{margin-bottom:8px}

/* ================= PATHWAYS ================= */
/* a pathway icon: the ILLUSORR mark in the pathway colour, with the craft as a small glyph */
.pic{position:relative;display:block;flex:none;width:44px;height:44px;color:var(--h)}
.pic img{display:block;width:100%;height:100%;object-fit:contain}
.pic-g{position:absolute;right:-4%;bottom:-4%;width:42%;height:42%;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--h-line);color:var(--h)}
.pic-g .ic{width:58%;height:58%}
.pic.sm{width:40px;height:40px}
.pic.md{width:64px;height:64px}
.pic.lg{width:78px;height:78px}
.pic.xl{width:170px;height:170px}.pic.xl .pic-g{width:30%;height:30%;right:4%;bottom:4%}

/* choose: the hero with the five focuses in orbit */
.pw-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.1fr);align-items:center;gap:20px;padding:44px;border-radius:var(--r-xl);margin-bottom:26px}
.pw-hero .floorplane{position:absolute;left:-30%;right:-30%;bottom:-10%;height:60%;transform-origin:50% 100%;transform:perspective(620px) rotateX(70deg);background-image:linear-gradient(var(--floor) 1px,transparent 1px),linear-gradient(90deg,var(--floor) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);pointer-events:none}
.pwh-copy{position:relative;z-index:2}
.pwh-copy .eyebrow{display:flex;align-items:center;gap:8px}
.pwh-copy .display{margin-top:16px}
.pwh-copy .lede{margin-top:16px;max-width:52ch;font-size:15.5px}
.pwh-now{margin-top:18px;font-size:13.5px;color:var(--muted)}
.pwh-now a{color:var(--brand);font-weight:600}
.pw-orbit{position:relative;z-index:1;height:360px}
.po-ring{position:absolute;inset:0;width:100%;height:100%}
.po-ring ellipse{fill:none;stroke:color-mix(in srgb,var(--brand) 32%,var(--line));stroke-width:1;vector-effect:non-scaling-stroke}
.po-ring ellipse.in{opacity:.45}
.po-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.po-core .pic{width:150px;height:150px}
.po-core b{font-size:12px;font-weight:600;color:var(--ink);padding:5px 12px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);white-space:nowrap}
.po-n{position:absolute;left:calc(50% + var(--c) * 44%);top:calc(50% + var(--s) * 40%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
.po-n b{font-size:12px;font-weight:500;color:var(--body);white-space:nowrap;padding:3px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.po-n .pic{transition:transform .35s var(--ease)}
.po-n:hover .pic,.po-n.mine .pic{transform:scale(1.12)}
.po-n.mine b{color:var(--h);font-weight:600}
.po-n:hover b{color:var(--ink)}

.pw-filter{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:18px}
.pw-filter>span{font-size:14px;font-weight:500;color:var(--ink)}
.pw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* a pathway card: its icon, then the words */
.pcard{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-xl);transition:border-color .25s var(--ease),transform .45s var(--ease)}
.pcard:hover{border-color:var(--h-line);transform:translateY(-3px)}
.pcard.mine{border-color:var(--h-line)}
.pc-b{position:relative;display:flex;flex-direction:column;flex:1;padding:24px 24px 22px}
.pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:22px}
.pc-b .eyebrow{font-size:10.5px}
.pc-b h3{margin-top:8px;font-size:24px;font-weight:300;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.pc-b .hook,.pwhero .hook{margin-top:10px;font-size:15px;font-weight:500;color:var(--ink);line-height:1.45}
.pc-b .ln{margin-top:6px;font-size:14px;color:var(--body);line-height:1.55;flex:1}
.pw-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--muted)}
.pw-meta i{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.pw-meta .chip{height:24px;font-weight:600;color:var(--ink)}
.pw-prog{display:flex;align-items:center;gap:12px;margin-top:14px}
.pw-prog .bar{flex:1;margin:0}
.pw-prog span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-go{display:inline-flex;align-items:center;gap:6px;margin-top:18px;min-height:32px;font-size:13.5px;font-weight:600;color:var(--h)}
.pc-go .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.pcard:hover .pc-go .ic{transform:translateX(3px)}
.pw-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.pw-flow::before{content:"";position:absolute;left:15px;right:15px;top:15px;height:1px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 20%,var(--line)))}
.pf{position:relative;padding-right:22px}
.pf .fnum{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--brand);width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--bg);display:grid;place-items:center;line-height:1}
.pf b{display:block;margin-top:14px;font-size:15px;font-weight:600;color:var(--ink)}
.pf p{margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* one pathway */
.pwhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:40px;align-items:center;padding:40px;border-radius:var(--r-xl)}
.pwhero.glass{background:color-mix(in srgb,var(--h) 7%,var(--glass))}
.pwh-c .display{margin-top:14px}
.pw-prog.lg{margin-top:22px;max-width:480px}
.pwh-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
/* the pathway's icon on its plate, inside two orbit rings */
.pwh-v{position:relative;display:grid;place-items:center;height:300px}
.pwh-v i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid var(--h-line);transform:translate(-50%,-50%) rotateX(66deg);pointer-events:none}
.pwh-v .r1{width:300px;height:300px}
.pwh-v .r2{width:220px;height:220px;opacity:.6}
.pwh-v .pic.xl{position:relative;z-index:1}
.pwh-p{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:2;background:var(--card);border:1px solid var(--h-line);color:var(--h);font-weight:600}
.pw-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;margin-top:16px}
.pw-info .card{padding:22px}
.pw-info .dir{margin-top:12px}
.pw-opens{margin-top:6px}
.pw-opens li+li{border-top:1px solid var(--line2)}
.pw-opens a{display:flex;align-items:center;gap:12px;padding:10px 0;min-height:44px}
.pw-opens b{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.pw-opens div span{display:block;font-size:12px;color:var(--muted)}
.pw-skills{display:flex;flex-wrap:wrap;gap:8px}
.pw-skills .chip{height:30px;padding:0 12px}
.missions{display:grid;gap:14px}
.msn{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.msn::before{content:"";position:absolute;left:23px;top:66px;bottom:-14px;width:2px;background:var(--line)}
.msn:last-child::before{display:none}
.msn.done::before{background:var(--h)}
.mnode{width:48px;height:48px;margin-top:18px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;line-height:1;color:var(--muted);background:var(--card);border:1.5px solid var(--line)}
.mnode .ic{width:18px;height:18px}
.msn.done .mnode{background:var(--h);border-color:var(--h);color:#fff}
.msn.now .mnode{border:2px solid var(--h);color:var(--h)}
.mcard{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;padding:24px;border-radius:var(--r-lg);transition:border-color .25s var(--ease)}
.mcard:hover{border-color:var(--h-line)}
.mc-t h3{margin-top:8px;font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.mc-t p{margin-top:6px;font-size:14px;color:var(--body);line-height:1.55}
.mc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mc-t .bar{margin-top:14px;max-width:320px}
.msn.lock .mc-t h3{color:var(--body)}
.mc-s{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-left:20px;border-left:1px solid var(--line2)}
.mc-s .mini .stack{width:120px;height:104px;padding-top:26px}
.mc-s .mini .plates{width:62px;height:62px;--gap:7px}
.mc-s .mini .plate{border-radius:9px}
.mc-s small{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mc-s b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mc-s .st{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}
.mc-s .st.done{color:var(--ok)}
.mc-s .st.now{color:var(--h)}
.msn.proj .mission{margin:0}
/* the portal's continue cards */
.pw-cont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pwc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 24px;border-radius:var(--r-xl);transition:border-color .25s var(--ease)}
.pwc:hover{border-color:var(--h-line,var(--line))}
.pwc h3{margin-top:4px;font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.pwc .pw-meta{margin-top:8px}
.pwc .pw-prog{margin-top:12px}
.pwc .nx{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.45}
.pwc>.ic{color:var(--h,var(--brand))}
.pwc.choose{border-style:dashed}
.pw-pick{display:grid;grid-template-columns:repeat(3,40px);gap:2px 4px;width:128px}

/* profile and placement */
.pw-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pwm{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px;border-radius:var(--r-lg);text-align:center}
.pwm b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.pwm span{font-size:12px;color:var(--muted)}
.rpath .rp-h{display:flex;align-items:center;gap:16px;margin-top:14px}
.rpath h2{font-size:22px;font-weight:400;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.rpath .muted{margin-top:8px;font-size:13.5px}
.rp-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rp-opts .chip{height:44px;padding:0 16px;font-size:13px;cursor:pointer}

@media (max-width:1240px){
  .pw-hero{grid-template-columns:minmax(0,1fr);padding:36px}
  .pw-orbit{height:320px}
  .pw-grid,.people.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .pw-flow::before{display:none}
}

/* people worth following */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.people.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 18px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:border-color .25s var(--ease)}
.person:hover{border-color:var(--h-line)}
.person .mono{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1;color:var(--h);background:var(--h-soft);border:1px solid var(--h-line)}
.person b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.person b .chip{height:22px;padding:0 8px;font-size:11px}
.person .kind{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;color:var(--muted)}
.person .kind .ic{width:13px;height:13px}
.person p{margin-top:6px;font-size:13.5px;color:var(--body);line-height:1.5}
.person>.ic{width:15px;height:15px;color:var(--muted);margin-top:3px}
.person:hover>.ic{color:var(--h)}

/* ================= RESPONSIVE ================= */
@media (max-width:1240px){
  .portal{grid-template-columns:minmax(0,1fr) minmax(320px,1fr)}
  .p-side{grid-column:1/-1;padding:0 22px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .eco-wrap{grid-template-columns:minmax(0,1fr)}
  .mwrap{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:960px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-r{display:none}
  .auth-l{padding:24px 20px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:10px 16px 112px}
  .topbar{top:10px;padding:6px 6px 6px 14px;margin-bottom:22px}
  .topbar .mlogo{display:flex}
  .topbar .crumb{display:none}
  .topbar .me span{display:none}
  .topbar .me{padding:3px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;padding:6px;border-radius:24px}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:16px;font-size:11px;font-weight:500;color:var(--muted)}
  .tabbar a.on{color:var(--brand);background:var(--brand-soft)}
  .tabbar a .ic{width:22px;height:22px}
  .portal{grid-template-columns:minmax(0,1fr)}
  .p-copy{padding:28px 24px 0}
  .p-stage{min-height:360px}
  .orbitv{height:340px}
  .p-side{grid-template-columns:minmax(0,1fr);padding:0 16px 16px}
  .mhero{grid-template-columns:minmax(0,1fr);padding:26px}
  .mhero .n{font-size:64px}
  .mhero .scene{order:-1}
  .mhero .scene .stack{height:230px;padding-top:64px}
  .mhero .scene .plates{width:130px;height:130px;--gap:18px}
  .mwrap{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .path{display:flex;overflow-x:auto;gap:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .path::-webkit-scrollbar{display:none}
  .pstep{flex:0 0 auto}
  .pstep a{grid-template-columns:36px auto;max-width:230px}
  .pstep+.pstep::before{display:none}
  .reads{display:none}
  .reader{padding:24px 20px}
  .mission{padding:26px 22px}
  .mission .cols{grid-template-columns:minmax(0,1fr)}
  .phero{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;padding:28px 20px}
  .phero .rl,.facts{justify-content:center}
  .two,.res-grid{grid-template-columns:minmax(0,1fr)}
  .eco{min-height:0}
  .pw-cont{grid-template-columns:minmax(0,1fr)}
  .pwhero{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px}
  .pwh-v{height:230px}
  .pwh-v .r1{width:230px;height:230px}.pwh-v .r2{width:170px;height:170px}
  .pic.xl{width:130px;height:130px}
  .pw-info{grid-template-columns:minmax(0,1fr)}

  .mcard{grid-template-columns:minmax(0,1fr)}
  .mc-s{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:14px;align-items:center;justify-items:start;text-align:left;border-left:0;border-top:1px solid var(--line2);padding:16px 0 0}
  .mc-s .mini{grid-row:1/span 3}
  .mc-s .st{margin-top:2px}
  .mc-s .mini .stack{width:80px;height:70px;padding-top:14px}
  .mc-s .mini .plates{width:44px;height:44px;--gap:5px}
}
@media (max-width:640px){
  body{font-size:16px}
  .display{font-size:clamp(30px,8.4vw,36px)}
  .card{padding:20px}
  .opts,.opts.cols3,.roles,.wsteps{grid-template-columns:minmax(0,1fr)}
  .pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dims{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  .cross{flex-wrap:wrap}.cross .btn{margin-left:0;width:100%}
  .qfoot .btn{flex:1}
  .mods,.eco-list,.pw-grid,.pw-flow,.people,.people.three{grid-template-columns:minmax(0,1fr)}
  .pw-hero{padding:24px 20px}
  .pw-orbit{height:270px}
  .pw-orbit .po-n{left:calc(50% + var(--c) * 32%)}
  .po-ring{left:12%;width:76%}
  .po-n b{font-size:11px;padding:2px 8px}
  .msn{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .mnode{width:36px;height:36px;margin-top:20px}
  .msn::before{left:17px;top:58px}
  .mcard{padding:20px}
  .pwc{grid-template-columns:auto minmax(0,1fr);padding:18px}
  .pwc>.ic{display:none}
  .tabbar a{font-size:10.5px}
  .signal{padding:4px 18px}
  .signal li,.signal.all li.more{grid-template-columns:minmax(0,1fr);gap:8px}
  .sg-m{justify-content:flex-start}
  .rows div{grid-template-columns:minmax(0,1fr);gap:2px}
  .eco{padding:20px 16px 16px}
  .flow{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .fwires{display:none}
  .flow.focus .fnode.faint{opacity:.6}
  .fnode.hot{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
  .fnode{min-height:44px}
  .modal .sheet{padding:22px 18px;border-radius:22px}
  .toast{left:16px;right:16px;transform:translateY(24px)}
  .toast.in{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .rise{filter:none}
}