:root {
  --bg: #0a0b0c;
  --bg-2: #111214;
  --ink: #ebe8e0;
  --ink-2: #b9b6ae;
  --mute: #7d7c78;
  --line: rgba(235, 232, 224, 0.14);
  --line-2: rgba(235, 232, 224, 0.32);
  --panel: rgba(13, 14, 16, 0.86);
  --accent: #c6ff2e;
  --upper: #d6d2c8;
  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  /* motion tokens — mirror src/motion.js */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);
  --d-micro: 160ms;
  --d-ui: 420ms;
  --d-major: 1000ms;
  --cut: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--ink); font: 15px/1.5 var(--f-body);
  background: radial-gradient(120% 90% at 62% 42%, #16181b 0%, #0b0c0d 55%, #060607 100%) fixed;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, .hs:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.mono { font-family: var(--f-mono); letter-spacing: 0.04em; }
.dim { color: var(--mute); }
.fine { font-size: 10px; }

/* ---------- layers ---------- */
#backtype { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
#backtype span {
  font: 900 31vw/0.8 var(--f-display); letter-spacing: -0.02em; color: transparent; white-space: nowrap;
  -webkit-text-stroke: 1px rgba(235, 232, 224, 0.09);
  transform: translate(var(--px, 0), var(--py, 0)); transition: -webkit-text-stroke-color var(--d-major);
}
#backtype em { position: absolute; right: 4vw; bottom: 18vh; font: 500 11px var(--f-mono); letter-spacing: .3em; color: var(--mute); font-style: normal; writing-mode: vertical-rl; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: pan-y; outline: none; }
@media (pointer: fine) { #gl { cursor: none; } }
#tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity var(--d-ui); }
#tags.off { opacity: 0; }
#hotspots { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#leaders { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
#leaders path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
#leaders circle { fill: var(--accent); }
#panels { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
main#chapters { position: relative; z-index: 5; pointer-events: none; }

/* ---------- object tags ---------- */
.tag {
  position: absolute; left: 0; top: 0; translate: -50% -100%; display: flex; flex-direction: column; align-items: center;
  font: 500 9px/1.3 var(--f-mono); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; transition: opacity var(--d-ui);
}
.tag b { color: var(--ink); font-weight: 600; padding: 1px 4px; border: 1px solid var(--line-2); }
.tag span { text-transform: uppercase; opacity: .7; }
.tag em { font-style: normal; color: var(--mute); }
.tag::after { content: ''; width: 1px; height: 14px; background: var(--line-2); margin-top: 2px; }
.tag.hot b { background: var(--accent); color: #0a0b0c; border-color: var(--accent); }

/* ---------- hotspots ---------- */
.hs { position: absolute; left: 0; top: 0; translate: -11px -11px; pointer-events: auto; display: flex; align-items: center; gap: 8px; transition: opacity var(--d-ui); }
.hs i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); display: grid; place-items: center; position: relative; background: rgba(10, 11, 12, .55); }
.hs i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: transform var(--d-micro) var(--e-back); }
.hs i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: hsPulse 2.6s var(--e-out) infinite; }
.hs span { font-size: 10px; padding: 3px 7px; background: rgba(10, 11, 12, .82); border: 1px solid var(--line); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity var(--d-micro), transform var(--d-ui) var(--e-out); pointer-events: none; }
.hs:hover span, .hs:focus-visible span, .hs.open span { opacity: 1; transform: none; }
.hs:hover i::before, .hs.open i::before { transform: scale(1.8); }
.hs.back { opacity: .28; }
.hs.gone { opacity: 0; pointer-events: none; }
@keyframes hsPulse { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- feature panels ---------- */
.panel {
  position: absolute; left: 0; top: 0; width: 300px; pointer-events: auto; padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--line-2) 30%, var(--line) 70%, var(--accent));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  opacity: 0; filter: blur(4px); transition: opacity var(--d-ui) var(--e-out), filter var(--d-ui) var(--e-out);
}
.panel.in { opacity: 1; filter: none; }
.panel.out { opacity: 0; filter: blur(6px); transition-duration: 300ms; }
.panel.drag { transition: none; }
.panel.ping .pin { animation: ping .5s var(--e-out); }
.pin {
  background: rgba(13, 14, 16, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0 16px 14px;
  clip-path: polygon(0 0, calc(100% - 21.5px) 0, 100% 21.5px, 100% 100%, 25.5px 100%, 0 calc(100% - 25.5px));
}
.ph { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; margin-bottom: 4px; border-bottom: 1px dashed var(--line); cursor: grab; touch-action: none; font-size: 10px; color: var(--accent); }
.panel.drag .ph { cursor: grabbing; }
.px { width: 24px; height: 24px; font-size: 18px; line-height: 1; color: var(--ink-2); margin-right: 8px; }
.px:hover { color: var(--accent); }
.panel h3 { font: 800 34px/0.95 var(--f-display); margin: 10px 0 8px; letter-spacing: .01em; }
.panel p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.panel dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin: 0 0 12px; border: 1px solid var(--line); }
.panel dl div { background: #0e0f11; padding: 6px 8px; }
.panel dt { font-size: 9px; color: var(--mute); text-transform: uppercase; }
.panel dd { margin: 0; font-size: 13px; font-weight: 600; }
.bar { display: grid; grid-template-columns: 96px 1fr 26px; align-items: center; gap: 8px; font-size: 10px; margin: 5px 0; }
.bar span { color: var(--ink-2); }
.bar i { height: 4px; background: var(--line); position: relative; overflow: hidden; }
.bar i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--e-out) 200ms; }
.panel.in .bar i::after { transform: scaleX(var(--v)); }
.bar b { text-align: right; font-weight: 500; }
.pf { font-size: 9px; color: var(--mute); margin-top: 10px; }
@keyframes ping { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }

/* ---------- top HUD ---------- */
.hud-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: 10px; text-align: left; }
.logo svg { width: 34px; height: 34px; color: var(--ink); transition: transform var(--d-major) var(--e-out); }
.logo:hover svg, .logo.tw svg { transform: rotate(180deg); }
.logo b { display: block; font: 800 20px/1 var(--f-display); letter-spacing: .06em; }
.logo i { display: block; font: 400 9px var(--f-mono); color: var(--mute); font-style: normal; letter-spacing: .12em; margin-top: 2px; }
.hud-mid { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--ink-2); pointer-events: none; }
.hud-mid .sep { width: 18px; height: 1px; background: var(--line-2); }
#hud-secrets.lit { color: var(--accent); }
.hud-right { display: flex; gap: 8px; align-items: center; }
.chip { font: 500 10px var(--f-mono); letter-spacing: .08em; padding: 8px 10px; border: 1px solid var(--line); background: rgba(10, 11, 12, .6); transition: border-color var(--d-micro), color var(--d-micro); }
.chip:hover, .chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.cart-btn { display: flex; align-items: center; gap: 8px; font: 600 11px var(--f-mono); letter-spacing: .1em; padding: 6px 6px 6px 12px; background: var(--ink); color: #0a0b0c; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.cart-btn b { min-width: 22px; height: 22px; display: grid; place-items: center; background: #0a0b0c; color: var(--accent); }
.cart-btn.bump { animation: bump .5s var(--e-back); }
@keyframes bump { 40% { transform: scale(1.14); } }
.dropdown { position: absolute; top: 60px; right: 18px; width: 290px; background: var(--panel); border: 1px solid var(--line-2); padding: 12px 14px 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: drop var(--d-ui) var(--e-out); }
.dropdown.help { width: 340px; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.dd-title { font-size: 10px; color: var(--accent); margin-bottom: 10px; }
.dropdown .row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.toggle { font: 600 10px var(--f-mono); padding: 5px 8px; min-width: 72px; border: 1px solid var(--line-2); }
.toggle[aria-pressed="true"] { background: var(--accent); color: #0a0b0c; border-color: var(--accent); }
.wide { width: 100%; margin-top: 12px; padding: 10px; border: 1px solid var(--line-2); font: 600 10px var(--f-mono); letter-spacing: .1em; }
.wide:hover { border-color: var(--accent); color: var(--accent); }
.help ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.help li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.help li b { color: var(--ink); font-weight: 600; }
.help p { font-size: 10px; margin: 10px 0 0; }

/* ---------- rail ---------- */
#rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.rail-b { display: flex; align-items: center; gap: 8px; height: 26px; color: var(--mute); }
.rail-b .n { font-size: 10px; }
.rail-b .l { font-size: 10px; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width var(--d-ui) var(--e-out), opacity var(--d-ui); }
.rail-b i { width: 14px; height: 1px; background: currentColor; transition: width var(--d-ui) var(--e-out), background var(--d-ui); }
.rail-b:hover .l, .rail-b.on .l, #rail:focus-within .l { max-width: 120px; opacity: 1; }
.rail-b.on { color: var(--ink); }
.rail-b.on i { width: 42px; background: var(--accent); }

/* ---------- readout ---------- */
#readout { position: fixed; left: 18px; bottom: 112px; z-index: 6; font-size: 9.5px; color: var(--ink-2); pointer-events: none; display: grid; gap: 2px; }
#readout div { display: grid; grid-template-columns: 38px auto; }
#readout i { font-style: normal; color: var(--mute); }
#ro-graph { margin-top: 4px; opacity: .8; }

/* ---------- viewer controls ---------- */
#viewer { position: fixed; right: 18px; bottom: 112px; z-index: 9; display: flex; gap: 4px; }
#viewer button { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--line-2); background: rgba(10, 11, 12, .7); font: 600 11px var(--f-mono); letter-spacing: .06em; transition: border-color var(--d-micro), color var(--d-micro), background var(--d-micro); }
#viewer button:hover { border-color: var(--accent); color: var(--accent); }
#viewer button[aria-pressed="true"] { background: var(--accent); color: #0a0b0c; border-color: var(--accent); }

/* ---------- chapters ---------- */
.ch { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 96px 6vw 140px; }
#ch-0 { align-items: flex-end; }
.ch-inner { max-width: 470px; }
.ch-inner > * { opacity: 0; transform: translateY(18px); transition: opacity var(--d-major) var(--e-out), transform var(--d-major) var(--e-out); }
.ch.in .ch-inner > * { opacity: 1; transform: none; }
.ch.in .ch-inner > *:nth-child(2) { transition-delay: 60ms; } .ch.in .ch-inner > *:nth-child(3) { transition-delay: 160ms; }
.ch.in .ch-inner > *:nth-child(4) { transition-delay: 240ms; } .ch.in .ch-inner > *:nth-child(5) { transition-delay: 320ms; }
.ch-inner .mega, .ch-inner .big { opacity: 1; transform: none; }
.ch button { pointer-events: auto; }
.meta { font-size: 10px; color: var(--accent); margin: 0 0 6px; }
.mega { font: 300 clamp(72px, 15.5vw, 250px)/0.8 var(--f-display); margin: 0 0 18px -0.04em; letter-spacing: -0.01em; white-space: nowrap; mix-blend-mode: difference; color: #fff; }
.big { font: 900 clamp(64px, 9vw, 150px)/0.82 var(--f-display); margin: 0 0 16px -0.04em; letter-spacing: -0.01em; }
.L { display: inline-block; transform: translateY(0.5em) rotate(6deg); opacity: 0; transition: transform var(--d-major) var(--e-out), opacity 600ms var(--e-out), font-weight 260ms var(--e-out); transition-delay: calc(var(--i) * 32ms); }
.ch.in .L { transform: none; opacity: 1; }
.lede { font-size: 17px; max-width: 420px; color: var(--ink-2); margin: 0 0 18px; }
.body { color: var(--ink-2); margin: 0 0 18px; max-width: 400px; }
.cue { font-size: 10px; color: var(--mute); display: flex; align-items: center; gap: 10px; }
.cue-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.idx-b { width: 100%; display: grid; grid-template-columns: 30px auto 1fr; align-items: baseline; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); text-align: left; transition: padding var(--d-ui) var(--e-out), background var(--d-micro); }
.idx-b span { font-size: 10px; color: var(--mute); }
.idx-b b { font: 800 22px/1 var(--f-display); letter-spacing: .02em; }
.idx-b em { font-style: normal; font-size: 10px; color: var(--mute); text-transform: uppercase; }
.idx-b:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(235, 232, 224, .06), transparent); }
.idx-b:hover span { color: var(--accent); }

.anatomy-ctl { margin-bottom: 12px; }
.pill { padding: 8px 14px; border: 1px solid var(--accent); color: var(--accent); font: 600 10px var(--f-mono); letter-spacing: .1em; }
.pill[aria-pressed="true"] { background: var(--accent); color: #0a0b0c; }
.layers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; max-width: 440px; }
.layer-b { font-size: 10px; padding: 6px 9px; border: 1px solid var(--line); background: rgba(10, 11, 12, .55); display: flex; gap: 6px; transition: border-color var(--d-micro), color var(--d-micro); }
.layer-b span { color: var(--mute); }
.layer-b:hover { border-color: var(--accent); color: var(--accent); }

.cw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cw-b { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); background: rgba(10, 11, 12, .55); transition: border-color var(--d-micro), transform var(--d-ui) var(--e-out); }
.cw-b i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, var(--u) 0 62%, var(--a) 0 100%); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.cw-b b { display: block; font: 800 24px/1 var(--f-display); letter-spacing: .03em; }
.cw-b em { font-style: normal; font-size: 10px; color: var(--mute); }
.cw-b:hover { transform: translateX(6px); border-color: var(--line-2); }
.cw-b.on { border-color: var(--accent); }
.cw-b.on b { color: var(--accent); }

.buy { border: 1px solid var(--line-2); background: rgba(10, 11, 12, .9); padding: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.buy-head { display: flex; justify-content: space-between; align-items: baseline; font: 800 26px/1 var(--f-display); letter-spacing: .02em; }
.buy-head b { color: var(--accent); }
.buy-cw { font-size: 10px; color: var(--mute); margin: 6px 0 12px; }
.big-sizes { margin-bottom: 12px; flex-wrap: wrap; }
.big-sizes .sz { width: 46px; height: 38px; }
.buy .cta { width: 100%; height: 50px; font-size: 13px; }
.buy .fine { margin: 10px 0; }
.ghost { font: 600 10px var(--f-mono); letter-spacing: .1em; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.ghost:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- dock ---------- */
#dock {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 11; width: min(1040px, calc(100% - 32px));
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 18px; align-items: center; padding: 10px 10px 10px 18px;
  background: rgba(11, 12, 13, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: inset 0 0 0 1px var(--line-2);
}
#dock::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 64px; background: var(--accent); }
.dock-id b { display: block; font: 900 24px/0.9 var(--f-display); letter-spacing: .03em; }
.dock-id span { font-size: 10px; color: var(--accent); white-space: nowrap; }
.swatches { display: flex; gap: 6px; }
.sw { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid transparent; transition: border-color var(--d-micro), transform var(--d-micro) var(--e-back); }
.sw i { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 200deg, var(--u) 0 62%, var(--a) 0 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sw:hover { transform: scale(1.12); }
.sw.on { border-color: var(--ink); }
.sw.secret { animation: secretIn 1.2s var(--e-back); }
@keyframes secretIn { 0% { transform: scale(0) rotate(-180deg); } }
.sizes { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sizes::-webkit-scrollbar { display: none; }
.sz { flex: none; width: 38px; height: 32px; font-size: 11px; border: 1px solid var(--line); transition: border-color var(--d-micro), background var(--d-micro), color var(--d-micro); }
.sz:hover:not(:disabled) { border-color: var(--line-2); }
.sz.on { background: var(--ink); color: #0a0b0c; border-color: var(--ink); }
.sz.out { color: #4a4a48; text-decoration: line-through; cursor: not-allowed; }
.shake { animation: shake .45s var(--e-out); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.dock-buy { display: flex; align-items: center; gap: 12px; }
.price { font-size: 15px; font-weight: 600; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px; background: var(--accent); color: #0a0b0c;
  font: 700 12px var(--f-mono); letter-spacing: .12em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: filter var(--d-micro), transform var(--d-micro) var(--e-back);
}
.cta span { transition: transform var(--d-ui) var(--e-out); }
.cta:hover { filter: brightness(1.12); }
.cta:hover span { transform: translateX(4px) rotate(90deg); }
.cta:active { transform: scale(.97); }
.cta.done { animation: ctaDone .9s var(--e-out); }
.cta:disabled { opacity: .4; cursor: not-allowed; }
@keyframes ctaDone { 0% { filter: brightness(2); } 100% { filter: none; } }
.fly { position: fixed; z-index: 60; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); pointer-events: none; box-shadow: 0 0 20px var(--accent); }

/* ---------- cart ---------- */
#cart-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(5, 5, 6, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(420px, 100%); background: #0d0e10; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 560ms var(--e-out); }
#cart.open { transform: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 12px; }
.cart-head b { color: var(--accent); }
.cart-head button { font-size: 26px; line-height: 1; width: 32px; height: 32px; }
#cart-items { list-style: none; margin: 0; padding: 0 20px; overflow-y: auto; flex: 1; }
.ci { display: grid; grid-template-columns: 34px 1fr auto auto 24px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.ci > i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 200deg, var(--u) 0 62%, var(--a) 0 100%); }
.ci-m b { display: block; font: 800 18px/1 var(--f-display); letter-spacing: .03em; }
.ci-m span { font-size: 10px; color: var(--mute); }
.qty { display: flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 26px; height: 26px; }
.qty button:hover { color: var(--accent); }
.qty span { min-width: 18px; text-align: center; font-size: 12px; }
.ci-p { font-size: 12px; }
.ci-x { font-size: 18px; color: var(--mute); }
.ci-x:hover { color: var(--accent); }
.cart-empty { padding: 40px 20px; color: var(--mute); font-size: 11px; flex: 1; }
.cart-empty[hidden] { display: none; }
.cart-foot { padding: 16px 20px 22px; border-top: 1px solid var(--line); }
.cart-foot .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.cart-foot .cta { width: 100%; margin-top: 12px; height: 50px; }
#cart-msg { color: var(--accent); min-height: 14px; }

/* ---------- hint / tip / cursor / flash ---------- */
#hint { position: fixed; left: 50%; bottom: 96px; z-index: 12; transform: translate(-50%, 10px); font-size: 10.5px; letter-spacing: .12em; padding: 8px 14px; background: rgba(10, 11, 12, .88); border: 1px solid var(--line-2); border-left: 2px solid var(--accent); opacity: 0; pointer-events: none; transition: opacity var(--d-ui), transform var(--d-ui) var(--e-out); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
#tip { position: fixed; left: 0; top: 0; z-index: 13; pointer-events: none; font-size: 10px; letter-spacing: .06em; opacity: 0; transition: opacity var(--d-micro); max-width: 290px; }
#tip.on { opacity: 1; }
#tip b { display: block; background: var(--ink); color: #0a0b0c; padding: 4px 7px; font-weight: 600; }
#tip span { display: block; background: rgba(10, 11, 12, .9); padding: 4px 7px; color: var(--ink-2); border: 1px solid var(--line); border-top: 0; }
#cursor { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity var(--d-micro); }
#cursor.show { opacity: 1; }
#cursor i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); }
#cursor b { position: absolute; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 1px solid rgba(235, 232, 224, .6); transform: translate(var(--rx, 0), var(--ry, 0)); transition: width var(--d-ui) var(--e-out), height var(--d-ui) var(--e-out), margin var(--d-ui) var(--e-out), border-color var(--d-micro), border-radius var(--d-ui); }
#cursor span { position: absolute; left: 24px; top: 10px; font: 600 9px var(--f-mono); letter-spacing: .14em; color: var(--accent); white-space: nowrap; }
#cursor[data-mode="grab"] b { width: 52px; height: 52px; margin: -26px; border: 1px dashed var(--accent); animation: spin 6s linear infinite; }
#cursor[data-mode="rotate"] b { width: 46px; height: 46px; margin: -23px; border-color: transparent var(--ink) transparent var(--ink); border-width: 2px; }
#cursor[data-mode="hold"] b { width: 22px; height: 22px; margin: -11px; border: 2px solid var(--accent); border-radius: 4px; }
#cursor[data-mode="hold"] span { left: 18px; }
@keyframes spin { to { rotate: 360deg; } }
#flash { position: fixed; inset: 0; z-index: 35; background: var(--accent); opacity: 0; pointer-events: none; mix-blend-mode: overlay; }
#flash.on { animation: flash .7s var(--e-out); }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }

/* glitch transition (colorway change) */
body.glitch #backword { animation: glitch .5s steps(5) both; }
body.glitch .ch.in .big, body.glitch .ch.in .mega { animation: glitchType .5s steps(4) both; }
body.glitch #dock::before { animation: barSweep .6s var(--e-out); }
@keyframes glitch {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(calc(var(--px) - 14px), var(--py)); -webkit-text-stroke-color: var(--accent); }
  40% { clip-path: inset(50% 0 10% 0); transform: translate(calc(var(--px) + 12px), var(--py)); }
  80% { clip-path: inset(0 0 0 0); -webkit-text-stroke-color: var(--accent); }
}
@keyframes glitchType { 0% { text-shadow: -4px 0 var(--accent), 4px 0 #ff2bd6; transform: skewX(-8deg); } 50% { text-shadow: 3px 0 var(--accent), -3px 0 #2bd6ff; transform: skewX(4deg); } 100% { text-shadow: none; transform: none; } }
@keyframes barSweep { 0% { width: 0; } 60% { width: 100%; } 100% { width: 64px; } }
body.xray #backtype span { -webkit-text-stroke-color: var(--accent); }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: 100; background: #070708; display: grid; place-items: center; transition: opacity 800ms var(--e-out), visibility 800ms; }
#loader.done { opacity: 0; visibility: hidden; }
.ld-inner { width: min(320px, 80vw); }
.ld-title { font: 900 44px/1 var(--f-display); letter-spacing: .08em; margin-bottom: 14px; }
.ld-bar { height: 2px; background: var(--line); }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 300ms var(--e-out); }
.ld-log { font-size: 10px; color: var(--mute); margin-top: 10px; }

/* ---------- fallback ---------- */
#fallback { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: 20px; }
#fallback[hidden] { display: none; }
.fb-inner { text-align: center; max-width: 420px; color: var(--ink-2); }
.fb-inner svg { width: 100%; color: var(--upper); }
body.no-webgl #viewer, body.no-webgl #readout, body.no-webgl #hotspots { display: none; }

/* ---------- reduced motion ---------- */
body.reduced .L, body.reduced .ch-inner > * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
body.reduced .hs i::after, body.reduced .cue-dot, body.reduced #cursor[data-mode="grab"] b { animation: none; }
body.reduced.glitch * { animation: none !important; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) { .hud-mid { display: none; } }
@media (max-width: 900px) { #readout { display: none; } }
@media (max-width: 760px) {
  body { font-size: 14px; }
  .hud-top { padding: 10px 12px; }
  .logo i { display: none; }
  .logo b { font-size: 16px; }
  .logo svg { width: 28px; height: 28px; }
  #btn-help { display: none; }
  .dropdown, .dropdown.help { right: 12px; left: 12px; width: auto; top: 54px; }
  #rail { right: 6px; gap: 2px; }
  .rail-b .l { display: none; }
  .rail-b i { width: 8px; } .rail-b.on i { width: 20px; }
  #viewer { right: 12px; bottom: 148px; }
  #viewer button { height: 32px; min-width: 32px; padding: 0 8px; font-size: 10px; }
  .ch { align-items: flex-end; padding: 80px 16px 196px; }
  .ch-inner { max-width: none; width: 100%; padding: 14px 14px 10px; background: linear-gradient(180deg, rgba(10, 11, 12, 0), rgba(10, 11, 12, .82) 22%); }
  #ch-0 .ch-inner { background: none; }
  .mega { font-size: 22vw; }
  .big { font-size: 64px; }
  .lede { font-size: 15px; }
  .idx-b { padding: 7px 2px; } .idx-b b { font-size: 18px; }
  .cw-b { padding: 8px 10px; } .cw-b b { font-size: 20px; }
  #dock { bottom: 8px; width: calc(100% - 16px); grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 10px; padding: 10px; }
  .dock-id { display: none; }
  .swatches { grid-column: 1; grid-row: 1; }
  .dock-buy { grid-column: 2; grid-row: 1; }
  .sizes { grid-column: 1 / -1; grid-row: 2; }
  #dock .sz { width: 40px; height: 34px; }
  #hint { top: 62px; bottom: auto; font-size: 9.5px; }
  .panel, .panel.in { position: fixed; left: 8px; right: 8px; top: auto !important; bottom: 128px; width: auto; transform: none !important; max-height: 52vh; }
  .pin { max-height: 52vh; overflow-y: auto; }
  .panel h3 { font-size: 28px; }
  .ph { cursor: default; }
  #leaders { display: none; }
  .ch-inner { transition: opacity var(--d-ui) var(--e-out); }
  body.has-panel .ch-inner { opacity: 0; pointer-events: none; }
  body.has-panel .ch-inner * { pointer-events: none !important; }
  body.has-panel #viewer { opacity: 0; pointer-events: none; }
  .tag span, .tag em { display: none; }
}

/* legibility scrim behind the chapter copy (desktop) */
@media (min-width: 761px) {
  main#chapters::before {
    content: ''; position: fixed; inset: 0 auto 0 0; width: min(46vw, 640px); pointer-events: none; z-index: -1;
    background: linear-gradient(90deg, rgba(8, 9, 10, .78), rgba(8, 9, 10, .5) 60%, rgba(8, 9, 10, 0));
    opacity: 0; transition: opacity var(--d-major) var(--e-out);
  }
  body:not([data-chapter="0"]) main#chapters::before { opacity: 1; }
}