/* ==================================================================
   PortfolioFable — Case Study Entertainment System
   The viewport IS the CRT glass. Console in front, bottom center.
   Rule: zero border-radius everywhere. Chamfers via clip-path only.
   Harmony color: DenDen gold. Study accent tints the screen light.
   ================================================================== */

:root {
  --bg-0: #050607;
  --ink: #e9e6df;
  --ink-dim: #9a9890;
  --ink-mute: #5f5e58;
  --gold: #fbbf24;
  --cta: #fbbf24;          /* the one call-to-action color: primary buttons wear it once the power is on */
  --pwr-off: #ff3b30;      /* standby red */
  --pwr-on: #8fe3a0;       /* soft green, on */
  --accent: #fbbf24;
  --accent2: #6b5410;

  --pix: 'Press Start 2P', 'Courier New', monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --bezel: 14px;
  --deck-h: 106px;   /* the lid is shallower: less of a small monitor spent on chrome */
  --deck-w: 660px;   /* nominal: the deck hugs its controls, this is what the navs budget against */
  --deck-k: 1;       /* the whole console scales as one piece on a small window */
  --cart-out: 68px;
  --pad-h: max(208px, 26vh);  /* handheld: 34 top bar + 150 faceplate + 24 under it, so the plate sits at 1:1 */
  --pad-h: max(208px, 26dvh);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-back: cubic-bezier(.34, 1.45, .64, 1);
  --mx: 0; --my: 0;
}

* { box-sizing: border-box; border-radius: 0 !important; }
html, body { height: 100%; }
body { margin: 0; background: #000; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow: clip; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img, video { display: block; max-width: 100%; }
kbd { font-family: var(--mono); font-size: 9px; padding: 2px 4px; border: 1px solid #3a3d44; border-bottom-width: 2px; background: rgba(0,0,0,.5); color: var(--ink-dim); margin-right: 2px; }
.pix { font-family: var(--pix); letter-spacing: .04em; }
.pix-blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ------------------------------------------------ room */
.room { position: relative; height: 100vh; height: 100dvh; width: 100vw; overflow: clip; background: #000; }
.room.is-shake { animation: shake .42s linear; }
@keyframes shake {
  0% { transform: translate(0,0); } 10% { transform: translate(-5px, 3px); } 20% { transform: translate(4px, -3px); } 30% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, 2px); } 50% { transform: translate(-2px, -1px); } 60% { transform: translate(2px, 1px); } 75% { transform: translate(-1px, 0); } 100% { transform: translate(0,0); }
}

/* ------------------------------------------------ TV = viewport */
.tv { position: absolute; inset: 0; }
.bezel {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  border: var(--bezel) solid transparent;
  border-image: linear-gradient(180deg, #2c2e32, #1a1b1e 40%, #101113) 1;
  box-shadow: inset 0 0 0 1px #3a3d43, inset 0 0 0 2px #0a0b0d, inset 0 0 40px rgba(0,0,0,.9), inset 0 0 120px rgba(0,0,0,.5);
}
/* (no full-viewport grain on the bezel: a feTurbulence filter at 1920×1080 is too costly per frame) */
.bezel-chin { position: absolute; left: 28px; right: 28px; bottom: 0; height: var(--bezel); z-index: 21; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.bezel-brand { display: flex; align-items: center; gap: 6px; font-family: var(--pix); font-size: 5px; color: #6d7076; letter-spacing: .14em; }
.bezel-brand img { height: 8px; filter: grayscale(1) brightness(1.5); opacity: .6; }
.bezel-keys { display: none; margin-left: auto; margin-right: 14px; font-size: 8px; color: #5a5f68; }
body.is-screens .bezel-keys { display: block; }
.bezel-led { width: 6px; height: 6px; background: radial-gradient(circle at 40% 35%, #5a2a2a, #1c0d0d); transition: background .3s, box-shadow .3s; }
body.is-on .bezel-led { background: radial-gradient(circle at 40% 35%, #b8ffb0, #1fbf3a 45%, #075c18); box-shadow: 0 0 8px rgba(60,255,90,.85); }

.glass { position: absolute; inset: var(--bezel); background: #030405; overflow: hidden; }
.crt { position: absolute; inset: 0; background: #050607; overflow: hidden; }

/* glass effects */
.crt-phosphor { position: absolute; inset: 0; pointer-events: none; z-index: 12; opacity: .10; background: repeating-linear-gradient(90deg, rgba(255,60,60,.5) 0 1px, rgba(60,255,90,.35) 1px 2px, rgba(60,90,255,.5) 2px 3px); mix-blend-mode: overlay; }
.crt-scan { position: absolute; inset: 0; pointer-events: none; z-index: 13; mix-blend-mode: multiply; opacity: .45; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.25) 2px 3px); }
.crt-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.05), transparent); animation: roll 11s linear infinite; }
@keyframes roll { to { transform: translateY(calc(100vh + 120px)); } }
.crt-glare { position: absolute; inset: 0; pointer-events: none; z-index: 14; background: linear-gradient(calc(112deg + var(--mx) * 8deg), rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 22%, transparent 40%), radial-gradient(26% 12% at calc(80% + var(--mx) * 4%) 6%, rgba(255,255,255,.05), transparent 100%); }
.crt-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 14; background: radial-gradient(125% 105% at 50% 50%, transparent 62%, rgba(0,0,0,.14) 90%, rgba(0,0,0,.25) 100%); }
.crt-noise { position: absolute; inset: 0; z-index: 15; pointer-events: none; filter: url(#tvnoise); background: #bdbdbd; opacity: 0; display: none; }
.crt-noise.is-on { display: block; animation: noise-burst .3s steps(3) both; }   /* a flicker, not a grey wall (Denis, 2026-09-24: the shelf flashed on eject) */
@keyframes noise-burst { 0% { opacity: .22; } 70% { opacity: .1; } 100% { opacity: 0; } }
.crt-flash { position: absolute; inset: 0; z-index: 16; pointer-events: none; background: #fff; opacity: 0; transform: scale(1, .004); transform-origin: center; }
.crt.is-booting .crt-flash { animation: crt-on 1.1s var(--ease-out) forwards; }
.crt.is-booting .boot, .crt.is-booting .idle { animation: crt-warm 1.4s .35s var(--ease-out) both; }
@keyframes crt-warm { 0% { transform: scale(.96); filter: brightness(0); } 55% { filter: brightness(1.9); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes crt-on { 0% { opacity: 0; transform: scale(1); } 45% { opacity: 0; } 70% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.crt.is-off .crt-content, .crt.is-off .boot, .crt.is-off .idle { animation: crt-off .4s var(--ease-in) forwards; }
@keyframes crt-off { 60% { transform: scale(1, .004); opacity: 1; filter: brightness(3); } 100% { transform: scale(0, .004); opacity: 0; filter: brightness(3); } }
.crt.is-tune .crt-content { animation: crt-in 1s var(--ease-out) both; }
@keyframes crt-in { 0% { opacity: 0; filter: brightness(2.2) blur(3px); transform: translateY(-10px); } 40% { opacity: 1; } 100% { opacity: 1; filter: none; transform: none; } }
.sparks { position: absolute; inset: 0; z-index: 17; pointer-events: none; }
.sparks i { position: absolute; width: 4px; height: 4px; background: var(--gold); opacity: 0; animation: spark .9s var(--ease-out) forwards; box-shadow: 0 0 6px var(--gold); }
@keyframes spark { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

/* on-glass OSD */
.osd { position: absolute; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .4s; }
.osd-tr { right: 26px; top: 22px; }
.osd-tr .hint { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }
.osd-levels { right: 26px; top: 76px; display: flex; align-items: center; gap: 8px; }
body.is-playing .osd-levels { opacity: 1; pointer-events: auto; }
.osd-chips { display: flex; gap: 4px; }
.lvl { display: inline-flex; align-items: center; gap: 0; font-family: var(--pix); font-size: 7px; letter-spacing: .06em; color: #9a9da4; background: rgba(0,0,0,.65); border: 1px solid #2a2d33; padding: 8px 8px; transition: color .15s, background .15s, border-color .15s; }
.lvl .t { display: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0; text-transform: none; margin-left: 8px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl.is-current .t, .osd-levels:hover .lvl .t { display: inline; }
.osd-levels { flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; }
.lvl:hover { color: #fff; }
.lvl.is-current { color: #fff; background: var(--accent2); border-color: var(--accent); }

/* ------------------------------------------------ boot sequence */
.boot { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; text-align: center; background: #050607; color: #fff; }
.boot.is-on { display: grid; }
.boot-logo { width: 170px; height: 160px; overflow: visible; }
.boot-logo path { stroke: var(--gold); stroke-width: 13.6374; fill: none; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.boot.is-draw .boot-logo path { animation: draw 1.05s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.boot.is-glow .boot-logo { animation: bloom .9s var(--ease-out) forwards; }
@keyframes bloom { 0% { filter: drop-shadow(0 0 0 rgba(251,191,36,0)); transform: scale(1); } 35% { filter: drop-shadow(0 0 28px rgba(251,191,36,.9)) brightness(1.5); transform: scale(1.06); } 100% { filter: drop-shadow(0 0 12px rgba(251,191,36,.5)); transform: scale(1); } }
.boot-name { font-family: var(--pix); font-size: 9px; letter-spacing: .3em; margin-top: 32px; opacity: 0; color: #8c8f96; }
.boot.is-name .boot-name { animation: rise .5s var(--ease-out) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* ------------------------------------------------ library (idle) screen — full composition, centered */
/* the library is a retro game shop: blurred wall of cartridges, a wooden shelf, tube light, neon */
.idle { position: absolute; inset: 0; z-index: 1; display: none; background: linear-gradient(180deg, #0a0c11 0%, #0d1016 55%, #07080b 100%); }
.idle.is-on { display: block; }
.shop-wall {
  position: absolute; left: -6%; right: -6%; top: 0; bottom: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(18, 1fr); grid-auto-rows: 96px; gap: 22px 18px; align-content: start; padding: 40px 0 0;
  filter: blur(7px) brightness(.55) saturate(.85); transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -6px), 0) scale(1.04);
  transition: transform .3s ease-out;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.35) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.35) 100%);
}
.wc { /* a shelved cartridge in the background, seen through the blur */
  position: relative; height: 96px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 65%, #000) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.wc::before { content: ''; position: absolute; left: 22%; right: 8%; top: 10%; height: 42%; background: var(--l); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.wc::after { content: ''; position: absolute; left: 6%; width: 10%; top: 10%; bottom: 20%; background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.3) 2px 4px, transparent 4px 8px); }
.shop-haze { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 45%, transparent 30%, rgba(6,7,10,.6) 100%), radial-gradient(50% 30% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); transition: background 1s; }
.shop-tube { position: absolute; left: 18%; right: 18%; top: 46px; height: 3px; background: #dff6ff; box-shadow: 0 0 8px #bfeeff, 0 0 30px rgba(140,220,255,.55), 0 30px 120px rgba(140,220,255,.14); animation: tube 6s linear infinite; }
@keyframes tube { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .55; } 98% { opacity: .9; } 99% { opacity: .6; } }
.shop-neon { position: absolute; right: 7%; top: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transform: rotate(-2deg); pointer-events: none; }

.shop-neon, .shop-tube { display: none; }   /* the wordmark is on the hardware already (DDS-01 lid, DDS-P strip); the sign and its tube are off the glass (Denis, 2026-09-24) */
.shop-neon .pix { font-size: 22px; color: #fff3c4; text-shadow: 0 0 6px #ffd766, 0 0 18px var(--gold), 0 0 42px rgba(251,191,36,.7); animation: neon 4.5s linear infinite; }
.shop-neon small { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: #b8ecff; text-shadow: 0 0 6px #7fdcff, 0 0 16px rgba(80,200,255,.8); }
@keyframes neon { 0%, 89%, 100% { opacity: 1; } 90% { opacity: .5; } 92% { opacity: 1; } 94% { opacity: .7; } }
.shop-shelf { /* black glass, not a plank: a contact line the cartridges stand on, then a fade back to the room */
  position: absolute; left: 4%; right: 4%; top: calc(var(--shelf-y, 58%)); height: 1px;
  background: #1c1f25;
}
.shop-shelf::after { content: ''; position: absolute; left: 0; right: 0; top: 1px; height: 120px;
  background: linear-gradient(180deg, rgba(5,6,7,0) 0%, rgba(5,6,7,.55) 34%, var(--bg-0) 72%); }
/* no reflection: measured 16px between the contact line and the dossier, so there is nowhere for one to fall.
   If the dossier ever moves down ~80px, add: .cart-inner { -webkit-box-reflect: below 2px linear-gradient(rgba(255,255,255,.22), transparent 55%); } */

.select { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 72px 40px calc(var(--deck-h) + var(--cart-out) + 16px); transition: opacity .45s; }
.select.is-hidden { opacity: 0; pointer-events: none; }
/* the rack: a shelf header (number, title, blurb), the neighbour shelves peeking above and below, and the ARRANGE tabs */
.shelf-head { /* an iOS-style wheel: the shelf you are on sits between two rails, its neighbours peek above and below */
  position: relative; width: min(1180px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: fit-content(58%) max-content; grid-template-rows: auto auto auto;
  justify-content: space-between; align-items: center; gap: 0 24px; }
.shelf-peek { grid-column: 1; font-size: 7px; letter-spacing: .12em; color: var(--ink-dim); opacity: .4;
  text-align: left; padding: 8px 0 8px 16px; transition: opacity .18s, color .18s, transform .18s; cursor: pointer; }
.shelf-peek:hover { opacity: .95; color: #fff; }
.shelf-peek-up:hover { transform: translateY(2px); } .shelf-peek-down:hover { transform: translateY(-2px); }
.shelf-peek:hover { opacity: 1; color: #fff; }
.shelf-peek-up { grid-row: 1; }
.shelf-title { position: relative; grid-column: 1; grid-row: 2; padding: 8px 0 16px 16px;
  border-left: 3px solid var(--accent); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07);
  transition: border-color .4s; }
.shelf-title::after { content: ''; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }
.arrange { grid-column: 2; grid-row: 1 / -1; align-self: start; padding-top: 2px; }
.shelf-no { display: block; font-size: 7px; letter-spacing: .14em; color: var(--accent); margin-bottom: 8px; transition: color .4s; }
.shelf-title h2 { margin: 0 0 8px; font-size: 18px; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.shelf-title p { margin: 0; font-size: 12px; color: var(--ink-dim); }
.shelf-title.is-swap > * { animation: shelf-wipe .45s var(--ease-out) both; }
.shelf-title.is-swap h2 { animation-delay: .05s; } .shelf-title.is-swap p { animation-delay: .1s; }
@keyframes shelf-wipe { from { opacity: 0; transform: translateY(8px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.arrange { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 4px; }
.arrange-k { font-size: 7px; color: var(--ink-mute); letter-spacing: .14em; margin-right: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; font-family: var(--pix); font-size: 7px; letter-spacing: .06em; color: #9a9da4; background: rgba(0,0,0,.65); border: 1px solid #2a2d33; padding: 7px 9px; transition: color .15s, background .15s, border-color .15s, transform .12s; }
.chip:hover { color: #fff; transform: translateY(-1px); }
.chip.is-on { color: #fff; background: var(--accent2); border-color: var(--accent); }
/* the nudge: a soft gold pulse across the chips, one after another */
.arrange.is-nudge .chip { animation: chip-glow 1s var(--ease-out) both; }
.arrange.is-nudge .chip:nth-child(3) { animation-delay: .06s; } .arrange.is-nudge .chip:nth-child(4) { animation-delay: .12s; } .arrange.is-nudge .chip:nth-child(5) { animation-delay: .18s; }
@keyframes chip-glow { 0% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } 25% { box-shadow: 0 0 16px 2px rgba(251,191,36,.5); border-color: var(--gold); color: #fff; } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } }
.shelf-peek-down { grid-row: 3; }
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; perspective: 1500px; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 62px; display: grid; place-items: center; color: var(--ink-dim); background: rgba(10,12,16,.75); border: 1px solid #262a33; border-bottom: 3px solid #1a1d24; transition: color .15s, transform .1s; }
.arrow:hover { color: #fff; }
.arrow:active { transform: translateY(calc(-50% + 2px)); border-bottom-width: 1px; }
.arrow-l { left: 12%; } .arrow-r { right: 12%; }
.carousel { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: scale(var(--cs, 1)) rotateY(calc(var(--mx) * 6deg)) rotateX(calc(var(--my) * -3deg)); transition: transform .25s ease-out; }

/* dossier: the study's stats as part of the screen, not a card */
.dossier { /* framed panel: a sheet of lit glass holding the three columns (Figma 162-22665) */
  position: relative; width: min(1000px, 100%); margin: 0 auto; padding: 24px 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: start;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.dossier::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent); pointer-events: none; }
.dossier.is-swapping, .dossier.is-out { opacity: 0; transform: translateY(14px); }

/* ---------- the case-study preview (Figma 162-22666) ----------
   The selected cartridge and a big still of its work are one pair: cartridge left, still right,
   both standing on the floor line with a 16px gap. The still is taller than the cartridge
   (469 : 375 in the design) so it rises above it. Proportions are derived from the cartridge
   so the pair holds together at every carousel scale. */
.cs-preview {
  --pv-h: calc(var(--h, 340px) * var(--cs, 1) * 1.2507);   /* 469 / 375 */
  --pv-w: calc(var(--pv-h) * 1.4051);                      /* 659 / 469 */
  position: absolute; margin: 0; padding: 0; z-index: 2; pointer-events: none;
  width: var(--pv-w); height: var(--pv-h);
  /* the row is shifted left by --pv-shift, so the still has to follow it to keep the gap at 16 */
  left: calc(50% + (var(--w, 290px) / 2) * var(--cs, 1) + var(--pv-shift, 0px) + 16px);
  bottom: calc(50% - (var(--h, 340px) * var(--cs, 1)) / 2);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
  filter: drop-shadow(0 12px 25px rgba(0,0,0,.08)) drop-shadow(0 22px 46px rgba(0,0,0,.07)) drop-shadow(0 30px 63px rgba(0,0,0,.04));
}
.cs-preview.is-on { opacity: 1; visibility: visible; }
/* browsing: the still switches off like a CRT (collapses to a line, then out), the cart slides, the still switches on for it */
.cs-preview.is-closing { animation: still-off .18s var(--ease-in) forwards; }
.cs-preview.is-opening { animation: still-on .3s var(--ease-out) both; }
.cs-preview.is-closing img, .cs-preview.is-opening img { filter: brightness(1.6); }
@keyframes still-off { 0% { transform: scaleY(1); opacity: 1; } 70% { transform: scaleY(.03); opacity: 1; } 100% { transform: scaleY(.03) scaleX(.2); opacity: 0; } }
@keyframes still-on  { 0% { transform: scaleY(.03) scaleX(.2); opacity: 0; } 30% { transform: scaleY(.03) scaleX(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
.cs-preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08); }
.d-title { font-family: var(--pix); font-size: 18px; line-height: 1.3; color: #fff; margin: 0 0 8px; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); }
.d-title small { display: block; font-family: var(--sans); font-size: 11px; color: var(--ink-dim); text-shadow: none; margin-top: 4px; }
.d-role-line { font-size: 14px; font-weight: 600; color: #e3e0d8; margin: 0 0 8px; }
.d-date { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 8px; }
/* résumé icons: CSS mask over currentColor (same trick as the résumé's Icon component) */
.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -.15em; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.tags li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: #e3e0d8; }
.tags .ico { width: 15px; height: 15px; color: var(--accent); }
/* the expanded résumé row: Company overview · As the … · Notable challenge */
.d-col-preview { display: flex; flex-direction: column; gap: 8px; }
.d-block p { margin: 0; font-size: 12px; line-height: 1.45; color: #d9d6ce; }
.d-block .d-head { margin: 0 0 4px; }
.d-cta { margin-top: auto; padding-top: 8px; font-family: var(--pix); font-size: 7px; letter-spacing: .12em; }
.d-cta.is-read { color: var(--cta); }
.d-cta.is-soon { color: var(--ink-mute); }
.d-cta.is-live { color: var(--accent); }
.d-bullets li { font-size: 12px; line-height: 1.4; }
.d-head { font-family: var(--pix); font-size: 8px; color: var(--accent); letter-spacing: .12em; margin: 4px 0 8px; display: flex; justify-content: space-between; }
.d-head .rank { color: var(--ink-mute); }
.score-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; font-family: var(--pix); font-size: 8px; line-height: 1; padding: 8px 0; }
.score-row .k { color: var(--ink-dim); }
.score-row .dots { border-bottom: 2px dotted #2a2e37; transform: translateY(-3px); }
.score-row .v { color: #fff; text-align: right; white-space: nowrap; }
.score-row.is-hi .v { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.d-col-score { min-width: 0; }
.d-list { margin: 0; padding: 0; list-style: none; font-size: 12px; color: #c9c7bf; }
.d-list li { padding: 4px 0; border-bottom: 1px solid #1c1f25; }
.d-list li::before { content: '▸ '; color: var(--accent); font-family: var(--mono); }


/* ------------------------------------------------ cartridge
   Built the way the refined Figma cartridge is built: one shell gradient carries the colour, every other layer is
   translucent black/white blended over it (soft-light / multiply / overlay / luminosity), so any hue works.
   Shell ramp = the root tokens: 100 · 300 · 500 · 900 of the cartridge's hue (--hue, --sat set per cartridge in JS). */
.cart {
  --w: 290px; --h: 340px;
  --hue: 42; --sat: 1;
  --s100: hsl(var(--hue) calc(84% * var(--sat)) 86%); --s300: hsl(var(--hue) calc(88% * var(--sat)) 70%);
  --s500: hsl(var(--hue) calc(84% * var(--sat)) 54%); --s900: hsl(var(--hue) calc(72% * var(--sat)) 22%);
  --edge-dk: rgba(63,44,8,.34); --edge-hi: rgba(255,255,255,.34);
  position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d; transition: transform .8s var(--ease-out), opacity .5s, filter .5s; cursor: pointer; will-change: transform;
}
.cart.is-gold { --s100: #ffe796; --s300: #fbcd60; --s500: #dea828; --s900: #8c6412; } /* DD gold: the exact hand-picked stops */
.cart.is-active { z-index: 3; cursor: grab; }
.cart.is-dragging { transition: none; z-index: 9; cursor: grabbing; }
.cart.is-dragging .cart-inner { animation: none; transform: none; }
.cart.is-side { z-index: 2; filter: brightness(.5) saturate(.7); }
.cart.is-far  { z-index: 1; opacity: 0; pointer-events: none; }
.cart.is-fly { transition: transform .7s var(--ease-in), opacity .4s .25s; opacity: 0; }
.cart.is-off-shelf { display: none; }
.cart.is-shelf-out-up .cart-inner, .cart.is-shelf-out-down .cart-inner { animation: shelf-out .22s var(--ease-in) both; }
.cart.is-shelf-out-down .cart-inner { animation-name: shelf-out-down; }
@keyframes shelf-out { to { transform: translateY(-140px); opacity: 0; } }
@keyframes shelf-out-down { to { transform: translateY(140px); opacity: 0; } }
.cart.is-inserting { transition: transform .95s var(--ease-back); z-index: 8; }
.cart.is-inserting.is-down { transition: transform .8s cubic-bezier(.55, 0, .85, .45); } /* handheld: accelerates down into the slot, no overshoot */
.cart.is-seated { visibility: hidden; opacity: 0 !important; pointer-events: none; } /* handheld: inserted into the device, out of sight */
.cart-inner { position: absolute; inset: 0; isolation: isolate; transition: transform .35s var(--ease-out); } /* isolated: the blend layers must composite against the shell, not the 3D carousel */
.cart.is-active .cart-inner:hover { transform: translateY(-8px) rotateX(3deg); }
.cart.is-drop .cart-inner { animation: cart-drop .8s var(--ease-back) both; }
@keyframes cart-drop { from { transform: translateY(-90px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* an inside stroke that runs light→dark (raised) or dark→light (recessed) top to bottom, like the Figma gradient strokes */
.cart-edge { position: absolute; inset: 0; padding: var(--sw, 2px); pointer-events: none; background: linear-gradient(180deg, var(--edge-hi) 0%, transparent 50%, var(--edge-dk) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cart-edge.is-in { background: linear-gradient(180deg, var(--edge-dk) 0%, transparent 50%, var(--edge-hi) 100%); }
.cart-shadow { position: absolute; inset: 0; z-index: -1; background: #000; transform: translate(0, 30px) scale(1.02, 1.05); filter: blur(24px); opacity: .75; }
.cart-body { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s100) 0%, var(--s300) 28%, var(--s500) 60%, var(--s900) 100%); }
/* grip: 40 × 288 recessed strip, 23 ridges (white soft-light) with recessed dividers between them */
.cart-grip { position: absolute; left: 14px; top: 20px; width: 40px; height: 288px; }
.cart-grip-fill { position: absolute; inset: 0; background: rgba(0,0,0,.55); mix-blend-mode: soft-light; }
.cart-grip-ridges { position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.34) 0 11.5px, transparent 11.5px 25px); }
.cart-grip-lines { position: absolute; left: 2px; right: 2px; top: 2px; bottom: 2px;
  background: repeating-linear-gradient(180deg, transparent 0 11.5px, var(--edge-dk) 11.5px 13.5px, transparent 13.5px 23px, var(--edge-hi) 23px 25px); }
/* well: the recessed window the label sits in */
.cart-well { position: absolute; left: 64px; top: 20px; width: 212px; height: 288px; }
.cart-well-fill { position: absolute; inset: 0; background: rgba(0,0,0,.55); mix-blend-mode: soft-light; }
/* label: 202 × 277, a stack of translucent bands over the shell */
.cart-label { position: absolute; left: 5px; top: 5.4px; width: 202px; height: 277.2px; overflow: hidden; display: flex; flex-direction: column; color: #fff; }
.cart-label-fill { position: absolute; inset: 0; background: rgba(0,0,0,.55); mix-blend-mode: soft-light; }
.cart-label > .row { position: relative; display: flex; align-items: center; }
.cart-label > .row::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.cart-label-band { height: 22px; padding: 8px 16px; justify-content: space-between; gap: 10px; }
.cart-label-band::before { background: linear-gradient(180deg, rgba(255,255,255,.89) 0%, rgba(255,255,255,0) 55.3%); mix-blend-mode: overlay; opacity: .89; }
.cart-label-band .pix { position: relative; font-size: 6px; letter-spacing: .08em; line-height: 1; color: #fff; mix-blend-mode: luminosity; white-space: nowrap; }   /* white through luminosity, like the title: light ink in the shell's own hue, legible on every ramp (was s900 ink, which sank into the purples and blues) */
.cart-label-band .pix:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cart-label-title { min-height: 43px; padding: 16px; justify-content: center; text-align: center; }
.cart-label-title::before { background: rgba(0,0,0,.34); mix-blend-mode: multiply; }
.cart-label-title span { position: relative; width: 100%; font-family: var(--pix); font-size: 11px; line-height: 1.35; text-shadow: 2px 2px 0 rgba(0,0,0,.55); mix-blend-mode: luminosity; }
.cart-label-art { flex: 1; min-height: 0; padding: 24px 16px; justify-content: center; overflow: hidden; }
.cart-label-art::before { background: rgba(0,0,0,.55); mix-blend-mode: multiply; }
/* the art is a die-cut sticker: cream paper (or the brand tile), a white cut edge, paper grain, a slight tilt */
.cart-sticker { position: relative; width: 170px; height: 108px; display: grid; place-items: center; overflow: hidden; background: var(--sbg, #f2efe6) center / cover no-repeat; transform: rotate(-2deg);
  box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.cart-sticker::before { content: ''; position: absolute; inset: 0; filter: url(#paper); background: #888; mix-blend-mode: overlay; opacity: .55; pointer-events: none; }
.cart-sticker::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 35% 30%, rgba(255,255,255,.22), transparent 80%); pointer-events: none; }
.cart-sticker img { position: relative; width: 70px; height: 70px; object-fit: contain; }
.cart-sticker .sticker-word { position: relative; font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: .1em; color: var(--s900); }
.cart-label-foot { min-height: 42px; padding: 8px 16px; justify-content: center; }
.cart-label-foot::before { background: rgba(0,0,0,.55); mix-blend-mode: multiply; }
.cart-label-foot .lines { position: relative; display: flex; flex-direction: column; gap: 4px; width: 170px; text-align: center; font-family: var(--sans); font-size: 9px; line-height: 11px; mix-blend-mode: luminosity; }
.cart-label-foot .lines b { font-weight: 700; }
.cart-label-foot .lines span { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-label-foot .lines span .ico { display: none; }
.cart-label-foot .lines span em { font-style: normal; opacity: .8; }
/* connector: the edge that goes into the slot */
.cart-conn { position: absolute; left: 30px; top: 328px; width: 230px; height: 12px; background: linear-gradient(180deg, #4a4a4a, #202020); }
.cart-conn .cart-edge { --sw: 1px; background: linear-gradient(180deg, var(--edge-dk) 0%, transparent 50%); }
.cart.is-dim { filter: brightness(.35) saturate(.4); }
.cart.is-dim.is-active { filter: brightness(.6) saturate(.6); }
.cart.is-locked .cart-sticker { filter: saturate(.7) brightness(.85); }   /* locked: the sticker dims a touch; the dossier and the pad say COMING SOON */

.deck-cart { --seat: .72; position: absolute; left: 50%; bottom: calc(var(--bezel) + (var(--deck-h) - 8px) * var(--deck-k, 1)); width: 270px; height: var(--cart-out); transform: translateX(-50%); overflow: hidden; z-index: 31; pointer-events: none; filter: drop-shadow(0 -6px 14px rgba(0,0,0,.6)); }
.deck-cart .cart { left: 50%; top: 0; margin: 0 0 0 calc(var(--w) / -2); transform: scale(var(--seat)); transform-origin: top center; transition: transform .5s var(--ease-back); cursor: default; filter: none; opacity: 1; }
.deck-cart .cart .cart-shadow { display: none; }
.deck-cart.is-pop .cart { transform: translateY(-60px) scale(var(--seat)); }

/* ------------------------------------------------ console deck (front strip, bottom center)
   Doctrine (gamedev-console-ui): two grays split at a parting line — the light lid carries the slot, the dark
   band carries the controls; a black stripe between them; accents = red labels + red LED + red POWER, nothing
   else; hardware labels in a geometric sans (never the pixel font); slot = rimmed cavity; grain on the shell only. */
.deck { position: absolute; left: 50%; bottom: var(--bezel); transform: translateX(-50%) scale(var(--deck-k, 1)); transform-origin: bottom center; width: 660px; max-width: 100vw; height: var(--deck-h); z-index: 30; filter: drop-shadow(0 -10px 26px rgba(0,0,0,.75)) drop-shadow(0 2px 0 #000); }
.deck.is-clunk { animation: clunk .28s var(--ease-out); }
@keyframes clunk { 30% { transform: translate(-50%, 4px); } }
.deck-lid { position: relative; height: 34px; background: linear-gradient(180deg, #e2e2e0 0%, #cbcbc9 38%, #a9a9a7 100%); clip-path: polygon(0 100%, 3.4% 0, 96.6% 0, 100% 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.22); }
.deck-lid::before { content: ''; position: absolute; inset: 0; filter: url(#grain); background: #888; mix-blend-mode: overlay; opacity: .42; pointer-events: none; }
.deck-rail { position: absolute; top: 9px; width: 132px; height: 14px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.22); }
.deck-rail-l { left: 196px; } .deck-rail-r { right: 44px; transform: skewX(11deg) scaleY(.94); transform-origin: right bottom; }   /* the brand owns the left of the lid; the grille rakes with the right edge, mirroring the brand's -11deg */
.deck-slot { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 254px; height: 26px; }
.deck-slot-rim { position: absolute; inset: -6px; background: linear-gradient(180deg, #8f8f8d, #d2d2d0); box-shadow: inset 0 2px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.6); }
.deck-slot-inner { position: absolute; inset: 0; background: linear-gradient(180deg, #020202 0%, #090909 28%, #2a2a2a 33%, #1f1f1f 66%, #0d0d0d 100%); box-shadow: inset 0 0 0 1px #000, inset 0 7px 10px rgba(0,0,0,.95); overflow: hidden; }
.deck-slot-inner i { position: absolute; left: 10px; right: 10px; top: 9px; bottom: 5px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1px, transparent 1px 10px); opacity: .7; }
.deck-lid-plate { position: absolute; right: 210px; bottom: 6px; font-family: var(--sans); font-weight: 600; font-size: 8px; letter-spacing: .22em; color: #5c5c5a; text-shadow: 0 1px 0 rgba(255,255,255,.55); display: none; }
.deck-stripe { height: 7px; background: linear-gradient(180deg, #1a1a1a, #050505); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.deck-band {
  position: relative; height: calc(var(--deck-h) - 41px);
  background: linear-gradient(90deg, rgba(255,255,255,.07), transparent 6%, transparent 94%, rgba(0,0,0,.35)), linear-gradient(180deg, #55575b 0%, #45474b 40%, #34363a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -6px 0 #111214, inset 0 -7px 0 rgba(255,255,255,.05);
  display: flex; justify-content: center; align-items: center; gap: 22px; padding: 0 30px 5px;
}
.deck-band::before { content: ''; position: absolute; inset: 0; filter: url(#grain); background: #888; mix-blend-mode: overlay; opacity: .3; pointer-events: none; }
.deck-controls { display: flex; align-items: flex-start; gap: 22px; position: relative; z-index: 1; }
/* LINKS is a key like INSERT and EJECT: a gray face (never gold: the CTA stays the CTA), pressed while the SCREEN shows the links */
body.is-on .deck-btn.deck-btn-links:not(:disabled) .deck-btn-face { background: linear-gradient(180deg, #a9aaa8 0%, #8e8f8d 55%, #767775 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #3a3b3d; }
.deck-btn.deck-btn-links[aria-expanded="true"] .deck-btn-face { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 #3a3b3d; }
/* LINKS open: the key is on (gold, pressed in, like INSERT when it can play) and the SCREEN is backlit green (Denis, 2026-09-24) */
body.is-on .deck-btn.deck-btn-links[aria-expanded="true"] .deck-btn-face { background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 50%, #b8860b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.3), 0 0 12px rgba(251,191,36,.35); transform: translateY(1px); }
.readout.is-links { box-shadow: inset 0 0 0 1px #0a0b0c, 0 1px 0 #0a0b0c, 0 0 16px rgba(143,227,160,.28); }
.readout.is-links .readout-links { background: radial-gradient(120% 160% at 50% 50%, #12261a 0%, #0a140e 70%); box-shadow: inset 0 0 10px rgba(143,227,160,.18); }
.readout.is-links .rl { text-shadow: 0 0 5px rgba(143,227,160,.55); }
.deck-key-power .deck-label { margin-left: 20px; }   /* centred under the switch, not under LED + switch */
.deck-key { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.deck-label { font-family: var(--sans); font-weight: 700; font-size: 8px; letter-spacing: .24em; color: #c3c5c9; text-shadow: 0 1px 0 rgba(0,0,0,.6); }

/* power: a slide switch with its LED. Standby is red; a second after load it flips itself and the LED goes soft green. */
.pwr-unit { display: flex; align-items: center; gap: 8px; height: 26px; }
.led { display: inline-flex; width: 12px; height: 12px; }
.led-bezel { fill: url(#ledBezel); }
.led-spec { fill: url(#ledSpec); pointer-events: none; }
.led svg { display: block; transition: filter .35s; filter: drop-shadow(0 0 3px rgba(255,59,48,.85)) drop-shadow(0 0 7px rgba(255,59,48,.35)); }
.led-dot { fill: url(#ledRed); transition: fill .35s; }
body.is-on .led svg { filter: drop-shadow(0 0 4px rgba(143,227,160,.95)) drop-shadow(0 0 9px rgba(143,227,160,.5)) drop-shadow(0 0 18px rgba(143,227,160,.22)); }
body.is-on .led-dot { fill: url(#ledGreen); }
.led.is-blink .led-dot { fill: url(#ledOff); }
.led.is-blink svg { filter: none; }
.pwr { position: relative; width: 44px; height: 20px; background: linear-gradient(180deg, #1a1b1e, #101113); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.1); touch-action: manipulation; }
/* the colored window shows through on the side the knob has left: red when off, soft green when on */
.pwr::before { content: ''; position: absolute; top: 3px; left: 25px; width: 16px; height: 14px; background: var(--pwr-off); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 8px rgba(255,59,48,.55); transition: background .35s, box-shadow .35s; }
.pwr i { position: absolute; top: 2px; left: 2px; width: 20px; height: 16px; background: linear-gradient(180deg, #c9cac8, #8b8c8a); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 #000; transition: transform .22s var(--ease-out); }
.pwr i::after { content: ''; position: absolute; left: 4px; right: 4px; top: 6px; height: 4px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.pwr[aria-checked="true"]::before { left: 3px; background: var(--pwr-on); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 8px rgba(143,227,160,.6); }
.pwr[aria-checked="true"] i { transform: translateX(20px); }
.deck-btn { position: relative; width: 74px; height: 26px; background: linear-gradient(180deg, #232427, #151618); box-shadow: inset 0 0 0 1px #0a0b0c, inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 #0a0b0c; padding: 3px; }
.deck-btn-face { display: block; height: 100%; background: linear-gradient(180deg, #a9aaa8 0%, #8e8f8d 55%, #767775 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #3a3b3d; transform: translateY(-2px); transition: transform .05s, box-shadow .05s, filter .3s; }
/* once the power is on, the primary button wears the CTA color */
body.is-on .deck-btn:not(:disabled) .deck-btn-face { background: linear-gradient(180deg, #ffd766 0%, var(--cta) 50%, #c9931a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #6b5410, 0 0 14px rgba(251,191,36,.35); }
.deck-btn:active .deck-btn-face, .deck-btn.is-pressed .deck-btn-face { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 #3a3b3d; }
.deck-btn:disabled { cursor: default; }
.deck-btn:disabled .deck-btn-face { filter: brightness(.55); }
/* EJECT is the one destructive key, so it wears red when it can act and reads dead when it cannot */
body.is-on .deck-btn[data-btn="eject"]:not(:disabled) .deck-btn-face {
  background: linear-gradient(180deg, #ff9a90 0%, #e2372c 50%, #8f1810 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #5e0f0a, 0 0 14px rgba(226,55,44,.3); }
.deck-btn[data-btn="eject"]:disabled .deck-btn-face {
  background: linear-gradient(180deg, #4a4c50 0%, #35373a 55%, #26282b 100%); filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.4), 0 2px 0 #1a1b1e; }
.deck-btn[data-btn="eject"]:disabled + .deck-label { color: #6a6c70; }
.deck-brand { /* printed on the lid, left, raked with it */
  position: absolute; left: 44px; bottom: 7px; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  transform: skewX(-11deg) scaleY(.94); transform-origin: left bottom; opacity: .72; }
.deck-audio { grid-column: 3; }
.deck-logo { height: 22px; width: auto; opacity: .85; filter: grayscale(1) brightness(1.9);
  transform: skewX(-7deg); }   /* the round mark hides the parent's shear; this matches the letters optically */
.deck-model { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: #d9d9d7; text-shadow: 0 1px 0 rgba(0,0,0,.7); display: flex; flex-direction: column; gap: 3px; }
.deck-model b { font-weight: 500; font-size: 8px; letter-spacing: .26em; color: #8d8f94; }
.deck-right { display: flex; align-items: center; justify-content: end; gap: 12px; position: relative; z-index: 1; }
.deck-ports { display: flex; gap: 6px; }
.deck-ports span { width: 26px; height: 14px; background: #0c0d0f; box-shadow: inset 0 0 0 2px #26282c, inset 0 0 0 3px #000, 0 1px 0 rgba(255,255,255,.1); }
.deck-vents { width: 110px; height: 30px; background: repeating-linear-gradient(90deg, #111215 0 3px, transparent 3px 9px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); opacity: .9; }
.deck-feet { position: absolute; left: 0; right: 0; top: 100%; height: 6px; display: flex; justify-content: space-between; padding: 0 40px; }
.deck-feet i { width: 60px; height: 6px; background: #0a0b0c; }

/* ------------------------------------------------ the study, on the glass */
.crt-content { position: absolute; inset: 0; z-index: 3; overflow-y: auto; overflow-x: hidden; padding: 0 0 calc(var(--deck-h) + var(--cart-out) + 40px); scrollbar-width: thin; scrollbar-color: #2b2f38 transparent; opacity: 0; pointer-events: none; }
body.is-playing .crt-content { opacity: 1; pointer-events: auto; animation: crt-flicker 6s linear infinite; }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 43% { opacity: .985; } 44% { opacity: 1; } 71% { opacity: .99; } 72% { opacity: 1; } }
.cs { color: #e9e6df; font-size: 17px; line-height: 1.6; width: min(1360px, 100%); margin: 0 auto; }
.cs-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 96px 56px 48px; min-height: 100vh; background: radial-gradient(80% 70% at 80% 20%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%); }
.cs-kicker { font-family: var(--pix); font-size: 8px; color: var(--accent); letter-spacing: .12em; margin-bottom: 24px; }
.cs-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cs-kicker span { color: #6c6f76; }
.cs-kicker .tags li { font-size: 11px; color: var(--accent); }
.cs-title small { display: block; font-family: var(--sans); font-size: 14px; color: #8c8f96; text-shadow: none; margin-top: 8px; }
/* Q&A blocks (résumé: "What’s the issue?" / "What was my impact?" and the narrative primary blocks) */
.cs-qas { display: grid; gap: 16px; margin: 0 0 24px; max-width: 60ch; }
.cs-qa-q { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.cs-qa p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: #e3e0d8; }
.cs-qa p:last-child { margin-bottom: 0; }
.cs-qa mark { background: transparent; color: #fff; font-weight: 600; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); border-bottom: 2px solid var(--accent); }
.cs-copy { display: flex; flex-direction: column; gap: 24px; }
.cs-copy .cs-qa { max-width: 60ch; }
.cs-copy-below { margin-top: 32px; max-width: 60ch; }
.cs-copy-only { max-width: 66ch; }
.cs-copy .cs-level-lead { margin: 0; }
/* strategy guide: the résumé's methodology nugget as a linked callout */
.cs-guide { display: grid; gap: 4px; max-width: 60ch; padding: 16px 16px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 80%); text-decoration: none; color: inherit; transition: background .2s, transform .2s var(--ease-out); }
.cs-guide:hover { transform: translateX(3px); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 80%); }
.cs-guide-k { font-family: var(--pix); font-size: 6px; letter-spacing: .16em; color: var(--accent); }
.cs-guide-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: #fff; }
.cs-guide-d { font-size: 13px; line-height: 1.45; color: #b6b4ac; }
.cs-facts.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cs-facts li .when { color: #6c6f76; font-family: var(--mono); font-size: 11px; }
.cs-title { font-family: var(--pix); font-size: 36px; line-height: 1.25; margin: 0 0 8px; color: #fff; text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.cs-tagline { font-size: 18px; color: #b6b4ac; margin: 0 0 32px; }
.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.cs-stat { border-left: 3px solid var(--accent); padding-left: 16px; }
.cs-stat .n { font-family: var(--pix); font-size: 22px; color: #fff; line-height: 1.2; margin-bottom: 8px; }
.cs-stat .n.is-long { font-size: 15px; }
.cs-stat .l { font-size: 12px; line-height: 1.4; color: #a4a29a; }
.cs-summary { font-size: 17px; line-height: 1.65; color: #e3e0d8; margin: 0 0 24px; max-width: 58ch; }
.cs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; color: #b6b4ac; }
.cs-facts .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cs-facts ul { margin: 0; padding: 0; list-style: none; }
.cs-facts li { padding: 3px 0; border-bottom: 1px solid #1c1f25; }
.cs-media { position: relative; align-self: stretch; display: grid; place-items: center; min-height: 0; }
.cs-media img, .cs-media video { max-height: 64vh; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.cs-press { grid-column: 1 / -1; text-align: center; font-family: var(--pix); font-size: 8px; color: #6c6f76; margin-top: 8px; }
.cs-press .pix-blink { color: var(--accent); }
.cs-level { padding: 72px 56px; border-top: 1px solid #1a1d23; opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.cs-level.is-in { opacity: 1; transform: none; }
.cs-level-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.cs-level-num { font-family: var(--pix); font-size: 9px; color: var(--accent); letter-spacing: .12em; }
.cs-level-name { font-family: var(--pix); font-size: 18px; line-height: 1.35; color: #fff; margin: 0; }
.cs-level-lead { font-size: 18px; line-height: 1.6; color: #e3e0d8; max-width: 66ch; margin: 0 0 32px; }
.cs-figure { margin: 0; }
.cs-figure img { width: 100%; height: auto; background: #0e1116; box-shadow: 0 24px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.cs-figure.is-tall img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }
.cs-figure figcaption { font-family: var(--mono); font-size: 11px; color: #8c8f96; margin-top: 16px; letter-spacing: .02em; }
.cs-figure figcaption::before { content: '▸ '; color: var(--accent); }
.cs-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.cs-two.is-tallmedia { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
.cs-points { margin: 0; padding: 0; list-style: none; }
.cs-points-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.cs-points-wrap { max-width: 60ch; }
.cs-points li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid #1c1f25; font-size: 15px; color: #c9c7bf; line-height: 1.5; }
.cs-points li:last-child { border-bottom: 1px solid #1c1f25; }
.cs-points li::before { content: ''; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; background: var(--accent); }
.cs-gallery { display: grid; gap: 32px; }
.cs-gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-gallery.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-gallery.rows { grid-template-columns: 1fr; }
.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.cs-card { background: linear-gradient(180deg, #14171c, #0f1216); border: 1px solid #22262e; border-top: 3px solid var(--accent); padding: 24px 24px; }
.cs-card .t { font-family: var(--pix); font-size: 8px; color: var(--accent); letter-spacing: .1em; margin-bottom: 16px; }
.cs-card .s { font-size: 17px; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 16px; }
.cs-card .c { font-size: 13px; color: #a4a29a; line-height: 1.5; padding-top: 16px; border-top: 1px solid #22262e; }
.cs-card .c::before { content: '↳ '; color: var(--accent); }
.cs-note { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: #7d8087; border-left: 2px solid #3a3d44; padding-left: 8px; }
.cs-end { padding: 72px 56px 40px; text-align: center; border-top: 1px solid #1a1d23; }
.cs-end .pix { font-size: 12px; color: #fff; margin-bottom: 16px; display: block; }
.cs-end p { color: #8c8f96; font-size: 14px; margin: 0 0 16px; }
.cs-end button { font-family: var(--pix); font-size: 9px; color: #fff; background: var(--accent2); border: 1px solid var(--accent); padding: 16px 24px; margin: 0 8px; }
.cs-end button:hover { background: var(--accent); color: #000; }

/* ------------------------------------------------ PLAYER 1: the résumé header + sidebar as a profile card on the glass */
.player { position: absolute; inset: 0; z-index: 18; display: grid; place-items: center; padding: 64px 24px; background: rgba(3,4,6,.72); backdrop-filter: blur(3px); }
.player[hidden] { display: none; }
.player-card { position: relative; width: min(820px, 100%); max-height: 100%; overflow: auto; padding: 24px 32px 16px; background: linear-gradient(180deg, rgba(20,23,30,.97), rgba(10,12,16,.98)); border-top: 3px solid var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.8); animation: player-in .35s var(--ease-out); }
@keyframes player-in { from { opacity: 0; transform: translateY(14px); } }
.player-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.player-name { font-size: 16px; color: #fff; margin: 0 0 8px; text-shadow: 0 0 18px rgba(251,191,36,.45); }
.player-title { margin: 0; font-size: 14px; font-weight: 600; color: #e3e0d8; }
.player-x { font-size: 22px; line-height: 1; color: var(--ink-dim); padding: 4px 8px; border: 1px solid #2a2d33; }
.player-x:hover { color: #fff; border-color: var(--gold); }
.player-quote { font-size: 17px; line-height: 1.5; color: #fff; margin: 16px 0 8px; border-left: 3px solid var(--gold); padding-left: 16px; }
.player-clauses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding-left: 16px; color: var(--ink-mute); }
.pf { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: #d9d6ce; background: rgba(0,0,0,.5); border: 1px solid #2a2d33; padding: 4px 8px; transition: color .15s, border-color .15s, background .15s; }
.pf .ico { width: 13px; height: 13px; color: var(--gold); }
.pf:hover { color: #fff; border-color: var(--gold); background: rgba(40,32,8,.7); }
.player-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; padding-top: 16px; border-top: 1px solid #1c1f25; }
.player-grid section p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #c9c7bf; }
.player-grid section p b { color: #fff; font-weight: 600; }
.player-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.player-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #1c1f25; }
.player-foot a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: #d9d6ce; text-decoration: none; }
.player-foot a .ico { width: 14px; height: 14px; color: var(--gold); }
.player-foot a:hover { color: #fff; }
/* the one clear way to get the résumé: a gold key at the foot of the card (Denis, 2026-09-24) */
.player-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 16px; font-family: var(--pix); font-size: 8px; letter-spacing: .1em; color: #111; background: var(--gold); text-decoration: none; transition: background .2s; }
.player-cta .ico, .player-cta svg { width: 14px; height: 14px; color: #111; }
.player-cta:hover { background: #fff; }
.player-hint { margin: 16px 0 0; font-size: 6px; letter-spacing: .14em; color: var(--ink-mute); }
body.is-player .osd-levels { pointer-events: none; }

/* ------------------------------------------------ actions: the real nav, always on the glass */
.actions { opacity: 1 !important; pointer-events: auto; display: flex; gap: 8px; z-index: 19; }
body.is-off .actions { opacity: .55 !important; }
.act { display: flex; align-items: center; gap: 8px; font-family: var(--pix); font-size: 7px; letter-spacing: .1em; color: #d9d6ce; text-decoration: none; background: rgba(0,0,0,.6); border: 1px solid #2a2d33; border-bottom: 3px solid #14161a; padding: 8px 8px; transition: color .15s, border-color .15s, transform .06s, background .15s; }
body.is-player .act[data-act-id="player"] { color: #000; background: var(--gold); border-color: var(--gold); }
.act svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.act:hover { color: #fff; border-color: var(--gold); background: rgba(40,32,8,.7); }
.act:active { transform: translateY(2px); border-bottom-width: 1px; }
.osd-bl { left: 26px; bottom: 24px; }
body.is-on .osd-bl { opacity: 1; }
body.is-playing .osd-bl { opacity: .35; }
.osd-bl .hint { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }

/* ------------------------------------------------ dev cartridge: same mould, graphite shell, accent-coloured tab */
.cart.is-dev { --sat: .06; }
/* dev carts read like the rest: the band is white through luminosity, the DEV BUILD label says what it is (the accent ink and the corner tab clashed with the hand-picked shells) */
.cart-dev-tab { display: none; }

/* the dev window: a retro OS window on the glass with the live site inside */
.devwin { position: absolute; left: 50%; top: 84px; bottom: calc(var(--deck-h) + var(--cart-out) + 26px); width: min(1480px, 94%); transform: translateX(-50%); display: flex; flex-direction: column; background: #14161b; border: 1px solid #3a3d44; box-shadow: 0 0 0 1px #000, 0 40px 90px rgba(0,0,0,.8); }
.devwin-bar { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; background: linear-gradient(180deg, #2c2f36, #1d2026); border-bottom: 1px solid #0b0c0e; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.devwin-bar .dots { display: flex; gap: 8px; }
.devwin-bar .dots i { width: 10px; height: 10px; background: #3c4048; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.devwin-bar .dots i:first-child { background: var(--accent); }
.devwin-bar .title { font-family: var(--pix); font-size: 8px; color: #fff; letter-spacing: .1em; }
.devwin-bar .url { flex: 1; font-family: var(--mono); font-size: 11px; color: #9a9da4; background: #0e1014; border: 1px solid #2a2d33; padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devwin-bar .by { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.devwin-bar a, .devwin-bar button { font-family: var(--pix); font-size: 7px; color: #fff; background: var(--accent2); border: 1px solid var(--accent); padding: 8px 16px; text-decoration: none; letter-spacing: .1em; }
.devwin-bar a:hover, .devwin-bar button:hover { background: var(--accent); color: #000; }
.devwin-body { position: relative; flex: 1; min-height: 0; background: #fff; }
.devwin-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.devwin-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #0e1014; color: var(--ink-dim); font-family: var(--pix); font-size: 8px; letter-spacing: .14em; pointer-events: none; transition: opacity .4s; }
.devwin-body.is-loaded .devwin-loading { opacity: 0; }
.devwin-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), #0e1014; color: #e9e6df; padding: 40px; }
.devwin-fallback .big { font-family: var(--pix); font-size: 26px; color: #fff; margin: 0 0 16px; text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
.devwin-fallback p { max-width: 52ch; color: #b6b4ac; font-size: 15px; line-height: 1.6; margin: 0 auto 24px; }
.devwin-fallback a { display: inline-block; font-family: var(--pix); font-size: 10px; color: #000; background: var(--accent); padding: 16px 24px; text-decoration: none; letter-spacing: .12em; box-shadow: 0 6px 0 var(--accent2); }
.devwin-fallback a:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent2); }
.devwin-fallback small { display: block; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }

/* ------------------------------------------------ SFX switch, on the console (default on)
   Hardware language: a slide switch with an LED and a gray printed label (red stays reserved for POWER / PLAY / EJECT). */
.deck-audio { display: flex; align-items: flex-end; gap: 18px; justify-self: end; position: relative; z-index: 1; padding-bottom: 2px; }
.deck-audio.is-flash .hw-label { animation: label-flash .6s steps(2) 2; }
@keyframes label-flash { 50% { color: var(--gold); } }
.hw { display: flex; align-items: center; gap: 8px; }
.hw.is-dim { opacity: .5; }
.hw-label { font-family: var(--sans); font-weight: 700; font-size: 7px; letter-spacing: .22em; color: #b9bbbf; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.hw-led { width: 6px; height: 6px; background: #3a1c1c; box-shadow: inset 0 0 0 1px #000; }
.hw-led.is-on { background: #ff4a3d; box-shadow: 0 0 6px rgba(255,74,61,.9); }
.hw-toggle { position: relative; width: 34px; height: 16px; background: linear-gradient(180deg, #1a1b1e, #101113); box-shadow: inset 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.08); }
.hw-toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 12px; background: linear-gradient(180deg, #b8b9b7, #8b8c8a); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 #000; transition: transform .14s var(--ease-out); }
.hw-toggle.is-on i { transform: translateX(16px); background: linear-gradient(180deg, #ffd766, #c9931a); }
.hw-toggle:disabled { cursor: default; }

body.is-playing .osd-np { bottom: calc(var(--deck-h) + var(--cart-out) + 22px); }

/* ------------------------------------------------ micro animations */
.act { transition: color .15s, border-color .15s, transform .12s var(--ease-out), background .15s; }
.act:hover { transform: translateY(-2px); }
.act:hover svg { animation: nudge .35s var(--ease-out); }
@keyframes nudge { 40% { transform: translateY(-2px) rotate(-6deg); } }
.arrow:hover svg { animation: arrow-nudge .4s var(--ease-out); }
.arrow-l:hover svg { animation-name: arrow-nudge-l; }
@keyframes arrow-nudge { 40% { transform: translateX(3px); } }
@keyframes arrow-nudge-l { 40% { transform: translateX(-3px); } }
.cart.is-active .cart-inner { animation: float 4.5s ease-in-out infinite; }
.cart.is-active .cart-inner:hover { animation-play-state: paused; }
@keyframes float { 50% { transform: translateY(-5px); } }
.cart.is-side .cart-inner:hover { transform: translateY(-4px); }
.dossier .score-row, .dossier .d-list li { animation: row-in .45s var(--ease-out) both; }
.dossier .score-row:nth-child(2) { animation-delay: .04s; } .dossier .score-row:nth-child(3) { animation-delay: .08s; } .dossier .score-row:nth-child(4) { animation-delay: .12s; } .dossier .score-row:nth-child(5) { animation-delay: .16s; } .dossier .score-row:nth-child(6) { animation-delay: .2s; } .dossier .score-row:nth-child(7) { animation-delay: .24s; }
.dossier .d-list li:nth-child(2) { animation-delay: .05s; } .dossier .d-list li:nth-child(3) { animation-delay: .1s; } .dossier .d-list li:nth-child(4) { animation-delay: .15s; } .dossier .d-list li:nth-child(5) { animation-delay: .2s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.d-title { animation: title-glint 6s linear infinite; }
@keyframes title-glint { 0%, 92%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); } 95% { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 95%, transparent), 0 0 2px #fff; } }
body.is-on .led svg { animation: led-breathe 3s ease-in-out infinite; }
@keyframes led-breathe { 50% { filter: drop-shadow(0 0 3px rgba(143,227,160,.7)); } }
.deck-btn:not(:disabled):hover .deck-btn-face { transform: translateY(-3px); }
.lvl { transition: color .15s, background .15s, border-color .15s, transform .12s; }
.lvl:hover { transform: translateY(-1px); }
.lvl.is-pulse { animation: chip-pulse .4s var(--ease-out); }
@keyframes chip-pulse { 30% { transform: scale(1.12); box-shadow: 0 0 12px var(--accent); } }
body.is-playing .deck-slot-inner { box-shadow: inset 0 0 0 1px #000, inset 0 7px 10px rgba(0,0,0,.95), inset 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.cs-figure img { transition: transform .5s var(--ease-out), box-shadow .5s; }
.cs-figure:hover img { transform: translateY(-4px) scale(1.01); box-shadow: 0 34px 60px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.cs-card { transition: transform .35s var(--ease-out), border-color .3s; }
.cs-card:hover { transform: translateY(-4px); border-top-color: #fff; }
.shop-tube { animation: tube 6s linear infinite, tube-warm 1.2s var(--ease-out) both; }
@keyframes tube-warm { 0% { opacity: 0; } 30% { opacity: .4; } 45% { opacity: 0; } 100% { opacity: 1; } }

@keyframes drift { 50% { letter-spacing: .12em; } }
@media (prefers-reduced-motion: reduce) { .cart.is-active .cart-inner, .d-title, body.is-on .led svg { animation: none !important; } }

/* ------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .dossier { grid-template-columns: 1fr 1.3fr; gap: 0 24px; }
  .dossier > :nth-child(3) { display: none; }
  .chip { padding: 6px 7px; font-size: 6px; }
  .arrow-l { left: 0; } .arrow-r { right: 0; }
  .cs-hero { grid-template-columns: 1fr; padding: 88px 32px 40px; }
  .cs-level { padding: 48px 32px; }
  .cs-two, .cs-two.is-tallmedia { grid-template-columns: 1fr; }
  .cs-cards, .cs-gallery.cols-3 { grid-template-columns: 1fr; }
  :root { --deck-w: 100vw; }
  .deck-right, .deck-brand-text { display: none; }
  .act span { display: none; }
  .act svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ==================================================================
   HANDHELD (mobile) — DenDen DDS-P, the Valve-made Game Boy
   Screen = top two thirds. Controller = bottom third: a matte molding with an inset faceplate that carries
   everything you touch. Trackpad (browse / shelf), the DD button (PROFILE), A / B, four link buttons.
   Round parts are inline SVG (the site's zero border-radius rule). One accent: gold on A, the LED, the SFX knob.
   ================================================================== */
.pad, .osd-pad { display: none; }
@media (max-width: 820px), ((max-height: 520px) and (pointer: coarse) and (min-width: 600px)) {
  :root { --bezel: 8px; --pk: 1; }
  .deck, .deck-feet, .bezel-chin, .osd-bl, .osd-levels, .arrow, .shop-neon small { display: none !important; }
  .tv { bottom: var(--pad-h); }
  .bezel { box-shadow: inset 0 0 0 1px #3a3d43, inset 0 0 0 2px #0a0b0d, inset 0 0 24px rgba(0,0,0,.9); }
  .shop-neon { right: 14px; top: 16px; gap: 3px; }
  .shop-neon .pix { font-size: 11px; }
  .shop-tube { top: 42px; left: 10%; right: 10%; }

  /* the hint strip along the bottom edge of the glass: where you are */
  .osd-pad { display: none; }   /* the hint strip is gone (Denis, 2026-09-24): the chips name the arrangement, the head names the shelf, the pad labels its own keys */
  body.is-on .osd-pad { opacity: 1; }
  .osd-pad .pix { font-size: 6px; letter-spacing: .12em; color: var(--ink-dim); }
  .osd-pad .pix:last-child { color: var(--cta); }

  /* library: shelf header compact, carousel gets the room, the dossier is a compact tag */
  .select { padding: 64px 8px 32px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .shelf-head { grid-template-columns: 1fr; gap: 2px; }
  .shelf-peek { font-size: 6px; }
  .shelf-title { padding-left: 8px; border-left-width: 2px; }
  .shelf-no { font-size: 6px; margin-bottom: 4px; }
  .shelf-title h2 { font-size: 12px; margin-bottom: 3px; }
  .shelf-title p { font-size: 9px; }
  /* the arrangements are a chip row at the top of the glass (the band the name block left); B on the pad cycles them too */
  .arrange { display: flex; position: absolute; grid-area: 1 / 1 / 2 / 2; left: 0; right: 0; top: -28px; z-index: 6; justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }   /* an absolute grid item is boxed by its grid area, so it takes column 1 and sits 28 above the head */
  .arrange::-webkit-scrollbar { display: none; }
  .arrange-k { display: none; }
  .chip { height: 28px; padding: 0 12px; font-size: 6px; letter-spacing: .1em; background: #0b0e12; border: 1px solid #2b2f38; color: var(--ink-dim); }
  .chip.is-on { background: #14120a; border-color: var(--gold); color: #fff; }
  .shelf-peek-down { bottom: 30px; }
  .stage { perspective: 900px; touch-action: none; }
  .dossier { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 16px; padding: 8px 16px 8px; width: 100%; max-height: 140px; align-items: start; }
  /* the dossier has a ceiling on the handheld; a column that runs past it scrolls inside (Denis, 2026-09-24: DenDenDesign's client list was crushing the carts) */
  .dossier > .d-col { max-height: 124px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .dossier > .d-col::-webkit-scrollbar { display: none; }
  .dossier > :nth-child(3) { display: none; }
  .d-head { font-size: 6px; margin: 2px 0 8px; }
  .d-title { font-size: 12px; margin: 0 0 4px; }
  .d-title small { font-size: 9px; margin-top: 2px; }
  .d-role-line { font-size: 11px; margin: 0 0 8px; }
  .tags { gap: 4px 8px; }
  .tags li { font-size: 9px; }
  .tags .ico { width: 11px; height: 11px; }
  .d-date { font-size: 9px; margin-top: 8px; }
  .d-col-preview { gap: 4px; }
  .d-block p { font-size: 10px; line-height: 1.4; }
  .d-col-preview .d-block:nth-child(n+2) { display: none; }
  .d-cta { font-size: 6px; padding-top: 4px; }
  .player { padding: 0; place-items: stretch; }
  .player-card { width: 100%; max-height: none; padding: 16px 16px 16px; border-top-width: 2px; }
  .player-name { font-size: 11px; }
  .player-title { font-size: 12px; }
  .player-quote { font-size: 14px; margin: 16px 0 8px; }
  .player-grid { grid-template-columns: 1fr; gap: 8px; }
  .player-grid section p { font-size: 12px; }
  .player-hint { display: none; }
  .player-clauses span { display: none; }
  .shop-shelf { height: 1px; }
  .cart.is-active .cart-inner:hover { transform: none; }
  .deck-cart { display: none; } /* no seat: the cartridge slides into the device under the glass */

  /* the study, on a phone */
  .crt-content { padding-bottom: 44px; }
  .cs { font-size: 15px; }
  .cs-hero { grid-template-columns: 1fr; gap: 24px; padding: 64px 16px 32px; min-height: 0; }
  .cs-kicker { font-size: 6px; margin-bottom: 16px; gap: 8px 16px; }
  .cs-qa p { font-size: 14px; }
  .cs-facts.cols-3 { grid-template-columns: 1fr 1fr; }
  .cs-title { font-size: 22px; }
  .cs-tagline { font-size: 15px; margin-bottom: 16px; }
  .cs-stats { grid-template-columns: 1fr; gap: 8px; margin-bottom: 24px; }
  .cs-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .cs-stat .n { font-size: 16px; margin: 0; }
  .cs-stat .n.is-long { font-size: 12px; }
  .cs-summary { font-size: 15px; }
  .cs-facts { grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px; }
  .cs-media img, .cs-media video { max-height: 40vh; }
  .cs-press { font-size: 6px; }
  .cs-level { padding: 32px 16px; }
  .cs-level-head { flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .cs-level-name { font-size: 13px; }
  .cs-level-lead { font-size: 15px; margin-bottom: 24px; }
  .cs-figure.is-tall img { max-height: 60vh; }
  .cs-two, .cs-two.is-tallmedia { gap: 24px; }
  .cs-gallery { gap: 16px; }
  .cs-cards { grid-template-columns: 1fr; gap: 8px; }
  .cs-card { padding: 16px 16px; }
  .cs-end { padding: 40px 16px 32px; }
  .cs-end button { display: block; width: 100%; margin: 8px 0 0; }
  .devwin { top: 46px; bottom: 34px; width: calc(100% - 16px); }
  .devwin-bar .url, .devwin-bar .by, .devwin-bar button { display: none; }

  /* ---------- the controller: body, top strip, faceplate ---------- */
  .pad {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pad-h); z-index: 30; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    background: linear-gradient(180deg, #34363b 0%, #2c2e32 10%, #26272b 60%, #1e1f22 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -10px 30px rgba(0,0,0,.8);
  }
  .pad::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #08090a; }
  .pad.is-clunk { animation: pad-clunk .28s var(--ease-out); }
  @keyframes pad-clunk { 30% { transform: translateY(3px); } }
  .pad-top { position: relative; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 14px; }
  .pad-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(180deg, #0e0f11, #46484e); }
  .pad-top .pwr-unit { gap: 7px; height: auto; }
  .pad-top .pwr { width: 34px; height: 14px; background: #0e0f11; box-shadow: inset 0 1px 1px rgba(0,0,0,.7); }
  .pad-top .pwr::before { display: none; }
  .pad-top .pwr i { top: 2px; left: 2px; width: 15px; height: 10px; background: linear-gradient(180deg, #54565c, #32343a); box-shadow: 0 1px 0 #000; }
  .pad-top .pwr[aria-checked="true"] i { transform: translateX(15px); }
  .pad-top .pwr::after { content: ''; position: absolute; left: 4px; top: 4px; width: 10px; height: 6px; background: #8fe3a0; opacity: 0; transition: opacity .3s; }
  .pad-top .pwr[aria-checked="true"]::after { opacity: 1; }
  .pad-top .hw-label { font-size: 6px; letter-spacing: .2em; color: #8a8d94; }
  .pad-brand { display: flex; align-items: baseline; gap: 8px; }
  .pad-wordmark { font-family: var(--sans); font-weight: 700; font-size: 7px; letter-spacing: .26em; color: #d2d4d8; }
  .pad-model { font-family: var(--sans); font-weight: 600; font-size: 6px; letter-spacing: .2em; color: #8a8d94; }
  .pad-top .deck-audio { padding-bottom: 0; }
  .pad-top .hw-toggle { width: 34px; height: 14px; background: #0e0f11; box-shadow: inset 0 1px 1px rgba(0,0,0,.7); }
  .pad-top .hw-toggle i { top: 2px; left: 2px; width: 15px; height: 10px; }
  .pad-top .hw-toggle.is-on i { transform: translateX(15px); }
  .pad-top .hw-led { display: none; }

  /* faceplate: drawn at 370 × 230, scaled by --pk (set by fitPlate) to the phone */
  .pad-plate {
    position: absolute; left: 50%; top: 42px; width: 370px; height: 150px; transform: translateX(-50%) scale(var(--pk)); transform-origin: top center;
    background: linear-gradient(180deg, #141518, #0d0e10); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05);
  }
  .pad-plate button, .pad-plate a { touch-action: manipulation; }
  /* printed labels: 5px Inter Medium, tracked, grey. The function label changes with the screen. */
  .hw-fn { position: absolute; font-family: var(--sans); font-weight: 500; font-size: 5px; letter-spacing: .16em; color: #8a8d94; text-align: center; white-space: nowrap; pointer-events: none; }
  .hw-fn em { font-style: normal; transition: color .2s; }
  .hw-fn.is-idle em { color: transparent; }
  .hw-fn-a em { color: var(--cta); }

  /* D-pad: browse ◀ ▶, shelf ▲ ▼ (levels / swap in a study). Four tap zones over one SVG face. */
  .tp { position: absolute; left: 22px; top: 28px; width: 100px; height: 100px; }
  .tp-face { position: absolute; inset: 0; width: 100%; height: 100%; }
  .tp-zone { position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background .08s; }
  .tp-u { clip-path: polygon(32% 0, 68% 0, 68% 50%, 32% 50%); } .tp-d { clip-path: polygon(32% 50%, 68% 50%, 68% 100%, 32% 100%); }
  .tp-l { clip-path: polygon(0 32%, 50% 32%, 50% 68%, 0 68%); } .tp-r { clip-path: polygon(50% 32%, 100% 32%, 100% 68%, 50% 68%); }
  .tp-zone:active, .tp-zone.is-pressed { background: rgba(255,255,255,.07); }
  .tp-zone:disabled { pointer-events: none; }
  .tp-fn { left: -20px; right: -20px; top: 108px; }

  /* round buttons: one construction for DD, A, B and the links (rim · matte face · top light), letter or icon on the face */
  .rb { position: absolute; display: block; padding: 0; background: none; text-decoration: none; }
  .rb > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: url(#rbRim); transition: transform .06s, filter .3s; }
  .rb b, .rb .rb-ico, .rb .ico-dd { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .rb b { font-family: var(--sans); font-weight: 700; font-size: 13px; color: #e8e8ea; line-height: 1; }
  .rb .rb-ico { display: block; width: 15px; height: 15px; }
  .rb .rb-ico svg { display: block; width: 100%; height: 100%; stroke: #e8e8ea; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .rb .ico-dd { width: 21px; height: 20px; background: #e8e8ea; -webkit-mask: url(../assets/images/DenDenLogo.svg) center / contain no-repeat; mask: url(../assets/images/DenDenLogo.svg) center / contain no-repeat; }
  .rb:active > svg:first-child, .rb.is-pressed > svg:first-child { transform: translateY(2px); }
  .rb:disabled { opacity: .4; }
  .rb-key-dd .rb { left: 163px; top: 56px; width: 44px; height: 44px; }
  .rb-key-dd .hw-fn { left: 155px; top: 106px; width: 60px; }
  .rb-key-b .rb { left: 308px; top: 28px; width: 44px; height: 44px; }
  .rb-key-b .hw-fn { left: 300px; top: 78px; width: 60px; }
  .rb-key-a .rb { left: 257px; top: 71px; width: 58px; height: 58px; }
  .rb-key-a .hw-fn { left: 256px; top: 135px; width: 60px; }
  .rb-a b { color: var(--cta); }
  .pad.is-a-cta .rb-a > svg:first-child { fill: url(#rbRimA); filter: drop-shadow(0 0 10px rgba(251,191,36,.45)); }
  .pad:not(.is-a-cta) .rb-a b { color: #8a8d94; }
  .pad.is-b-live .rb-b b { color: #e8e8ea; }
  .pad:not(.is-b-live) .rb-b b { color: #8a8d94; }
  /* LINKS: one key in the top strip raises a tray above the pad. Closed, the pad is 80px shorter. */
  .pad-linkskey { font-family: var(--sans); font-weight: 700; font-size: 6px; letter-spacing: .2em; color: #8a8d94;
    height: 14px; padding: 0 7px; background: #0e0f11; box-shadow: inset 0 1px 1px rgba(0,0,0,.7); transition: background .18s, color .18s; }
  .pad-linkskey[aria-expanded="true"] { background: linear-gradient(180deg, #fbbf24, #966e14); color: #0e0f11; }
  .pad-tray { position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; z-index: 1; padding: 8px 8px 10px;
    background: linear-gradient(180deg, #232427, #151618);   /* the readout's bezel */
    box-shadow: 0 -8px 24px rgba(0,0,0,.6); }
  .pad-tray::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(180deg, #0e0f11, #46484e); }
  .pad-tray[hidden] { display: none; }
  .pad-tray.is-in { animation: tray-up .22s var(--ease-out) both; }
  @keyframes tray-up { from { transform: translateY(100%); opacity: 0; } }
  /* the green screen: black glass, phosphor text, the four links in a row */
  .pad-links { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-evenly; gap: 8px; background: #08090a; box-shadow: inset 0 0 0 1px #0a0b0c, inset 0 0 18px rgba(143,227,160,.06); }
  .pad-links .rl { font-size: 7px; gap: 6px; text-shadow: 0 0 6px rgba(143,227,160,.45); }
  .pad-links .rl span { display: inline; }   /* the tray has room for the labels (the 1100px rule hides them on narrow consoles only) */
  .pad-links .rl svg { width: 14px; height: 14px; filter: drop-shadow(0 0 3px rgba(143,227,160,.4)); }
  .pad-links .rb { top: 8px; width: 36px; height: 36px; }
  .pad-links .rb-key:nth-child(1) .rb { left: 12%; } .pad-links .rb-key:nth-child(2) .rb { left: 34%; } .pad-links .rb-key:nth-child(3) .rb { left: 56%; } .pad-links .rb-key:nth-child(4) .rb { left: 78%; }
  .pad-links .hw-fn { top: 48px; width: 64px; }
  .pad-links .rb-key:nth-child(1) .hw-fn { left: calc(12% - 14px); } .pad-links .rb-key:nth-child(2) .hw-fn { left: calc(34% - 14px); } .pad-links .rb-key:nth-child(3) .hw-fn { left: calc(56% - 14px); } .pad-links .rb-key:nth-child(4) .hw-fn { left: calc(78% - 14px); }
}

/* ---------- landscape phone: the wide handheld. Screen in the middle; trackpad + DD on the left wing, A / B + links on the right. ---------- */
@media (max-height: 520px) and (pointer: coarse) and (min-width: 600px) {
  :root { --wing: 128px; --bezel: 6px; }
  .deck, .deck-feet, .bezel-chin, .osd-bl, .osd-levels, .arrow, .shop-neon small { display: none !important; }
  .tv { top: 28px; bottom: 0; left: var(--wing); right: var(--wing); }
  .shop-neon { right: 12px; top: 10px; }
  .shop-neon .pix { font-size: 10px; }
  .osd-pad { display: none; }   /* the hint strip is gone (Denis, 2026-09-24): the chips name the arrangement, the head names the shelf, the pad labels its own keys */
  body.is-on .osd-pad { opacity: 1; }
  .osd-pad .pix { font-size: 6px; letter-spacing: .12em; color: var(--ink-dim); }
  .osd-pad .pix:last-child { color: var(--cta); }
  .select { padding: 40px 8px 24px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .shop-tube { top: 30px; }
  .shelf-head { grid-template-columns: 1fr; gap: 1px; }
  .shelf-peek { font-size: 5px; }
  .shelf-title { padding-left: 8px; border-left-width: 2px; }
  .shelf-no { font-size: 5px; margin-bottom: 3px; }
  .shelf-title h2 { font-size: 10px; margin-bottom: 2px; }
  .shelf-title p { font-size: 8px; }
  .shelf-peek-down { bottom: 26px; }
  .stage { perspective: 900px; touch-action: none; }
  .dossier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; padding: 8px 16px 8px; width: 100%; max-height: 96px; align-items: start; }
  .dossier > .d-col { max-height: 80px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  /* landscape glass is ~350px tall: the neighbour-shelf peeks don't fit above and below the head, so they go (▲ ▼ and the chips still walk the shelves) */
  .shelf-peek { display: none; }
  .dossier > .d-col::-webkit-scrollbar { display: none; }
  .dossier > :nth-child(3), .d-genre, .dossier .d-head:first-child .rank { display: none; }
  .d-head { font-size: 6px; margin: 2px 0 4px; }
  .d-title { font-size: 12px; margin: 0 0 4px; }
  .d-role-line { font-size: 10px; margin: 0 0 4px; }
  .score-row { font-size: 6px; padding: 3px 0; gap: 8px; }
  .shop-shelf { height: 1px; }
  .deck-cart { display: none; }
  .crt-content { padding-bottom: 40px; }
  .cs { font-size: 14px; }
  .cs-hero { grid-template-columns: 1fr; gap: 16px; padding: 56px 16px 24px; min-height: 0; }
  .cs-title { font-size: 20px; }
  .cs-tagline { font-size: 14px; margin-bottom: 16px; }
  .cs-stats { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
  .cs-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .cs-stat .n { font-size: 15px; margin: 0; }
  .cs-media img, .cs-media video { max-height: 60vh; }
  .cs-level { padding: 32px 16px; }
  .cs-level-name { font-size: 12px; }
  .cs-level-lead { font-size: 14px; margin-bottom: 16px; }
  .cs-two, .cs-two.is-tallmedia, .cs-cards, .cs-gallery.cols-3 { grid-template-columns: 1fr; }
  .cs-end { padding: 32px 16px 24px; }
  .devwin { top: 40px; bottom: 30px; width: calc(100% - 12px); }
  .devwin-bar .url, .devwin-bar .by, .devwin-bar button { display: none; }

  .pad { display: block; position: absolute; inset: 0; height: auto; background: none; box-shadow: none; pointer-events: none; z-index: 30; }
  .pad::after { display: none; }
  .pad-top { position: absolute; left: 0; right: 0; top: 0; height: 28px; pointer-events: auto; background: linear-gradient(180deg, #34363b, #26272b); }
  .pad-plate { pointer-events: none; left: 0; right: 0; top: 28px; bottom: 0; width: auto; height: auto; transform: none; background: none; clip-path: none; box-shadow: none; }
  .pad-plate::before, .pad-plate::after { content: ''; position: absolute; top: 0; bottom: 0; width: var(--wing); background: linear-gradient(180deg, #2c2e32, #1e1f22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); pointer-events: auto; }
  .pad-plate::before { left: 0; } .pad-plate::after { right: 0; }
  .pad-plate > * { pointer-events: auto; }
  /* landscape: the green screen hangs down from the top strip, full width, instead of landing on the A/B wing */
  .pad-tray { top: 28px; bottom: auto; height: 48px; padding: 6px 8px 8px; pointer-events: auto; }
  .pad-tray.is-in { animation: tray-down .22s var(--ease-out) both; }
  @keyframes tray-down { from { transform: translateY(-100%); opacity: 0; } }
  .tp { left: 14px; top: 16px; width: 100px; height: 100px; z-index: 1; }
  .tp-fn { top: 106px; }
  .rb, .hw-fn, .pad-etch { z-index: 1; }
  .osd-pad .pix:first-child { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-key-dd .rb { left: 42px; top: 150px; width: 44px; height: 44px; }
  .rb-key-dd .hw-fn { left: 34px; top: 200px; width: 60px; }
  .rb-key-b .rb { left: calc(100% - 52px); top: 14px; width: 44px; height: 44px; }
  .rb-key-b .hw-fn { left: calc(100% - 60px); top: 64px; width: 60px; }
  .rb-key-a .rb { left: calc(100% - 112px); top: 44px; width: 58px; height: 58px; }
  .rb-key-a .hw-fn { left: calc(100% - 113px); top: 108px; width: 60px; }
  .pad-etch { left: auto; right: 16px; width: 96px; top: 128px; }
}

/* ==================================================================
   THE FIVE-SCREEN STUDY  (Figma section 8 · desktop, section 7 · mobile)
   A study is no longer one long scroll: it is 1 OVERVIEW · 2 PROBLEM · 3 APPROACH · 4 IMPACT · 5 REFLECT.
   The glass carries the study and nothing else — the IN SLOT header, the section rail, and two floating
   keys either side of the DDS-01 (BACK / NEXT). The console keeps the SCREEN readout; the handheld keeps
   the hint strip, and HIDE PAD folds the controller away into a single rail.
   ================================================================== */

/* IN SLOT · <STUDY> · CASE STUDY — replaces the name plate at the top-left while a study is in the slot */
body.is-screens .osd-levels { display: none; }

/* the section rail: five 2px bars, the one you are on in gold, the one under the pointer offering CLICK · OR ▼ */
.rail { position: absolute; left: 26px; right: 26px; top: 24px; z-index: 12; display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
body.is-screens .rail { display: grid; }
.seg { position: relative; display: block; padding: 16px 8px 16px; background: none; border: 1px solid transparent; text-align: left; color: #8e8c85; font-family: var(--pix); font-size: 7px; letter-spacing: .06em; cursor: pointer; transition: color .2s, border-color .2s; }
.seg::before { content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 2px; background: #3a4050; transition: background .25s; }
.seg .seg-hint { display: block; margin-top: 8px; font-size: 5px; color: #6f6d66; opacity: 0; transition: opacity .2s; }
.seg:hover { color: var(--ink); border-color: #2b2f38; }
.seg:hover .seg-hint { opacity: 1; }
.seg.is-done { color: var(--accent); }
.seg.is-done::before { background: var(--accent); }
.seg.is-current { color: #fff; }
.seg.is-current::before { background: var(--gold); }

/* BACK / NEXT: hardware keys floating on the glass either side of the console */
.navkey { position: absolute; z-index: 13; bottom: calc(var(--bezel) + 18px); display: none; align-items: center; gap: 0;
  width: min(322px, calc((100vw - var(--deck-w) * var(--deck-k, 1)) / 2 - var(--gut, 40px) - 24px)); height: 64px; padding: 8px; background: #0b0e12; border: 1px solid #2b2f38; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); cursor: pointer; transition: border-color .2s, transform .12s var(--ease-out); }
body.is-screens .navkey { display: flex; }
.navkey:hover { border-color: #3a4050; transform: translateY(-2px); }
.navkey:active { transform: translateY(0); }
.navkey-back { left: 26px; }
.navkey-next { right: 26px; justify-content: flex-end; }
.navkey-chip { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 6px; font-family: var(--pix); font-size: 12px; background: #1c1f25; border: 1px solid #3a4050; color: var(--ink); }
.navkey-next .navkey-chip { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, #fff); color: #050607; }
.navkey-txt { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; font-family: var(--pix); }
.navkey-back .navkey-txt { align-items: flex-start; }
.navkey-next .navkey-txt { align-items: flex-end; text-align: right; }
.navkey-txt em { font-style: normal; font-size: 6px; letter-spacing: .12em; color: #9a9890; }
.navkey-txt b { font-weight: 400; font-size: 10px; letter-spacing: .06em; color: var(--ink); }

/* SCREEN readout on the console: name, one LED per screen, progress */
.deck-key-screen { display: flex; }
.readout { position: relative; display: flex; align-items: center; gap: 10px; width: 216px; height: 26px; padding: 0 9px; background: linear-gradient(180deg, #232427, #151618); box-shadow: inset 0 0 0 1px #0a0b0c, 0 1px 0 #0a0b0c; }
.readout::before { content: ''; position: absolute; left: 3px; right: 3px; top: 3px; height: 20px; background: #08090a; box-shadow: inset 0 2px 3px rgba(0,0,0,.8); }
.readout > * { position: relative; z-index: 1; font-family: var(--pix); font-size: 7px; color: var(--pwr-on); }
.readout-name { flex: 0 0 auto; }
.readout-dots { display: flex; gap: 4px; margin-left: auto; }
.readout-dots i { width: 5px; height: 5px; background: #24282a; }
.readout-dots i.is-on { background: var(--pwr-on); box-shadow: 0 0 5px rgba(143,227,160,.8); }
.readout-pos { flex: 0 0 auto; margin-left: auto; }
/* readout modes: OFF (dim), LOADING (the dots fill), and the links when LINKS is pressed */
.readout.is-text .readout-name { opacity: .35; }
.readout-links { position: absolute; left: 3px; right: 3px; top: 3px; height: 20px; z-index: 2; display: none; align-items: center; justify-content: center; gap: 10px; background: #08090a; }
.readout.is-links .readout-links { display: flex; }
.rl { display: inline-flex; align-items: center; gap: 4px; font-family: var(--pix); font-size: 4px; letter-spacing: .08em; color: var(--pwr-on); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.rl svg { width: 12px; height: 12px; stroke: var(--pwr-on); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rl.is-icon span { display: none; }
.rl:hover { color: #fff; } .rl:hover svg { stroke: #fff; }
@media (max-width: 1100px) { .rl span { display: none; } .readout-links { gap: 14px; } }   /* narrow consoles: icons only */

/* ---------- the screens themselves ---------- */
.cs-screen { padding: 96px 56px calc(var(--deck-h) + 40px); width: min(1600px, 100%); margin: 0 auto; animation: screen-in .32s var(--ease-out); transform: scale(var(--fit, 1)); transform-origin: top center; }
body.is-desk .cs-screen { padding-bottom: 0; }   /* .crt-content already reserves the console and the cart mouth */
body.is-desk.is-playing .crt-content { overflow: hidden; }   /* slides, not pages: the screen fits or it scales (mobile keeps its scroll) */
@keyframes screen-in { from { opacity: 0; transform: translateY(10px) scale(var(--fit, 1)); } to { opacity: 1; transform: scale(var(--fit, 1)); } }
.cs-cols { display: grid; grid-template-columns: minmax(0, 660fr) minmax(0, 720fr); gap: 112px; align-items: stretch; min-height: calc(100vh - 96px - var(--deck-h) - var(--cart-out) - 72px); }   /* the glass minus the top padding, the console, the cart mouth, 40 breathing + 28 bezel */
.cs-cols > div { display: flex; flex-direction: column; min-width: 0; }
.cs-cols > div > :last-child { margin-bottom: 0; }
.cs-k { font-family: var(--pix); font-size: 7px; letter-spacing: .1em; color: var(--accent); margin: 0 0 16px; }
.cs-k.is-mute { color: #8e8c85; }
.cs-k.is-warn { color: var(--gold); }
.cs-name { font-family: var(--pix); font-size: 22px; line-height: 1.2; color: #fff; margin: 0 0 16px; }
.cs-genre { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 0 0 8px; }
.cs-lede { font-size: 16px; line-height: 1.45; color: var(--ink); margin: 0 0 24px; }
.cs-head { font-family: var(--pix); font-size: 15px; line-height: 1.5; letter-spacing: .04em; color: #fff; margin: 0 0 16px; }
.cs-body { font-size: 16px; line-height: 1.45; color: var(--ink); margin: 0 0 24px; }
.cs-sub-h { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.cs-sub-p { font-size: 14px; line-height: 1.4; color: #cfcdc5; margin: 0 0 24px; }

/* overview: the three headline numbers, each on its accent tick */
.cs-nums { display: grid; gap: 16px; margin: 0 0 32px; }
.cs-num { display: flex; align-items: baseline; gap: 16px; border-left: 3px solid var(--accent); padding-left: 16px; }
.cs-num b { font-family: var(--mono); font-weight: 500; font-size: 19px; color: #fff; }
.cs-num span { font-size: 15px; color: #a8a69e; }

/* ▸ lists, and the I OWNED / WE SHARED pair */
.cs-arrows { list-style: none; margin: 0; padding: 0; }
.cs-arrows li { position: relative; padding-left: 16px; font-size: 14px; line-height: 22px; color: var(--ink); }
.cs-arrows li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }
.cs-arrows.is-mute li { color: #a8a69e; }
.cs-arrows.is-mute li::before { color: #8e8c85; }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { position: relative; padding: 0 0 8px 24px; font-size: 14px; line-height: 1.35; color: #cfcdc5; }
.cs-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* figures: a bordered plate, the FIG line, and an optional note */
.cs-plate { margin: 0; }
.cs-plate img { display: block; width: 100%; height: auto; border: 1px solid #2b2f38; background: #0b0e12; }
/* desktop: a landscape plate runs through the right gutter and 80px past the glass edge (Denis, 2026-09-24: fill more height, bleed a bit).
   The whole image stays visible; the bleed is clipped by the glass. */
body.is-desk .cs-cols > div:last-child > .cs-plate:not(.is-tall) img { width: calc(100% + var(--gut) + 80px); max-width: none; height: auto; }
.cs-plate.is-tall img { width: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; }
.cs-plate figcaption { font-family: var(--pix); font-size: 7px; letter-spacing: .06em; color: #8e8c85; margin-top: 16px; }
.cs-plate .cs-note-p { font-size: 14px; line-height: 1.4; color: #6f6d66; margin: 8px 0 0; }

/* approach cards, impact metric cards */
.cs-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.cs-tile { position: relative; padding: 16px 16px; background: #0b0e12; border: 1px solid #1c1f25; border-top: 3px solid var(--accent); }
.cs-tile.is-warn { border-top-color: var(--gold); }
.cs-tile.is-muted { border-top-color: #8e8c85; }
.cs-tile .tag { display: block; font-family: var(--pix); font-size: 5px; letter-spacing: .08em; color: var(--accent); margin-bottom: 4px; }
.cs-tile.is-warn .tag { color: var(--gold); }
.cs-tile.is-muted .tag { color: #8e8c85; }
.cs-tile .cat { display: block; font-family: var(--pix); font-size: 5px; letter-spacing: .08em; color: #6f6d66; margin-bottom: 16px; }
.cs-tile .n { display: block; font-family: var(--mono); font-weight: 500; font-size: 22px; color: #fff; margin-bottom: 16px; }
/* the impact screen's tiles are the point of the study: one per row, the number at 40 */
.cs-tiles.is-impact { grid-template-columns: 1fr; gap: 8px; }
.cs-tiles.is-impact .cs-tile { display: grid; grid-template-columns: 200px 1fr; align-items: baseline; column-gap: 24px; padding: 16px 24px; }
.cs-tiles.is-impact .cs-tile .tag, .cs-tiles.is-impact .cs-tile .cat { grid-column: 2; margin: 0; }
.cs-tiles.is-impact .cs-tile .tag { display: inline; margin-right: 8px; }
.cs-tiles.is-impact .cs-tile .cat { display: inline; margin-bottom: 8px; }
.cs-tiles.is-impact .cs-tile .n { grid-column: 1; grid-row: 1 / span 2; font-size: 40px; line-height: 1; margin: 0; }
.cs-tiles.is-impact .cs-tile .d { grid-column: 2; font-size: 15px; }
.cs-tile .t { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.cs-tile .d { display: block; font-size: 13px; line-height: 1.35; color: #cfcdc5; }

/* HI-SCORE: label, dotted leader, value */
.cs-score-h { font-family: var(--pix); font-size: 7px; letter-spacing: .1em; color: var(--accent); margin: 32px 0 16px; }
.cs-score-g { margin: 0 0 16px; }
.cs-score-g > .cs-k { margin-bottom: 8px; }
.cs-score-row { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; padding: 8px 0; }
.cs-score-row dt { color: #a8a69e; }
.cs-score-row i { flex: 1 1 auto; height: 1px; background: #2b2f38; }
.cs-score-row dd { margin: 0; color: #fff; text-align: right; }
.cs-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 16px; border-top: 1px solid #1c1f25; font-family: var(--pix); font-size: 7px; letter-spacing: .06em; }
.cs-next button { font: inherit; letter-spacing: inherit; color: #a8a69e; background: none; border: 1px solid #1c1f25; padding: 16px 16px; cursor: pointer; transition: color .2s, border-color .2s; }
.cs-next button:hover { color: #fff; border-color: var(--accent); }
.cs-next span { color: var(--accent); }

/* reflection: numbered lessons */
.cs-lessons { display: grid; gap: 32px; }
.cs-lesson { display: grid; grid-template-columns: 26px 1fr; gap: 16px; }
.cs-lesson .no { font-family: var(--pix); font-size: 7px; color: var(--accent); padding-top: 4px; }
.cs-lesson .t { font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 8px; }
.cs-lesson .d { font-size: 14px; line-height: 1.4; color: #a8a69e; margin: 0; }

/* the screens gallery: a grid of plates, click for full-screen */
.cs-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.is-desk .cs-gallery .cs-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }   /* the gallery has the full slide to itself */
.cs-shot { position: relative; display: block; aspect-ratio: 228 / 176; padding: 0; background: #0b0e12; border: 1px solid #1c1f25; cursor: pointer; overflow: hidden; transition: border-color .2s; }
.cs-shot:hover, .cs-shot:focus-visible { border-color: var(--accent); }
.cs-shot img { position: absolute; inset: 10px; margin: auto; max-width: calc(100% - 20px); max-height: calc(100% - 20px); width: auto; height: auto; }
.cs-shot .no { position: absolute; left: 10px; top: 10px; z-index: 1; font-family: var(--pix); font-size: 5px; color: #6f6d66; }
.cs-shot:first-child .no, .cs-shot:hover .no { color: var(--accent); }
.cs-shot .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 8px 8px; font-size: 11px; color: var(--ink); background: linear-gradient(180deg, transparent, rgba(0,0,0,.92)); opacity: 0; transition: opacity .2s; }
.cs-shot:hover .cap, .cs-shot:focus-visible .cap { opacity: 1; }
.cs-shots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cs-shots-head .cs-k { margin-bottom: 16px; }
.cs-shots-hint { font-size: 14px; color: #6f6d66; margin: 24px 0 0; }

/* full-screen viewer for a gallery shot */
.lightbox { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 64px 88px 64px; background: rgba(3,4,6,.94); }
/* the console and the cart in its mouth step out while a screen is up (they were covering the caption); CLOSE is the way out, so it is gold */
body.is-shot .deck, body.is-shot .deck-cart, body.is-shot .navkey { opacity: 0; pointer-events: none; transition: opacity .25s; }
.lightbox[hidden] { display: none; }
.lightbox img { min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox figcaption { font-family: var(--pix); font-size: 8px; color: #a8a69e; }
.lightbox-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.lightbox-nav button { font-family: var(--pix); font-size: 14px; color: var(--ink); background: rgba(11,14,18,.9); border: 1px solid #2b2f38; width: 48px; height: 48px; cursor: pointer; }
.lightbox-close { position: absolute; right: 24px; top: 24px; font-family: var(--pix); font-size: 8px; color: #111; background: var(--gold); border: 1px solid var(--gold); padding: 8px 16px; cursor: pointer; }
.lightbox-close:hover { background: #fff; border-color: #fff; }

/* the glass hint strip and the folded handheld are mobile-only */
.hintbar, .pad-bar { display: none; }

/* ---------- the five screens on the handheld ---------- */
@media (max-width: 820px), ((max-height: 520px) and (pointer: coarse) and (min-width: 600px)) {
  body.is-screens .osd-pad { display: none; }
  .navkey { display: none !important; }

  .rail { left: 16px; right: 16px; top: 16px; gap: 8px; }
  .seg { padding: 16px 0 0; font-size: 5px; letter-spacing: .12em; }
  /* impact tiles on the phone: the number on top, the line under it */
  .cs-tiles.is-impact .cs-tile { grid-template-columns: 1fr; padding: 16px; }
  .cs-tiles.is-impact .cs-tile .n { grid-column: 1; grid-row: auto; font-size: 28px; margin-bottom: 8px; }
  .cs-tiles.is-impact .cs-tile .tag, .cs-tiles.is-impact .cs-tile .cat, .cs-tiles.is-impact .cs-tile .d { grid-column: 1; }
  .cs-tiles.is-impact .cs-tile .d { font-size: 13px; }
  .seg::before { left: 0; right: 0; top: 0; }
  .seg .seg-hint { display: none; }
  .seg:hover { border-color: transparent; }

  .cs-screen { padding: 56px 16px 24px; }   /* the rail's two-line labels end at ~48 on the phone */
  .cs-cols { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .cs-next { margin-top: 24px; }
  .cs-name { font-size: 14px; margin-bottom: 8px; }
  .cs-genre { font-size: 9px; }
  .cs-lede, .cs-body { font-size: 11.5px; line-height: 1.35; margin-bottom: 16px; }
  .cs-head { font-size: 9px; line-height: 1.5; letter-spacing: .12em; }
  .cs-k { font-size: 5px; letter-spacing: .12em; margin-bottom: 8px; }
  .cs-num b { font-size: 13px; }
  .cs-num span { font-size: 10.5px; }
  .cs-sub-h { font-size: 11px; }
  .cs-sub-p { font-size: 10.5px; margin-bottom: 16px; }
  .cs-arrows li, .cs-list li { font-size: 10px; line-height: 13px; }
  .cs-arrows li { padding-left: 16px; }
  .cs-list li { padding: 0 0 8px 16px; }
  .cs-tiles { gap: 8px; margin-bottom: 24px; }
  .cs-tile { padding: 16px 8px; }
  .cs-tile .n { font-size: 12px; margin-bottom: 8px; }
  .cs-tile .t { font-size: 10px; }
  .cs-tile .d { font-size: 9px; }
  .cs-plate.is-tall img { max-height: 46vh; }
  .cs-plate figcaption { font-size: 5px; }
  .cs-score-row { font-size: 5px; padding: 4px 0; }
  .cs-lessons { gap: 16px; }
  .cs-lesson { grid-template-columns: 16px 1fr; gap: 8px; }
  .cs-lesson .t { font-size: 11px; }
  .cs-lesson .d { font-size: 9.5px; }
  .cs-shots { gap: 8px; }
  .cs-shots-hint { font-size: 10px; }
  .cs-next { font-size: 5px; }

  /* the strip along the bottom edge of the glass: where you are, and the pad toggle */
  body.is-screens .hintbar { display: flex; }
  .hintbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; align-items: center; gap: 8px; height: 26px; padding: 0 16px; background: #000; }
  .hintbar-name { font-size: 9px; letter-spacing: .12em; color: var(--ink); }
  .hintbar-dots { display: flex; gap: 8px; margin-left: 16px; }
  .hintbar-dots i { width: 5px; height: 5px; border-radius: 50%; background: #2b2f38; }
  .hintbar-dots i.is-on { background: var(--accent); }
  .hintbar-pos { margin-left: auto; font-size: 9px; letter-spacing: .12em; color: var(--ink); }
  .pad-toggle { font-family: var(--sans); font-weight: 500; font-size: 8px; color: var(--ink); background: #14171c; border: 1px solid #2b2f38; border-radius: 11px; height: 22px; padding: 0 14px; cursor: pointer; white-space: nowrap; }
  .pad-toggle:hover { border-color: #3a4050; }

  /* HIDE PAD: the controller folds into a 56px rail and the study takes the rest of the phone */
  body.is-padoff .tv { bottom: 56px; }
  body.is-padoff .pad { display: none; }
  body.is-padoff .pad-bar { display: flex; }
  .pad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 30; align-items: center; gap: 10px; padding: 0 14px; background: #0a0c0f; border-top: 1px solid #1c1f25; }
  .pad-bar-brand { position: absolute; left: 14px; top: 9px; display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 700; font-size: 7px; letter-spacing: .06em; color: #6f6d66; }
  .pad-bar-led { width: 5px; height: 5px; border-radius: 50%; background: var(--pwr-on); box-shadow: 0 0 5px rgba(143,227,160,.8); }
  .pad-bar-hints { position: absolute; left: 14px; top: 31px; font-family: var(--sans); font-weight: 500; font-size: 8px; letter-spacing: .04em; color: #a8a69e; }
  .pad-bar-hints em { font-style: normal; }
  .pad-bar-key { margin-left: auto; font-family: var(--sans); font-weight: 500; font-size: 7px; color: var(--ink); background: #14171c; border: 1px solid #2b2f38; border-radius: 4px; height: 24px; min-width: 60px; padding: 0 8px; cursor: pointer; }
  .pad-bar-key + .pad-bar-key { margin-left: 10px; }
  .pad-bar-key em { font-style: normal; }
  .pad-bar-key:disabled { color: #4a4a48; }
  .lightbox { padding: 24px 24px 72px; }
  .lightbox-nav button { width: 38px; height: 38px; font-size: 11px; }
}

/* ==================================================================
   THE DESKTOP SHELF  (Figma section 8 · Shelf S1 / S2 / S3)
   The shop dressing comes off: the screen is flat black, the wooden ledge and a focus glow stay, and the
   shelf gets the same chrome as a study — PLAYER 1 top-left, ARRANGE top-right, the dossier as three flat
   columns under a hairline, the insert ghost above the console, and PREV / NEXT as keys either side of it.
   Scoped to body.is-desk so the handheld keeps its own shelf.
   ================================================================== */
/* the shop wall (blurred cartridges), haze, tube and neon are gone on every device: the shelf sits on the same dark as the study screens (Denis, 2026-09-24) */
.shop-wall, .shop-haze, .shop-tube, .shop-neon { display: none; }
.idle { background: var(--bg-0); }

/* the pool of accent light the active cartridge stands in */
.shelf-glow { display: none; position: absolute; left: 50%; top: calc(var(--shelf-y, 58%) - 38px); width: 420px; height: 60px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%); filter: blur(6px); pointer-events: none; transition: background .4s; }
body.is-desk.is-idle .shelf-glow { display: block; }



/* ARRANGE moves to the glass, top right */
body.is-desk.is-idle .arrange { position: absolute; right: 0; top: -22px; z-index: 6; gap: 8px; }
body.is-desk.is-idle .arrange-k { font-size: 6px; letter-spacing: .1em; color: #6f6d66; margin-right: 8px; }
body.is-desk.is-idle .chip { height: 30px; padding: 0 14px; background: #0b0e12; border-color: #2b2f38; color: var(--ink-dim); letter-spacing: .1em; }
body.is-desk.is-idle .chip:hover { color: #fff; border-color: #3a4050; transform: none; }
body.is-desk.is-idle .chip.is-on { background: #14120a; border-color: var(--gold); color: #fff; }

/* the shelf block: peek line, gold rail, SHELF nn / nn, title, blurb */
body.is-desk.is-idle .shelf-head { width: 100%; margin: 0; }
body.is-desk.is-idle .shelf-peek { font-size: 6px; letter-spacing: .1em; color: #6f6d66; opacity: 1; }
body.is-desk.is-idle .shelf-peek:hover { color: var(--ink); }
body.is-desk.is-idle .shelf-title { padding-left: 16px; border-left: 2px solid var(--gold); }
body.is-desk.is-idle .shelf-no { font-size: 6px; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
body.is-desk.is-idle .shelf-title h2 { font-size: 20px; letter-spacing: .04em; color: #fff; text-shadow: none; margin-bottom: 8px; }
body.is-desk.is-idle .shelf-title p { font-size: 13px; color: var(--ink-dim); }
body.is-desk.is-idle .shelf-peek-down { bottom: calc(var(--deck-h) + var(--cart-out) + 78px); font-size: 6px; }
body.is-desk.is-idle .arrow { display: none; }              /* PREV / NEXT do the browsing now */
body.is-desk .carousel { transform: translateX(var(--pv-shift, 0px)) scale(var(--cs, 1)); }  /* the row is flat: no ring tilt */
body.is-desk .stage.has-preview { --pv-shift: calc(((var(--h, 340px) * var(--cs, 1) * 1.7574) + 16px) / -2); }  /* half the still + gap, to the left */

/* the dossier: three flat columns under a hairline, no panel */
body.is-desk .dossier { /* Figma 162-22666: a 1000-wide panel, 40/24 padding, three equal columns, 16 gap */
  width: min(1000px, 100%); margin: 0 auto; padding: 24px 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px;
  background: rgba(255,255,255,.03); border-top: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45); }
body.is-desk .d-col-id, body.is-desk .d-col-preview, body.is-desk .d-col-score { width: 100%; }
body.is-desk .dossier::before { display: none; }
body.is-desk .d-head { font-size: 6px; letter-spacing: .1em; color: var(--accent); }
body.is-desk .d-head .rank { color: var(--ink-dim); }
body.is-desk .d-title { font-size: 16px; letter-spacing: .02em; text-shadow: none; margin-bottom: 8px; }
body.is-desk .d-role-line { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
body.is-desk .d-date { font-size: 12px; font-family: var(--sans); color: var(--ink-dim); margin-top: 8px; }
body.is-desk .d-col-preview .d-block:not(:first-child) { display: none; }  /* the Figma keeps the overview only */
body.is-desk .d-col-preview .d-block p { font-size: 15px; line-height: 1.4; color: var(--ink); }
.d-cta { display: none; }   /* the CTA floats above the slot on the desktop (.insert-ghost); the handheld's hint strip already says A PLAY (Denis, 2026-09-24) */
body.is-desk .d-cta.is-soon { color: var(--ink-dim); }
body.is-desk .d-cta.is-live { color: var(--gold); }
/* the shelf's HI-SCORE is the study's three headline numbers, not the six-row table */
.d-stat { display: flex; align-items: baseline; gap: 16px; border-left: 2px solid var(--accent); padding-left: 8px; margin-top: 8px; }
.d-stat b { font-family: var(--mono); font-weight: 500; font-size: 15px; color: #fff; }
.d-stat span { font-size: 12px; color: var(--ink-dim); }
.d-record { list-style: none; margin: 8px 0 0; padding: 0; }
.d-record li { position: relative; padding: 0 0 8px 16px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.d-record li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }

/* the insert ghost: a dashed slot hint that sits over the console's mouth */
/* the insert hint floats above the slot: what you would read, the CTA in gold, arrows pointing at the mouth.
   It goes white while a dragged cartridge is over the slot. Locked titles get the COMING SOON line and no arrows. */
.insert-ghost { display: none; position: absolute; left: 50%; bottom: calc(var(--deck-h) * var(--deck-k, 1) + (var(--cart-out) * var(--deck-k, 1) + 64px) / 2); z-index: 6; width: 400px; transform: translate(-50%, 50%);   /* centred in the band between the dossier and the console lid */ font-family: var(--pix); font-size: 6px; line-height: 1.9; letter-spacing: .1em; text-align: center; color: var(--gold); pointer-events: none; transition: color .3s; }
body.is-desk.is-idle .insert-ghost { display: block; }
.insert-ghost .ig-sub { display: block; color: var(--ink-dim); }
.insert-ghost .ig-arrows { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .5em; animation: nudge-down 1.4s ease-in-out infinite; }
@keyframes nudge-down { 50% { transform: translateY(3px); } }
.insert-ghost.is-soon { color: var(--ink-mute); }
.insert-ghost.is-soon .ig-arrows { display: none; }
.insert-ghost.is-hot { color: #fff; }
.insert-ghost.is-hot .ig-arrows { animation: none; transform: translateY(3px); }

/* the chin keyboard line and the SCREEN readout serve the shelf too */
body.is-desk.is-idle .bezel-keys { display: block; }
body.is-desk.is-idle .navkey { display: flex; }

body.is-desk .osd-bl { display: none; }  /* the chin carries the keyboard line now */

/* the desktop shelf's column: everything hangs off one gutter, as the Figma does at x=98 of 1684 */
body.is-desk { --gut: clamp(32px, 5.7vw, 98px); }
body.is-desk.is-idle .select { /* the identity block is absolute at top 40, so the grid has to start below it;
   the bottom only reserves the console and the cartridge that sticks out of its slot */
  padding: 40px var(--gut) calc((var(--deck-h) + var(--cart-out)) * var(--deck-k, 1) + 64px); }   /* + the band the insert hint floats in */
body.is-desk.is-idle .shop-shelf { left: var(--gut); right: var(--gut); }
body.is-desk.is-idle .shelf-peek-down { bottom: calc(var(--deck-h) + var(--cart-out) + 60px); }
body.is-desk .dossier { grid-template-columns: 442fr 520fr 526fr; gap: 0 32px; }
body.is-desk.is-idle .select { grid-template-rows: auto minmax(0, 1fr) var(--dossier-room, auto); }   /* the tallest dossier's height, reserved: carts never rescale while browsing */
body.is-desk .dossier { align-self: start; max-height: var(--dossier-room, none); }
.d-col.is-more { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
/* DenDenDesign's clients: the full lines live in ON THE RECORD; where that column is hidden (1100px and under, the handheld) the names and dates sit under the overview */
.d-clients { display: none; margin: 8px 0 0; }
@media (max-width: 1100px) { .d-clients { display: block; } }
body.is-desk .d-col-score { max-height: calc(var(--dossier-room, 100vh) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b2f38 transparent; }   /* only an over-long record scrolls; 48 = the panel's padding */


body.is-desk .navkey-back { left: var(--gut); }
body.is-desk .navkey-next { right: var(--gut); }
body.is-desk .rail { left: var(--gut); right: var(--gut); }
body.is-desk .cs-screen { padding-left: var(--gut); padding-right: var(--gut); }

/* on the desktop shelf the row is flat and lit by distance, as the Figma draws it: 45% then 22% */
body.is-desk.is-idle .cart.is-side { filter: none; opacity: .45; }
body.is-desk.is-idle .cart.is-far { opacity: .22; pointer-events: auto; }
body.is-desk.is-idle .cart.is-gone { opacity: 0; pointer-events: none; }   /* the row shows one back and two forward */


}

/* ---------- handheld: the framed panel stacks, hairlines between the columns ---------- */
@media (max-width: 820px), ((max-height: 520px) and (pointer: coarse) and (min-width: 600px)) {
  .dossier { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 24px; }
  .dossier > * + * { margin-top: 24px; padding-top: 24px; border-top: 2px solid color-mix(in srgb, var(--accent) 13%, transparent); }
  .cs-preview { display: none; }   /* no room beside a 390px carousel; the cartridge label carries the art */
}

/* ---------- the console is one piece of hardware: it scales, it does not reflow ---------- */
@media (min-width: 821px) and (max-width: 1440px) { :root { --deck-k: .92; } }
@media (min-width: 821px) and (max-width: 1240px) { :root { --deck-k: .84; } }
@media (min-width: 821px) and (max-width: 1080px) { :root { --deck-k: .76; } }
@media (min-width: 821px) and (max-width: 940px)  { :root { --deck-k: .68; } }

/* The floating insert prompt collides with the framed dossier at every desktop width now that
   the panel has real padding. (Denis, 2026-09-24: the CTA moved out of the dossier and into the hint,
   which is back above the slot as floating text with arrows; see .insert-ghost.) */

/* SFX is parked for now: no switch on either shell, and audio.js starts silent. */
.deck-audio { display: none !important; }