/* NEXUS · The Observatory
   A self-contained interface: local fonts, procedural light, no remote assets. */
@font-face{font-family:Outfit;font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:Outfit;font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/source-serif-4-400-italic.woff2') format('woff2')}
:root{
  --bg:#0b1012;--bg-elev:#131b1d;--panel:#11191b;--line:rgba(186,220,212,.10);
  --text:#e6efeb;--dim:#95a7a1;--faint:#84958f;--ink:var(--text);--muted:var(--dim);
  --teal:#a9e9cc;--teal-soft:rgba(169,233,204,.08);--gold:#d9c394;--gold-soft:rgba(217,195,148,.08);
  --danger:#ee9e9e;--success:#a9e9cc;--warn:#dfbb83;--radius:16px;
  --font:'Source Serif 4',Georgia,serif;--serif:var(--font);--ui:Outfit,'Avenir Next',sans-serif;--display:var(--ui);
  --safe-b:env(safe-area-inset-bottom,0px);--ease-out:cubic-bezier(.22,1,.36,1);--rail:216px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scrollbar-color:#344541 transparent;scrollbar-width:thin}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
[hidden],.hidden{display:none!important}
.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.dim{color:var(--dim)}
.centre{text-align:center}
.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:500;color:var(--dim);line-height:1.5}
h1,h2,h3{font-weight:500}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:23px;min-height:20px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font:10px var(--ui);color:#a6b5b0;background:rgba(255,255,255,.025)}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.34}
#app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:115px minmax(0,1fr) 46px;height:100dvh;overflow:hidden}

/* Persistent navigation and page framing. */
.topbar{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;background:rgba(11,16,18,.94);border-right:1px solid var(--line);padding:36px 20px 0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:0 13px;flex-shrink:0}
.brand-name{display:block;font-size:33px;font-weight:700;letter-spacing:-1.4px;line-height:1}
.brand-period{color:var(--teal)}
.brand-caption{display:block;font-size:8px;letter-spacing:.22em;color:var(--faint);margin-top:9px;white-space:nowrap}
.brand-mark{width:27px;height:27px;border:1px solid #a9e9cc;transform:rotate(45deg);border-radius:7px;position:relative;box-shadow:0 0 24px #a9e9cc12;flex-shrink:0}
.brand-mark::before{content:'';position:absolute;inset:4px;border:1px solid #a9e9cc66;border-radius:4px}
.brand-mark::after{content:'';position:absolute;inset:8px;border:1px solid #c3f3da;border-radius:2px;background:#a9e9cc22}
.nav-label{font-size:9px;letter-spacing:.15em;color:var(--faint);margin:55px 14px 17px}
.tabs{display:flex;flex-direction:column;gap:8px}
.tab{display:flex;align-items:center;gap:12px;position:relative;padding:13px 14px;min-height:48px;border:1px solid transparent;border-radius:9px;color:var(--dim);text-align:left;transition:background .2s,color .2s,border-color .2s}
.tab .icon{width:19px;height:19px}
.tab:hover{background:#a9e9cc06;color:var(--text)}
.tab.active{color:var(--teal);border-color:#a9e9cc1b;background:linear-gradient(105deg,#a9e9cc12,#a9e9cc06)}
.nav-indicator{margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px #a9e9cc55;opacity:0}
.active .nav-indicator{opacity:1}
.nav-count{margin-left:auto;font-size:10px;background:#ffffff08;border:1px solid var(--line);padding:0 5px;border-radius:4px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.sidebar-bottom{margin-top:auto;padding-top:30px}
.quiet-note{padding:20px 14px 25px}
.quiet-note>.icon{color:var(--teal);width:21px;height:21px;margin-bottom:13px}
.quiet-note p{font-family:var(--font);font-style:italic;font-size:15px;color:#bfcfc6;line-height:1.65}
.quiet-note p span{color:var(--dim)}
.quiet-line{display:block;width:25px;height:1px;background:#a9e9cc44;margin-top:18px}
.sound-toggle{display:flex;align-items:center;gap:11px;min-height:48px;width:100%;padding:10px 14px;color:var(--dim);font-size:12px;border-radius:8px;margin-bottom:15px}
.sound-toggle:hover{background:var(--teal-soft);color:var(--text)}
.sound-toggle .icon{width:17px;height:17px}
.keeper{display:flex;align-items:center;gap:10px;margin:0 -20px;padding:21px 25px;border-top:1px solid var(--line);font-size:11px}
.keeper-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid #d9c3942b;background:#d9c3940d;color:var(--gold);font-family:var(--font);font-style:italic;font-size:15px}
.keeper>div>span{display:block;font-size:9px;color:var(--faint);margin-top:2px}
.workspace-head{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 34px}
.workspace-head .eyebrow{font-size:9px;margin-bottom:5px}
.workspace-head h1{font-size:29px;letter-spacing:-.9px;line-height:1.3}
.workspace-head h1>span{color:var(--teal)}
.workspace-status{display:flex;align-items:center;gap:23px}
.live-status{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.live-status i,.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px #a9e9cc33;flex-shrink:0}
.chip{display:flex;align-items:center;gap:8px;min-height:37px;border:1px solid #d9c39425;border-radius:8px;padding:6px 12px;color:var(--gold);font-size:13px;font-variant-numeric:tabular-nums}
.core-label{color:var(--dim);font-size:11px}
.workspace-footer{grid-column:2;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 35px 6px;font-size:10px;color:var(--faint)}
.workspace-footer>span{display:flex;align-items:center;gap:8px}
.keyboard-hint{white-space:nowrap}
.keyboard-hint>span{margin:0 3px}

/* Two rooms in the observatory. Cycle and utility views open over both. */
.stages{grid-column:2;grid-row:2;min-width:0;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 342px;gap:22px;margin:0 34px 6px}
.stage{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);scrollbar-width:thin;scrollbar-color:#30433c transparent}
.stage-hearth{grid-column:1;grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(ellipse 65% 43% at 50% 41%,#18352b55,transparent 100%),linear-gradient(145deg,#111b1b,#0d1517 65%);padding:25px 27px 16px}
.stage-nodes{grid-column:2;grid-row:1;padding:26px 20px 20px;background:linear-gradient(140deg,#141d1e,#101719)}
.stage-cycle,.stage-progress,.stage-more{position:absolute;inset:0;z-index:5;padding:32px 36px;background:linear-gradient(130deg,#15201e,#101719 65%);display:none}
.stage-cycle.active,.stage-progress.active,.stage-more.active{display:block}
.stage-cycle.undisclosed{display:none!important}
.stage-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.stage-head h2{font-size:25px;letter-spacing:-.6px;line-height:1.5}
.stage-nodes .stage-head h2{font-size:23px;margin-top:4px}
.stage-head .eyebrow{font-size:9px}
.section-description{font-size:12px;color:var(--dim);line-height:1.8;margin-bottom:22px}
.section-count{display:inline-flex;align-items:center;justify-content:center;min-width:23px;min-height:21px;padding:0 5px;border:1px solid var(--line);border-radius:5px;color:var(--dim);font-size:10px;letter-spacing:0;margin-left:10px;vertical-align:middle;font-variant-numeric:tabular-nums}
.bulk-tog{min-width:44px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;color:var(--teal);font-size:12px;background:#ffffff03}
.bulk-tog:hover{border-color:#a9e9cc55;background:var(--teal-soft)}

/* Signal, live sculpture, and its actionable next step. */
.observatory-heading{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;margin-bottom:22px}
.observatory-heading>.eyebrow{font-size:9px}
.tiny-diamond{font-size:17px;vertical-align:-1px;color:var(--teal);margin-right:6px}
.lattice-name{font-size:10px;color:#afc6ba;display:flex;gap:7px;align-items:center}
.lattice-name::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--teal)}
.hud{flex-shrink:0;position:relative;z-index:2}
.hud-signal{display:flex;flex-direction:column;align-items:center}
.hud-label{font-size:9px;letter-spacing:.19em;color:var(--dim)}
.hud-signal strong{font-size:clamp(40px,4.1vw,63px);font-weight:500;line-height:1.25;letter-spacing:-2.5px;font-variant-numeric:tabular-nums;font-feature-settings:'tnum';max-width:100%;overflow-wrap:anywhere}
.hud-rate{font-size:11px;color:var(--teal);background:#a9e9cc08;border:1px solid #a9e9cc15;border-radius:20px;padding:3px 11px;margin-top:6px;font-variant-numeric:tabular-nums}
.pulse-wrap{position:relative;display:grid;place-items:center;width:100%;height:clamp(275px,36vh,395px);min-height:275px;max-width:650px;flex:1 0 275px;margin:-3px 0 -7px}
#lattice-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scene-coordinate{position:absolute;top:46%;font-family:ui-monospace,monospace;font-size:7px;letter-spacing:.1em;line-height:1.8;color:#80988a;opacity:.75;text-align:left;pointer-events:none}
.coordinate-left{left:2.5%}.coordinate-right{right:2.5%;text-align:right}
.nexus-core{position:relative;width:190px;height:190px;display:grid;place-items:center;border-radius:50%;--flowglow:.35;z-index:1;transition:transform .35s var(--ease-out),background .35s}
.nexus-core:hover{background:#c6ffe909;transform:scale(1.035)}
.nexus-core:active{transform:scale(.965);background:#c6ffe916}
.nexus-core-inner{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;color:#e2fff0;background:radial-gradient(circle,#c6ffe920,transparent);filter:drop-shadow(0 0 9px #ccffe8);transition:filter .2s}
.nexus-core-inner .icon{width:28px;height:28px;stroke-width:1}
.nexus-hint{position:absolute;top:calc(50% + 32px);color:#d1f7e4;font-size:8px;letter-spacing:.28em;text-shadow:0 2px 10px #000}
.nexus-ring{position:absolute;inset:15%;border:1px solid #c6ffe90d;border-radius:50%;pointer-events:none;transition:border-color .3s}
.nexus-ring.r2{inset:4%;border-style:dashed;border-color:#c6ffe908}
.nexus-core:hover .nexus-ring{border-color:#c6ffe944}
.nexus-core.capped .nexus-core-inner{filter:saturate(.3);opacity:.65}
.pulse-invitation{position:relative;z-index:1;flex-shrink:0;margin-bottom:24px}
.pulse-invitation>span{font-size:16px;letter-spacing:-.25px}
.pulse-invitation p{font-size:10px;color:var(--dim);margin-top:7px}
.pulse-invitation kbd{margin:0 3px}
#pulse-value{color:var(--teal);margin-left:8px;font-variant-numeric:tabular-nums}
.flow-block{width:min(100%,370px);margin-bottom:24px;flex-shrink:0}
.flow-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;margin-bottom:9px;color:var(--dim)}
.flow-heading>span:first-child{display:flex;gap:6px;align-items:center;color:#d2ded8}
.flow-heading .icon{width:13px;height:13px;color:var(--teal)}
.presence{font-size:9px}
.resonance{height:4px;border-radius:10px;overflow:hidden;background:#ffffff0a}
.resonance-fill{height:100%;width:0;background:linear-gradient(90deg,#638e7c,#b5edcd);border-radius:inherit;box-shadow:0 0 10px #a9e9cc44;transition:width .15s linear}
.next-step{display:flex;gap:13px;align-items:center;width:100%;padding:15px 14px;border:1px solid #a9e9cc20;border-radius:10px;background:linear-gradient(110deg,#a9e9cc08,#a9e9cc02);text-align:left;flex-shrink:0;position:relative}
.next-step-icon{display:grid;place-items:center;background:#a9e9cc08;border:1px solid #a9e9cc15;color:var(--teal);width:34px;height:34px;border-radius:8px;flex-shrink:0}
.next-step-icon .icon{width:17px;height:17px}
.next-step>div{flex:1;min-width:0}
.next-step .eyebrow{display:block;font-size:8px;color:#b8c9be}
.next-step>.icon{width:17px;height:17px;color:var(--teal)}
.goal{font-size:11px;color:#d0e0d6;text-align:left;line-height:1.6;margin-top:4px}
.goal::after{content:'';position:absolute;inset:0;border-radius:10px}
.goal:hover::after{background:#a9e9cc05;box-shadow:inset 0 0 0 1px #a9e9cc40}
.goal:focus-visible{outline:none}
.goal:focus-visible::after{outline:2px solid var(--teal);outline-offset:3px}
.lattice-footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-shrink:0;text-align:left}
.lattice-description{font-size:9px;color:var(--faint)}
.production-detail{font-size:9px;color:var(--dim);position:relative;max-width:100%}
.production-detail summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.production-detail summary::after{content:'+';font-size:13px;color:var(--teal)}
.production-detail[open] summary::after{content:'−'}
.production-detail p{position:absolute;bottom:42px;right:0;width:240px;max-width:70vw;padding:16px;font-size:11px;line-height:1.8;background:#1b2a25;border:1px solid #a9e9cc33;border-radius:10px;z-index:6;box-shadow:0 12px 40px #0006}
.tip{font-family:var(--font);font-style:italic;color:var(--dim);font-size:12px;line-height:1.7;margin-top:8px;max-width:100%;flex-shrink:0}
.float-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.float-num{position:absolute;bottom:54%;left:50%;color:#d8ffe9;font-size:17px;text-shadow:0 0 10px #86d8ad66;animation:floatUp .85s ease-out forwards}
.float-num.capped{color:var(--faint);font-size:12px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-55px)}}

/* Node purchases: small diagrams, clear ownership, and a real action state. */
.node-list{display:flex;flex-direction:column;gap:10px}
.node-row{display:grid;grid-template-columns:35px minmax(0,1fr) auto;gap:11px;align-items:start;width:100%;text-align:left;padding:15px 12px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(115deg,#ffffff04,#ffffff01);position:relative;transition:background .2s,border-color .2s,transform .2s}
.node-row.afford{border-color:#a9e9cc40;background:linear-gradient(110deg,#a9e9cc0d,#a9e9cc03)}
.node-row.afford:hover{background:#a9e9cc12;border-color:#a9e9cc80;transform:translateY(-2px);box-shadow:0 6px 20px #0002}
.node-row.afford:active{transform:translateY(0)}
.node-swatch{width:35px;height:37px;border:1px solid color-mix(in srgb,var(--c) 22%,transparent);border-radius:9px;background:color-mix(in srgb,var(--c) 7%,transparent);color:var(--c);display:grid;place-items:center;flex-shrink:0}
.node-swatch .icon{width:21px;height:21px;stroke-width:1.2}
.node-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.node-name{font-size:14px;display:flex;align-items:center;gap:7px;line-height:1.5}
.node-owned{font-size:9px;color:var(--dim);font-variant-numeric:tabular-nums}
.node-desc{font-size:10px;color:var(--dim);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.purchase-preview{font-size:10px;line-height:1.65;color:#b7d5c5;margin-top:5px;display:block}
.node-meta{font-size:9px;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.5}
.node-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-top:2px}
.node-cost{font-size:13px;color:#d4dfd9;white-space:nowrap;font-variant-numeric:tabular-nums}
.node-currency{font-size:7px;letter-spacing:.12em;color:var(--faint)}
.node-add{width:20px;height:20px;border-radius:5px;background:#ffffff04;border:1px solid var(--line);color:var(--faint);text-align:center;font-size:15px;line-height:17px;margin-top:9px}
.afford .node-add{color:#17251e;background:var(--teal);border-color:var(--teal)}
.node-row.locked{background:#ffffff01;border-color:#ffffff05}
.node-row.locked .node-name,.node-row.locked .node-cost{color:#99aaa2}
.node-row.locked .node-swatch{filter:saturate(.3);opacity:.7}
.node-lock{display:none;width:12px;height:12px}
.node-row.locked .node-add{display:grid;place-items:center;border:0;background:none;color:var(--faint)}
.node-row.locked .node-plus{display:none}
.node-row.locked .node-lock{display:block}
.node-row.locked .node-meta{display:none}
.node-row.locked .purchase-preview{color:var(--faint)}
.nodes-footnote{display:flex;gap:12px;align-items:center;padding:21px 2px 12px;color:var(--dim)}
.nodes-footnote>.icon{width:18px;height:18px;color:#a9e9cc88}
.nodes-footnote p{font-size:11px}
.nodes-footnote p span{display:block;color:var(--faint);font-size:9px;margin-top:3px;line-height:1.7}
.links,.automation{margin:18px 0}
.link-row{padding:14px;margin:8px 0;border:1px solid #a9e9cc20;border-radius:10px;background:#a9e9cc04}
.link-row strong{font-size:12px;font-weight:500;color:#c5dfd0}
.link-row p,.automation p{margin-top:6px;font-size:11px;color:var(--dim);line-height:1.7}
.automation{padding-top:18px;border-top:1px solid var(--line)}
.automation h3{font-size:15px}
.automation label{display:block;margin:12px 0 6px;font-size:12px}
.automation input[type=text],#respec input[type=number]{color:var(--text);background:#0d1613;border:1px solid #a9e9cc33;border-radius:6px;padding:10px;min-height:44px;max-width:100%}
.amp-strip{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.amp-strip-title{font-size:16px;margin-bottom:4px}
.amp-strip-desc{font-size:10px;margin-bottom:10px}
.amp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line);min-height:60px}
.amp-row:last-child{border-bottom:0}
.amp-row.afford:hover{background:var(--teal-soft)}
.amp-row.owned{color:var(--teal)}
.amp-info{display:flex;flex-direction:column;gap:4px;font-size:11px}
.amp-info strong{font-weight:500}
.amp-info .dim{font-size:10px}
.amp-cost{font-size:11px;color:var(--gold);white-space:nowrap}

/* Shared interactive surfaces. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 18px;border-radius:9px;background:#ffffff05;border:1px solid var(--line);font-weight:500;width:100%;font-size:12px;transition:background .2s,border-color .2s,transform .2s}
.btn:hover:not(:disabled){background:#ffffff0a;border-color:#b3dcca40}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#10271b}
.btn.primary:hover:not(:disabled){background:#c5f5db;border-color:#c5f5db;box-shadow:0 0 20px #a9e9cc15}
.btn.gold{background:var(--gold-soft);border-color:#d9c39450;color:var(--gold)}
.btn.danger{color:var(--danger);border-color:#ee9e9e33}
.btn-row{display:flex;gap:10px;margin-bottom:8px}
.btn-row .btn{width:auto;flex:1}
.btn.panel-return{width:auto;flex-shrink:0;font-size:11px}
.panel-label,.resonance-panel-label{font-size:14px;color:var(--text);margin-bottom:6px}
.panel-hint{font-size:12px;margin-bottom:12px;line-height:1.8}
.resonance-panel{width:100%;text-align:left;padding:21px 0 5px;margin-top:18px;border-top:1px solid var(--line);flex-shrink:0}
.resonance-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.resonance-status{font-size:9px;margin-bottom:6px}
.resonance-btns,.choice-btns{display:flex;gap:8px;margin-top:10px}
.resonance-btn,.choice-btn{flex:1;text-align:left;padding:13px 10px;min-height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;background:#ffffff02;min-width:0}
.resonance-btn strong,.choice-btn strong{font-size:12px;font-weight:500;color:var(--teal)}
.resonance-btn .dim{font-size:9px;line-height:1.6}
.resonance-btn .dim:first-of-type{display:none}
.resonance-btn.active,.choice-btn.active{border-color:#a9e9cc77;background:var(--teal-soft)}
.resonance-estimate{font-size:9px;color:var(--dim);line-height:1.6}
.choice-btn .dim{font-size:11px}
.surge-chip{margin-top:15px;padding:11px 16px;width:100%;border:1px solid #a9e9cc55;background:var(--teal-soft);font-size:11px;border-radius:8px}
.surge-chip[data-kind=cascade]{border-color:#d9c39455;background:var(--gold-soft)}
.surge-chip.urgent{border-color:var(--gold)}
.bar{height:5px;background:#ffffff08;border-radius:10px;overflow:hidden;margin-bottom:12px}
.bar.thin{height:3px;margin-top:12px}
.bar-fill{height:100%;width:0;background:var(--teal);border-radius:inherit;transition:width .2s}
.bar-fill.gold{background:var(--gold)}
.bar-meta{font-size:12px;color:var(--dim);margin-bottom:8px}
.bar-eta{font-size:11px;margin:5px 0 15px;min-height:1.1em}
.prestige-card{position:relative;background:linear-gradient(140deg,#a9e9cc08,transparent);border:1px solid #a9e9cc30;border-radius:14px;padding:26px;margin:22px 0;max-width:740px}
.prestige-card.ceremony-gold{background:linear-gradient(140deg,#d9c39409,transparent);border-color:#d9c39430}
.prestige-top{display:flex;align-items:baseline;gap:15px;margin-bottom:22px;flex-wrap:wrap}
.prestige-top>span:first-child{font-size:18px}
.prestige-top strong{font-size:40px;font-weight:500;color:var(--teal)}
.ceremony-gold .prestige-top strong{color:var(--gold)}
.prestige-top .dim{font-size:12px;margin-left:auto}
.attune-panel,.spec-panel{padding:22px;border:1px solid var(--line);border-radius:12px;margin-top:20px;max-width:740px;background:#ffffff02}
.spec-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:0}
.spec-info{display:flex;flex-direction:column;gap:3px;font-size:12px}
.spec-info strong{font-weight:500}
.spec-info .dim{font-size:11px}
.spec-buy{width:auto;min-width:64px}
.spec-lv{font-size:11px}
#lattice-line{font-family:var(--font);font-style:italic;max-width:740px}

.cycle-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.cycle-evolution{grid-column:1;grid-row:1}
.cycle-paths{grid-column:2;grid-row:1}
.cycle-layout .prestige-card,.cycle-layout .attune-panel,.cycle-layout .spec-panel{margin-top:0;margin-bottom:22px;max-width:none}
.cycle-layout .prestige-top{gap:10px;margin-bottom:20px}
.cycle-layout .prestige-top .dim{width:100%;margin-left:0}
.cycle-layout .choice-btns{flex-direction:column}
.cycle-motif{display:grid;place-items:center;width:55px;height:55px;margin:0 0 23px;border:1px solid #a9e9cc33;border-radius:50%;color:var(--teal);background:radial-gradient(circle,#a9e9cc12,transparent);box-shadow:0 0 0 7px #a9e9cc03}
.cycle-motif .icon{width:27px;height:27px;stroke-width:1}
.ceremony-gold .cycle-motif{border-color:#d9c39433;color:var(--gold);background:#d9c39408;box-shadow:0 0 0 7px #d9c39403}
#lattice-line{max-width:none;margin-top:12px}
.stage-more.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-content:start;align-items:start}
.stage-more .stage-head,.stage-more .app-version,.more-help{grid-column:1/-1}
.stage-more .more-block{margin-top:0}
.more-stats{grid-column:1;grid-row:2}.more-save{grid-column:1;grid-row:3}.more-settings{grid-column:2;grid-row:2/4}
.more-stats .stats{grid-template-columns:1fr}

/* Progress, discoveries, and settings keep the same visual rhythm. */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:16px;margin:22px 0;border-bottom:1px solid var(--line)}
.subtab{padding:9px 16px;min-height:44px;min-width:44px;border-radius:8px;color:var(--dim);border:1px solid transparent;font-size:12px}
.subtab:hover{color:var(--text);background:#ffffff04}
.subtab.active{color:var(--teal);background:var(--teal-soft);border-color:#a9e9cc33}
.subpanel{display:none;flex-direction:column;gap:10px}
.subpanel.active{display:flex}
.ach-row,.depth-row,.mile-row{padding:19px 20px;border-radius:12px;background:#ffffff04;border:1px solid var(--line);margin-bottom:8px}
.ach-row.done{border-color:#a9e9cc33}
.ach-row.done .ach-top strong{color:var(--teal)}
.ach-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ach-top strong{font-weight:500}
.ach-tier,.rung,.ach-pct{font-size:10px;color:var(--faint)}
.ach-desc,.ach-reward{font-size:11px;color:var(--dim);margin-top:5px}
.ach-chain-head{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px}
.ach-chain-head:first-child{margin-top:0}
.obj-box{margin-bottom:25px;padding:16px 0 20px;border-bottom:1px solid var(--line)}
.obj-primary{font-size:14px;margin-bottom:8px}
.obj-secondary{list-style:none;font-size:11px;color:var(--dim);line-height:1.8}
.obj-secondary strong{font-weight:500;color:#b7c7bf}
.obj-secondary li{margin-top:5px}
.mile-row{border-left:2px solid #d9c39455}
.mile-row.done .ach-reward{color:var(--gold)}
.mile-preview{margin-top:16px;font-size:12px}
.done-accordion{margin-top:16px;font-size:12px;color:var(--dim)}
.done-accordion summary{cursor:pointer;padding:12px 0;min-height:44px}
.discovery-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:24px}
.discovery-card{padding:25px;border:1px solid var(--line);border-radius:13px;min-width:0;background:#ffffff02}
.discovery-card.found{border-color:#d9c39444;background:radial-gradient(ellipse at top left,#d9c39410,transparent)}
.discovery-motif{font-size:30px;color:var(--gold)}
.discovery-card h3{font-size:16px;margin:16px 0 10px}
.discovery-card p{font-family:var(--font);font-style:italic;font-size:13px;line-height:1.8;color:var(--dim)}
.more-block{background:#ffffff02;border:1px solid var(--line);border-radius:13px;padding:23px;margin-top:20px}
.more-block h3{font-size:17px;margin-bottom:16px}
.more-block>.dim{font-size:12px;line-height:1.8;margin-bottom:10px}
.app-version{text-align:center;color:var(--faint);font-size:10px;margin-top:25px}
.set-row{display:flex;align-items:center;gap:12px;min-height:48px;font-size:12px;cursor:pointer}
.set-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal)}
input[type=range]{min-height:44px;width:180px;max-width:55%;accent-color:var(--teal)}
input[type=checkbox]{accent-color:var(--teal)}
.vol-row{flex-wrap:wrap}
.vol-steps{display:inline-flex;gap:6px}
.vol-btn{font:inherit;font-size:11px;padding:6px 14px;border-radius:7px;border:1px solid var(--line);color:var(--dim);min-height:44px;min-width:44px}
.vol-btn.active{color:var(--teal);border-color:#a9e9cc66;background:var(--teal-soft)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.stats>div{display:flex;justify-content:space-between;gap:15px;font-size:12px;min-width:0}
.stats dt{color:var(--dim)}
.stats dd{font-variant-numeric:tabular-nums;text-align:right}
.save-box{width:100%;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#0b1411;color:var(--text);font-family:ui-monospace,monospace;font-size:11px;resize:vertical}
.help p{margin-bottom:13px;color:var(--dim);font-size:12px;line-height:1.9}
.help strong{font-weight:500;color:var(--text)}
.help summary{min-height:44px;cursor:pointer;color:var(--text);font-size:12px}

/* Welcome and meaningful interruptions. */
.intro,.ritual{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#060d0bd9;backdrop-filter:blur(15px);padding:24px}
.intro-card,.ritual-card{width:100%;max-width:480px;text-align:center;padding:35px 42px;background:radial-gradient(ellipse at 50% 0%,#254b3855,transparent 65%),#111b19;border:1px solid #a9e9cc2b;border-radius:23px;box-shadow:0 30px 100px #0005;max-height:90dvh;overflow-y:auto}
.intro-card h1{font-size:36px;letter-spacing:-1.4px;line-height:1.18;margin:14px 0 18px}
.intro-card .intro-lead{font-size:15px;margin-bottom:12px;color:#d2e5d8}
.intro-card>.dim{font-size:12px;line-height:1.9}
.intro-card .btn{margin-top:28px;min-height:48px;justify-content:space-between;padding:12px 20px}
.intro-card .intro-footnote{font-size:10px;color:var(--dim);margin-top:18px}
.intro-art{position:relative;display:grid;place-items:center;width:180px;height:156px;margin:0 auto 24px;background:radial-gradient(ellipse,#a9e9cc12,transparent 65%)}
.intro-art>span{position:absolute;inset:30px 22px;border:1px solid #a9e9cc66;border-radius:50%;transform:rotate(-35deg);box-shadow:0 0 12px #a9e9cc0a}
.intro-art>span:nth-child(2){inset:16px 37px;transform:rotate(35deg);border-color:#a9e9cc44}
.intro-art>span:nth-child(3){inset:36px 8px;transform:rotate(35deg);border-color:#d9c39444}
.intro-art>div{display:grid;place-items:center;width:55px;height:55px;border-radius:50%;border:1px solid #a9e9cc33;background:radial-gradient(circle,#a9e9cc22,transparent);box-shadow:0 0 60px #a9e9cc22;color:#d6ffe5}
.intro-art .icon{width:28px;height:28px}
.ritual-card{text-align:left}
.ritual-card h2{font-size:28px;letter-spacing:-.8px;margin-bottom:18px}
.ritual-card p{color:var(--dim);font-size:13px;line-height:1.9;margin-bottom:12px}
.ritual-card .btn-row{margin-top:24px}
#respec{margin:18px 0;border:1px solid #a9e9cc33;border-radius:10px;padding:14px;font-size:12px}
#respec label{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:10px 0}
#respec input[type=number]{width:80px}
#respec legend{padding:0 6px}
.toast{position:fixed;left:calc(50% + var(--rail)/2);bottom:60px;transform:translateX(-50%) translateY(15px);max-width:min(450px,90vw);padding:14px 20px;background:#1b2a24;border:1px solid #a9e9cc33;border-radius:12px;box-shadow:0 15px 50px #0005;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;text-align:center;font-size:12px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.prestige{border-color:#d9c39480}.toast.warn{border-color:#ee9e9e80}.toast.ach,.toast.milestone{border-color:#a9e9cc66}.toast.event{border-color:#7eb8e880}
.coach{position:fixed;inset:0;z-index:40;pointer-events:none}
.coach-card{pointer-events:auto;background:linear-gradient(135deg,#243b30,#15231d);border:1px solid #a9e9cc55;border-radius:13px;padding:20px;box-shadow:0 14px 50px #0006}
.coach-card h2{font-size:19px;letter-spacing:-.4px;margin-bottom:8px}
.coach-card p{font-size:12px;line-height:1.8;color:#b6c9bf}
.coach-card .coach-step-label{font-size:9px;letter-spacing:.1em;margin-bottom:8px}
.coach-card .btn-row{margin-top:16px;margin-bottom:0}
.return-summary{position:relative;z-index:3;background:#1b3027;border:1px solid #a9e9cc66;border-radius:13px;padding:22px;margin:14px auto;width:min(100%,440px);text-align:left;font-size:13px;line-height:1.8;flex-shrink:0}
.return-summary p{margin:10px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#fx-feedback{position:fixed;inset:0;z-index:25;pointer-events:none}

/* Compact desktop and a genuinely touch-first layout. */
@media(min-width:1600px){:root{--rail:238px}.stages{grid-template-columns:minmax(0,1fr) 390px;gap:28px;margin-right:44px;margin-left:44px}.workspace-head{padding:0 44px}.stage-nodes{padding:30px 25px}.stage-hearth{padding:28px 38px 20px}.node-row{padding:18px 14px}.node-desc,.purchase-preview{font-size:10px}.node-meta{font-size:9px}.pulse-wrap{max-width:780px;max-height:490px;flex-basis:330px}.workspace-footer{padding-left:45px;padding-right:45px}}
@media(min-width:1024px) and (max-width:1199px){:root{--rail:172px}.topbar{padding-left:12px;padding-right:12px}.brand{padding:0 7px;gap:10px}.brand-name{font-size:28px}.brand-mark{width:23px;height:23px}.brand-caption{font-size:7px}.keeper{margin:0 -12px;padding:20px 15px}.stages{grid-template-columns:minmax(0,1fr) 304px;gap:14px;margin-left:22px;margin-right:22px}.workspace-head{padding:0 22px}.workspace-head h1{font-size:26px}.live-status{display:none}.stage-hearth{padding:22px 18px 16px}.stage-nodes{padding:22px 15px}.node-row{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:14px 9px}.node-swatch{width:30px;height:33px}.scene-coordinate{display:none}.resonance-btns{flex-wrap:wrap}.resonance-btn{flex-basis:100px}.workspace-footer{padding-left:23px;padding-right:23px}}
@media(min-width:1024px) and (max-height:850px){#app{grid-template-rows:99px minmax(0,1fr) 36px}.topbar{padding-top:30px}.stage-hearth{padding-top:20px}.observatory-heading{margin-bottom:16px}.hud-signal strong{font-size:48px}.pulse-wrap{height:280px;min-height:245px;flex-basis:245px}.pulse-invitation{margin-bottom:17px}.flow-block{margin-bottom:18px}.lattice-footer{margin-top:5px}.tip{margin-top:3px}.stage-nodes{padding-top:22px}.node-row{padding-top:12px;padding-bottom:12px}.section-description{margin-bottom:17px}}
@media(max-width:1023px){
  :root{--rail:0px}
  #app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:96px minmax(0,1fr) auto;padding-bottom:0}
  .topbar{display:contents}
  .brand{position:absolute;top:29px;left:23px;z-index:20;padding:0;gap:10px}.brand-name{font-size:28px}.brand-mark{width:22px;height:22px}.brand-caption{font-size:6px;margin-top:5px}
  .nav-label,.sidebar-bottom{display:none}
  .tabs{grid-column:1;grid-row:3;display:flex;flex-direction:row;justify-content:space-around;gap:4px;padding:8px 15px calc(8px + var(--safe-b));border-top:1px solid var(--line);background:#0e1717f5;z-index:20;backdrop-filter:blur(12px)}
  .tab{flex:1;justify-content:center;flex-direction:column;gap:4px;padding:7px 8px;min-height:55px;max-width:140px;font-size:10px;border-radius:9px}.tab .icon{width:18px;height:18px}.nav-count,.nav-indicator{display:none}
  .workspace-head{grid-column:1;grid-row:1;padding:0 24px;justify-content:flex-end}.workspace-head>div:first-child{display:none}.workspace-status{gap:14px}.live-status{font-size:10px}.chip{min-height:33px;font-size:12px;padding:5px 10px}
  .stages{grid-column:1;grid-row:2;display:grid;grid-template:1fr/1fr;margin:0 18px 16px;gap:0;min-height:0}
  .stage{grid-area:1/1;position:relative;inset:auto;display:none;opacity:0;pointer-events:none;visibility:hidden;padding:25px;overflow-y:auto}.stage.active{display:block;opacity:1;pointer-events:auto;visibility:visible}
  .stage-hearth.active{display:flex}.stage-hearth{padding:22px 30px 20px}.stage-progress,.stage-more,.stage-cycle{padding:25px}
  .workspace-footer{display:none}
  .observatory-heading{margin-bottom:18px}.hud-signal strong{font-size:54px}.pulse-wrap{height:clamp(280px,38vh,420px);min-height:280px;flex-basis:280px;max-width:630px}.hud-label{font-size:9px}
  .pulse-invitation{margin-bottom:24px}.flow-block{width:min(100%,400px)}.next-step{max-width:560px}.lattice-footer{max-width:560px}.resonance-panel{max-width:560px}
  .node-list{max-width:640px;margin:0 auto}.node-row{padding:18px;grid-template-columns:44px minmax(0,1fr) auto;gap:16px}.node-swatch{width:44px;height:44px}.node-swatch .icon{width:26px;height:26px}.node-name{font-size:16px}.node-owned{font-size:11px}.node-desc,.purchase-preview{font-size:11px}.node-meta{font-size:10px}.node-cost{font-size:15px}.node-currency{font-size:8px}.node-add{margin-top:10px}.nodes-footnote{max-width:640px;margin:0 auto}
  .stage-head h2{font-size:27px}.section-description{font-size:12px}.stage-nodes .stage-head h2{font-size:27px}.section-count{font-size:11px;min-width:26px;min-height:23px}
  .toast{left:50%;bottom:calc(94px + var(--safe-b))}
}
@media(max-width:600px){
  #app{grid-template-rows:81px minmax(0,1fr) auto}
  .brand{top:25px;left:21px}.brand-name{font-size:25px}.brand-caption{font-size:5.5px;letter-spacing:.2em}.brand-mark{width:21px;height:21px}
  .workspace-head{padding-right:20px}.live-status{display:none}.core-label{font-size:10px}.chip{padding:5px 9px;gap:6px}
  .stages{margin:0 12px 12px}.stage{border-radius:14px;padding:20px 17px}.stage-hearth{padding:19px 18px 16px}.observatory-heading{margin-bottom:18px}.observatory-heading>.eyebrow{font-size:8px}.lattice-name{font-size:9px}
  .hud-signal strong{font-size:48px;letter-spacing:-1.8px}.hud-label{font-size:8px}.hud-rate{font-size:10px;padding:3px 10px;margin-top:5px}
  .pulse-wrap{height:268px;min-height:248px;flex-basis:248px;width:100%;margin:-7px 0 -8px}.scene-coordinate{display:none}.nexus-core{width:170px;height:170px}
  .pulse-invitation{margin-bottom:21px}.pulse-invitation>span{font-size:15px}.pulse-invitation p{font-size:9px}#pulse-value{margin-left:3px}
  .flow-block{margin-bottom:20px}.flow-heading{font-size:10px}.presence{font-size:8px}.next-step{padding:13px 11px;gap:10px}.next-step-icon{width:29px;height:29px}.next-step .eyebrow{display:block;font-size:7px}.goal{font-size:10px}.next-step>.icon{width:14px;height:14px}
  .lattice-footer{gap:10px;margin-top:7px;align-items:center}.lattice-description{font-size:8px;max-width:60%}.production-detail{font-size:8px}.tip{font-size:11px;margin-top:3px}
  .tabs{padding-top:6px;padding-left:8px;padding-right:8px}.tab{min-height:53px;padding:6px 5px;font-size:9px;gap:3px}
  .node-row{grid-template-columns:38px minmax(0,1fr) auto;gap:11px;padding:16px 12px}.node-swatch{width:38px;height:40px}.node-swatch .icon{width:23px;height:23px}.node-name{font-size:14px}.node-desc,.purchase-preview{font-size:10px}.node-meta{font-size:9px}.node-cost{font-size:13px}.node-currency{font-size:7px}.node-owned{font-size:10px}
  .stage-head{align-items:flex-start}.stage-head h2{font-size:24px}.stage-head .eyebrow{font-size:8px}.btn.panel-return{font-size:9px;padding:8px 10px}.stage-progress,.stage-more,.stage-cycle{padding:22px 17px}
  .resonance-heading{flex-direction:column;gap:0}.resonance-panel-label{font-size:13px}.resonance-btns{gap:6px}.resonance-btn{padding:12px 8px}.resonance-btn strong{font-size:11px}.resonance-btn .dim,.resonance-estimate{font-size:8px}
  .choice-btns{flex-direction:column}.choice-btn{padding:14px}.prestige-card{padding:20px}.prestige-top{gap:12px}.prestige-top .dim{width:100%;margin-left:0}.attune-panel,.spec-panel{padding:17px}
  .cycle-layout{display:flex;flex-direction:column;gap:0}.cycle-evolution{order:0;width:100%}.cycle-paths{order:1;width:100%}.stage-more.active{display:block}.stage-more .more-block{margin-top:20px}
  .subtabs{gap:3px}.subtab{padding:8px 10px;font-size:10px}.stats{grid-template-columns:1fr}.more-block{padding:18px}.set-row{font-size:11px}.vol-btn{padding:6px 10px}.btn-row{gap:7px}.btn-row .btn{padding:10px 12px}.discovery-list{grid-template-columns:1fr}.ach-row,.depth-row,.mile-row{padding:16px}
  .intro,.ritual{padding:18px}.intro-card,.ritual-card{padding:26px 26px 30px;border-radius:19px}.intro-card h1{font-size:31px}.intro-art{margin-bottom:18px;height:140px}.intro-card .intro-lead{font-size:13px}.intro-card>.dim{font-size:11px}.intro-card .intro-footnote{font-size:9px}
}
@media(max-width:380px){.hud-signal strong{font-size:44px}.stage-hearth{padding-left:15px;padding-right:15px}.pulse-wrap{min-height:235px;flex-basis:235px}.node-row{gap:8px;padding:14px 10px;grid-template-columns:32px minmax(0,1fr) auto}.node-swatch{width:32px;height:35px}.node-desc,.purchase-preview{font-size:9px}.node-meta{font-size:8px}.node-cost{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}