:root {
  color-scheme: dark;
  --bg: #07080c;
  --panel: #0b0d13;
  --panel2: #0d1018;
  --ink: #e6e2f2;
  --muted: #9690a8;
  --line: #7370a9;
  --line-dim: rgb(124 119 179 / 38%);
  --violet: #b9a5ff;
  --pink: #ff72d4;
  --cyan: #75e6f0;
  --amber: #ffd476;
  --danger: #ff667d;
  --mx: 0;
  --my: 0;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100%; overflow-x: hidden; color: var(--ink); background: var(--bg); }
a { color: inherit; }
button { font: inherit; }
::selection { color: #08080c; background: var(--pink); }

.shell {
  min-height: 100svh;
  position: relative;
  z-index: 1;
  padding: 1.1rem clamp(.9rem, 2.3vw, 2.1rem) 1rem;
  background:
    radial-gradient(circle at 88% 19%, rgb(118 66 166 / 11%), transparent 27rem),
    radial-gradient(circle at 8% 70%, rgb(43 89 118 / 8%), transparent 24rem),
    linear-gradient(180deg, #090a10 0%, #07080c 100%);
  isolation: isolate;
}
.shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgb(255 255 255 / 2.3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1.8%) 1px, transparent 1px);
  background-size: 42px 42px;
}
.shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 40%) 100%);
}

.crt, .noise, .scanlines, .tracking, .dropout, .switch-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.crt { z-index: 95; box-shadow: inset 0 0 8rem rgb(0 0 0 / 39%), inset 0 0 18rem rgb(0 0 0 / 22%); }
.scanlines { z-index: 92; opacity: .22; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 52%) 3px 4px); mix-blend-mode: multiply; }
.noise {
  z-index: 91;
  opacity: .075;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 10% 20%, #fff 0 .7px, transparent 1px),
    radial-gradient(circle at 60% 52%, #fff 0 .7px, transparent 1px),
    radial-gradient(circle at 81% 16%, #fff 0 .6px, transparent 1px),
    radial-gradient(circle at 36% 83%, #fff 0 .6px, transparent 1px);
  background-size: 13px 17px, 19px 23px, 29px 31px, 11px 15px;
  animation: noise .18s steps(2) infinite;
}
.tracking {
  z-index: 93;
  top: -9%;
  bottom: auto;
  height: 9px;
  opacity: .22;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 40%), transparent);
  filter: blur(.7px);
  animation: tracking 8.4s linear infinite;
}
.dropout {
  z-index: 94;
  opacity: .08;
  background: linear-gradient(to bottom, transparent 0 44%, rgb(255 255 255 / 13%) 44.1% 44.35%, transparent 44.5% 76%, rgb(133 98 255 / 16%) 76.1% 76.24%, transparent 76.4%);
  animation: dropout 11s steps(1) infinite;
}
.switch-flash { z-index: 180; opacity: 0; background: repeating-linear-gradient(to bottom, #f7f7f2 0 1px, #0a0b0d 1px 3px); mix-blend-mode: screen; }

.site-header {
  max-width: 1640px;
  margin: 0 auto;
  min-height: 4rem;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto minmax(12rem, 1fr);
  align-items: center;
  gap: 1.2rem;
  border-bottom: 1px solid var(--line-dim);
  position: relative;
  z-index: 20;
}
.logo { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; width: max-content; }
.logo-cat { color: var(--violet); font-size: 1.45rem; text-shadow: 2px 0 var(--pink), -2px 0 rgb(101 223 239 / 40%); white-space: nowrap; }
.logo-copy { display: grid; gap: .12rem; }
.logo-copy strong { color: #f0eaff; font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: .055em; text-shadow: 2px 0 rgb(250 61 216 / 42%), -2px 0 rgb(75 214 255 / 36%); }
.logo-copy small { color: #9b94b4; font-size: .56rem; letter-spacing: .11em; }
.top-nav { display: flex; align-items: center; gap: clamp(.7rem, 2.1vw, 2rem); font-size: .66rem; letter-spacing: .09em; color: #aea7c2; white-space: nowrap; }
.top-nav a { text-decoration: none; transition: color .15s ease, text-shadow .15s ease; }
.top-nav a:hover, .top-nav a.active { color: #ff98e8; text-shadow: 0 0 .7rem rgb(255 104 218 / 38%); }
.channel-switch {
  justify-self: end;
  appearance: none;
  border: 1px solid var(--line);
  min-height: 2.1rem;
  padding: .52rem .75rem;
  color: #dcd7ed;
  background: rgb(11 13 20 / 78%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%);
}
.channel-switch:hover { color: #fff; border-color: var(--pink); box-shadow: 0 0 1rem rgb(255 89 205 / 12%); }
.channel-led { width: .45rem; aspect-ratio: 1; border-radius: 50%; background: var(--pink); box-shadow: 0 0 .7rem var(--pink); }

.workspace {
  max-width: 1640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(7.8rem, 10vw, 10.5rem) minmax(0, 1fr) clamp(9rem, 11vw, 12rem);
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 2.3vh, 1.8rem) 0 1.2rem;
  min-height: calc(100svh - 7rem);
}
.left-rail, .right-rail { min-width: 0; position: relative; }
.left-rail { border-right: 1px solid rgb(121 115 170 / 18%); padding-right: clamp(.6rem, 1.2vw, 1rem); }
.right-rail { border-left: 1px solid rgb(121 115 170 / 18%); padding-left: clamp(.65rem, 1.2vw, 1rem); }

.city-strip {
  height: clamp(8rem, 17vh, 12rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dim);
  background:
    linear-gradient(to top, #05060a 0 21%, transparent 21%),
    radial-gradient(circle at 68% 22%, rgb(213 171 255 / 13%), transparent 20%),
    linear-gradient(#0b0d15, #07080c);
}
.city-strip::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  opacity: .8;
  background: repeating-linear-gradient(90deg, #11141c 0 14px, #08090d 14px 25px);
  clip-path: polygon(0 55%, 10% 38%, 19% 52%, 27% 18%, 38% 47%, 50% 28%, 59% 58%, 72% 19%, 84% 41%, 100% 21%, 100% 100%, 0 100%);
}
.moon, .tiny-moon { position: absolute; border-radius: 50%; box-shadow: -5px 2px 0 0 #d9c7ff; width: 1.15rem; height: 1.15rem; }
.moon { right: 1rem; top: 1.15rem; opacity: .85; }
.pole { position: absolute; bottom: 9%; width: 2px; background: #26283a; }
.p1 { height: 55%; left: 28%; } .p2 { height: 43%; left: 72%; }
.pole::before { content: ""; position: absolute; top: 18%; left: -7px; width: 15px; height: 2px; background: #26283a; }
.wire { position: absolute; height: 1px; background: #242638; transform-origin: left; }
.w1 { width: 85%; top: 34%; left: 8%; transform: rotate(7deg); }
.w2 { width: 82%; top: 45%; left: 4%; transform: rotate(-4deg); }
.vertical-copy { margin: 1.2rem 0 0; color: #aaa2ca; font-size: .64rem; letter-spacing: .12em; writing-mode: vertical-rl; min-height: 10rem; }
.rail-copy { margin: 1.1rem 0; color: #a9a3bb; font-size: .62rem; line-height: 1.35; letter-spacing: .08em; }
.tape-osd { display: grid; gap: .28rem; margin-top: 1.6rem; color: #d8d1e9; font-size: .72rem; }
.eq { display: flex; align-items: end; gap: 2px; height: 1.4rem; margin: 1.1rem 0 .55rem; }
.eq i { width: 3px; height: 30%; background: var(--pink); box-shadow: 0 0 .3rem rgb(255 98 213 / 40%); animation: eq 1.15s steps(4) infinite alternate; }
.eq i:nth-child(2n) { animation-delay: -.45s; height: 70%; }.eq i:nth-child(3n) { animation-delay: -.8s; height: 45%; }.eq i:nth-child(5n) { height: 95%; }
.rail-tags { color: #aaa4bd; font-size: .58rem; line-height: 1.35; letter-spacing: .06em; }

.archive { min-width: 0; }
.archive-head { min-height: 4.2rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.eyebrow { margin: 0 0 .25rem; color: #9c96ac; font-size: .55rem; letter-spacing: .12em; }
h1 { margin: 0; color: #efeaff; font-size: clamp(1.45rem, 2.2vw, 2.2rem); line-height: .9; letter-spacing: .045em; text-shadow: 2px 0 rgb(255 61 209 / 38%), -2px 0 rgb(67 224 255 / 35%); }
.deck-readout { display: grid; justify-items: end; gap: .1rem; color: #bbb4cf; font-size: .56rem; line-height: 1.2; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.gallery-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(.8rem, 1.35vw, 1.25rem); align-items: stretch; }
.right-stack { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(.8rem, 1.35vw, 1.25rem); min-height: 0; }
.window {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #7772ad;
  background: #080a10;
  box-shadow: 0 0 0 1px rgb(83 74 142 / 15%), 0 1.1rem 2.4rem rgb(0 0 0 / 26%);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.window::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 1.4rem rgb(72 48 111 / 9%); }
.window-main { min-height: clamp(34rem, 68vh, 47rem); }
.window-top, .window-bottom { min-height: 0; }
.window-bar { height: 2rem; border-bottom: 1px solid #7772ad; display: flex; align-items: center; justify-content: space-between; padding: 0 .65rem; color: #afa9c4; font-size: .58rem; letter-spacing: .07em; background: linear-gradient(180deg, #0d0f17, #090b11); }
.window-bar b { font-weight: 400; color: #cfc9dd; }
.media { min-height: 0; position: relative; overflow: hidden; background: #090a0f; isolation: isolate; }
.media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .16; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(0 0 0 / 34%) 4px 5px); }
.media img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.84) contrast(1.04) brightness(.92); transition: transform 2.8s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.window:hover .media img { transform: scale(1.018); filter: saturate(.92) contrast(1.06) brightness(.96); }
.media-square img { object-position: 50% 50%; image-rendering: auto; }
.room-image img { object-position: 50% 35%; }
.car-image img { object-position: 50% 57%; }
.image-osd { position: absolute; z-index: 4; display: grid; color: rgb(245 242 250 / 89%); font-size: clamp(.66rem, .9vw, .9rem); line-height: 1.05; letter-spacing: .05em; text-shadow: 2px 1px #06070a, -1px 0 #06070a; }
.image-osd-left { top: 1rem; left: 1rem; }
.image-osd-bottom { left: 1rem; bottom: 1rem; }
.image-osd-right { right: 1rem; top: 1rem; text-align: right; }
.scribble, .road-copy { position: absolute; z-index: 4; right: 1.1rem; color: rgb(234 220 229 / 74%); font-size: clamp(.52rem, .68vw, .7rem); line-height: 1.18; letter-spacing: .06em; text-align: right; text-shadow: 1px 1px #08090d; transform: rotate(-2deg); }
.scribble { bottom: .9rem; }.road-copy { bottom: 1rem; }
.caption { min-height: 3.1rem; border-top: 1px solid #7772ad; display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .48rem .65rem; color: #c4bed8; background: #0b0d14; }
.caption .num { border: 1px solid #756caa; padding: .26rem .35rem; color: #d78fe8; font-size: .8rem; line-height: 1; box-shadow: inset 0 0 .5rem rgb(139 76 201 / 18%); }
.caption > span:nth-child(2) { min-width: 0; display: grid; gap: .1rem; }
.caption strong { color: #d7d0e9; font-size: .73rem; letter-spacing: .1em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caption small { color: #837d9b; font-size: .49rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slashes { color: #9d8acb; letter-spacing: .08em; }

.signal-window { height: clamp(8rem, 17vh, 12rem); border: 1px solid #746fa0; position: relative; overflow: hidden; background: linear-gradient(to bottom, #111527 0%, #251743 50%, #0b0c13 100%); }
.signal-window::before { content: ""; position: absolute; inset: auto 0 0; height: 31%; background: #07080c; clip-path: polygon(0 38%, 8% 21%, 20% 35%, 29% 9%, 38% 45%, 50% 24%, 61% 54%, 73% 16%, 82% 41%, 100% 19%, 100% 100%, 0 100%); }
.tiny-moon { right: 1.15rem; top: 1rem; width: 1rem; height: 1rem; opacity: .9; }
.skyline { position: absolute; bottom: 20%; left: 22%; width: 2px; height: 38%; background: #181b29; }
.skyline::before { content: ""; position: absolute; top: 28%; left: -7px; width: 16px; height: 2px; background: #181b29; }
.signal-glitch { position: absolute; height: 3px; background: var(--pink); opacity: .65; box-shadow: 10px 7px 0 var(--cyan), -6px 12px 0 #7a53ff; }
.g1 { width: 20px; left: 13%; top: 35%; }.g2 { width: 12px; right: 15%; top: 68%; }
.handwriting { margin: 1rem 0 .7rem; padding-left: .8rem; color: #a69bc7; font-family: Georgia, serif; font-style: italic; font-size: clamp(.7rem, .9vw, .95rem); line-height: 1.25; transform: rotate(-5deg); }
.cassette { margin: .9rem 0 1.4rem auto; width: 3rem; height: 1.8rem; border: 1px solid #756b9b; transform: rotate(-8deg); position: relative; }
.cassette::before { content: ""; position: absolute; inset: .25rem .35rem; border: 1px solid #756b9b; }
.cassette span { position: absolute; width: .55rem; aspect-ratio: 1; border: 1px solid #756b9b; border-radius: 50%; top: .59rem; }.cassette span:first-child { left: .55rem; }.cassette span:last-child { right: .55rem; }
.side-nav { display: grid; gap: .7rem; padding: .85rem 0 1.1rem; border-top: 1px solid rgb(118 109 162 / 35%); border-bottom: 1px solid rgb(118 109 162 / 35%); }
.side-nav a { text-decoration: none; color: #a7a0b8; font-size: .62rem; letter-spacing: .08em; padding-left: 1rem; position: relative; }
.side-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: .42rem; height: 1px; background: transparent; }
.side-nav a:hover, .side-nav a.active { color: #d8c6ff; text-shadow: 0 0 .55rem rgb(187 125 255 / 26%); }
.side-nav a.active::before { background: var(--violet); box-shadow: .2rem 0 0 var(--pink); }
.manifesto { color: #a19ab1; font-size: .58rem; line-height: 1.3; letter-spacing: .07em; margin-top: 1.2rem; }
.signal-state { display: flex; align-items: center; gap: .45rem; margin-top: 1.1rem; color: #aaa4bb; font-size: .55rem; }
.signal-state i { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: #8fffc5; box-shadow: 0 0 .7rem #8fffc5; animation: blink 2.4s steps(1) infinite; }

.footer { max-width: 1640px; margin: 0 auto; min-height: 2.2rem; border-top: 1px solid var(--line-dim); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; color: #777189; font-size: .5rem; letter-spacing: .1em; }
.footer span:last-child { justify-self: end; }

.channel-card { position: fixed; z-index: 170; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; min-width: min(21rem, 80vw); padding: 1.4rem 2rem; border: 2px solid #d8d3e3; background: rgb(5 6 9 / 88%); color: #f4efff; text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); opacity: 0; pointer-events: none; }
.channel-card span { color: #aca3bd; font-size: .72rem; text-shadow: none; }.channel-card strong { margin-top: .2rem; font-size: clamp(1.5rem, 5vw, 3.5rem); letter-spacing: .04em; }.channel-card small { margin-top: .4rem; color: #a99cc2; text-shadow: none; }
.channel-card.show { animation: channelCard .95s steps(3) both; }

body.channel-1 { --line: #a56b83; --line-dim: rgb(165 107 131 / 34%); --violet: #ffb0c9; --pink: #ff7b9d; --cyan: #8cb8ff; }
body.channel-1 .shell { background: radial-gradient(circle at 85% 25%, rgb(166 67 93 / 12%), transparent 26rem), radial-gradient(circle at 10% 80%, rgb(58 68 130 / 9%), transparent 25rem), linear-gradient(180deg, #0d090f, #08080d); }
body.channel-1 .channel-led { background: #ffc46f; box-shadow: 0 0 .7rem #ffc46f; }
body.channel-1 .signal-state i { background: #ffc46f; box-shadow: 0 0 .7rem #ffc46f; }
body.channel-1 .window, body.channel-1 .window-bar, body.channel-1 .caption { border-color: #8b657a; }
body.channel-1 .media img { filter: saturate(.9) sepia(.05) contrast(1.04) brightness(.92); }

body.channel-2 { --line: #5e8f91; --line-dim: rgb(94 143 145 / 32%); --violet: #83d9d5; --pink: #ff687c; --cyan: #81e6dd; }
body.channel-2 .shell { filter: saturate(.74) contrast(1.07); background: radial-gradient(circle at 85% 30%, rgb(32 117 117 / 10%), transparent 27rem), linear-gradient(180deg, #070b0c, #050708); }
body.channel-2 .noise { opacity: .13; }
body.channel-2 .scanlines { opacity: .31; }
body.channel-2 .tracking { opacity: .48; animation-duration: 3.5s; }
body.channel-2 .channel-led, body.channel-2 .signal-state i { background: var(--danger); box-shadow: 0 0 .8rem var(--danger); animation: lost .65s steps(1) infinite; }
body.channel-2 .media img { filter: saturate(.6) contrast(1.14) brightness(.84) hue-rotate(8deg); }
body.channel-2 .window { box-shadow: 4px 0 0 rgb(255 72 99 / 12%), -4px 0 0 rgb(75 238 226 / 10%); }

body.channel-switching .switch-flash { animation: snow .62s steps(5) both; }
body.channel-switching .shell { animation: tune .62s steps(2) both; }
body.channel-switching .window { animation: windowTune .62s steps(2) both; }
body.tape-jump .shell { animation: jump .15s steps(2) 1; }
body.tape-jump .tracking { height: 13px; opacity: .8; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.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; }

@keyframes noise { 0% { transform: translate(0); } 25% { transform: translate(-.7%, .5%); } 50% { transform: translate(.6%, -.8%); } 75% { transform: translate(.35%, .65%); } 100% { transform: translate(0); } }
@keyframes tracking { 0% { transform: translateY(-15vh); opacity: 0; } 8% { opacity: .3; } 17% { transform: translateY(112vh); opacity: .08; } 100% { transform: translateY(112vh); opacity: 0; } }
@keyframes dropout { 0%, 24% { transform: translateY(-9%); } 25%, 54% { transform: translateY(7%); } 55%, 76% { transform: translateY(-3%); } 77%, 100% { transform: translateY(12%); } }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes blink { 0%, 91%, 100% { opacity: 1; } 92%, 96% { opacity: .2; } }
@keyframes lost { 0%, 45% { opacity: 1; } 46%, 100% { opacity: .17; } }
@keyframes snow { 0% { opacity: 0; } 9% { opacity: .95; } 23% { opacity: .22; } 39% { opacity: .76; } 59% { opacity: .14; } 78% { opacity: .42; } 100% { opacity: 0; } }
@keyframes tune { 0%, 100% { transform: translate(0); filter: none; } 15% { transform: translate(-7px, 2px) skewX(.5deg); filter: contrast(1.3) brightness(1.2); } 35% { transform: translate(9px, -2px) skewX(-.45deg); } 52% { transform: translate(-3px, 1px); filter: contrast(1.1) brightness(.8); } 72% { transform: translate(4px, 0); } }
@keyframes windowTune { 0%,100% { filter: none; } 22% { filter: hue-rotate(45deg) contrast(1.25); } 47% { filter: hue-rotate(-31deg) contrast(.87); } 74% { filter: hue-rotate(13deg) contrast(1.13); } }
@keyframes channelCard { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } 9%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 78% { opacity: .32; transform: translate(calc(-50% + 5px), -50%); } 86% { opacity: 1; transform: translate(calc(-50% - 4px), -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes jump { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(3px); } 100% { transform: translateY(0); } }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto; }
  .top-nav { display: none; }
  .workspace { grid-template-columns: 7.3rem minmax(0, 1fr) 8.7rem; gap: 1rem; }
  .window-main { min-height: 38rem; }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .left-rail, .right-rail { display: none; }
  .gallery-grid { grid-template-columns: 1fr; }
  .right-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .window-main { min-height: min(80vh, 45rem); }
  .window-top, .window-bottom { min-height: 24rem; }
  .footer { grid-template-columns: 1fr auto; }
  .footer > span:nth-child(2) { display: none; }
}

@media (max-width: 620px) {
  .shell { padding-inline: .65rem; }
  .site-header { grid-template-columns: 1fr; gap: .65rem; padding-bottom: .7rem; }
  .channel-switch { justify-self: stretch; justify-content: center; }
  .archive-head { align-items: start; }
  .deck-readout { font-size: .48rem; }
  .right-stack { grid-template-columns: 1fr; }
  .window-main { min-height: 34rem; }
  .window-top, .window-bottom { min-height: 25rem; }
  .caption { gap: .5rem; }
  .caption strong { font-size: .63rem; }
  .caption small { font-size: .44rem; }
  .image-osd, .scribble, .road-copy { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}