:root {
  --ink: #1b1520;
  --cream: #f5ecdd;
  --amber: #ffb547;
  --mint: #7fe8c1;
  --coral: #ff5d4a;
  /* the sky: main.js moves these with the clock */
  --bg: #f2b07a;
  --fg: #1b1520;
  --accent: #9c2f1c;
  --line: color-mix(in srgb, var(--fg) 20%, transparent);
  --panel: color-mix(in srgb, var(--fg) 7%, transparent);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --pixel: 'VT323', ui-monospace, monospace;
  --gut: clamp(16px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--sans); overflow-x: hidden; }
a { color: inherit; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; color: var(--accent); }
::selection { background: var(--amber); color: var(--ink); }

h1, h2, .say { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.6vw, 112px); }
h2 { font-size: clamp(34px, 4.4vw, 72px); }
.say { font-size: clamp(38px, 5vw, 84px); }
.kicker { font: 400 21px/1.1 var(--pixel); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.78; margin-bottom: 18px; }
.body { font-size: clamp(16px, 1.25vw, 19px); max-width: 34em; margin-top: 18px; opacity: 0.86; }
.note { font: 400 13px/1.4 var(--mono); opacity: 0.6; margin-top: 14px; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 64px; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud.on-dark { color: var(--cream); --line: #ffffff33; }
.mark { display: flex; align-items: center; color: inherit; text-decoration: none; }
.logo { display: block; width: 144px; height: 36px; }
.clock { display: flex; align-items: baseline; gap: 12px; font-family: var(--pixel); }
.clock span { font-size: 40px; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.clock small { font-size: 18px; opacity: 0.7; letter-spacing: 0.05em; text-transform: uppercase; }
.hud-link { font: 500 14px/1 var(--sans); text-decoration: none; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px); }
.hud-link:hover { background: var(--panel); }

/* chapter rail */
.rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 19; }
.rail ol { display: grid; gap: 14px; }
.rail a { position: relative; display: flex; align-items: center; gap: 10px; justify-content: flex-end; text-decoration: none; font: 400 17px/1 var(--pixel); opacity: 0.45; }
.rail a span { position: absolute; right: calc(100% + 10px); font-family: var(--sans); font-size: 12px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; white-space: nowrap; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail li.on a { opacity: 1; }
.rail a::after { content: ''; width: 8px; height: 2px; background: currentColor; }
.rail li.on a::after { width: 18px; background: var(--accent); }
.rail-dot { display: none; }

/* ---------- acts ---------- */
.act { position: relative; height: calc(var(--len) * 1vh); }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: 84px calc(var(--gut) + 64px) 40px var(--gut);
}
.copy { position: relative; height: min(64vh, 620px); }
.copy > .line { position: absolute; left: 0; right: 0; top: 50%; translate: 0 calc(-50% + 18px); }
.js .line { opacity: 0; transition: opacity .45s ease, translate .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.js .line.on { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.js .line.keep { translate: 0 10px; }
.js .line.keep.on { translate: 0 0; }
.no-js .copy { height: auto; display: grid; gap: 40px; }
.no-js .copy > .line { position: static; translate: none; }
.view { position: relative; min-width: 0; display: grid; gap: 14px; align-content: center; }
.view canvas { width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 4px; }

/* 18:47 · the desktop */
.stage-full { display: block; padding: 0; }
.desk { position: absolute; inset: 64px 0 0 0; }
.win {
  position: absolute; display: flex; flex-direction: column; overflow: visible;
  background: #f7f8fa; color: #1f2733; border: 1px solid #c9d0db; border-radius: 9px;
  box-shadow: 0 1px 0 #fff inset, 0 24px 50px -24px rgba(20, 24, 40, .55);
  font: 400 12px/1.35 var(--sans); will-change: transform, opacity; transform-origin: 50% 50%;
}
.win > header { height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 9px; background: #e9edf2; border-bottom: 1px solid #d3d9e2; border-radius: 9px 9px 0 0; font-weight: 600; color: #4a5465; white-space: nowrap; overflow: hidden; }
.win > header i { width: 9px; height: 9px; border-radius: 50%; background: #cfd5de; flex: none; }
.win > header .t { overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.win .bd { flex: 1; padding: 9px 10px; overflow: hidden; border-radius: 0 0 9px 9px; }
.win .badge { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #e5484d; color: #fff; font: 600 12px/24px var(--sans); text-align: center; box-shadow: 0 4px 10px rgba(229, 72, 77, .4); }
.win .carrier { position: absolute; top: -64px; width: 48px; height: 66px; opacity: 0; }
.win .row { display: flex; gap: 6px; padding: 3px 0; border-bottom: 1px solid #eef1f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .row b { color: #2d5bd7; font-weight: 600; }
.win .muted { color: #8a93a3; }
.win .kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 100%; }
.win .kan div { background: #eef1f5; border-radius: 5px; padding: 5px; display: grid; gap: 4px; align-content: start; font-size: 10px; color: #5b6576; }
.win .kan span { display: block; height: 14px; background: #fff; border: 1px solid #dde2ea; border-radius: 3px; }
.win .kan span.red { border-left: 3px solid #e5484d; }
.win .cal { display: grid; gap: 3px; }
.win .cal span { background: #dfe8fb; border-left: 3px solid #3b6fe0; padding: 2px 6px; border-radius: 3px; color: #27417e; white-space: nowrap; overflow: hidden; }
.win .cal span.x { background: #fde3e3; border-color: #e5484d; color: #7e2727; }
.win .lines span { display: block; height: 6px; background: #e3e7ee; border-radius: 3px; margin: 7px 0; }
.win .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #dde2ea; border: 1px solid #dde2ea; font: 10px/1.6 var(--mono); }
.win .grid span { background: #fff; padding: 0 4px; white-space: nowrap; overflow: hidden; }
.win .grid span.err { color: #e5484d; }
.win.term { background: #121722; color: #c9d1e0; border-color: #2a3242; }
.win.term > header { background: #1b2230; border-color: #2a3242; color: #8f9bb3; }
.win.term .bd { font: 11px/1.5 var(--mono); }
.win.term .r { color: #ff6b6b; }
.win .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 100%; }
.win .tiles span { background: #3a4252; border-radius: 4px; display: grid; place-items: center; color: #cfd6e2; font-size: 10px; }
.win .tog { display: flex; justify-content: space-between; padding: 3px 0; color: #4a5465; }
.win .tog i { width: 22px; height: 12px; border-radius: 6px; background: #c9d0db; position: relative; }
.win .tog i.on { background: #3b6fe0; }

.toasts { position: absolute; right: calc(var(--gut) + 56px); top: 84px; display: grid; gap: 8px; width: min(300px, 70vw); z-index: 3; }
.toast { background: #ffffffee; color: #1f2733; border: 1px solid #d3d9e2; border-radius: 10px; padding: 9px 12px; font: 400 12px/1.35 var(--sans); box-shadow: 0 18px 40px -20px rgba(20, 24, 40, .5); opacity: 0; translate: 16px 0; transition: opacity .3s, translate .4s; }
.toast b { display: block; font-weight: 600; }
.toast.on { opacity: 1; translate: 0 0; }

.hero-copy { position: absolute; left: var(--gut); bottom: 9vh; width: min(680px, 48vw); height: 46vh; z-index: 4; }
.hero-copy > .line { top: auto; bottom: 0; translate: 0 18px; }
.js .hero-copy > .line.on { translate: 0 0; }
.prompt { font: 400 clamp(22px, 2.3vw, 34px)/1.3 var(--mono); max-width: 26em; }
.caret { color: var(--accent); }
.cursor { display: inline-block; width: .55em; height: 1.05em; background: currentColor; vertical-align: -0.15em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sent { font: 400 20px/1 var(--pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-top: 18px; opacity: 0; transition: opacity .4s; }
.sent.on { opacity: 1; }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; font: 400 18px/1 var(--pixel); letter-spacing: .12em; text-transform: uppercase; opacity: calc(0.75 - var(--p, 0) * 6); z-index: 5; }
.scroll-hint::after { content: ''; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: currentColor; animation: drop 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 19:30 · UI → SI */
.stage-center { display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 2vh; text-align: center; }
.glyphs { display: flex; font: 400 clamp(150px, 30vw, 380px)/0.78 var(--pixel); letter-spacing: 0.02em; }
.slot { position: relative; display: inline-block; }
.slot .u { display: inline-block; transform: translateY(calc(var(--k1, 0) * 90vh)) rotate(calc(var(--k1, 0) * 38deg)); opacity: calc(1 - var(--k1, 0) * 0.9); }
.slot .s { position: absolute; left: 0; top: 0; color: var(--accent); transform: translateY(calc((var(--k2, 0) - 1) * 90vh)); opacity: var(--k2, 0); }
.si-copy { display: grid; gap: 18px; justify-items: center; max-width: 900px; }
.si-copy .sub { font-size: clamp(18px, 1.6vw, 24px); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; text-align: left; width: min(720px, 100%); }
.compare div { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.compare div:last-child { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.compare dt { font: 400 28px/1 var(--pixel); }
.compare div:last-child dt { color: var(--accent); }
.compare dd { font-size: 15px; opacity: 0.85; margin-top: 6px; }

/* 19:45 · Personal Intelligence */
.def { font: 400 clamp(18px, 1.6vw, 24px)/1.45 var(--sans); max-width: 26em; border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; }
.def b { font-family: var(--serif); font-weight: 400; font-size: 1.9em; line-height: 1.1; }
.def i { font-family: var(--serif); opacity: 0.7; }
.chat { display: grid; gap: 6px; font: 400 14px/1.4 var(--mono); }
.chat li { padding: 7px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); max-width: 82%; }
.chat li b { font-weight: 500; margin-right: 6px; }
.chat li.a b { color: var(--amber); }
.chat li.b { justify-self: end; }
.chat li.b b { color: var(--mint); }

/* night */
.status-row { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 17px/1 var(--pixel); letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #5b5368; }
.dot.on { background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: blink 1.4s steps(1) infinite; }
.log { display: grid; gap: 3px; font: 400 12.5px/1.45 var(--mono); height: 9.6em; overflow: hidden; align-content: end; mask-image: linear-gradient(transparent, #000 40%); }
.log time { opacity: .55; margin-right: 6px; }
.log b { font-weight: 500; }
.log b.a { color: var(--amber); }
.log b.b { color: var(--mint); }
.log .warn { color: var(--coral); }
.js .log .line:not(.on) { display: none; }
.big-num { font: 400 clamp(110px, 13vw, 210px)/0.85 var(--serif); letter-spacing: -0.03em; color: var(--amber); }
.facts { display: grid; gap: 4px; margin-top: 18px; font: 400 14px/1.45 var(--mono); opacity: .9; }
.facts b { font-weight: 500; color: var(--amber); }

/* fear */
.view-phone { display: block; }
.view-phone .phone { position: absolute; right: -12px; bottom: -6vh; }
.phone {
  width: 230px; padding: 16px 14px 14px; border-radius: 28px; background: #0d0b14; color: var(--cream);
  border: 6px solid #241e2e; box-shadow: 0 30px 60px -30px #000, 0 0 70px -20px color-mix(in srgb, var(--amber) 60%, transparent);
  font: 400 13px/1.4 var(--sans); display: grid; gap: 8px; margin-bottom: 4vh;
}
.ph-app { font: 400 15px/1 var(--pixel); letter-spacing: .06em; opacity: .7; display: flex; align-items: center; gap: 6px; }
.ph-icon { width: 12px; height: 10px; }
.ph-title { font-weight: 600; font-size: 14px; }
.ph-why { opacity: .7; }
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-btns span { text-align: center; padding: 8px 0; border-radius: 10px; background: #221d2c; font-weight: 500; }
.ph-btns span:last-child { background: color-mix(in srgb, var(--coral) 85%, #000); }
.ph-timer { font: 400 12px/1.3 var(--mono); opacity: .75; }
.ph-timer b { font: 400 22px/1 var(--pixel); color: var(--amber); }
.ph-done { display: none; font-weight: 600; color: var(--mint); }
.ph-done span { font-weight: 400; color: var(--cream); opacity: .75; }
.phone.done { box-shadow: 0 30px 60px -30px #000; }
.phone.done .ph-btns, .phone.done .ph-timer { display: none; }
.phone.done .ph-done { display: block; }

/* crew: someone watching them on a phone */
.fan { position: absolute; right: -14px; bottom: -8vh; width: clamp(150px, 13vw, 200px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 5px solid #241e2e; background: #0d0b14; box-shadow: 0 30px 60px -30px #000, 0 0 60px -24px var(--coral); }
.fan canvas { width: 100%; height: 100%; }
.fan .comments { position: absolute; inset: auto 0 0 0; padding: 34px 10px 14px; display: grid; gap: 6px; background: linear-gradient(transparent, #0d0b14f0 38%); font: 500 11px/1.3 var(--sans); color: var(--cream); }
.fan .comments li { opacity: 0; translate: 0 6px; }
.fan.on .comments li { animation: pop .5s ease both; animation-delay: calc(.5s + var(--i) * 1s); }
@keyframes pop { to { opacity: 1; translate: 0 0; } }
.fan .hearts { position: absolute; right: 8px; bottom: 96px; width: 22px; height: 170px; }
.fan .hearts i { position: absolute; left: 0; bottom: 0; font-style: normal; color: var(--coral); opacity: 0; animation: heart 2.8s ease-in infinite; animation-delay: calc(var(--d) * 1s); }
.fan .hearts i::before { content: '\2665'; font: 18px/1 var(--sans); }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-10px, -160px) scale(1.15); } }

/* morning */
.view-morning { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 22px; }
.recap { background: #fffaf2; color: var(--ink); border-radius: 18px; padding: 22px; box-shadow: 0 30px 60px -32px rgba(60, 30, 20, .55); border: 1px solid #eadfcf; display: grid; gap: 14px; font-size: 15px; }
.rc-hi { font: 400 30px/1.05 var(--serif); }
.recap ul { display: grid; gap: 6px; font: 400 14px/1.4 var(--mono); }
.recap ul b { display: inline-block; min-width: 1.8em; color: #b8432a; font-weight: 500; }
.rc-q { padding: 12px 14px; border-radius: 12px; background: #f6ecdc; }
.rc-q b { display: block; font: 400 17px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: #b8432a; margin-bottom: 6px; }
.rc-btns { display: flex; gap: 8px; }
.rc-btns span { padding: 9px 18px; border-radius: 999px; border: 1px solid #d9ccb8; font-weight: 500; }
.rc-btns .yes { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* plain sections after the night */
.plain { padding: clamp(80px, 12vh, 140px) calc(var(--gut) + 64px) clamp(80px, 12vh, 140px) var(--gut); }
.who-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 6vw; align-items: start; }
.who-cards { display: grid; gap: 14px; }
.who-cards article { border-top: 1px solid var(--line); padding-top: 16px; }
.who-cards h3 { font: 400 30px/1.1 var(--serif); }
.who-cards p { margin-top: 6px; opacity: .82; max-width: 36em; }
.support { background: var(--ink); color: var(--cream); --accent: var(--amber); --line: #ffffff2a; }
.support-grid { display: grid; grid-template-columns: minmax(200px, 0.6fr) 1.4fr; gap: 6vw; align-items: center; }
#c-printer { width: 100%; max-width: 360px; height: auto; }
.patreon { display: inline-flex; gap: 12px; align-items: center; margin-top: 30px; padding: 16px 24px; border-radius: 999px; background: var(--amber); color: var(--ink); font: 600 16px/1 var(--sans); text-decoration: none; transition: translate .2s, box-shadow .2s; }
.patreon:hover { translate: 0 -2px; box-shadow: 0 14px 30px -12px var(--amber); }
.foot { display: grid; gap: 24px; }
.foot-big { font: 400 clamp(36px, 5vw, 80px)/1.02 var(--serif); }
.foot-big a { color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; }
.foot-meta { font: 400 13px/1.5 var(--mono); opacity: .65; max-width: 60em; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--mono); }
.foot-legal p { flex: 1 1 320px; opacity: .65; }
.foot-legal nav { display: flex; gap: 18px; }
span[data-todo] { background: color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---------- cookie notice: informs, no consent to ask for (nothing is tracked) ---------- */
.notice { position: fixed; left: 16px; bottom: 16px; z-index: 30; max-width: min(380px, calc(100vw - 32px)); display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border: 1px solid #ffffff1f; border-radius: 14px; background: var(--ink); color: var(--cream); font: 400 13px/1.45 var(--sans); box-shadow: 0 18px 40px -20px #000c; }
.notice button { flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }

/* ---------- legal pages: privacy, terms, cookies ---------- */
body.legal { --bg: #f2eee6; --fg: #302a33; --accent: #1d7a43; }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gut); border-bottom: 1px solid var(--line); }
.legal-top img { display: block; width: 136px; height: auto; }
.legal-top a { font: 500 14px/1 var(--sans); }
.legal-doc { max-width: 720px; margin: 0 auto; padding: 56px var(--gut) 72px; }
.legal-doc h1 { font-size: clamp(42px, 6vw, 64px); }
.legal-doc .updated { margin: 10px 0 36px; font: 400 13px/1.5 var(--mono); opacity: .65; }
.legal-doc h2 { margin: 40px 0 10px; font-size: 28px; }
.legal-doc p, .legal-doc li { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.legal-doc ul { padding-left: 1.2em; list-style: disc; }
.legal-doc a { color: var(--accent); }
.legal-doc code { font: 400 14px var(--mono); }
.legal-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; max-width: 720px; margin: 0 auto; padding: 24px var(--gut) 48px; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--mono); }
.legal-foot span { flex: 1 1 260px; opacity: .65; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .rail { display: none; }
  .hud { height: 56px; }
  .clock small, .hud-link { display: none; }
  .hud .logo { width: 120px; height: 30px; }
  .clock span { font-size: 32px; }
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 14px; padding: 66px var(--gut) 18px; }
  .copy { height: 36svh; }
  .copy > .line { top: auto; bottom: 0; translate: 0 18px; }
  .js .copy > .line.on { translate: 0 0; }
  h2 { font-size: clamp(28px, 7.4vw, 44px); }
  .say { font-size: clamp(30px, 8vw, 48px); }
  .kicker { font-size: 17px; margin-bottom: 10px; }
  .body { font-size: 15px; margin-top: 10px; }
  .view { align-content: start; gap: 10px; }
  .view canvas { max-height: 34svh; }
  .chat { font-size: 12px; max-height: 32svh; overflow: hidden; align-content: end; mask-image: linear-gradient(transparent, #000 30%); }
  .chat li { max-width: 94%; padding: 5px 9px; }
  .log { font-size: 11px; height: 7.4em; }
  .big-num { font-size: 84px; }
  .facts { font-size: 12px; margin-top: 8px; }
  .stats .note { display: none; }
  .view-phone { display: grid; justify-items: center; }
  .view-phone .phone { position: static; }
  .phone { width: min(300px, 100%); margin: 0; padding: 12px; gap: 6px; }
  .fan { right: 2px; bottom: -6svh; width: 118px; border-width: 3px; border-radius: 14px; }
  .fan .comments { padding: 20px 6px 8px; gap: 3px; font-size: 8.5px; }
  .fan .hearts { bottom: 64px; height: 110px; }
  .view-morning { grid-template-columns: 1fr; }
  .view-morning canvas { max-height: 22svh; }
  .recap { padding: 14px; gap: 8px; font-size: 13px; }
  .rc-hi { font-size: 22px; }
  .compare { grid-template-columns: 1fr; }
  .hero-copy { bottom: 6svh; height: 38svh; width: calc(100% - 2 * var(--gut)); }
  .desk { inset: 56px 0 44% 0; }
  .win { font-size: 9px; }
  .win > header { height: 20px; font-size: 9px; }
  .win .carrier { width: 32px; height: 44px; top: -44px; }
  .toasts { display: none; }
  .scroll-hint { display: none; }
  .toasts { right: var(--gut); top: 70px; }
  .plain { padding: 72px var(--gut); }
  .who-grid, .support-grid { grid-template-columns: 1fr; }
  #c-printer { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fan .comments li { opacity: 1; translate: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}