:root{
  --deep:#070F07; --forest:#0D1F0D; --green:#2D5A27; --accent:#00BE5A; --alive:#00FF64;
  --text:#F0F0EA; --dim:rgba(240,240,234,.74); --muted:rgba(240,240,234,.56);
  --aqua:#32C8FF;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--deep);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab}
#scene:active{cursor:grabbing}
#scene.pointing{cursor:pointer}

/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
#loader span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.loader-word{width:168px;height:auto;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* boot choreography — chrome fades in after the opening flight */
.hud,#chapters,#labels,#leaders,#plegend,#specs{transition:opacity 1s ease}
body.booting .hud,body.booting #chapters,body.booting #labels,body.booting #leaders,body.booting #plegend,body.booting #specs,body.booting #caption{opacity:0!important;pointer-events:none}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;pointer-events:none}
.hud>*{pointer-events:auto}
.brand .b-word{height:22px;width:auto;display:block;opacity:.95}

/* editorial verb watermark behind the staged device */
#verb{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:5;font-size:clamp(56px,7.5vw,104px);font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:rgba(240,240,234,.055);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .8s ease}
#verb.show{opacity:1}
.hud-right{display:flex;align-items:center;gap:14px}
.hud-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* first-run hint */
#hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 10px rgba(0,0,0,.9);transition:opacity .8s;pointer-events:none}
#hint.gone{opacity:0}

/* ── device labels (catalogue view) — name plate pinned above each unit ──── */
#labels{position:fixed;inset:0;z-index:8;pointer-events:none}
#leaders{position:fixed;inset:0;z-index:7;pointer-events:none;width:100%;height:100%}
#leaders line{stroke:rgba(232,238,235,.32);stroke-width:1;transition:opacity .25s}
/* name plates sit BELOW each unit, on the deck: name · what it is · price */
.dlabel{position:absolute;transform:translate(-50%,14px);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;line-height:1.3;transition:opacity .3s,transform .15s;pointer-events:auto;cursor:pointer;padding:5px 8px;max-width:200px}
.dlabel .dn{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15.5px;letter-spacing:.005em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8);white-space:nowrap}
.dlabel .dn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fa,#fff);box-shadow:0 0 7px var(--fa,#fff)}
.dlabel .dd{font-weight:500;font-size:12px;color:rgba(240,240,234,.88);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85);white-space:normal}
.dlabel .dp{font-weight:700;font-size:11.5px;color:var(--fa,#9fb8a4);text-shadow:0 1px 3px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
.dlabel:hover{transform:translate(-50%,14px) scale(1.06)}
.dlabel:hover .dn{color:var(--fa,#fff)}
/* the floating product reads from above, clear of everything on the deck */
.dlabel.up{transform:translate(-50%,-112%)}
.dlabel.up:hover{transform:translate(-50%,-112%) scale(1.06)}

/* ── part callouts (device views) — quiet cartographic annotations:
      a dot on the part, a hairline, set type. No boxes. ─────────────────── */
.klabel{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:2px;line-height:1.4;transition:opacity .3s;pointer-events:none;max-width:230px;padding:2px 0}
.klabel .kn{font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 16px rgba(0,0,0,.85)}
.klabel .ks{font-size:12px;font-weight:400;color:rgba(240,240,234,.78);white-space:normal;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85)}
.klabel.kr{text-align:right;align-items:flex-end}
#leaders circle{fill:rgba(240,240,234,.85);transition:opacity .25s}

/* ── product-line key (catalogue) — right rail ───────────────────────────── */
#plegend{position:fixed;right:24px;top:78px;z-index:24;padding:14px 15px 12px;border-radius:11px;background:linear-gradient(180deg,rgba(7,15,7,.5),rgba(7,15,7,.66));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.1);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none;width:268px}
#plegend.show{opacity:1;transform:none}
#plegend .wl-h{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#plegend .wl-h .wl-tap{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:7px;font-weight:600}
#plegend .pl-group{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,240,234,.42);margin:7px 0 1px}
#plegend .wl-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--dim);line-height:1.66}
#plegend .wl-row.dv{pointer-events:auto;cursor:pointer;border-radius:7px;margin:0 -6px;padding:3px 6px;gap:8px;transition:background .15s}
#plegend .wl-row.dv:hover{background:rgba(255,255,255,.07)}
#plegend .wl-row.dv.on{background:rgba(255,255,255,.09)}
#plegend .wl-row i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fa,#fff);box-shadow:0 0 6px var(--fa,#fff)}
#plegend .wl-row b{font-weight:600;color:var(--text)}
#plegend .wl-row em{margin-left:auto;padding-left:10px;font-style:normal;font-size:10px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
#plegend .wl-sep{height:1px;background:rgba(240,240,234,.1);margin:9px 0 7px}
#plegend .pl-foot{font-size:10.5px;line-height:1.5;color:var(--muted)}

/* ── device-view panels — everything visible at once, no scrolling ────────
   left: #howto (the chain / the scenarios) · right: #specs (the record) */
#howto,#specs{position:fixed;top:78px;z-index:24;width:min(356px,26vw);opacity:0;transition:opacity .45s ease,transform .45s ease;transition-delay:0s;pointer-events:none}
#specs{right:24px;transform:translateX(14px)}
#howto{left:28px;transform:translateX(-14px)}
#specs.show,#howto.show{opacity:1;transform:none;pointer-events:auto}
#howto.show{transition-delay:.25s}
#specs.show{transition-delay:.45s}
/* auto-fit tiers — applied by JS when a panel would collide with the caption
   or run past the chip bar; density rises, nothing overlaps */
.tight .sp-step{padding:3px 0}
.tight .sp-step span,.tight .sp-scen p{font-size:11.5px}
.tight .sp-row{padding:2px 0;font-size:12px}
.tight .sp-scen{padding:5px 0 6px}
.tight .sp-best{font-size:12px}
.tight .sp-h,.tight .pan-h{margin-top:9px;margin-bottom:5px}
.tight .sp-h:first-child,.tight .pan-h:first-child{margin-top:0}
.mini .sp-step span{display:none}
.mini .sp-scen p{display:none}
.mini .sp-note{display:none}
#specs-scroll,#howto-body{border-radius:12px;background:linear-gradient(180deg,rgba(7,15,7,.6),rgba(7,15,7,.74));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(240,240,234,.1);padding:17px 18px 15px}
.pan-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,240,234,.7);margin:0 0 10px;display:flex;align-items:center;gap:9px}
.pan-h::after{content:"";flex:1;height:1px;background:rgba(240,240,234,.12)}
.pan-h+.pan-h{margin-top:14px}
.sp-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,240,234,.7);margin:14px 0 8px;display:flex;align-items:center;gap:9px}
.sp-h::after{content:"";flex:1;height:1px;background:rgba(240,240,234,.12)}
.sp-h:first-child{margin-top:0}
.sp-row{display:grid;grid-template-columns:96px 1fr;gap:0 14px;font-size:12.5px;line-height:1.5;padding:3px 0;border-bottom:1px solid rgba(240,240,234,.05);align-items:baseline}
.sp-row:last-child{border-bottom:0}
.sp-row span{color:var(--muted);font-weight:500}
.sp-row b{font-weight:600;color:var(--text);text-align:left}
.sp-note{font-size:10.5px;line-height:1.5;color:var(--muted);margin-top:11px}
.sp-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fa,var(--alive));border:1px solid color-mix(in srgb,var(--fa,var(--alive)) 34%,transparent);background:color-mix(in srgb,var(--fa,var(--alive)) 8%,transparent);border-radius:6px;padding:4px 8px;margin:0 6px 8px 0}
.sp-best{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:2px}
/* numbered chain — how it works */
.sp-step{display:flex;gap:12px;padding:6px 0;font-size:12.5px;line-height:1.45;border-bottom:1px solid rgba(240,240,234,.05)}
.sp-step:last-child{border-bottom:0}
.sp-step i{flex:none;font-style:normal;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--deep);background:var(--fa,var(--accent));margin-top:1px}
.sp-step div{flex:1}
.sp-step b{display:block;font-weight:700;color:var(--text);font-size:13px;margin-bottom:1px}
.sp-step span{color:var(--dim)}
/* connectivity scenarios */
.sp-scen{border-bottom:1px solid rgba(240,240,234,.05);padding:8px 0 9px}
.sp-scen:last-of-type{border-bottom:0;padding-bottom:2px}
.sp-scen b{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.sp-scen b em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sp-scen p{font-size:12px;line-height:1.45;color:var(--dim);margin:0}

/* caption — the field-note card, bottom left */
#caption{position:fixed;left:28px;bottom:92px;z-index:25;max-width:400px;padding:19px 22px 17px;border-radius:14px;background:linear-gradient(180deg,rgba(6,11,9,.66),rgba(6,11,9,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.09);opacity:0;transition:opacity .5s ease}
#caption.in{opacity:1;animation:capin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes capin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#cap-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fa,var(--accent));margin-bottom:8px}
#cap-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fa,var(--accent));box-shadow:0 0 8px var(--fa,var(--accent));flex:none}
#cap-kicker:empty{display:none}
#cap-title{font-size:clamp(24px,2.7vw,31px);font-weight:800;letter-spacing:-.015em;line-height:1.06;margin-bottom:9px;color:#f4f3ee}
#cap-line{font-size:14px;line-height:1.55;color:rgba(240,240,234,.82);max-width:46ch}
#cap-stats{display:flex;flex-wrap:nowrap;margin-top:13px;border-top:1px solid rgba(240,240,234,.13);padding-top:11px}
#cap-stats:empty{display:none}
#cap-stats div{display:flex;flex-direction:column;gap:2px;padding:0 11px;border-left:1px solid rgba(240,240,234,.1);min-width:0}
#cap-stats div:first-child{padding-left:0;border-left:0}
#cap-stats b{font-size:16px;font-weight:800;letter-spacing:-.01em;color:#eef0ea;font-variant-numeric:tabular-nums;white-space:nowrap}
#cap-stats span{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* caption action links */
#cap-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
#cap-links:empty{display:none}
.cap-link{background:color-mix(in srgb,var(--fa,var(--accent)) 10%,transparent);border:1px solid color-mix(in srgb,var(--fa,var(--accent)) 42%,transparent);color:var(--fa,var(--alive));font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s}
.cap-link:hover{background:var(--fa,var(--accent));color:var(--deep);border-color:var(--fa,var(--accent))}

/* chapter chips */
#chapters{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:25;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(7,15,7,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.1);max-width:96vw}
.chip{background:none;border:0;color:var(--dim);font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.chip:hover{color:var(--text)}
.chip.on{background:var(--accent);color:var(--deep);font-weight:700}
.chip-div{width:1px;height:20px;background:rgba(240,240,234,.18);margin:0 4px;align-self:center;flex:none}
.chip.dive{color:#c9a4ff;border:1px solid rgba(155,108,224,.4)}
.chip.dive:hover{color:#fff;border-color:#9B6CE0;background:rgba(155,108,224,.12)}
.chip.dive.on{background:#9B6CE0;color:var(--deep);border-color:#9B6CE0}

/* narrower desktops — plates slim down so the tighter bay stays clean */
@media(max-width:1560px){
  .dlabel{max-width:178px}
  .dlabel .dn{font-size:14px}
  .dlabel .dd{font-size:11px}
  .dlabel .dp{font-size:10.5px}
}
/* cramped layouts — plates drop their descriptions; name + price stay crisp.
   Applied by JS the moment stacked plates would touch the chip bar. */
.slim-plates .dlabel .dd{display:none}
@media(max-height:700px){
  .dlabel .dd{display:none}
}
/* ── tablet / large phone ───────────────────────────────────────────────── */
@media(max-width:900px){
  .hud{padding:12px 16px}
  .hud-tag{display:none}
  .brand .b-mark{height:20px}
  .brand .b-word{height:18px}
  .brand .b-ai{font-size:15px}
  #plegend{top:62px;right:12px;max-width:46vw;padding:11px 13px 10px;width:auto}
  #plegend .wl-row{font-size:11px}
  #specs{top:62px;right:12px;width:min(320px,44vw);max-height:calc(100vh - 220px)}
  #howto{top:62px;left:12px;width:min(320px,44vw);max-height:34vh}
  #specs-scroll,#howto-body{max-height:inherit;overflow-y:auto}
  #caption{left:14px;bottom:92px;max-width:56vw;padding:15px 17px 14px}
  #cap-line{max-width:none}
  #chapters{bottom:14px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  #chapters::-webkit-scrollbar{display:none}
  .dlabel .dn{font-size:12px}
}
/* ── phone (portrait) ───────────────────────────────────────────────────── */
@media(max-width:560px){
  #plegend{top:46px;left:11px;right:auto;max-width:62vw;max-height:52vh;overflow-y:auto}
  #specs{top:46px;left:11px;right:11px;width:auto;max-height:34vh}
  #howto{display:none}
  #caption{left:11px;right:11px;bottom:110px;max-width:none;padding:13px 15px 12px}
  #cap-title{font-size:20px;margin-bottom:6px}
  #cap-line{font-size:12px;line-height:1.5}
  #cap-stats div{padding:0 11px}
  #cap-stats b{font-size:14px}
  #cap-links{margin-top:10px}
  #chapters{bottom:12px;padding:5px;gap:3px}
  #chapters .chip{font-size:11px;padding:7px 12px}
  .klabel{max-width:150px}
  .klabel .ks{font-size:10px}
}
@media(prefers-reduced-motion:reduce){#caption.in{animation:none}.loader-mark{animation:none}}