@font-face { font-family: "DM Sans"; src: url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #101111;
  --panel: #161717;
  --panel-2: #1c1d1d;
  --line: #363936;
  --fg: #eceeeb;
  --muted: #a2a5a1;
  --dim: #6f726e;
  --accent: hsl(262 66% 71%);
  --hot: hsl(330 82% 72%);
  --danger: #ff8a8a;
  --ok: #8fdcae;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "DM Sans", system-ui, sans-serif;
  --hdr: 64px;
  --gutter: clamp(16px, 5vw, 72px);
  --ease: cubic-bezier(.22, .61, .24, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 17px/1.65 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.booting { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .88em; color: var(--accent); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.hot { color: var(--hot); }
em { font-style: italic; }

/* ---- boot ---------------------------------------------------- */

#boot {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(900px 600px at 50% 45%, #1b1c1e 0%, var(--bg) 70%);
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}
#boot.gone { opacity: 0; visibility: hidden; }
.boot-gate { position: absolute; bottom: 14svh; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 22px; padding: 0 16px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 500ms ease, transform 600ms var(--ease); }
#boot.at-ask .boot-gate { opacity: 1; transform: none; pointer-events: auto; }
.boot-gate button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 8px; font: 14px var(--mono); color: var(--muted); transition: border-color 200ms, color 200ms, background 200ms; }
.boot-gate button:hover, .boot-gate button:focus-visible { color: var(--fg); border-color: var(--muted); }
.boot-gate .gate-sound { color: var(--fg); border-color: color-mix(in srgb, var(--hot) 60%, var(--line)); background: color-mix(in srgb, var(--hot) 8%, transparent); }
.boot-gate kbd { font: 11px var(--mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); }

.term {
  position: relative; overflow: hidden;
  width: min(560px, calc(100vw - 32px));
  background: #0c0d0d; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font: 14px/1.7 var(--mono);
}
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.term-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2c2e2c; }
.term-bar > span { margin-left: 8px; }
.term-body { padding: 16px 18px 18px; min-height: 180px; }
.term-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.bl { white-space: nowrap; }
.bl .k { display: inline-block; width: 64px; color: var(--accent); }
.bl .ok { color: var(--ok); float: right; }
.bl .cur { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--fg); animation: blink 1s steps(1) infinite; }

#bootTerm.collapse { animation: termCollapse 520ms var(--ease) forwards; }
.boot-mark { position: absolute; display: grid; justify-items: center; gap: 14px; opacity: 0; pointer-events: none; }
.boot-mark img { width: 120px; height: 120px; border-radius: 50%; opacity: 0; transform: scale(.85); transition: opacity 500ms ease, transform 700ms var(--ease); }
.boot-mark .sigil { position: absolute; top: 20px; font: 600 110px/1 ui-serif, Georgia, serif; color: var(--accent); text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent); }
.boot-word { font-weight: 700; font-size: clamp(44px, 8vw, 88px); letter-spacing: .14em; line-height: 1; opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 600ms var(--ease); }
.tagbox { font: 500 13px var(--mono); letter-spacing: .3em; color: var(--muted); opacity: 0; transition: opacity 500ms ease 150ms; }
.tagbox .hot { color: var(--hot); }
#boot.at-mark .boot-mark { opacity: 1; }
#boot.at-mark .sigil { animation: sigilIn 420ms var(--ease) both, sigilOut 380ms ease 520ms forwards; }
#boot.at-word img, #boot.at-word .boot-word, #boot.at-word .tagbox { opacity: 1; transform: none; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes termCollapse { to { opacity: 0; transform: scale(1.6); filter: blur(12px); } }
@keyframes sigilIn { from { opacity: 0; transform: scale(.4); filter: blur(18px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sigilOut { to { opacity: 0; transform: scale(1.5); filter: blur(14px); } }

/* ---- header + rail ------------------------------------------- */

#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--hdr);
  display: flex; align-items: center; gap: 22px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.brand { font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand .omega { color: var(--accent); }
.brand b { color: var(--hot); }
.brand-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hdr nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
#hdr nav a { text-decoration: none; color: var(--muted); white-space: nowrap; }
#hdr nav a:hover { color: var(--fg); }
.ext { font-size: 11px; }
.snd { all: unset; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color 200ms, border-color 200ms; }
.snd:hover, .snd:focus-visible { color: var(--fg); border-color: var(--muted); }
.snd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd path:first-child { fill: currentColor; }
.snd .on, body.sound .snd .off { display: none; }
body.sound .snd .on { display: inline; }
body.sound .snd { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 50%, var(--line)); }

#rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; display: grid; gap: 9px; }
#rail a { display: block; width: 10px; height: 2px; margin-left: auto; background: var(--line); transition: width 250ms var(--ease), background 250ms; }
#rail a.on { width: 22px; background: var(--fg); }
#rail a.gap { margin-top: 10px; }

/* ---- hero ---------------------------------------------------- */

.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px;
  padding: calc(var(--hdr) + 32px) var(--gutter) 90px;
  overflow: hidden;
}
.kicker { font: 500 13px var(--mono); color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }
.word { margin: 0; font-weight: 700; font-size: clamp(64px, 12vw, 176px); letter-spacing: -.03em; line-height: .92; white-space: nowrap; }
.cursor { display: inline-block; width: .42em; height: .11em; margin-left: .06em; background: var(--hot); vertical-align: baseline; animation: blink 1.1s steps(1) infinite; }
.lede { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; max-width: 30ch; margin: 30px 0 14px; }
.sub { color: var(--muted); max-width: 52ch; margin: 0 0 30px; font-size: 16px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.btn { text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--muted); font-size: 15px; display: inline-flex; gap: 14px; transition: border-color 200ms, color 200ms; }
.btn.hot { color: var(--fg); border-color: var(--hot); }
.btn:hover { border-color: var(--fg); }
.btn span { transition: transform 200ms var(--ease); }
.btn:hover span { transform: translateX(3px); }
.hero-her { position: relative; margin: 0; height: min(86svh, 900px); display: grid; place-items: end center; }
.hero-her .glow { position: absolute; inset: 10% 5% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); filter: blur(20px); }
.hero-her img { position: relative; height: 100%; width: auto; object-fit: contain; }
.hero-clip { position: absolute; bottom: 0; height: 100%; width: auto; opacity: 0; transition: opacity 400ms ease; }
.hero-her.clip-on .hero-clip { opacity: 1; }
.hero-her.clip-on img { opacity: 0; }
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--dim); }

.still { opacity: 0; transition: opacity 500ms ease; }
.still.loaded { opacity: 1; }
body.no-stills .still { content: url(../jun_os.png?v=1); border-radius: 50%; height: auto !important; width: min(70%, 420px) !important; align-self: center; opacity: .9; }

/* ---- the reel ------------------------------------------------ */

.reel { position: relative; height: calc(var(--beats, 16) * 95svh + 100svh); }
.reel-pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 18px;
  padding: calc(var(--hdr) + 14px) var(--gutter) 18px;
}
.reel-pin { --fw: min(100vw - 2 * var(--gutter), (100svh - var(--hdr) - 130px) * 16 / 9); }
.frame {
  position: relative; width: var(--fw); aspect-ratio: 16 / 9;
  container-type: inline-size;
  --u: 1cqw;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 66% 40%, #1d1e20 0%, #121313 60%, #0b0b0c 100%);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
  font-size: calc(var(--u) * 1.15);
}

/* the whole reel is one long set: studio, the street, the diner, the
   card room, the lounge, the shop, studio again. --set picks which
   one the camera's on and the transition is the pan, so a beat
   change walks you into the next room instead of cutting to it.
   the front strip is the same set again above her (table, booth) */
.world { position: absolute; inset: 0; z-index: 0; display: flex; transform: translateX(calc(var(--set, 0) * -100%)); transition: transform 1400ms cubic-bezier(.65, 0, .35, 1); }
.world.front { z-index: 2; pointer-events: none; }
.set { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.set > img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; transform: translateX(calc((var(--t, 0) - .5) * -3%)); }
.world:not(.front) .set:not(.studio)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,11,.6), transparent 55%), linear-gradient(transparent 60%, rgba(8,8,9,.55)); }
.set.studio { background: radial-gradient(120% 90% at 66% 40%, #1d1e20 0%, #121313 60%, #0b0b0c 100%); }
.street-sky { position: absolute; inset: 0; background: linear-gradient(#141127, #2a1c33 60%, #3a2436); }
.street-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #141214; border-top: 1px solid #3a2f3a; }
.street video { position: absolute; left: 50%; bottom: 20%; height: 40%; transform: translateX(-50%); }
.street-status { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-size: calc(var(--u) * 1); letter-spacing: .14em; color: var(--muted); }
.table { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; }
.table svg { display: block; width: 100%; height: 100%; }
.table .food { animation: plateIn 500ms var(--ease) both; }
@keyframes plateIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* the lounge and its booth are square viewBoxes with slice. a 16:9
   frame keeps the middle band and the booth table (y 700-900) falls
   off the bottom, so both anchor to the bottom. back and front HAVE
   to share every sizing rule or the table floats off the room */
.set > img.low { object-position: 50% 100%; }

/* her. one img per still, stacked, crossfaded. the framing moves the
   whole box so a crossfade never fights a zoom */
.avatar {
  position: absolute; z-index: 1; right: calc(var(--u) * 7); bottom: calc(var(--u) * -9); height: calc(var(--u) * 66); aspect-ratio: 900 / 1500;
  transform-origin: 50% 13%;
  transition: transform 900ms var(--ease), opacity 500ms ease, filter 600ms ease;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 380ms ease; }
.avatar img.on { opacity: 1; }
.avatar canvas.clip { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 250ms ease; }
.avatar.clip-on canvas.clip { opacity: 1; }
/* the packed source. it has to stay in the DOM and rendered or some
   browsers stop decoding frames for it, so it's 1px and invisible */
.clip-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar.clip-on img.on { opacity: 0; }
.frame[data-frame="face"] .avatar { transform: translate(calc(var(--u) * -4), calc(var(--u) * 14)) scale(2.3); }
/* behind the table, dead centre and sat down, the way date.html
   has her. --u 39.6 is her box width, so -23.2 puts it mid-frame */
.frame[data-frame="seated"] .avatar { transform: translate(calc(var(--u) * -23.2), calc(var(--u) * 12)); }
.frame[data-frame="gone"] .avatar { transform: translateX(calc(var(--u) * 30)); opacity: 0; }
body.no-stills .avatar { display: grid; place-items: center; height: calc(var(--u) * 40); bottom: calc(var(--u) * 8); aspect-ratio: 1; }
body.no-stills .avatar img { content: url(../jun_os.png?v=1); border-radius: 50%; }

.scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
  background: linear-gradient(90deg, rgba(9,9,11,.92) 0%, rgba(9,9,11,.8) 38%, rgba(9,9,11,.1) 62%, transparent 78%); }
.frame[data-scrim="on"] .scrim { opacity: 1; }
.frame[data-scrim="full"] .scrim { opacity: 1; background: rgba(7,7,9,.88); }

.beat { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; transform: translateY(calc(var(--u) * -2)); transition: opacity 420ms ease, transform 600ms var(--ease), visibility 0s linear 600ms; }
/* the next beat comes up from below while the old one leaves
   upward, so they read as one motion and not a swap */
.beat.on { opacity: 1; visibility: visible; transform: none; transition: opacity 500ms ease 250ms, transform 800ms var(--ease) 150ms; }
.beat:not(.on) { transition-delay: 0s; }
.beat.on ~ .beat:not(.on) { transform: translateY(calc(var(--u) * 3)); }
.beat > * { position: absolute; }

.chrome { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); }
.progress i { display: block; height: 100%; width: calc(var(--t, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--hot)); }
.fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.grain { position: absolute; inset: -50%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -3%); } 100% { transform: translate(-2%, 6%); } }

.caption { width: var(--fw); max-width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 72px; }
.cap-text h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.cap-text h2::after { content: ""; display: block; width: 32px; height: 2px; margin: 9px 0 7px; background: var(--hot); }
.cap-text p { margin: 0; max-width: 60ch; font: 13px/1.5 var(--mono); color: var(--muted); }
.cap-text.swap { animation: capIn 520ms var(--ease); }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.cap-meta { flex-shrink: 0; font-size: 13px; letter-spacing: .08em; padding-top: 4px; }
.auto { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin-right: 14px; padding: 4px 11px 4px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--fg); font: 12px var(--mono); letter-spacing: .06em; transition: border-color 200ms, color 200ms; }
.auto:hover, .auto:focus-visible { border-color: var(--muted); }
.auto svg { width: 12px; height: 12px; fill: currentColor; }
.auto .i-pause, .auto[aria-pressed="true"] .i-play { display: none; }
.auto[aria-pressed="true"] .i-pause { display: inline; }
.auto[aria-pressed="true"] { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 50%, var(--line)); }
.cap-meta { display: flex; align-items: center; }
.cap-ch { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); }

/* ---- beat furniture ------------------------------------------ */

.panel { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: calc(var(--u) * .8); box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0,0,0,.45); }
.bubble { right: calc(var(--u) * 30); top: calc(var(--u) * 6); max-width: calc(var(--u) * 26); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); background: rgba(16,17,17,.92); border: 1px solid var(--line); border-left: 2px solid var(--hot); border-radius: calc(var(--u) * .6); font-size: calc(var(--u) * 1.15); opacity: 0; transform: translateY(calc(var(--u) * .6)); transition: opacity 300ms, transform 300ms var(--ease); }
.bubble.on { opacity: 1; transform: none; }
.bubble::before { content: "Jun"; display: block; font: 500 calc(var(--u) * .8) var(--mono); color: var(--hot); letter-spacing: .1em; margin-bottom: calc(var(--u) * .2); }
.msg { padding: calc(var(--u) * .8) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); max-width: 80%; font-size: calc(var(--u) * 1.1); line-height: 1.45; }
.msg.user { margin-left: auto; background: #26272a; }
.msg.her { background: transparent; padding-left: 0; min-height: 1.6em; }
.chip { display: inline-block; padding: calc(var(--u) * .3) calc(var(--u) * .9); border: 1px solid var(--line); border-radius: 99px; font: calc(var(--u) * .85) var(--mono); color: var(--muted); }
.chip b { color: var(--hot); font-weight: 500; }

/* react */
.chatmock { left: calc(var(--u) * 4); top: calc(var(--u) * 4); width: calc(var(--u) * 40); height: calc(var(--u) * 30); display: flex; flex-direction: column; overflow: hidden; }
.cm-head { display: flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 1); }
.cm-brand { font-weight: 600; margin-right: auto; }
.cm-badge { font: 500 calc(var(--u) * .7) var(--mono); border: 1px solid var(--line); border-radius: 99px; padding: calc(var(--u) * .1) calc(var(--u) * .6); }
.cm-pill { font: 500 calc(var(--u) * .7) var(--mono); background: #232425; border-radius: 99px; padding: calc(var(--u) * .2) calc(var(--u) * .7); color: var(--muted); transition: color 200ms, background 200ms; }
.cm-pill.hot { color: var(--hot); background: color-mix(in srgb, var(--hot) 15%, #1a1a1b); }
.cm-body { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4); }
.cm-composer { display: flex; align-items: center; margin: calc(var(--u) * 1); padding: calc(var(--u) * .8) calc(var(--u) * 1.2); border: 1px solid var(--line); border-radius: 99px; font-size: calc(var(--u) * .95); color: var(--dim); }
.cm-composer i { margin-left: auto; width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%; background: var(--hot); }
.chatmock.small { top: calc(var(--u) * 4); height: auto; width: calc(var(--u) * 34); }
.wire { left: calc(var(--u) * 4); top: calc(var(--u) * 36); width: calc(var(--u) * 40); font: calc(var(--u) * .95)/1.6 var(--mono); color: var(--muted); }
.wire-label { font-size: calc(var(--u) * .75); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-bottom: calc(var(--u) * .3); }
.wire-text b { color: var(--hot); font-weight: 500; }
.tagfly { left: calc(var(--u) * 18); top: calc(var(--u) * 26); font: 500 calc(var(--u) * 1.2) var(--mono); color: var(--hot); padding: calc(var(--u) * .4) calc(var(--u) * .9); border: 1px solid var(--hot); border-radius: calc(var(--u) * .4); background: #160f14; opacity: 0; }
.tagfly.fly { animation: tagFly 900ms var(--ease) forwards; }
@keyframes tagFly { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--u) * 40), calc(var(--u) * -14)) scale(.6); } }

/* voice + talkback */
.voicebox { left: calc(var(--u) * 4); top: calc(var(--u) * 8); width: calc(var(--u) * 34); padding: calc(var(--u) * 2); }
.bars { display: flex; align-items: center; gap: calc(var(--u) * .3); height: calc(var(--u) * 9); }
.bars i { flex: 1; min-width: 2px; border-radius: 2px; background: linear-gradient(var(--hot), var(--accent)); height: 8%; transition: height 120ms linear; }
.engine { margin-top: calc(var(--u) * 1); font: calc(var(--u) * .8) var(--mono); color: var(--dim); text-align: right; }
.langs { left: calc(var(--u) * 4); top: calc(var(--u) * 25); display: flex; gap: calc(var(--u) * .6); flex-wrap: wrap; width: calc(var(--u) * 36); }
.langs span { padding: calc(var(--u) * .3) calc(var(--u) * 1); border-radius: 99px; border: 1px solid var(--line); font-size: calc(var(--u) * .9); color: var(--muted); transition: all 250ms; }
.langs span.on { background: var(--hot); color: #1a0d14; border-color: var(--hot); }
.saidline { left: calc(var(--u) * 4); top: calc(var(--u) * 30); width: calc(var(--u) * 36); font-size: calc(var(--u) * 1.8); font-weight: 600; }
.vm { left: 0; right: 0; top: calc(var(--u) * 7); display: grid; justify-items: center; gap: calc(var(--u) * 1.4); }
.vm .bars { width: calc(var(--u) * 34); }
.vm .bars.mic i { background: linear-gradient(var(--accent), #6cb0f5); }
.vm-row { display: flex; align-items: center; gap: calc(var(--u) * .8); font: 500 calc(var(--u) * 1) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mic-dot { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 calc(var(--u) * .4) color-mix(in srgb, var(--danger) 25%, transparent); }
.vm-script { font-size: calc(var(--u) * 2.2); font-weight: 600; min-height: calc(var(--u) * 3); }
.vm-script .w { opacity: .15; transition: opacity 150ms; }
.vm-script .w.on { opacity: 1; }
.beat[data-beat="talkback"] .vm { left: calc(var(--u) * 4); right: auto; justify-items: start; }

/* side-talk */
.transcript { left: calc(var(--u) * 4); top: calc(var(--u) * 6); width: calc(var(--u) * 44); padding: calc(var(--u) * 1.6); display: grid; gap: calc(var(--u) * 1.1); }
.tr-line { display: grid; grid-template-columns: calc(var(--u) * 10) 1fr; gap: calc(var(--u) * .2) calc(var(--u) * 1); opacity: .12; transition: opacity 300ms; font-size: calc(var(--u) * 1.1); }
.tr-line.on { opacity: 1; }
.tr-line .who { font: calc(var(--u) * .8) var(--mono); color: var(--dim); padding-top: calc(var(--u) * .2); }
.verdict { grid-column: 2; font: calc(var(--u) * .8) var(--mono); opacity: 0; transition: opacity 300ms; }
.tr-line.on .verdict.yes, .verdict.on { opacity: 1; }
.verdict.yes { color: var(--ok); }
.verdict.no { color: var(--danger); }
.tr-foot { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * .6); padding-top: calc(var(--u) * 1); border-top: 1px solid var(--line); font-size: calc(var(--u) * .8); }

/* think */
.thinkbox { left: calc(var(--u) * 4); top: calc(var(--u) * 5); width: calc(var(--u) * 42); padding: calc(var(--u) * 1.6); display: grid; gap: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1); }
.thinkbox b { color: var(--hot); font-weight: 500; }
.budget { display: grid; gap: calc(var(--u) * .6); }
.bud { display: grid; grid-template-columns: calc(var(--u) * 4) 1fr calc(var(--u) * 10); align-items: center; gap: calc(var(--u) * 1); font: calc(var(--u) * .85) var(--mono); color: var(--dim); }
.bud i { height: calc(var(--u) * .6); border-radius: 99px; background: #262827; position: relative; overflow: hidden; }
.bud i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--w, 0)); background: var(--accent); transition: transform 400ms var(--ease); }
.bud[data-lvl="low"] { --w: .12; } .bud[data-lvl="med"] { --w: .45; } .bud[data-lvl="high"] { --w: 1; }
.bud.on { color: var(--fg); }
.bud.on i::after { background: var(--hot); }
.trace { border-left: 2px solid var(--line); padding-left: calc(var(--u) * 1); color: var(--muted); }
.trace summary { font: calc(var(--u) * .85) var(--mono); color: var(--dim); list-style: none; }
.trace p { margin: calc(var(--u) * .5) 0 0; font-style: italic; min-height: 3em; }

/* feelings */
.gauges { left: calc(var(--u) * 4); top: calc(var(--u) * 7); width: calc(var(--u) * 36); padding: calc(var(--u) * 2); display: grid; gap: calc(var(--u) * 1.4); }
.g { display: grid; grid-template-columns: calc(var(--u) * 8) 1fr calc(var(--u) * 3); align-items: center; gap: calc(var(--u) * 1); font: calc(var(--u) * 1) var(--mono); }
.g-k { color: var(--muted); }
.g-bar { height: calc(var(--u) * .7); background: #232524; border-radius: 99px; overflow: hidden; }
.g-bar i { display: block; height: 100%; width: calc(var(--v, 50) * 1%); border-radius: inherit; background: var(--gc, var(--accent)); transition: width 160ms linear; }
.g[data-g="affection"] { --gc: var(--hot); }
.g[data-g="trust"] { --gc: #6cb0f5; }
.g[data-g="tension"] { --gc: #ff9a62; }
.g-v { text-align: right; }
.g-note { font-size: calc(var(--u) * .75); }
.tiers { left: calc(var(--u) * 4); top: calc(var(--u) * 25); width: calc(var(--u) * 36); display: grid; gap: calc(var(--u) * .5); }
.tier { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .5) calc(var(--u) * 1); border: 1px solid var(--line); border-radius: calc(var(--u) * .5); font-size: calc(var(--u) * .95); opacity: .25; transition: opacity 250ms, border-color 250ms; }
.tier i { width: calc(var(--u) * .8); height: calc(var(--u) * .8); border-radius: 50%; background: var(--tc); }
.tier .td { margin-left: auto; font: calc(var(--u) * .8) var(--mono); color: var(--dim); }
.tier.on { opacity: 1; border-color: var(--tc); }

/* flee */
.flee { left: 0; right: 0; top: calc(var(--u) * 11); text-align: center; opacity: 0; transform: translateY(calc(var(--u) * 1.5)); transition: opacity 600ms ease, transform 800ms var(--ease); }
.flee.on { opacity: 1; transform: none; }
.flee h3 { margin: 0; font-size: calc(var(--u) * 3.6); font-weight: 700; }
.flee-reason { font-size: calc(var(--u) * 1.5); color: var(--muted); font-style: italic; max-width: calc(var(--u) * 50); margin: calc(var(--u) * 1.6) auto; }
.flee-eta { font: calc(var(--u) * 1.6) var(--mono); color: var(--accent); letter-spacing: .1em; margin: 0; }
.lockbar { display: inline-block; margin-top: calc(var(--u) * 2); padding: calc(var(--u) * .6) calc(var(--u) * 2); border: 1px dashed var(--line); border-radius: 99px; font: calc(var(--u) * .9) var(--mono); color: var(--dim); }
.sealed-note { font-size: calc(var(--u) * .85); margin-top: calc(var(--u) * 1.4); }

/* remember */
.toolcall { left: calc(var(--u) * 4); top: calc(var(--u) * 6); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); display: flex; flex-wrap: wrap; gap: calc(var(--u) * .3) calc(var(--u) * .9); align-items: baseline; font: calc(var(--u) * 1) var(--mono); max-width: calc(var(--u) * 42); opacity: 0; transform: translateY(calc(var(--u) * 1)); transition: opacity 300ms, transform 300ms var(--ease); }
.toolcall.on { opacity: 1; transform: none; }
.toolcall .mono:not(.dim) { color: var(--muted); }
.tc-res { flex-basis: 100%; color: var(--ok); font-size: calc(var(--u) * .85); }
.notecard { left: calc(var(--u) * 4); top: calc(var(--u) * 14); width: calc(var(--u) * 36); padding: calc(var(--u) * 1.6); }
.nc-h { font: calc(var(--u) * .85) var(--mono); letter-spacing: .12em; color: var(--dim); margin-bottom: calc(var(--u) * 1); }
.nc-b { display: grid; gap: calc(var(--u) * .6); font-size: calc(var(--u) * 1.1); }
.nc-b span { opacity: 0; transform: translateX(calc(var(--u) * -1)); transition: opacity 300ms, transform 300ms var(--ease); }
.nc-b span.on { opacity: 1; transform: none; }
.nc-b span::before { content: "- "; color: var(--accent); }
.cons { left: calc(var(--u) * 4); top: calc(var(--u) * 33); padding: calc(var(--u) * .7) calc(var(--u) * 1.2); border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, #141415); color: var(--accent); font-size: calc(var(--u) * 1); opacity: 0; transition: opacity 300ms; }
.cons.on { opacity: 1; }

/* her call */
.beat[data-beat="call"] .toolcall { top: calc(var(--u) * 20); }
/* once she's out the door the chat and the tool card get out of
   the way of the street */
.beat[data-beat="call"] > * { transition: opacity 500ms ease, transform 700ms var(--ease); }
.beat[data-beat="call"].away > * { opacity: 0; transform: translateY(calc(var(--u) * -3)); }

/* dinner */
.venue { left: calc(var(--u) * 4); top: calc(var(--u) * 3.4); font-size: calc(var(--u) * .9); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.menu { left: calc(var(--u) * 4); top: calc(var(--u) * 6); display: flex; transform-origin: left center; transition: transform 600ms var(--ease), opacity 400ms; }
.menu-page { width: calc(var(--u) * 15); padding: calc(var(--u) * 1.6); background: #f3ead8; color: #3a2a1d; font-family: Georgia, serif; font-size: calc(var(--u) * 1); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.4); }
.menu-page:first-child { border-radius: calc(var(--u) * .4) 0 0 calc(var(--u) * .4); border-right: 1px solid #d6c8ae; }
.menu-page:last-child { border-radius: 0 calc(var(--u) * .4) calc(var(--u) * .4) 0; }
.menu-page h4 { margin: 0 0 calc(var(--u) * .5); font-size: calc(var(--u) * .8); letter-spacing: .14em; text-transform: uppercase; color: #8a5a30; }
.menu-page h4 + p, .menu-page p + h4 { margin-top: calc(var(--u) * .9); }
.menu-page p { margin: calc(var(--u) * .3) 0; }
.menu-page p.pick { font-weight: 700; color: #a8325a; }
.menu-page p.pick::after { content: " <"; }
.menu.closed { transform: scale(.5) translateY(calc(var(--u) * -20)); opacity: 0; }
.ticket { left: calc(var(--u) * 4); top: calc(var(--u) * 6); width: calc(var(--u) * 19); padding: calc(var(--u) * 1.4); background: #fbf8f1; color: #2a2522; border-radius: calc(var(--u) * .3); font-size: calc(var(--u) * 1); opacity: 0; transform: translateY(calc(var(--u) * 2)) rotate(-2deg); transition: opacity 400ms, transform 400ms var(--ease); }
.ticket.on { opacity: 1; transform: rotate(-2deg); }
.ticket .dim { color: #8b8580; font-size: calc(var(--u) * .8); letter-spacing: .14em; text-transform: uppercase; }
.tk-time { font: 500 calc(var(--u) * 3.2) var(--mono); margin: calc(var(--u) * .4) 0; }
.tk-bar { height: calc(var(--u) * .4); background: #e7e1d6; }
.tk-bar i { display: block; height: 100%; width: calc(var(--k, 0) * 100%); background: #a8325a; }
.bill { right: calc(var(--u) * 4); top: calc(var(--u) * 6); width: calc(var(--u) * 16); padding: calc(var(--u) * 1.2); background: #fbf8f1; color: #2a2522; display: grid; gap: calc(var(--u) * .3); font: calc(var(--u) * .9) var(--mono); border-radius: calc(var(--u) * .3); opacity: 0; transition: opacity 400ms; }
.bill b { margin-top: calc(var(--u) * .6); color: #a8325a; font-weight: 500; }
.bill.on { opacity: 1; }
.beat[data-beat="dinner"] .bubble { right: auto; left: calc(var(--u) * 26); top: calc(var(--u) * 6); }

/* cards */
.felt { left: calc(var(--u) * 4); top: calc(var(--u) * 5); width: calc(var(--u) * 46); display: grid; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2); background: rgba(10,30,22,.72); border: 1px solid #24503d; border-radius: calc(var(--u) * 1); }
.hand { display: grid; grid-template-columns: calc(var(--u) * 5) 1fr calc(var(--u) * 5); align-items: center; gap: calc(var(--u) * 1); }
.hl, .tot { font-size: calc(var(--u) * 1); color: #a8d5bf; }
.tot { text-align: right; }
.tot.bust { color: var(--danger); }
.cards { display: flex; gap: calc(var(--u) * .7); min-height: calc(var(--u) * 9.6); }
.card { width: calc(var(--u) * 6.6); height: calc(var(--u) * 9.6); border-radius: calc(var(--u) * .5); background: #fbfaf7; color: #1d1d1f; display: grid; place-items: center; font: 600 calc(var(--u) * 2)/1 Georgia, serif; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(0,0,0,.4); animation: deal 380ms var(--ease) both; position: relative; }
.card small { position: absolute; left: calc(var(--u) * .5); top: calc(var(--u) * .4); font-size: calc(var(--u) * .9); }
.card.red { color: #c02a4a; }
.card.back { background: repeating-linear-gradient(45deg, #5b3b8c 0 calc(var(--u) * .5), #4a2f75 calc(var(--u) * .5) calc(var(--u) * 1)); border: calc(var(--u) * .3) solid #fbfaf7; }
@keyframes deal { from { opacity: 0; transform: translate(calc(var(--u) * -6), calc(var(--u) * -4)) rotate(-14deg); } to { opacity: 1; transform: none; } }
.felt-note { left: calc(var(--u) * 4); top: calc(var(--u) * 36); font-size: calc(var(--u) * .85); }
.beat[data-beat="cards"] .bubble { right: calc(var(--u) * 26); top: calc(var(--u) * 4); }

/* karaoke */
.stems { left: calc(var(--u) * 4); top: calc(var(--u) * 5); width: calc(var(--u) * 30); padding: calc(var(--u) * 1.4); display: grid; gap: calc(var(--u) * .8); }
.stem { display: grid; grid-template-columns: calc(var(--u) * 6) 1fr; align-items: center; gap: calc(var(--u) * 1); font: calc(var(--u) * .85) var(--mono); color: var(--muted); transition: opacity 300ms; }
.stem.dim { opacity: .3; }
.stem .lvl { height: calc(var(--u) * 1.4); display: flex; align-items: center; gap: 1px; }
.stem .lvl i { flex: 1; background: var(--accent); border-radius: 1px; height: 30%; }
.lyrics { left: calc(var(--u) * 4); top: calc(var(--u) * 20); width: calc(var(--u) * 46); display: grid; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.7); font-weight: 600; }
.ly .who { display: inline-block; width: calc(var(--u) * 4); font: calc(var(--u) * .8) var(--mono); color: var(--dim); }
.ly .w { color: #4d504c; transition: color 120ms; }
.ly .w.on { color: var(--fg); }
.ly[data-who="Jun"] .w.on { color: var(--hot); }
.score { left: calc(var(--u) * 4); top: calc(var(--u) * 31); display: flex; align-items: baseline; gap: calc(var(--u) * 1); }
.score span { font: 600 calc(var(--u) * 4) var(--mono); }
.score em { font: calc(var(--u) * 1.2) var(--mono); color: var(--hot); font-style: normal; }
.karaoke-note { left: calc(var(--u) * 4); top: calc(var(--u) * 37); font-size: calc(var(--u) * .85); opacity: 0; transition: opacity 300ms; }
.karaoke-note.on { opacity: 1; }

/* dress */
.shop { left: calc(var(--u) * 4); top: calc(var(--u) * 5); width: calc(var(--u) * 38); padding: calc(var(--u) * 1.8); background: rgba(20,14,22,.85); border: 1px solid #3c2a40; border-radius: calc(var(--u) * 1); }
.shop-title { margin: 0 0 calc(var(--u) * 1.2); font: 400 calc(var(--u) * 2.4) "Iowan Old Style", Palatino, Georgia, serif; }
.shop-title em { color: var(--hot); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .8); margin-bottom: calc(var(--u) * 1); }
.tile { aspect-ratio: 1; border: 1px solid var(--line); border-radius: calc(var(--u) * .6); display: grid; place-items: end start; padding: calc(var(--u) * .6); font-size: calc(var(--u) * .8); color: var(--muted); background: linear-gradient(160deg, #241a28, #161216); transition: border-color 250ms, color 250ms; }
.tile.on { border-color: var(--hot); color: var(--fg); }
.shop .dim { font-size: calc(var(--u) * .8); }

/* mods */
.interrupt { left: calc(var(--u) * 4); top: calc(var(--u) * 5); font-size: calc(var(--u) * 2.6); font-weight: 700; color: var(--hot); opacity: 0; transform: scale(.9); transition: opacity 200ms, transform 300ms var(--ease); }
.interrupt.on { opacity: 1; transform: none; }
.zipcard { left: calc(var(--u) * 4); top: calc(var(--u) * 11); display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--u) * .8); opacity: 0; transform: translateY(calc(var(--u) * -6)) rotate(-6deg); transition: opacity 300ms, transform 600ms var(--ease); }
.zipcard.on { opacity: 1; transform: none; }
.zip-ico { width: calc(var(--u) * 3); height: calc(var(--u) * 3.8); border-radius: calc(var(--u) * .3); background: repeating-linear-gradient(180deg, #e5c35a 0 calc(var(--u) * .4), #b3922f calc(var(--u) * .4) calc(var(--u) * .8)) center / calc(var(--u) * .8) 60% no-repeat, #3a3b3d; }
.zip-name { font: calc(var(--u) * 1.1) var(--mono); }
.modgrid { left: calc(var(--u) * 4); top: calc(var(--u) * 19); width: calc(var(--u) * 38); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .8); }
.modgrid span { padding: calc(var(--u) * .8); border: 1px solid var(--line); border-radius: calc(var(--u) * .6); font-size: calc(var(--u) * .85); color: var(--muted); opacity: 0; transform: scale(.8); transition: opacity 250ms, transform 300ms var(--ease); }
.modgrid span.on { opacity: 1; transform: none; }
.mods-note { left: calc(var(--u) * 4); top: calc(var(--u) * 33); width: calc(var(--u) * 38); font-size: calc(var(--u) * .85); }

/* yours */
.boundary { left: calc(var(--u) * 4); top: calc(var(--u) * 4); padding: calc(var(--u) * 2.2) calc(var(--u) * 2) calc(var(--u) * 1.4); border: 1px dashed var(--accent); border-radius: calc(var(--u) * 1); }
.b-label { position: absolute; top: calc(var(--u) * -.8); left: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * .6); background: #101011; font: calc(var(--u) * .85) var(--mono); color: var(--accent); letter-spacing: .12em; }
.boundary pre { margin: 0; font: calc(var(--u) * 1)/1.6 var(--mono); color: var(--muted); }
.boundary pre b { color: var(--fg); font-weight: 500; }
.leaks { left: calc(var(--u) * 4); top: calc(var(--u) * 23); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 13)); gap: calc(var(--u) * .6); }
.leak { display: flex; justify-content: space-between; padding: calc(var(--u) * .5) calc(var(--u) * .9); border: 1px solid var(--line); border-radius: calc(var(--u) * .5); font: calc(var(--u) * .85) var(--mono); opacity: 0; transition: opacity 250ms; }
.leak.on { opacity: 1; }
.leak.no .mk { color: var(--danger); }
.leak.yes .mk { color: var(--ok); }
.checks { left: calc(var(--u) * 47); top: calc(var(--u) * 6); margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .8); }
.checks li { font-size: calc(var(--u) * 1.4); font-weight: 600; opacity: 0; transform: translateX(calc(var(--u) * 1)); transition: opacity 300ms, transform 300ms var(--ease); }
.checks li.on { opacity: 1; transform: none; }
.checks li::before { content: "+ "; color: var(--hot); font-family: var(--mono); }

/* phone */
.phone { left: calc(var(--u) * 12); top: calc(var(--u) * 3); width: calc(var(--u) * 18); height: calc(var(--u) * 37); border-radius: calc(var(--u) * 2.6); background: #050505; border: calc(var(--u) * .5) solid #2a2b2c; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0,0,0,.6); overflow: hidden; transform: translateY(calc((1 - var(--k, 1)) * calc(var(--u) * 10))); }
.ph-notch { position: absolute; top: calc(var(--u) * .8); left: 50%; width: calc(var(--u) * 5); height: calc(var(--u) * 1.2); border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 2; }
.ph-screen { position: absolute; inset: 0; background: radial-gradient(80% 60% at 60% 40%, #24202a, #121213); display: flex; flex-direction: column; }
.ph-head { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 1.2) 0; font-size: calc(var(--u) * .9); font-weight: 600; }
.ph-her { width: 100%; height: calc(var(--u) * 24); object-fit: cover; object-position: 50% 0; }
.ph-screen .msg { font-size: calc(var(--u) * .85); margin: 0 calc(var(--u) * 1.2); }
.ph-composer { margin: auto calc(var(--u) * 1) calc(var(--u) * 1.2); height: calc(var(--u) * 2.4); border: 1px solid var(--line); border-radius: 99px; }
.phone-spec { left: calc(var(--u) * 36); top: calc(var(--u) * 9); width: calc(var(--u) * 26); }
.ps-k { font-size: calc(var(--u) * .9); letter-spacing: .14em; color: var(--hot); text-transform: uppercase; }
.ps-big { font-size: calc(var(--u) * 6); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.ps-v { color: var(--muted); font-size: calc(var(--u) * 1.2); line-height: 1.5; }

/* ---- inside -------------------------------------------------- */

.inside, .get { padding: 140px var(--gutter) 60px; max-width: 1280px; margin: 0 auto; }
.big { margin: 0; font-size: clamp(36px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; max-width: 17ch; }
.intro { font-size: clamp(17px, 1.4vw, 19px); color: #c9ccc8; max-width: 62ch; margin: 30px 0 26px; }
.links { display: flex; flex-wrap: wrap; gap: 14px 30px; font-size: 15px; }
.links a { text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid var(--line); transition: border-color 200ms; }
.links a:hover { border-color: var(--fg); }
.links a span { margin-left: 10px; font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 80px 0 90px; }
.stat { border-top: 1px solid var(--line); padding-top: 18px; }
.stat b { display: block; font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px; }
.stat span { color: var(--muted); font-size: 14px; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.row h3 { margin: 0; font-size: 20px; font-weight: 500; }
.row p { margin: 0 0 14px; color: #c9ccc8; max-width: 64ch; font-size: 16px; }
.row p:last-child { margin-bottom: 0; }


/* ---- get ----------------------------------------------------- */

.term.install { width: 100%; max-width: 900px; margin: 40px 0 22px; }
.tabs { display: flex; gap: 4px; margin-left: 12px; }
.tabs button { all: unset; cursor: pointer; padding: 2px 10px; border-radius: 4px; font: 12px var(--mono); color: var(--dim); }
.tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--fg); }
.tabs button:focus-visible, .copy:focus-visible { outline: 2px solid var(--accent); }
.install .term-body { display: flex; align-items: flex-start; gap: 16px; min-height: 0; }
.install pre { flex: 1; margin: 0; white-space: pre-wrap; word-break: break-all; font: 14px/1.7 var(--mono); }
.install pre::before { content: "$ "; color: var(--hot); }
.copy { all: unset; cursor: pointer; flex-shrink: 0; padding: 3px 12px; border: 1px solid var(--line); border-radius: 4px; font: 12px var(--mono); color: var(--muted); }
.copy:hover { color: var(--fg); border-color: var(--muted); }
.get-note { color: var(--muted); max-width: 64ch; margin: 0 0 26px; font-size: 15px; }

footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 34px var(--gutter); margin-top: 80px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
footer .brand { font-size: 17px; color: var(--fg); }
footer a { margin-left: auto; text-decoration: none; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 800ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- narrow -------------------------------------------------- */

@media (max-width: 900px) {
  .brand-sub, #rail { display: none; }
  #hdr nav { gap: 14px; }
  #hdr nav a:nth-child(2) { display: none; }
  .hero { grid-template-columns: 1fr; padding-bottom: 70px; }
  .hero-her { height: 52svh; order: -1; overflow: hidden; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .caption { flex-direction: column; align-items: stretch; }
  .cap-meta { order: -1; }
  /* every size in the frame hangs off --u. a 16:9 frame on a phone is
     200px tall and every label in it is 5px, so it goes portrait and
     the whole furniture set scales up 2.3x instead. same layout, just
     stacked into the top of a taller box, she stands at the bottom */
  .reel-pin { --fw: calc(100vw - 2 * var(--gutter)); }
  .frame { --u: 2.3cqw; aspect-ratio: 9 / 15; max-height: calc(100svh - var(--hdr) - 150px); }
  .beat > * { max-width: 92cqw; }
  .avatar { right: -12cqw; bottom: -6cqw; height: 128cqw; }
  .frame[data-frame="face"] .avatar { transform: translate(-10cqw, 30cqw) scale(1.8); }
  .frame[data-frame="seated"] .avatar { transform: translate(-23.6cqw, 30cqw); }
  .scrim, .frame[data-scrim="on"] .scrim { background: linear-gradient(180deg, rgba(9,9,11,.9) 0%, rgba(9,9,11,.75) 45%, transparent 70%); }
  .beat .bubble { left: 6cqw; right: auto; top: auto; bottom: 44cqw; max-width: 70cqw; }
  .phone { left: 6cqw; width: 34cqw; height: 70cqw; }
  .phone-spec { left: 46cqw; top: 8cqw; width: 48cqw; }
  .ps-big { font-size: 12cqw; }
}
@media (max-width: 560px) {
  #hdr nav a:nth-child(1) { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .word { font-size: 22vw; }
}

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