/* Legato farewell: "Neon arcade marquee" (design a1).
 * Self-hosted fonts (SIL OFL 1.1 / Apache 2.0), Latin subsets, see /fonts/LICENSES.txt */
@font-face{font-family:"Monoton";src:url("/fonts/monoton.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Righteous";src:url("/fonts/righteous.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Audiowide";src:url("/fonts/audiowide.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Orbitron";src:url("/fonts/orbitron.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Outfit";src:url("/fonts/outfit.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Neonderthaw";src:url("/fonts/neonderthaw.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Yellowtail";src:url("/fonts/yellowtail.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Theme tokens: NIGHT (default / dark) ---------- */
:root {
  --bg: #12052a;
  --bg-2: #1c0839;
  --sky-top: #0b0320;
  --sky-mid: #2a0b52;
  --sky-low: #5a1270;
  --star: rgba(255, 255, 255, .85);
  --sun-1: #ffe66d;
  --sun-2: #ffa03c;
  --sun-3: #ff3d81;
  --sun-4: #c2188f;
  --sun-glow: rgba(255, 61, 129, .55);
  --mtn-back: #3b1066;
  --mtn-front: #1f0740;
  --mtn-edge: #ff4fd8;
  --floor: #12052a;
  --grid: #ff2fd0;
  --grid-glow: rgba(255, 47, 208, .5);
  --horizon: #ff9de9;
  --text: #f6ecff;
  --muted: #d9c8f5;
  --kicker: #5ef2ff;
  --neon: #ff5ad9;
  --neon-glow: rgba(255, 90, 217, .7);
  --cyan: #5ef2ff;
  --chrome: linear-gradient(180deg, #ffffff 0%, #e9f6ff 30%, #8fe9ff 47%, #2b1a63 50%, #ff9df0 53%, #ffd2f6 75%, #ffffff 100%);
  --chrome-solid: #f3e6ff;
  --chrome-stroke: rgba(255, 255, 255, .0);
  --chrome-shadow: 0 0 .02em #fff, 0 .04em 0 #7b1fa2, 0 .08em .18em rgba(255, 47, 208, .55);
  --card: rgba(22, 7, 48, .82);
  --card-edge: linear-gradient(135deg, #ff4fd8, #8a5cff 50%, #5ef2ff);
  --card-shadow: 0 0 40px rgba(255, 79, 216, .22), 0 0 80px rgba(94, 242, 255, .12);
  --deck-1: #3a3155;
  --deck-2: #1c1630;
  --deck-text: #e3dbf5;
  --deck-edge: #5a4f80;
  --lcd-bg: #08201f;
  --lcd-text: #5ef2b0;
  --btn-bg: rgba(18, 5, 42, .7);
  --btn-text: #f6ecff;
  --btn-edge: #8a5cff;
  --focus: #5ef2ff;
  --link: #8ff3ff;
  --footer-bg: #0b0320;
}

/* ---------- Theme tokens: DAWN (light) ---------- */
:root[data-theme="light"] {
  --bg: #fbf1ff;
  --bg-2: #f4e6ff;
  --sky-top: #c9b8ff;
  --sky-mid: #f2c6f0;
  --sky-low: #ffd9c7;
  --star: rgba(255, 255, 255, .9);
  --sun-1: #fff3a8;
  --sun-2: #ffc28a;
  --sun-3: #ff8fb8;
  --sun-4: #e46bc0;
  --sun-glow: rgba(255, 170, 160, .6);
  --mtn-back: #b9a2ec;
  --mtn-front: #8f74d6;
  --mtn-edge: #ffffff;
  --floor: #f6e9ff;
  --grid: #b05cff;
  --grid-glow: rgba(176, 92, 255, .25);
  --horizon: #ffffff;
  --text: #25093f;
  --muted: #4a2a6b;
  --kicker: #5b1a8f;
  --neon: #b0127a;
  --neon-glow: rgba(255, 120, 200, .45);
  --cyan: #006c80;
  --chrome: linear-gradient(180deg, #2b0a57 0%, #4b1590 35%, #7a2bc2 48%, #f7e6ff 50%, #b0127a 53%, #6a137f 75%, #2b0a57 100%);
  --chrome-solid: #3a0d6e;
  --chrome-shadow: 0 .04em 0 rgba(255, 255, 255, .9), 0 .08em .2em rgba(176, 18, 122, .25);
  --card: rgba(255, 255, 255, .86);
  --card-edge: linear-gradient(135deg, #ff6fcf, #a57bff 50%, #4fd6ea);
  --card-shadow: 0 10px 40px rgba(140, 80, 200, .18);
  --deck-1: #f2eefa;
  --deck-2: #cfc6e4;
  --deck-text: #2e2050;
  --deck-edge: #a99cc9;
  --lcd-bg: #1d1240;
  --lcd-text: #8ff5c9;
  --btn-bg: rgba(255, 255, 255, .7);
  --btn-text: #25093f;
  --btn-edge: #8a5cff;
  --focus: #6a00d6;
  --link: #5b1a8f;
  --footer-bg: #efe0ff;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fbf1ff;
    --bg-2: #f4e6ff;
    --sky-top: #c9b8ff;
    --sky-mid: #f2c6f0;
    --sky-low: #ffd9c7;
    --star: rgba(255, 255, 255, .9);
    --sun-1: #fff3a8;
    --sun-2: #ffc28a;
    --sun-3: #ff8fb8;
    --sun-4: #e46bc0;
    --sun-glow: rgba(255, 170, 160, .6);
    --mtn-back: #b9a2ec;
    --mtn-front: #8f74d6;
    --mtn-edge: #ffffff;
    --floor: #f6e9ff;
    --grid: #b05cff;
    --grid-glow: rgba(176, 92, 255, .25);
    --horizon: #ffffff;
    --text: #25093f;
    --muted: #4a2a6b;
    --kicker: #5b1a8f;
    --neon: #b0127a;
    --neon-glow: rgba(255, 120, 200, .45);
    --cyan: #006c80;
    --chrome: linear-gradient(180deg, #2b0a57 0%, #4b1590 35%, #7a2bc2 48%, #f7e6ff 50%, #b0127a 53%, #6a137f 75%, #2b0a57 100%);
    --chrome-solid: #3a0d6e;
    --chrome-shadow: 0 .04em 0 rgba(255, 255, 255, .9), 0 .08em .2em rgba(176, 18, 122, .25);
    --card: rgba(255, 255, 255, .86);
    --card-edge: linear-gradient(135deg, #ff6fcf, #a57bff 50%, #4fd6ea);
    --card-shadow: 0 10px 40px rgba(140, 80, 200, .18);
    --deck-1: #f2eefa;
    --deck-2: #cfc6e4;
    --deck-text: #2e2050;
    --deck-edge: #a99cc9;
    --lcd-bg: #1d1240;
    --lcd-text: #8ff5c9;
    --btn-bg: rgba(255, 255, 255, .7);
    --btn-text: #25093f;
    --btn-edge: #8a5cff;
    --focus: #6a00d6;
    --link: #5b1a8f;
    --footer-bg: #efe0ff;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--text); color: var(--bg);
  padding: .75rem 1rem; border-radius: .5rem; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- Header ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(.75rem, 2vw, 1.25rem) clamp(1rem, 4vw, 2.5rem);
}
.brand {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 700;
  color: var(--text);
  display: inline-flex; align-items: center; gap: .6rem;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.toggle[hidden] { display: none; }
.toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; min-width: 44px; padding: .45rem .95rem .45rem .7rem;
  font: 700 .75rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--btn-text); background: var(--btn-bg);
  border: 1.5px solid var(--btn-edge); border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 14px rgba(138, 92, 255, .35), inset 0 0 10px rgba(138, 92, 255, .15);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: box-shadow .2s ease, transform .2s ease;
}
.toggle:hover { box-shadow: 0 0 22px rgba(255, 79, 216, .5), inset 0 0 10px rgba(138, 92, 255, .2); }
.toggle .led {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: conic-gradient(#ff4fd8 0 50%, #5ef2ff 50% 100%);
  box-shadow: 0 0 8px #ff4fd8;
}
.toggle[data-mode="dark"] .led { background: #ff4fd8; }
.toggle[data-mode="light"] .led { background: #ffc28a; box-shadow: 0 0 8px #ffc28a; }

/* ---------- Hero / sky ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: clamp(5rem, 8.5vw, 6.25rem);
  text-align: center;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 100%);
  overflow: hidden;
}
.stars {
  position: absolute; inset: 0 0 40% 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 42%, var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 26% 12%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 30%, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 8%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 22%, var(--star) 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 10%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 36%, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 16%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 40%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 55%, var(--star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 96% 62%, var(--star) 50%, transparent 51%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }

.hero-copy { position: relative; z-index: 3; padding: 0 1.25rem; }
.kicker {
  margin: 0 0 .9rem;
  font: 700 clamp(.72rem, .68rem + .25vw, .85rem)/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .3em; text-transform: uppercase; color: var(--kicker);
}
.kicker .play { display: inline-block; margin-right: .5em; color: var(--neon); }
h1 { margin: 0; line-height: .9; font-weight: 900; }
.chrome {
  display: block;
  font-family: "Arial Black", "Helvetica Neue", Impact, "Segoe UI Black", system-ui, sans-serif;
  font-weight: 900; font-style: italic;
  font-size: clamp(3.6rem, 1.4rem + 10vw, 8.5rem);
  letter-spacing: -.02em; text-transform: uppercase;
  padding: 0 .08em .06em;
  color: var(--chrome-solid);
  text-shadow: var(--chrome-shadow);
  transform: skewX(-6deg);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome {
    background: var(--chrome);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 .035em 0 var(--chrome-drop, #7b1fa2)) drop-shadow(0 0 .12em var(--grid-glow));
  }
}
:root[data-theme="light"] .chrome { --chrome-drop: rgba(255, 255, 255, .95); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .chrome { --chrome-drop: rgba(255, 255, 255, .95); } }

.neon {
  display: block; margin-top: .1em;
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
  font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4.25rem); letter-spacing: .02em;
  color: var(--neon);
  text-shadow: 0 0 .08em var(--neon-glow), 0 0 .35em var(--neon-glow);
  transform: rotate(-4deg);
  animation: flicker 6s linear 1.2s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: .78; } 94% { opacity: 1; } 96% { opacity: .85; } 97% { opacity: 1; }
}
.sub {
  margin: 1.1rem auto 0; max-width: 34ch;
  font: 600 clamp(.95rem, .9rem + .3vw, 1.1rem)/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  color: var(--muted); letter-spacing: .06em;
}

/* Sun + mountains */
.horizon-wrap {
  position: relative; z-index: 1;
  height: clamp(158px, 24.5vw, 302px);
  margin-top: clamp(1rem, 2.5vw, 2rem);
}
.sun-glow {
  position: absolute; left: 50%; bottom: -30%;
  width: clamp(360px, 60vw, 760px); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--sun-glow), transparent 70%);
  pointer-events: none;
}
.sun {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(220px, 34vw, 420px); aspect-ratio: 1;
  transform: translate(-50%, 28%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun-1) 0%, var(--sun-2) 32%, var(--sun-3) 62%, var(--sun-4) 88%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 40%, transparent 40% 41.5%,
    #000 41.5% 47%, transparent 47% 49.5%,
    #000 49.5% 54%, transparent 54% 57%,
    #000 57% 61%, transparent 61% 65%,
    #000 65% 68%, transparent 68%);
          mask-image: linear-gradient(180deg,
    #000 0 40%, transparent 40% 41.5%,
    #000 41.5% 47%, transparent 47% 49.5%,
    #000 49.5% 54%, transparent 54% 57%,
    #000 57% 61%, transparent 61% 65%,
    #000 65% 68%, transparent 68%);
}
.mountains {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 46%;
  display: block;
}
.mountains .back { fill: var(--mtn-back); }
.mountains .front { fill: var(--mtn-front); }
.mountains .edge { fill: none; stroke: var(--mtn-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .85; }

/* Grid floor */
.floor {
  position: relative; z-index: 2;
  height: clamp(120px, 13vw, 165px);
  background: var(--floor);
  overflow: hidden;
  border-top: 2px solid var(--horizon);
  box-shadow: 0 -6px 24px var(--grid-glow);
}
.grid-wrap {
  position: absolute; inset: 0; overflow: hidden;
  perspective: 220px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 45%, transparent 100%);
}
.grid {
  position: absolute; left: -60%; right: -60%; top: 0; height: 300%;
  transform-origin: 50% 0%;
  transform: rotateX(62deg);
  background-image:
    linear-gradient(var(--grid) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 64px 48px;
  background-position: 50% 0;
  animation: drive 1.6s linear infinite;
}
@keyframes drive { from { background-position: 50% 0; } to { background-position: 50% 48px; } }
.floor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--grid-glow) 0%, transparent 18%);
}

/* ---------- Notes section ---------- */
.notes {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.notes-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "letter deck" "tracks tracks";
  align-items: center;
}
.card {
  position: relative; border-radius: 18px;
  background: var(--card);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--card-shadow);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: var(--card-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.label {
  margin: 0 0 .6rem;
  font: 700 .75rem/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .28em; text-transform: uppercase; color: var(--cyan);
}
h2 {
  margin: 0 0 1rem;
  font-family: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; letter-spacing: -.01em;
}
.letter p { margin: 0 0 1rem; }
.letter .lead { font-size: 1.15em; font-weight: 600; }
.signoff {
  margin-top: 1.6rem !important;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); color: var(--neon);
}

/* ---------- Cassette deck ---------- */
.letter { grid-area: letter; }
.deck-area { grid-area: deck; display: flex; justify-content: center; }
.jcard {
  grid-area: tracks;
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .5rem 2.5rem; align-items: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
}
.jcard h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
.ejector {
  position: relative; width: min(100%, 330px);
  display: flex; flex-direction: column; align-items: center;
}
.slot-window {
  width: calc(100% + 48px); overflow: hidden;
  padding: 26px 24px 0;
  margin: 0 -24px -14px;
  position: relative; z-index: 1;
}
.cassette {
  position: relative; width: 100%; aspect-ratio: 10 / 6.3;
  border-radius: 12px;
  background: linear-gradient(160deg, #3a2d5c, #1d1535 60%, #140f26);
  border: 2px solid #0c0818;
  box-shadow: 0 0 0 1px #5a4a8a inset, 0 0 18px rgba(255, 79, 216, .45), 0 0 6px rgba(94, 242, 255, .35);
  transform: translateY(14%);
  animation: eject 1.3s cubic-bezier(.2, .9, .25, 1.15) .3s both;
}
@keyframes eject { from { transform: translateY(105%); } to { transform: translateY(14%); } }
.screw { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #8b7fb0; box-shadow: inset 0 0 0 1.5px #3a2d5c; }
.screw.s1 { top: 5px; left: 5px; } .screw.s2 { top: 5px; right: 5px; }
.screw.s3 { bottom: 5px; left: 5px; } .screw.s4 { bottom: 5px; right: 5px; }
.tape-label {
  position: absolute; left: 6%; right: 6%; top: 8%; height: 64%;
  border-radius: 6px;
  background:
    linear-gradient(180deg, transparent 0 66%, #ff4fd8 66% 71%, #ffa03c 71% 76%, #5ef2ff 76% 81%, transparent 81%),
    #fff4dc;
  color: #2a0b52;
}
.tape-title {
  position: absolute; left: 0; right: 0; top: 6%;
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: 0 6%;
  font: 900 clamp(.72rem, .6rem + .5vw, .9rem)/1.1 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .08em; white-space: nowrap;
}
.tape-title .side {
  font: 900 1.25em/1 "Arial Black", Impact, system-ui, sans-serif; color: #b0127a;
}
.tape-window {
  position: absolute; left: 22%; right: 22%; top: 30%; height: 30%;
  border-radius: 999px; background: #1a1230;
  box-shadow: inset 0 0 0 2px #0c0818, inset 0 0 12px rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6%;
}
.tape-window::before {
  content: ""; position: absolute; left: 30%; right: 30%; top: 22%; bottom: 22%;
  background: linear-gradient(90deg, #4a2f1e, #6b4026 50%, #4a2f1e); border-radius: 3px; opacity: .9;
}
.reel {
  position: relative; z-index: 1;
  height: 78%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, #1a1230 0 22%, transparent 23%),
    repeating-conic-gradient(#f6ecff 0 10deg, transparent 10deg 60deg),
    radial-gradient(circle, #f6ecff 0 48%, #d8cdee 49% 60%, #6b4026 61% 100%);
  animation: spin 2.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tape-bottom {
  position: absolute; left: 20%; right: 20%; bottom: 0; height: 18%;
  background: linear-gradient(180deg, #2b2147, #1a1430);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  border-top: 1px solid #5a4a8a;
}
.tape-bottom::before, .tape-bottom::after {
  content: ""; position: absolute; top: 38%; width: 9px; height: 9px; border-radius: 50%; background: #0c0818;
}
.tape-bottom::before { left: 26%; } .tape-bottom::after { right: 26%; }

.deck {
  position: relative; z-index: 2; width: calc(100% + 40px); max-width: calc(100vw - 2rem);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--deck-1), var(--deck-2));
  border: 1px solid var(--deck-edge);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  padding: 22px 18px 14px;
  color: var(--deck-text);
}
.deck-slot {
  position: absolute; left: 22px; right: 22px; top: 8px; height: 10px;
  border-radius: 6px; background: #05030c;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .2);
}
.deck-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lcd {
  flex: 1 1 auto; min-width: 0;
  background: var(--lcd-bg); color: var(--lcd-text);
  border-radius: 6px; padding: .4rem .6rem;
  font: 700 .72rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .7);
  text-shadow: 0 0 6px rgba(94, 242, 176, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.keys { display: flex; gap: 6px; flex: none; }
.key {
  width: 30px; height: 22px; border-radius: 4px;
  background: linear-gradient(180deg, #5a4f80, #2a2342);
  box-shadow: 0 2px 0 #120d22, inset 0 1px 0 rgba(255, 255, 255, .25);
  display: grid; place-items: center;
}
.key svg { width: 10px; height: 10px; fill: #f6ecff; }
.key.eject { background: linear-gradient(180deg, #ff6fdc, #b0127a); }
.vu { display: flex; gap: 3px; align-items: flex-end; height: 18px; margin-top: 10px; }
.vu i {
  display: block; flex: 1; border-radius: 2px;
  background: linear-gradient(0deg, #5ef2ff, #ff4fd8);
  height: 30%;
}
.vu i:nth-child(3n) { height: 70%; } .vu i:nth-child(4n+1) { height: 45%; } .vu i:nth-child(5n) { height: 90%; }
.vu i:nth-child(7n+2) { height: 55%; }

/* Liner notes (J-card) */
.jcard-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1.5rem; }
.jcard-head h2 { margin-bottom: 0; }
.tracks {
  list-style: none; margin: 0; padding: 0; counter-reset: trk;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem;
}
.tracks li {
  counter-increment: trk;
  display: flex; align-items: baseline; gap: .9rem;
  padding: .45rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  font-weight: 600;
}
.tracks li::before {
  content: "A" counter(trk);
  font: 700 .8rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  color: var(--cyan); letter-spacing: .1em; min-width: 2.2em;
}
.tracks li.b { border-bottom: 0; color: var(--neon); font-style: italic; }
.tracks li.b::before { content: "B1"; color: var(--neon); }
.tracks li .now {
  margin-left: auto; font: 700 .68rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .16em; text-transform: uppercase; font-style: normal;
  padding: .3rem .45rem; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid color-mix(in srgb, var(--btn-edge) 50%, transparent);
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  font: 600 .85rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  color: var(--muted);
}
.footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
}
.site-footer p { margin: 0; }
.site-footer a {
  color: var(--link); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
}
.site-footer a:hover { color: var(--text); }
.site-footer a svg { width: 14px; height: 14px; flex: none; }
.footer-links, .footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; }
.footer-meta .sep { opacity: .7; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .notes-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "letter" "deck" "tracks"; }
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .jcard { grid-template-columns: minmax(0, 1fr); }
  .jcard-head h2 { margin-bottom: .4rem; }
}
@media (max-width: 480px) {
  .brand span.full { display: none; }
  .toggle { padding: .45rem .75rem .45rem .6rem; letter-spacing: .1em; }
  .deck { width: 100%; max-width: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .lcd { letter-spacing: .06em; font-size: .68rem; padding: .4rem .5rem; }
  .key { width: 26px; }
  .notes-inner { gap: 1.5rem; }
}

/* ---------- a1 typography: Neon arcade marquee ---------- */
:root {
  --f-display: Monoton, Righteous, "Arial Black", Impact, system-ui, sans-serif;
  --f-head: Righteous, "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --f-label: Audiowide, Orbitron, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-lcd: Orbitron, Audiowide, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-body: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-neon: Neonderthaw, "Mr Dafoe", Yellowtail, "Brush Script MT", cursive;
  --f-script: Yellowtail, "Mr Dafoe", "Brush Script MT", cursive;
}
body { font-family: var(--f-body); font-weight: 400; }
.mono { font-family: var(--f-label); }
.brand { font-family: var(--f-label); font-weight: 400; letter-spacing: .26em; }
.toggle { font: 400 .72rem/1 var(--f-label); letter-spacing: .12em; }
.kicker { font: 400 clamp(.72rem, .68rem + .25vw, .85rem)/1.4 var(--f-label); letter-spacing: .26em; }
.chrome {
  font-family: var(--f-display); font-weight: 400; font-style: normal;
  font-size: clamp(3.9rem, 1.2rem + 10.5vw, 9rem);
  line-height: 1; letter-spacing: .02em;
  padding: .04em .06em .02em;
  transform: none;
}
.neon {
  font-family: var(--f-neon); font-style: normal; font-weight: 400;
  font-size: clamp(3.6rem, 1.9rem + 6.2vw, 6.5rem); line-height: 1; letter-spacing: 0;
  margin-top: .02em;
  text-shadow: 0 0 .02em #fff, 0 0 .05em #fff, 0 0 .1em var(--neon), 0 0 .2em var(--neon-glow), 0 0 .45em var(--neon-glow);
  transform: rotate(-5deg);
}
.sub { font: 400 clamp(.85rem, .8rem + .3vw, 1rem)/1.5 var(--f-label); letter-spacing: .12em; margin-top: .6rem; }
.label { font: 400 .74rem/1.3 var(--f-label); letter-spacing: .24em; }
h2 {
  font-family: var(--f-head); font-weight: 400; font-style: normal;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); line-height: 1.1; letter-spacing: .02em;
}
.jcard h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.55rem); letter-spacing: .01em; white-space: nowrap; }
.letter .lead { font-weight: 600; letter-spacing: -.005em; }
.signoff {
  font-family: var(--f-script); font-style: normal; font-weight: 400;
  font-size: clamp(1.6rem, 1.35rem + .8vw, 2rem); line-height: 1.2;
  text-shadow: 0 0 .25em var(--neon-glow);
}
.tape-title { font: 400 clamp(.68rem, .58rem + .45vw, .85rem)/1.1 var(--f-label); letter-spacing: .06em; }
.tape-title .side { font: 400 1.35em/1 var(--f-head); }
.lcd { font: 700 .7rem/1.2 var(--f-lcd); letter-spacing: .14em; }
.tracks li { font-weight: 500; }
.tracks li::before { font: 400 .78rem/1 var(--f-label); letter-spacing: .08em; }
.tracks li.b { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.3em; line-height: 1.2; }
.tracks li.b::before { font-size: .6em; }
.tracks li .now { font: 400 .64rem/1 var(--f-label); letter-spacing: .14em; }
.site-footer { font: 400 .8rem/1.5 var(--f-label); letter-spacing: .08em; }
@media (max-width: 480px) {
  .toggle { letter-spacing: .08em; }
  .lcd { letter-spacing: .06em; font-size: .64rem; }
}

/* ---------- 404 page ---------- */
.hero-404 .neon { font-size: clamp(2.8rem, 1.6rem + 5vw, 5.5rem); margin-top: .12em; }
.hero-404 .sub { max-width: 40ch; margin-top: 1rem; }
.back-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 1.4rem; padding: .6rem 1.2rem;
  font: 400 .78rem/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--btn-text); background: var(--btn-bg);
  border: 1.5px solid var(--btn-edge); border-radius: 999px;
  text-decoration: underline; text-underline-offset: 3px;
  box-shadow: 0 0 14px rgba(138, 92, 255, .35), inset 0 0 10px rgba(138, 92, 255, .15);
  transition: box-shadow .2s ease;
}
.back-link:hover { box-shadow: 0 0 22px rgba(255, 79, 216, .5), inset 0 0 10px rgba(138, 92, 255, .2); }

/* ---------- Reduced motion: show final state, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}