/* Project: Mika — the site is a TV: five channels, one gadget each, every channel its own riso world.
   Safari (2026-10-16): no blend modes or blur filters over animated things, SVG-filtered text on its own layer. */

@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --ink: #1a1a18;
  --accent: #ff1f55;
  --accent-deep: #d6123f;
  --teal: #4fc7c0;
  --blue: #2a45c7;
  --osd: #6dff7c;
  --phosphor: #ff4f7b;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --pixel: "VT323", "Space Mono", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* the sliding switches pass their stop by ~1.5 px, whatever their travel (Eden, v5 notes: "just a little bit") */
  --ease-knob-36: cubic-bezier(.34, 1.37, .64, 1);   /* 36 px travel: ID/EN on the remote */
  --ease-turn: cubic-bezier(.34, 1.22, .64, 1);      /* Tanya Mika's knob: 90°, passes by ~2° */
  --ease-knob-116: cubic-bezier(.34, 1.2, .64, 1);   /* 116 px: SHORTS/LONGS */
  --side: max(60px, calc((100vw - 1480px) / 2));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #111; color: var(--ink); font-family: var(--mono); overflow: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; }

/* the grain: a noise tile (site.js), plain alpha, its own layer */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .5; background-size: 220px 220px; transform: translateZ(0); }

/* ---- the channel neon, top left, on a change: each line on its own black caption box, like a TV's on-screen
   display; the boxes wipe in from the left, then the neon just goes, at once (Eden, v6 notes) ---- */
.osd {
  position: fixed; left: 24px; top: 14px; z-index: 29; pointer-events: none; visibility: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--pixel); color: var(--osd); line-height: 1;
  text-shadow: 0 0 2px rgba(255,255,255,.55), 0 0 12px rgba(109,255,124,.7);
}
.osd.on { visibility: visible; }
.osd-line {
  display: block; clip-path: inset(0 100% 0 0);
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.25) 2px 3px), rgba(4,9,5,.68);
  box-shadow: inset 0 0 0 1px rgba(109,255,124,.08);
}
.osd b { font-weight: 400; font-size: clamp(72px, 5vw, 124px); line-height: .8; letter-spacing: .02em; padding: .16em .14em .04em .12em; }
.osd span { font-size: clamp(22px, 1.6vw, 38px); letter-spacing: .1em; padding: .2em .5em .28em .38em; }
.osd.on .osd-line { animation: osd-in .24s var(--ease-out) both; }
.osd.on .osd-line + .osd-line { animation-delay: .07s; }
@keyframes osd-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- the remote ---- */
.remote { position: fixed; top: 0; right: 0; z-index: 30; padding: 14px 18px; }
.remote-right {
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px;
  background: linear-gradient(180deg, #2b2b2e, #18181a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #000, 0 8px 18px rgba(0,0,0,.35);
}
.home {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, #3a3a3e, #26262a); color: #d9d4ca; font-size: 11px; letter-spacing: .14em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #000; transition: transform .08s, box-shadow .08s;
}
.home b { color: #fff; }
.home:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.seg {
  display: flex; align-items: baseline; gap: 4px; padding: 2px 10px 0; border-radius: 6px; min-width: 76px;
  background: #0b0405; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px #000;
  font-family: var(--pixel); color: var(--accent); text-shadow: 0 0 6px rgba(255,31,85,.8);
}
.seg-ch { font-size: 14px; opacity: .7; }
.seg-num { font-size: 30px; line-height: 30px; letter-spacing: .06em; }
.rocker { display: flex; flex-direction: column; gap: 2px; }
.rock {
  width: 30px; height: 17px; border: 0; border-radius: 4px; font-size: 9px; line-height: 1;
  background: linear-gradient(180deg, #4a4a4f, #2e2e32); color: #cfcac0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #000; transition: transform .08s, box-shadow .08s;
}
.rock:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.lang { position: relative; display: block; width: 78px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: #0d0d0e; box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
/* each half placed on its own, not by the button's flex: Safari laid a button's insides out at its top (Eden, 2026-10-17) */
.lang-opt { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; display: grid; place-items: center; padding-bottom: 2px; line-height: 1; font-size: 11px; font-weight: 700; color: #6e6a62; transition: color .25s; }
.lang-opt[data-l="id"] { left: 0; }
.lang-opt[data-l="en"] { right: 0; }
.lang-knob {
  position: absolute; top: 3px; left: 3px; width: 36px; height: 28px; border-radius: 6px;
  background: linear-gradient(180deg, #ecebe6, #bdbbb4); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #77756f, 0 3px 6px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-knob-36);
}
html[lang="en"] .lang-knob { transform: translateX(36px); }
html[lang="id"] .lang-opt[data-l="id"], html[lang="en"] .lang-opt[data-l="en"] { color: #1a1a18; }
/* the first visit: a hi-fi readout slides out from under the remote like a tape tray (the remote's plastic, a bracket up to
   the middle of ID/EN, a red LED), both languages glowing on a VFD window, a ▲ bouncing up to the switch; pressed or
   timed out, it slides back in (site.js; Eden, 2026-10-17: "creative and nice looking", cassette futurism) */
.remote-right { position: relative; z-index: 1; }   /* over the readout, so it comes out from underneath */
.lang-hint { position: absolute; top: calc(100% - 18px); right: 18px; z-index: 0; cursor: pointer; --neck: 45px; }
.lang-hint[hidden] { display: none; }
.lh-unit { padding-top: 14px; animation: lh-out .62s var(--ease-spring) both; }
.lang-hint.off .lh-unit { animation: lh-in .36s ease-in both; pointer-events: none; }
@keyframes lh-out { from { transform: translateY(-100%); clip-path: inset(100% -40px -40px -40px); } to { transform: none; clip-path: inset(0 -40px -40px -40px); } }
@keyframes lh-in { from { transform: none; clip-path: inset(0 -40px -40px -40px); } to { transform: translateY(-100%); clip-path: inset(100% -40px -40px -40px); } }
.lh-body {
  position: relative; display: grid; gap: 6px; padding: 7px 9px 9px; border-radius: 10px;
  background: linear-gradient(180deg, #2b2b2e, #18181a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #000, 0 10px 22px rgba(0,0,0,.4);
}
.lh-neck {
  position: absolute; top: -14px; right: calc(var(--neck) - 13px); width: 26px; height: 15px;
  background: linear-gradient(90deg, #141416, #3a3a40 45%, #1b1b1e); clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}
.lh-head { display: flex; align-items: center; gap: 8px; padding: 0 3px; font-size: 8px; font-weight: 700; letter-spacing: .24em; color: #8b867b; }
.lh-vent { margin-left: 2px; width: 34px; height: 7px; background: repeating-linear-gradient(90deg, #0b0b0c 0 2px, #333338 2px 3px, transparent 3px 5px); border-radius: 1px; }
.lh-led { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(255,31,85,.9); animation: lh-blink 1.1s steps(1) infinite; }
@keyframes lh-blink { 50% { background: #3a0d18; box-shadow: none; } }
.lh-vfd {
  position: relative; overflow: hidden; padding: 7px 13px 6px 12px; border-radius: 5px;
  background: radial-gradient(120% 140% at 30% 0%, #0e2623, #061110 70%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9), inset 0 0 0 1px #000;
  font-family: var(--pixel); font-size: 19px; line-height: 1.08; color: #8cfbe9; white-space: nowrap;
  text-shadow: 0 0 2px rgba(140,251,233,.9), 0 0 9px rgba(79,199,192,.65);
}
.lh-vfd::before {   /* the VFD's dot grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px), repeating-linear-gradient(180deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
}
.lh-vfd::after {    /* the glass, a light passing over it */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(190,255,245,.12) 48%, transparent 58%) no-repeat, linear-gradient(170deg, rgba(255,255,255,.07), transparent 45%);
  background-size: 300% 100%, 100% 100%; animation: lh-sweep 3.4s 1.1s ease-in-out infinite;
}
@keyframes lh-sweep { 0% { background-position: 100% 0, 0 0; } 60%, 100% { background-position: 0 0, 0 0; } }
.lh-line { position: relative; margin: 0; }
/* one glowing ▲ under the bracket, bouncing up to ID/EN (Eden, v15 notes: not one per line) */
.lh-up {
  position: absolute; top: 4px; right: calc(var(--neck) - 7px); width: 14px; text-align: center; z-index: 1;
  font-family: var(--mono), sans-serif; font-size: 11px; line-height: 1; color: #8cfbe9;
  text-shadow: 0 0 3px rgba(140,251,233,.95), 0 0 10px rgba(79,199,192,.8); animation: lh-bounce 1s ease-in-out infinite;
}
@keyframes lh-bounce { 0%, 100% { transform: none; } 45% { transform: translateY(-3px); } }

/* ---- the tuner: a dial, a magnifying glass for its needle, the station names ---- */
.tuner { position: fixed; right: 26px; top: 50%; z-index: 30; transform: translateY(-50%); }
.tuner-body {
  position: relative; width: 44px; padding: 16px 0; border-radius: 22px;
  background: linear-gradient(90deg, #19191b, #2a2a2d 60%, #1d1d20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px #000, 0 3px 0 #000, 0 10px 24px rgba(0,0,0,.4);
}
.tuner-scale { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.tuner-scale::before {                            /* the scale runs from 01 to 05, nothing beyond */
  content: ""; position: absolute; top: 15px; bottom: 15px; left: 50%; width: 14px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #77715f 0 1px, transparent 1px 6px); opacity: .55;
}
.tuner-scale button, .lens-zoom .st {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: #121213; color: #8b867b; font-family: var(--pixel); font-size: 18px;
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
}
.tuner-scale button b, .lens-zoom .st b { font-weight: 400; }
.tuner-scale button.on, .lens-zoom .st.on { color: var(--accent); text-shadow: 0 0 6px rgba(255,31,85,.9); }
.lens { position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin: 0 0 0 -20px; z-index: 3; cursor: grab; touch-action: none; will-change: transform; transition: transform .7s var(--ease-spring); }
.lens.grab { cursor: grabbing; }
.lens.drag { transition: transform .08s linear; }
.lens-rim {
  position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, #6b6860, #f4f2ec, #8f8b82, #e2dfd6, #5d5a53, #c9c6bd, #6b6860);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px rgba(255,31,85,.45), 0 5px 10px rgba(0,0,0,.55);
}
.lens-view, .lens-glass { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; }
.lens-view { background: linear-gradient(90deg, #1d1d20, #2e2e32 60%, #212124); }
.lens-zoom { transition: transform .7s var(--ease-spring); }
.lens.drag .lens-zoom { transition: transform .08s linear; }
.lens-zoom { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 44px; padding: 16px 0; }
.lens-zoom::before { content: ""; position: absolute; top: 31px; bottom: 31px; left: 50%; width: 14px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, #8f8873 0 1px, transparent 1px 6px); opacity: .7; }
.lens-zoom .st { text-shadow: -.6px 0 rgba(255,60,90,.7), .6px 0 rgba(80,220,230,.7); }
.lens-glass {
  background:
    radial-gradient(60% 45% at 30% 22%, rgba(255,255,255,.45), rgba(255,255,255,.05) 55%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -6px 10px rgba(0,0,0,.4);
}
.tuner-names {
  position: absolute; right: calc(100% + 16px); top: 16px; margin: 0; padding: 0; list-style: none; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 24px;
}
.tuner-names li {
  height: 30px; display: flex; align-items: center; white-space: nowrap; padding: 0 11px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #d8d3c8;
  background: rgba(16,16,18,.9); box-shadow: 0 4px 12px rgba(0,0,0,.3);
  opacity: 0; transform: translateX(18px) scale(.9); transform-origin: right center;
  transition: opacity .22s, transform .45s var(--ease-spring), background .25s, color .25s;
}
.tuner.names .tuner-names li, .tuner:hover .tuner-names li { opacity: .92; transform: none; }
.tuner.names .tuner-names li:nth-child(2) { transition-delay: .03s; }
.tuner.names .tuner-names li:nth-child(3) { transition-delay: .06s; }
.tuner.names .tuner-names li:nth-child(4) { transition-delay: .09s; }
.tuner.names .tuner-names li:nth-child(5) { transition-delay: .12s; }
.tuner.names .tuner-names li.sel, .tuner:hover .tuner-names li.sel { opacity: 1; transform: scale(1.45); background: var(--accent); color: #fff; box-shadow: 0 0 18px rgba(255,31,85,.55), 0 4px 12px rgba(0,0,0,.3); }

/* ---- the TV and its channels ---- */
.tv { position: fixed; inset: 0; overflow: hidden; background: #000; }
.ch { position: absolute; inset: 0; display: none; overflow: hidden; padding: 128px calc(var(--side) + 40px) 34px var(--side); }
.ch.on, .ch.leaving { display: grid; }
.ch.entering { animation: crt-on .55s var(--ease-out) both; }
.ch.leaving { z-index: 2; animation: crt-off .28s ease-in both; }
@keyframes crt-on {
  0% { transform: scale(1.04, .004); filter: brightness(6) saturate(0); }
  35% { transform: scale(1.02, .004); filter: brightness(4) saturate(0); }
  60% { transform: scale(1, 1.03); filter: brightness(1.6) saturate(.6); }
  100% { transform: none; filter: none; }
}
@keyframes crt-off {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, .004); filter: brightness(5) saturate(0); }
  100% { transform: scale(0, .004); filter: brightness(8) saturate(0); }
}
.static { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 25; pointer-events: none; display: none; image-rendering: pixelated; }
.static.run { display: block; }

/* ---- shared type ---- */
.title-ink { margin: 0; font-weight: 700; line-height: .86; letter-spacing: -.045em; color: var(--ink); filter: url(#inkHeavy); will-change: transform; }
.title-ink span { display: block; }

/* ---- the 3D gadgets: tilted by site.js, given depth by stacked slices ---- */
.stage { position: relative; }
.obj { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform .5s var(--ease-out); }
.obj.live { transition: transform .08s linear; }
.obj > .slice { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.z1 { transform: translateZ(4px); }
.z2 { transform: translateZ(9px); }
.glare { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 6; }
.glare i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(30% 25% at 50% 50%, rgba(255,255,255,.16), transparent 60%); will-change: transform; transform: translate(0, -10%); }
.floor-shadow {
  position: absolute; left: 6%; right: 6%; bottom: -46px; height: 64px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.42), rgba(0,0,0,.18) 45%, transparent 72%);
}

/* ======================================================================================== */
/* CH 01 · MIKA                                                                              */
/* ======================================================================================== */
.ch-mika {
  background:
    radial-gradient(38vw 38vw at 6% 68%, rgba(255,31,85,.30), rgba(255,31,85,.12) 45%, transparent 70%),
    radial-gradient(34vw 34vw at 96% 4%, rgba(79,199,192,.36), rgba(79,199,192,.12) 45%, transparent 70%),
    radial-gradient(120% 90% at 30% 20%, #cfcec9 0%, #bdbcb7 45%, #a9a8a3 100%);
  grid-template-columns: minmax(0, 720px) auto; justify-content: center; align-items: center; column-gap: clamp(48px, 7vw, 170px);
  padding-top: 110px;
}
.mika-copy { position: relative; display: grid; gap: 28px; }
.ch-mika .title-ink .t1 { font-size: clamp(30px, min(4.2vw, 7vh), 92px); margin-bottom: .08em; }
.ch-mika .title-ink .t2 { position: relative; font-size: clamp(110px, min(14.5vw, 25vh), 290px); letter-spacing: -.07em; margin-left: -.04em; }
.ch-mika .title-ink .t2::before { content: attr(data-text); position: absolute; left: .035em; top: .03em; z-index: -1; color: var(--accent); }
.lede { margin: 0; max-width: 30ch; font-size: clamp(14px, min(1.15vw, 1.9vh), 22px); line-height: 1.6; filter: url(#inkLight); will-change: transform; }
.keys { display: flex; flex-wrap: wrap; gap: 14px; }
.key {
  display: inline-grid; place-items: center; width: 56px; height: 52px; border-radius: 13px; text-decoration: none;
  background: linear-gradient(180deg, #f6f4ee, #dcd9cf);
  box-shadow: inset 0 1px 0 #fff, inset 0 -4px 0 rgba(0,0,0,.07), 0 3px 0 #cbc8be, 0 9px 16px -6px rgba(0,0,0,.3);
  transition: transform .06s, box-shadow .06s;
}
.key span { display: grid; place-items: center; }
.key svg { width: 23px; height: 23px; fill: var(--ink); transition: fill .2s; overflow: visible; }
.key:hover svg { fill: var(--accent); }
.key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.07), 0 1px 0 #cbc8be, 0 3px 6px -2px rgba(0,0,0,.25); }

/* the inspection pad */
.ch-mika .stage { justify-self: end; }
.pad {
  width: min(40vw, calc((100svh - 160px) * .78), 720px); padding: 18px 20px 14px; border-radius: 42px;
  background: linear-gradient(155deg, #3c3c41 0%, #232327 40%, #151517 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.7), inset 2px 0 0 rgba(255,255,255,.04);
}
.pad-top { display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px 10px; color: #8c877c; font-size: 10px; letter-spacing: .14em; }
.pad-label { font-weight: 700; color: #d8d3c7; }
.pad-screen {
  position: relative; aspect-ratio: 4 / 5; border-radius: 34px / 40px; overflow: hidden; background: #050506; transform: translateZ(.6px);
  box-shadow: inset 0 0 0 3px #000, 0 0 0 6px #0b0b0d, 0 0 0 7px #34343a, inset 0 0 60px rgba(0,0,0,.9);
}
.pad-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.pad-screen canvas.drag { cursor: grabbing; }
.screen-fx { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.07), transparent 40%), radial-gradient(100% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%); box-shadow: inset 0 0 22px rgba(0,0,0,.8); }
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--pixel); color: var(--phosphor); text-shadow: 0 0 6px rgba(255,31,85,.75); font-size: 17px; letter-spacing: .04em; }
.hud > div { position: absolute; display: flex; flex-direction: column; line-height: 1; }
.hud b { font-weight: 400; font-size: 22px; }
.hud-tl { left: 26px; top: 22px; } .hud-tl span { opacity: .7; }
.hud-tr { right: 26px; top: 22px; align-items: flex-end; }
.hud-bl { left: 26px; bottom: 22px; flex-direction: row !important; align-items: center; gap: 6px; }
.hud-bar { display: inline-block; width: 70px; height: 9px; border: 1px solid currentColor; padding: 1px; }
.hud-bar i { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
.hud-br { right: 26px; bottom: 22px; opacity: .8; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.callouts { position: absolute; inset: 0; }
.co { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s; will-change: transform, opacity; }
.co.on { opacity: 1; }
.co-dot { position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 0 0 8px var(--phosphor); }
.co-line { position: absolute; left: 0; top: -.75px; height: 1.5px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, var(--phosphor)); box-shadow: 0 0 6px var(--phosphor); }
.co-label { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 6px; font-size: 15px; color: #fff; background: rgba(255,31,85,.22); border: 1px solid rgba(255,79,123,.8); }
.pad-bottom { display: flex; align-items: center; gap: 18px; padding: 14px 12px 4px; }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-body { position: relative; width: 42px; height: 20px; border-radius: 10px; background: #0a0a0b; box-shadow: inset 0 2px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.1); }
.toggle-lever { position: absolute; top: 2px; left: 2px; width: 22px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #d9d6cd, #8f8c84); box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0,0,0,.7); transition: transform .25s var(--ease-spring), background .2s; }
.toggle input:checked + .toggle-body .toggle-lever { transform: translateX(16px); background: linear-gradient(180deg, #ff6d8f, var(--accent-deep)); box-shadow: inset 0 1px 0 #ffb3c4, 0 0 10px rgba(255,31,85,.7); }
.toggle input:focus-visible + .toggle-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-label { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #b8b2a6; }
.grille { flex: 1; height: 18px; background: repeating-linear-gradient(90deg, #0b0b0c 0 3px, transparent 3px 6px); opacity: .9; border-radius: 3px; }
.led { width: 9px; height: 9px; border-radius: 50%; background: #3a0d18; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.led.on { background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 2px #fff inset; }

/* ======================================================================================== */
/* CH 02 · TANYA MIKA                                                                        */
/* ======================================================================================== */
.ch-tanya {
  background: radial-gradient(110% 90% at 70% 30%, #ff3a68 0%, #f41d4f 45%, #c8103b 100%);
  grid-template-columns: auto minmax(0, 560px); justify-content: center; align-items: center; column-gap: clamp(48px, 7vw, 150px);
  padding-top: 90px;
}
.halftone {
  position: absolute; inset: -10%; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(120,0,25,.55) 1.4px, transparent 1.6px); background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(70% 70% at 15% 90%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 70% at 15% 90%, #000 0%, transparent 70%);
}
.tanya-copy { position: relative; display: grid; gap: 24px; color: #fff3ea; }
.tanya-title { position: relative; font-size: clamp(64px, 9vw, 160px); }
.title-ink.light { color: #fff3ea; font-size: inherit; }
.title-ink.light span:last-child { color: var(--ink); }
/* the English page says what the name means: a small note right of TANYA (Eden, v7 notes) */
.gloss { position: absolute; left: 2.95em; top: .43em; transform: translateY(-50%); }
.gloss i { display: block; width: max-content; max-width: 15ch; font-size: clamp(11px, .95vw, 15px); font-style: italic; line-height: 1.35; color: #fff3ea; filter: url(#inkLight); will-change: transform; }
html[lang="id"] .gloss { display: none; }
.tanya-desc { margin: 0; max-width: 46ch; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; filter: url(#inkLight); will-change: transform; }
.fine { margin: 0; font-size: 12px; opacity: .8; max-width: 44ch; line-height: 1.6; }
.ch-tanya .stage, .tanya-copy { z-index: 1; }

/* the main controls: two units in the Game Boy's plastic, each wired to the Game Boy's EXT port (Eden, v6 notes) */
.units { display: flex; align-items: flex-end; gap: 20px; margin-top: 8px; }
.unit {
  position: relative; flex: none; height: 128px; border-radius: 12px 12px 26px 12px;
  background: linear-gradient(160deg, #eceae5 0%, #d7d6d0 55%, #c6c5bf 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.1), inset 3px 0 0 rgba(255,255,255,.45), 0 24px 26px -16px rgba(80,0,20,.55);
}
.unit-lang { width: 136px; }
.unit-copy { width: 248px; }
.unit-label { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .16em; color: #2b3b8f; pointer-events: none; }
.grommet { position: absolute; left: 50%; bottom: -7px; width: 16px; height: 11px; margin-left: -8px; border-radius: 0 0 5px 5px; background: linear-gradient(180deg, #47474c, #1c1c1f); box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }

/* the language unit: a rotary knob, ID at 10 o'clock, EN at 2 */
.dial { position: absolute; inset: 0; }
.dial-mark { position: absolute; top: 13px; display: flex; align-items: center; gap: 5px; padding: 3px; border: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #2b3b8f; }
.m-id { left: 9px; } .m-en { right: 9px; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: #5a1a24; box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8); transition: background .15s, box-shadow .15s; }
.dial-mark.on .pip { background: var(--accent); box-shadow: 0 0 6px 1px rgba(255,31,85,.85), 0 1px 0 rgba(255,255,255,.8); }
.dial-tick { position: absolute; left: calc(50% - 1px); top: 24px; width: 2px; height: 7px; border-radius: 1px; background: #2b3b8f; transform-origin: 1px 46px; pointer-events: none; }
.t-id { transform: rotate(-45deg); } .t-en { transform: rotate(45deg); }
.knob { position: absolute; left: 50%; top: 40px; width: 60px; height: 60px; margin-left: -30px; padding: 0; border: 0; border-radius: 50%; background: #121214; box-shadow: 0 4px 0 #0b0b0d, 0 7px 10px rgba(0,0,0,.35), 0 0 0 4px rgba(40,40,60,.1); transition: transform .08s, box-shadow .08s; }
.knob:active { transform: translateZ(9px) translateY(2px); box-shadow: 0 2px 0 #0b0b0d, 0 3px 5px rgba(0,0,0,.35), 0 0 0 4px rgba(40,40,60,.1); }
.knob-turn { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#3a3a3f 0 5deg, #17171a 5deg 10deg); box-shadow: inset 0 0 0 1px #000, inset 0 2px 2px rgba(255,255,255,.2); transform: rotate(-45deg); transition: transform .42s var(--ease-turn); }
.unit-lang.en .knob-turn { transform: rotate(45deg); }
.knob-cap {
  position: absolute; inset: 7px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.05) 0 1px, rgba(255,255,255,.06) 1px 2px), radial-gradient(circle at 50% 50%, #ecebe6, #bdbcb6 70%, #9c9b95);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.7);
}
.knob-cap::after { content: ""; position: absolute; left: 50%; top: 3px; width: 4px; height: 15px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 5px rgba(255,31,85,.5); }
.knob::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 46%); }

/* the copy unit: a red rubber key in a well, a lamp that lights once the Game Boy has copied */
.unit-brand { position: absolute; left: 16px; top: 13px; font-size: 13px; color: #2b3b8f; letter-spacing: -.02em; pointer-events: none; }
.unit-brand b { font-weight: 700; font-style: italic; }
.unit-brand i { font-weight: 700; font-size: 14px; }
.lamp { position: absolute; right: 15px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 210deg, #6b6860, #f4f2ec, #8f8b82, #e2dfd6, #5d5a53, #c9c6bd, #6b6860); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.2); }
.lamp::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5e7d69, #1d3326 75%); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); transition: background .1s, box-shadow .1s; }
.lamp.lit::after { background: radial-gradient(circle at 40% 35%, #f1fff6, #6dffa6 40%, #19e36b); box-shadow: 0 0 6px 2px rgba(60,255,140,.95), 0 0 18px 7px rgba(60,255,140,.45); }
.lamp.fail::after { background: radial-gradient(circle at 40% 35%, #fffbe8, #ffd23f 45%, #f0a800); box-shadow: 0 0 6px 2px rgba(255,200,40,.95), 0 0 18px 7px rgba(255,200,40,.45); }
.key-well { position: absolute; left: 12px; right: 12px; top: 42px; height: 70px; border-radius: 17px; background: rgba(60,60,75,.13); box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.75); }
.bigkey {
  position: absolute; left: 19px; right: 19px; top: 49px; height: 51px; padding: 0 0 2px; border: 0; border-radius: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; color: #fff3ea; text-shadow: 0 -1px 0 rgba(110,0,28,.5);
  background: radial-gradient(130% 160% at 30% 12%, #ff819e, var(--accent) 45%, #b10c36 100%);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,215,225,.6), 0 4px 0 #7c0a26, 0 7px 10px rgba(0,0,0,.25);
  transition: transform .07s, box-shadow .07s;
}
.bigkey:active, .bigkey.pressed { transform: translateZ(9px) translateY(3px); box-shadow: inset 0 -1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,215,225,.4), 0 1px 0 #7c0a26, 0 2px 3px rgba(0,0,0,.25); }
.knob:focus-visible, .bigkey:focus-visible, .dial-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the wires: a thin cable from each unit to the EXT port, and the signal that runs along it (gadgets.js) */
.wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wires path { fill: none; stroke-linecap: round; }
.w-shadow { stroke: rgba(90,0,25,.2); stroke-width: 5; transform: translateY(6px); }
.w-cable { stroke: #6e1029; stroke-width: 2.2; }
.w-hi { stroke: rgba(255,175,195,.3); stroke-width: .8; transform: translate(-.4px, -.6px); }
.w-glow, .w-pulse { visibility: hidden; }
.w-glow { stroke: rgba(255,214,226,.45); stroke-width: 9; }
.w-pulse { stroke: #fff6f8; stroke-width: 3; }
/* the EXT port: on the Game Boy's bottom edge, where the real one has its phones jack */
.gb-ext { position: absolute; left: 194px; bottom: -6px; width: 34px; height: 9px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #a9a8a1, #7b7a74); box-shadow: inset 0 -1px 0 rgba(255,255,255,.35), 0 2px 3px rgba(80,0,20,.3); }
.gb-ext i { position: absolute; left: 6px; right: 6px; top: 3px; height: 3px; border-radius: 1px; background: #1c1c1f; }

.gb {
  width: 330px; height: 560px; padding: 0 22px; border-radius: 14px 14px 74px 14px;
  background: linear-gradient(160deg, #eceae5 0%, #d7d6d0 50%, #c6c5bf 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.1), inset 3px 0 0 rgba(255,255,255,.45);
}
.gb-slot { position: absolute; left: 70px; right: 70px; top: -1px; height: 6px; border-radius: 0 0 4px 4px; background: #3c3b38; box-shadow: inset 0 2px 3px #000; }
.gb-top { height: 43.3px; margin: 0 -22px 18px; border-bottom: 2px solid #b6b5ae; }   /* the seam only (Eden, v9 notes: no OFF·ON) */
.gb-bezel { position: relative; padding: 30px 30px 26px 44px; border-radius: 10px 10px 40px 10px; background: linear-gradient(180deg, #5c5d68, #4d4e58); box-shadow: inset 0 2px 3px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.15); }
.gb-bezel-label { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; align-items: center; gap: 4px; font-size: 7.5px; color: #c9cad6; letter-spacing: .08em; font-style: italic; }
.gb-bezel-label i { height: 2px; flex: 1; background: var(--accent); }
.gb-bezel-label i:nth-child(2), .gb-bezel-label i:nth-child(5) { background: var(--teal); }
.gb-bezel-label span { padding: 0 4px; white-space: nowrap; }
.gb-batt { position: absolute; left: 16px; top: 74px; width: 8px; height: 8px; border-radius: 50%; background: #3a0d18; transition: all .15s; }
.gb-batt.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.gb-batt-label { position: absolute; left: 10px; top: 88px; font-size: 6px; color: #b3b4c0; letter-spacing: .1em; }
.lcd { position: relative; height: 196px; padding: 10px 11px; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, #a6b170, #97a361); box-shadow: inset 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.35); }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(40,52,20,.12) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(40,52,20,.12) 0 1px, transparent 1px 3px); }
.lcd pre { margin: 0; font-family: var(--pixel); font-size: 17px; line-height: 1.05; color: #26311a; white-space: pre-wrap; word-break: break-word; text-shadow: 1px 1px 0 rgba(38,49,26,.18); }
.lcd pre .inv { background: #26311a; color: #a6b170; }
.gb-brand { margin: 10px 0 0 4px; font-size: 18px; color: #2b3b8f; letter-spacing: -.02em; }
.gb-brand b { font-weight: 700; font-style: italic; }
.gb-brand i { font-family: var(--mono); font-weight: 700; font-size: 20px; }
.gb-brand sup { font-size: 7px; }
.gb-controls { position: absolute; left: 0; right: 0; top: 340px; bottom: 0; transform-style: preserve-3d; }
.dpad { position: absolute; left: 24px; top: 26px; width: 86px; height: 86px; transform-style: preserve-3d; }
.dpad::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: rgba(0,0,0,.07); transform: translateZ(-9px); }
.dp { position: absolute; border: 0; padding: 0; background: linear-gradient(180deg, #303034, #1e1e21); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #0e0e10; }
.dp-l, .dp-r { top: 29px; width: 30px; height: 28px; }
.dp-l { left: 0; border-radius: 4px 0 0 4px; } .dp-r { right: 0; border-radius: 0 4px 4px 0; }
.dp-u, .dp-d { left: 29px; width: 28px; height: 30px; } .dp-u { top: 0; border-radius: 4px 4px 0 0; } .dp-d { bottom: 0; border-radius: 0 0 4px 4px; }
.dp-c { left: 28px; top: 28px; width: 30px; height: 30px; box-shadow: none; }
.dp-c::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3a3e, #1a1a1c); }
.dp-l::after, .dp-r::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: #5a5a5f; }
.dp-l::after { content: "◀"; } .dp-r::after { content: "▶"; }
.dp-l:active, .dp-r:active, .dp.pressed { background: #19191b; box-shadow: inset 0 2px 3px #000; }
.btn-round {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 38% 30%, #ff6b8d, var(--accent) 45%, #a50c32 100%);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.25), 0 4px 0 #7c0a26, 0 6px 8px rgba(0,0,0,.25);
  transition: transform .07s, box-shadow .07s;
}
.btn-round b { font-size: 19px; font-style: italic; font-weight: 700; color: rgba(110,0,28,.6); text-shadow: 0 1px 0 rgba(255,190,205,.45); }
.btn-round.a { right: 26px; top: 14px; }
.btn-round.b { right: 92px; top: 50px; }
.btn-round:active, .btn-round.pressed { transform: translateZ(9px) translateY(3px); box-shadow: inset 0 -1px 3px rgba(0,0,0,.3), 0 1px 0 #7c0a26, 0 2px 3px rgba(0,0,0,.25); }
.btn-round:focus-visible, .dp:focus-visible, .pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ab-name { position: absolute; width: 52px; display: grid; justify-items: center; line-height: 1; color: #2b3b8f; pointer-events: none; }
.ab-name b { font-size: 17px; font-style: italic; font-weight: 700; }
.ab-name em { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.a-n { right: 26px; top: 76px; } .b-n { right: 92px; top: 112px; }
.pill { position: absolute; top: 146px; display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 0; transform: translateZ(4px) rotate(-25deg); }
.p-sel { left: 64px; } .p-start { left: 124px; }
.pill span { width: 42px; height: 11px; border-radius: 6px; background: linear-gradient(180deg, #8a8a90, #6a6a70); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #55555a; }
.pill:active span { transform: translateY(1px); box-shadow: none; }
.pill em { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .1em; color: #2b3b8f; }
.gb-speaker { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 7px; transform: rotate(-30deg) scale(.86); }
.gb-speaker i { width: 5px; height: 46px; border-radius: 3px; background: #9d9c95; box-shadow: inset 1px 2px 2px rgba(0,0,0,.45), 1px 1px 0 #fff; }

/* the thermal slip, printed out of the top (it lives in the device, behind its face) */
.slip { position: absolute; left: 40px; right: 40px; bottom: calc(100% - 4px); height: 0; transform: translateZ(-4px); }
.slip-paper {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 14px; background: #fbfaf6; color: #2a2a28;
  font-size: 10.5px; line-height: 1.45; box-shadow: 0 6px 16px rgba(80,0,20,.25);
  transform: translateY(100%); transition: transform 1.6s steps(24, end);
  visibility: hidden; max-height: var(--slip-max, 320px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.slip-paper::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 8px; background: linear-gradient(135deg, transparent 4px, #fbfaf6 0) 0 0 / 8px 8px repeat-x, linear-gradient(225deg, transparent 4px, #fbfaf6 0) 0 0 / 8px 8px repeat-x; }
.slip.out .slip-paper { transform: translateY(0); visibility: visible; cursor: pointer; }
/* a click rips the paper off and throws it (gadgets.js); a torn stub stays in the slot, and a click on it prints again */
.slip-fly { position: fixed; z-index: 45; margin: 0; overflow: hidden; pointer-events: none; will-change: transform; }
.slip-stub { position: absolute; left: 0; right: 0; bottom: 0; height: 13px; padding: 0; border: 0; display: none; cursor: pointer; background: #fbfaf6;
  clip-path: polygon(0 100%, 0 38%, 6% 12%, 12% 46%, 19% 20%, 25% 52%, 33% 8%, 40% 40%, 47% 18%, 54% 50%, 61% 14%, 68% 44%, 75% 22%, 82% 48%, 89% 10%, 95% 42%, 100% 24%, 100% 100%); }
.slip.torn .slip-stub { display: block; }
.slip.torn .slip-stub:hover { background: #fff; }
.slip-head { font-weight: 700; letter-spacing: .14em; border-bottom: 1px dashed #999; padding-bottom: 6px; margin-bottom: 8px; }
.slip-text { margin: 0; font-family: var(--mono); font-size: 10.5px; white-space: pre-wrap; word-break: break-word; }
.slip-foot { margin-top: 10px; text-align: center; letter-spacing: .14em; font-weight: 700; color: var(--accent-deep); }

/* ======================================================================================== */
/* CH 03 · REFERENSI                                                                         */
/* ======================================================================================== */
/* REFERENSI is two steps (Eden, v9 notes; the layout of each: COMPUTERS below, PHONES further down): first the big
   sign and every tape under it; a tape picked, the sign goes small to the top, the tapes into a drawer on the left
   and the paper hangs down the middle from a printer under the top edge. The paper is clean of the screen's grain: on
   this channel the grain is baked into the backgrounds instead of laid over everything (site.js, --noise-half). */
body[data-ch="2"] .grain { opacity: 0; }
.grain { transition: opacity .3s; }
.ch-referensi {
  background: var(--noise-half) 0 0 / 220px 220px, radial-gradient(80% 60% at 85% 10%, rgba(42,69,199,.12), transparent 60%), linear-gradient(180deg, #f1ebdd, #e7dfcd);
  color: var(--blue);
}
.title-ink.blue { color: var(--blue); font-size: clamp(64px, 8.5vw, 150px); }
.referensi-sub { margin: 0 0 1.1em; max-width: 34ch; font-size: 14px; line-height: 1.6; filter: url(#inkLight); will-change: transform; }
/* the sign printed twice like riso, the pink layer a hair off (as MIKA's and TENTANG's) */
.referensi-head .title-ink span { position: relative; }
.referensi-head .title-ink span::before { content: attr(data-text); position: absolute; left: .035em; top: .03em; z-index: -1; color: var(--accent); }
.ref-up { display: none; font-style: normal; font-size: 13px; color: var(--accent); text-shadow: 0 0 8px rgba(255,31,85,.9); }
.rack-cap { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .22em; }

/* the drawer's look: blue enamel, a dark pull-tab with a red arrow sticking out of the left edge */
.rack-handle {
  position: absolute; left: 100%; top: 50%; width: 42px; height: 168px; margin-top: -84px; padding: 0; border: 0; border-radius: 0 14px 14px 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(90deg, #1d1d20, #2e2e32 60%, #212124); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.08), 3px 4px 0 #000, 8px 10px 22px rgba(20,20,60,.35);
}
.rack-arrow { font-style: normal; font-size: 13px; color: var(--accent); text-shadow: 0 0 8px rgba(255,31,85,.9); transition: transform .5s var(--ease-out); }
.rack.open .rack-arrow { transform: rotate(180deg); }
.rack-handle span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #d8d3c8; }
.rack-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fmt { position: relative; display: flex; width: 240px; height: 40px; padding: 4px; border-radius: 10px; background: #2b2b30; box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.6); }
.fmt-opt { flex: 1; z-index: 1; border: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #8d8a80; transition: color .25s; }
.fmt-opt.on { color: var(--ink); }
.fmt-knob { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: 32px; border-radius: 7px; background: linear-gradient(180deg, #f3efe4, #cfc9b9); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8b8577, 0 4px 8px rgba(0,0,0,.4); transition: transform .4s var(--ease-knob-116); }
.fmt.long .fmt-knob { transform: translateX(100%); }
.shelves { display: flex; flex-direction: column; gap: 28px; overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 10px 14px 40px 6px; scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
.dymo.none { transform: rotate(-1deg); }
.shelf { display: grid; gap: 12px; }
.dymo {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 5px; border-radius: 3px;
  background: linear-gradient(180deg, #232327, #121214); color: #f4f1ea; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 #000; box-shadow: 0 2px 0 #000, 0 5px 10px rgba(20,20,60,.25); transform: rotate(-1.2deg);
}
.dymo i { font-style: normal; font-family: var(--pixel); font-size: 15px; letter-spacing: .04em; color: var(--accent); text-shadow: none; }
.tapes { display: flex; flex-wrap: wrap; gap: 18px 14px; padding-left: 4px; }
.tape { position: relative; flex: none; border: 0; padding: 0; text-align: left; transition: transform .35s var(--ease-spring), box-shadow .35s; }
.tape:hover { transform: translateY(-4px) rotate(-1.5deg); }
.tape.on { transform: translateY(-6px) rotate(-2deg); }
.tape:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.stk { position: absolute; z-index: 3; right: -8px; top: -10px; padding: 9px 6px; border-radius: 50%; background: #ffd23f; color: var(--ink); font-size: 7.5px; font-weight: 700; letter-spacing: .08em; transform: rotate(14deg); box-shadow: 0 2px 4px rgba(0,0,0,.25); }

/* a short: an audio cassette */
.cas { width: 220px; height: 140px; border-radius: 10px; background: linear-gradient(170deg, #34343a, #1f1f23); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 12px 20px rgba(20,20,60,.28); }
.cas.on, .vhs.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 0 0 3px var(--accent), 0 16px 26px rgba(255,31,85,.35); }
.cas .scr { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #aaa, #555); }
.tape .lab { position: absolute; overflow: hidden; border-radius: 3px; background: #f4efe2; color: var(--ink); }
.cas .lab { left: 10px; right: 10px; top: 8px; height: 80px; }
.cas .lab::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 4px; background: var(--accent); }
.cas .lab::after { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--blue); }
.tape .num { position: absolute; left: 7px; top: 3px; font-family: var(--pixel); font-size: 19px; line-height: 1; color: var(--accent); }
.tape .id { position: absolute; right: 7px; top: 5px; font-family: var(--pixel); font-size: 14px; line-height: 1; color: var(--blue); }
.tape .lab-show { position: absolute; left: 7px; right: 7px; top: 33px; font-size: 9.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape .topic { position: absolute; left: 7px; right: 7px; top: 47px; font-size: 9px; font-style: italic; line-height: 1.3; color: #3c3a35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cas .win { position: absolute; left: 50px; right: 50px; top: 94px; height: 22px; border-radius: 11px; background: rgba(16,16,22,.95); box-shadow: inset 0 2px 4px #000; display: flex; justify-content: space-between; align-items: center; padding: 0 5px; }
.reel { width: 16px; height: 16px; border-radius: 50%; background: repeating-conic-gradient(#e9e4d6 0 20deg, #2a2a2e 20deg 60deg); box-shadow: 0 0 0 3px #4a3a2e; }
.cas .bot { position: absolute; left: 38px; right: 38px; bottom: 0; height: 20px; background: linear-gradient(180deg, #2b2b30, #1b1b1e); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }

/* a long: a VHS tape */
.vhs { width: 240px; height: 140px; border-radius: 6px; background: linear-gradient(180deg, #232326, #141416); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #050506, 0 4px 0 #050506, 0 12px 20px rgba(20,20,60,.28); }
.vhs::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px); }
.vhs .lab { left: 10px; top: 12px; width: 156px; height: 96px; border-radius: 2px; background: #fbf8f0; }
.vhs .lab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.vhs .num { left: 12px; } .vhs .lab-show, .vhs .topic { left: 12px; }
.vhs .lab-show { top: 28px; } .vhs .topic { top: 43px; -webkit-line-clamp: 3; }
.vhs .win { position: absolute; right: 12px; top: 20px; width: 50px; height: 40px; border-radius: 4px; background: rgba(30,30,36,.9); box-shadow: inset 0 2px 5px #000; display: grid; place-items: center; }
.vhs .win .reel { width: 26px; height: 26px; box-shadow: 0 0 0 6px #3a2e26; }
.vhs .brand { position: absolute; right: 12px; bottom: 34px; font-size: 7.5px; font-weight: 700; letter-spacing: .18em; color: #8f8b80; }
.vhs .groove { position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.06); }

/* the printer and its paper */
.printer { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
@keyframes print-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.printer-body { position: relative; z-index: 2; height: 46px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #ddd6c4, #c4bca8); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a39b86, 0 10px 18px rgba(20,20,60,.18); }
.printer-slot { position: absolute; left: 28px; right: 28px; bottom: 10px; height: 6px; border-radius: 3px; background: #2b2a26; box-shadow: inset 0 2px 3px #000; }
.printer-led { position: absolute; right: 18px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #2f5b3b; transition: background .2s, box-shadow .2s; }
.printer-led.on { background: #5dff8a; box-shadow: 0 0 8px #5dff8a; }
.paper { position: relative; margin: -14px 26px 0; min-height: 0; overflow: auto; overscroll-behavior: contain; box-shadow: 0 10px 20px rgba(20,20,60,.15); scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
.paper-inner {
  position: relative; min-height: 100%; padding: 74px 60px 72px;
  background:
    radial-gradient(circle at 15px 12px, #e3dccb 5px, transparent 5.5px) 0 0 / 30px 24px repeat-y,
    radial-gradient(circle at 15px 12px, #e3dccb 5px, transparent 5.5px) 100% 0 / 30px 24px repeat-y,
    var(--noise-soft) 0 0 / 220px 220px,
    #fbf9f2;
}
.paper-inner::before, .paper-inner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(42,69,199,.35); }
.paper-inner::before { left: 30px; } .paper-inner::after { right: 30px; }
.paper-inner { font-family: "Newsreader", Georgia, serif; color: #1c2033; font-size: 16px; line-height: 1.5; }
.ref-head { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(28,32,51,.25); }
.ref-title { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 48; }
.ref-title span { font-weight: 400; color: rgba(28,32,51,.55); }
.ref-topic { margin: 6px 0 0; font-size: 19px; font-style: italic; color: #2c3150; }
.ref-meta { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: rgba(28,32,51,.6); }
.ref-meta a { color: inherit; }
.ref-sec { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(28,32,51,.75); }
.ref-sec span { font-weight: 400; }
.refs { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.refs li { display: grid; grid-template-columns: 30px 1fr; }
.refs .n { font-variant-numeric: tabular-nums; color: rgba(28,32,51,.55); }
.cite { margin: 0; }
.cite a { color: inherit; text-decoration: underline; text-decoration-color: rgba(28,32,51,.3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.cite a:hover { text-decoration-color: var(--accent); }
.cite .dom { font-family: var(--mono); font-size: 11px; color: rgba(28,32,51,.55); }
.why { margin: 4px 0 0; font-size: 14.5px; color: rgba(28,32,51,.72); }
.pr-example { display: inline-block; margin-left: 6px; padding: 0 6px; vertical-align: 6px; font-family: var(--mono); font-weight: 700; background: #ffd23f; color: var(--ink); font-size: 9px; letter-spacing: .1em; line-height: 16px; }

/* COMPUTERS: the two steps of REFERENSI */
@media (min-width: 901px) and (pointer: fine), (min-width: 901px) and (min-height: 561px) {
  /* step one: the sign in the middle, every tape under it */
  .ch-referensi { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 30px; padding: 96px var(--side) 0; }
  .referensi-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
  .ch-referensi .title-ink.blue { font-size: clamp(96px, min(11vw, 18vh), 190px); }
  .referensi-sub { margin: 0; max-width: 64ch; }
  .referensi-body { display: grid; grid-template-rows: minmax(0, 1fr); width: min(1000px, 100%); min-height: 0; }   /* fills to the bottom: the shelves scroll, the paper hangs to the edge */
  .ch-referensi .printer { display: none; }
  .rack { display: grid; min-height: 0; }
  .rack-inner { display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; gap: 16px; min-height: 0; }
  .ch-referensi:not(.sub) .rack-cap::after { content: " ▼"; color: var(--accent); }
  .ch-referensi:not(.sub) .shelves { width: 100%; align-items: center; padding: 16px 14px 60px; }
  .ch-referensi:not(.sub) .shelf { justify-items: center; }
  .ch-referensi:not(.sub) .dymo { justify-self: center; }
  .ch-referensi:not(.sub) .tapes { justify-content: center; }
  /* the tapes stand on shelves: one enamel plank under each row (rows 140 px, 18 px apart), the full width of the wall */
  .tapes { --plank-hi: #6f86f0; --plank: #2a45c7; --plank-lo: #172a86; --plank-shade: rgba(20,20,60,.16);
    background: repeating-linear-gradient(180deg, transparent 0 140px, var(--plank-hi) 140px 142px, var(--plank) 142px 149px, var(--plank-lo) 149px 151px, var(--plank-shade) 151px 156px, transparent 156px 158px);
    margin: 0 -18px; padding: 0 18px 18px; }   /* the last row's plank sits in the bottom padding */
  .tape { margin-bottom: 0; }
  .ch-referensi:not(.sub) .shelf { gap: 16px; width: 100%; }
  .ch-referensi.unsub .referensi-body { animation: fade-up .45s var(--ease-out) both; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }

  /* step two: the sign small in the top-left corner, across from the remote and level with it (a click on it goes
     back; Eden, v10 notes: not off-centre), the paper down the middle, the tapes in a drawer under that top band */
  .ch-referensi.sub { grid-template-columns: minmax(0, min(760px, 100vw - 2 * var(--side) - 200px)); grid-template-rows: minmax(0, 1fr); justify-content: center; justify-items: stretch; gap: 0; padding-top: 76px; }
  .ch-referensi.sub .referensi-head { position: absolute; z-index: 6; top: 20px; left: 24px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .ch-referensi.sub .title-ink.blue { font-size: 44px; }
  .ch-referensi.sub .referensi-sub { display: none; }
  .ch-referensi.sub .ref-up { display: block; transition: transform .2s var(--ease-out); }
  .ch-referensi.sub .referensi-head:hover .ref-up { transform: translateX(-4px); }
  .ch-referensi.sub .referensi-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
  .ch-referensi.sub .referensi-body { width: auto; }
  .ch-referensi.sub .printer { display: grid; }
  .ch-referensi.sub .paper { animation: print-in .8s steps(16, end) both; }
  .ch-referensi.sub .rack { position: absolute; z-index: 5; left: 0; top: 76px; bottom: 0; width: min(560px, 92vw); transform: translateX(-100%); transition: transform .5s var(--ease-out); }
  .ch-referensi.sub .rack.open { transform: none; }
  .ch-referensi.sub .rack-inner {
    height: 100%; grid-template-rows: auto auto minmax(0, 1fr); justify-items: start; gap: 18px; padding: 26px 26px 0 30px; border-radius: 0 16px 0 0;
    background: var(--noise-half) 0 0 / 220px 220px, radial-gradient(90% 60% at 20% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(165deg, #3753db 0%, #2a45c7 45%, #1f379f 100%);
    box-shadow: inset -2px 0 0 rgba(255,255,255,.18), inset -9px 0 0 rgba(10,20,80,.25); transition: box-shadow .5s;
  }
  .ch-referensi.sub .rack.open .rack-inner { box-shadow: inset -2px 0 0 rgba(255,255,255,.18), inset -9px 0 0 rgba(10,20,80,.25), 22px 0 46px rgba(20,20,60,.38); }
  .ch-referensi.sub .rack-cap { color: #e3e8ff; }
  .ch-referensi.sub .rack-handle { display: flex; }
  .ch-referensi.sub .shelves { justify-self: stretch; margin-right: -14px; scrollbar-color: rgba(255,255,255,.5) transparent; }
  .ch-referensi.sub .tapes { display: grid; grid-template-columns: repeat(2, max-content); --plank-hi: #5d74dd; --plank: #15237a; --plank-lo: #0b1450; --plank-shade: rgba(5,10,40,.35); }

  /* lifted and ringed: in step two the tape on the paper, in step one the tape last opened */
  .tape.on { transform: none; }
  .cas.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 12px 20px rgba(20,20,60,.28); }
  .vhs.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #050506, 0 4px 0 #050506, 0 12px 20px rgba(20,20,60,.28); }
  .ch-referensi.sub .tape.on { transform: translateY(-6px) rotate(-2deg); }
  .ch-referensi.sub .cas.on, .ch-referensi.sub .vhs.on, .ch-referensi:not(.sub) .tape.last { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 0 0 3px var(--accent), 0 16px 26px rgba(255,31,85,.35); }
}

/* ======================================================================================== */
/* CH 04 · TENTANG                                                                           */
/* ======================================================================================== */
.ch-tentang {
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 14px), radial-gradient(100% 90% at 30% 20%, #f5c43a, #e6a91f 70%, #d39614);
  place-items: center; padding-top: 96px;
}
.tentang-wrap { position: relative; display: grid; grid-template-columns: auto minmax(0, 880px); align-items: center; column-gap: clamp(18px, 2.6vw, 48px); width: min(1120px, 100%); }
.title-ink.about {
  position: relative; z-index: 0; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(84px, min(9.5vw, 15.5vh), 170px); line-height: .82; letter-spacing: -.03em;
}
.title-ink.about span { position: relative; }
.title-ink.about span::before { content: attr(data-text); position: absolute; left: -.035em; top: -.03em; z-index: -1; color: var(--accent); }
.dossier { position: relative; z-index: 1; width: min(880px, 100%); transform: rotate(-1.2deg); }
.folder-tab { position: absolute; top: -34px; left: 40px; padding: 8px 26px 14px; border-radius: 10px 10px 0 0; background: #d9bb76; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #5a4a20; box-shadow: inset 0 1px 0 #f3dda1; }
.folder { position: relative; padding: 20px; border-radius: 6px 12px 12px 12px; background: linear-gradient(170deg, #e2c584, #d4b46b); box-shadow: inset 0 1px 0 #f3dda1, 0 3px 0 #b39552, 0 30px 50px rgba(90,60,0,.35); }
.sheet { position: relative; padding: 34px 44px 34px; background: #fbf6ea; transform: rotate(.8deg); box-shadow: 0 2px 0 #e6dcc4, 0 4px 0 #efe6d0, 0 12px 24px rgba(90,60,0,.18); background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(42,69,199,.09) 31px 32px); }
.dossier-head { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); max-width: 60%; font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.04em; line-height: .9; filter: url(#inkMedium); will-change: transform; }
/* the same filter looked soft and bled in Safari (drawn at 1x, scaled up) and crisp in Chrome (drawn at full resolution):
   every browser but Safari gets the titles' ink tuned to Safari's look. Only Safari knows -apple-system-body (Eden, 2026-10-17) */
@supports not (font: -apple-system-body) {
  .title-ink { filter: url(#inkHeavySoft); }
  .dossier-head { filter: url(#inkMediumSoft); }
}
.facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px 18px; margin: 0; max-width: 62%; font-size: 14px; line-height: 1.6; }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; padding-top: 3px; color: #7a5b10; }
.facts dd { margin: 0; filter: url(#inkLight); will-change: transform; }
.redact { position: relative; display: inline-block; cursor: default; user-select: none; }
.redact-bar { display: inline-block; color: var(--ink); letter-spacing: -.1em; }
.redact-txt { position: absolute; left: 0; top: 0; opacity: 0; color: var(--accent-deep); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.redact-static { position: absolute; inset: -3px -6px; opacity: 0; pointer-events: none; background: var(--noise) 0 0 / 120px 120px, rgba(26,26,24,.25); }
.redact.in .redact-bar, .redact.out .redact-txt { animation: gl-out .42s steps(5) both; }
.redact.in .redact-txt, .redact.out .redact-bar { animation: gl-in .42s steps(5) .12s both; }
.redact.in .redact-static, .redact.out .redact-static { animation: static-flash .55s steps(6) both; }
@keyframes gl-out { 0% { opacity: 1; transform: none; clip-path: none; } 30% { transform: translateX(5px); clip-path: inset(0 0 55% 0); } 60% { transform: translateX(-4px); clip-path: inset(40% 0 0 0); } 100% { opacity: 0; transform: none; clip-path: none; } }
@keyframes gl-in { 0% { opacity: 0; } 20% { opacity: 1; transform: translateX(-6px); clip-path: inset(60% 0 0 0); } 55% { transform: translateX(4px); clip-path: inset(0 0 45% 0); } 100% { opacity: 1; transform: none; clip-path: none; } }
@keyframes static-flash { 0% { opacity: 0; background-position: 0 0; } 20% { opacity: .95; background-position: 37px 11px; } 40% { opacity: .7; background-position: -23px 41px; } 60% { opacity: .9; background-position: 51px -17px; } 80% { opacity: .4; background-position: -9px 29px; } 100% { opacity: 0; } }
.stamp {
  position: absolute; right: 6%; bottom: 17%; z-index: 3; padding: 8px 18px; font-size: clamp(28px, 3.6vw, 50px); font-weight: 700; letter-spacing: .08em;
  color: var(--accent); border: 5px double var(--accent); border-radius: 8px; transform: rotate(-14deg); opacity: .85; filter: url(#stamp); will-change: transform;
}
.ch-tentang.on .stamp { animation: stamp .45s .35s var(--ease-out) both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 70% { opacity: .9; transform: rotate(-14deg) scale(.94); } 100% { opacity: .85; transform: rotate(-14deg) scale(1); } }
.polaroid { position: absolute; right: 6%; top: -30px; width: min(240px, 25vw); padding: 12px 12px 44px; background: #fffdf8; transform: rotate(5deg); z-index: 2; box-shadow: 0 2px 0 #e5dfd0, 0 18px 30px rgba(60,40,0,.3); }
.polaroid img { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(.9) sepia(.12); }
.polaroid-cap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--blue); }
.clip { position: absolute; left: 34px; top: -20px; width: 18px; height: 56px; border: 3px solid #9aa0a6; border-radius: 10px; z-index: 3; box-shadow: 1px 2px 2px rgba(0,0,0,.25); }
.clip::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; bottom: 14px; border: 3px solid #9aa0a6; border-bottom: 0; border-radius: 8px 8px 0 0; }

/* ======================================================================================== */
/* CH 05 · KONTAK                                                                            */
/* ======================================================================================== */
.ch-kontak {
  background: radial-gradient(60% 60% at 20% 80%, rgba(79,199,192,.18), transparent 70%), radial-gradient(50% 50% at 85% 15%, rgba(255,31,85,.16), transparent 70%), linear-gradient(180deg, #121a2e, #0b1120);
  grid-template-rows: 1fr auto; justify-items: center; align-items: center; color: #d8f3ee; padding-top: 96px;
}
.floor { position: absolute; inset: 0; perspective: 560px; perspective-origin: 50% 30%; overflow: hidden; pointer-events: none; }
.spray {
  position: absolute; left: 50%; bottom: -1vh; white-space: nowrap; transform-origin: 50% 100%; transform: translateX(-50%) rotateX(63deg);
  font-weight: 700; font-size: clamp(110px, 26vw, 560px); line-height: .78; letter-spacing: -.02em; color: rgba(255,31,85,.8);
  text-shadow: 0 0 .05em rgba(255,31,85,.55), 0 0 .16em rgba(255,31,85,.22);
  filter: url(#spray); will-change: transform;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tx {
  width: min(980px, calc(100vw - 2 * var(--side) - 40px)); padding: 18px 22px 20px; border-radius: 22px;
  background: linear-gradient(160deg, #4a5141 0%, #353b2e 50%, #272b22 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.6);
}
.tx-head { display: flex; align-items: center; gap: 14px; padding: 0 4px 14px; font-size: 11px; letter-spacing: .16em; color: #c7cbb5; }
.tx-head b { font-size: 15px; color: #eef0e0; }
.tx-head span:nth-child(3) { flex: 1; opacity: .7; }
.screw { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9c9bd, #6d6e63); box-shadow: 0 1px 1px #000; position: relative; }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 2px; background: #3a3b33; transform: rotate(-30deg); }
.tx-main { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: 18px; }
.scope { position: relative; border-radius: 16px; overflow: hidden; min-height: 230px; background: #031210; box-shadow: inset 0 0 0 3px #0b0d09, inset 0 0 40px rgba(0,0,0,.9), 0 0 0 5px #20241b; }
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope-label { position: absolute; left: 12px; top: 10px; font-family: var(--pixel); font-size: 16px; color: #5ff6d5; text-shadow: 0 0 6px #5ff6d5; }
.tx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tx-form label { display: grid; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #c7cbb5; }
.tx-form .wide { grid-column: 1 / -1; }
.tx-form input, .tx-form textarea {
  width: 100%; border: 0; border-radius: 8px; padding: 10px 12px; resize: none; font-family: var(--pixel); font-size: 22px; line-height: 1.05;
  color: #5ff6d5; caret-color: var(--accent); background: #071613; box-shadow: inset 0 2px 6px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 0 6px rgba(95,246,213,.6);
}
.tx-form input:focus, .tx-form textarea:focus { outline: 2px solid rgba(95,246,213,.5); outline-offset: 1px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tx-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px 0; }
.tx-status { flex: 1; padding: 8px 12px; border-radius: 8px; font-family: var(--pixel); font-size: 20px; color: #5ff6d5; background: #071613; box-shadow: inset 0 2px 6px rgba(0,0,0,.95); text-shadow: 0 0 6px rgba(95,246,213,.6); }
.tx-status.err { color: var(--phosphor); text-shadow: 0 0 6px rgba(255,31,85,.7); }
.send { position: relative; width: 170px; height: 64px; perspective: 500px; transform-style: preserve-3d; }
.send-btn {
  position: absolute; inset: 6px; border: 0; border-radius: 10px; font-weight: 700; letter-spacing: .2em; font-size: 15px; color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff5b80, var(--accent) 50%, #a30b31); box-shadow: inset 0 -3px 4px rgba(0,0,0,.25), 0 5px 0 #6d0720, 0 10px 14px rgba(0,0,0,.45);
  transition: transform .07s, box-shadow .07s;
}
.send-btn:active { transform: translateY(4px); box-shadow: inset 0 -1px 3px rgba(0,0,0,.3), 0 1px 0 #6d0720; }
.cover {
  position: absolute; inset: 0; z-index: 2; border: 2px solid rgba(255,140,160,.75); border-radius: 12px; padding: 0; color: #ffd1dc; font-size: 22px;
  background: repeating-linear-gradient(-45deg, rgba(255,31,85,.42) 0 10px, rgba(255,31,85,.24) 10px 20px);
  transform-origin: 50% 0; transform: translateZ(3px); transition: transform .5s var(--ease-spring); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.4);
}
.send.open .cover { transform: translateZ(3px) rotateX(118deg); }
.legal { position: relative; align-self: end; font-size: 10px; letter-spacing: .14em; color: rgba(216,243,238,.4); }

/* ---- the boot ---- */
.boot { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; place-items: center; }
.boot.gone { animation: crt-off .45s ease-in forwards; pointer-events: none; }
.boot.hidden { display: none; }
.boot-screen { width: min(720px, 90vw); }
.boot-text { margin: 0; font-family: var(--pixel); font-size: clamp(18px, 2.2vw, 26px); line-height: 1.25; color: var(--phosphor); text-shadow: 0 0 8px rgba(255,31,85,.8); white-space: pre-wrap; }
.boot::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }

/* ---- the phone-only pieces stay hidden on a computer ---- */
.back, .dock, .peek, .prompt-page, .key em { display: none; }

/* ======================================================================================== */
/* PHONES (Eden, 2026-10-17: "when we are on phone, the way the site works should just change"):  */
/* the content first, then the gadgets; the page scrolls like any page; the remote is in your hand  */
/* (the channel keys along the bottom, the one we're on latched down and lit); a channel with more  */
/* to show opens it on a second page with a back key top left (an episode's paper, the prompt).     */
/* Same world as the computer's: the same plastics, keys, papers and colours.                       */
/* ======================================================================================== */
@media (max-width: 900px), (pointer: coarse) and (max-height: 560px) {
  :root { --dock: calc(72px + env(safe-area-inset-bottom)); --head: 72px; }
  html, body { height: auto; overscroll-behavior: auto; }
  body { overflow: visible; }
  .tuner, .osd, .rocker, .seg, .ch-tanya .slip { display: none; }
  .tv { position: relative; inset: auto; overflow: visible; background: none; }
  /* one column, 560 px at most (a phone turned sideways, a small tablet) */
  .ch { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; overflow: hidden; overflow: clip; padding: var(--head) max(16px, calc(50vw - 280px)) calc(var(--dock) + 30px); }
  .ch.on { display: block; }
  .ch.leaving { display: none; }
  @keyframes sub-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
  @keyframes sub-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

  /* the top: PROJECT: MIKA and ID/EN, scrolling away with the page; on a second page it stays, with the back key */
  .remote { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 12px 12px; }
  .remote-right { gap: 8px; padding: 5px; }
  .home { height: 40px; padding: 0 14px; font-size: 10.5px; }
  .lang { height: 40px; } .lang-knob { height: 34px; }
  .lang-hint { right: 12px; top: calc(100% - 16px); --neck: 44px; }   /* the phone's switch: 17 px from the right, its middle 56 */
  .lh-vfd { font-size: 17px; }
  body[data-ch="1"] { --chbg: #f22050; }
  body[data-ch="2"] { --chbg: #efe8d9; }
  body.sub .remote { position: fixed; justify-content: space-between; background: linear-gradient(180deg, var(--chbg) 74%, transparent); }
  body.sub .home { display: none; }
  body.sub .back { display: flex; }
  .back {
    align-items: center; height: 50px; padding: 5px; border: 0; border-radius: 12px; -webkit-tap-highlight-color: transparent;
    background: linear-gradient(180deg, #2b2b2e, #18181a); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #000, 0 8px 18px rgba(0,0,0,.35);
  }
  .back span {
    display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px 0 12px; border-radius: 8px;
    background: linear-gradient(180deg, #3a3a3e, #26262a); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #000; transition: transform .08s, box-shadow .08s;
  }
  .back i { font-style: normal; font-size: 10px; color: var(--accent); text-shadow: 0 0 6px rgba(255,31,85,.8); }
  .back b { font-weight: 700; }
  .back:active span { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

  /* the remote in your hand: preset keys like an old TV's, the one we're on stays down and lit */
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; gap: 6px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #2b2b2e, #18181a);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -6px 20px rgba(0,0,0,.28);
    transition: transform .25s var(--ease-out);
  }
  body.typing .dock { transform: translateY(110%); }
  .dock button {
    position: relative; flex: 1; min-width: 0; height: 54px; padding: 0 2px; border: 0; border-radius: 10px;
    display: grid; justify-items: center; align-content: center; gap: 4px; -webkit-tap-highlight-color: transparent;
    background: linear-gradient(180deg, #3a3a3e, #26262a); color: #8b867b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 0 #000; transition: transform .08s, box-shadow .08s, background .15s;
  }
  .dock b { font-family: var(--pixel); font-weight: 400; font-size: 27px; line-height: 20px; letter-spacing: .04em; }
  .dock em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: clamp(7.5px, 2.45vw, 9.5px); font-weight: 700; letter-spacing: .03em; color: #a9a397; }
  .dock-led { position: absolute; left: 7px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #3a0d18; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
  .dock button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
  .dock button.on { transform: translateY(3px); background: linear-gradient(180deg, #232326, #1b1b1e); box-shadow: inset 0 2px 5px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.07); }
  .dock button.on b { color: var(--accent); text-shadow: 0 0 8px rgba(255,31,85,.85); }
  .dock button.on em { color: #f4efe6; }
  .dock button.on .dock-led { background: var(--accent); box-shadow: 0 0 7px 1px rgba(255,31,85,.9); }

  /* 01 MIKA: the name, what the channel is, where to watch (named keys), then Mika on the pad */
  .mika-copy { gap: 18px; }
  .ch-mika .title-ink { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
  .ch-mika .title-ink .t1 { font-size: min(24px, 6.2vw); }
  .ch-mika .title-ink .t2 { font-size: min(100px, 25vw); }
  .lede { max-width: none; font-size: 15.5px; line-height: 1.6; }
  .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
  .key { display: flex; align-items: center; gap: 12px; width: auto; height: 56px; padding: 0 16px; border-radius: 13px; -webkit-tap-highlight-color: transparent; }
  .key em { display: block; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
  .key:active svg { fill: var(--accent); }
  .ch-mika .stage { justify-self: stretch; margin-top: 30px; }
  .pad-top { gap: 12px; } .pad-model { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pad { width: min(100%, calc((100svh - 30px) * .76)); margin: 0 auto; padding: 12px 12px 8px; border-radius: 30px; }   /* whole on screen, even sideways */
  .pad-screen canvas { touch-action: pan-y; }        /* sideways spins Mika, up and down scrolls the page */
  .hud { font-size: 14px; } .hud b { font-size: 17px; }
  .hud-tl, .hud-tr { top: 16px; } .hud-tl, .hud-bl { left: 18px; } .hud-tr, .hud-br { right: 18px; } .hud-bl, .hud-br { bottom: 16px; }
  .hud-br { font-size: 12px; }
  .co-label { font-size: 12px; padding: 1px 4px; }
  .pad-bottom { gap: 16px; padding: 12px 10px 4px; }
  .toggle { padding: 6px 0; }

  /* 02 TANYA MIKA, page one: what it is, the prompt's first lines, the controls, the wired Game Boy, the fine print */
  .ch-tanya.on { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .tanya-copy { display: contents; }
  .tanya-title { order: 1; margin-top: 6px; font-size: min(58px, 15.5vw); }
  .title-ink.light { display: flex; gap: 12px; }
  .gloss { position: static; display: block; transform: none; margin-top: 8px; } .gloss i { font-size: 12px; max-width: none; }
  html[lang="id"] .gloss { display: none; }
  .tanya-desc { order: 2; margin-top: 16px; max-width: none; font-size: 15.5px; line-height: 1.6; }
  .peek {
    order: 3; position: relative; display: grid; gap: 8px; margin-top: 26px; padding: 14px 16px 12px; border: 0; text-align: left;
    background: #fbfaf6; color: #2a2a28; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 18px rgba(80,0,20,.28); -webkit-tap-highlight-color: transparent;
  }
  .peek::before, .pp-slip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 8px; background: linear-gradient(135deg, transparent 4px, #fbfaf6 0) 0 0 / 8px 8px repeat-x, linear-gradient(225deg, transparent 4px, #fbfaf6 0) 0 0 / 8px 8px repeat-x; }
  .peek-head { font-weight: 700; letter-spacing: .14em; border-bottom: 1px dashed #999; padding-bottom: 7px; }
  .peek-text { display: block; height: 4.35em; overflow: hidden; white-space: pre-wrap; word-break: break-word; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent); mask-image: linear-gradient(180deg, #000 35%, transparent); }
  .peek-more { justify-self: end; display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .14em; color: var(--accent-deep); }
  .peek-more::after { content: "▶"; font-size: 9px; }
  .peek:active { transform: translateY(2px); box-shadow: 0 4px 10px rgba(80,0,20,.25); }
  .units { order: 4; zoom: 1; display: flex; gap: 12px; margin: 22px 0 0; }
  .unit-copy { flex: 1; min-width: 0; width: auto; }
  .bigkey { white-space: normal; line-height: 1.25; letter-spacing: .14em; }
  .ch-tanya .stage { order: 5; --gbs: .74; width: 330px; margin: 66px 0 calc(-560px * (1 - var(--gbs))) calc(50% - 165px); transform: scale(var(--gbs)); transform-origin: 50% 0; }
  .ch-tanya .tanya-copy > .fine { order: 6; margin-top: 26px; max-width: none; font-size: 12.5px; }
  /* page two: the whole prompt on a slip, and the copy unit again */
  .ch-tanya.sub .tanya-copy, .ch-tanya.sub .stage, .ch-tanya.sub .wires { display: none; }
  .ch-tanya.sub .prompt-page { display: block; order: 7; padding-top: 18px; animation: sub-in .24s var(--ease-out) both; }
  .ch-tanya.unsub .tanya-copy > * { animation: sub-back .24s var(--ease-out) both; }
  .ch-tanya.unsub .stage, .ch-tanya.unsub .wires { animation: fade-in .24s ease-out both; }   /* the Game Boy's scale is a transform */
  @keyframes fade-in { from { opacity: 0; } }
  .pp-slip { position: relative; padding: 16px 18px 18px; background: #fbfaf6; color: #2a2a28; box-shadow: 0 10px 22px rgba(80,0,20,.3); }
  .pp-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px dashed #999; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
  .pp-langs { display: flex; gap: 2px; margin-right: -8px; }
  .pp-langs .dial-mark { position: static; padding: 8px; font-size: 12px; }
  .pp-text { margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
  .pp-foot { margin-top: 16px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent-deep); }
  .pp-copy { margin-top: 28px; }
  .prompt-page .fine { margin-top: 20px; max-width: none; font-size: 12.5px; color: #fff3ea; }

  /* 03 REFERENSI, page one: pick an episode (each a cassette's or a VHS tape's spine); page two: its paper */
  .referensi-head { display: block; }
  .title-ink.blue { margin-top: 6px; font-size: min(66px, 14.6vw); }   /* REFERENCES must fit too */
  .referensi-sub { margin: 12px 0 0; max-width: none; font-size: 14.5px; }
  .referensi-body { display: block; margin-top: 24px; }
  .rack-cap { margin-top: 22px; }
  .shelves { display: flex; flex-direction: column; gap: 28px; overflow: visible; margin: 0; padding: 22px 0 0; }
  .shelf { gap: 14px; }
  .tapes { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; }
  .cas, .vhs { width: 100%; height: 66px; -webkit-tap-highlight-color: transparent; }
  .tape:hover, .tape.on { transform: none; }
  /* the ring marks the episode last opened, not the one the printer holds by default */
  .cas.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 12px 20px rgba(20,20,60,.28); }
  .vhs.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #050506, 0 4px 0 #050506, 0 12px 20px rgba(20,20,60,.28); }
  .cas.last, .vhs.last { box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #0d0d0f, 0 4px 0 #0d0d0f, 0 0 0 3px var(--accent), 0 14px 22px rgba(255,31,85,.3); }
  .tape:active { transform: scale(.985); }
  .tape .win, .tape .bot, .tape .brand, .tape .groove, .tape .lab-show { display: none; }
  .tape .lab { left: 18px; right: 42px; top: 8px; bottom: 8px; width: auto; height: auto; }
  .tape .num { left: 9px; top: 6px; font-size: 25px; }
  .tape .id { left: 9px; right: auto; top: auto; bottom: 6px; font-size: 14px; }
  .cas .lab::before { left: 66px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .cas .lab::after { left: 71px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .vhs .lab::before { width: 4px; }
  .vhs .num, .vhs .id { left: 12px; }
  .tape .topic { left: 84px; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; }
  .tape::after { content: "▶"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #8b867b; }
  .tape .stk { right: 30px; top: -10px; padding: 7px 5px; font-size: 7px; }
  .ch-referensi .printer { display: none; }
  .ch-referensi.sub .referensi-head, .ch-referensi.sub .rack { display: none; }
  .ch-referensi.sub .printer { display: block; max-width: none; padding-top: 8px; animation: sub-in .24s var(--ease-out) both; }
  .ch-referensi.unsub .referensi-head, .ch-referensi.unsub .rack { animation: sub-back .24s var(--ease-out) both; }
  .printer-body { height: 42px; }
  .paper { margin: -14px 6px 0; overflow: visible; }
  .paper-inner {
    padding: 52px 34px 44px; font-size: 15.5px;
    background:
      radial-gradient(circle at 11px 12px, #e3dccb 4px, transparent 4.5px) 0 0 / 22px 24px repeat-y,
      radial-gradient(circle at 11px 12px, #e3dccb 4px, transparent 4.5px) 100% 0 / 22px 24px repeat-y,
      var(--noise-soft) 0 0 / 220px 220px,
      #fbf9f2;
  }
  .paper-inner::before { left: 22px; } .paper-inner::after { right: 22px; }
  .ref-title { font-size: 26px; } .ref-topic { font-size: 18px; } .ref-meta { font-size: 12px; }
  .refs { gap: 18px; } .refs li { grid-template-columns: 26px 1fr; }
  .why { font-size: 14.5px; }

  /* 04 TENTANG: the dossier, nothing laid over its words */
  .tentang-wrap { display: block; width: auto; }
  .title-ink.about { writing-mode: horizontal-tb; transform: none; margin: 6px 0 56px; font-size: min(60px, 16vw); }
  .title-ink.about span::before { left: .035em; top: .03em; }
  .dossier { width: auto; transform: rotate(-.8deg); }
  .folder-tab { top: -30px; left: 18px; padding: 6px 16px 12px; font-size: 11px; }
  .folder { padding: 10px; }
  .sheet { padding: 24px 18px 20px; transform: rotate(.6deg); }
  .polaroid { width: 108px; right: 8px; top: -46px; padding: 6px 6px 22px; }
  .polaroid-cap { font-size: 8px; bottom: 7px; }
  .clip { left: 16px; top: -14px; width: 13px; height: 40px; border-width: 2px; } .clip::after { border-width: 2px; }
  .dossier-head { max-width: none; padding-right: 108px; margin-bottom: 18px; font-size: 30px; }
  .facts { grid-template-columns: 1fr; gap: 0; max-width: none; font-size: 14.5px; line-height: 1.65; }
  .facts dt { padding: 16px 0 2px; }
  .facts dt:first-child { padding-top: 0; }
  .redact { padding: 6px 0; -webkit-tap-highlight-color: transparent; }
  .sheet { display: flex; flex-direction: column; }
  .stamp { order: 9; position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 18px 8px 8px 0; font-size: 30px; }

  /* 05 KONTAK: the transmitter, big fields and a big SEND; KONTAK sprayed on the floor below it */
  .ch-kontak { padding-bottom: calc(var(--dock) + 170px); }
  .floor { bottom: var(--dock); perspective: 320px; perspective-origin: 50% 40%; }
  .spray { font-size: 30vw; }
  .ch-kontak .stage { margin-top: 4px; }
  .tx { width: 100%; padding: 14px 14px 16px; }
  .tx-head { gap: 10px; }
  .tx-main { grid-template-columns: 1fr; gap: 14px; }
  .scope { min-height: 92px; }
  .tx-form { grid-template-columns: 1fr; gap: 12px; }
  .tx-form label { font-size: 11px; }
  .tx-form input, .tx-form textarea { font-size: 21px; padding: 10px 12px; }
  .tx-form textarea { height: 128px; }
  .tx-foot { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
  .tx-status { font-size: 18px; }
  .send { width: 100%; height: 66px; }
  .legal { position: absolute; left: 0; right: 0; bottom: calc(var(--dock) + 14px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ch.leaving, .boot.gone, .ch.sub .prompt-page, .ch.sub .printer, .ch.unsub * { animation: none !important; }
  .osd.on .osd-line { animation: none; clip-path: none; }
  .obj, .obj.live { transform: none !important; }
  .lh-unit, .lang-hint.off .lh-unit, .lh-led, .lh-up, .lh-vfd::after { animation: none; }
}