/* Squelch: a pirate-radio control desk at night.
   Ground: deep indigo night. Phosphor green = the signal chain. Hot magenta = fees, the pot, the winner, on-air.
   Gaffer tape + marker = the DJ's asides. Greenbar teletype paper = the log sheets. */
@font-face { font-family: "Science Gothic"; src: url(/fonts/ScienceGothic-var.woff2) format("woff2"); font-weight: 300 900; font-stretch: 50% 200%; font-display: swap; }
@font-face { font-family: "Geologica"; src: url(/fonts/Geologica-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/CourierPrime-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sedgwick Ave"; src: url(/fonts/SedgwickAve.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #0B0A1C; --bg2: #0F0D27; --panel: #16133D; --panel2: #1C1949; --face: #120F31;
  --line: #2F2A66; --line2: #47418C; --metal: #8F89C9;
  --ink: #EEEBFF; --dim: #B3ADDD; --faint: #9590C6; --art: #BDB7EC;
  --phos: #6CFFB0; --phos-d: #0F6B45; --mag: #FF5CAA; --mag-d: #A8125F;
  --tape: #ECE6D3; --tink: #1A1730;
  --paper: #EEF0E4; --pband: #E2EAD8; --pink: #19162F; --pdim: #4A4767;
  --fd: "Science Gothic", "Arial Black", sans-serif;
  --ft: "Geologica", system-ui, sans-serif;
  --fm: "Courier Prime", "Courier New", monospace;
  --fh: "Sedgwick Ave", "Comic Sans MS", cursive;
  --barh: 58px; --railw: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1100px) { :root { --railw: 116px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barh) + 16px); }
body {
  margin: 0; color: var(--ink); font: 400 16px/1.55 var(--ft); overflow-x: clip;
  background:
    radial-gradient(1100px 700px at 18% -8%, #251E60 0%, rgba(37, 30, 96, 0) 62%),
    radial-gradient(900px 700px at 100% 38%, #0D1E42 0%, rgba(13, 30, 66, 0) 60%),
    radial-gradient(800px 600px at 0% 100%, #1A1243 0%, rgba(26, 18, 67, 0) 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body::before { /* film grain, very low */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--phos); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--mag); color: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--phos); color: var(--bg); padding: 10px 14px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }

/* ---------- type ---------- */
.sw { font-stretch: 185%; }
.sn { font-stretch: 58%; color: var(--phos); }
.h2 { font: 800 clamp(32px, 4.1vw, 58px)/.94 var(--fd); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.eyebrow { font: 400 13px/1.3 var(--fm); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--phos); color: var(--phos); border-radius: 3px; font-weight: 700; letter-spacing: 0; }
.lede { font-size: 17.5px; line-height: 1.55; color: var(--dim); max-width: 60ch; margin-top: 18px; text-wrap: pretty; }
.tape {
  display: inline-block; font: 400 21px/1.15 var(--fh); color: var(--tink); background: var(--tape);
  padding: 4px 14px 3px; transform: rotate(-2deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  clip-path: polygon(0 8%, 2% 0, 98% 0, 100% 10%, 98.6% 50%, 100% 92%, 98% 100%, 2% 100%, 0 90%, 1.4% 50%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; border: 0; white-space: nowrap;
  font: 700 13.5px/1 var(--fd); font-stretch: 140%; text-transform: uppercase; letter-spacing: .07em;
  padding: 14px 20px; border-radius: 7px; transition: transform .12s var(--ease), box-shadow .12s, background .2s;
}
.btn-sm { padding: 10px 14px; font-size: 12px; background: var(--phos); color: var(--bg); box-shadow: 0 2px 0 #1F7A50; }
.btn-sm:hover { background: #9BFFCB; }
.btn-push {
  color: var(--ink); background: linear-gradient(180deg, #2E2970, #1C1950); border: 1px solid #554EA6;
  box-shadow: 0 4px 0 #07061A, 0 10px 22px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-push:hover { background: linear-gradient(180deg, #37318A, #221E5E); }
.btn-push:active, .btn-sm:active { transform: translateY(3px); box-shadow: 0 1px 0 #07061A; }
.push-led { width: 10px; height: 10px; border-radius: 50%; background: var(--phos); box-shadow: 0 0 10px var(--phos), 0 0 2px #fff inset; }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
.btn-line:hover { border-color: var(--phos); color: var(--phos); }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--phos); text-decoration-thickness: 1px; text-underline-offset: 5px; font-size: 15px; }
.link:hover { color: var(--phos); }

/* ---------- top bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--barh); background: rgba(9, 8, 24, .97); border-bottom: 1px solid var(--line); }
.bar-in { height: 100%; display: flex; align-items: center; gap: 28px; padding: 0 22px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 17px/1 var(--fd); font-stretch: 175%; text-transform: uppercase; letter-spacing: .04em; }
.bar-nav { display: flex; gap: 22px; margin-left: 10px; }
.bar-nav a { font-size: 14.5px; color: var(--dim); text-decoration: none; padding: 6px 0; }
.bar-nav a:hover { color: var(--ink); }
.bar-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--phos); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.onair { display: inline-flex; align-items: center; gap: 7px; font: 700 10.5px/1 var(--fd); font-stretch: 170%; letter-spacing: .14em; text-transform: uppercase; color: var(--mag); border: 1px solid rgba(255, 92, 170, .55); padding: 6px 9px; border-radius: 3px; text-shadow: 0 0 10px rgba(255, 92, 170, .6); }
.onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 8px var(--mag); }
.chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/1 var(--fm); color: var(--ink); background: var(--panel); border: 1px solid var(--line2); padding: 7px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; }
.chip svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-btn { display: none; width: 42px; height: 38px; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); cursor: pointer; position: relative; }
.menu-btn i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .2s; }
.menu-btn i:first-of-type { top: 14px; } .menu-btn i:last-of-type { top: 21px; }
.menu-btn[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.sheet-menu { position: absolute; top: var(--barh); left: 0; right: 0; background: #0D0B24; border-bottom: 1px solid var(--line); padding: 8px 22px 18px; display: grid; }
.sheet-menu[hidden] { display: none; }
.sheet-menu a { padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 700 15px/1 var(--fd); font-stretch: 150%; text-transform: uppercase; letter-spacing: .05em; }
.tuner-mini { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(108, 255, 176, .12); }
.tuner-mini i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); background: var(--phos); box-shadow: 0 0 8px var(--phos); }

/* ---------- the dial (rail) ---------- */
.rail { display: none; }
@media (min-width: 1100px) {
  .rail {
    display: flex; flex-direction: column; position: fixed; z-index: 40; left: 0; top: var(--barh); bottom: 0; width: var(--railw);
    background: linear-gradient(90deg, #0D0B25, #110E2E); border-right: 1px solid var(--line); padding: 16px 0 14px;
    box-shadow: inset -8px 0 18px -14px rgba(0, 0, 0, .9);
  }
  .rail-k { font: 700 10px/1 var(--fd); font-stretch: 180%; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); padding: 0 0 12px 18px; }
  .rail-scale { position: relative; flex: 1; margin: 0 0 0 0; }
  .rail-scale::before { content: ""; position: absolute; left: 16px; top: 6px; bottom: 6px; width: 7px; border-left: 1px solid var(--line2);
    background: repeating-linear-gradient(180deg, var(--line2) 0 1px, transparent 1px 9px); background-size: 7px 100%; background-repeat: no-repeat; }
  .rail-list { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 0 8px 0 0; }
  .rail-list a { display: grid; grid-template-columns: 30px 22px 1fr; align-items: center; text-decoration: none; font: 400 11.5px/1 var(--fm); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 4px 0; border-radius: 3px; }
  .rail-list a i { justify-self: end; margin-right: 8px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line2); background: #0B0A1C; transition: background .2s, box-shadow .2s; }
  .rail-list a b { color: var(--dim); font-weight: 700; }
  .rail-list a:hover { color: var(--ink); }
  .rail-list a.on { color: var(--ink); }
  .rail-list a.on i { background: var(--phos); border-color: var(--phos); box-shadow: 0 0 9px var(--phos); }
  .rail-list a.on b { color: var(--phos); }
  .rail-gap { margin-top: 10px; }
  .needle { position: absolute; left: 4px; right: 4px; top: 0; height: 18px; margin-top: -9px; transform: translateY(var(--ny, 0px)); cursor: ns-resize; touch-action: none; z-index: 2; }
  .needle::before { content: ""; position: absolute; left: 0; right: 10px; top: 8px; height: 2px; background: var(--mag); box-shadow: 0 0 8px var(--mag); }
  .needle i { position: absolute; right: 0; top: 2px; width: 12px; height: 14px; border-radius: 3px; background: linear-gradient(#ff8cc4, #d93a86); box-shadow: 0 0 10px rgba(255, 92, 170, .7); }
  .rail-hint { font: 400 15px/1 var(--fh); color: var(--faint); padding: 12px 0 0 14px; transform: rotate(-3deg); }
}

/* ---------- the scene (hero + how it works) ---------- */
main { display: block; }
.scene { position: relative; }
.scene-pin { padding: calc(var(--barh) + 18px) 16px 0; }
@media (min-width: 1100px) { .scene-pin { padding-left: calc(var(--railw) + 28px); padding-right: 28px; } }
.cam { transform-origin: 0 0; }

/* the desk */
.desk {
  container: desk / inline-size; position: relative; max-width: 1360px; margin: 0 auto;
  background: linear-gradient(180deg, #1B1849 0%, #141139 38%, #100D2D 100%);
  border: 1px solid #3A357C; border-radius: 22px 22px 30px 30px; padding: 22px 30px 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -3px 0 rgba(0, 0, 0, .45), 0 50px 90px -50px #000;
  transition: opacity .4s;
}
.desk::before { /* four screws */
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  --s: radial-gradient(circle, #7A74BC 0 1.4px, #26225A 1.9px 4px, #3D3883 4.4px 5px, transparent 5.6px);
  background: var(--s) left top / 12px 12px no-repeat, var(--s) right top / 12px 12px no-repeat, var(--s) left bottom / 12px 12px no-repeat, var(--s) right bottom / 12px 12px no-repeat;
}
.bridge { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; padding: 2px 6px 22px; margin-bottom: 30px; border-bottom: 1px solid #312C6E; transition: opacity .5s; }
.bridge::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.bridge-k { font: 400 12.5px/1 var(--fm); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); display: flex; align-items: center; gap: 9px; }
.lamp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 10px var(--mag); }
.statement {
  margin: 14px 0 18px; font: 800 clamp(30px, 3.72vw, 60px)/.96 var(--fd); text-transform: uppercase; letter-spacing: -.004em; color: var(--ink);
}
.statement .sn { text-shadow: 0 0 22px rgba(108, 255, 176, .35); }
.statement-sm { font-size: clamp(22px, 2.4vw, 36px); }
.bridge-k, .statement { grid-column: 1 / -1; }
.readout { grid-column: 1; grid-row: 3; }
.statement { grid-row: 2; }
.bridge-act { grid-column: 2; grid-row: 3; align-self: end; margin-bottom: 2px; }
.readout { justify-self: start; }
.readout {
  font: 400 16px/1.55 var(--fm); color: var(--phos); max-width: 70ch; padding: 11px 16px 12px; border-radius: 6px;
  background: #090819 repeating-linear-gradient(180deg, rgba(108, 255, 176, 0) 0 2px, rgba(108, 255, 176, .04) 2px 3px);
  border: 1px solid #2A2665; box-shadow: inset 0 0 26px rgba(108, 255, 176, .07); text-shadow: 0 0 8px rgba(108, 255, 176, .25);
}
.readout::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--phos); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bridge-act { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; position: relative; z-index: 1; }

/* the surface: units + cables */
.surface { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 64px; row-gap: 54px; padding-bottom: 30px; }
.m5 { grid-column: 1 / span 2; } .m6 { grid-column: 3; } .m7 { grid-column: 4; }
.cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.mod { position: relative; transition: opacity .45s, filter .45s; cursor: pointer; }
.face {
  position: relative; height: 100%; padding: 12px 15px 15px;
  background: linear-gradient(180deg, #1B1849, #121034); border: 1px solid #3A357C; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 28px -16px rgba(0, 0, 0, .85);
  transition: border-color .3s, box-shadow .3s;
}
.m1 .face { border-radius: 4px 4px 16px 16px; }
.m2 .face { border-radius: 30px 30px 8px 8px; }
.m3 .face { background: linear-gradient(180deg, #211E52, #15123A); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #211E52, #15123A); }
.m4 .face { border-radius: 2px; }
.m4 .face::before, .m4 .face::after { content: ""; position: absolute; top: 18px; bottom: 18px; width: 9px; background: #262259; border: 1px solid #3A357C; }
.m4 .face::before { left: -10px; border-radius: 4px 0 0 4px; } .m4 .face::after { right: -10px; border-radius: 0 4px 4px 0; }
.m5 .face { border-radius: 44px 10px 44px 10px; background: linear-gradient(180deg, #171443, #0F0D2C); }
.m6 .face { border-radius: 10px 10px 4px 4px; border-top: 3px solid #4A448F; }
.m7 .face { border-radius: 10px; }
.mod.act .face, .mod:hover .face { border-color: rgba(108, 255, 176, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(108, 255, 176, .25), 0 0 34px -6px rgba(108, 255, 176, .35); }
.m5.act .face, .m7.act .face, .m5:hover .face, .m7:hover .face { border-color: rgba(255, 92, 170, .75); box-shadow: 0 0 0 1px rgba(255, 92, 170, .25), 0 0 34px -6px rgba(255, 92, 170, .4); }
.legend { display: flex; align-items: center; gap: 9px; font: 700 10.5px/1 var(--fd); font-stretch: 178%; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.legend b { font: 700 11px/1 var(--fm); letter-spacing: 0; color: var(--bg); background: var(--phos); padding: 3px 5px 2px; border-radius: 2px; }
.m5 .legend b, .m7 .legend b { background: var(--mag); }
.art { width: 100%; height: 118px; margin: 8px 0 4px; overflow: visible; }
.mt { font: 600 16.5px/1.25 var(--ft); color: var(--ink); margin-top: 6px; }
.ml { font-size: 13.5px; line-height: 1.42; color: var(--dim); margin-top: 3px; }
.ml i { font-style: normal; color: var(--faint); }
.jack { position: absolute; z-index: 4; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #04030E 0 3.2px, #9A94D2 3.7px 5px, #3A357C 5.5px); box-shadow: 0 0 0 2px #0E0C28; }
.j-in { left: -7px; top: 76px; } .j-out { right: -7px; top: 76px; }
.m2 .j-fee { bottom: -7px; left: calc(50% - 7px); }
.m5 .j-fee { top: -7px; left: calc(33% - 7px); }
.m5 .j-rst { bottom: -7px; left: calc(72% - 7px); }
.m7 .j-rst { bottom: -7px; left: calc(50% - 7px); }

/* art strokes */
.art .ln, .hw-art .ln { fill: none; stroke: var(--art); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.art .fill, .hw-art .fill { fill: #0E0C2A; }
.art .tiny, .hw-art .tiny { font: 400 7.6px/1 var(--fm); fill: var(--dim); letter-spacing: .06em; }
.art .mid, .hw-art .mid { text-anchor: middle; }
.art .hot, .hw-art .hot { fill: var(--mag); }
.art-1 .paper { fill: var(--tape); }
.art-1 .pp { font: 700 6.4px/1 var(--fm); fill: #58546F; letter-spacing: .05em; }
.art-1 .pl { fill: var(--tink); } .art-1 .pl.acc { fill: var(--mag-d); }
.art-1 .pchip { fill: none; stroke: var(--tink); stroke-width: 1.1; }
.art-1 .key-c { fill: #1E1A4E; stroke: #5D57A6; stroke-width: .8; }
.art-2 .waves path { fill: none; stroke: var(--phos); stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.art-2 .beacon { fill: var(--mag); filter: drop-shadow(0 0 4px var(--mag)); }
.art-2 .coin { fill: #0E0C2A; stroke: var(--phos); stroke-width: 1.6; }
.art-2 .coin-in { fill: none; stroke: var(--phos); stroke-width: .8; stroke-dasharray: 2 2.4; }
.art-2 .coin-t { font: 700 9.4px/1 var(--fm); fill: var(--phos); text-anchor: middle; }
.art-2 .lever { stroke: var(--art); stroke-width: 2.6; stroke-linecap: round; }
.art-2 .lever-k { fill: var(--phos); }
.art-3 .label, .hw-art .label { fill: var(--tape); }
.art-3 .lt, .hw-art .lt { font: 700 7px/1 var(--fm); fill: var(--tink); letter-spacing: .06em; }
.hw-art .lt.big { font-size: 10.5px; }
.art-3 .lr, .hw-art .lr { fill: #6C6884; }
.solder circle { fill: #C9CFDA; stroke: #fff; stroke-width: .6; }
.art-3 .key rect { fill: #C9CFDA; } .art-3 .key circle { fill: #0E0C2A; }
.art-3 .key { transform-box: view-box; transform-origin: 178px 56px; transform: rotate(45deg); transition: transform .5s cubic-bezier(.5, 1.8, .4, 1); }
.art-3 .led { fill: var(--phos); filter: drop-shadow(0 0 4px var(--phos)); transition: fill .2s; }
.art-4 .rail, .hw-art .rail { stroke: #4D478F; stroke-width: 3; }
.art-4 .holes circle { r: 2.2px; fill: #05040F; }
.art-4 .slot, .hw-art .slot { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.art .unit rect, .hw-art .unit rect { fill: #221E58; stroke: var(--phos); stroke-width: 1.1; }
.art .unit text, .hw-art .unit text { fill: var(--phos); }
.art .unit { transition: transform .6s var(--ease), opacity .4s; }
.art .uled { fill: var(--phos); }
.art .core-u rect, .hw-art .core-u rect { fill: #0A0920; stroke: var(--art); stroke-width: 1.2; }
.art .core-u text, .hw-art .core-u text { fill: var(--ink); }
.art-5 .ojack { fill: #05040F; stroke: var(--metal); stroke-width: 2; }
.art-5 .ofee { fill: none; stroke: var(--mag); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.art-5 .ofee-p, .cab-p { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; }
.art-5 .pack { fill: #2A1A45; stroke: #6B3B78; stroke-width: 1; }
.art-5 .pot-pack { fill: #4A1D4F; stroke: var(--mag); stroke-width: 1.4; r: 40px; transition: r 2.2s var(--ease); }
.art-5 .hub { fill: #C9CFDA; }
.art-5 .spokes { stroke: #05040F; stroke-width: 6; stroke-linecap: round; }
.art-5 .reel .spokes { transform-box: view-box; }
.art-5 .ra .spokes { transform-origin: 160px 62px; } .art-5 .rb .spokes { transform-origin: 340px 62px; }
.art-5 .tape { fill: none; stroke: #6B3B78; stroke-width: 2; }
.art-5 .win { fill: #07061A; stroke: var(--mag); stroke-width: 1.2; }
.art-5 .win-k { font: 700 8px/1 var(--fm); fill: var(--mag); text-anchor: middle; letter-spacing: .12em; }
.art-5 .win-v { font: 700 13px/1 var(--fm); fill: var(--ink); text-anchor: middle; }
.art-6 .seg { fill: #0E0C2A; stroke: #353071; stroke-width: .8; transition: fill .25s calc(var(--i) * 70ms); }
.art-6 .seg.on { fill: var(--phos); stroke: none; }
.art-6 .seg.on.pk { fill: var(--mag); }
.art-6 .lead .seg.on { filter: drop-shadow(0 0 2px rgba(108, 255, 176, .7)); }
.art-7 .lamp { fill: #3A1030; stroke: var(--mag); stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(255, 92, 170, .75)); transition: fill .3s, filter .3s; }
.art-7 .lamp-t { font: 800 19px/1 var(--fd); font-stretch: 190%; fill: #FFD3E8; text-anchor: middle; letter-spacing: .06em; transition: fill .3s; }
.art-7 .track { stroke: #05040F; stroke-width: 4; stroke-linecap: round; }
.art-7 .fk { fill: #C9CFDA; transition: transform .7s var(--ease); }
.art-7 .fk-win { fill: var(--mag); filter: drop-shadow(0 0 4px var(--mag)); }

/* cables (drawn by app.js) */
.cab-sh { fill: none; stroke: #04030E; stroke-width: 7.5; stroke-linecap: round; opacity: .9; }
.cab { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.cab-glow { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .12; }
.k-sig .cab, .k-sig .cab-glow { stroke: var(--phos); }
.k-fee .cab, .k-fee .cab-glow { stroke: var(--mag); }
.k-rst .cab { stroke: var(--faint); stroke-dasharray: 7 6; } .k-rst .cab-glow { stroke: none; }
.ctag rect { fill: var(--tape); }
.ctag text { font: 700 10.5px/1 var(--fm); fill: var(--tink); text-anchor: middle; letter-spacing: .02em; }
.cg.hot .cab-p, .art-5.hot .ofee-p { opacity: 1; animation: pulse 1.1s linear infinite; }
.cg.hot .cab-glow { opacity: .3; }
@keyframes pulse { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* desk tape notes */
.surface .tape { position: absolute; z-index: 5; margin: 0; }
.t-follow { left: calc(25% - 70px); top: -40px; transform: rotate(-3deg); }
.surface .t-pot { position: absolute; z-index: 5; margin: 0; font-size: 18px; left: 22px; bottom: -24px; transform: rotate(-2deg); max-width: 300px; grid-column: 1 / span 2; grid-row: 2; }

/* hero animation phases: the poster (no .anim) shows every state at once */
.anim:not(.p1) .art-1 [class*=" w"], .anim:not(.p1) .art-1 [class^="w"] { opacity: 0; }
.art-1 .w1, .art-1 .w2, .art-1 .w3, .art-1 .w4, .art-1 .w5, .art-1 .w6 { transition: opacity .25s; }
.art-1 .w2 { transition-delay: .3s; } .art-1 .w3 { transition-delay: .6s; } .art-1 .w4 { transition-delay: .9s; } .art-1 .w5 { transition-delay: 1.05s; } .art-1 .w6 { transition-delay: 1.2s; }
.anim:not(.p2) .art-2 .waves { opacity: .15; }
.anim.p2:not(.p3) .art-2 .waves path { animation: wave 1s ease-out infinite; }
@keyframes wave { from { opacity: 1; } to { opacity: .1; } }
.anim:not(.p2) .art-2 .lever { transform: rotate(-50deg); transform-box: view-box; transform-origin: 174px 68px; }
.art-2 .lever { transition: transform .3s; transform-box: view-box; transform-origin: 174px 68px; }
.anim:not(.p3) .art-3 .key { transform: rotate(-45deg); }
.anim:not(.p3) .art-3 .led { fill: #2A2660; filter: none; }
.anim:not(.p4) .art-4 .u1, .anim:not(.p4) .art-4 .u2 { transform: translateX(150px); opacity: 0; }
.art-4 .u2 { transition-delay: .7s; }
.anim:not(.p5) .art-5 .pot-pack, .anim.reset .art-5 .pot-pack { r: 12px; }
.anim.p5:not(.reset) .art-5 .rb .spokes, .anim.p5:not(.reset) .art-5 .ra .spokes { animation: spin 1.4s linear infinite; }
.anim.reset .art-5 .rb .spokes { animation: spin .5s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.anim:not(.p6) .art-6 .seg.on { fill: #0E0C2A; stroke: #353071; stroke-width: .8; filter: none; }
.anim:not(.p7) .art-7 .lamp { fill: #1A1438; filter: none; stroke: #5A3A6E; }
.anim:not(.p7) .art-7 .lamp-t { fill: #5A4D7E; }
.anim:not(.p7) .art-7 .fk-win { transform: translateY(32px); }

/* ---------- log sheets (how it works) ---------- */
.lsheet {
  position: relative; color: var(--pink); --rot: 0deg;
  background: repeating-linear-gradient(180deg, var(--paper) 0 30px, var(--pband) 30px 60px);
  padding: 28px 40px 26px 46px; border-radius: 2px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .25);
}
.lsheet::before { /* tractor-feed punch holes */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, #0B0A1C 0 4.4px, rgba(0, 0, 0, .14) 4.9px 5.4px, transparent 6px) 12px 14px / 14px 30px repeat-y,
              radial-gradient(circle, #0B0A1C 0 4.4px, rgba(0, 0, 0, .14) 4.9px 5.4px, transparent 6px) calc(100% - 12px) 14px / 14px 30px repeat-y;
}
.lsheet::after { content: ""; position: absolute; top: -13px; left: 46%; width: 104px; height: 26px; background: rgba(236, 230, 211, .9); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.plate {
  position: absolute; top: -34px; left: -30px; transform: rotate(-7deg); z-index: 2;
  font: 900 60px/1 var(--fd); font-stretch: 56%; color: var(--phos); padding: 8px 16px 6px;
  background: linear-gradient(170deg, #2C2770, #15123B); border: 1px solid #554EA6; border-radius: 6px;
  text-shadow: 0 0 16px rgba(108, 255, 176, .5); box-shadow: 0 12px 22px -8px rgba(0, 0, 0, .8);
}
.lk { font: 700 12.5px/1.2 var(--fm); text-transform: uppercase; letter-spacing: .1em; color: var(--pdim); padding-left: 52px; }
.lsheet h3 { font: 800 30px/1.02 var(--fd); font-stretch: 112%; letter-spacing: -.01em; margin: 14px 0 8px; }
.dj { font: 400 15.5px/1.45 var(--fm); color: var(--mag-d); margin-bottom: 16px; }
.dj::before { content: "DJ / "; font-weight: 700; }
.rules { display: grid; gap: 9px; }
.rules li { display: grid; grid-template-columns: 124px 1fr; gap: 14px; font-size: 15.5px; line-height: 1.45; }
.rules b { font: 700 11.5px/1.9 var(--fd); font-stretch: 104%; text-transform: uppercase; letter-spacing: .06em; color: var(--phos-d); }
.edge { margin-top: 18px; background: var(--pink); color: var(--ink); padding: 11px 15px 12px; border-radius: 4px; font-size: 15px; line-height: 1.45; }
.edge span { font: 400 20px/1 var(--fh); color: var(--phos); margin-right: 10px; }
.lsheet-end { background: var(--tape); }
.lsheet-end .lk { padding-left: 0; }
.lsheet-end p:not(.lk):not(.edge) { font-size: 16px; line-height: 1.5; }
.lsheet-art { display: none; }

/* stacked (no pin): sheets follow the desk */
.sheets { max-width: 1060px; margin: 80px auto 0; display: grid; gap: 74px; padding: 0 8px 40px; }
html:not(.pin) .lsheet { transform: rotate(calc(var(--rot) * .6)); }
html:not(.pin) .lsheet-art { display: block; float: right; width: 220px; margin: 0 0 12px 22px; padding: 10px; background: #15123B; border-radius: 8px; border: 1px solid #3A357C; }
html:not(.pin) .lsheet-art svg { height: auto; margin: 0; }

/* pinned (desktop, motion allowed) */
html.pin .scene { height: var(--sceneH, 800vh); }
html.pin .scene-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0; }
html.pin .cam { position: absolute; left: var(--railw); top: var(--barh); width: calc(100% - var(--railw)); padding: 18px 28px 0; will-change: transform; }
html.pin .sheets { position: absolute; inset: var(--barh) 0 0 var(--railw); margin: 0; max-width: none; display: block; padding: 0; pointer-events: none; }
html.pin .lsheet { position: absolute; top: 50%; width: min(470px, 35vw); opacity: 0; visibility: hidden; transform: translate(0, -44%) rotate(var(--rot)); transition: opacity .16s, transform .4s var(--ease), visibility 0s .16s; }
html.pin .lsheet[data-side="r"] { right: 48px; } html.pin .lsheet[data-side="l"] { left: 52px; }
html.pin .lsheet.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%) rotate(var(--rot)); transition: opacity .3s .16s, transform .5s .1s var(--ease), visibility 0s; }
html.pin .desk.focus .bridge { opacity: .22; }
html.pin .desk.focus .mod:not(.act) { opacity: .3; filter: saturate(.5); }
html.pin .desk.focus .tape { opacity: 0; transition: opacity .3s; }

/* ---------- rack sections ---------- */
.rack { position: relative; z-index: 2; padding: 0 16px; margin-top: 90px; }
@media (min-width: 1100px) { .rack { padding-left: calc(var(--railw) + 52px); padding-right: 52px; } }
.rack-in {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 60px 64px 64px;
  background: linear-gradient(180deg, #181546, #100E2D); border: 1px solid #36317A; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 70px -40px #000;
}
.rack-in::before, .rack-in::after { /* rack ears with mounting holes */
  content: ""; position: absolute; top: 22px; width: 30px; height: 120px; border: 1px solid #36317A;
  background: radial-gradient(circle, #05040F 0 4px, transparent 4.6px) center 26px / 100% 68px repeat-y, linear-gradient(180deg, #221F57, #17143F);
}
.rack-in::before { left: -31px; border-radius: 8px 0 0 8px; border-right: 0; }
.rack-in::after { right: -31px; border-radius: 0 8px 8px 0; border-left: 0; }
.rack-head { position: relative; z-index: 1; max-width: 760px; }
.ghost { position: absolute; z-index: 0; right: 28px; top: 18px; font: 900 132px/.8 var(--fd); font-stretch: 200%; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px #2C2768; white-space: nowrap; pointer-events: none; user-select: none; overflow: hidden; max-width: calc(100% - 56px); }

/* patch bay */
.bay { position: relative; z-index: 1; margin-top: 46px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 4px); }
.bay li { padding: 22px 20px 24px; border-left: 1px solid var(--line); }
.bay li:nth-child(4n + 1) { border-left: 0; }
.bay li:nth-child(n + 5) { border-top: 1px solid var(--line); }
.jk { display: block; width: 28px; height: 28px; border-radius: 50%; margin-bottom: 14px; background: radial-gradient(circle, #04030E 0 6px, #A9A3DD 6.6px 8.6px, #3A357C 9.2px 11px, #221E56 11.5px); box-shadow: 0 0 0 1px #47418C; position: relative; }
.bay li:nth-child(-n + 4) .jk::after { content: ""; position: absolute; left: 9px; top: -30px; width: 10px; height: 30px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #3BD58A, var(--phos), #3BD58A); box-shadow: 0 0 10px rgba(108, 255, 176, .5); }
.bay li:nth-child(n + 5) .jk::after { content: ""; position: absolute; left: 9px; top: -30px; width: 10px; height: 30px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #D93A86, var(--mag), #D93A86); box-shadow: 0 0 10px rgba(255, 92, 170, .5); }
.bk { display: block; font: 700 11.5px/1.3 var(--fd); font-stretch: 160%; text-transform: uppercase; letter-spacing: .09em; color: var(--phos); margin-bottom: 8px; }
.bay li:nth-child(n + 5) .bk { color: #FF8CC4; }
.bay p { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.dead { position: relative; z-index: 1; margin-top: 34px; display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.dead-k { color: var(--dim); font-size: 15.5px; line-height: 1.5; }
.dead-k .tape { display: block; width: max-content; margin: 0 0 12px -4px; }
.dead-list { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.dead-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink); }
.jk-dead { margin: 0; flex: none; }
.jk-dead::after { content: ""; position: absolute; left: -4px; right: -4px; top: 9px; height: 10px; background: var(--tape); transform: rotate(-12deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* open sections: parts lying straight on the desk, no rack box */
.open { position: relative; z-index: 3; padding: 0 16px; margin-top: 96px; }
@media (min-width: 1100px) { .open { padding-left: calc(var(--railw) + 52px); padding-right: 52px; } }
.open-in { max-width: 1240px; margin: 0 auto; position: relative; }

/* hardware: fixed vs changeable */
.hw { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 26px 30px; align-items: start; }
.hw-solder { grid-row: span 2; align-self: stretch; }
.hw-solder .hw-art { height: 220px; margin: 10px 0 6px; }
.hw-c { position: relative; padding: 24px 26px 28px; border: 1px solid #3A357C; }
.hw-c h3 { font: 800 21px/1.1 var(--fd); font-stretch: 130%; margin: 14px 0 12px; text-transform: uppercase; letter-spacing: .01em; }
.hw-c ul { display: grid; gap: 8px; }
.hw-c li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.hw-c li::before { position: absolute; left: 0; top: 0; font: 700 15px/1.45 var(--fm); }
.hw-art { width: 100%; height: 150px; }
.hw-solder { border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px), linear-gradient(170deg, #2A2765, #17143E); }
.hw-solder li::before { content: "●"; color: #C9CFDA; font-size: 11px; line-height: 2; }
.hw-solder .iron { fill: none; stroke: var(--art); stroke-width: 3; stroke-linecap: round; }
.hw-solder .smoke { fill: none; stroke: var(--faint); stroke-width: 1.2; opacity: .6; stroke-linecap: round; }
.t-solder { position: absolute; right: 18px; bottom: -18px; font-size: 18px; transform: rotate(-2.5deg); max-width: 280px; }
.hw-slot { border-radius: 3px; background: linear-gradient(180deg, #1D1A4C, #121035); margin-left: 40px; }
.hw-slot, .hw-knob { display: grid; grid-template-columns: 200px 1fr; column-gap: 22px; align-items: center; }
.hw-slot .hw-art, .hw-knob .hw-art { grid-row: span 2; height: 150px; }
.hw-slot h3, .hw-knob h3 { margin-top: 0; align-self: end; }
.hw-slot ul, .hw-knob ul { align-self: start; }
.hw-slot li::before { content: "+"; color: var(--phos); }
.hw-knob { border-radius: 12px 70px 12px 12px; background: linear-gradient(200deg, #2A163F, #15123A 60%); border-color: #5A2E66; }
.hw-knob li::before { content: "↺"; color: var(--mag); }
.hw-knob .ticks path { stroke: var(--art); stroke-width: 1.4; }
.hw-knob .knob circle { fill: #2A2660; stroke: #8F89C9; stroke-width: 1.5; }
.hw-knob .knob path { stroke: var(--mag); stroke-width: 4; stroke-linecap: round; }
.hw-knob .knob { transform-box: view-box; transform-origin: 120px 78px; transform: rotate(-135deg); }
.hw-knob.spun .knob { animation: knob 5s var(--ease) infinite; }
@keyframes knob { 0% { transform: rotate(-135deg); } 60% { transform: rotate(110deg); } 72% { transform: rotate(110deg); } 86%, 100% { transform: rotate(-135deg); } }

/* booth */
.booth { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.tty { background: #08071A repeating-linear-gradient(180deg, transparent 0 3px, rgba(108, 255, 176, .025) 3px 4px); border: 1px solid #2E2A6A; border-radius: 12px; padding: 18px 24px 22px; box-shadow: inset 0 0 40px rgba(108, 255, 176, .05); }
.tty-top { display: flex; justify-content: space-between; align-items: center; font: 700 10.5px/1 var(--fd); font-stretch: 175%; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.tty-led { width: 8px; height: 8px; border-radius: 50%; background: var(--phos); box-shadow: 0 0 8px var(--phos); }
.field { padding: 14px 0 10px; border-bottom: 1px dashed #343070; }
.field label { display: block; font: 700 11px/1.3 var(--fd); font-stretch: 160%; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.field label small, .field > small { font: 400 12.5px/1.3 var(--ft); letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 6px; }
.field > small { display: block; margin: 6px 0 0; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; padding: 4px 0; color: var(--phos); font: 400 19px/1.4 var(--fm); caret-color: var(--phos); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8C87C0; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--phos); outline-offset: 4px; }
.tick-in { display: flex; align-items: baseline; gap: 4px; font: 400 19px/1.4 var(--fm); color: var(--phos); }
.chips-in { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips-in input { flex: 1; min-width: 160px; }
.ab-list { display: contents; }
.ab-list li { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--fm); color: var(--ink); background: #1D1A4E; border: 1px solid #4A4590; padding: 6px 4px 6px 10px; border-radius: 3px; }
.ab-list button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 2px; }
.ab-list button:hover { color: var(--mag); }
.samples { padding-top: 16px; }
.samples p { font-size: 14px; color: var(--dim); margin-bottom: 10px; }
.samples small { color: var(--faint); }
.sample-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sample-row button { font: 400 13.5px/1 var(--fm); color: var(--ink); background: #15123B; border: 1px solid #3F3A84; padding: 9px 11px; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 0 #05040F; }
.sample-row button:hover { border-color: var(--phos); color: var(--phos); }
.sample-row button:active { transform: translateY(2px); box-shadow: none; }
.tty-act { padding-top: 18px; display: flex; justify-content: flex-end; }
.cart-zone { position: relative; padding-top: 6px; }
@media (min-width: 1240px) { .cart-zone { margin-right: -104px; margin-top: 30px; } }
.cart { position: relative; background: linear-gradient(180deg, #34307A, #221E5A); border: 1px solid #5A54AE; border-radius: 12px 12px 18px 18px; padding: 14px 16px 16px; box-shadow: 0 30px 50px -26px #000, inset 0 1px 0 rgba(255, 255, 255, .15); transform: rotate(1.2deg); }
.cart-top { display: flex; justify-content: space-between; font: 700 11px/1 var(--fm); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); padding: 2px 4px 12px; }
.cart-k { color: var(--ink); }
.cart-label { background: repeating-linear-gradient(180deg, var(--tape) 0 27px, #DCD5BE 27px 28px); color: var(--tink); border-radius: 3px; padding: 16px 18px 14px; }
.cart-id { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; }
.cart-emblem { width: 64px; height: 64px; flex: none; }
.cart-name { font: 800 26px/1.12 var(--fd); font-stretch: 118%; overflow-wrap: anywhere; }
.cart-tick { font: 700 15px/1.6 var(--fm); color: var(--mag-d); }
.cart-sec { padding: 8px 0; border-top: 1px solid #CFC7AE; }
.cart-sk { display: block; margin-bottom: 3px; font: 700 10.5px/1.4 var(--fd); font-stretch: 150%; letter-spacing: .1em; text-transform: uppercase; color: #4A4762; }
.cart-sk i { font: 400 12px/1 var(--ft); font-style: normal; text-transform: none; letter-spacing: 0; color: #5A566F; margin-left: 4px; }
.cart-mandate { font-size: 15.5px; line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.cart-mandate.empty { color: #5A566F; }
.cart-abs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; min-height: 26px; }
.cart-abs li { font: 400 13.5px/1 var(--fm); border: 1px solid var(--tink); padding: 5px 8px; border-radius: 3px; }
.cart-abs li.none { border-style: dashed; color: #5A566F; border-color: #8A859C; }
.cart-up p { font-size: 14px; color: #4A4762; }
.cart-reels { display: flex; justify-content: center; gap: 70px; padding: 14px 0 6px; }
.cart-reels i { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #C9CFDA 0 5px, #05040F 5.5px 9px, #2A1A45 9.5px 19px, #07061A 19.5px); border: 1px solid #5A54AE; position: relative; }
.cart-reels i::after { content: ""; position: absolute; inset: 14px; border-top: 3px solid #05040F; border-radius: 50%; }
.cart.typing .cart-reels i::after { animation: spin .9s linear infinite; }
.cart-foot { display: flex; justify-content: space-between; gap: 10px; font: 400 12.5px/1.3 var(--fm); color: var(--dim); padding: 6px 4px 0; }
.t-cart { margin: 22px 0 0 18px; font-size: 18px; max-width: 360px; transform: rotate(-1.6deg); }

/* risks: warning plates */
.open-risk .rack-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 140px; column-gap: 40px; }
.open-risk .rack-head > :not(.hazard) { grid-column: 1; }
.hazard { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 140px; transform: rotate(6deg); }
.hazard path:first-of-type { fill: #1A1749; stroke: var(--mag); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(255, 92, 170, .45)); }
.hazard .hz-i { fill: none; stroke: var(--mag); stroke-width: 9; stroke-linecap: round; }
.plates { margin-top: 44px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.plates li {
  position: relative; padding: 24px 26px 22px; border-radius: 5px; border: 1px solid #4E489A;
  background: linear-gradient(165deg, #2B2766, #1A1749);
  --s: radial-gradient(circle, #8F89C9 0 1.3px, #1A1749 1.8px 3.6px, #4E489A 4px 4.6px, transparent 5px);
  background-image: var(--s), var(--s), var(--s), var(--s), linear-gradient(165deg, #2B2766, #1A1749);
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, auto; background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0;
  box-shadow: 0 16px 28px -16px #000, inset 0 1px 0 rgba(255, 255, 255, .1);
}
.plates h3 { font: 800 19px/1.15 var(--fd); font-stretch: 118%; margin-bottom: 8px; }
.plates p { font-size: 15.5px; line-height: 1.5; color: var(--dim); }
.pl-a { grid-column: span 3; border-top: 0 !important; padding-top: 34px !important; }
.pl-a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 5px 5px 0 0; background: repeating-linear-gradient(-45deg, var(--mag) 0 12px, #12102F 12px 24px); }
.pl-a h3 { font-size: 26px; }
.pl-b { grid-column: span 3; transform: rotate(.8deg); }
.pl-c, .pl-d, .pl-e { grid-column: span 2; }
.pl-c { transform: rotate(-.9deg); } .pl-e { transform: rotate(1deg); }
.pl-f { grid-column: span 6; display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 24px; background-image: none !important; background: #0D0B24 !important; border-style: dashed !important; }
.pl-f h3 { margin: 0; color: var(--phos); }

/* phone-in */
.calls { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.manual { display: grid; gap: 6px; margin-top: 34px; text-decoration: none; padding: 20px 22px 20px 34px; max-width: 400px; border-radius: 4px 10px 10px 4px; background: linear-gradient(90deg, var(--mag) 0 12px, #07061A 12px 15px, #221E57 15px); border: 1px solid #4E489A; box-shadow: 0 18px 30px -18px #000; transform: rotate(-1deg); transition: transform .2s var(--ease); }
.manual:hover { transform: rotate(0) translateY(-3px); }
.manual-k { font: 700 11px/1 var(--fm); text-transform: uppercase; letter-spacing: .14em; color: var(--phos); }
.manual b { font: 700 19px/1.25 var(--ft); }
.manual span:not(.manual-k):not(.manual-go) { font-size: 14.5px; color: var(--dim); }
.manual-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 700 13px/1 var(--fd); font-stretch: 150%; text-transform: uppercase; letter-spacing: .07em; color: var(--phos); }
.manual-go svg, .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.lines details { border-top: 1px solid var(--line2); }
.lines details:last-child { border-bottom: 1px solid var(--line2); }
.lines summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 10px; padding: 18px 4px; font: 600 17px/1.35 var(--ft); }
.lines summary::-webkit-details-marker { display: none; }
.lines summary i { font: 700 11px/1 var(--fm); font-style: normal; color: var(--dim); border: 1px solid var(--line2); border-radius: 3px; padding: 6px 0; text-align: center; position: relative; }
.lines summary i::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #2A2660; }
.lines details[open] summary i { color: var(--bg); background: var(--phos); border-color: var(--phos); }
.lines details[open] summary i::after { background: var(--mag); box-shadow: 0 0 8px var(--mag); }
.lines summary::after { content: "+"; font: 400 22px/1 var(--fm); color: var(--dim); text-align: right; }
.lines details[open] summary::after { content: "–"; color: var(--phos); }
.lines summary:hover { color: var(--phos); }
.lines details p { padding: 0 30px 20px 60px; font-size: 15.5px; line-height: 1.6; color: var(--dim); }

/* ---------- sign-off footer ---------- */
.signoff { position: relative; overflow: hidden; margin-top: 110px; padding: 80px 20px 28px; background: linear-gradient(180deg, rgba(5, 4, 15, 0), #05040F 28%); }
@media (min-width: 1100px) { .signoff { padding-left: calc(var(--railw) + 52px); padding-right: 52px; } }
.signoff-in { max-width: 1240px; margin: 0 auto; position: relative; }
.signoff-k { display: flex; align-items: center; gap: 14px; font: 400 13px/1.3 var(--fm); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.onair-big { font-size: 12px; padding: 8px 12px; transition: color .4s, border-color .4s, text-shadow .4s; }
.onair-big i { transition: background .3s, box-shadow .3s; }
.signoff.off .onair-big { color: #8A84BD; border-color: #3A357C; text-shadow: none; }
.signoff.off .onair-big i { background: #3A357C; box-shadow: none; }
.signoff-h { margin-top: 24px; font: 800 clamp(38px, 6vw, 92px)/.92 var(--fd); font-stretch: 165%; text-transform: uppercase; }
.signoff-h span { display: block; font-stretch: 58%; color: var(--phos); text-shadow: 0 0 26px rgba(108, 255, 176, .35); }
.signoff-act { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.scope { width: 100%; height: 110px; margin-top: 50px; overflow: visible; }
.scope path { fill: none; stroke: var(--phos); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(108, 255, 176, .7)); vector-effect: non-scaling-stroke; }
.word { font: 900 25vw/.78 var(--fd); font-stretch: var(--ws, 200%); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px #3E3886; margin: 10px 0 0 -0.04em; transition: color 1.2s, -webkit-text-stroke-color 1.2s; user-select: none; }
.signoff.off .word { -webkit-text-stroke-color: #2A2660; }
.signoff.flash .word { color: rgba(108, 255, 176, .1); -webkit-text-stroke-color: var(--phos); transition: none; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); margin-top: 26px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--fd); font-stretch: 150%; text-transform: uppercase; letter-spacing: .06em; }
.foot-row nav { display: flex; gap: 22px; }
.foot-row nav a { font-size: 14.5px; color: var(--dim); text-decoration: none; padding: 4px 0; }
.foot-row nav a:hover { color: var(--phos); }
.foot-risk { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--faint); max-width: 80ch; }
.foot-c { margin-top: 10px; font: 400 12.5px/1 var(--fm); color: var(--faint); }
.ca { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: #0D0B24; max-width: 760px; }
.ca .lab { font: 700 12px/1 var(--fm); color: var(--mag); letter-spacing: .1em; }
.ca code { font: 400 14px/1.3 var(--fm); color: var(--ink); overflow-wrap: anywhere; flex: 1; min-width: 200px; }
.ca button, .ca a { font: 700 12px/1 var(--fd); font-stretch: 140%; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: var(--panel2); border: 1px solid var(--line2); padding: 9px 12px; border-radius: 5px; cursor: pointer; text-decoration: none; }
.toast { position: fixed; z-index: 95; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: var(--phos); color: var(--bg); font: 700 14px/1 var(--fm); padding: 12px 16px; border-radius: 6px; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- inner pages (docs, terms, 404) ---------- */
.page { padding: calc(var(--barh) + 40px) 16px 0; }
@media (min-width: 1100px) { .page { padding-left: 52px; padding-right: 52px; } }
.doc { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.doc-nav { position: sticky; top: calc(var(--barh) + 28px); padding: 16px 0 16px 18px; border-left: 1px solid var(--line2); }
.doc-nav p { font: 700 10.5px/1 var(--fd); font-stretch: 180%; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.doc-nav ol { display: grid; gap: 2px; }
.doc-nav a { display: block; position: relative; font: 400 14px/1.3 var(--fm); color: var(--dim); text-decoration: none; padding: 6px 0; }
.doc-nav a::before { content: ""; position: absolute; left: -23px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg); }
.doc-nav a:hover { color: var(--ink); }
.doc-nav a.on { color: var(--phos); }
.doc-nav a.on::before { background: var(--phos); border-color: var(--phos); box-shadow: 0 0 8px var(--phos); }
.doc-head h1, .lic h1, .dead-copy h1 { font: 800 clamp(40px, 6vw, 84px)/.92 var(--fd); text-transform: uppercase; }
.doc-head p:not(.eyebrow) { font-size: 18px; line-height: 1.6; color: var(--dim); margin-top: 22px; max-width: 64ch; }
.doc-body section { padding-top: 54px; }
.doc-body h2 { display: flex; align-items: baseline; gap: 14px; font: 800 28px/1.1 var(--fd); font-stretch: 120%; margin-bottom: 14px; scroll-margin-top: calc(var(--barh) + 20px); }
.doc-body h2 small { font: 900 40px/1 var(--fd); font-stretch: 56%; color: var(--phos); text-shadow: 0 0 14px rgba(108, 255, 176, .4); }
.doc-body section > p { font-size: 16.5px; line-height: 1.65; color: var(--ink); max-width: 68ch; margin-bottom: 14px; }
.doc-body .rules { margin: 6px 0 10px; max-width: 760px; }
.doc-body .rules b { color: var(--phos); }
.doc-body .edge { background: #0D0B24; border: 1px solid var(--line2); max-width: 760px; }
.doc-fig { margin: 26px 0 0; }
.doc-fig .desk { pointer-events: none; }
.doc-fig .mod { cursor: default; }
.doc-fig figcaption { margin-top: 14px; font: 400 13px/1.5 var(--fm); color: var(--dim); }
.spec { margin-top: 8px; border-top: 1px solid var(--line2); max-width: 820px; }
.spec div { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 700 12px/1.6 var(--fd); font-stretch: 150%; text-transform: uppercase; letter-spacing: .07em; color: var(--phos); }
.spec dt span { color: var(--faint); margin-right: 10px; }
.spec dd { margin: 0; font-size: 16px; line-height: 1.55; }
.doc-act { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 40px; }

/* terms: a log sheet taped to the desk */
.lic-wrap { max-width: 920px; margin: 0 auto; position: relative; }
.lic-wrap .eyebrow { margin-left: 4px; }
.lic { margin-top: 30px; transform: rotate(-.5deg); }
.lic.lsheet { padding: 44px 58px 40px 64px; }
.lic h1 { color: var(--pink); font-size: clamp(34px, 5vw, 64px); font-stretch: 150%; }
.lic .intro { margin-top: 14px; font: 400 16px/1.5 var(--fm); color: var(--mag-d); }
.clauses { counter-reset: c; margin-top: 26px; display: grid; gap: 4px; }
.clauses li { counter-increment: c; display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 14px 0; border-top: 1px dashed #A8AE9A; }
.clauses li::before { content: counter(c, decimal-leading-zero); font: 900 34px/1 var(--fd); font-stretch: 56%; color: var(--phos-d); }
.clauses h2 { font: 800 18px/1.25 var(--fd); font-stretch: 120%; margin-bottom: 4px; }
.clauses p { font-size: 15.5px; line-height: 1.55; }
.lic-act { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.lic .link { color: var(--pink); }
.lic .btn-push { color: var(--ink); }
.t-lic { position: absolute; right: -16px; top: 70px; font-size: 19px; transform: rotate(4deg); z-index: 3; }

/* 404 */
.lost { max-width: 1240px; margin: 0 auto; min-height: calc(100vh - var(--barh) - 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.dead-copy p:not(.eyebrow):not(.tape) { font-size: 18px; line-height: 1.6; color: var(--dim); margin-top: 20px; max-width: 46ch; }
.dead-copy .tape { margin-top: 26px; }
.dead-act { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.scope-box { margin: 0; position: relative; background: #07061A; border: 1px solid #3A357C; border-radius: 16px; padding: 18px 20px 20px; box-shadow: inset 0 0 50px rgba(108, 255, 176, .06), 0 40px 70px -40px #000; }
.scope-top { display: flex; justify-content: space-between; font: 400 12.5px/1 var(--fm); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 12px; }
.scope-top b { color: var(--mag); font-weight: 700; }
.hunt { width: 100%; height: auto; }
.hunt .grid { stroke: #1F1C4A; stroke-width: 1; }
.hunt .noise { fill: none; stroke: var(--phos); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(108, 255, 176, .6)); }
.hunt text { font: 400 11px/1 var(--fm); fill: var(--dim); letter-spacing: .08em; }
.tuner { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.tuner label { font: 700 11px/1.3 var(--fd); font-stretch: 160%; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tuner input[type="range"] { flex: 1; accent-color: var(--mag); height: 28px; cursor: ew-resize; }
.hunt-note { margin-top: 10px; font: 400 19px/1.2 var(--fh); color: var(--dim); min-height: 1.2em; }
.tuner output { font: 700 15px/1 var(--fm); color: var(--phos); min-width: 88px; text-align: right; }

.foot-mini { margin-top: 120px; padding: 28px 16px 30px; border-top: 1px solid var(--line); }
@media (min-width: 1100px) { .foot-mini { padding-left: 52px; padding-right: 52px; } }
.foot-mini > div { max-width: 1240px; margin: 0 auto; }

/* ---------- page transitions: a channel change ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tvoff .26s cubic-bezier(.6, 0, .9, .4) both; }
::view-transition-new(root) { animation: tvon .34s cubic-bezier(.1, .6, .3, 1) both; }
@keyframes tvoff { to { transform: scale(1, .004); filter: brightness(3); opacity: .2; } }
@keyframes tvon { from { transform: scale(1, .004); filter: brightness(3); opacity: .2; } }

/* ---------- depth: one light, an overhead lamp up and to the left ----------
   Lit edges face top-left; shade, thickness and cast shadows fall down-right (x = .45 y). Metal and enamel catch a hard
   bevel, glass gets a glare band, paper and tape get grain and a soft lift, rubber cables get a tube highlight and a shadow
   on the desk. Glow only where something emits light (phosphor, lamps, LEDs). */
:root {
  --bev: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -1px 0 rgba(0, 0, 0, .5);
  --sh-1: 1px 2px 1px rgba(2, 1, 10, .6);
  --sh-2: 4px 9px 12px -3px rgba(2, 1, 10, .62);
  --sh-3: 16px 36px 44px -16px rgba(2, 1, 10, .8);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .34 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --grain-p: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --brush: repeating-linear-gradient(180deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 3px);
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the room behind everything: a night studio wall, far racks out of focus, the lamp's haze, a vignette */
body { background: #07061A; }
.room { position: fixed; z-index: -1; left: 0; right: 0; top: -6vh; height: 118vh; pointer-events: none; will-change: transform; overflow: hidden; }
.room::before { /* the wall */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 760px at 16% 4%, #2A2268 0%, rgba(42, 34, 104, 0) 64%),
    radial-gradient(900px 700px at 100% 42%, #0E2148 0%, rgba(14, 33, 72, 0) 62%),
    radial-gradient(800px 600px at 0% 100%, #1C1347 0%, rgba(28, 19, 71, 0) 62%),
    linear-gradient(180deg, #100D2B 0%, #0A0920 55%, #06051A 100%);
}
.room-far { /* far racks: soft dark cabinets with out-of-focus LEDs (bokeh) */
  position: absolute; inset: 0; opacity: .9;
  background:
    radial-gradient(9px 9px at 71% 22%, rgba(108, 255, 176, .55), transparent 70%),
    radial-gradient(14px 14px at 74.5% 22%, rgba(108, 255, 176, .3), transparent 70%),
    radial-gradient(12px 12px at 78% 31%, rgba(255, 92, 170, .45), transparent 70%),
    radial-gradient(22px 22px at 86% 18%, rgba(255, 190, 110, .22), transparent 70%),
    radial-gradient(10px 10px at 89% 40%, rgba(108, 255, 176, .4), transparent 70%),
    radial-gradient(26px 26px at 93% 58%, rgba(120, 140, 255, .2), transparent 70%),
    radial-gradient(12px 12px at 9% 64%, rgba(255, 92, 170, .35), transparent 70%),
    radial-gradient(20px 20px at 5% 46%, rgba(108, 255, 176, .2), transparent 70%),
    radial-gradient(16px 16px at 13% 82%, rgba(120, 140, 255, .25), transparent 70%),
    radial-gradient(30px 30px at 60% 90%, rgba(255, 92, 170, .12), transparent 70%),
    linear-gradient(90deg, transparent 64%, rgba(4, 3, 14, .32) 70%, rgba(4, 3, 14, .32) 80%, transparent 86%, rgba(4, 3, 14, .26) 92%, rgba(4, 3, 14, .3) 100%),
    linear-gradient(90deg, rgba(4, 3, 14, .32), rgba(4, 3, 14, .28) 12%, transparent 22%);
}
.room-lamp { /* the lamp's cone and haze, from the top left */
  position: absolute; inset: 0;
  background:
    conic-gradient(from 128deg at 4% -6%, transparent 0deg, rgba(190, 200, 255, .05) 14deg, rgba(190, 200, 255, .085) 26deg, rgba(190, 200, 255, .04) 40deg, transparent 54deg),
    radial-gradient(70% 60% at 50% 46%, transparent 52%, rgba(2, 1, 10, .62) 100%);
}

/* top bar and dial: a metal strip above the page, casting onto it */
.bar { background: linear-gradient(180deg, rgba(20, 17, 50, .98), rgba(9, 8, 24, .98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 #05040F, 0 10px 24px -6px rgba(2, 1, 10, .75); }
.btn-sm { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #1A6A45, 2px 6px 10px -2px rgba(0, 0, 0, .6); }
.onair { background: linear-gradient(180deg, #24102A, #12081A); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06); }
@media (min-width: 1100px) {
  .rail {
    background: var(--grain) 0 0 / 180px, var(--brush), linear-gradient(90deg, #1A1640 0%, #120F30 70%, #0C0A25 100%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06), inset -1px 0 0 #05040F, 10px 0 26px -6px rgba(2, 1, 10, .8);
  }
  .rail-scale::before { box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
  .needle::before { box-shadow: 0 0 8px var(--mag), 2px 5px 4px rgba(0, 0, 0, .7); }
  .needle i { background: linear-gradient(180deg, #FFB2D7, #E2478F 55%, #A51E5F); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), 0 0 10px rgba(255, 92, 170, .5), 3px 6px 6px rgba(0, 0, 0, .7); }
  .rail-list a i { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08); }
  .rail-list a.on i { box-shadow: 0 0 9px var(--phos), inset -1px -1px 1px rgba(0, 0, 0, .3); }
}

/* the desk: a brushed, anodised top on lacquered wooden cheeks, with a front lip and a shadow on the floor */
.desk {
  background: var(--grain) 0 0 / 180px, var(--brush),
    radial-gradient(70% 70% at 10% 0%, rgba(175, 165, 255, .24), rgba(175, 165, 255, .06) 50%, transparent 72%),
    radial-gradient(70% 70% at 100% 100%, rgba(0, 0, 0, .4), transparent 70%),
    linear-gradient(170deg, #241F5E 0%, #17143F 40%, #0F0D2C 100%);
  border-color: #4A4496 #2A2566 #1A1648 #3B3683;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .5),
    0 6px 0 -1px #0B0923, 0 12px 0 -2px #07061A, /* the front lip */
    6px 16px 14px -4px rgba(2, 1, 10, .7), 30px 70px 90px -40px #000;
}
.desk::before { --s: radial-gradient(circle at 42% 38%, #E6E3FF 0 .9px, #8F89C9 1.3px, #3A357C 3.6px, #0B0A20 4.2px 4.8px, rgba(0, 0, 0, .5) 5.3px, transparent 6px); }
.cheek {
  position: absolute; top: 10px; bottom: -4px; width: 30px; pointer-events: none; z-index: -1;
  background: var(--grain) 0 0 / 180px,
    repeating-linear-gradient(178deg, rgba(0, 0, 0, 0) 0 7px, rgba(0, 0, 0, .18) 7px 8px, rgba(255, 220, 190, .04) 8px 11px, rgba(0, 0, 0, .1) 11px 12px),
    linear-gradient(90deg, #6A3530 0%, #4A2222 18%, #2C1418 55%, #170A0E 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 200, 170, .3), inset -1px 0 0 rgba(0, 0, 0, .6), 4px 12px 14px -4px rgba(0, 0, 0, .7);
}
.cheek-l { left: -24px; border-radius: 14px 0 0 22px; }
.cheek-r { right: -24px; border-radius: 0 14px 22px 0; background-position: 0 0, 0 0, 0 0; }
.cheek-r { background: var(--grain) 0 0 / 180px, repeating-linear-gradient(178deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .2) 9px 10px, rgba(255, 220, 190, .035) 10px 12px), linear-gradient(90deg, #3A1C1C 0%, #241012 50%, #120709 100%); box-shadow: inset 1px 0 0 rgba(255, 200, 170, .18), inset -1px 0 0 rgba(0, 0, 0, .6), 10px 18px 18px -6px rgba(0, 0, 0, .75); }
.bridge { border-bottom-color: #0A0822; }
.bridge::after { border-bottom-color: rgba(255, 255, 255, .07); }
.statement { text-shadow: 1px 2px 0 rgba(4, 3, 14, .55); }
.statement .sn { text-shadow: 1px 2px 0 rgba(4, 3, 14, .4), 0 0 22px rgba(108, 255, 176, .35); }

/* the readout: a recessed CRT strip behind glass */
.readout {
  position: relative; border-color: #05040F #2A2665 #3A3584 #0B0A22;
  background: radial-gradient(130% 160% at 50% 50%, #0C0B24 40%, #040310 100%), #090819;
  background-image: repeating-linear-gradient(180deg, rgba(108, 255, 176, 0) 0 2px, rgba(108, 255, 176, .04) 2px 3px), radial-gradient(130% 160% at 50% 50%, #0D0C27 40%, #040310 100%);
  box-shadow: inset 3px 5px 10px rgba(0, 0, 0, .85), inset 0 0 26px rgba(108, 255, 176, .07), 1px 1px 0 rgba(255, 255, 255, .08);
}
.readout::before { content: ""; position: absolute; inset: 2px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 28%, transparent 30%), radial-gradient(90% 60% at 30% 0%, rgba(255, 255, 255, .04), transparent 70%); }
.btn-push {
  background: var(--brush), linear-gradient(180deg, #3A348A, #1F1B58 60%, #181548);
  border-color: #6A63C2 #3E3888 #2A2566 #514BA8;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), 0 4px 0 #07061A, 2px 6px 0 -1px #050411, 6px 14px 18px -6px rgba(0, 0, 0, .8);
}
.btn-push:hover { background: var(--brush), linear-gradient(180deg, #443DA0, #252063 60%, #1C1950); }
.btn-push:active { box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .6), 0 1px 0 #07061A; }
.push-led { box-shadow: 0 0 10px var(--phos), inset -1px -1px 2px rgba(0, 0, 0, .35), inset 1px 1px 1px #fff; }

/* the work surface: a sunken bed the units are screwed into; the meter bridge stands above it */
.surface::before {
  content: ""; position: absolute; inset: -18px -16px -6px; z-index: 0; pointer-events: none; border-radius: 16px;
  background: var(--grain) 0 0 / 180px, radial-gradient(60% 75% at 14% 8%, rgba(150, 140, 255, .2), rgba(150, 140, 255, .06) 45%, transparent 70%), radial-gradient(80% 90% at 100% 100%, rgba(0, 0, 0, .45), transparent 60%), linear-gradient(180deg, #0B0926, #0E0C2D 40%, #120F36);
  box-shadow: inset 8px 16px 28px rgba(0, 0, 0, .75), inset 0 2px 0 rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .55), 1px 1px 0 rgba(255, 255, 255, .09), -1px -1px 0 rgba(0, 0, 0, .4);
}
.surface > .mod { z-index: 1; }
/* the work surface slopes toward you like a console's; the camera levels it as it moves in on a unit (app.js) */
.surface { --tilt: 9deg; transform: perspective(1800px) rotateX(var(--tilt)); transform-origin: 50% 0; }
.surface > .cables { z-index: 3; }
/* units: raised enamel modules screwed to the desk; thickness and shadow down-right; they lift toward you when live */
.face {
  background: var(--grain) 0 0 / 180px, radial-gradient(120% 90% at 0% 0%, rgba(170, 160, 255, .13), transparent 55%), linear-gradient(158deg, #2E2970 0%, #1C1950 40%, #120F36 100%);
  border-color: #6660BE #2E2A6C #1C1950 #48429A;
  box-shadow: var(--bev), 1px 2px 0 #1A1748, 2px 4px 0 #13103A, 3px 6px 0 #0D0B2C, 4px 8px 0 #07061C, 12px 22px 16px -4px rgba(0, 0, 0, .78), 30px 54px 46px -18px rgba(0, 0, 0, .85);
  transition: border-color .3s, box-shadow .35s var(--ease), transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.m3 .face { background-image: var(--grain), repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px), linear-gradient(158deg, #2C2870, #17143F 70%); background-size: 180px, auto, auto; }
.m5 .face { background: var(--grain) 0 0 / 180px, linear-gradient(158deg, #221E5C, #141140 50%, #0D0B2A); }
.m6 .face { border-top-color: #6A63C2; }
.m4 .face::before, .m4 .face::after { background: linear-gradient(180deg, #34307A, #1E1A52); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), 2px 4px 6px -2px rgba(0, 0, 0, .7); }
.mod.act .face, .mod:hover .face {
  transform: translate(-1px, -3px);
  box-shadow: var(--bev), 0 0 0 1px rgba(108, 255, 176, .25), 0 0 34px -6px rgba(108, 255, 176, .3), 1px 2px 0 #1A1748, 2px 4px 0 #13103A, 3px 6px 0 #0D0B2C, 4px 8px 0 #07061C, 16px 30px 22px -6px rgba(0, 0, 0, .78), 40px 70px 60px -20px rgba(0, 0, 0, .9);
}
.m5.act .face, .m7.act .face, .m5:hover .face, .m7:hover .face {
  box-shadow: var(--bev), 0 0 0 1px rgba(255, 92, 170, .25), 0 0 34px -6px rgba(255, 92, 170, .35), 1px 2px 0 #1A1748, 2px 4px 0 #13103A, 3px 6px 0 #0D0B2C, 4px 8px 0 #07061C, 16px 30px 22px -6px rgba(0, 0, 0, .78), 40px 70px 60px -20px rgba(0, 0, 0, .9);
}
.legend { text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.legend b { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .25), 1px 2px 2px rgba(0, 0, 0, .55); }
.jack {
  background: radial-gradient(circle at 50% 50%, #000 0 3px, #2A2660 3.4px, transparent 3.8px), radial-gradient(circle at 38% 32%, #FFFFFF 0, #C9CFDA 2.5px, #7B80A0 5px, #3A357C 6.6px, #1A1748 7px);
  box-shadow: 0 0 0 2px #0E0C28, 2px 3px 4px rgba(0, 0, 0, .7);
}

/* drawings: shaded volumes instead of flat fills */
.art { filter: drop-shadow(2px 3.5px 2px rgba(2, 1, 10, .45)); }
.art .fill, .hw-art .fill { fill: url(#sq-body); filter: url(#sq-solid); }
.art .side { fill: #06051A; }
.art .glass { fill: url(#sq-glass); stroke: rgba(255, 255, 255, .1); stroke-width: .8; pointer-events: none; }
.art .rim { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1.6; stroke-linecap: round; }
.art .glint { fill: #fff; opacity: .85; }
.art-1 .paper { fill: url(#sq-paper); filter: drop-shadow(1.4px 2.4px 1.2px rgba(0, 0, 0, .5)); }
.art-1 .roller { fill: url(#sq-roller); stroke: #0B0A20; stroke-width: .8; }
.art-1 .knob-c, .art-2 .pivot { fill: url(#sq-knob); stroke: #2A2660; stroke-width: 1; filter: drop-shadow(1px 1.6px .6px rgba(0, 0, 0, .7)); }
.art-1 .keys { filter: drop-shadow(.7px 1.4px 0 #05040F); }
.art-1 .key-c { fill: url(#sq-key); stroke: #6E68BC; stroke-width: .6; }
.art-2 .coin { fill: url(#sq-coin); }
.art-2 .coin-edge { fill: #0A3324; stroke: var(--phos-d); stroke-width: 1.2; }
.art-2 .lever-k { filter: drop-shadow(1px 1.5px .5px rgba(0, 0, 0, .7)); }
.art-3 .label { fill: url(#sq-paper); filter: drop-shadow(1px 1.6px .8px rgba(0, 0, 0, .55)); }
.art-3 .bezel { fill: #0A0920; stroke: url(#sq-chrome); stroke-width: 3; }
.art-3 .key rect { fill: url(#sq-chrome); }
.art-3 .key { filter: drop-shadow(1.2px 2px .8px rgba(0, 0, 0, .75)); }
.solder circle { fill: url(#sq-knob); stroke: none; }
.art .unit rect, .hw-art .unit rect { fill: url(#sq-unit); }
.art .unit, .hw-art .unit { filter: drop-shadow(1.2px 2.6px 1px rgba(2, 1, 10, .7)); }
.art .core-u, .hw-art .core-u { filter: drop-shadow(1px 2px .8px rgba(2, 1, 10, .7)); }
.art-4 .rail, .hw-art .rail { stroke: url(#sq-chrome); stroke-width: 3.4; opacity: .6; }
.art-4 .holes circle { stroke: rgba(255, 255, 255, .14); stroke-width: .6; }
.art-5 .disc { fill: url(#sq-disc); filter: url(#sq-solid); }
.art-5 .pack { fill: url(#sq-pack); }
.art-5 .pot-pack { fill: url(#sq-packhot); }
.art-5 .hub { fill: url(#sq-knob); }
.art-5 .ojack { stroke: url(#sq-chrome); }
.art-6 .housing { fill: #06051A; }
.art-6 .lip-d { fill: none; stroke: #000; stroke-width: 2.4; opacity: .7; }
.art-6 .lip-l { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.2; }
.art-7 .lamp-hs { fill: url(#sq-body); filter: url(#sq-solid); }
.art-7 .track-hi { stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.art-7 .fk { fill: url(#sq-chrome); filter: drop-shadow(1.2px 2.2px .8px rgba(0, 0, 0, .75)); }
.art-7 .fk-win { fill: var(--mag); filter: drop-shadow(0 0 4px var(--mag)) drop-shadow(1.2px 2.2px .8px rgba(0, 0, 0, .7)); }

/* cables: rubber tubes with a highlight, plugs at the jacks, and their shadow on the desk below the units */
.cables-sh { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; transform: translate(11px, 22px); filter: blur(3px); opacity: .9; }
.cables-sh path { fill: none; stroke: #020109; stroke-width: 8; stroke-linecap: round; }
.cables-sh .k-rst { stroke-width: 4; opacity: .7; }
.cab-sh { stroke-width: 6.4; opacity: .95; }
.cab { stroke-width: 4; }
.cab-hi { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .42; transform: translate(-.7px, -1px); }
.k-rst .cab-hi { display: none; }
.plug { fill: none; stroke-linecap: round; }
.plug-b { stroke: #05040F; stroke-width: 10; }
.plug-m { stroke: #9DA2BC; stroke-width: 7.4; }
.plug-h { stroke: #F2F4FA; stroke-width: 2; opacity: .75; transform: translate(-.6px, -1.6px); }
.ctag { filter: drop-shadow(1.5px 3px 1.5px rgba(0, 0, 0, .55)); }
.ctag rect { fill: #EFE9D6; }

/* gaffer tape: translucent, a little crinkled, torn ends, a soft lift off whatever it sticks to */
:where(.tape) { position: relative; }
.tape { isolation: isolate; background: none; clip-path: none; box-shadow: none; }
.tape::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .05) 70%, rgba(255, 255, 255, .12)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 7px), rgba(236, 230, 211, .94);
  clip-path: polygon(0 8%, 2% 0, 98% 0, 100% 10%, 98.6% 50%, 100% 92%, 98% 100%, 2% 100%, 0 90%, 1.4% 50%); }
.tape::after { content: ""; position: absolute; inset: 3px 2px 0 4px; z-index: -2; background: rgba(2, 1, 10, .7); filter: blur(4px); transform: translate(3px, 6px); }

/* log sheets: greenbar paper with grain, light from the top left, a curl at the lower corner and a lift off the desk */
.lsheet {
  background: var(--grain-p) 0 0 / 220px,
    linear-gradient(150deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 78%, rgba(40, 30, 60, .14) 100%),
    repeating-linear-gradient(180deg, var(--paper) 0 30px, var(--pband) 30px 60px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 6px 14px 16px -6px rgba(2, 1, 10, .6), 26px 54px 60px -24px rgba(2, 1, 10, .9), inset -1px -1px 0 rgba(0, 0, 0, .08);
}
.lsheet::after { background: linear-gradient(100deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 40%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 2px, transparent 2px 6px), rgba(236, 230, 211, .78); box-shadow: 1px 3px 4px rgba(0, 0, 0, .3); }
.lsheet-end { background: var(--grain-p) 0 0 / 220px, linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, 0) 40%, rgba(40, 30, 60, .14)), var(--tape); }
.plate {
  background: var(--brush), linear-gradient(160deg, #3A3488, #1C1950 55%, #121038);
  border-color: #7069C8 #3E3888 #2A2566 #5A54AE;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), 0 3px 0 #0A0824, 4px 8px 0 -2px #050411, 10px 20px 22px -8px rgba(0, 0, 0, .8);
}
.edge { box-shadow: inset 2px 3px 6px rgba(0, 0, 0, .6); }
html:not(.pin) .lsheet-art { background: radial-gradient(90% 80% at 10% 0%, rgba(150, 140, 255, .12), transparent 60%), linear-gradient(170deg, #1C1950, #100E30); border-color: #05040F #2E2A6C #46409A #0B0A22; box-shadow: inset 3px 6px 12px rgba(0, 0, 0, .75), 1px 1px 0 rgba(255, 255, 255, .5); }
html.pin .lsheet { transform: translate(0, -44%) rotate(var(--rot)) perspective(1100px) rotateY(-14deg) rotateX(6deg); transform-origin: 100% 50%; }
html.pin .lsheet[data-side="l"] { transform-origin: 0 50%; }
html.pin .lsheet.on { transform: translate(0, -50%) rotate(var(--rot)) perspective(1100px) rotateY(0) rotateX(0); transition: opacity .3s .16s, transform .7s .1s cubic-bezier(.25, 1.35, .45, 1), visibility 0s; }
/* rack focus: the unit under the camera stays sharp, the rest of the desk falls out of focus */
html.pin .desk.focus .mod:not(.act) { filter: saturate(.55) blur(1.6px); }
html.pin .desk.focus .cables-sh { opacity: .35; }

/* rack sections: front panels screwed into a rack, brushed metal, a bevel, thickness and a cast shadow */
.rack-in {
  background: var(--grain) 0 0 / 180px, var(--brush), radial-gradient(90% 70% at 6% 0%, rgba(150, 140, 255, .1), transparent 60%), linear-gradient(170deg, #1F1B52, #141140 50%, #0E0C2B);
  border-color: #4A4496 #2A2566 #1A1648 #3B3683;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .13), inset -1px -2px 0 rgba(0, 0, 0, .5), 0 5px 0 -1px #0A0823, 0 10px 0 -2px #06051A, 8px 20px 20px -6px rgba(2, 1, 10, .7), 30px 70px 90px -40px #000;
}
.rack-in::before, .rack-in::after {
  background:
    radial-gradient(circle at 46% 40%, #000 0 3.4px, rgba(255, 255, 255, .14) 4px, transparent 4.8px) center 26px / 100% 68px repeat-y,
    var(--brush), linear-gradient(180deg, #2E2A70, #1A1748);
  border-color: #4A4496 #2A2566 #1A1648 #3B3683;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .12), 4px 10px 12px -4px rgba(0, 0, 0, .7);
}
.ghost { -webkit-text-stroke-color: #2E2A6C; text-shadow: 3px 6px 0 rgba(2, 1, 10, .35); }
.h2 { text-shadow: 2px 5px 0 rgba(2, 1, 10, .45), 6px 16px 22px rgba(2, 1, 10, .55); }
.h2 .sn { text-shadow: 2px 5px 0 rgba(2, 1, 10, .4), 0 0 24px rgba(108, 255, 176, .3); }
.eyebrow b { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .6); }

/* patch bay: a recessed, perforated field; chrome jacks; patch cords standing out of them with a shadow */
.bay {
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .45) 0 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #0C0A26, #110E30);
  border-color: #05040F #2A2566 #3A3584; border-radius: 6px;
  box-shadow: inset 4px 8px 16px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .4), 1px 1px 0 rgba(255, 255, 255, .07);
}
.jk { background: radial-gradient(circle at 50% 50%, #000 0 5.6px, #262258 6px, transparent 6.4px), radial-gradient(circle at 38% 32%, #FFFFFF 0, #CDD2DE 4px, #7D82A3 9px, #3A357C 11.5px, #1E1B50 12.5px);
  box-shadow: 0 0 0 1px #05040F, 2px 4px 5px rgba(0, 0, 0, .7); }
.bay li:nth-child(-n + 4) .jk::after, .bay li:nth-child(n + 5) .jk::after { box-shadow: inset 2px 0 1px rgba(255, 255, 255, .45), inset -2px 0 2px rgba(0, 0, 0, .35), 7px 10px 8px -2px rgba(0, 0, 0, .65); }
.jk-dead::after { box-shadow: 1px 3px 3px rgba(0, 0, 0, .6); background: linear-gradient(100deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 50%), var(--tape); }

/* hardware: the soldered board raised, the slot recessed (debossed), the knob turned from metal */
.hw-solder {
  background: var(--grain) 0 0 / 180px, repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), radial-gradient(90% 80% at 0% 0%, rgba(150, 140, 255, .14), transparent 60%), linear-gradient(165deg, #2E2A70, #17143E);
  border-color: #5A54AE #2E2A6C #1C1950 #46409A;
  box-shadow: var(--bev), 0 4px 0 -1px #0B0924, 0 8px 0 -2px #06051A, 8px 18px 18px -6px rgba(2, 1, 10, .7), 26px 56px 60px -26px #000;
}
.hw-slot {
  background: linear-gradient(180deg, #0B0924, #141137 70%, #18153F);
  border-color: #05040F #2E2A6C #4A4496 #0B0A22;
  box-shadow: inset 5px 10px 18px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .4), 1px 1px 0 rgba(255, 255, 255, .08);
}
.hw-knob {
  background: var(--grain) 0 0 / 180px, radial-gradient(80% 90% at 10% 0%, rgba(255, 140, 200, .1), transparent 60%), linear-gradient(200deg, #2E1846, #15123A 60%);
  border-color: #7A3E86 #4A2558 #2E1640 #5A2E66;
  box-shadow: var(--bev), 0 4px 0 -1px #0B0924, 0 8px 0 -2px #06051A, 8px 18px 18px -6px rgba(2, 1, 10, .7), 26px 56px 60px -26px #000;
}
.hw-knob .knob circle { fill: url(#sq-disc); stroke: url(#sq-chrome); stroke-width: 2.4; }
.hw-knob .knob { filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, .7)); }

/* booth: a CRT teletype screen sunk into the panel; a plastic cart with a moulded edge */
.tty {
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(108, 255, 176, .025) 3px 4px), radial-gradient(140% 120% at 50% 40%, #0C0B25 50%, #040310 100%);
  border-color: #020108 #2E2A6A #46409A #0B0A22;
  box-shadow: inset 5px 9px 22px rgba(0, 0, 0, .85), inset 0 0 40px rgba(108, 255, 176, .05), 0 0 0 8px #15123A, 0 0 0 9px #2E2A6C, 6px 16px 22px 2px rgba(2, 1, 10, .65);
}
.cart {
  background: var(--grain) 0 0 / 180px, radial-gradient(90% 60% at 10% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(180deg, #3C3788, #241F5E 60%, #1C1850);
  border-color: #7A73D6 #4A4496 #2E2A6C #5A54AE;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -2px -3px 0 rgba(0, 0, 0, .3), 0 6px 0 -1px #120F35, 0 11px 0 -2px #07061A, 10px 24px 24px -8px rgba(2, 1, 10, .75), 30px 64px 70px -28px #000;
}
.cart-label { background: var(--grain-p) 0 0 / 220px, linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .06)), repeating-linear-gradient(180deg, var(--tape) 0 27px, #DCD5BE 27px 28px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 1px 2px 3px rgba(0, 0, 0, .4); }
.cart-reels i { box-shadow: inset 3px 5px 8px rgba(0, 0, 0, .8), 1px 1px 0 rgba(255, 255, 255, .12); }
.field input, .field textarea { text-shadow: 0 0 8px rgba(108, 255, 176, .2); }
.sample-row button { background: linear-gradient(180deg, #221E58, #15123B); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #05040F, 2px 5px 6px -1px rgba(0, 0, 0, .6); }
.sample-row button:active { box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .6); }
.ab-list li { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 1px 2px 2px rgba(0, 0, 0, .5); }

/* warning plates: enamel on steel, a gloss band, domed screws, thickness and a cast shadow */
.plates li {
  --s: radial-gradient(circle at 40% 36%, #FFFFFF 0, #C9CFDA 1.4px, #6E7392 3.2px, #1A1749 3.8px 4.2px, rgba(0, 0, 0, .55) 4.6px, transparent 5.2px);
  background-image: var(--s), var(--s), var(--s), var(--s), linear-gradient(112deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .035) 70%, rgba(255, 255, 255, 0) 86%), var(--grain), linear-gradient(165deg, #322D74, #1C1950 70%, #17143F);
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, 180px, auto;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px), 0 0, 0 0, 0 0;
  border-color: #6A63C2 #3E3888 #2A2566 #514BA8;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .18), inset -1px -1px 0 rgba(0, 0, 0, .45), 0 3px 0 #0A0824, 2px 6px 0 -1px #050411, 8px 18px 18px -6px rgba(2, 1, 10, .7), 22px 44px 50px -24px #000;
}
.pl-a::before { box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35); }
.pl-f { box-shadow: inset 3px 6px 14px rgba(0, 0, 0, .7) !important; background: #0A0920 !important; }
.hazard path:first-of-type { fill: url(#hz-g); filter: drop-shadow(0 0 10px rgba(255, 92, 170, .4)) drop-shadow(5px 10px 6px rgba(0, 0, 0, .7)); }

/* phone-in: line keys you can press, the manual as a booklet with page edges */
.lines summary i { background: linear-gradient(180deg, #2A2566, #17143F); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), 0 3px 0 #06051A, 2px 5px 6px -1px rgba(0, 0, 0, .6); border-color: #4A4496 #2A2566 #1A1648 #3B3683; }
.lines details[open] summary i { transform: translateY(2px); box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .35), 0 1px 0 #06051A; }
.lines summary i::after { box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .6); }
.manual { box-shadow: 1px 1px 0 #2A2566, 2px 2px 0 #0D0B24, 3px 3px 0 #2A2566, 4px 4px 0 #0D0B24, 5px 5px 0 #2A2566, 12px 22px 26px -8px rgba(0, 0, 0, .8), inset 1px 1px 0 rgba(255, 255, 255, .12); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s; }
.manual:hover { box-shadow: 1px 1px 0 #2A2566, 2px 2px 0 #0D0B24, 3px 3px 0 #2A2566, 4px 4px 0 #0D0B24, 5px 5px 0 #2A2566, 18px 34px 34px -10px rgba(0, 0, 0, .85), inset 1px 1px 0 rgba(255, 255, 255, .12); }

/* sign-off: the wordmark extruded like a cast metal badge; the scope on a sunk CRT */
.word { text-shadow: 1px 2px 0 #0D0B26, 2px 4px 0 #0B0922, 3px 6px 0 #09081E, 4px 8px 0 #07061A, 5px 10px 0 #060516, 14px 30px 30px rgba(0, 0, 0, .6); }
.signoff-h { text-shadow: 2px 5px 0 rgba(2, 1, 10, .5), 8px 20px 26px rgba(2, 1, 10, .6); }
.signoff-h span { text-shadow: 2px 5px 0 rgba(2, 1, 10, .45), 0 0 26px rgba(108, 255, 176, .35); }

/* inner pages */
.doc-fig .surface { --tilt: 6deg; }
.doc-nav { padding-left: 34px !important; }
/* terms: the sheet lies on an older one, slightly askew underneath */
.lic-wrap::before {
  content: ""; position: absolute; left: 26px; right: -10px; top: 70px; bottom: -16px; transform: rotate(1.4deg); border-radius: 2px;
  background: var(--grain-p) 0 0 / 220px, linear-gradient(150deg, rgba(0, 0, 0, 0) 40%, rgba(30, 20, 50, .22)), repeating-linear-gradient(180deg, #D9DCCD 0 30px, #CBD5C2 30px 60px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 10px 22px 26px -8px rgba(2, 1, 10, .7);
}
.lic { position: relative; z-index: 1; }
.doc-fig figcaption { margin-top: 40px; }
.doc-body h2 small { padding: 4px 10px 2px; border-radius: 5px; border: 1px solid; border-color: #7069C8 #3E3888 #2A2566 #5A54AE;
  background: var(--brush), linear-gradient(160deg, #3A3488, #1C1950 55%, #121038); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), 0 3px 0 #0A0824, 6px 12px 14px -6px rgba(0, 0, 0, .8); transform: rotate(-3deg); }
.doc-nav { border-left: 0; padding-right: 14px; border-radius: 4px 12px 12px 4px; background: var(--grain) 0 0 / 180px, var(--brush), linear-gradient(170deg, #1F1B52, #120F33);
  box-shadow: inset 2px 0 0 #05040F, inset 3px 0 0 rgba(255, 255, 255, .06), inset -1px -1px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08), 8px 18px 22px -8px rgba(2, 1, 10, .75); }
.doc-nav a::before { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .9); }
.doc-nav a.on::before { box-shadow: 0 0 8px var(--phos); }
.doc-head h1, .dead-copy h1 { text-shadow: 2px 5px 0 rgba(2, 1, 10, .45), 8px 18px 24px rgba(2, 1, 10, .55); }
.doc-body .edge { background: #090820; box-shadow: inset 2px 4px 10px rgba(0, 0, 0, .65); border-color: #05040F #2A2566 #3A3584 #0B0A22; }
.spec { background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, 0)); }
/* 404: the scope sits in a monitor housing (brushed case, wooden cheeks, screws, feet); the screen is sunk behind glass */
.monitor {
  position: relative; padding: 20px 20px 26px; border-radius: 26px; border: 1px solid; border-color: #5A54AE #2E2A6C #1C1950 #46409A;
  --s: radial-gradient(circle at 42% 38%, #E6E3FF 0 .9px, #8F89C9 1.3px, #3A357C 3.6px, #0B0A20 4.2px 4.8px, rgba(0, 0, 0, .5) 5.3px, transparent 6px);
  background: var(--s) 10px 10px / 12px 12px no-repeat, var(--s) calc(100% - 10px) 10px / 12px 12px no-repeat, var(--s) 10px calc(100% - 10px) / 12px 12px no-repeat, var(--s) calc(100% - 10px) calc(100% - 10px) / 12px 12px no-repeat,
    var(--grain) 0 0 / 180px, var(--brush), radial-gradient(80% 70% at 8% 0%, rgba(175, 165, 255, .2), transparent 60%), linear-gradient(170deg, #2A2566, #17143F 55%, #0F0D2C);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -2px 0 rgba(0, 0, 0, .5), 0 6px 0 -1px #0B0923, 0 12px 0 -2px #07061A, 10px 24px 22px -6px rgba(2, 1, 10, .75), 36px 80px 90px -36px #000;
}
.monitor::before, .monitor::after { /* feet */
  content: ""; position: absolute; bottom: -22px; width: 70px; height: 12px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #17143F, #07061A); box-shadow: 6px 12px 12px -2px rgba(0, 0, 0, .7);
}
.monitor::before { left: 60px; } .monitor::after { right: 60px; }
.monitor .cheek { top: 22px; bottom: 22px; }
.scope-box {
  background: radial-gradient(130% 120% at 50% 40%, #0B0A24 50%, #030210 100%);
  border-color: #020108 #2E2A6A #46409A #0B0A22;
  box-shadow: inset 6px 12px 26px rgba(0, 0, 0, .9), inset 0 0 50px rgba(108, 255, 176, .06), 1px 1px 0 rgba(255, 255, 255, .1), -1px -1px 0 rgba(0, 0, 0, .6);
}
.tuner input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
.tuner input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--mag) 0 var(--fill, 50%), #05040F var(--fill, 50%)); box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08); }
.tuner input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: #05040F; box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08); }
.tuner input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--mag); }
.tuner input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 28px; margin-top: -10px; border-radius: 4px; border: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 4px) center / 8px 14px no-repeat, linear-gradient(180deg, #FFFFFF, #C9CFDA 40%, #6E7392 60%, #D7DBE6 85%, #8A8FA8);
  box-shadow: inset 1px 1px 0 #fff, 3px 6px 6px rgba(0, 0, 0, .7); }
.tuner input[type="range"]::-moz-range-thumb { width: 18px; height: 28px; border-radius: 4px; border: 0; background: linear-gradient(180deg, #FFFFFF, #C9CFDA 40%, #6E7392 60%, #D7DBE6 85%, #8A8FA8); box-shadow: 3px 6px 6px rgba(0, 0, 0, .7); }
.scope-box::after { content: ""; position: absolute; inset: 3px; border-radius: 14px; pointer-events: none; background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 30%, transparent 32%), radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .35)); }

/* depth layers that move: set by app.js (pointer on the desk overview, scroll elsewhere) */
.surface { --px: 0; --py: 0; }
.surface > .mod, .surface > .cables { transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 5px), 0); }
.surface > .tape { translate: calc(var(--px) * 14px) calc(var(--py) * 10px); }
[data-depth] { will-change: transform; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .bar-nav { gap: 16px; }
  .onair { display: none; }
}
@media (max-width: 1099px) {
  .cheek { width: 16px; }
  .surface { --tilt: 5deg; }
  .cheek-l { left: -13px; } .cheek-r { right: -13px; }
  .lic-wrap::before { right: -2px; left: 18px; }
  .tuner-mini { display: block; }
  .readout { grid-column: 1 / -1; }
  .bridge-act { grid-column: 1 / -1; grid-row: 4; margin: 18px 0 0; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .rack-in { padding: 46px 34px 48px; }
  .rack-in::before, .rack-in::after { display: none; }
  .bay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bay li:nth-child(4n + 1) { border-left: 1px solid var(--line); }
  .bay li:nth-child(2n + 1) { border-left: 0; }
  .bay li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .dead { grid-template-columns: 1fr; }
  .hw { grid-template-columns: minmax(0, 1fr); }
  .hw-solder { grid-row: auto; }
  .hw-slot { margin-left: 0; }
  .booth { grid-template-columns: minmax(0, 1fr); }
  .cart-zone { max-width: 520px; }
  .calls { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-nav { display: none; }
  .lost { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .ghost { font-size: 90px; }
  .t-lic { right: 8px; }
}
@media (max-width: 900px) {
  .bar-nav { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 700px) {
  :root { --barh: 56px; }
  .bar-in { gap: 12px; padding: 0 14px; }
  .bar-end .btn-sm { display: none; }
  .desk { padding: 16px 14px 24px; border-radius: 16px; }
  .cheek { width: 12px; top: 18px; }
  .cheek-l { left: -9px; } .cheek-r { right: -9px; }
  .lic-wrap::before { right: 2px; left: 10px; transform: rotate(1deg); }
  .bridge { padding: 0 2px 18px; margin-bottom: 26px; }
  .statement { font-size: clamp(27px, 8.4vw, 40px); margin: 12px 0 14px; }
  .readout { font-size: 14.5px; padding: 10px 12px; }
  .sheets { margin-top: 60px; gap: 64px; padding: 0 6px 30px; }
  .lsheet { padding: 26px 26px 22px 30px; }
  .lsheet::before { background-size: 10px 30px; background-position: 4px 14px, calc(100% - 4px) 14px; background-image: radial-gradient(circle, #0B0A1C 0 3.2px, transparent 3.7px), radial-gradient(circle, #0B0A1C 0 3.2px, transparent 3.7px); }
  .plate { font-size: 46px; left: -12px; top: -30px; padding: 6px 12px 4px; }
  .lk { padding-left: 46px; font-size: 11.5px; }
  .lsheet h3 { font-size: 25px; }
  html:not(.pin) .lsheet-art { float: none; width: 100%; margin: 0 0 14px; }
  .rules li { grid-template-columns: 1fr; gap: 0; }
  .rack { margin-top: 64px; padding: 0 12px; }
  .rack-in { padding: 34px 20px 36px; }
  .ghost { display: none; }
  .bay { grid-template-columns: 1fr; }
  .bay li { border-left: 0 !important; border-top: 1px solid var(--line); padding: 20px 4px; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
  .bay li:first-child { border-top: 0; }
  .bay .jk { grid-row: span 2; margin: 8px 0 0; }
  .bay li .jk::after { display: none; }
  .hw-slot, .hw-knob { grid-template-columns: minmax(0, 1fr); }
  .hw-slot .hw-art, .hw-knob .hw-art { grid-row: auto; }
  .hw-slot h3, .hw-knob h3 { margin-top: 14px; }
  .open { margin-top: 64px; padding: 0 12px; }
  .open-risk .rack-head { grid-template-columns: 1fr 64px; column-gap: 16px; }
  .hazard { width: 64px; }
  .t-solder { position: static; display: block; width: max-content; max-width: 100%; margin: 18px 0 -8px; }
  .plates { grid-template-columns: 1fr; }
  .plates li { grid-column: auto !important; transform: none !important; }
  .pl-f { grid-template-columns: 1fr; gap: 6px; }
  .lines summary { grid-template-columns: 40px 1fr 16px; font-size: 16px; }
  .lines details p { padding: 0 6px 18px 50px; }
  .signoff { padding-top: 60px; }
  .lic.lsheet { padding: 34px 26px 30px 32px; }
  .t-lic { position: static; display: block; width: max-content; max-width: 100%; margin: 0 0 14px auto; transform: rotate(2deg); }
  .clauses li { grid-template-columns: 40px 1fr; }
  .spec div { grid-template-columns: 1fr; gap: 2px; }
  .doc-head h1 .sw, .dead-copy h1 .sw { font-stretch: 140%; }
  .tuner { gap: 12px; }
  .tuner output { min-width: 76px; font-size: 13.5px; }
}

@container desk (max-width: 1060px) {
  .legend { font-stretch: 122%; letter-spacing: .1em; }
}
@container desk (max-width: 860px) {
  .surface { --tilt: 3.5deg; }
  .surface { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 46px; }
  .m3 { grid-column: 2; grid-row: 2; } .m4 { grid-column: 1; grid-row: 2; }
  .m5 { grid-column: 1 / span 2; } .m6 { grid-column: 1; grid-row: 4; } .m7 { grid-column: 2; grid-row: 4; }
  .m2 .j-out { right: auto; top: auto; left: calc(50% - 7px); bottom: -7px; --dx: 0 !important; --dy: 1 !important; }
  .m3 .j-in { left: calc(50% - 7px); top: -7px; --dx: 0 !important; --dy: -1 !important; }
  .m3 .j-out { right: auto; left: -7px; --dx: -1 !important; }
  .m4 .j-in { left: auto; right: -7px; --dx: 1 !important; }
  .m2 .j-fee { bottom: auto; left: -7px; top: calc(100% - 30px); --dx: -1 !important; --dy: 0 !important; --k: 12; }
  .m5 .j-fee { top: -7px; left: calc(50% - 7px); --dx: 0 !important; --dy: -1 !important; --k: 12; }
  .m5 .j-out { right: auto; top: auto; left: calc(25% - 7px); bottom: -7px; --dx: 0 !important; --dy: 1 !important; }
  .m6 .j-in { left: calc(50% - 7px); top: -7px; --dx: 0 !important; --dy: -1 !important; }
  .m5 .j-rst, .m7 .j-rst { display: none; }
  .surface .t-follow { left: auto; right: 10px; top: -34px; }
  .surface .t-pot { left: auto; bottom: auto; right: 14px; top: -20px; transform: rotate(2deg); grid-row: 3; }
}
@container desk (max-width: 600px) {
  .surface { --tilt: 0deg; }
  .surface::before { inset: -12px -8px -4px; }
  .surface { column-gap: 26px; row-gap: 34px; padding-bottom: 14px; }
  .face { padding: 10px 10px 12px; }
  .legend { font-size: 9px; gap: 6px; letter-spacing: .1em; font-stretch: 150%; }
  .art { height: 70px; margin: 6px 0 0; }
  .m5 .art { height: 84px; }
  .mt { font-size: 14.5px; }
  .ml { display: none; }
  .j-in, .j-out { top: 50px; }
  .surface .t-follow { display: none; }
  .surface .t-pot { font-size: 15.5px; max-width: 210px; right: 8px; top: -22px; }
  .br-d { display: none; }
}

/* ---------- reduced motion: everything drawn, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .readout::after { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}