/* SIDE EFFECTS: the trip.
   One fixed stage. fluid.js prints ink and type onto it; this file is the frame around
   that: a carton's worth of small print, and the two sober screens. */

:root {
  --paper: #F4EDE0;
  --ink: #0A1F24;
  --ink-soft: #4B5F64;
  --signal: #FF4F2E;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --monof: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --m: clamp(16px, 2.4vw, 34px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hud: 1;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
html.gated { overflow: hidden; }
/* No scrollbar during the trip; the dose rule shows how far in you are. */
html:not(:has(body.sober)) { scrollbar-width: none; }
html:not(:has(body.sober))::-webkit-scrollbar { display: none; }
body { margin: 0; overflow-x: hidden; font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
em { font-style: italic; }
.mono { font: 500 11px/1.3 var(--monof); letter-spacing: .09em; text-transform: uppercase; }

/* ---------- stage ---------- */
#world { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
#gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#copy, .ch { position: absolute; inset: 0; pointer-events: none; }
#track { width: 1px; }

/* Small print that belongs to a beat, set on the liquid. */
.lbl, .sub {
  position: absolute; left: var(--m); right: var(--m); text-align: center;
  color: #fff; mix-blend-mode: difference;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .9s var(--ease);
}
.lbl { top: 18%; }
.sub { bottom: 22%; }
/* A plate label is a printed tag, so it reads on any ink. */
.lbl { color: var(--ink); mix-blend-mode: normal; }
.lbl span { display: inline-block; padding: 7px 11px 6px; background: var(--paper); border: 1px solid var(--ink); }
.ch.on .lbl, .ch.on .sub { opacity: 1; transform: none; transition-delay: .15s; }

/* With the renderer running, headlines live in the canvas; these stay for assistive tech. */
#world.gl .ch:not(.screen) .q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Without it, they are the page. */
.q { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--m); text-align: center; font: 400 clamp(40px, 8vw, 128px)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; opacity: 0; transition: opacity .6s ease; }
.ch.on .q { opacity: 1; }

/* ---------- the two sober screens ---------- */
.screen-in {
  position: absolute; left: 50%; top: 50%; width: min(600px, 100% - 2 * var(--m));
  transform: translate(-50%, calc(-50% + 18px)); opacity: 0;
  transition: opacity .5s ease, transform 1s var(--ease);
}
.screen.on .screen-in { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; transition-delay: .2s; }
.screen h2 { margin-top: 18px; font: 400 clamp(46px, 7vw, 98px)/.95 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.screen h2 em { color: var(--signal); }
.screen p { margin-top: 18px; max-width: 46ch; color: var(--ink-soft); }
.screen p.mono { margin: 0; color: var(--ink); }
.isi .screen-in { color: #111; }
.isi p { color: #444; }
.isi p.mono { color: #111; }
.final h2 { font-size: clamp(40px, 5.6vw, 78px); }
.link { display: inline-flex; gap: .5em; padding-bottom: 3px; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; }
.link:hover { border-bottom-color: transparent; }
.link svg { width: .95em; height: .95em; align-self: center; fill: currentColor; }
.isi .link { margin-top: 30px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 99px; background: var(--signal); color: #1F0A05; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
[hidden] { display: none !important; }
.ca { display: flex; align-items: center; gap: 12px; margin-top: 22px !important; }
.ca b { font-weight: 500; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.boxed { max-width: none !important; margin-top: 30px !important; padding: 14px 16px; border: 1.5px solid var(--ink); font-size: 13px; line-height: 1.45; color: var(--ink) !important; }
.boxed b { font: 500 11px/1 var(--monof); letter-spacing: .09em; text-transform: uppercase; }

/* ---------- frame ---------- */
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; color: #fff; mix-blend-mode: difference; opacity: var(--hud); transition: opacity .8s ease; }
.hud > * { position: absolute; pointer-events: auto; }
.crop { width: 13px; height: 13px; border: 0 solid currentColor; pointer-events: none !important; }
.c-tl { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.c-tr { top: 9px; right: 9px; border-width: 1px 1px 0 0; }
.c-bl { bottom: 9px; left: 9px; border-width: 0 0 1px 1px; }
.c-br { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; }

.brand { top: var(--m); left: var(--m); display: grid; gap: 5px; text-decoration: none; }
.brand-name { font: 400 27px/1 var(--serif); letter-spacing: -.02em; }
.brand-name sup { font-size: .45em; }
.brand .mono { opacity: .8; }

.ctl { top: var(--m); right: var(--m); display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
.ctl button, .clock button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 0; }
.ctl button b, .clock button b { font-weight: 500; opacity: .6; }
.ctl [aria-pressed="true"] b, .clock [aria-pressed="true"] b { opacity: 1; }
.ctl button:hover, .clock button:hover { text-decoration: underline; text-underline-offset: 4px; }
.ctl .x { display: grid; place-items: center; padding: 6px 2px; color: inherit; }
.ctl .x svg { width: 15px; height: 15px; fill: currentColor; }
.ctl .x:hover { opacity: .6; }
.ctl .buy { padding: 10px 15px; border-radius: 99px; background: #fff; color: #000; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.clock { left: var(--m); bottom: var(--m); display: grid; gap: 6px; justify-items: start; }
.clock b#clock { font: 500 clamp(24px, 2.9vw, 40px)/1 var(--monof); letter-spacing: -.01em; }
.dose { right: var(--m); bottom: var(--m); display: grid; gap: 6px; justify-items: end; text-align: right; pointer-events: none !important; }
.dose b { font: 500 clamp(24px, 2.9vw, 40px)/1 var(--monof); letter-spacing: -.01em; }
.rule { position: relative; display: block; width: clamp(110px, 12vw, 170px); height: 7px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10%) bottom / 100% 100% no-repeat; border-bottom: 1px solid currentColor; }
.rule i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: currentColor; }

/* The safety tray from the commercial, reduced to one line. It is now your trip sitter. */
.sitter { left: 50%; bottom: var(--m); width: min(44vw, 540px); transform: translateX(-50%); overflow: hidden; white-space: nowrap; pointer-events: none !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.sitter > div { display: inline-block; will-change: transform; }

.cur { position: fixed; left: 0; top: 0; z-index: 60; display: none; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; transition: scale .45s var(--ease); will-change: translate; }
.cur::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; }
.cur.hot { scale: 1.7; }
html.has-cur .cur { display: block; }
html.has-cur:not(.gated), html.has-cur:not(.gated) * { cursor: none !important; }
html.gated .cur, body.sober .cur { display: none !important; }

/* ---------- gate ---------- */
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--m); background: var(--paper); color: var(--ink); text-align: center; transition: opacity 1s ease .3s, visibility 0s linear 1.4s; }
.gate-in { width: min(680px, 100%); }
.gate h1 { margin-top: 22px; font: 400 clamp(40px, 6.6vw, 88px)/.96 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.gate h1 em { color: var(--signal); }
.g-sub { margin-top: 18px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); }
.g-capsule { display: flex; width: min(430px, 100%); aspect-ratio: 2.55; margin: 38px auto 0; filter: drop-shadow(0 26px 30px rgba(10, 31, 36, .22)); }
.g-half { flex: 1; display: grid; place-content: center; gap: 8px; transition: transform 1s cubic-bezier(.7, 0, .2, 1), filter .3s; box-shadow: inset 0 -14px 24px rgba(10, 31, 36, .16), inset 0 10px 16px rgba(255, 255, 255, .5); }
.g-half:hover, .g-half:focus-visible { filter: brightness(1.06); }
.g-half b { font: 400 clamp(24px, 3.6vw, 34px)/1 var(--serif); letter-spacing: -.01em; }
.g-half .mono { font-size: 10px; opacity: .75; }
.g-take { border-radius: 999px 0 0 999px; background: linear-gradient(180deg, #FF7A5E, #F04A28); color: #1F0A05; }
.g-placebo { border-radius: 0 999px 999px 0; background: linear-gradient(180deg, #FFFFFF, #EDE2CC); }
.g-quiet { margin-top: 30px; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.g-fine { margin: 22px auto 0; max-width: 46ch; font-size: 13px; color: var(--ink-soft); }
.gate .ca { justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 26px !important; font-size: 11px; color: var(--ink-soft); }
.gate.open { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.open .g-take { transform: translateX(-60vw); }
.gate.open .g-placebo { transform: translateX(60vw); }

/* ---------- placebo mode: the same words as a plain page ---------- */
.sober-title { display: none; }
body.sober #world { position: static; }
body.sober #gl, body.sober #track, body.sober .clock, body.sober .dose, body.sober .crop, body.sober .sitter { display: none; }
body.sober #copy { position: static; width: min(720px, 100% - 2 * var(--m)); margin: 0 auto; padding: 130px 0 90px; pointer-events: auto; }
body.sober .sober-title { display: block; margin-bottom: 30px; font: 400 clamp(40px, 7vw, 76px)/.95 var(--serif); letter-spacing: -.025em; }
body.sober .sober-title em { color: var(--ink-soft); }
body.sober .ch { position: static; display: grid; gap: 10px; padding: 26px 0; border-top: 1px solid rgba(10, 31, 36, .18); pointer-events: auto; }
body.sober .ch::before { content: "T+" attr(data-ts); font: 500 11px/1 var(--monof); letter-spacing: .09em; color: var(--ink-soft); }
body.sober .q { position: static !important; display: block; width: auto !important; height: auto !important; padding: 0; overflow: visible !important; clip-path: none !important; white-space: normal !important; text-align: left; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.06; opacity: 1; }
body.sober .lbl, body.sober .sub { position: static; opacity: 1; transform: none; text-align: left; color: var(--ink-soft); mix-blend-mode: normal; }
body.sober .screen-in { position: static; width: auto; opacity: 1; transform: none; }
body.sober .screen h2 { margin-top: 10px; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.06; }
body.sober .hud { mix-blend-mode: normal; color: var(--ink); background: linear-gradient(var(--paper) 62px, transparent 110px); }
body.sober .ctl .buy { background: var(--signal); color: #1F0A05; }

/* ---------- the feed: where the art direction goes to die, on purpose ----------
   Every surface here imitates a format (short-video chrome, OS banners, old dialog boxes,
   caption memes), so it uses that format's fonts instead of ours. Things cut in; nothing eases. */
#world { --fry: 0; }
#world.fry #gl { filter: contrast(calc(1 + var(--fry) * .8)) saturate(calc(1 + var(--fry) * 1.7)); }
#feed { position: absolute; inset: 0; isolation: isolate; overflow: hidden; visibility: hidden; pointer-events: none; color: #fff; font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
#feed.live { visibility: visible; }
#feed [data-at] { visibility: hidden; }
#feed.live [data-at].in { visibility: visible; }
#feed.frozen { filter: brightness(.4) saturate(.6) blur(2px); }
#feed.frozen * { animation-play-state: paused !important; }

.fd-meta { position: absolute; left: var(--m); bottom: calc(var(--m) + 104px); max-width: 330px; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.fd-meta b { font-size: 15.5px; }
.fd-meta p { margin-top: 5px; }
.fd-meta span { font-weight: 650; }
.fd-sound i { font-style: normal; opacity: .85; }
.fd-rail { position: absolute; right: var(--m); top: 50%; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); text-align: center; }
.fd-rail svg { display: block; width: 36px; height: 36px; margin: 0 auto 3px; fill: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.fd-rail li:first-child svg { fill: #FF2D55; }
.fd-rail b { font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.fd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.fd-bar i { display: block; height: 100%; width: 0; background: #fff; }

.fd-cap { position: absolute; left: 4%; right: 4%; top: 61%; text-align: center; font: 900 clamp(30px, 5.2vw, 70px)/1 "Montserrat", "Arial Black", sans-serif; letter-spacing: -.01em; text-transform: uppercase; -webkit-text-stroke: .16em #000; paint-order: stroke fill; }
.fd-cap .hl { color: #FFE600; }
.fd-cap.hit { animation: cap-pop .09s ease-out; }
@keyframes cap-pop { from { transform: scale(.86); } to { transform: none; } }

.fd-tiles { position: absolute; left: var(--m); top: 15%; display: grid; gap: 10px; width: clamp(150px, 15vw, 210px); }
.fd-tile { position: relative; margin: 0; aspect-ratio: 9 / 12; border-radius: 14px; overflow: hidden; background: #0B1016; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8); }
.fd-tile canvas { display: block; width: 100%; height: 100%; }
.fd-tile figcaption { position: absolute; left: 9px; right: 9px; bottom: 7px; font-size: 10.5px; font-weight: 650; text-shadow: 0 1px 2px #000; }
.press { position: absolute; inset: 0; background: linear-gradient(#232A32, #0E1216); }
.press .bed { position: absolute; left: 12%; right: 12%; bottom: 16%; height: 7%; background: linear-gradient(#B9C2CA, #7C868F); }
.press .ram { position: absolute; left: 22%; right: 22%; top: 0; height: 46%; background: linear-gradient(90deg, #6E7780, #D2D8DD 45%, #6E7780); animation: ram 2.2s cubic-bezier(.6, 0, .4, 1) infinite; }
.press .pill { position: absolute; left: 27%; bottom: 23%; width: 46%; aspect-ratio: 2.4; border-radius: 99px; background: linear-gradient(90deg, #FF4F2E 50%, #FFF4DC 50%); transform-origin: 50% 100%; animation: squish 2.2s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes ram { 0%, 100% { transform: translateY(-34%); } 44%, 56% { transform: translateY(38%); } }
@keyframes squish { 0%, 30% { transform: none; } 44%, 56% { transform: scale(1.55, .16); } 78% { transform: scale(.92, 1.1); } 100% { transform: none; } }

.fd-live { position: absolute; right: var(--m); top: calc(var(--m) + 52px); display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 9px; border-radius: 7px; background: #FF2D55; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.fd-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.fd-live b { padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .35); letter-spacing: 0; }
.fd-chat { position: absolute; right: calc(var(--m) + 68px); bottom: calc(var(--m) + 104px); width: min(300px, 58vw); height: 38vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.fd-chat p { flex: none; margin: 0; font-size: 13.5px; line-height: 1.3; font-weight: 500; text-shadow: 0 1px 2px #000; }
.fd-chat b { font-weight: 750; }
.fd-chat .vip { align-self: flex-start; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, .16); }

.fd-notifs { position: absolute; left: 50%; top: calc(var(--m) + 50px); display: grid; gap: 8px; width: min(380px, 100% - 24px); transform: translateX(-50%); }
.nf { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 10px 13px 10px 10px; border-radius: 18px; background: rgba(246, 246, 248, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #111; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: nf-in .26s cubic-bezier(.2, .9, .3, 1.15) both; }
.nf i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; font-style: normal; font-size: 20px; }
.nf b { display: block; font-size: 14px; font-weight: 650; }
.nf p { margin: 1px 0 0; font-size: 14px; line-height: 1.25; }
.nf span { align-self: start; font-size: 12px; color: #6B6B70; }
@keyframes nf-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

.pop { position: absolute; width: 250px; border: 2px outset #fff; background: #C0C0C0; box-shadow: 2px 2px 0 #000; color: #000; font: 12px/1.35 Tahoma, "MS Sans Serif", Geneva, sans-serif; pointer-events: auto; }
.pop header { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 3px 6px; background: linear-gradient(90deg, #000080, #1084D0); color: #fff; }
.pop header i { display: grid; place-items: center; width: 16px; height: 14px; border: 1px outset #fff; background: #C0C0C0; color: #000; font-style: normal; font-size: 11px; line-height: 1; cursor: pointer; }
.pop p { margin: 0; padding: 14px 12px; }
.pop footer { display: flex; justify-content: center; gap: 8px; padding: 0 0 12px; }
.pop button { min-width: 72px; padding: 4px 10px; border: 2px outset #fff; background: #C0C0C0; color: #000; font: inherit; cursor: pointer; }
.pop button:active { border-style: inset; }

.stp { position: absolute; overflow: hidden; background: #fff; color: #111; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .65); }
.stp canvas { display: block; width: 100%; height: auto; }
.stp-meme { background: #000; }
.stp-meme b { position: absolute; left: 4%; right: 4%; text-align: center; font: 400 clamp(15px, 1.75vw, 25px)/1 Impact, "League Gothic", "Arial Narrow", sans-serif; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }
.stp-meme .top { top: 5%; }
.stp-meme .bot { bottom: 5%; }
.stp-meme.fried canvas { filter: contrast(2.3) saturate(3.2) brightness(1.15) hue-rotate(-14deg); }
.stp-meme.fried::after { content: "💯😂👌"; position: absolute; right: 4%; bottom: 26%; font-size: 22px; rotate: -12deg; }
.stp-post { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.35; }
.stp-post header { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; }
.stp-post header i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; }
.stp-post header b { font-weight: 700; text-transform: capitalize; }
.stp-post header span, .stp-post footer { font-size: 12px; color: #667; }
.stp-post p { margin: 8px 0; white-space: pre-line; }
.stp-thumb { border-radius: 10px; background: #000; }
.stp-thumb canvas { filter: saturate(1.9) contrast(1.3); }
.stp-thumb .big { position: absolute; left: 6%; top: 8%; font: 900 clamp(14px, 1.7vw, 24px)/1 "Montserrat", "Arial Black", sans-serif; color: #FFE600; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.stp-thumb .big.alt { top: auto; bottom: 12%; color: #fff; }
.stp-thumb .ring { position: absolute; right: 10%; top: 24%; width: 30%; aspect-ratio: 1; border: 4px solid #FF1E1E; border-radius: 50%; }
.stp-thumb .arrow { position: absolute; right: 40%; top: 30%; font-style: normal; font-size: 34px; line-height: 1; color: #FF1E1E; rotate: -18deg; }
.stp-thumb .len { position: absolute; right: 5px; bottom: 5px; padding: 1px 4px; border-radius: 3px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 11px; font-weight: 600; }
.stp-creature { border: 6px solid #fff; }
.stp-creature canvas { filter: saturate(2.1) contrast(1.3); }
.stp-creature .eyes { position: absolute; left: 20%; right: 20%; top: 30%; display: flex; justify-content: center; gap: 12%; }
.stp-creature .eyes u { width: 30%; aspect-ratio: 1; border: 2px solid #000; border-radius: 50%; background: radial-gradient(circle at 62% 62%, #000 0 27%, #fff 29%); }
.stp-creature .name { position: absolute; left: 3%; right: 3%; bottom: 6%; text-align: center; font: 700 clamp(14px, 1.6vw, 22px)/1.05 "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive; color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; }

.fd-reel { position: absolute; left: 24%; top: 13%; width: clamp(110px, 12vw, 168px); border: 3px solid #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8); }
.fd-reel canvas { display: block; width: 100%; height: auto; filter: saturate(1.8) contrast(1.25); }
.fd-reel b { position: absolute; right: 6px; top: 6px; padding: 2px 6px; border-radius: 5px; background: #000; font-size: 12px; font-weight: 800; }
.fd-reel b::before { content: "⏩ "; }

/* Staying too long. Three narrators, a wall of gameplay, screenshots of screenshots,
   cursors that are not yours, and a deck that never stops falling. */
.fd-cap.c2 { top: 29%; font-size: clamp(20px, 3.2vw, 44px); }
.fd-cap.c2 .hl { color: #FF2E93; }
.fd-cap.c3 { top: 81%; font-size: clamp(18px, 2.6vw, 36px); }
.fd-cap.c3 .hl { color: #2EE6D6; }
.fd-wall { position: absolute; left: 0; bottom: 0; width: 100%; height: 20vh; visibility: hidden; }
.fd-trail { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
#feed.live .fd-wall.in, #feed.live .fd-trail.in { visibility: visible; }
.fd-cursors { position: absolute; inset: 0; }
.fc { position: absolute; left: 0; top: 0; width: 22px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M2 2v22l6-5 4 9 4-2-4-9h8z' fill='white' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); will-change: transform; }
.stp-creature .eyes u { background: radial-gradient(circle at calc(50% + var(--ex, 12%)) calc(50% + var(--ey, 12%)), #000 0 27%, #fff 29%); }
.stp-shot { aspect-ratio: 9 / 14; border: 5px solid #111; border-radius: 20px; background: #111; }
.shot { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #1C1C1E; }
.shot > .bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(1.6) contrast(1.2) brightness(.8); }
.shot .stp { scale: .42; transform-origin: 0 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.shot .bar { position: absolute; inset: 0 0 auto 0; z-index: 9; display: flex; justify-content: space-between; padding: 6px 11px; background: linear-gradient(rgba(0, 0, 0, .7), transparent); color: #fff; font-size: 10px; font-weight: 650; }
.shot .bar i { font-style: normal; }
.shot .tag { position: absolute; left: 8px; bottom: 8px; z-index: 9; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 10.5px; font-weight: 600; }

/* The crash-out: an operating system's idea of concern. */
.brk .screen-in { top: auto; bottom: 9%; width: min(440px, 100% - 32px); padding: 26px 26px 22px; border-radius: 28px; background: #fff; color: #111; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; transform: translate(-50%, 40px); }
.brk.on .screen-in { transform: translate(-50%, 0); }
.brk h2 { margin-top: 10px; font: 700 28px/1.15 -apple-system, "SF Pro Display", "Segoe UI", Roboto, sans-serif; letter-spacing: -.02em; }
.brk p { margin-top: 10px; font-size: 15px; color: #444; }
.brk p.mono { color: #8A8A8E; }
.brk .cta-row { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 20px; }
.brk .btn { justify-content: center; background: #111; color: #fff; }
.brk .link { justify-content: center; padding: 12px; border: 0; color: #6B6B70; }
body.sober #feed { display: none; }
body.sober .brk .screen-in { padding: 0; background: none; box-shadow: none; font-family: inherit; }
body.sober .brk h2 { font: 400 clamp(28px, 4.4vw, 42px)/1.06 var(--serif); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .brand-name { font-size: 22px; }
  .brand .mono { display: none; }
  .ctl { gap: 12px; }
  .ctl .buy { padding: 9px 12px; }
  .sitter { left: var(--m); right: var(--m); bottom: 12px; width: auto; transform: none; }
  .clock, .dose { bottom: calc(var(--m) + 22px); transition: opacity .5s ease; }
  /* The two sober screens need the whole height on a phone. */
  html.at-screen :is(.clock, .dose, .sitter) { opacity: 0; pointer-events: none; }
  .dose .rule, .dose span:first-child { display: none; }
  .dose b { font-size: 15px; }
  .clock b#clock { font-size: 22px; }
  .lbl { top: 17%; }
  .sub { bottom: 25%; }
  .screen p { font-size: 15.5px; }
  .fd-tiles { left: 10px; top: 64px; width: 29vw; gap: 6px; }
  .fd-reel { left: auto; right: 58px; top: 104px; width: 25vw; }
  .fd-meta { left: 12px; bottom: 96px; max-width: 66vw; font-size: 13px; }
  .fd-rail { right: 8px; gap: 14px; }
  .fd-rail svg { width: 30px; height: 30px; }
  .fd-chat { left: 12px; right: 62px; bottom: 176px; width: auto; height: 20vh; }
  .fd-cap { top: 47%; font-size: clamp(26px, 9vw, 44px); }
  .fd-live { top: 62px; right: 10px; }
  .pop { width: 206px; }
  .fd-wall { height: 13vh; }
  .fd-cap.c2 { top: 33%; font-size: clamp(17px, 5.6vw, 28px); }
  .fd-cap.c3 { top: 72%; font-size: clamp(15px, 4.8vw, 24px); }
  .boxed { margin-top: 20px !important; padding: 11px 12px; font-size: 11.5px; }
  .cta-row { margin-top: 20px; gap: 12px 18px; }
}

/* Four things sit beside the name on a phone: close them up so they clear it. */
@media (max-width: 430px) {
  .brand-name { font-size: 20px; }
  .ctl { gap: 8px; letter-spacing: .04em; }
  .ctl .x { padding: 6px 0; }
  .ctl .buy { padding: 9px 10px; }
}