/* song.css: the song page (song.html, js/pages/song.js, song-wall.js). ONE SONG, ONE WORLD.
   Loaded after hero.css (its tokens, the header fly-ins, the seam cards, the menu and the in-world player stay as they
   are). An Architect song is the notebook world (paper, the notebook page, the cassette, a paste-up wall); a
   Ghostwriter song is the display world (near-black, the screen, the deck, a rim-lit holographic wall).
   <html data-side> = data-world = the song's side, data-stack = the stacked layout (under 1024 px), data-state =
   loading | ready | missing, data-audio, data-sync (fresh | stale | none | locked). --lx = the living line (CSS px),
   --low / --beat / --prog = the audio, per frame. Two curves only: punch (LL) and breath (GW).
   The radio (round 8): data-tuned (the page's song is the radio's), data-swap (glitch | paint | move | fade while the page
   follows the radio to its next song). Round 9: arriving plays the page's song through the radio; the lyrics object
   starts empty and the words appear only as the song reaches them (data-mode="live", .is-todo unseen); data-await on the
   object: "press play" on it (the song is not playing and nothing is written, or the browser holds the sound back).
   Heat (2026-09-26): --low / --beat / --prog are registered as NOT inherited and song.js sets them on the few elements
   that read them (the margin rule, the tape's fill and head, the screen's bezel and gutter, the deck's power light, the
   tag's bars), so a beat restyles those elements, not the whole page. A pseudo-element that reads one takes it with an
   explicit inherit. The screen's big glow is drawn once at full strength and faded by opacity (the same pixels). */

@property --low { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --beat { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --prog { syntax: '<number>'; inherits: false; initial-value: 0; }

@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin.7a0049db.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin-ext.93b3fdd6.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --pad: clamp(20px, 3.2vw, 56px);
  --rule: 44px;                /* the notebook's line spacing */
  --margin-x: 64px;            /* the notebook's margin rule, from the sheet's left edge */
  --low: 0; --beat: 0; --prog: 0;
  --nb-paper: #fbfaf4;
  --nb-rule: rgba(88, 124, 168, 0.3);
  --nb-ink: #17181c;
  --gw-text: #c3e8ee;
  --gw-hot: #f2feff;
  /* the stage: the lyrics object (the hero) and the side column (the note, the player) */
  --hero-w: clamp(34rem, 45vw, 52rem);
  --side-w: clamp(17rem, 21vw, 23rem);
  --gap: clamp(1.6rem, 3.4vw, 4rem);
  --col-w: calc(var(--hero-w) + var(--gap) + var(--side-w));
  --col-l: clamp(1.5rem, 8.5vw, 11rem);
}
html[data-side="gw"] { --col-l: max(var(--gutter), calc(100% - clamp(1.5rem, 6.5vw, 10rem) - var(--col-w))); --hero-w: clamp(34rem, 47vw, 54rem); }
html[data-page="song"] { background: var(--night); }

/* the ground under the canvas: the world's inside, until the worlds draw (and when WebGL is missing) */
.sp-ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--paper) var(--grain); }
html[data-side="gw"] .sp-ground { background: radial-gradient(120% 80% at 70% 20%, #0b1418, #050708 60%); }
html[data-page="song"] .stage { z-index: 0; opacity: 0; transition: opacity 420ms var(--breath); }
html[data-gl="1"] .stage { opacity: 1; }

/* ---------------------------------------------------------------- the scroller: slim top fade, so the mark stays */
.sp-scroller {
  position: fixed; inset: 0; z-index: 2;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; scrollbar-width: none;
  touch-action: pan-y pinch-zoom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 74px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 74px);
  transition: opacity 240ms var(--breath), visibility 0s linear 0s;
}
.sp-scroller::-webkit-scrollbar { display: none; }
.sp-page { position: relative; display: flow-root; overflow-x: clip; padding-bottom: 12vh; }
.sp-page > :not(.sp-wall):not(.nb-paint) { position: relative; z-index: 2; }
html[data-menu="opening"] .sp-scroller, html[data-menu="open"] .sp-scroller, html[data-menu="closing"] .sp-scroller,
html[data-vp="opening"] .sp-scroller, html[data-vp="open"] .sp-scroller, html[data-vp="closing"] .sp-scroller {
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--breath), visibility 0s linear 200ms;
}
html[data-menu="opening"] .sp-dock, html[data-menu="open"] .sp-dock, html[data-menu="closing"] .sp-dock,
html[data-vp="opening"] .sp-dock, html[data-vp="open"] .sp-dock, html[data-vp="closing"] .sp-dock { opacity: 0 !important; pointer-events: none; }
html[data-vp="opening"] .sp-ui, html[data-vp="open"] .sp-ui, html[data-vp="closing"] .sp-ui { opacity: 0; }

/* ---------------------------------------------------------------- the top bar: slim, the mark and the way back (the
   shell's, hero.css "the way back": its arrow is this page's round-13 arrow, its Architect chip this page's) */
.sp-ui .top { top: max(14px, env(safe-area-inset-top)); }

/* ---------------------------------------------------------------- the head: meta row and the title, over the stage */
.sp-head { margin: calc(max(14px, env(safe-area-inset-top)) + 70px) 0 clamp(1.2rem, 2.6vh, 2.2rem) var(--col-l); width: min(var(--col-w), calc(100% - var(--col-l) - var(--gutter))); max-width: none;
  translate: none; align-items: stretch; text-align: left; }
.sp-head .ch-w { justify-self: start; }
.sp-head .side { text-align: left; }
.sp-title { font-size: var(--tsize, clamp(4rem, 8vw, 8rem)); text-align: left; }
html[data-side="ll"] .sp-title .w-ll { color: var(--nb-ink); }
/* the wall measures the title at rest, whatever moment of its fly-in it measures in (song.js titleLines, one task) */
html[data-measure="1"] .sp-title .w-ll { transform: none !important; }
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1.4rem; margin-bottom: 1.1rem; justify-content: flex-start; width: 100%; min-width: 0; }
.sp-meta > * { justify-self: auto; }
.sp-meta b { font-weight: 700; letter-spacing: 0.2em; }
html[data-side="ll"] .sp-meta { color: #4a4740; }
html[data-side="ll"] .sp-meta-tag b { color: #b23a00; }
html[data-side="gw"] .sp-meta { color: var(--gw-dim); }
html[data-side="gw"] .sp-meta-tag b { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.7); }
.sp-meta-id { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.4rem; min-width: 0; }
/* the Architect's release line is a printed paper strip: the world's paint strikes behind the head (the canvas, on the
   beat) never cross the date (round 8) */
html[data-side="ll"] .sp-meta-id {
  position: relative; padding: 0.56rem 0.9rem 0.5rem 0.8rem; margin: -0.56rem 0 -0.5rem -0.8rem;
  background: var(--nb-paper) var(--grain); background-size: auto, 160px 160px; rotate: -0.5deg;
  clip-path: polygon(0.8% 14%, 2.2% 0, 34% 3%, 71% 0, 98.6% 4%, 100% 38%, 99.2% 100%, 62% 95%, 24% 100%, 1.2% 97%, 0 62%);
}
.sp-meta-wall { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.sp-shuffle { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: inherit; cursor: pointer; }
.sp-shuffle .ic { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ease-d) var(--ease); }
.sp-shuffle:hover .ic, .sp-shuffle:focus-visible .ic { transform: rotate(-14deg) scale(1.12); }
html[data-side="ll"] .sp-shuffle { color: var(--nb-ink); background: var(--nb-paper); border: 1.5px solid var(--nb-ink); box-shadow: 3px 3px 0 var(--p-yellow); transition: transform 140ms var(--punch), box-shadow 140ms var(--punch); }
html[data-side="ll"] .sp-shuffle:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--p-magenta); }
html[data-side="ll"] .sp-shuffle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--p-magenta); }
html[data-side="gw"] .sp-shuffle { color: var(--gw-fg); border-radius: 6px; background: rgba(0, 229, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.35); transition: box-shadow var(--d-mid) var(--breath), color var(--d-mid) var(--breath); }
html[data-side="gw"] .sp-shuffle:hover, html[data-side="gw"] .sp-shuffle:focus-visible { color: var(--gw-hot); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 18px rgba(0, 229, 255, 0.35); }
.sp-meta-wall .draft-tag { margin: 0; }
html[data-side="ll"] .sp-meta-wall .draft-tag { color: #9a3300; }
html[data-side="gw"] .sp-meta-wall .draft-tag { color: var(--cyan); }

/* ---------------------------------------------------------------- the awards (track.awards): a badge each under the title,
   linking to the press page. The Architect's: a sticker of paper with a rubber stamp on it (the ink worn in patches,
   multiplied into the paper), slapped on with PUNCH once the title has landed. The Ghostwriter's: a lit tag on the
   screen (a cyan rim, the words glowing), switching on in hard steps once the title has flickered on. 'Name (Detail)'
   reads as two lines. Reduce Motion: a 200 ms fade. */
.sp-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; margin-top: clamp(0.9rem, 2vh, 1.3rem); }
.sp-awards[hidden] { display: none; }
.sp-award { position: relative; display: inline-flex; text-decoration: none; }
.sp-award-in { display: inline-flex; align-items: center; gap: 0.6rem; }
.sp-award-w { display: grid; gap: 0.28rem; text-align: left; }
.sp-award-m { text-transform: uppercase; white-space: nowrap; }
.sp-award-s { text-transform: uppercase; white-space: nowrap; }
.sp-award-ic { flex: none; width: 0.95rem; height: 0.95rem; fill: currentColor; }
html[data-side="ll"] .sp-award {
  --stamp: #b3261e;
  padding: 0.34rem; background: #fdfbf3 var(--grain); background-size: auto, 160px 160px; rotate: -2.6deg;
  clip-path: polygon(0.6% 3%, 3% 0.4%, 97.4% 0, 100% 2.6%, 99.5% 97.2%, 97% 100%, 2.4% 99.4%, 0 96%);
  filter: drop-shadow(0 1px 0 rgba(11, 11, 12, 0.1)) drop-shadow(0 8px 10px rgba(11, 11, 12, 0.28));
  transition: rotate 160ms var(--punch), translate 160ms var(--punch);
}
html[data-side="ll"] .sp-award-in {
  padding: 0.42rem 0.8rem 0.36rem 0.62rem; color: var(--stamp); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: -5px;
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.4 2.75'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3.4 2.75'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  -webkit-mask-size: 140px 140px; mask-size: 140px 140px;
}
html[data-side="ll"] .sp-award-m { font-family: var(--display); font-size: 1.22rem; line-height: 0.9; letter-spacing: 0.05em; }
html[data-side="ll"] .sp-award-s { font-family: var(--mono); font-size: 0.54rem; font-weight: 700; line-height: 1; letter-spacing: 0.26em; }
html[data-side="ll"] .sp-award:nth-child(2n) { rotate: 1.8deg; --stamp: #7a1fa2; }
html[data-side="ll"] .sp-award:hover, html[data-side="ll"] .sp-award:focus-visible { rotate: 0deg; translate: 0 -2px; }
html[data-side="ll"] .sp-award:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 4px; }
html[data-side="gw"] .sp-award {
  padding: 0.5rem 0.85rem 0.46rem 0.66rem; border-radius: 3px; color: var(--gw-fg);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px), rgba(0, 229, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.2);
  transition: box-shadow var(--d-mid) var(--breath), color var(--d-mid) var(--breath);
}
html[data-side="gw"] .sp-award-ic { color: var(--cyan); filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.9)); }
html[data-side="gw"] .sp-award-m { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; line-height: 1.1; letter-spacing: 0.22em; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
html[data-side="gw"] .sp-award-s { font-family: var(--mono); font-size: 0.5rem; line-height: 1.1; letter-spacing: 0.22em; color: var(--gw-dim); }
html[data-side="gw"] .sp-award:hover, html[data-side="gw"] .sp-award:focus-visible { color: var(--gw-hot); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 26px rgba(0, 229, 255, 0.42); }
html[data-side="gw"] .sp-award:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* the arrival: after the title (the header's own state: fxHeader data-ll / data-gw) */
html[data-side="ll"] .sp-head.fx-root:not([data-ll="done"]) .sp-award { opacity: 0; scale: 1.7; rotate: 9deg; }
html[data-side="ll"] .sp-head.fx-root[data-ll="done"] .sp-award { transition: opacity 90ms linear, scale 420ms var(--punch), rotate 420ms var(--punch), translate 160ms var(--punch); }
html[data-side="ll"] .sp-head.fx-root[data-ll="done"] .sp-award:nth-child(2) { transition-delay: 120ms, 120ms, 120ms, 0ms; }
html[data-side="gw"] .sp-head.fx-root:not([data-gw="done"]) .sp-award { opacity: 0; }
html[data-side="gw"] .sp-head.fx-root[data-gw="done"] .sp-award { animation: spAwardOn 560ms steps(1, end) 120ms both; }
@keyframes spAwardOn { 0% { opacity: 0; } 18% { opacity: 1; } 30% { opacity: 0.2; } 44% { opacity: 1; } 70% { opacity: 0.65; } 100% { opacity: 1; } }
html[data-rm="1"] .sp-head.fx-root .sp-award { scale: none; transition: opacity 200ms linear; }
html[data-rm="1"][data-side="ll"] .sp-head.fx-root:not([data-ll="done"]) .sp-award { rotate: -2.6deg; }

/* ---------------------------------------------------------------- the stage: the hero object and the side column */
.sp-stage {
  display: grid; grid-template-columns: var(--hero-w) var(--side-w); column-gap: var(--gap); align-items: start;
  margin-left: var(--col-l); width: var(--col-w);
}
.sp-hero { grid-column: 1; grid-row: 1; min-width: 0; position: relative; }
.sp-side { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: clamp(1.4rem, 3vh, 2.4rem); align-content: start; padding-top: 0.6rem; position: relative; }
html[data-side="gw"] .sp-stage { grid-template-columns: var(--side-w) var(--hero-w); }
html[data-side="gw"] .sp-hero { grid-column: 2; }
html[data-side="gw"] .sp-side { grid-column: 1; padding-top: 1.4rem; }

/* ================================================================ LL: the note, handwritten on a sticky note */
.note-ll {
  position: relative; display: block; margin: 0 0.4rem 0 0.8rem;
  padding: 0.95rem 1.4rem 1.05rem 1.3rem;
  background: #fff3b8 var(--grain); background-size: auto, 160px 160px;
  color: var(--nb-ink); font-family: var(--hand); font-weight: 500; font-size: 1.62rem; line-height: 1.14;
  rotate: 2.2deg;
  box-shadow: 0 12px 20px -12px rgba(40, 30, 8, 0.55), 6px 6px 0 var(--p-magenta);
  clip-path: polygon(0 2%, 8% 0, 22% 1%, 40% 0, 61% 2%, 80% 0, 100% 1%, 99% 51%, 100% 98%, 84% 100%, 62% 98%, 40% 100%, 20% 98%, 1% 100%, 0 52%);
}
.note-ll::before { content: ''; position: absolute; left: 38%; top: -8px; width: 92px; height: 24px; rotate: -4deg; background: rgba(236, 229, 205, 0.74); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.note-ll .note-k { display: block; font-family: var(--mono); font-weight: 600; font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: #8a5a00; margin-bottom: 0.35rem; }
.note-ll .nw { display: inline-block; }
html[data-rm="0"] .note-ll.is-writing .nw { clip-path: inset(-30% 100% -40% 0); animation: nwWrite var(--wd, 220ms) linear var(--wdel, 0ms) forwards; }
@keyframes nwWrite { to { clip-path: inset(-30% -10% -40% -10%); } }

/* ================================================================ LL: the notebook page (the hero) */
.nb { position: relative; }
.nb-paint { position: absolute; z-index: 0 !important; pointer-events: none; }
.nb-paint .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.nb-sheet {
  position: relative;
  background: var(--nb-paper) var(--grain); background-size: auto, 160px 160px;
  border-radius: 2px 2px 3px 3px;
  padding: 1.2rem 1.6rem 1.5rem calc(var(--margin-x) + 20px);
  rotate: -0.6deg;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 32px 46px -28px rgba(40, 28, 8, 0.55), 0 2px 10px rgba(40, 28, 8, 0.08);
}
.nb-under { position: absolute; inset: 12px -10px -12px 16px; background: #f1ede2 var(--grain); background-size: auto, 160px 160px; rotate: 2deg; box-shadow: 0 18px 30px -20px rgba(40, 28, 8, 0.5); border-radius: 2px; }
.nb-rule {                      /* the margin rule: the line, ink; it thickens a hair on the beat */
  position: absolute; top: 0; bottom: 0; left: var(--margin-x); width: 2px; z-index: 1;
  background: var(--nb-ink); box-shadow: 0.5px 0 0 rgba(11, 11, 12, 0.35);
  transform: scaleX(calc(1 + var(--beat) * 0.9)); transform-origin: 50% 50%;
}
.nb-holes {
  position: absolute; left: 20px; top: 0; bottom: 0; width: 18px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #d9d5c9 0 6.5px, rgba(0, 0, 0, 0.18) 7px, transparent 8px) 0 14% / 18px 18px no-repeat,
              radial-gradient(circle at 50% 50%, #d9d5c9 0 6.5px, rgba(0, 0, 0, 0.18) 7px, transparent 8px) 0 50% / 18px 18px no-repeat,
              radial-gradient(circle at 50% 50%, #d9d5c9 0 6.5px, rgba(0, 0, 0, 0.18) 7px, transparent 8px) 0 86% / 18px 18px no-repeat;
}
.nb-tape { position: absolute; z-index: 3; width: 104px; height: 28px; background: rgba(236, 229, 205, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); pointer-events: none;
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 18%); }
.nb-tape--a { left: -30px; top: 20px; rotate: -38deg; }
.nb-tape--b { right: -34px; top: -6px; rotate: 32deg; }   /* over the corner, clear of the title */
.nb-headrow {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(23, 24, 28, 0.5);
  padding-bottom: 0.5rem; margin-bottom: 0.2rem; border-bottom: 1.5px solid rgba(214, 70, 70, 0.45);
}
.nb-field b { font-family: var(--hand); font-weight: 600; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--nb-ink); margin-left: 0.5rem; }
.nb-field--t { text-align: right; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 0.3em 0.35em 0.3em 0; margin: -0.3em -0.1em -0.3em 0; }   /* room for the hand's overhang and descenders */
.sync-note { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.nb .sync-note { color: #9a3300; }
.nb .sync-note .draft-tag { color: #9a3300; margin: 0; }

.nb-win {
  position: relative; height: var(--win-h, clamp(360px, calc(100svh - 360px), 760px));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(23, 24, 28, 0.35) transparent;
  margin-right: -0.6rem; padding-right: 0.6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
}
.nb-win:focus-visible { outline: 2px dashed var(--nb-ink); outline-offset: 4px; }
.nb-text {
  position: relative; min-height: 100%;
  padding: calc(var(--rule) * 0.45) 0 calc(var(--rule) * 2.5);
  font-family: var(--hand); font-weight: 500; font-size: 1.95rem; line-height: var(--rule); color: var(--nb-ink);
  background: linear-gradient(to bottom, transparent calc(100% - 1.25px), var(--nb-rule) calc(100% - 1.25px)) 0 calc(var(--rule) * 0.45 + 9px) / 100% var(--rule) repeat-y;
  font-kerning: normal;
}
.nb-st { margin: 0 0 var(--rule); }
.nb-l { margin: 0; translate: var(--jx, 0) 0; }
.nb-lt { box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.12em; margin: 0 -0.12em; }
.nb .lw { position: relative; top: var(--jy, 0); }
/* live: the words are written as they are sung */
.nb[data-mode="live"] .lw.is-todo { visibility: hidden; }
.nb[data-mode="live"] .lw.is-act { clip-path: inset(-45% calc(100% - var(--p, 0) * 112%) -55% calc(var(--p, 0) * -14%)); }
.nb .lw.is-fresh { color: #000; text-shadow: 0 0 0.6px rgba(0, 0, 0, 0.55); }
/* the current line (reduced motion): a highlighter stroke */
.nb-l.is-now .nb-lt { background: linear-gradient(transparent 52%, rgba(255, 210, 63, 0.82) 52%, rgba(255, 210, 63, 0.82) 90%, transparent 90%); }
.nb-pen { position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 260ms linear; will-change: transform; }
.nb-pen svg { position: absolute; left: 0; bottom: 0; width: 64px; height: 64px; overflow: visible; }
.nb[data-mode="live"][data-pen="1"] .nb-pen { opacity: 1; }
.nb.is-turning .nb-text { animation: nbTurn 520ms var(--punch); }
@keyframes nbTurn { 0% { opacity: 1; transform: none; } 40% { opacity: 0; transform: translateY(-18px) rotate(-0.8deg); } 41% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.nb-empty { padding: calc(var(--rule) * 1) 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; line-height: var(--rule); color: rgba(23, 24, 28, 0.62); }
.nb-empty b { display: block; font-family: var(--hand); font-size: 2.1rem; letter-spacing: 0; text-transform: none; color: var(--nb-ink); }
.nb-empty .draft-tag { color: #9a3300; }

/* ================================================================ LL: the cassette */
.tape { position: relative; display: grid; gap: 1rem; }
.tape-body { position: relative; rotate: 3deg; filter: drop-shadow(0 16px 14px rgba(30, 20, 0, 0.32)); margin: 0 -0.6rem 0 0.4rem; }
.tape-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-shell { fill: #f1ede3; stroke: var(--nb-ink); stroke-width: 4; }
.t-shell2 { fill: none; stroke: rgba(11, 11, 12, 0.14); stroke-width: 2; }
.t-label { fill: #fbfaf4; stroke: var(--nb-ink); stroke-width: 2.5; }
.t-lines line { stroke: rgba(88, 124, 168, 0.35); stroke-width: 1.2; }
.t-side { font-family: var(--display); font-size: 40px; fill: var(--nb-ink); }
.t-title { font-family: var(--hand); font-weight: 700; font-size: 34px; fill: var(--nb-ink); }
.t-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 2.4px; fill: #6a665d; text-transform: uppercase; }
.t-win { fill: #1c1814; stroke: var(--nb-ink); stroke-width: 2.5; }
.t-glass { fill: url(#t-glass); }
.t-pack { fill: #3b2a1c; }
.t-pack-hi { fill: none; stroke: rgba(255, 220, 180, 0.12); stroke-width: 2; }
.t-hub-ring { fill: #f7f4ec; stroke: var(--nb-ink); stroke-width: 2; }
.t-hub-tooth { fill: var(--nb-ink); }
.t-screw { fill: #d8d3c6; stroke: var(--nb-ink); stroke-width: 1.5; }
.t-screw-x { stroke: var(--nb-ink); stroke-width: 1.4; }
.t-foot { fill: #e7e2d6; stroke: var(--nb-ink); stroke-width: 2.5; }
.t-hole { fill: var(--nb-ink); }
.tape-ctl { display: grid; gap: 0.85rem; padding: 0.3rem 0.2rem 0.4rem; }
.tape-scrub { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: 0.3rem 0; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.tape-scrub:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 4px; }
.tape-counter { display: inline-flex; align-items: center; gap: 2px; justify-self: start; padding: 4px 6px; background: var(--nb-ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--p-orange); rotate: -1deg; }
.tape-counter .dr { position: relative; display: block; width: 0.95em; height: 1.3em; overflow: hidden; background: linear-gradient(#2a2a2e, #f4f1ea 22%, #fbfaf4 50%, #f4f1ea 78%, #2a2a2e); border-radius: 1px; font-family: var(--display); font-size: 1.55rem; line-height: 1.3em; color: var(--nb-ink); text-align: center; }
.tape-counter .dr i { position: absolute; left: 0; right: 0; top: 0; display: grid; font-style: normal; transform: translateY(calc(var(--d, 0) * -1.3em)); transition: transform 360ms var(--punch); }
.tape-counter .dr i b { display: block; height: 1.3em; font-weight: 400; }
.tape-counter .sep { color: #fbfaf4; font-family: var(--display); font-size: 1.4rem; padding: 0 1px; }
html[data-rm="1"] .tape-counter .dr i { transition: none; }
.tape-path { position: relative; display: block; height: 14px; }
.tape-path::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(23, 24, 28, 0.22); }
.tape-fill { position: absolute; left: 0; top: 5px; height: 4px; width: 100%; background: var(--nb-ink); transform: scaleX(var(--prog)); transform-origin: 0 50%; }
.tape-head { position: absolute; top: 0; left: calc(var(--prog) * 100%); width: 14px; height: 14px; margin-left: -7px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--p-magenta); box-shadow: 0 0 0 2px var(--nb-ink); }

/* the keys: a cassette deck's piano keys (LL), flat lit keys (GW) */
.keys { display: flex; gap: 0.5rem; }
.key { position: relative; display: grid; place-items: center; width: 3rem; height: 2.6rem; cursor: pointer; }
.key svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.key .i-pause { display: none; }
html[data-sp-playing="1"] .key--pp .i-play { display: none; }
html[data-sp-playing="1"] .key--pp .i-pause { display: block; }
.keys--ll .key { background: #fbfaf4; color: var(--nb-ink); border: 2px solid var(--nb-ink); border-radius: 3px 3px 6px 6px; box-shadow: 0 4px 0 var(--nb-ink); transition: transform 120ms var(--punch), box-shadow 120ms var(--punch), background-color var(--d-hit) linear; }
.keys--ll .key--pp { width: 4.2rem; background: var(--p-yellow); }
.keys--ll .key:hover { background: var(--p-orange); }
.keys--ll .key--pp:hover { background: var(--p-magenta); }
.keys--ll .key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--nb-ink); }
.keys--ll .key:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 4px; }

/* no audio: a quiet line */
.quiet { font-size: 0.9rem; line-height: 1.5; }
.quiet .draft-tag { margin-left: 0.6em; }
.quiet--ll { font-family: var(--hand); font-size: 1.55rem; line-height: 1.15; color: var(--nb-ink); padding: 0.5rem 0.9rem; background: var(--nb-paper); border: 1.5px dashed rgba(23, 24, 28, 0.45); rotate: -1.2deg; justify-self: start; }
.quiet--ll .draft-tag { color: #9a3300; }
.quiet--gw { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gw-dim); padding: 0.7rem 0.9rem; border-left: 2px solid rgba(0, 229, 255, 0.5); background: #03070a; }
.quiet--gw .draft-tag { color: var(--cyan); }

/* ================================================================ GW: the note, typed */
.note-gw {
  position: relative; display: block;
  padding: 0.95rem 1.15rem 1.05rem; border-radius: 6px;
  background: linear-gradient(180deg, #081012, #040709);
  border: 1px solid rgba(0, 229, 255, 0.22); box-shadow: inset 0 2px 0 rgba(0, 229, 255, 0.4), 0 16px 32px -18px #000;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.7; color: var(--gw-text); text-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}
.note-gw .note-k { display: block; font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.3rem; text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
.note-gw .note-k::before { content: '> '; }
.note-gw .note-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--cyan); box-shadow: 0 0 6px var(--cyan), 0 0 14px rgba(0, 229, 255, 0.5); animation: blink 1.06s steps(1, end) infinite; }
html[data-rm="1"] .note-gw .note-caret { animation: none; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ================================================================ GW: the screen (the hero) */
.scr { position: relative; }
.scr-bezel {
  position: relative; padding: 14px; border-radius: 20px;
  background: linear-gradient(180deg, #151b1f, #07090b 60%, #0b0e11);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.28), 0 40px 70px -30px #000, inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.8);
}
/* the glow that breathes with the low end: its alpha was 0.16 + low x 0.2; drawn at 0.36 and faded by opacity, the same
   pixels (it lies outside the bezel's box, where nothing else of the bezel paints, and it is the ring's own cyan), but
   a beat is a compositor opacity change instead of a 70 px blur painted again */
.scr-bezel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 70px -10px rgba(0, 229, 255, 0.36);
  --low: inherit;
  opacity: calc((0.16 + var(--low) * 0.2) / 0.36);
  will-change: opacity;
}
.scr-glass {
  position: relative; overflow: hidden; border-radius: 11px;
  background: radial-gradient(120% 90% at 50% 38%, #081a1f 0%, #040a0c 55%, #020405 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.12), inset 0 0 60px rgba(0, 229, 255, 0.07);
  --scr-fs: 1.02rem; --scr-pad-l: 0.9rem;
}
.scr-scan { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%); }
.scr-bar { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem 0.65rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(143, 163, 168, 0.9); border-bottom: 1px solid rgba(0, 229, 255, 0.12); }
.scr-tag { color: var(--cyan); font-weight: 700; text-shadow: 0 0 8px rgba(0, 229, 255, 0.8); }
.scr-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gw-fg); }
.scr-tc { font-variant-numeric: tabular-nums; color: var(--gw-fg); letter-spacing: 0.14em; }
.scr .sync-note { color: var(--p-yellow); }
.scr .sync-note .draft-tag { color: var(--cyan); margin: 0; }
/* the gutter rule: the line, a cyan hairline between the line numbers and the words */
.scr-gutter { position: absolute; z-index: 2; top: 2.6rem; bottom: 0; width: 1px; font-family: var(--mono); font-size: var(--scr-fs);
  left: calc(var(--scr-pad-l) + 3.4ch + 0.55ch); background: linear-gradient(to bottom, transparent, rgba(0, 229, 255, calc(0.45 + var(--low) * 0.4)) 12%, rgba(0, 229, 255, calc(0.45 + var(--low) * 0.4)) 88%, transparent);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.55); pointer-events: none; }
.scr-win {
  position: relative; height: var(--win-h, clamp(360px, calc(100svh - 420px), 760px));
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(0, 229, 255, 0.35) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
}
.scr-win:focus-visible { outline: 1px solid var(--cyan); outline-offset: -3px; }
.scr-text { position: relative; padding: 1.2rem 1.4rem 4.5rem var(--scr-pad-l); font-family: var(--mono); font-size: var(--scr-fs); line-height: 2; color: var(--gw-text); text-shadow: 0 0 7px rgba(0, 229, 255, 0.22); letter-spacing: 0; font-variant-ligatures: none; }
.sc-st { margin-bottom: 2em; }
.sc-l { display: grid; grid-template-columns: 3.4ch minmax(0, 1fr); column-gap: 1.1ch; margin: 0; }
.sc-n { color: rgba(0, 229, 255, 0.3); text-align: right; user-select: none; -webkit-user-select: none; font-size: 0.86em; }
.sc-t { min-width: 0; }
.scr .lw { white-space: pre; }
.scr[data-mode="live"] .lw.is-todo { visibility: hidden; }
.scr[data-mode="live"] .lw.is-act { clip-path: inset(-30% calc(100% - var(--n, 0) * 1ch) -30% 0); }
.scr[data-mode="live"] .sc-l.is-todo .sc-n { visibility: hidden; }   /* an empty screen: no numbers ahead of the words */
.scr .sc-l.is-now .sc-t { color: var(--gw-hot); text-shadow: 0 0 6px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.25); }
.scr .sc-l.is-now .sc-n { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.8); }
html[data-rm="1"] .scr .sc-l.is-now .sc-t, .scr[data-mode="full"] .sc-l.is-now .sc-t { background: rgba(0, 229, 255, 0.1); box-shadow: -1ch 0 0 rgba(0, 229, 255, 0.1), 1ch 0 0 rgba(0, 229, 255, 0.1); }
.scr-cursor { position: absolute; left: 0; top: 0; width: 2px; height: 1.35em; z-index: 2; pointer-events: none; opacity: 0;
  font-size: var(--scr-fs); background: #dffcff; box-shadow: 0 0 4px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.8), 0 0 26px rgba(0, 229, 255, 0.35); will-change: transform; }
.scr[data-cursor="1"] .scr-cursor { opacity: 1; }
.scr[data-cursor="1"][data-blink="1"] .scr-cursor { animation: blink 1.06s steps(1, end) infinite; }
html[data-rm="1"] .scr .scr-cursor { animation: none !important; }
.scr.is-clearing .scr-text { animation: scrClear 420ms steps(6, end); }
@keyframes scrClear { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 50% { opacity: 0.7; clip-path: inset(0 0 60% 0); transform: translateX(6px); } 51% { opacity: 0; } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
.scr-empty { padding: 1.8rem 1rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gw-dim); line-height: 2; }
.scr-empty b { display: block; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.7); font-weight: 600; }
.scr-empty .draft-tag { color: var(--cyan); }
.scr-bars { display: grid; gap: 12px; margin-top: 1.4rem; }
.scr-bars i { display: block; height: 11px; background: linear-gradient(90deg, rgba(0, 229, 255, 0.28), rgba(0, 229, 255, 0.06)); }
.scr-wave { position: relative; height: 70px; margin: 0 1rem 0.9rem; cursor: ew-resize; touch-action: none; border-top: 1px solid rgba(0, 229, 255, 0.12); }
.scr-wave canvas { position: absolute; inset: 6px 0 0; width: 100%; height: calc(100% - 6px); display: block; }
.scr-wave:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

/* ================================================================ GW: the deck, the cyan line as its power light */
.deck {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.1rem; row-gap: 0.35rem;
  padding: 1.05rem 1.1rem 1.1rem 1.2rem; border-radius: 12px;
  background: linear-gradient(180deg, #11161a, #07090b);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 22px 40px -22px #000, inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--gw-fg); font-family: var(--mono);
}
.deck-power { grid-row: 1 / 3; display: block; width: 3px; height: 48px; border-radius: 2px; background: #e6fdff;
  box-shadow: 0 0 4px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.9), 0 0 28px rgba(0, 229, 255, calc(0.3 + var(--low) * 0.5));
  opacity: calc(0.62 + var(--low) * 0.38); }
.deck-time { font-size: 1.6rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.deck-cur { color: var(--gw-hot); text-shadow: 0 0 10px rgba(0, 229, 255, 0.45); }
.deck-dur { margin-left: 0.6rem; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--gw-dim); }
.deck-state { grid-column: 2; font-size: 0.56rem; letter-spacing: 0.26em; line-height: 1.7; text-transform: uppercase; color: var(--gw-dim); }
.deck .keys { grid-column: 1 / 3; grid-row: 3; justify-content: space-between; margin-top: 0.8rem; }
.keys--gw .key { width: 2.8rem; height: 2.8rem; border-radius: 6px; color: var(--gw-fg); background: rgba(0, 229, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.25); transition: box-shadow var(--d-mid) var(--breath), color var(--d-mid) var(--breath), background-color var(--d-mid) var(--breath); }
.keys--gw .key--pp { width: 3.6rem; color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.6), 0 0 18px rgba(0, 229, 255, 0.22); }
.keys--gw .key:hover { color: var(--gw-hot); background: rgba(0, 229, 255, 0.1); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 22px rgba(0, 229, 255, 0.35); }
.keys--gw .key:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }

/* ================================================================ THE WALL (song-wall.js): the collage, behind every word */
.sp-wall { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pc { position: absolute; margin: 0; pointer-events: none; will-change: transform; }
.pc-in { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); opacity: var(--op, 1); }
.pc:not(.is-in) .pc-in { opacity: 0; }
.pc-img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.pc-win { position: absolute; overflow: hidden; }
.pc-win .pc-img { position: absolute; }
/* the Architect: die-cut stickers, paste-ups, tape and paint (the outline sits on the cut layer, so a torn edge gets it) */
.pc-cut { position: absolute; inset: -24px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.pc--ll .pc-cut {
  filter: drop-shadow(2.5px 0 0 #fbfaf4) drop-shadow(-2.5px 0 0 #fbfaf4) drop-shadow(0 2.5px 0 #fbfaf4) drop-shadow(0 -2.5px 0 #fbfaf4) drop-shadow(5px 6px 0 rgba(11, 11, 12, 0.82));
}
.pc--ll.pc--anchor .pc-cut { filter: drop-shadow(3.5px 0 0 #fbfaf4) drop-shadow(-3.5px 0 0 #fbfaf4) drop-shadow(0 3.5px 0 #fbfaf4) drop-shadow(0 -3.5px 0 #fbfaf4) drop-shadow(8px 9px 0 rgba(11, 11, 12, 0.85)); }
.pc--ll.is-diecut .pc-cut, .pc--ll.is-paper .pc-cut { filter: drop-shadow(3px 5px 4px rgba(40, 28, 8, 0.38)); }
.pc--ll.is-whiteink .pc-cut { filter: drop-shadow(1.5px 0 0 #0b0b0c) drop-shadow(-1.5px 0 0 #0b0b0c) drop-shadow(0 1.5px 0 #0b0b0c) drop-shadow(0 -1.5px 0 #0b0b0c) drop-shadow(4px 5px 0 rgba(11, 11, 12, 0.5)); }
.pc--ll.is-pale .pc-cut { filter: drop-shadow(0 0 1px rgba(40, 28, 8, 0.7)) drop-shadow(2px 4px 4px rgba(40, 28, 8, 0.45)); }
.pc--ll.is-framed .pc-in { background: #fbf8ef var(--grain); background-size: auto, 160px 160px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 6px 8px 0 rgba(11, 11, 12, 0.18), 0 18px 26px -18px rgba(40, 28, 8, 0.6); }
.pc--ll.is-framed .pc-win { background: #efe9dc; }
.pc--ll.is-framed .pc-img { filter: none; }
.pc-paint { position: absolute; left: 50%; top: 58%; z-index: -1; transform: translate(-50%, -50%) rotate(var(--sr, 0deg)); }
.pc-paint .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[data-paint="muted"] .pc-paint { opacity: 0.75; }
.pc-tape { position: absolute; z-index: 3; height: auto; transform: rotate(var(--tr, 0deg)); transform-origin: 50% 50%; opacity: 0.94; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18)); }
.pc-tape--black { opacity: 0.96; }
/* the Ghostwriter: rim light, scanlines through the piece, glow in screen, dark pieces lit from behind */
.pc--gw .pc-img { filter: brightness(0.88) contrast(1.12) saturate(0.85) drop-shadow(0 0 1px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 14px rgba(0, 229, 255, 0.3)); }
.pc--gw.pc--anchor .pc-img { filter: brightness(0.9) contrast(1.12) saturate(0.85) drop-shadow(0 0 1.5px rgba(0, 229, 255, 0.95)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.34)); }
.pc--gw.is-glow .pc-img { filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.35)); mix-blend-mode: screen; }
.pc--gw.is-glow .pc-in { mix-blend-mode: screen; }
.pc--gw.is-dark .pc-img { filter: brightness(1.08) contrast(1.1) drop-shadow(0 0 1.5px rgba(160, 250, 255, 0.95)) drop-shadow(0 0 3px rgba(0, 229, 255, 0.8)) drop-shadow(0 0 26px rgba(0, 229, 255, 0.35)); }
.pc-emit { position: absolute; left: -6%; right: -6%; height: 2px; z-index: 2; background: #dffcff; border-radius: 2px;
  box-shadow: 0 0 4px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.85), 0 0 30px rgba(0, 229, 255, 0.45); }
.pc-emit::after { content: ''; position: absolute; left: 8%; right: 8%; height: 46px; background: radial-gradient(60% 100% at 50% 100%, rgba(0, 229, 255, 0.32), transparent 70%); pointer-events: none; }
.pc-emit--bottom { bottom: 0; }
.pc-emit--bottom::after { bottom: 1px; }
.pc-emit--top { top: 0; }
.pc-emit--top::after { top: 1px; transform: scaleY(-1); }
.pc-halo { position: absolute; inset: -18% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 229, 255, 0.26), rgba(0, 110, 130, 0.14) 55%, transparent 76%); }
.pc-scan { position: absolute; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.34) 0 1px, transparent 1px 3px), linear-gradient(100deg, rgba(0, 229, 255, 0.18), transparent 45%);
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.pc--gw.is-framed .pc-in { border-radius: 8px; background: linear-gradient(160deg, rgba(0, 229, 255, 0.1), rgba(4, 10, 12, 0.94) 55%); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.45), 0 0 26px rgba(0, 229, 255, 0.18), 0 24px 40px -22px #000; }
.pc--gw.is-framed .pc-in::before, .pc--gw.is-framed .pc-in::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--cyan); z-index: 3; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.9)); }
.pc--gw.is-framed .pc-in::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.pc--gw.is-framed .pc-in::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.pc--gw.is-framed .pc-win { border-radius: 4px; background: radial-gradient(90% 90% at 50% 40%, rgba(0, 120, 140, 0.35), rgba(2, 8, 10, 0.9)); }
.pc--gw.is-framed.is-dark .pc-win { background: radial-gradient(90% 90% at 50% 40%, rgba(120, 220, 230, 0.55), rgba(20, 60, 70, 0.8)); }
.pc--gw.is-framed .pc-img { filter: contrast(1.08) saturate(0.9); }
.pc--gw.is-framed.is-glow .pc-img { mix-blend-mode: screen; filter: none; }
.pc-scanwin { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(0, 229, 255, 0.08), transparent 30%, transparent 70%, rgba(0, 229, 255, 0.06)); }

/* ================================================================ below the stage: the sleeve, the video, the essays, the walk */
.sp-more { padding-top: 12vh; }
.sp-more > * { margin-left: var(--col-l); width: min(var(--col-w), calc(100% - var(--col-l) - var(--gutter))); }
.sp-sleeve { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 3.4rem); align-items: start; }
.liner { position: relative; }
.liner-h { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem; }
.credits { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1.2rem; font-family: var(--body); font-size: 1rem; line-height: 1.4; }
.credits dt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; padding-top: 0.28rem; }
.credits dd { margin: 0; }
.liner-facts { margin-top: 1.2rem; padding-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; }
.liner-facts .tagx { padding: 0.12rem 0.4rem; border: 1px solid currentColor; border-radius: 2px; }
.liner .draft-tag { margin: 0.9rem 0 0; }
.outs { display: grid; }
.outs a { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; align-items: center; gap: 1ch; padding: 0.7rem 0.3rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; }
.outs a:first-child { border-top: 0 !important; }
.outs a .o-n, .outs a .o-go { font-size: 0.64rem; }
/* LL: liner notes on paper */
html[data-side="ll"] .liner { padding: 1.4rem 1.6rem 1.5rem; background: var(--nb-paper) var(--grain); background-size: auto, 160px 160px; color: var(--nb-ink); border: 2px solid var(--nb-ink); }
html[data-side="ll"] .liner--credits { box-shadow: 8px 8px 0 var(--p-orange); rotate: -0.8deg; }
html[data-side="ll"] .liner--links { box-shadow: 8px 8px 0 var(--p-magenta); rotate: 0.9deg; margin-top: 1.4rem; }
html[data-side="ll"] .liner-h { color: #9a3300; }
html[data-side="ll"] .credits dt { color: #6a665d; }
html[data-side="ll"] .credits dd { font-family: var(--hand); font-size: 1.6rem; line-height: 1.05; }
html[data-side="ll"] .credits a { background: linear-gradient(var(--p-yellow), var(--p-yellow)) 0 88% / 100% 0.32em no-repeat; transition: background-size var(--d-short) var(--punch); }
html[data-side="ll"] .credits a:hover, html[data-side="ll"] .credits a:focus-visible { background-size: 100% 0.9em; }
html[data-side="ll"] .liner-facts { border-top: 1.5px dashed rgba(23, 24, 28, 0.3); color: #5b574f; }
html[data-side="ll"] .liner .draft-tag { color: #9a3300; }
html[data-side="ll"] .outs a { border-top: 1.5px dashed rgba(23, 24, 28, 0.22); color: var(--nb-ink); transition: background-color var(--d-hit) linear; }
html[data-side="ll"] .outs a .o-l { font-family: var(--hand); font-size: 1.45rem; letter-spacing: 0; text-transform: none; }
html[data-side="ll"] .outs a .o-n { color: #9a3300; }
html[data-side="ll"] .outs a .o-go { color: #6a665d; }
html[data-side="ll"] .outs a:hover, html[data-side="ll"] .outs a:focus-visible { background: rgba(255, 210, 63, 0.45); }
html[data-side="ll"] .outs a:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: -2px; }
/* GW: two terminals */
html[data-side="gw"] .liner { padding: 1.2rem 1.3rem 1.3rem; border-radius: 8px; background: linear-gradient(180deg, #0a1014, #05080a); color: var(--gw-fg); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.2), inset 0 2px 0 rgba(0, 229, 255, 0.45), 0 20px 40px -24px #000; }
html[data-side="gw"] .liner-h { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
html[data-side="gw"] .liner-h::before { content: '> '; }
html[data-side="gw"] .credits dt { color: var(--gw-dim); }
html[data-side="gw"] .credits dd { font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.04em; color: var(--gw-hot); }
html[data-side="gw"] .credits a { color: var(--cyan); }
html[data-side="gw"] .liner-facts { border-top: 1px solid rgba(0, 229, 255, 0.14); color: var(--gw-dim); }
html[data-side="gw"] .liner .draft-tag { color: var(--cyan); }
html[data-side="gw"] .outs a { border-top: 1px solid rgba(0, 229, 255, 0.1); color: var(--gw-fg); transition: background-color var(--d-mid) var(--breath), color var(--d-mid) var(--breath); }
html[data-side="gw"] .outs a .o-n { color: rgba(0, 229, 255, 0.45); }
html[data-side="gw"] .outs a .o-go { color: var(--gw-dim); }
html[data-side="gw"] .outs a:hover, html[data-side="gw"] .outs a:focus-visible { background: rgba(0, 229, 255, 0.07); color: var(--gw-hot); }
html[data-side="gw"] .outs a:hover .o-go, html[data-side="gw"] .outs a:focus-visible .o-go { color: var(--cyan); }
html[data-side="gw"] .outs a:focus-visible { outline: 1px solid var(--cyan); outline-offset: -1px; }

/* the video: a poster pasted on the wall (LL) or a screen in the dark (GW); it plays in-world (player.js) */
.sp-video { margin-top: 12vh; }
.sp-video .vid { width: min(46rem, 100%); }
html[data-side="gw"] .sp-video .vid { margin-left: auto; }
.vid--side { width: 100%; }
.vid-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem; }
.vid--ll .vid-h { color: #9a3300; }
.vid--gw .vid-h { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
.vid-all { display: inline-flex; align-items: center; gap: 0.6em; color: inherit; text-decoration: none; padding: 0.5em 0; }
.vid-all span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--d-short) var(--ease); }
/* an arrow, not a dash (a bare line read as an em-dash): the line grows on hover and its head rides its end, both on
   the 9 px box's middle row (the back chip's geometry) */
.vid-all i { position: relative; flex: none; width: 18px; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 50% 1px no-repeat; transition: background-size var(--d-short) var(--ease); }
.vid-all i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-9px) rotate(45deg); transition: transform var(--d-short) var(--ease); }
.vid-all:hover span, .vid-all:focus-visible span { background-size: 100% 1px; }
.vid-all:hover i, .vid-all:focus-visible i { background-size: 100% 1px; }
.vid-all:hover i::after, .vid-all:focus-visible i::after { transform: rotate(45deg); }
.vid-hit { position: relative; display: block; width: 100%; text-align: left; cursor: pointer; }
.vid-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.vid-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-long) var(--ease), filter var(--d-long) var(--breath); }
.vid-glyph { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; }
.vid-glyph svg { width: 20px; height: 20px; fill: currentColor; margin-left: 4px; }
.vid-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; }
.vid--ll .vid-hit { padding: 12px 12px 14px; background: #f6f2e8 var(--grain); background-size: auto, 160px 160px; border: 2px solid var(--nb-ink); box-shadow: 10px 10px 0 var(--p-magenta); rotate: 0.8deg; transition: rotate var(--d-short) var(--punch), translate var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch); }
.vid--ll .vid-pic { border: 2px solid var(--nb-ink); }
.vid--ll .vid-glyph { background: var(--p-yellow); color: var(--nb-ink); box-shadow: 0 0 0 2px var(--nb-ink), 4px 4px 0 2px var(--nb-ink); }
.vid--ll .vid-cap { color: #5b574f; }
.vid--ll .vid-hit:hover, .vid--ll .vid-hit:focus-visible { rotate: 0deg; translate: -3px -3px; box-shadow: 14px 14px 0 var(--p-magenta); }
.vid--ll .vid-hit:hover img { transform: scale(1.03); }
.vid--gw .vid-hit { padding: 10px; border-radius: 14px; background: linear-gradient(180deg, #151b1f, #07090b); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 30px 50px -28px #000; transition: box-shadow var(--d-mid) var(--breath); }
.vid--gw .vid-pic { border-radius: 8px; }
.vid--gw .vid-pic img { filter: grayscale(0.55) contrast(1.1) brightness(0.72); }
.vid--gw .vid-pic::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px); pointer-events: none; }
.vid--gw .vid-glyph { color: var(--cyan); background: rgba(3, 6, 8, 0.6); box-shadow: 0 0 0 1px var(--cyan), 0 0 24px rgba(0, 229, 255, 0.55); }
.vid--gw .vid-cap { color: var(--gw-dim); padding: 0 0.3rem; }
.vid--gw .vid-hit:hover, .vid--gw .vid-hit:focus-visible { box-shadow: 0 0 0 1px var(--cyan), 0 0 40px rgba(0, 229, 255, 0.3), 0 30px 50px -28px #000; }
.vid--gw .vid-hit:hover img { filter: none; }
.vid-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

/* the essays: the human, on the line (the seam cards stay neutral in both worlds) */
.sp-essays { margin-top: 14vh; }
.sp-essays .essays-h { display: flex; gap: 2rem; margin-bottom: 2.2rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; }
html[data-side="ll"] .sp-essays .essays-h { color: #4a4740; }
html[data-side="gw"] .sp-essays .essays-h { color: var(--gw-dim); }
.sp-essays .essay { width: min(44rem, 100%); margin-left: 0; translate: calc(var(--nudge, 0) * 1.4rem + 1.4rem) 0; }
html[data-side="gw"] .sp-essays .essays { align-items: flex-end; }
html[data-side="gw"] .sp-essays .essay { translate: calc(var(--nudge, 0) * 1.4rem - 1.4rem) 0; }

/* along the spine: the older and the newer song */
.sp-walk { display: flex; justify-content: space-between; gap: 2rem; margin-top: 14vh; }
.walk { display: grid; gap: 0.35rem; padding: 1.1rem 0.2rem; max-width: 26rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; }
.walk b { font-family: var(--display); font-weight: 400; font-size: 2.5rem; letter-spacing: 0.02em; text-transform: none; line-height: 0.95; }
.walk--next { margin-left: auto; text-align: right; }
html[data-side="ll"] .walk { color: #4a4740; }
html[data-side="ll"] .walk b { color: var(--nb-ink); }
html[data-side="gw"] .walk { color: var(--gw-dim); }
html[data-side="gw"] .walk b { color: var(--gw-fg); letter-spacing: 0.05em; }
.walk b span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--ease-d) var(--ease); }
.walk:hover b span, .walk:focus-visible b span { background-size: 100% 2px; }
.walk .w-side { font-weight: 700; }
.walk .w-side--ll { color: #b23a00; }
.walk .w-side--gw { color: #0a8fa0; }
html[data-side="gw"] .walk .w-side--gw { color: var(--cyan); }
html[data-side="gw"] .walk .w-side--ll { color: #ff7a3d; }

.sp-foot { margin: 12vh 0 0 var(--col-l); width: min(var(--col-w), calc(100% - var(--col-l) - var(--gutter))); display: flex; justify-content: space-between; gap: 1.4rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; }
html[data-side="ll"] .sp-foot { color: #4a4740; }
html[data-side="gw"] .sp-foot { color: var(--gw-dim); }
.sp-foot a { color: inherit; }
.sp-foot a:hover, .sp-foot a:focus-visible { color: var(--fg); }

/* ================================================================ the dock */
.sp-dock {
  position: fixed; z-index: 6; right: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.9rem 0.45rem 0.4rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0; translate: 0 12px; pointer-events: none;
  transition: opacity var(--d-mid) var(--breath), translate var(--d-mid) var(--ease);
}
html[data-dock="1"] .sp-dock { opacity: 1; translate: none; pointer-events: auto; }
html[data-dock="off"] .sp-dock, html[data-bar="1"] .sp-dock { display: none !important; }
html[data-side="ll"] .sp-dock { background: rgba(251, 250, 244, 0.95); color: var(--nb-ink); border: 2px solid var(--nb-ink); box-shadow: 5px 5px 0 var(--p-magenta); }
html[data-side="gw"] .sp-dock { background: rgba(5, 8, 10, 0.92); color: var(--gw-fg); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 24px rgba(0, 229, 255, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dock-pp { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; flex: none; cursor: pointer; }
.dock-skip { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; flex: none; border-radius: 50%; cursor: pointer; color: inherit; opacity: 0.8; transition: opacity var(--d-hit) linear, background-color var(--d-hit) linear; }
.dock-skip svg { width: 0.62rem; height: 0.62rem; fill: currentColor; }
.dock-skip:disabled { opacity: 0.28; cursor: default; }
.dock-skip:not(:disabled):hover, .dock-skip:focus-visible { opacity: 1; }
html[data-side="ll"] .dock-skip:not(:disabled):hover { background: var(--p-yellow); }
html[data-side="gw"] .dock-skip:not(:disabled):hover { color: var(--cyan); background: rgba(0, 229, 255, 0.08); }
.dock-skip:focus-visible, .dock-pp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dock-pp svg { width: 0.72rem; height: 0.72rem; fill: currentColor; }
.dock-pp .i-pause { display: none; }
html[data-sp-playing="1"] .dock-pp .i-play { display: none; }
html[data-sp-playing="1"] .dock-pp .i-pause { display: block; }
.dock-pp[aria-disabled="true"] { opacity: 0.4; }
.dock-now { display: grid; gap: 0.15rem; min-width: 0; max-width: 14rem; margin-left: 0.5rem; }
.dock-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.dock-time { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* the menu's play is this page's song (data-sp-playing), whatever the radio's bar shows (data-playing: the radio) */
html[data-page="song"] .menu-pp .i-play { display: block; }
html[data-page="song"] .menu-pp .i-pause { display: none; }
html[data-page="song"][data-sp-playing="1"] .menu-pp .i-play { display: none; }
html[data-page="song"][data-sp-playing="1"] .menu-pp .i-pause { display: block; }

/* following the radio: the page is not pressable mid-move; into the Ghostwriter the old head splits RGB as it tears */
html[data-swap="glitch"] .sp-page, html[data-swap="paint"] .sp-page, html[data-swap="move"] .sp-page, html[data-swap="fade"] .sp-page { pointer-events: none; }
html.is-tearing .sp-head { filter: drop-shadow(-5px 0 0 rgba(0, 229, 255, 0.85)) drop-shadow(5px 0 0 rgba(255, 46, 126, 0.75)); }
/* into the Architect: SFV strikes whip out of the line over the page, then dry off (js paintOver) */
.sp-paintover { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.po-strike { position: absolute; transform-origin: 0 50%; isolation: isolate; }
.po-strike .ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }

/* ================================================================ round 9: the words only while the song plays
   The object starts empty (the ruled page; the dark screen with its cursor blinking at the first line) and the words come
   as the song reaches them. data-await="1" on the object: "press play" stands on it (DRAFT COPY), a real button in the
   middle of the window; the first tap anywhere starts the song, this is the clear place for it. */
.nb-well, .scr-well { position: relative; }
.go-wrap {   /* high in the window, where the first lines will be (on a phone the window runs past the fold) */
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: start center; padding: clamp(1.6rem, 10%, 6rem) 1rem 1rem; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 240ms var(--breath), visibility 0s linear 240ms;
}
[data-await="1"] .go-wrap { opacity: 1; visibility: visible; transition: opacity 360ms var(--breath), visibility 0s; }
[data-await="1"] .go { pointer-events: auto; }
[data-await="1"] .nb-win, [data-await="1"] .scr-win { overflow: hidden; }
[data-await="1"] .nb-pen { opacity: 0 !important; }
.go { display: grid; justify-items: center; gap: 0.75rem; padding: 1.6rem 2.2rem 1.5rem; color: inherit; text-align: center; cursor: pointer; }
.go .draft-tag { margin: 0.1rem 0 0; }
.go .go-sub { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; }

/* LL: a ring drawn in marker round a highlighter triangle, the words in the hand; it beats with the radio's blocked ink */
.go--ll { color: var(--nb-ink); background: radial-gradient(closest-side, rgba(251, 250, 244, 0.97) 64%, rgba(251, 250, 244, 0)); }
.go--ll .go-mark { display: block; width: 7.4rem; height: 7.4rem; transition: translate 160ms var(--punch); }
.go--ll .go-mark svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.go-ring { fill: none; stroke: var(--nb-ink); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.go-off { fill: var(--p-magenta); }
.go-tri { fill: var(--p-yellow); stroke: var(--nb-ink); stroke-width: 3.6; stroke-linejoin: round; transition: fill var(--d-hit) linear; }
.go--ll .go-txt {
  font-family: var(--hand); font-weight: 700; font-size: 2.7rem; line-height: 0.95; padding: 0 0.22em; rotate: -1.5deg;
  background: linear-gradient(transparent 56%, rgba(255, 210, 63, 0.9) 56%, rgba(255, 210, 63, 0.9) 90%, transparent 90%);
}
.go--ll .go-sub { color: #5b574f; }
.go--ll .draft-tag { color: #9a3300; }
[data-await="1"] .go--ll .go-ring { animation: goRing 640ms var(--punch) 60ms forwards; }
@keyframes goRing { to { stroke-dashoffset: 0; } }
[data-await="1"] .go--ll .go-mark svg { animation: goInk 1.5s var(--punch) 720ms infinite; }
@keyframes goInk { 0%, 100% { transform: none; } 14% { transform: scale(1.09) rotate(-2.5deg); } 46% { transform: scale(1.01); } }
[data-await="1"] .go--ll .go-txt { animation: goPunch 420ms var(--punch) 140ms backwards; }
@keyframes goPunch { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
.go--ll:hover .go-mark, .go--ll:focus-visible .go-mark { translate: 3px -3px; }
.go--ll:hover .go-tri, .go--ll:focus-visible .go-tri { fill: var(--p-orange); }
.go--ll:active .go-mark { translate: 1px 1px; }
.go--ll:focus-visible { outline: 2px dashed var(--nb-ink); outline-offset: -4px; border-radius: 50%; }

/* GW: a prompt typed on the screen, a lit key, the caret blinking; the key breathes with the radio's blocked light */
.go--gw { font-family: var(--mono); color: var(--gw-fg); gap: 1.05rem; background: radial-gradient(closest-side, rgba(2, 7, 9, 0.95) 62%, rgba(2, 7, 9, 0)); }
.go--gw .go-prompt { display: inline-flex; align-items: center; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--gw-hot); text-shadow: 0 0 8px rgba(0, 229, 255, 0.55); }
.go--gw .go-gt { color: var(--cyan); margin-right: 0.62em; }
.go--gw .go-caret { display: inline-block; width: 0.62em; height: 1.15em; margin-left: 0.35em; background: #dffcff; box-shadow: 0 0 4px #00e5ff, 0 0 12px rgba(0, 229, 255, 0.8); animation: blink 1.06s steps(1, end) infinite; }
.go--gw .go-key {
  display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.7rem 0.95rem 1.35rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; color: var(--cyan);
  background: rgba(0, 229, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 22px rgba(0, 229, 255, 0.24);
  transition: color var(--d-mid) var(--breath), background-color var(--d-mid) var(--breath);
}
.go--gw .go-ic { width: 0.95rem; height: 0.95rem; fill: currentColor; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.9)); }
.go--gw .go-sub { color: var(--gw-dim); letter-spacing: 0.14em; text-transform: none; font-size: 0.66rem; }
.go--gw .draft-tag { color: var(--cyan); }
[data-await="1"] .go--gw { animation: goType 460ms steps(7, end) both; }
@keyframes goType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
[data-await="1"] .go--gw .go-key { animation: goGlow 2.6s var(--breath) infinite; }
@keyframes goGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.6), 0 0 14px rgba(0, 229, 255, 0.16); }
  50% { box-shadow: inset 0 0 0 1px #00e5ff, 0 0 36px rgba(0, 229, 255, 0.48); }
}
.go--gw:hover .go-key, .go--gw:focus-visible .go-key { color: var(--gw-hot); background: rgba(0, 229, 255, 0.14); }
.go--gw:focus-visible { outline: 1px solid var(--cyan); outline-offset: -2px; border-radius: 14px; }

/* a song with no audio here: the object stays empty, a quiet line says why; on the screen the empty notes stand right
   of the gutter rule, where the words would be typed */
.nb-quiet, .scr-quiet { max-width: 30rem; }
.scr-empty { margin-left: calc(var(--scr-fs) * 2.75); }

/* ================================================================ missing / loading */
html[data-state="loading"] .sp-stage, html[data-state="loading"] .sp-more, html[data-state="loading"] .sp-head { opacity: 0; }
.sp-stage, .sp-more, .sp-head { transition: opacity 320ms var(--breath); }
.sp-missing { max-width: 30rem; margin: 30vh auto 0; padding: 0 var(--gutter); text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 2; color: var(--fg); }
.sp-missing a { text-decoration: underline; text-underline-offset: 0.3em; }
.sp-noscript { position: fixed; left: 16px; right: 16px; top: 40vh; z-index: 9; font: 13px/1.8 monospace; color: #0b0b0c; text-align: center; }

/* short desktop screens: the side column tightens so the transport stays on the first screen */
@media (min-width: 1024px) and (max-height: 880px) {
  .sp-side { gap: 1rem; }
  .note-ll { font-size: 1.34rem; padding: 0.75rem 1.1rem 0.85rem 1.1rem; }
  .note-gw { font-size: 0.78rem; line-height: 1.6; padding: 0.8rem 1rem 0.85rem; }
  .tape { gap: 0.6rem; }
  .tape-body { width: 86%; }
  .keys--ll .key { height: 2.35rem; }
}

/* ================================================================ stacked (tablets and phones): one column, the world's order */
@media (max-width: 1023.98px) {
  :root { --col-l: clamp(16px, 5vw, 48px); --col-w: calc(100% - 2 * var(--col-l)); --hero-w: 100%; }
  html[data-side="gw"] { --col-l: clamp(16px, 5vw, 48px); --hero-w: 100%; }
  .sp-stage, html[data-side="gw"] .sp-stage { grid-template-columns: minmax(0, 1fr); width: var(--col-w); row-gap: 2rem; }
  .sp-hero, html[data-side="gw"] .sp-hero { grid-column: 1; grid-row: 2; }
  .sp-side, html[data-side="gw"] .sp-side { grid-column: 1; grid-row: 1; padding-top: 0; }
  /* the note on top, the player under the lyrics: the side column splits around the hero */
  .sp-side { display: contents; }
  .sp-note { grid-row: 1; grid-column: 1; max-width: 34rem; }
  .tape, .deck, .quiet, .vid--side { grid-row: 3; grid-column: 1; }
  .quiet { grid-row: 4; }
  .tape { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; column-gap: 1.6rem; max-width: 44rem; }
  .deck { max-width: 36rem; }
  .vid--side { max-width: 36rem; }
  .sp-sleeve { grid-template-columns: minmax(0, 1fr); }
  html[data-side="ll"] .liner--links { margin-top: 0; }
}

/* ================================================================ phones */
@media (max-width: 719.98px) {
  :root { --pad: 8px; --rule: 36px; --margin-x: 30px; --col-l: 12px; --col-w: calc(100% - 24px); }
  html[data-side="gw"] { --col-l: 12px; }
  .sp-ui .top { top: max(10px, env(safe-area-inset-top)); }
  .sp-scroller { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 38px, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, transparent 38px, #000 64px); }
  .sp-head { margin: calc(max(10px, env(safe-area-inset-top)) + 64px) 12px 1.2rem 12px; width: auto; }
  .sp-title { font-size: var(--tsize, 3.6rem); }
  .sp-title .w, .sp-title .slice { white-space: normal; }
  .sp-meta { gap: 0.4rem 1rem; margin-bottom: 0.8rem; }
  .sp-meta-wall { margin-left: 0; width: 100%; }
  .sp-stage, html[data-side="gw"] .sp-stage { row-gap: 1.8rem; }
  .note-ll { font-size: 1.42rem; margin: 0 1.2rem 0 0.4rem; }
  .note-gw { font-size: 0.8rem; }
  .nb-sheet { rotate: 0deg; padding: 0.9rem 0.8rem 1rem calc(var(--margin-x) + 12px); }
  .nb-rule { left: calc(var(--margin-x) - 2px); }
  .nb-holes { left: 5px; width: 13px; }
  .nb-tape--a { left: -14px; top: 8px; width: 64px; }
  .nb-tape--b { right: -18px; top: -10px; width: 64px; }
  .nb-text { font-size: 1.5rem; }
  .nb-headrow { flex-wrap: wrap; gap: 0.3rem 0.8rem; }
  .nb-headrow .sync-note { order: 3; width: 100%; }
  .go { padding: 1.2rem 1.4rem 1.1rem; gap: 0.6rem; }
  .go--ll .go-mark { width: 5.8rem; height: 5.8rem; }
  .go--ll .go-txt { font-size: 2.2rem; }
  .go--gw .go-prompt { font-size: 0.92rem; }
  .go--gw .go-key { padding: 0.85rem 1.4rem 0.85rem 1.15rem; }
  .nb-win { height: clamp(320px, 66svh, 620px); }
  .scr-win { height: clamp(320px, 62svh, 600px); }
  .scr-bezel { padding: 8px; border-radius: 14px; }
  .scr-glass { --scr-fs: 0.8rem; --scr-pad-l: 0.2rem; }
  .scr-text { padding-right: 0.8rem; }
  .sc-l { grid-template-columns: 3.4ch minmax(0, 1fr); column-gap: 1.1ch; }
  /* the line comes out of the corner mask (song.js measureSpine places the rule on the mark's centre): on phones the
     GW line numbers step aside and the words start just right of the gutter; the notebook's words right of its rule */
  html[data-side="gw"] .sc-l { grid-template-columns: minmax(0, 1fr); }
  html[data-side="gw"] .sc-n { display: none; }
  html[data-side="gw"] .scr-text { padding-left: calc(var(--spine-in, 2rem) + 0.75rem); }
  .nb-sheet { padding-left: calc(var(--spine-in, 42px) + 12px); }
  .scr-bar { flex-wrap: wrap; gap: 0.3rem 0.8rem; }
  .scr-bar .sync-note { order: 5; width: 100%; }
  .scr-wave { height: 56px; margin: 0 0.6rem 0.6rem; }
  .tape { grid-template-columns: minmax(0, 1fr); }
  .tape-body { width: 82%; justify-self: center; margin: 0; }
  .keys--ll { justify-content: center; }
  .deck .keys { justify-content: center; gap: 0.8rem; }
  .deck-time { font-size: 1.35rem; }
  .sp-more { padding-top: 11vh; }
  .sp-more > * { margin-left: 12px; width: calc(100% - 24px); }
  .sp-essays .essay, html[data-side="gw"] .sp-essays .essay { translate: none; width: 100%; }
  .sp-walk { flex-direction: column; gap: 0.6rem; }
  /* the rows of words below hang right of the line (it runs at the lyrics' rule, near the left edge) */
  .sp-essays .essays-h, .sp-walk, .sp-foot { padding-left: max(0px, calc(var(--lx) * 1px + 6px)); }
  .walk--next { margin-left: 0; text-align: left; }
  .walk b { font-size: 2.1rem; }
  .sp-foot { flex-direction: column; margin-left: 12px; width: calc(100% - 24px); }
  .sp-dock { left: 50%; right: auto; translate: -50% 0; opacity: 1; pointer-events: auto; bottom: max(12px, env(safe-area-inset-bottom));
    width: max-content; max-width: calc(100vw - 24px); }
  .dock-now { max-width: 9.5rem; }
  html[data-dock="1"] .sp-dock, html[data-dock="0"] .sp-dock { translate: -50% 0; opacity: 1; pointer-events: auto; }
  .dock-title { max-width: 9.5rem; }
  .dock-time { white-space: nowrap; }
  .sp-page { padding-bottom: 18vh; }
  /* pockets for the wall: the note, the player and the cards leave a side free, alternating, so the cut-outs have
     somewhere to stand on a phone (the lyrics keep the full width) */
  .sp-note { width: 72%; }
  html[data-side="gw"] .sp-note { justify-self: end; }
  .tape { width: 78%; margin-top: 0.6rem; }
  .tape-body { width: 100%; justify-self: start; }
  html[data-side="gw"] .deck { width: 80%; justify-self: end; margin-top: 0.6rem; }
  .sp-sleeve { row-gap: 4.2rem; }
  .liner--credits { width: 80%; }
  .liner--links { width: 80%; justify-self: end; }
  html[data-side="ll"] .liner--links { margin-top: 0; }
  .sp-video .vid { width: 84%; }
  /* the wall's anchors are smaller on a phone; the sticker outlines too */
  .pc--ll .pc-cut, .pc--ll.pc--anchor .pc-cut { filter: drop-shadow(1.8px 0 0 #fbfaf4) drop-shadow(-1.8px 0 0 #fbfaf4) drop-shadow(0 1.8px 0 #fbfaf4) drop-shadow(0 -1.8px 0 #fbfaf4) drop-shadow(3px 4px 0 rgba(11, 11, 12, 0.8)); }
}

/* reduced motion: everything is placed; the current line is highlighted instead of written or typed */
html[data-rm="1"] .nb-rule { transform: none; }
html[data-rm="1"] .nb.is-turning .nb-text, html[data-rm="1"] .scr.is-clearing .scr-text { animation: none; }
html[data-rm="1"] .pc { will-change: auto; }
html[data-rm="1"] .go-wrap { transition: opacity 200ms linear, visibility 0s linear 200ms; }
html[data-rm="1"] [data-await="1"] .go-wrap { transition: opacity 200ms linear, visibility 0s; }
html[data-rm="1"] .go-ring { stroke-dashoffset: 0; }
html[data-rm="1"] .go-ring, html[data-rm="1"] .go-mark svg, html[data-rm="1"] .go-txt, html[data-rm="1"] .go--gw,
html[data-rm="1"] .go-key, html[data-rm="1"] .go-caret { animation: none !important; }

/* ---------------------------------------------------------------- the shell (js/shell/, SPEC.md "The shell")
   Reached through the router (html data-via="router") the page is built behind the folded line and arrives with the
   unfold: its sections do not fade in on their own, and what CSS would start on insertion (the note written on the
   sticky note) waits for the unfold (data-arrival="wait", song.js arrive()). */
html[data-via="router"] .sp-stage, html[data-via="router"] .sp-more, html[data-via="router"] .sp-head { transition: none; }
html[data-arrival="wait"] .note-ll.is-writing .nw { animation-play-state: paused; }