/* COOKED v3 — "the thermal camera". One persistent actor (the degree ring), the film is the product,
   the ironbow ramp only ever carries heat. Mobile first; desktop layout from 900px. */
:root {
  --ground: #060509; --surface: #100D15; --surface-2: #1A1621; --line: #2A2433; --line-2: #3A3346;
  --ink: #F6F2EC; --muted: #9C93A6; --hot: #FF4A1C; --hot-press: #B92E0A; --cold: #6CF0FF;
  --paper: #F3F1EC; --paper-ink: #16141A; --paper-fade: #8C8792;
  --iron: linear-gradient(to top, #0B0420 0%, #3A0B6B 18%, #9A1A8C 36%, #E8285A 52%, #FF5A1C 68%, #FFB21A 84%, #FFF6E0 100%);
  --iron-hot: linear-gradient(to top, #E8285A 0%, #FF5A1C 32%, #FFB21A 70%, #FFF6E0 100%);
  --iron-x: linear-gradient(90deg, #3A0B6B, #9A1A8C 20%, #E8285A 40%, #FF5A1C 60%, #FFB21A 80%, #FFF6E0);
  --display: "Archivo X", "Arial Black", Impact, sans-serif;
  --ui: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gut: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.6, 0, .85, .25); --snap: cubic-bezier(.3, 1.4, .5, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; background: var(--ground); color: var(--ink);
  font: 400 16px/1.5 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, h1, h2 { margin: 0; }
:focus-visible { outline: 2px solid var(--cold); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--ground); border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.defs { position: absolute; width: 0; height: 0; }
svg path, svg circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .fill { fill: currentColor; stroke: none; }

/* ---------- the heat field (WebGL) sits under everything ---------- */
.field {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 36% at 72% 34%, rgba(255, 90, 28, .5), transparent 70%),
    radial-gradient(40% 46% at 22% 70%, rgba(154, 26, 140, .45), transparent 72%),
    radial-gradient(70% 60% at 50% 50%, #1b0838, #060509 80%);
  transition: opacity .3s linear;
}
.field.is-live { background: #060509; }
.top, main { position: relative; z-index: 1; }

/* ---------- header ---------- */
.top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) var(--gut) 14px; pointer-events: none;
}
.top > * { pointer-events: auto; }
.top__brand { display: flex; align-items: center; min-height: 44px; padding: 0; }
.top__brand img { width: 128px; height: auto; }

/* ---------- buttons: they heat up (an ironbow fill rises from the bottom) ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 800 13px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  transition: color .25s ease .05s, transform .15s var(--ease), box-shadow .3s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--iron-hot);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--hot { background: var(--hot); color: var(--ground); box-shadow: 0 10px 40px -12px rgba(255, 74, 28, .7); }
.btn--ghost { background: rgba(16, 13, 21, .72); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 11px; }
@media (hover: hover) {
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover { color: var(--ground); box-shadow: 0 14px 50px -10px rgba(255, 140, 40, .75); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.is-plating::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--k, 0) * 100%);
  background: var(--iron-x); transition: width .2s linear;
}

.tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px;
  background: #FFC21A; color: var(--ground); font: 700 10px/1 var(--mono); letter-spacing: .08em;
}
.tag--ink { background: var(--paper-ink); color: var(--paper); }

/* ---------- hero (mobile first): the film fills the top, the reading + paste bar sit under the thumb ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) calc(18px + env(safe-area-inset-bottom));
}
.hero__row { position: static; --pw: 100vw; --ph: calc(100vw * 16 / 9); }
.stage { position: absolute; left: 0; top: calc(58px + env(safe-area-inset-top)); width: var(--pw); z-index: 0; }
.frame {
  position: relative; width: 100%; height: var(--ph); overflow: hidden; background: #000;
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(#000 0 50%, rgba(0, 0, 0, .5) 64%, transparent 80%);
  mask-image: linear-gradient(#000 0 50%, rgba(0, 0, 0, .5) 64%, transparent 80%);
}
.frame canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.is-live .frame canvas { opacity: 1; }
.frame__hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.frame__replay { position: absolute; z-index: 3; left: 50%; bottom: 7cqw; transform: translateX(-50%); }

.hl { position: relative; z-index: 2; text-transform: uppercase; pointer-events: none; }
.hl__a { display: block; font: 900 clamp(24px, 7.4vw, 40px)/.95 var(--display); letter-spacing: -.02em; }
.hl__a br { display: none; }
.hl__n {
  position: relative; display: flex; align-items: flex-start; margin-top: 4px;
  font: 900 clamp(76px, 27vw, 150px)/.82 var(--display); letter-spacing: -.035em; color: #FFC21A;
  pointer-events: auto; transition: color .2s linear;
}
.hl__n::before {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -30%; width: 90%; height: 160%;
  background: radial-gradient(closest-side, currentColor, transparent); opacity: .22; filter: blur(18px);
}
.num { display: inline-flex; text-shadow: 0 0 34px color-mix(in srgb, currentColor 45%, transparent); }
.dg { display: inline-block; width: .8em; text-align: center; }
.dg:first-child:nth-last-child(2), .dg:first-child:nth-last-child(2) ~ .dg { width: .82em; }
.deg { display: inline-flex; align-items: flex-start; font-size: .42em; line-height: 1; margin-left: .04em; }
.ring { width: .78em; height: .78em; margin: .02em .08em 0 0; }
.ring.is-carried { visibility: hidden; }
.hl__tag { position: absolute; left: .06em; bottom: -26px; }
.num.is-hazy { filter: url(#haze); }

/* ---------- wallet entry ---------- */
.cook {
  position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 40px;
}
.cook__field {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 6px 0 20px;
  border-radius: 999px; background: rgba(6, 5, 9, .78); box-shadow: inset 0 0 0 1px var(--line-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .25s ease;
}
.cook__field:focus-within { box-shadow: inset 0 0 0 1px var(--cold), 0 0 0 5px rgba(108, 240, 255, .14); }
.cook__field input {
  flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0;
  font: 500 16px/1 var(--mono); letter-spacing: .01em;
}
.cook__field input::placeholder { color: var(--muted); }
.cook__field input[aria-invalid="true"] { color: #FF8A6A; }
.cook__paste {
  display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 999px;
  background: var(--surface-2); font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.cook__paste svg { width: 16px; height: 16px; }
@media (hover: hover) { .cook__paste:hover { background: var(--ink); color: var(--ground); } }
.cook__connect { position: relative; overflow: visible; }
.cook__connect::before { border-radius: inherit; }
.cook__go { font-size: 14px; }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); width: 230px; padding: 10px 12px; border-radius: 10px;
  transform: translate(-50%, 6px); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font: 500 11px/1.45 var(--mono); letter-spacing: .02em; text-transform: none; white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.cook__connect:hover .tip, .cook__connect:focus-visible .tip, .cook__connect.show-tip .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.cook__note, .cook__err { position: relative; z-index: 2; margin-top: 14px; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.cook__err { color: #FF8A6A; }
.cook.is-shake { animation: shake .42s var(--ease); }
@keyframes shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } }
.cook__field.is-filled { animation: filled .6s var(--ease); }
@keyframes filled { 0% { box-shadow: inset 0 0 0 1px var(--cold), 0 0 0 0 rgba(108, 240, 255, .5); } 100% { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 16px rgba(108, 240, 255, 0); } }

/* ---------- inside the frame: HUD, notices ---------- */
.hud { position: absolute; inset: 0; z-index: 1; padding: 6cqw; color: var(--ink); font: 500 3.3cqw/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hud::before {
  content: ""; position: absolute; inset: 4cqw; pointer-events: none; opacity: .8;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 7cqw 2px, linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 7cqw,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 7cqw 2px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 2px 7cqw,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 7cqw 2px, linear-gradient(var(--ink), var(--ink)) 0 100% / 2px 7cqw,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 7cqw 2px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 2px 7cqw;
  background-repeat: no-repeat;
}
.hud__top { display: flex; justify-content: space-between; padding: 3cqw 3cqw 0; }
.hud__rec { display: inline-flex; align-items: center; gap: 1.6cqw; }
.hud__rec::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--hot); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hud__ring { position: absolute; left: 50%; top: 46%; width: 44cqw; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hud__ring::after {
  content: ""; position: absolute; inset: -9%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 75%, rgba(255, 178, 26, .55) 96%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 100%); mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 100%);
  animation: spin 1.4s linear infinite;
}
.hud__mark { width: 100%; height: 100%; animation: breathe 2s ease-in-out infinite; }
.stage.is-flying .hud__ring { visibility: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(.94); filter: brightness(1.35); } }
.hud__count { position: absolute; left: 0; right: 0; top: calc(46% + 29cqw); text-align: center; font-size: 4.2cqw; color: var(--ink); min-height: 1em; }
.hud__bar { position: absolute; left: 10cqw; right: 10cqw; bottom: 10cqw; height: 1.4cqw; background: repeating-linear-gradient(90deg, rgba(246, 242, 236, .14) 0 4%, transparent 4% 5%); }
.hud__bar i { position: absolute; inset: 0; width: calc(var(--k, 0) * 100%); background: var(--iron-x); transition: width .7s var(--ease);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4%, transparent 4% 5%); mask: repeating-linear-gradient(90deg, #000 0 4%, transparent 4% 5%); }
.notice { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 3.4cqw; padding: 10cqw; text-align: left; }
.notice__k { font: 700 3.4cqw/1 var(--mono); letter-spacing: .14em; color: var(--hot); }
.notice__t { font: 900 9cqw/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.notice__s { font: 500 4cqw/1.4 var(--ui); color: var(--muted); }
.notice__acts { display: grid; gap: 10px; margin-top: 4cqw; }

.stage__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px var(--gut) 0; font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.mute { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font: inherit; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
.mute svg { width: 18px; height: 18px; }
.mute[aria-pressed="true"] .mute__off, .mute[aria-pressed="false"] .mute__on { display: none; }

/* ---------- the receipt prints out of the film's edge ---------- */
.slot { position: relative; overflow: hidden; padding-top: 10px; margin: 0 auto; width: min(84vw, 360px); }
.slot::before {
  content: ""; position: absolute; z-index: 2; left: -6%; right: -6%; top: 0; height: 10px; border-radius: 0 0 6px 6px;
  background: #0E0B13; box-shadow: inset 0 -2px 0 rgba(255, 178, 26, .55), 0 6px 14px rgba(0, 0, 0, .6);
}
.slot .paper { transform: translateY(-101%); }
.slot.is-printing .paper { animation: feed 2.2s steps(22, end) forwards; }
@keyframes feed { to { transform: translateY(0); } }
.paper { position: relative; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.paper--img img { width: 100%; height: auto; }
.paper--dom {
  container-type: inline-size; aspect-ratio: 1080 / 1350; overflow: hidden; display: flex; flex-direction: column;
  padding: 6.5% 7% 5.5%; background: var(--paper); color: var(--paper-ink); font-family: var(--mono);
  background-image: repeating-linear-gradient(0deg, rgba(22, 20, 26, .025) 0 1px, transparent 1px 3px);
}
.rp-top { display: flex; align-items: center; justify-content: space-between; font: 500 3.4cqw/1 var(--mono); letter-spacing: .06em; }
.rp-top img { width: 32cqw; height: auto; }
.rp-hero { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; }
.rp-bloom {
  position: absolute; left: 50%; top: 50%; width: 92cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, #FFF6E0 0 12%, #FFB21A 12% 26%, #FF5A1C 26% 42%, #E8285A 42% 58%, #9A1A8C 58% 74%, rgba(58, 11, 107, .5) 74% 88%, transparent 88%);
  mix-blend-mode: multiply; opacity: calc(var(--k, .7) * .55); filter: blur(1.2cqw);
}
.rp-n { position: relative; font: 900 30cqw/.8 var(--display); letter-spacing: -.04em; }
.rp-n small { font-size: .32em; vertical-align: top; letter-spacing: 0; margin-left: .04em; }
.rp-stamp {
  position: absolute; right: 2cqw; bottom: 9%; transform: rotate(-6deg); padding: 1.6cqw 2.6cqw 1.2cqw;
  border: .9cqw solid currentColor; border-radius: 1.6cqw; font: 900 7cqw/1 var(--display); letter-spacing: -.01em; mix-blend-mode: multiply;
}
.rp-row { display: grid; grid-template-columns: 1fr auto auto; gap: 3cqw; align-items: baseline; padding: 2.2cqw 0; border-top: .35cqw dashed rgba(22, 20, 26, .3); font: 500 3.5cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.rp-row b { font-weight: 700; min-width: 17cqw; text-align: right; }
.rp-row b.l { color: #C8300A; } .rp-row b.g { color: #0B7F92; }
.rp-sym { color: var(--paper-fade); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 3cqw; border-top: .35cqw solid var(--paper-ink); font: 700 3.2cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rp-scorch {
  position: absolute; right: -16cqw; bottom: -16cqw; width: 44cqw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(28, 10, 4, .92) 0 26%, rgba(96, 36, 8, .6) 40%, rgba(180, 90, 30, .25) 58%, transparent 74%);
  mix-blend-mode: multiply;
}

/* ---------- POST · SAVE · LINK: a thumb bar on phones ---------- */
.acts {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(6, 5, 9, 0), rgba(6, 5, 9, .94) 30%);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.acts.is-on { transform: none; }
.acts .btn { min-height: 54px; padding: 0 10px; font-size: 11px; gap: 6px; }

/* ---------- reading mode (phones) ---------- */
.hero .hl__a, .hero .hl__n, .hero .cook, .hero .cook__note { transition: opacity .38s var(--ease-in), transform .42s var(--ease-in); }
.hero.is-leaving .hl, .hero.is-leaving .cook, .hero.is-leaving .cook__note, .hero.is-leaving .cook__err { opacity: 0; transform: translateY(28px); }
.is-reading .hl, .is-reading .cook, .is-reading .cook__note, .is-reading .cook__err { display: none; }
.is-reading .top { position: relative; }
.is-reading .top__new { display: inline-flex; }
.is-reading .hero { min-height: 0; justify-content: flex-start; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.is-reading .hero__row { --pw: min(100vw, calc((100svh - 150px) * 9 / 16)); --ph: calc(var(--pw) * 16 / 9); }
.is-reading .stage { position: relative; margin: 0 auto; left: auto; top: auto; }
.is-reading .frame { -webkit-mask-image: none; mask-image: none; }
.is-reading .side { margin-top: 6px; }
.is-reading .kitchen, .is-reading .bot, .is-reading .coin__row, .is-reading .coin__fee { display: none; }
.is-reading .coin { padding-top: 24px; border-top: 0; }

/* ---------- the carried ring + the scan line ---------- */
.flyer { position: fixed; z-index: 60; pointer-events: none; will-change: transform; }
.scan { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 50; pointer-events: none; opacity: 0; background: var(--iron-x); box-shadow: 0 0 18px 2px rgba(255, 140, 40, .8); }
.scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 140px; background: linear-gradient(transparent, rgba(255, 90, 28, .16)); }
.scan.go { animation: scan .72s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-4px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }

/* ---------- thermal crosshair (desktop) ---------- */
html.has-xhair, html.has-xhair * { cursor: none !important; }
html.has-xhair input { cursor: text !important; }
.xhair { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; --c: var(--ink); }
.xhair__b { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; transition: transform .22s var(--snap);
  background:
    linear-gradient(var(--c), var(--c)) 50% 0 / 1.5px 7px, linear-gradient(var(--c), var(--c)) 50% 100% / 1.5px 7px,
    linear-gradient(var(--c), var(--c)) 0 50% / 7px 1.5px, linear-gradient(var(--c), var(--c)) 100% 50% / 7px 1.5px;
  background-repeat: no-repeat; }
.xhair__b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--c); }
.xhair.is-lock .xhair__b { transform: scale(1.6) rotate(45deg); }
.xhair__v { position: absolute; left: 16px; top: 12px; padding: 3px 6px; border-radius: 3px; background: rgba(6, 5, 9, .8); color: var(--c); font: 700 11px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }

/* ---------- The Kitchen: a live thermal wall ---------- */
.kitchen, .bot, .coin { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.kitchen { padding-top: 72px; padding-bottom: 24px; }
.kitchen__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kitchen h2 { font: 900 clamp(30px, 8vw, 76px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 rgba(255, 74, 28, .6); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(255, 74, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 28, 0); } }
.wall { --tile-h: calc((100vw - 2 * var(--gut) - 16px) / 3 * .78); position: relative; height: calc(var(--tile-h) * 3.4 + 24px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 84%, transparent); }
.wall__list { list-style: none; margin: 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; will-change: transform; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: var(--tile-h); padding: 10px 11px;
  border-radius: 6px; background-color: #0B0420; background-repeat: no-repeat; text-decoration: none; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .06); transition: box-shadow .2s ease, transform .3s var(--ease);
}
.tile::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.tile__n { position: relative; z-index: 1; font: 900 clamp(26px, 8.4vw, 50px)/.85 var(--display); letter-spacing: -.03em; text-shadow: 0 2px 12px rgba(6, 5, 9, .7); }
.tile__w { position: relative; z-index: 1; font: 500 10px/1 var(--mono); letter-spacing: .04em; color: rgba(246, 242, 236, .8); text-shadow: 0 1px 4px rgba(6, 5, 9, .9); }
@media (hover: hover) { .tile:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(1.03); z-index: 2; } }
.tile.is-new { animation: newtile 1.4s var(--ease); }
@keyframes newtile { 0% { filter: brightness(2.6) saturate(.4); transform: scale(.9); } 100% { filter: none; transform: none; } }
.wall__empty { position: relative; margin-top: 12px; }
.ghosts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .9; }
.ghosts i { height: calc((100vw - 2 * var(--gut) - 16px) / 3 * .78); border-radius: 6px; background: radial-gradient(circle at 70% 80%, #1a0a35 0 20%, #110725 20% 45%, #0B0420 45%); box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .05); }
.ghosts i:nth-child(n + 7) { display: none; }
.wall__empty-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 16px; }
.wall__empty-in p { font: 800 clamp(18px, 5vw, 28px)/1.1 var(--display); text-transform: uppercase; max-width: 16ch; }

/* ---------- the bot ---------- */
.bot { display: grid; gap: 28px; padding-top: 72px; padding-bottom: 40px; }
.bot__line { font: 900 clamp(26px, 7.2vw, 56px)/.98 var(--display); text-transform: uppercase; letter-spacing: -.02em; max-width: 13ch; }
.thread { display: grid; gap: 10px; max-width: 520px; }
.tw { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: rgba(16, 13, 21, .86); box-shadow: inset 0 0 0 1px var(--line); }
.tw__av { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); }
.tw--ask { width: 86%; justify-self: end; }
.tw--ask p { align-self: center; font: 500 15px/1.3 var(--mono); color: var(--muted); }
.tw__who { display: flex; align-items: center; gap: 8px; font: 900 13px/1 var(--display); }
.tw__txt { margin-top: 6px; font: 500 16px/1.4 var(--ui); }
.paper--mini { width: min(220px, 64%); margin-top: 12px; border-radius: 3px; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8); transform: rotate(-1.5deg); }

/* ---------- $COOKED ---------- */
.coin { padding-top: 56px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.coin__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.coin__tkr { font: 900 clamp(40px, 13vw, 120px)/.85 var(--display); letter-spacing: -.03em; margin-right: auto; }
.ca { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ca__k { color: var(--hot); }
.coin__fee { margin-top: 22px; font: 500 clamp(17px, 4.4vw, 22px)/1.35 var(--ui); }
.coin__disc { margin-top: 12px; max-width: 64ch; font: 400 12px/1.55 var(--ui); color: var(--muted); }

/* ---------- sheet + toast ---------- */
.sheet { margin: auto auto 0; width: 100%; max-width: 480px; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
.sheet::backdrop { background: rgba(6, 5, 9, .7); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet .35s var(--ease); }
@keyframes sheet { from { transform: translateY(100%); } }
.sheet__in { display: grid; gap: 10px; padding: 22px var(--gut) calc(18px + env(safe-area-inset-bottom)); }
.sheet__t { font: 900 20px/1 var(--display); text-transform: uppercase; }
.sheet__list { display: grid; gap: 8px; margin-top: 6px; }
.sheet__list .btn { justify-content: flex-start; min-height: 56px; font-size: 13px; }
.sheet__list img { width: 24px; height: 24px; border-radius: 6px; }
.sheet__note { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--ground); font: 600 14px/1.3 var(--ui); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: toast .3s var(--ease); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 10px); } }

/* =================================================================== desktop */
@media (min-width: 900px) {
  .top { padding: 22px 40px; }
  .top__brand img { width: 168px; }
  .hero { justify-content: center; padding: 92px 40px 40px; }
  .hero__row { position: relative; --ph: clamp(420px, calc(100svh - 300px), 660px); --pw: calc(var(--ph) * 9 / 16); height: var(--ph); }
  .stage { position: relative; left: auto; top: auto; margin: 0 auto; z-index: 2; transition: transform .7s var(--ease); }
  .frame { border-radius: 30px; -webkit-mask-image: none; mask-image: none;
    box-shadow: 0 0 0 1px rgba(246, 242, 236, .12), 0 0 0 9px #0d0a12, 0 0 0 10px rgba(246, 242, 236, .08), 0 50px 120px -30px rgba(255, 74, 28, .45); }
  .hl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
  .hl__a, .hl__n { width: calc(50% - var(--pw) / 2 - 56px); }
  .hl__a { text-align: right; font-size: clamp(38px, 4.3vw, 78px); line-height: .92; }
  .hl__a br { display: inline; }
  .hl__n { margin-top: 0; font-size: clamp(76px, 9.4vw, 176px); }
  .hl__tag { bottom: -30px; }
  .cook { grid-template-columns: 1fr auto auto; width: min(780px, 100%); margin: 40px auto 0; gap: 10px; }
  .cook__field { grid-column: auto; }
  .cook__go { padding: 0 30px; }
  .cook__note, .cook__err { text-align: center; }
  .hero.is-leaving .hl__a { transform: translateX(-14vw); }
  .hero.is-leaving .hl__n { transform: translateX(14vw); }
  .hero.is-leaving .hl { transform: none; }

  .is-reading .top { position: absolute; }
  .is-reading .hero { padding: 84px 40px 32px; }
  .is-reading .hero__row { --ph: min(calc(100svh - 160px), 800px); --pw: calc(var(--ph) * 9 / 16); height: auto; }
  .is-reading .stage.has-receipt { transform: translateX(calc(-1 * (min(300px, 24vw) + 48px) / 2)); }
  .stage__meta { padding: 10px 6px 0; }
  .side { position: absolute; left: calc(100% + 48px); top: 9%; width: min(300px, 24vw); }
  .is-reading .side { margin-top: 0; }
  .slot { width: 100%; }
  .acts { position: static; display: grid; grid-template-columns: 1fr 1fr; padding: 18px 0 0; background: none; transform: translateY(12px); opacity: 0; transition: opacity .4s ease .6s, transform .5s var(--ease) .6s; }
  .acts.is-on { transform: none; opacity: 1; }
  .acts .btn[data-act="post"] { grid-column: 1 / -1; }
  .acts .btn { min-height: 50px; }

  .kitchen { padding-top: 96px; }
  .wall { --tile-h: calc((min(100vw, 1320px) - 2 * var(--gut) - 40px) / 6 * .7); height: calc(var(--tile-h) * 2.5 + 24px); }
  .wall__list, .ghosts { grid-template-columns: repeat(6, 1fr); }
  .ghosts i { height: calc((min(100vw, 1320px) - 2 * var(--gut) - 40px) / 6 * .7); }
  .ghosts i:nth-child(n + 7) { display: block; }
  .tile { padding: 14px 16px; }
  .tile__n { font-size: clamp(30px, 3.3vw, 50px); }
  .tile__w { font-size: 11px; }
  .bot { grid-template-columns: 1fr 1fr; align-items: center; padding-top: 120px; padding-bottom: 72px; }
  .coin { padding-top: 64px; }
  .sheet { margin: auto; border-radius: 22px; }
  .toast { bottom: 32px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero__row { --ph: clamp(380px, calc(100svh - 270px), 660px); }
}

/* ---------- reduced motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .scan, .xhair { display: none !important; }
  .hud__ring::after { display: none; }
}

/* =================================================================== round-2 fixes + wrap page */
.frame__replay { left: auto; right: 5cqw; top: 5cqw; bottom: auto; transform: none; }
.acts .btn--ghost { background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 899px) {
  .is-reading .hero { padding-left: 0; padding-right: 0; }
  .is-reading .stage__meta { padding-left: var(--gut); padding-right: var(--gut); }
  .is-reading .coin, .wrap-page .coin { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* the wrap page: visitors get an invitation, the film plays beside it */
.hl__q { display: block; margin-top: 10px; font: 900 clamp(28px, 8vw, 44px)/.95 var(--display); letter-spacing: -.02em; color: var(--ink); }
.pitch__miss { margin-top: 16px; font: 800 20px/1.2 var(--display); text-transform: uppercase; }
.hero--wrap { min-height: 0; justify-content: flex-start; padding: calc(78px + env(safe-area-inset-top)) var(--gut) 24px; }
.hero--wrap .hero__row { display: flex; flex-direction: column; gap: 28px; }
.hero--wrap .stage { position: relative; top: auto; left: auto; width: 100vw; margin: 0 calc(-1 * var(--gut)); }
.hero--wrap .frame { -webkit-mask-image: none; mask-image: none; }
.hero--wrap .hl__n { font-size: clamp(76px, 25vw, 140px); }
.hero--wrap .cook { margin-top: 26px; }
@media (min-width: 900px) {
  .hero--wrap { min-height: 100svh; justify-content: center; padding: 96px 40px 40px; }
  .hero--wrap .hero__row { flex-direction: row; align-items: center; justify-content: center; gap: clamp(40px, 5vw, 80px); height: auto;
    --ph: clamp(440px, calc(100svh - 190px), 760px); --pw: calc(var(--ph) * 9 / 16); padding-right: calc(min(300px, 22vw) + 48px); }
  .hero--wrap .pitch { width: min(500px, 34vw); flex: none; }
  .hero--wrap .hl { position: static; display: block; }
  .hero--wrap .hl__a, .hero--wrap .hl__n { width: auto; text-align: left; }
  .hero--wrap .hl__a { font-size: clamp(30px, 3.1vw, 52px); }
  .hero--wrap .hl__n { margin-top: 10px; font-size: clamp(90px, 9vw, 168px); }
  .hero--wrap .hl__q { font-size: clamp(30px, 3.1vw, 52px); }
  .hero--wrap .stage { width: var(--pw); margin: 0; flex: none; }
  .hero--wrap .stage.has-receipt { transform: none; }
  .hero--wrap .side { width: min(300px, 22vw); }
  .hero--wrap .cook { grid-template-columns: 1fr 1fr; width: 100%; margin: 36px 0 0; }
  .hero--wrap .cook__field { grid-column: 1 / -1; }
  .hero--wrap .cook__note, .hero--wrap .cook__err { text-align: left; }
  .wrap-page .coin { padding-top: 24px; border-top: 0; }
}

html { overflow-anchor: none; }
@media (max-width: 899px) {
  .is-reading .slot, .hero--wrap .slot { width: min(70vw, 300px); margin-top: 8px; }
  .slot.is-printing .paper { transform-origin: 50% 0; }
}

.stage__replay { margin-left: auto; }
.stage__meta { flex-wrap: nowrap; }
@media (max-width: 899px) { .xhair { display: none !important; } }

/* poster: the burner sits in the frame until the first film frame lands */
.frame::before { content: ""; position: absolute; left: 50%; top: 46%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url(/brand/mark.svg) center / contain no-repeat; opacity: .9; animation: breathe 2s ease-in-out infinite; }
.is-live .frame::before, .is-notice .frame::before, .stage:has(.hud:not([hidden])) .frame::before { display: none; }

/* =================================================================== round-3 (critic R1) */
.btn { text-decoration: none; }
.btn--ghost::before { background: linear-gradient(to top, #2A0B52, #6A1590 70%, #9A1A8C); }
@media (hover: hover) { .btn--ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #9A1A8C, 0 12px 40px -14px rgba(154, 26, 140, .8); } }
.tip { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -6px); }
.badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 900 13px/1 var(--display); font-style: normal; color: #fff; flex: none; }
.badge--phantom { background: #AB9FF2; color: #1C1C33; } .badge--solflare { background: #FFC10B; color: #1C1C1C; } .badge--backpack { background: #E33E3F; }
.sheet__list .btn { gap: 14px; }

/* the readout reads on any heat */
.num { text-shadow: 0 0 34px color-mix(in srgb, currentColor 40%, transparent), 0 3px 0 rgba(6, 5, 9, .55); }
.hl__a, .hl__q { text-shadow: 0 2px 18px rgba(6, 5, 9, .55); }
.cook__note { color: #CFC7D8; }
.cook__err { color: #FFD9CC; }
.cook__err::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--hot); vertical-align: 1px; }

/* phones: the headline gets its own dark band under the film */
@media (max-width: 899px) {
  .frame { -webkit-mask-image: linear-gradient(#000 0 44%, rgba(0, 0, 0, .35) 60%, transparent 72%); mask-image: linear-gradient(#000 0 44%, rgba(0, 0, 0, .35) 60%, transparent 72%); }
  .hero:not(.hero--wrap)::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(6, 5, 9, 0), rgba(6, 5, 9, .82) 34%, rgba(6, 5, 9, .92)); }
  .is-reading .hero::before { display: none; }
  .is-reading .hero__row { --pw: min(100vw, calc((100svh - 210px) * 9 / 16)); }
  .is-reading .hero { padding-bottom: 12px; }
  .acts:not(.is-hot) .btn { opacity: .38; filter: saturate(.2); pointer-events: none; }
  .acts .btn { transition: opacity .5s ease, filter .5s ease; }
  .acts.is-hot .btn[data-act="post"] { animation: heatup .9s var(--ease); }
}
@keyframes heatup { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 26, .9); } 100% { box-shadow: 0 0 0 18px rgba(255, 178, 26, 0); } }

/* desktop reading: the readout stays beside the frame, then hands over to the receipt */
@media (min-width: 900px) {
  .is-reading .hero { min-height: 100svh; }
  .is-reading .hl { display: flex; }
  .is-reading .stage.has-receipt { transform: none; }
  .is-reading .hl__a, .is-reading .hl__n { width: calc(50% - var(--pw) / 2 - 56px); }
  .is-reading .hl__n { transition: opacity .5s ease, transform .6s var(--ease), color .2s linear; }
  .is-reading .hero:has(.stage.has-receipt) .hl__n { opacity: 0; transform: translateY(24px) scale(.94); }
  .is-reading .side { top: 50%; transform: translateY(-50%); }
}

/* wrap page leading */
.hero--wrap .hl__a { line-height: 1; }
.hero--wrap .hl__n { margin-top: .14em; }
.hero--wrap .hl__q { margin-top: .18em; }

/* bot block: one tight line, a readable receipt, a real avatar */
.bot__line { font-size: clamp(24px, 6.4vw, 44px); max-width: 16ch; }
.tw--ask .tw__av { background: radial-gradient(circle at 60% 65%, #FFF6E0 0 10%, #FFB21A 10% 22%, #FF5A1C 22% 36%, #9A1A8C 36% 56%, #3A0B6B 56%); }
.paper--mini { width: min(300px, 82%); }
@media (min-width: 900px) { .bot { grid-template-columns: .9fr 1.1fr; } }

/* empty Kitchen: copy on a plate */
.wall__empty-in p { padding: 14px 18px; border-radius: 12px; background: rgba(6, 5, 9, .88); box-shadow: inset 0 0 0 1px var(--line); max-width: 20ch; }

/* receipt corner: scorched paper, not a smudge */
.rp-scorch { right: -10cqw; bottom: -10cqw; width: 30cqw;
  background: radial-gradient(closest-side, rgba(110, 44, 10, .55) 0 30%, rgba(190, 100, 30, .28) 55%, rgba(230, 160, 70, .12) 75%, transparent 100%); }
.stage__span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .stage__replay span, .mute span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stage__replay { width: 44px; padding: 0; }
  .mute { width: 44px; justify-content: center; }
}

/* =================================================================== round-4 (critic R2) */
.hl__n.is-hunting .num { animation: hunt .9s steps(2) infinite; color: var(--muted); }
@keyframes hunt { 50% { opacity: .35; } }
/* hide the privacy line while the connect tooltip is open */
.cook:has(.cook__connect:hover, .cook__connect:focus-visible) + .cook__note { opacity: 0; }
.cook__note { transition: opacity .2s ease; }

@media (max-width: 899px) {
  /* the thumb bar is a solid shelf; the page makes room for it */
  .acts { background: rgba(6, 5, 9, .97); box-shadow: 0 -1px 0 var(--line), 0 -18px 30px rgba(6, 5, 9, .7); }
  .is-reading .coin { display: none; }
  .is-reading:has(.stage.is-ended) .coin { display: block; }
  .is-reading .hero { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* connect is secondary on phones: an icon beside the primary action */
  .cook { grid-template-columns: 58px 1fr; }
  .cook__connect { padding: 0; }
  .cook__connect > span:not(.tip) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cook__connect svg { width: 22px; height: 22px; }
}
/* desktop: after the slam the readout settles under its label, the receipt takes the right */
@media (min-width: 900px) {
  .is-reading .hero:has(.stage.has-receipt) .hl { flex-direction: column; align-items: flex-end; justify-content: center; right: auto; width: calc(50% - var(--pw) / 2 - 56px); }
  .is-reading .hero:has(.stage.has-receipt) .hl__a, .is-reading .hero:has(.stage.has-receipt) .hl__n { width: auto; }
  .is-reading .hero:has(.stage.has-receipt) .hl__n { opacity: 1; transform: none; justify-content: flex-end; margin-top: 10px; font-size: clamp(64px, 7vw, 132px); animation: settle .8s var(--ease) both; }
}
@keyframes settle { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
/* the Kitchen: lighter masks so the first row reads */
.wall { -webkit-mask-image: linear-gradient(transparent, #000 4%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 4%, #000 82%, transparent); }
/* notices: a cold reading, not a black box */
.notice { background: radial-gradient(90% 60% at 50% 38%, rgba(58, 11, 107, .55), transparent 70%), #07060C; }
.notice::before { content: ""; width: 22cqw; aspect-ratio: 1; margin-bottom: 4cqw; background: url(/brand/mark.svg) center / contain no-repeat; filter: grayscale(1) brightness(.75) sepia(.4) hue-rotate(200deg) saturate(2.5); opacity: .85; }
.notice::after { content: ""; position: absolute; left: 10cqw; right: 10cqw; bottom: 12cqw; height: 2px; background: linear-gradient(90deg, transparent, rgba(108, 240, 255, .5) 20%, rgba(108, 240, 255, .5) 80%, transparent); }
@media (max-width: 899px) { .acts:not(.is-hot) { transform: translateY(110%); } }
.hero--404 { justify-content: center; } .hero--404 .pitch { display: grid; gap: 22px; justify-items: start; } .hero--404 .hl__a { font-size: clamp(40px, 9vw, 96px); }

/* =================================================================== round-5 (lead decisions) */
/* the Kitchen: one thermal image, tiles are grid cells drawn over it */
.wall { position: relative; height: auto; overflow: hidden; border-radius: 14px; -webkit-mask-image: none; mask-image: none;
  box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .1); background: #0B0420; }
.wall__heat { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; filter: blur(2px) saturate(1.05); transform: scale(1.02); }
.wall__list { position: relative; padding: 0; gap: 0; transform: none !important; }
.wall__list li:nth-child(n + 7) { display: none; }
.tile { height: auto; aspect-ratio: 1.25; border-radius: 0; background: none !important; box-shadow: inset -1px -1px 0 rgba(246, 242, 236, .14); }
.tile::after { background: repeating-linear-gradient(0deg, rgba(6, 5, 9, .16) 0 1px, transparent 1px 3px); }
.tile__n { text-shadow: 0 0 1px #060509, 0 2px 0 rgba(6, 5, 9, .9), 0 0 18px rgba(6, 5, 9, .9); }
.tile__w { color: var(--ink); text-shadow: 0 1px 0 #060509, 0 0 8px #060509; }
@media (hover: hover) { .tile:hover { transform: none; box-shadow: inset 0 0 0 2px var(--ink); } }
@media (min-width: 900px) {
  .wall__list li:nth-child(n + 7) { display: list-item; }
  .wall { height: auto; }
  .tile { aspect-ratio: 1.45; }
}

/* in-frame loading: the film's own frame 0 (dial at 32°F) under tiny HUD words */
.hud { padding: 0; }
.hud::before { display: none; }
.hud__top { position: absolute; left: 0; right: 0; bottom: 9cqw; padding: 0; justify-content: center; gap: 3cqw; font-size: 3.4cqw; text-shadow: 0 1px 6px #060509; }
.hud__top [data-hud-stage]::before { content: ""; display: inline-block; width: 1.8cqw; height: 1.8cqw; margin-right: 2cqw; border-radius: 50%; background: var(--hot); vertical-align: .2cqw; animation: blink 1s steps(2) infinite; }
.hud__ring { top: 46%; width: 85cqw; visibility: hidden; }
.hud__ring::after { display: none; }
.hud__bar { bottom: 5cqw; height: 1cqw; }

/* phones: the frame flips into the receipt (same 9:16 slot) */
.face { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 6cqw; background:
  radial-gradient(120% 70% at 50% 40%, #241338, #07060C 75%); }
.face__paper { width: 100%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.face__paper.paper--img { aspect-ratio: auto; background: var(--paper); }
.face__paper img { display: block; width: 100%; height: auto; }
.face__replay { position: absolute; top: 4cqw; right: 4cqw; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: rgba(6, 5, 9, .82); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.face__replay svg { width: 16px; height: 16px; }
.is-flipped .frame canvas { visibility: hidden; }
@media (max-width: 899px) { .is-reading .slot { display: none !important; } }

/* the bot: the probe mascot, one line, one reply */
.bot { grid-template-columns: 96px 1fr; align-items: end; gap: 18px; }
.bot__probe { width: 96px; height: auto; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(255, 90, 28, .25)); }
@keyframes sway { 50% { transform: rotate(-3deg) translateY(-4px); } }
.bot__in { display: grid; gap: 18px; min-width: 0; }
.bot__line { max-width: 18ch; }
.tw { grid-template-columns: 44px 1fr; border-radius: 22px 22px 22px 6px; padding: 16px; background: rgba(16, 13, 21, .92); }
.tw__av { width: 44px; height: 44px; border-radius: 50%; }
.tw__card { display: block; width: 100%; max-width: 340px; height: auto; margin-top: 14px; border-radius: 4px; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .9); transform: rotate(-1.2deg); }
@media (min-width: 900px) {
  .bot { grid-template-columns: minmax(200px, 300px) minmax(0, 620px); justify-content: center; gap: 56px; align-items: center; }
  .bot__probe { width: 100%; }
  .bot__line { font-size: clamp(32px, 3.4vw, 52px); }
}
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 18% 18%, rgba(6, 5, 9, .62), transparent 72%); pointer-events: none; }
.bot__line { max-width: 22ch; }
@media (max-width: 899px) {
  .bot { grid-template-columns: 84px 1fr; align-items: end; }
  .bot__in { display: contents; }
  .bot__line { grid-column: 1 / -1; order: 0; max-width: 18ch; }
  .bot__probe { order: 1; width: 84px; }
  .tw { order: 2; }
}
.face { background: var(--paper); padding: 4cqw; }
.face__paper { box-shadow: none; }

/* round-6 (critic R4) */
.face { padding: 0; align-content: center; }
.face::before, .face::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 50% 0, transparent 5px, var(--paper) 5.5px) 0 0 / 14px 10px repeat-x; }
.face::before { top: 0; transform: rotate(180deg); } .face::after { bottom: 0; }
.face__paper.paper--dom { width: 100%; }
.tip { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); z-index: 5; }
.hl__tag { font-size: 9px; height: 16px; }
@media (max-width: 899px) {
  /* phones: the whole film, framed, then the reading and the paste bar */
  .hero:not(.hero--wrap) .hero__row { --pw: min(calc(100vw - 2 * var(--gut)), calc((100svh - 400px) * 9 / 16)); --ph: calc(var(--pw) * 16 / 9); }
  .hero:not(.hero--wrap) .stage { left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); }
  .hero:not(.hero--wrap) .frame { border-radius: 22px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px rgba(246, 242, 236, .12), 0 0 0 6px #0d0a12, 0 30px 80px -20px rgba(255, 74, 28, .4); }
  .hero:not(.hero--wrap)::before { display: none; }
  .hero:not(.hero--wrap) .hl__a { font-size: clamp(20px, 6vw, 30px); }
  .hero:not(.hero--wrap) .hl__n { font-size: clamp(64px, 21vw, 110px); }
  .hero:not(.hero--wrap) .cook { margin-top: 30px; }
  .is-reading .hero:not(.hero--wrap) .stage { left: auto; transform: none; top: auto; }
  .is-reading .hero:not(.hero--wrap) .hero__row { --pw: min(100vw, calc((100svh - 210px) * 9 / 16)); }
  .is-reading .hero:not(.hero--wrap) .frame { border-radius: 0; box-shadow: none; }
  .hero--wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* bot: the probe is the sender, the line sits over both */
.bot { grid-template-columns: 84px 1fr; grid-template-areas: "line line" "probe tw"; align-items: end; }
.bot__in { display: contents; }
.bot__line { grid-area: line; max-width: 22ch; }
.bot__probe { grid-area: probe; order: 0; }
.tw { grid-area: tw; order: 0; }
@media (min-width: 900px) {
  .bot { grid-template-columns: 220px minmax(0, 560px); grid-template-areas: "line line" "probe tw"; justify-content: center; column-gap: 20px; row-gap: 28px; }
  .bot__line { max-width: 26ch; font-size: clamp(30px, 3vw, 46px); }
  .bot__probe { width: 220px; margin-bottom: -10px; }
}

/* =================================================================== round-7 (lead: fill the flanks, mascot errors, wrap phone) */
/* desktop hero: the receipt you'll get prints beside the film when the sample's rank lands */
.preview { display: none; }
@media (min-width: 900px) {
  .preview { display: block; position: absolute; z-index: 1; top: 64%; left: calc(50% + var(--pw) / 2 + 56px); width: min(250px, calc(50% - var(--pw) / 2 - 80px)); }
  .preview__slot { position: relative; overflow: hidden; padding-top: 9px; height: calc(min(250px, 100%) * 0 + 1px); }
  .preview__slot { height: auto; aspect-ratio: 1080 / 760; }
  .preview__slot::before { content: ""; position: absolute; z-index: 2; left: -4%; right: -4%; top: 0; height: 9px; border-radius: 0 0 5px 5px; background: #0E0B13; box-shadow: inset 0 -2px 0 rgba(255, 178, 26, .55), 0 6px 14px rgba(0, 0, 0, .6); }
  .preview img { display: block; width: 100%; height: auto; transform: translateY(-101%); transition: transform 1.9s steps(19, end); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8); }
  .preview.is-printed img { transform: translateY(0); }
  .preview:not(.is-printed) img { transition: transform .5s var(--ease-in); }
  .is-reading .preview { display: none; }
  .hero__row .hl__n { margin-top: -14%; }
  .hl__tag { bottom: auto; top: -24px; }
}
@media (min-width: 900px) and (max-height: 760px) { .preview { display: none; } .hero__row .hl__n { margin-top: 0; } }

/* error screens: the probe mascot carries the bad news */
.notice { align-items: center; text-align: center; gap: 2.6cqw; padding: 8cqw; }
.notice::before { display: none; }
.notice__probe { width: 34cqw; height: auto; margin-bottom: 1cqw; animation: sway 4.5s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 16px 26px rgba(255, 90, 28, .25)); }
.notice__t { font-size: 8cqw; }
.notice__acts { width: 100%; }
.cook__err { display: flex; align-items: center; gap: 10px; }
.cook__err::before { display: none; }
.cook__probe { width: 28px; height: 28px; flex: none; }

/* phone wrap page: the film first (framed, above the fold), the headline + paste field under it */
@media (max-width: 899px) {
  .hero--wrap { padding-top: calc(64px + env(safe-area-inset-top)); }
  .hero--wrap .hero__row { gap: 18px; --pw: min(calc(100vw - 2 * var(--gut)), calc((100svh - 330px) * 9 / 16)); --ph: calc(var(--pw) * 16 / 9); }
  .hero--wrap .pitch { order: 2; }
  .hero--wrap .stage { order: 1; width: var(--pw); margin: 0 auto; }
  .hero--wrap .frame { border-radius: 22px; box-shadow: 0 0 0 1px rgba(246, 242, 236, .12), 0 0 0 6px #0d0a12, 0 30px 80px -20px rgba(255, 74, 28, .4); }
  .hero--wrap .hl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .hero--wrap .hl__a { font-size: 20px; width: 100%; }
  .hero--wrap .hl__n { font-size: clamp(56px, 17vw, 84px); margin-top: 2px; }
  .hero--wrap .hl__q { font-size: 26px; margin: 0; }
  .hero--wrap .cook { margin-top: 14px; }
  .hero--wrap .stage__meta { padding-left: 4px; padding-right: 4px; }
  .hero--wrap .slot { display: none !important; }
}

/* 404 */
.hero--404 .pitch { justify-items: center; text-align: center; margin: 0 auto; }
.p404 { width: 180px; height: auto; animation: sway 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@media (min-width: 900px) {
  .hero__row .hl__n { margin-top: 0; }
  .hl__tag { top: auto; bottom: -26px; }
  .preview { top: calc(50% + 96px); }
  .preview img { transform: none !important; clip-path: inset(0 0 100% 0); transition: clip-path 1.9s steps(19, end); }
  .preview.is-printed img { clip-path: inset(0 0 0 0); }
  .preview:not(.is-printed) img { transition: clip-path .4s var(--ease-in); }
}

@media (min-width: 900px) {
  .preview img, .preview.is-printed img, .preview:not(.is-printed) img { clip-path: inset(0 0 0 0); transition: none; }
  .preview.go img { animation: print 1.9s steps(19, end) both; }
}
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.t404 { font: 900 clamp(34px, 6vw, 72px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; max-width: 14ch; }

/* verification fixes */
@media (min-width: 900px) {
  .preview img, .preview.is-printed img, .preview:not(.is-printed) img { clip-path: inset(0 0 100% 0); }
  .preview.go img { animation: print 1.9s steps(19, end) forwards; }
}
@media (max-width: 899px) {
  .is-creator .hero--wrap .cook, .is-creator .hero--wrap .cook__note, .is-creator .hero--wrap .cook__err { display: none; }
  .hero--wrap .hero__row { --pw: min(calc(100vw - 2 * var(--gut)), calc((100svh - 390px) * 9 / 16)); }
  .hero--wrap .hl__q { font-size: 22px; }
}
@media (max-width: 899px) { .is-reading .stage, .hero--wrap .stage { z-index: 6; } }

/* =================================================================== round-8 (review R2 · B) */
/* °F: a small solid degree circle, raised and tight; F at 55% */
.deg { font-size: .55em; align-items: flex-start; margin-left: .03em; }
.ring { display: inline-block; width: .36em; height: .36em; margin: .04em .04em 0 0; border: .085em solid currentColor; border-radius: 50%; background: none; }
.hl__n .ring { border-color: currentColor; }
/* HUD words tick in */
[data-hud-stage].tick { animation: tickin .45s steps(6, end); }
@keyframes tickin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the one receipt: the story card fills the 9:16 slot */
.face { padding: 0; background: var(--paper); }
.face::before, .face::after { display: none; }
.face__paper.paper--story, .face__paper.paper--story img { width: 100%; height: 100%; }
.face__paper.paper--story img { object-fit: cover; }
.slot .paper--story img { aspect-ratio: 9 / 16; }
@media (min-width: 900px) {
  .preview__slot { aspect-ratio: 1080 / 1000; }
  /* desktop: a bigger frame, the reading hugs it */
  .hero__row { --ph: clamp(440px, min(80svh, calc(100svh - 210px)), 860px); }
  .hl { justify-content: center; gap: calc(var(--pw) + 64px); }
  .hl__a, .hl__n { width: auto; max-width: calc(50% - var(--pw) / 2 - 48px); }
  .preview { left: calc(50% + var(--pw) / 2 + 32px); width: min(240px, calc(50% - var(--pw) / 2 - 56px)); }
  .is-reading .hl__a, .is-reading .hl__n { width: auto; }
  .is-reading .hero__row { --ph: min(calc(100svh - 140px), 860px); }
  .side { left: calc(100% + 40px); }
  /* the bot probe docks against its reply card */
  .bot { grid-template-columns: 200px minmax(0, 560px); column-gap: 0; }
  .bot__probe { width: 230px; margin-right: -40px; position: relative; z-index: 2; align-self: end; }
  .tw { position: relative; z-index: 1; padding-left: 40px; }
}
/* wallet picker: wallet name + what happens, no letter badges */
.pk { justify-content: space-between !important; text-transform: none; }
.pk__n { font: 700 16px/1 var(--ui); letter-spacing: 0; }
.pk__l { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pk img { order: -1; }
/* $COOKED: a ticket from the receipt system */
.coin { border-top: 0; }
.ticket { position: relative; max-width: 760px; margin: 0 auto; padding: 34px 28px 30px; background: var(--paper); color: var(--paper-ink);
  background-image: repeating-linear-gradient(0deg, rgba(22, 20, 26, .025) 0 1px, transparent 1px 3px);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); transform: rotate(-.6deg); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 50% 0, transparent 5px, var(--paper) 5.5px) 0 0 / 14px 10px repeat-x; }
.ticket::before { top: -9px; transform: rotate(180deg); } .ticket::after { bottom: -9px; }
.ticket .coin__tkr { color: var(--paper-ink); font-size: clamp(40px, 9vw, 96px); }
.ticket .ca { box-shadow: inset 0 0 0 1.5px var(--paper-ink); color: var(--paper-ink); border-radius: 6px; }
.ticket .ca__k { color: #C8300A; }
.ticket .coin__fee { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed rgba(22, 20, 26, .35); font: 700 15px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.ticket .coin__disc { color: var(--paper-fade); font-size: 11.5px; }
.is-reading .ticket { transform: none; padding: 18px 22px; }
@media (max-width: 899px) { .ticket { padding: 28px 20px 24px; } }
@media (min-width: 900px) {
  .hero__row { --ph: clamp(420px, min(80svh, calc(100svh - 260px)), 860px); }
  .is-reading .hero:has(.stage.has-receipt) .hl { left: 0; right: auto; width: calc(50% - var(--pw) / 2 - 40px); gap: 6px; justify-content: center; align-items: flex-end; }
  .is-reading .hero:has(.stage.has-receipt) .hl__a, .is-reading .hero:has(.stage.has-receipt) .hl__n { max-width: 100%; }
  .is-reading .hero:has(.stage.has-receipt) .hl__n { font-size: clamp(56px, 6vw, 112px); }
}
.face__replay { display: none; }
@media (max-width: 899px) { .stage.is-flipped .stage__replay { display: inline-flex; } }
@media (min-width: 900px) {
  .hl__n { font-size: clamp(64px, 7.4vw, 150px); }
  .hl__a { font-size: clamp(34px, 3.8vw, 70px); }
  .bot__probe { transform: translateX(70px); animation: none; }
  .tw { padding-left: 56px; }
}

/* seamless handoff: the face is the film's last frame (the film ends its story card at a 1.05 push) */
.face { transition: opacity .12s linear; }
.face.is-arming { opacity: 0; }
.face__paper.paper--story { overflow: hidden; }
.face__paper.paper--story img { transform: scale(1.05); transform-origin: 50% 50%; }
.is-flipped .frame canvas { visibility: visible; }
/* headline never collides with the frame (1024–1920) */
@media (min-width: 900px) {
  .hl__a { font-size: min(3.8vw, 70px, calc((50vw - var(--pw) / 2 - 72px) / 6.4)); }
  .hl__n { font-size: min(7.4vw, 150px, calc((50vw - var(--pw) / 2 - 72px) / 3.5)); }
  .is-reading .hero:has(.stage.has-receipt) .hl__n { font-size: min(6vw, 112px, calc((50vw - var(--pw) / 2 - 64px) / 3.5)); }
}
/* the probe never covers controls: native pointer over anything interactive */
html.has-xhair a, html.has-xhair button, html.has-xhair [role="button"] { cursor: pointer !important; }
.xhair.is-off { opacity: 0; }
.xhair { transition: opacity .12s linear; }
@media (min-width: 900px) {
  .hl { gap: calc(var(--pw) + 64px); }
  .hl__a, .hl__n { flex: 0 0 calc(50% - var(--pw) / 2 - 32px); max-width: none; width: auto; }
  .hl__n { justify-content: flex-start; }
  .is-reading .hero:has(.stage.has-receipt) .hl__a, .is-reading .hero:has(.stage.has-receipt) .hl__n { flex: 0 0 auto; }
}