/* Keep or kill, version B (pages/rate-b.ts): its own shell and kit, each part made once with every state. The values are
   a crypto trading site's coin page, read live and measured (research/competitors/screens/bags_fm/, see rate-b.ts):
   its warm near-blacks, one 1px white-8% edge, 24px panels, 16px wells, pill controls on a well, a white pill for the
   act, green and red only for up and down, tabular numbers, a 60 s ticker, rows that drop in with a green flash.
   Spacing steps (stated on <html> for the check): 0 2 4 8 12 16 20 24 32 48. Type floor 12. Prefix bx-. */
@font-face { font-family: "Inter"; src: url("/fonts/Inter-100-900.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("/fonts/ArchivoBlack-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* grounds and greys (theirs, dark) */
  --bg: #0b0b0b; --bar: #121211; --card: #151514; --raised: #1a1a19; --well: #1e1e1c;
  --ink: #f3f3f0; --ink-82: rgb(243 243 240 / .82); --ink-62: rgb(243 243 240 / .62); --ink-14: rgb(243 243 240 / .14); --ink-8: rgb(243 243 240 / .08); --ink-6: rgb(243 243 240 / .06);
  --muted: #9d9d95; --faint: #86867f; --line: #ffffff14; --on-ink: #151514;
  /* up and down: green and red mean only that */
  --green: #6fe08a; --green-ink: #08361a; --green-text: #5fd67e; --green-dark: #142a1b;
  --red: #eb4d5c; --red-text: #ff6b78; --red-dark: #3a1519;
  /* depth */
  --shadow-card: inset 0 1px 0 #ffffff08, 0 22px 44px -28px #000000b3;
  --shadow-pop: inset 0 1px 0 #ffffff0d, 0 30px 60px -24px #000000d9;
  --shadow-row: 0 10px 24px -18px #0009;
  /* motion */
  --out: cubic-bezier(0, 0, .2, 1); --drop: cubic-bezier(.2, .9, .3, 1); --pop: cubic-bezier(.2, .9, .3, 1.2);
  --r-card: 24px; --r-well: 16px; --r-ticket: 22px;
  /* warm: the shop page's one accent (the lab's experiment 01), the price and the second line of its headline */
  --warm: #ffb27a; --warm-2: #ff8a4c; --warm-hi: #ffd9b8; --warm-ink: #2a1200; --warm-glow: rgb(255 140 70 / .3);
  --warm-text: linear-gradient(180deg, var(--warm-hi), var(--warm) 55%, var(--warm-2));
  --display: "Archivo Black", "Inter", system-ui, sans-serif; --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 500 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
.num, .bx-tk, .bx-pin b, .bx-cash b { font-variant-numeric: tabular-nums; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.i { display: inline-flex; flex: none; }
:focus-visible { outline: 2px solid rgb(243 243 240 / .3); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── the shell ─────────────────────────────────────────────────────────────────────────────────────────────── */
.bx-app { min-height: 100vh; }
.bx-top { position: sticky; top: 0; z-index: 30; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 24px;
  background: rgb(11 11 11 / .86); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); }
.bx-logo { font: 400 24px/1 var(--display); letter-spacing: -.02em; justify-self: start; }
.bx-nav { display: flex; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.bx-nav-a { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 9999px; font-weight: 700; color: var(--ink-82); transition: background-color .15s var(--out), color .15s var(--out); }
.bx-nav-a .i { display: none; }
.bx-nav-a:hover { color: var(--ink); background: var(--ink-6); }
.bx-nav-a.on { background: var(--ink); color: var(--on-ink); }
.bx-badge { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 9999px; background: var(--green); color: var(--green-ink); font-size: 12px; font-weight: 800; }
.bx-pins { justify-self: end; display: flex; align-items: center; gap: 8px; }
.bx-pin, .bx-cash { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 9999px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s var(--out), transform .15s var(--out), opacity .15s var(--out); }
.bx-pin { background: var(--well); box-shadow: inset 0 0 0 1px #ffffff0a; }
.bx-pin:hover { background: #262624; }
.bx-pin:active, .bx-cash:active { transform: scale(.96); }
.bx-pin .ico { width: 18px; height: 18px; }
.bx-unit { color: var(--muted); font-weight: 600; }
.bx-streak .ico { color: var(--muted); }
.bx-streak.lit .ico { color: var(--green); fill: var(--green); }
.bx-pack { width: 20px; height: 28px; border-radius: 4px; background: center / cover no-repeat; }
.bx-rankpin { padding-left: 12px; }
.bx-cash { background: var(--ink); color: var(--on-ink); }
.bx-cash .bx-unit { color: rgb(21 21 20 / .62); }
.bx-cash:hover { opacity: .85; }
/* nothing earned yet: the balance stays in view but quiet; it turns the white pill the day a sale clears */
.bx-cash.zero { background: var(--well); color: var(--ink); box-shadow: inset 0 0 0 1px #ffffff0a; }
.bx-cash.zero .bx-unit { color: var(--muted); }
.bx-me { position: relative; }
.bx-me summary { list-style: none; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: var(--well); box-shadow: inset 0 0 0 1px #ffffff0a; font-size: 13px; font-weight: 800; cursor: pointer; }
.bx-me summary::-webkit-details-marker { display: none; }
.bx-menu { position: absolute; right: 0; top: 48px; width: 240px; padding: 8px; display: grid; gap: 2px; border-radius: var(--r-well); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-pop); animation: bx-drop .2s var(--drop) both; }
.bx-menu a, .bx-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px; border: 0; background: none; font-weight: 600; cursor: pointer; }
.bx-menu a:hover, .bx-menu button:hover { background: var(--ink-6); }
.bx-menu form { margin: 0; }
.bx-test { margin: 0; padding: 4px 24px; font-size: 12px; font-weight: 700; color: var(--green-text); background: var(--green-dark); }

/* the tape: what just happened in this organization, on a 60 s loop like theirs */
.bx-tape { height: 36px; overflow: hidden; border-block: 1px solid var(--line); background: var(--bar); display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.bx-tape-run { display: flex; gap: 24px; width: max-content; padding-left: 24px; animation: bx-ticker 60s linear infinite; }
.bx-tape:hover .bx-tape-run { animation-play-state: paused; }
.bx-tk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bx-tk i { width: 8px; height: 8px; border-radius: 9999px; background: var(--faint); margin-right: 2px; }
.bx-tk span { color: var(--muted); }
.bx-tk em { font-style: normal; color: var(--faint); font-weight: 600; }
.bx-tk.k-keep i, .bx-tk.k-sale i, .bx-tk.k-shop_verified i { background: var(--green); }
.bx-tk.k-keep span, .bx-tk.k-sale span, .bx-tk.k-shop_verified span { color: var(--green-text); }
.bx-tk.k-call_accepted i { background: var(--ink); animation: bx-blink 1.6s ease-in-out infinite; }
.bx-tk.new { animation: bx-drop .42s var(--drop) both, bx-row-glow 2s ease-out; border-radius: 9999px; }

.bx-main { padding: 24px 32px 48px; }
.bx-flash { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-well); background: var(--green-dark); color: var(--green-text); font-weight: 700; }
.bx-flash.bad { background: var(--red-dark); color: var(--red-text); }
.bx-tabs { display: none; }
/* feedback (pages/feedback.ts): a quiet pill at the window's bottom right, its panel above it */
.bx-fb { position: fixed; right: 24px; bottom: 24px; z-index: 45; }
.bx-fb summary { list-style: none; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 9999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-row); font-size: 13px; font-weight: 700; color: var(--ink-82); cursor: pointer; transition: color .15s var(--out), background .15s var(--out); }
.bx-fb summary::-webkit-details-marker { display: none; }
.bx-fb summary:hover, .bx-fb[open] summary { color: var(--ink); background: var(--well); }
.bx-fb form { position: absolute; right: 0; bottom: 48px; width: 320px; display: grid; gap: 12px; margin: 0; padding: 16px; border-radius: var(--r-well); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.bx-fb label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.bx-fb textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px; border: 0; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.bx-fb textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink-62); }
.bx-fb button { height: 40px; border: 0; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 800; cursor: pointer; }
.bx-fb p { font-size: 12px; line-height: 1.5; color: var(--muted); }
.bx-toasts { position: fixed; right: 24px; bottom: 80px; z-index: 60; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.bx-toast { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--r-well); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  font-weight: 700; animation: bx-drop .42s var(--drop) both; }
.bx-toast b { color: var(--green-text); }
.bx-toast.down b { color: var(--red-text); }
.bx-toast.out { animation: bx-fade .3s var(--out) both; }

/* ── the page: watchlist, the asset, the ticket ────────────────────────────────────────────────────────────── */
.bx-page { display: grid; grid-template-columns: 320px minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.bx-page.bx-two { grid-template-columns: minmax(0, 1fr) 380px; }
@media (min-width: 1800px) { .bx-page { grid-template-columns: 400px minmax(0, 1fr) 440px; } .bx-page.bx-two { grid-template-columns: minmax(0, 1fr) 440px; } }
.bx-center, .bx-side { display: grid; gap: 12px; min-width: 0; }
.bx-side { position: sticky; top: 88px; }

/* a panel and a well */
.bx-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; min-width: 0; }
.bx-well { background: var(--well); border-radius: var(--r-well); padding: 12px 16px; }
.bx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.bx-head h2 { font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; word-spacing: .12em; }
.bx-k { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.bx-quiet { color: var(--muted); font-size: 13px; font-weight: 600; }
.bx-fine { font-size: 13px; color: var(--faint); font-weight: 600; }
.bx-count { min-width: 32px; height: 24px; padding: 0 8px; border-radius: 9999px; background: var(--ink-8); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); }

/* the tab pair: two pills on a well */
.bx-modes { display: flex; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--well); }
.bx-modes a { flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 9999px; font-weight: 700; color: var(--ink-62); transition: background-color .15s var(--out), color .15s var(--out); }
.bx-modes a:hover { color: var(--ink); }
.bx-modes a.on { background: var(--ink-14); color: var(--ink); }
.bx-modes b { font-size: 13px; color: var(--muted); }
.bx-modes a.on b { color: var(--green-text); }

/* the watchlist */
.bx-watch { position: sticky; top: 88px; display: grid; gap: 12px; max-height: calc(100vh - 112px); grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px 8px 16px 16px; }
.bx-watch .bx-head { padding-right: 8px; }
.bx-rows { display: grid; gap: 4px; align-content: start; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
.bx-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-well); transition: background-color .15s var(--out), box-shadow .16s var(--out), transform .16s var(--out); }
a.bx-row:hover { background: var(--raised); box-shadow: var(--shadow-row); }
a.bx-row:active { transform: scale(.98); }
.bx-row-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bx-row-t b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-row-t span { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-more { font-size: 13px; color: var(--faint); font-weight: 600; padding: 0 8px; }
.bx-th { position: relative; width: 56px; height: 56px; flex: none; border-radius: 16px; overflow: hidden; display: grid; place-items: center; font: 400 20px/1 var(--display); color: #fff; box-shadow: inset 0 0 0 1px #ffffff14; }
.bx-th > span { position: absolute; inset: 0; background: center / cover no-repeat; }
.bx-twin { display: flex; gap: 4px; }
.bx-twin .bx-th { width: 40px; }
/* a row's act is quiet until the row is hovered (Keep and Kill stay the loudest things on the page) */
.bx-mini { height: 32px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 9999px; background: var(--ink-8); color: var(--ink-62); font-size: 13px; font-weight: 700; flex: none; transition: background-color .15s var(--out), color .15s var(--out); }
a.bx-row:hover .bx-mini { background: var(--ink); color: var(--on-ink); }
/* a letter's colour when there's no picture (eight, by name) */
.c0 { background: #2a6b4a; } .c1 { background: #6b2a4a; } .c2 { background: #2a4a6b; } .c3 { background: #6b5a2a; } .c4 { background: #4a2a6b; } .c5 { background: #2a6b6b; } .c6 { background: #6b3a2a; } .c7 { background: #3a3a3a; }

/* the asset: name, the queue's number and today's move, three stats */
.bx-asset { display: grid; gap: 20px; padding: 24px; }
.bx-asset-top { display: flex; align-items: center; gap: 16px; }
.bx-face { position: relative; width: 64px; height: 64px; flex: none; border-radius: 16px; overflow: hidden; display: grid; place-items: center; font: 400 28px/1 var(--display); color: #fff; box-shadow: inset 0 0 0 1px #ffffff14; }
.bx-face > span { position: absolute; inset: 0; background: center / cover no-repeat; }
.bx-asset-n { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bx-asset-n h1 { font: 400 36px/1.05 var(--display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-asset-n p { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-asset-n p a { text-transform: none; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.bx-asset-n p a:hover { color: var(--ink); }
.bx-price { display: grid; justify-items: end; gap: 4px; text-align: right; flex: none; }
.bx-price > b { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.bx-price .bx-unit { font-size: 15px; letter-spacing: 0; }
/* the asset's stat wells (the coin page's three under its name: 218 x 68 at 2000, 8 apart, a 12 px label over a 20 px number) */
.bx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.bx-stat { display: grid; gap: 4px; align-content: start; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); min-width: 0; }
.bx-stat b { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; }
.bx-stat b.zero { color: var(--faint); }
.bx-up { display: inline-flex; align-items: center; gap: 4px; color: var(--green-text); font-size: 15px; font-weight: 700; }
.bx-up .ico { width: 16px; height: 16px; transform: rotate(-45deg); stroke-width: 2.6; }
.bx-player:has(.bx-held) .bx-screen { height: clamp(320px, calc(100vh - 460px), 720px); }
.bx-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--green); flex: none; box-shadow: 0 0 0 4px rgb(111 224 138 / .16); animation: bx-blink 1.6s ease-in-out infinite; }

/* held: why, before the call (a red well when a keep can't release it, a grey one while a check runs) */
.bx-held { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-well); background: var(--red-dark); box-shadow: inset 0 0 0 1px rgb(255 107 120 / .24); }
.bx-held.wait { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.bx-held-i { width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center; background: rgb(255 107 120 / .16); color: var(--red-text); flex: none; }
.bx-held.wait .bx-held-i { background: var(--ink-8); color: var(--ink); }
.bx-held-i .ico { width: 16px; height: 16px; }
.bx-held-t { display: grid; gap: 4px; min-width: 0; }
.bx-held-t b { font-size: 15px; color: var(--red-text); }
.bx-held.wait .bx-held-t b { color: var(--ink); }
.bx-held-t p { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.bx-held-q { font-style: italic; color: var(--ink) !important; }

/* the ad: the chart's place, on a blurred copy of its own still */
.bx-player { display: grid; gap: 12px; }
.bx-player > .bx-asset-top { padding: 8px 8px 0; }
.bx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bx-sep { color: var(--faint); }
.bx-screen { position: relative; height: clamp(360px, calc(100vh - 340px), 820px); border-radius: var(--r-well); overflow: hidden; background: #000; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; }
.bx-blur { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(40px) brightness(.45) saturate(1.3); }
.bx-video { position: relative; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; background: #000; }
.bx-seg { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 9999px; background: var(--well); }
.bx-lost { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 9999px; background: var(--ink-8); font-size: 13px; font-weight: 700; color: var(--ink-82); cursor: pointer;
  transition: background-color .15s var(--out), color .15s var(--out), transform .15s var(--out); }
.bx-lost .ico { width: 16px; height: 16px; }
.bx-lost:hover { color: var(--ink); background: var(--ink-14); }
.bx-lost:active { transform: scale(.96); }
.bx-lost.on { background: var(--red-dark); color: var(--red-text); animation: bx-pop .36s var(--pop); }
.bx-watched { position: relative; flex: 1; height: 32px; border-radius: 9999px; overflow: hidden; display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.bx-watched-f { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink-6); transition: width .3s linear; }
.bx-watched-t { position: relative; }
.bx-watched.all { color: var(--green-text); }
.bx-watched.all .bx-watched-f { background: var(--green-dark); }

/* your calls this sitting: a trade history (you, the judge, when), each new one drops in with its flash */
.bx-calls { display: grid; gap: 8px; }
.bx-calls-h, .bx-call { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px 72px; gap: 12px; align-items: center; }
.bx-calls-h { padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--faint); }
.bx-calls-l { display: grid; gap: 4px; }
.bx-call { padding: 8px; border-radius: var(--r-well); font-weight: 700; }
.bx-call.new { animation: bx-drop .42s var(--drop) both, bx-row-glow 2s ease-out; }
.bx-call.split.new { animation: bx-drop .42s var(--drop) both, bx-row-glow-down 2s ease-out; }
.bx-call-ad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bx-call-ad .bx-th { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.bx-call-ad b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-tag { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 9999px; font-size: 13px; font-weight: 800; text-transform: uppercase; justify-self: start; background: var(--ink-8); color: var(--muted); }
.bx-tag.keep { background: var(--green-dark); color: var(--green-text); }
.bx-tag.kill { background: var(--red-dark); color: var(--red-text); }
.bx-tag .ico { width: 14px; height: 14px; stroke-width: 3; }
.bx-call-when { font-size: 13px; color: var(--faint); font-weight: 600; text-align: right; }
@keyframes bx-row-glow-down { 0% { background-color: rgb(255 107 120 / .16); } 100% { background-color: transparent; } }

/* about: its parts */
.bx-about { display: grid; gap: 12px; }
.bx-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bx-part { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); min-width: 0; }
.bx-part-i { width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); flex: none; }
.bx-part-i .ico { width: 18px; height: 18px; }
.bx-part-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bx-part-t b, .bx-part-by b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-part-by { display: grid; gap: 2px; text-align: right; min-width: 0; }
.bx-part-by .bx-quiet { font-size: 12px; }

/* the ticket */
.bx-ticket { display: grid; gap: 12px; }
.bx-why { display: grid; gap: 8px; border-radius: var(--r-ticket); }
.bx-why-h { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.bx-why-h > :first-child { flex: 1; min-width: 0; }
.bx-why-h .bx-k { font-size: 13px; color: var(--ink-62); }
.bx-why-h .bx-quiet { font-size: 12px; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-chip { position: relative; flex: 1 1 auto; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--ink-8); color: var(--ink-82);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--out), color .15s var(--out), transform .15s var(--out), box-shadow .15s var(--out); }
.bx-chip:hover { color: var(--ink); background: var(--ink-14); }
.bx-chip:active { transform: scale(.96); }
.bx-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bx-chip:has(input:focus-visible) { outline: 2px solid rgb(243 243 240 / .3); outline-offset: 2px; }
.bx-chip:has(input:checked) { background: var(--green-dark); color: var(--green-text); box-shadow: inset 0 0 0 1px rgb(111 224 138 / .4); animation: bx-pop .36s var(--pop); }
.bx-chip.lost { background: var(--red-dark); color: var(--red-text); }
.bx-words { display: grid; gap: 8px; border-radius: var(--r-ticket); transition: box-shadow .15s var(--out); }
.bx-words:focus-within { box-shadow: inset 0 0 0 1px var(--ink-14); }
.bx-words textarea, .bx-words input { width: 100%; border: 0; outline: 0; background: none; padding: 0; resize: none; font-size: 16px; font-weight: 600; line-height: 1.5; }
.bx-words textarea::placeholder, .bx-words input::placeholder { color: var(--faint); }
.bx-talk { height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--ink-8); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s var(--out); }
.bx-talk .ico { width: 16px; height: 16px; }
.bx-talk:hover { background: var(--ink-14); }
.bx-talk.on { background: var(--red-dark); color: var(--red-text); }
.bx-killwhy { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--r-ticket); background: var(--red-dark); animation: bx-drop .3s var(--drop) both; }
.bx-killwhy b { font-size: 13px; color: var(--red-text); }
.bx-killwhy .bx-chip { background: rgb(255 107 120 / .12); color: var(--ink); }
.bx-killwhy .bx-chip:hover { background: rgb(255 107 120 / .22); }

/* the two acts: the trade buttons */
.bx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bx-kill, .bx-keep, .bx-go, .bx-note-go { position: relative; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border: 0; border-radius: 9999px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background-color .15s var(--out), color .15s var(--out), opacity .15s var(--out), box-shadow .15s var(--out), transform .15s var(--out); }
.bx-kill:active, .bx-keep:active, .bx-go:active, .bx-note-go:active { transform: scale(.96); }
/* the two sides weigh the same: Kill is as solid as Keep, never the timid one */
.bx-kill { background: #d23a4b; color: #fff; box-shadow: 0 12px 32px -16px rgb(235 77 92 / .6); }
.bx-kill:hover { background: #e04757; box-shadow: 0 0 0 4px rgb(235 77 92 / .16), 0 12px 32px -12px rgb(235 77 92 / .7); }
.bx-kill.asking { box-shadow: 0 0 0 4px rgb(235 77 92 / .3); }
.bx-keep { background: var(--green); color: var(--green-ink); box-shadow: 0 12px 32px -16px rgb(111 224 138 / .6); }
.bx-keep:hover { background: #86e89c; box-shadow: 0 0 0 4px rgb(111 224 138 / .16), 0 12px 32px -12px rgb(111 224 138 / .7); }
.bx-note-go { background: var(--ink); color: var(--on-ink); }
.bx-note-go:hover { background: rgb(243 243 240 / .85); }
.bx-note-go:disabled { opacity: .4; cursor: default; }
.bx-kill .ico, .bx-keep .ico { width: 20px; height: 20px; stroke-width: 2.6; }
.bx-kbd { height: 20px; min-width: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; font-weight: 800; background: rgb(0 0 0 / .14); opacity: .72; }
.bx-kill .bx-kbd { background: rgb(0 0 0 / .18); }
.bx-kill:disabled, .bx-keep:disabled { cursor: default; opacity: .4; transform: none; }
.bx-kill.busy, .bx-keep.busy, .bx-note-go.busy { opacity: 1; }
.bx-kill > *, .bx-keep > *, .bx-note-go > * { position: relative; z-index: 1; }
.bx-kill.busy::after, .bx-keep.busy::after, .bx-note-go.busy::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); background-size: 200% 100%; animation: bx-shine .9s linear infinite; }
.bx-go { background: var(--ink); color: var(--on-ink); }
.bx-go:hover { background: rgb(243 243 240 / .85); }
.bx-go .ico { width: 18px; height: 18px; }
.bx-go .bx-kbd { background: rgb(21 21 20 / .1); }
.bx-ghost { height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--well); font-size: 14px; font-weight: 700; color: var(--ink-82); transition: background-color .15s var(--out), color .15s var(--out); }
.bx-ghost:hover { background: #262624; color: var(--ink); }
.bx-seal { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bx-seal .ico { width: 16px; height: 16px; }
.bx-note { font-size: 14px; font-weight: 700; padding: 0 8px; }
.bx-note.bad { color: var(--red-text); animation: bx-shake .3s; }

/* the desk */
.bx-desk { display: grid; gap: 12px; }
.bx-split { display: grid; gap: 8px; }
.bx-split-n { display: flex; gap: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.bx-split-n b { font-size: 20px; letter-spacing: -.02em; }
.bx-split-n > :first-child { flex: 1; }
.bx-split-n .up b { color: var(--green-text); }
.bx-split-n .down b { color: var(--red-text); }
.bx-bar { display: flex; gap: 2px; height: 8px; border-radius: 9999px; background: var(--ink-8); }
.bx-bar span { border-radius: 9999px; transition: flex-grow .6s var(--drop); }
.bx-bar .up { background: var(--green); }
.bx-bar .down { background: var(--red); }
.bx-run { display: grid; gap: 12px; }
.bx-run-t { display: flex; align-items: center; gap: 12px; }
.bx-run-t > div { display: grid; gap: 2px; min-width: 0; }
.bx-run-t b { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.bx-run-t div span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bx-flame { width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: var(--green-dark); color: var(--green); flex: none; }
.bx-flame .ico { fill: var(--green); }
.bx-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bx-wd { display: grid; gap: 4px; justify-items: center; font-size: 12px; font-weight: 700; color: var(--faint); }
.bx-wd-bar { width: 100%; height: 32px; border-radius: 8px; background: var(--ink-6); display: flex; align-items: flex-end; overflow: hidden; }
.bx-wd-bar span { width: 100%; background: var(--ink-14); border-radius: 8px; }
.bx-wd.on .bx-wd-bar span { background: rgb(111 224 138 / .5); }
.bx-wd.now { color: var(--ink); }
.bx-wd.now.on .bx-wd-bar span { background: var(--green); }
.bx-vs { display: grid; gap: 8px; }
.bx-rank { display: flex; align-items: center; gap: 16px; transition: background-color .15s var(--out); }
.bx-rank:hover { background: #262624; }
.bx-rank-art { width: 56px; height: 80px; flex: none; border-radius: 8px; background: center / cover no-repeat; }
.bx-rank-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bx-rank-t b { font: 400 20px/1.1 var(--display); text-transform: uppercase; }
.bx-rank-t > span:not(.bx-meter) { font-size: 13px; font-weight: 600; }
.bx-meter { height: 8px; border-radius: 9999px; background: var(--ink-8); overflow: hidden; }
.bx-meter span { display: block; height: 100%; background: var(--green); border-radius: 9999px; }

/* empty: our art and the next step */
.bx-clear { display: grid; gap: 24px; padding: 16px 16px 32px; }
.bx-clear-art { display: block; height: clamp(240px, 36vh, 400px); border-radius: var(--r-well); background: url(/scenes/play.webp) 80% 40% / cover no-repeat; }
.bx-clear-t { padding: 0 16px; }
.bx-clear-t { display: grid; gap: 16px; justify-items: start; }
.bx-clear-t h1 { font: 400 40px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.bx-clear-t p { font-size: 16px; color: var(--muted); font-weight: 600; max-width: 44ch; }

/* A or B */
.bx-two-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-side-ad { display: grid; gap: 12px; }
.bx-side-ad .bx-head h2 { font-size: 20px; }
.bx-side-ad .bx-screen { height: clamp(360px, calc(100vh - 480px), 720px); }
.bx-seen { display: none; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 9999px; background: var(--green-dark); color: var(--green-text); font-size: 13px; font-weight: 700; }
.bx-seen .ico { width: 14px; height: 14px; stroke-width: 3; }
.bx-side-ad.seen .bx-seen { display: inline-flex; animation: bx-pop .36s var(--pop); }
.bx-side-ad.seen { animation: bx-flash-up 2.6s ease-out; }

/* the reveal: the one loud moment (their drop-in and green flash) */
.bx-reveal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: bx-fade-in .2s var(--out) both; }
.bx-rv { width: min(560px, 100%); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; animation: bx-drop .56s var(--pop) both; }
.bx-reveal.agree .bx-rv, .bx-reveal.kept .bx-rv { animation: bx-drop .56s var(--pop) both, bx-flash-up 2.6s ease-out .1s; }
.bx-reveal.split .bx-rv, .bx-reveal.killed .bx-rv { animation: bx-drop .56s var(--pop) both, bx-flash-down 2.6s ease-out .1s; }
.bx-rv-art { display: block; height: 160px; background: url(/scenes/play.webp) 78% 40% / cover no-repeat; }
.bx-rv-in { display: grid; gap: 16px; padding: 24px; }
.bx-rv-h { font: 400 32px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.015em; }
.bx-reveal.agree .bx-rv-h { color: var(--green); }
.bx-reveal.split .bx-rv-h { color: var(--red-text); }
.bx-rv-s { font-size: 16px; font-weight: 600; color: var(--muted); }
.bx-rv-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bx-rv-call { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); }
.bx-rv-call b { font: 400 24px/1.1 var(--display); text-transform: uppercase; }
.bx-rv-call.keep b { color: var(--green); }
.bx-rv-call.kill b { color: var(--red-text); }
.bx-rv-call.keep { box-shadow: inset 0 0 0 1px rgb(111 224 138 / .3); }
.bx-rv-call.kill { box-shadow: inset 0 0 0 1px rgb(255 107 120 / .3); }
.bx-rv-call.judge { animation: bx-pop .5s var(--pop) .35s both; }
.bx-rv-w { font-size: 15px; font-weight: 600; color: var(--ink-82); border-left: 2px solid var(--line); padding-left: 12px; }
.bx-rv-w:empty { display: none; }
.bx-rv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bx-rv-stats .bx-well { display: grid; gap: 4px; }
.bx-rv-stats b { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.bx-rv-stats b.up { color: var(--green-text); animation: bx-pop .5s var(--pop) .5s both; }
.bx-next { width: 100%; justify-content: space-between; }

/* a number that changed: it counts and glows once (their trade-glow) */
.bx-bump { animation: bx-row-glow 2s ease-out, bx-pop .4s var(--pop); border-radius: 9999px; }
.bx-in { animation: bx-rise .42s var(--drop) both; }

/* your call, slammed onto the film: the answer to a keep or a kill the judge has no call on */
.bx-stamp { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgb(0 0 0 / .5); animation: bx-dim .18s var(--out) both; }
.bx-stamp b { font: 400 clamp(44px, 6vw, 104px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; padding: 12px 32px; border: 8px solid currentColor; border-radius: 24px;
  background: rgb(0 0 0 / .35); transform: rotate(-8deg); text-shadow: 0 0 32px currentColor; box-shadow: 0 0 48px -8px currentColor; animation: bx-slam .42s var(--pop) both; }
.bx-stamp.keep b { color: var(--green); } .bx-stamp.kill b { color: var(--red-text); }
@keyframes bx-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-slam { 0% { opacity: 0; transform: rotate(-8deg) scale(2.6); } 55% { opacity: 1; transform: rotate(-8deg) scale(.94); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .bx-stamp, .bx-stamp b { animation: none; } }
@keyframes bx-ticker { to { transform: translateX(-50%); } }
@keyframes bx-drop { 0% { opacity: 0; transform: translateY(-16px) scale(.97); } 60% { opacity: 1; transform: translateY(2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes bx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bx-flash-up { 0% { box-shadow: inset 0 0 0 1px rgb(134 239 172 / .9), 0 0 28px -6px rgb(134 239 172 / .8); } 100% { box-shadow: inset 0 0 0 1px rgb(134 239 172 / 0), 0 0 0 0 rgb(134 239 172 / 0); } }
@keyframes bx-flash-down { 0% { box-shadow: inset 0 0 0 1px rgb(255 107 120 / .9), 0 0 28px -6px rgb(255 107 120 / .8); } 100% { box-shadow: inset 0 0 0 1px rgb(255 107 120 / 0), 0 0 0 0 rgb(255 107 120 / 0); } }
@keyframes bx-row-glow { 0% { background-color: rgb(111 224 138 / .18); } 100% { background-color: transparent; } }
@keyframes bx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes bx-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes bx-blink { 50% { opacity: .35; } }
@keyframes bx-fade { to { opacity: 0; transform: translateY(8px); } }
@keyframes bx-fade-in { from { opacity: 0; } }
@keyframes bx-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── narrower computers: the watchlist goes under, then the places lose their words ─────────────────────── */
@media (max-width: 1279px) {
  .bx-page, .bx-page.bx-two { grid-template-columns: minmax(0, 1fr) 360px; }
  .bx-page > .bx-watch { grid-column: 1 / -1; order: 3; position: static; max-height: none; }
  .bx-watch .bx-rows { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; }
  .bx-nav-a span, .bx-wide .bx-unit { display: none; }
  .bx-nav-a { padding: 0 12px; }
}
@media (max-width: 1099px) { .bx-rankpin span:not(.bx-pack) { display: none; } .bx-top { gap: 16px; } }

/* ── a phone: one column, the acts docked over the tab bar ────────────────────────────────────────────────── */
@media (max-width: 899px) {
  body { font-size: 15px; }
  .bx-top { height: 56px; grid-template-columns: auto 1fr; padding: 0 16px; gap: 12px; }
  .bx-logo { font-size: 20px; }
  .bx-nav { display: none; }
  .bx-pins { justify-self: stretch; justify-content: flex-end; }
  .bx-pin, .bx-cash { height: 36px; padding: 0 12px; gap: 4px; }
  .bx-wide { display: none; }
  .bx-me summary { width: 36px; height: 36px; }
  .bx-tape { height: 32px; }
  .bx-main { padding: 16px 16px calc(176px + env(safe-area-inset-bottom)); }
  /* a phone: feedback is a row at the page's end, clear of the tabs and any docked control */
  .bx-fb { position: static; margin-top: 24px; }
  .bx-fb form { position: static; width: auto; margin-top: 8px; box-shadow: none; }
  /* one column in the order a thumb meets them: the ad, the ticket, the tab pair, the desk, the record, the rest */
  .bx-page, .bx-page.bx-two { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .bx-side-ad .bx-screen { height: max(320px, calc(100svh - 400px)); }
  .bx-center, .bx-side { display: contents; }
  .bx-player, .bx-clear, .bx-asset { order: 1; } .bx-two-ads { order: 2; } .bx-ticket { order: 3; } .bx-modes { order: 4; } .bx-desk { order: 5; } .bx-calls { order: 6; } .bx-about { order: 7; }
  .bx-page > .bx-watch { order: 8; position: static; max-height: none; }
  .bx-watch .bx-rows { grid-template-columns: 1fr; }
  .bx-side { position: static; }
  .bx-card { padding: 16px; border-radius: 20px; }
  .bx-asset { gap: 16px; padding: 16px; }
  .bx-asset-top { gap: 12px; }
  .bx-face { width: 48px; height: 48px; border-radius: 12px; font-size: 22px; }
  /* a shop's name reads whole: it may take two lines, and the queue's numbers sit on their own line under it */
  .bx-asset-top { flex-wrap: wrap; row-gap: 8px; }
  .bx-asset-n { flex: 1 1 0; }
  .bx-asset-n h1 { font-size: 24px; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.1; }
  .bx-asset-n p { font-size: 13px; white-space: normal; }
  .bx-price { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .bx-price > b { font-size: 24px; }
  .bx-price .bx-unit { font-size: 13px; }
  .bx-price .bx-up, .bx-price .bx-quiet { font-size: 13px; }
  .bx-player > .bx-asset-top { padding: 0; }
  .bx-facts { display: none; }
  .bx-screen { height: max(300px, calc(100svh - 440px)); }
  .bx-player:has(.bx-held) .bx-screen { height: max(280px, calc(100svh - 540px)); }
  .bx-calls-h, .bx-call { grid-template-columns: minmax(0, 1fr) 72px 88px; }
  .bx-calls-h span:last-child, .bx-call-when { display: none; }
  .bx-parts { grid-template-columns: 1fr; }
  .bx-acts { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 16px; background: linear-gradient(180deg, transparent, var(--bg) 32%); }
  .bx-kbd { display: none; }
  /* the play button sits low on the film, off the product and the captions */
  .bx-playbig { top: auto; bottom: 16px; transform: translateX(-50%); height: 52px; font-size: 16px; padding: 0 20px 0 6px; }
  .bx-playbig:hover { transform: translateX(-50%) scale(1.04); } .bx-playbig:active { transform: translateX(-50%) scale(.96); }
  .bx-playbig-i { width: 40px; height: 40px; }
  .bx-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bar); border-top: 1px solid var(--line); }
  .bx-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .bx-tab .ico { width: 22px; height: 22px; }
  .bx-tab.on { color: var(--ink); }
  .bx-tab .bx-badge { position: absolute; top: 4px; left: calc(50% + 4px); }
  .bx-tab span:not(.i) { line-height: 1.2; white-space: nowrap; }
  .bx-toasts { left: 16px; right: 16px; top: 100px; bottom: auto; justify-items: stretch; }
  .bx-clear { padding: 12px 12px 24px; gap: 20px; }
  .bx-clear-art { height: 200px; background-position: 82% 40%; }
  .bx-clear-t { padding: 0 8px; }
  .bx-clear-t h1 { font-size: 28px; }
  .bx-two-ads { grid-template-columns: 1fr; }
  .bx-rv-in { padding: 20px; }
  .bx-rv-h { font-size: 26px; }
  .bx-rv-art { height: 120px; }
}
@media (max-width: 359px) { .bx-unit { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bx-tape { overflow-x: auto; mask-image: none; }
  .bx-tape-run { animation: none; }
}
/* a queue just cleared: the empty card lands like a row (drop-in, green flash) */
.bx-clear.bx-rv-flash { animation: bx-drop .56s var(--pop) both, bx-flash-up 2.6s ease-out .1s; }

/* ── the moves a call makes (each from the real record; all off under reduced motion) ─────────────────────── */
/* the film runs silent where the browser won't start its song: one big button starts it over with sound */
.bx-playbig { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 64px; display: inline-flex; align-items: center; gap: 12px; padding: 0 28px 0 8px; border: 0; border-radius: 9999px;
  background: var(--ink); color: var(--on-ink); font: 700 18px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 8px rgb(243 243 240 / .14), 0 24px 48px -16px #000; transition: transform .15s var(--out), box-shadow .15s var(--out); animation: bx-breathe 1.8s ease-in-out infinite; }
.bx-playbig-i { width: 48px; height: 48px; border-radius: 9999px; display: grid; place-items: center; background: var(--on-ink); color: var(--ink); }
.bx-playbig-i svg { width: 24px; height: 24px; margin-left: 2px; }
.bx-playbig:hover { transform: translate(-50%, -50%) scale(1.04); }
.bx-playbig:active { transform: translate(-50%, -50%) scale(.96); }
@keyframes bx-breathe { 50% { box-shadow: 0 0 0 16px rgb(243 243 240 / .06), 0 24px 48px -16px #000; } }

/* the press answers at once: while the call is saved the film's panel takes the side's colour */
.bx-player { transition: box-shadow .15s var(--out), border-color .15s var(--out); }
.bx-calling.keep .bx-player { border-color: rgb(111 224 138 / .7); box-shadow: 0 0 0 1px rgb(111 224 138 / .5), 0 0 64px -12px rgb(111 224 138 / .55); }
.bx-calling.kill .bx-player { border-color: rgb(255 107 120 / .7); box-shadow: 0 0 0 1px rgb(255 107 120 / .5), 0 0 64px -12px rgb(255 107 120 / .55); }
.bx-calling .bx-video { filter: brightness(.8); transition: filter .2s var(--out); }

/* the row that's now playing leaves the watchlist: a green flash, then it folds away */
.bx-row.bx-leave { animation: bx-row-glow .5s ease-out both, bx-fold .42s var(--drop) .3s both; overflow: hidden; }
@keyframes bx-fold { from { max-height: 88px; } to { opacity: 0; transform: translateX(-24px); max-height: 0; padding-block: 0; margin-block: -2px; } }

/* the next ad arrives: the called film slides off to the left, the new one comes in from the right (view transitions) */
.bx-player { view-transition-name: bx-player; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(bx-player) { animation: bx-off .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(bx-player) { animation: bx-on .48s var(--pop) both; }
@keyframes bx-off { to { opacity: 0; transform: translateX(-12%) rotate(-2deg) scale(.96); } }
@keyframes bx-on { from { opacity: 0; transform: translateX(14%) scale(.97); } }

/* the queue cleared: the biggest moment (the scene drops in, a ring bursts, the sitting's calls count up) */
.bx-clear.bx-win { animation: bx-drop .7s var(--pop) both, bx-flash-up 3s ease-out .2s; }
.bx-clear.bx-win .bx-clear-art { animation: bx-zoom 1.2s var(--drop) both; }
.bx-clear.bx-win h1 { animation: bx-slam-in .6s var(--pop) .25s both; }
.bx-clear-art { position: relative; overflow: hidden; }
.bx-burst { position: absolute; left: 70%; top: 45%; width: 0; height: 0; }
.bx-burst i { position: absolute; width: 10px; height: 10px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 12px var(--green); animation: bx-ray 1.1s var(--drop) var(--d) both; }
.bx-burst i:nth-child(3n) { background: var(--ink); box-shadow: 0 0 12px var(--ink); }
@keyframes bx-ray { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(220px) scale(.4); } }
@keyframes bx-zoom { from { transform: scale(1.12); filter: brightness(1.6); } }
@keyframes bx-slam-in { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(.96); } 100% { transform: none; } }
.bx-win-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 8px; }
.bx-win-stats .bx-well { display: grid; gap: 4px; }
.bx-win-stats b { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.bx-win-stats b.up { color: var(--green-text); } .bx-win-stats b.down { color: var(--red-text); }
@media (prefers-reduced-motion: reduce) { .bx-player { view-transition-name: none; } .bx-playbig-i { animation: none; } }

/* a try this viewer decides: which try it is, and what each act does */
.bx-try { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-ticket); background: var(--well); }
.bx-try-h { display: flex; align-items: center; gap: 8px; }
.bx-try b { flex: 1; font-size: 15px; color: var(--ink); }
.bx-pips { display: flex; gap: 4px; }
.bx-pips i { width: 20px; height: 8px; border-radius: 9999px; background: var(--ink-14); }
.bx-pips i.on { background: var(--ink); }
.bx-try span { font-size: 14px; font-weight: 600; color: var(--ink-82); }

/* a held card's acts, one set: the answer that lifts it is the ink pill, the others sit on the well */
.bx-held-t button, .bx-held-go { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 9999px; font: 700 14px/1 var(--sans); cursor: pointer;
  background: var(--ink-8); color: var(--ink); transition: background-color .15s var(--out), transform .15s var(--out), opacity .15s var(--out); }
.bx-held-t button:hover, .bx-held-go:hover { background: var(--ink-14); }
.bx-held-t button:first-of-type, .bx-held-go { background: var(--ink); color: var(--on-ink); }
.bx-held-t button:first-of-type:hover, .bx-held-go:hover { background: rgb(243 243 240 / .85); }
.bx-held-t button:active, .bx-held-go:active { transform: scale(.96); }
.bx-held-go { justify-self: start; margin-top: 4px; }
.bx-held-go .ico { width: 16px; height: 16px; }

/* ── a creator's journey (pages/door.ts, signin.ts's creator door, journey.ts): the door, the email, the pick ────────
   Signed out the shell is the mark and Sign in (.bx-out). Every step stands on one ground: a fine grid lit from above (.bx-home-fx). */
.bx-out .bx-top { grid-template-columns: 1fr auto; }
.bx-out .bx-main { padding-bottom: 48px; }
.bx-live { width: 8px; height: 8px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 12px var(--green); flex: none; animation: bx-blink 1.6s ease-in-out infinite; }
.c0 { --c1: #ff8a2b; --c2: #8c2c05; } .c1 { --c1: #27d07a; --c2: #0b5c3a; } .c2 { --c1: #ff4fa0; --c2: #7a0f4a; } .c3 { --c1: #3fb6ff; --c2: #0c4f8a; }
.c4 { --c1: #ffb52e; --c2: #8a4a00; } .c5 { --c1: #8f6bff; --c2: #2e1a8a; } .c6 { --c1: #ff5a3c; --c2: #7d1505; } .c7 { --c1: #7ee04a; --c2: #2a6a0a; }
.bx-field { display: grid; gap: 4px; padding: 12px 20px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s var(--out); text-align: left; }
.bx-field:focus-within { box-shadow: inset 0 0 0 2px var(--ink-62); }
.bx-field input { width: 100%; border: 0; outline: 0; background: none; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.5; }
.bx-field input::placeholder { color: var(--faint); }
.bx-field input.bx-code { font: 400 36px/1.2 var(--display); letter-spacing: .32em; font-variant-numeric: tabular-nums; }

/* the email and its code: a coin launchpad's welcome dialog, measured at 1440 (research/competitors/screens/pump_fun/
   scr_24283a27b378f074f8c3): one 640 px card, 24 px in, a scene across its top, the title and one sentence centred, the
   field, one full-width button, the fine print. Fixed at every window; on a phone the card takes the width. */
.bx-wel { width: 640px; margin-top: 24px; display: grid; gap: 16px; padding: 24px; text-align: center; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop); animation: bx-rise .42s var(--out) both; }
.bx-wel-art { aspect-ratio: 1600 / 678; border-radius: var(--r-well); background: #120a06 url(/scenes/shops.webp) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.bx-wel h1 { margin-top: 8px; font: 400 32px/36px var(--display); letter-spacing: -.02em; text-wrap: balance; }
.bx-wel-sub { font: 500 16px/24px var(--sans); color: var(--ink-82); text-wrap: balance; }
.bx-go.bx-wel-go { width: 100%; height: 56px; font: 700 17px/24px var(--sans); }
.bx-go.bx-wel-go .ico { width: 20px; height: 20px; }
/* the field matches the button: one 56 px pill, its label for screen readers only (the placeholder says what goes in) */
.bx-wel .bx-field { height: 56px; padding: 0 24px; display: flex; align-items: center; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--ink-14); }
.bx-wel .bx-field:focus-within { box-shadow: inset 0 0 0 1px var(--ink-62); }
.bx-wel .bx-field .bx-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bx-wel .bx-field input { font: 600 17px/24px var(--sans); text-align: center; } .bx-wel .bx-field input::placeholder { font-weight: 500; color: var(--faint); }
.bx-wel .bx-field input.bx-code { font: 400 28px/32px var(--display); letter-spacing: .24em; }
.bx-wel .bx-fine { font-size: 12px; line-height: 16px; } .bx-wel .bx-fine a { color: var(--ink-82); text-decoration: underline; text-underline-offset: 3px; }
.bx-wel-new { justify-self: center; height: 40px; padding: 0 20px; }
.bx-home.bx-wel-page { padding-bottom: 0; }

/* the journey's stage (pages/journey.ts): a coin launchpad's featured pack, measured at 2000 and 390 (research/
   competitors/screens/pump_fun/scr_d2504187c250f351cb16, scr_53c50e04ef8b9134a45e): one tall card in the middle, the
   others smaller at its sides, lit from behind; under it the name, one chip, one button with the price on it, the dots.
   The pick is radios: a tap on a side card brings it to the middle, with no script and no wait. */
.bx-app:has(.bx-jr) { background: #0b0a09; }
.bx-jr { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; padding-top: 16px; min-height: calc(100vh - 136px); }
.bx-jr-h { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: 640px; }
.bx-jr-h h1 { font: 400 40px/44px var(--display); letter-spacing: -.01em; word-spacing: .08em; text-wrap: balance; }
.bx-jr-h p { font: 600 17px/24px var(--sans); color: var(--muted); text-wrap: balance; }
.bx-jr-form { display: grid; justify-items: center; width: 100%; }
.bx-jr-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bx-jr-deck { position: relative; width: 100%; height: 336px; margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 48px; }
/* the light behind the middle card: warm rays, as the featured pack's */
.bx-jr-deck::before { content: ""; position: absolute; left: 50%; top: 50%; width: 960px; height: 960px; z-index: -1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 150 80 / 11%) 0deg 7deg, transparent 7deg 22deg); -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 72%); mask-image: radial-gradient(closest-side, #000 18%, transparent 72%); animation: bx-turn 90s linear infinite; }
@keyframes bx-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bx-jr-k { flex: none; cursor: pointer; order: 2; border-radius: 22px; }
.bx-jr-k.k0 { order: 1; } .bx-jr-k.k2 { order: 3; }
.r0:checked ~ .bx-jr-deck .k0 { order: 2; } .r0:checked ~ .bx-jr-deck .k1 { order: 1; }
.r2:checked ~ .bx-jr-deck .k2 { order: 2; } .r2:checked ~ .bx-jr-deck .k1 { order: 3; }
.bx-jr-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 240px; height: 252px; border-radius: 20px; overflow: hidden; background: #171513; opacity: .5;
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -20px #000; transition: width .3s var(--drop), height .3s var(--drop), opacity .2s var(--out), box-shadow .3s var(--out), transform .15s var(--out); }
.bx-jr-k:hover .bx-jr-card { opacity: .8; transform: translateY(-4px); }
.r0:checked ~ .bx-jr-deck .k0 .bx-jr-card, .r1:checked ~ .bx-jr-deck .k1 .bx-jr-card, .r2:checked ~ .bx-jr-deck .k2 .bx-jr-card, .bx-jr-card.on {
  width: 320px; height: 336px; opacity: 1; transform: none; box-shadow: inset 0 0 0 1px rgb(255 190 140 / 40%), 0 0 0 1px #00000080, 0 0 80px -16px rgb(255 140 70 / 45%), 0 32px 64px -24px #000; }
.r0:focus-visible ~ .bx-jr-deck .k0, .r1:focus-visible ~ .bx-jr-deck .k1, .r2:focus-visible ~ .bx-jr-deck .k2 { outline: 2px solid var(--ink-62); outline-offset: 4px; }
.bx-jr-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, var(--c1, #3a3530), var(--c2, #151311)); }
.bx-jr-art.g0 { --c1: #6b4a2a; --c2: #1d140c; } .bx-jr-art.g1 { --c1: #2a5a44; --c2: #0c1a14; } .bx-jr-art.g2 { --c1: #6b2a3e; --c2: #1d0c12; } .bx-jr-art.g3 { --c1: #2a466b; --c2: #0c141d; }
.bx-jr-img { position: absolute; inset: 0; }
.bx-jr-letter { font: 400 64px/1 var(--display); color: #fff; }
.bx-jr-body { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px 16px; text-align: center; background: linear-gradient(180deg, #1f1b17, #13110f); box-shadow: inset 0 1px 0 var(--line); min-width: 0; }
.bx-jr-body b { max-width: 100%; font: 400 20px/24px var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-jr-body span { max-width: 100%; font: 600 13px/16px var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-nav-gap { display: block; }
/* on a phone the first run's one pill is the credits (what the quest earns and an ad spends), not a $0 or a 0-day streak */
@media (max-width: 899px) { .bx-nav-gap { display: none; } .bx-first .bx-pin.bx-wide:not(.bx-rankpin) { display: inline-flex; } .bx-first .bx-pin.bx-wide .bx-unit { display: inline; } .bx-first .bx-cash, .bx-first .bx-streak { display: none; } }
.bx-jr-asked { position: absolute; top: 12px; left: 12px; z-index: 1; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: var(--green); color: var(--green-ink); font: 800 12px/16px var(--sans); }
.bx-jr-scene { background: #120a06 url(/scenes/shops.webp) 70% center / cover no-repeat; }
.bx-jr-for, .bx-jr-one > .bx-jr-info { margin-top: 24px; }
.bx-jr-for { display: none; justify-items: center; width: 100%; }
.r0:checked ~ .f0, .r1:checked ~ .f1, .r2:checked ~ .f2 { display: grid; animation: bx-fade-in .2s var(--out) both; }
.bx-jr-info { display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 640px; }
.bx-jr-info h2 { font: 400 28px/32px var(--display); letter-spacing: -.01em; text-wrap: balance; }
.bx-jr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 440px; padding: 6px 12px; border-radius: 8px; text-align: left; background: var(--well); font: 600 14px/20px var(--sans); color: var(--ink-82); }
.bx-jr-chip > span:not(.bx-live) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bx-jr-chip .ico { width: 16px; height: 16px; color: var(--green-text); } .bx-jr-chip b { color: var(--green-text); font-weight: 700; }
.bx-jr-fact { font: 700 15px/20px var(--sans); } .bx-jr-fact b { font-size: 17px; }
.bx-jr-sale { display: flex; align-items: center; gap: 8px; font: 700 14px/20px var(--sans); color: var(--green-text); }
.bx-go.bx-jr-go { width: 440px; height: 56px; margin-top: 24px; font: 700 17px/24px var(--sans); }
.bx-go.bx-jr-go .ico { width: 20px; height: 20px; }
.bx-jr-form > .bx-go.bx-jr-go { margin-top: 24px; }
.bx-jr-dots { display: flex; gap: 8px; margin-top: 16px; } .bx-jr-dots i { width: 8px; height: 8px; border-radius: 9999px; background: var(--ink-14); transition: width .2s var(--out), background-color .2s var(--out); }
.r0:checked ~ .bx-jr-dots .d0, .r1:checked ~ .bx-jr-dots .d1, .r2:checked ~ .bx-jr-dots .d2 { width: 20px; background: var(--ink); }
.bx-jr-fine { margin-top: 12px; font: 600 13px/20px var(--sans); color: var(--faint); text-align: center; } .bx-jr-fine a { color: var(--ink-82); }
/* picked: it lands as yours, the other two leave */
.bx-jr-card.just { animation: bx-claim .7s var(--pop) both; }
.bx-jr-card.gone { position: absolute; top: 42px; left: calc(50% - 160px - 48px - 240px); opacity: .5; animation: bx-leave .6s cubic-bezier(.4, 0, 1, 1) .1s both; }
.bx-jr-card.gone.g1 { left: calc(50% + 160px + 48px); animation-delay: .18s; }
@keyframes bx-claim { 0% { transform: scale(.86); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes bx-leave { 0% { opacity: .5; transform: none; } 100% { opacity: 0; transform: translateY(64px) scale(.9) rotate(-6deg); visibility: hidden; } }
/* a wide window (his 2000) gives the stage the same skeleton a size up, so the first screen is filled; type stays put */
@media (min-width: 1800px) {
  .bx-jr { padding-top: 32px; }
  .bx-jr-deck { height: 420px; margin-top: 32px; gap: 64px; }
  .bx-jr-card { width: 300px; height: 316px; }
  .r0:checked ~ .bx-jr-deck .k0 .bx-jr-card, .r1:checked ~ .bx-jr-deck .k1 .bx-jr-card, .r2:checked ~ .bx-jr-deck .k2 .bx-jr-card, .bx-jr-card.on { width: 400px; height: 420px; }
  .bx-jr-card.gone { top: 52px; left: calc(50% - 200px - 64px - 300px); } .bx-jr-card.gone.g1 { left: calc(50% + 200px + 64px); }
  .bx-wel { margin-top: 0; }
}
@media (max-width: 899px) {
  .bx-out .bx-main { padding: 12px 16px 32px; }
  .bx-wel { width: 100%; max-width: 440px; margin-top: 8px; padding: 16px; gap: 12px; }
  .bx-wel h1 { font-size: 26px; line-height: 30px; margin-top: 4px; }
  .bx-wel-sub { font-size: 15px; line-height: 22px; }
  .bx-jr { min-height: 0; padding-top: 4px; }
  .bx-jr-h h1 { font-size: 30px; line-height: 34px; }
  .bx-jr-h p { font-size: 15px; line-height: 22px; }
  .bx-jr-deck { width: calc(100% + 32px); margin: 16px -16px 0; height: 300px; gap: 16px; overflow: hidden; }
  .bx-jr-deck::before { display: none; }
  .bx-jr-k .bx-jr-body { transition: opacity .2s var(--out); }
  .r0:not(:checked) ~ .bx-jr-deck .k0 .bx-jr-body, .r1:not(:checked) ~ .bx-jr-deck .k1 .bx-jr-body, .r2:not(:checked) ~ .bx-jr-deck .k2 .bx-jr-body { opacity: 0; }
  .bx-jr-card { width: 200px; height: 226px; } .bx-jr-body b { font-size: 17px; line-height: 20px; }
  .r0:checked ~ .bx-jr-deck .k0 .bx-jr-card, .r1:checked ~ .bx-jr-deck .k1 .bx-jr-card, .r2:checked ~ .bx-jr-deck .k2 .bx-jr-card, .bx-jr-card.on { width: 268px; height: 300px; }
  .bx-jr-card.gone { top: 37px; left: calc(50% - 134px - 16px - 200px); } .bx-jr-card.gone.g1 { left: calc(50% + 134px + 16px); }
  .bx-jr-for, .bx-jr-one > .bx-jr-info { margin-top: 16px; }
  .bx-jr-info { gap: 8px; } .bx-jr-info h2 { font-size: 24px; line-height: 28px; }
  .bx-go.bx-jr-go, .bx-jr-form > .bx-go.bx-jr-go { width: 100%; margin-top: 16px; }
  .bx-jr-dots { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bx-live, .bx-wel, .bx-go.bx-wel-go, .bx-go.bx-jr-go, .bx-jr-deck::before, .bx-jr-card.just, .bx-jr-card.gone, .r0:checked ~ .f0, .r1:checked ~ .f1, .r2:checked ~ .f2 { animation: none; } .bx-jr-card { transition: none; } .bx-jr-card.gone { display: none; } }

/* The door (pages/door.ts): a real home page's skeleton, measured at 2000 and at 390 and kept at those sizes at every
   window: a 52 px display headline, one muted line, a 320 x 52 white pill, a 520 px card. The window gives it air;
   nothing here scales with the window. Our card holds the ad at card size beside what it is and the site's live counts. */
.bx-home { display: grid; justify-items: center; align-content: center; min-height: calc(100vh - 136px); position: relative; padding-bottom: 48px; }
.bx-out .bx-top { box-shadow: inset 0 -1px 0 var(--line); }
.bx-home-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.bx-home-foot a { font: 600 12px/16px var(--sans); color: var(--muted); } .bx-home-foot a:hover { color: var(--ink); }
/* the door's ground: the dark tiled wall from the bottom of the arms home page (v2 public/assets/home/arms.css: its
   slab tile with the rivets, its near-black gaps, its side vignette), one slab centred behind the block, warm light
   spilling from above, the sides falling to black so the wall isn't one flat tone */
.bx-app.bx-out:has(.bx-home) { background: #0b0a09; } .bx-out:has(.bx-home) .bx-top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bx-home { isolation: isolate; }
.bx-home-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(1000px 700px at 50% 30%, rgb(255 150 80 / 14%), transparent 70%), linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 48px 48px, #0b0a09; }
.bx-home-fx span { position: absolute; display: block; }
/* the ground is a fine grid lit from above, fading to near-black at the edges (the founder, Nov 14, of the tiled wall: "background kinda ugly"; of this one among three: "I think B is the best here") */
.bx-home-fx .lit { display: none; }
/* the slab behind the block is the lit one (that wall's own lit-tile colours), with a warm rim */
.bx-home-fx .lit { left: calc(50% - 356px); top: calc(50% - 450px); width: 704px; height: 941px; border-radius: 29px; background: linear-gradient(180deg, rgb(122 101 82 / 62%), rgb(61 52 44 / 46%) 38%, rgb(30 27 24 / 20%) 100%); box-shadow: inset 0 0 0 1px rgb(255 190 140 / 46%), inset 0 1px 0 1px rgb(255 214 180 / 30%), 0 0 90px -12px rgb(255 140 70 / 30%); }
.bx-home-fx .oa { left: 50%; top: 50%; width: 1100px; height: 760px; transform: translate(-50%, -62%); border-radius: 50%; background: radial-gradient(closest-side, rgb(255 150 80 / 16%), rgb(255 130 60 / 5%) 60%, transparent); }
.bx-home-fx .vg { inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 30%, #0b0a09 78%); }
.bx-home-top { display: grid; gap: 12px; justify-items: center; text-align: center; }
.bx-home-top h1 { margin: 0; font: 400 52px/50px var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.bx-home-top p { margin: 0; font: 600 17.5px/24px var(--sans); color: var(--muted); }
.bx-home-act { margin-top: 24px; width: 320px; display: grid; gap: 4px; justify-items: center; }
.bx-go.bx-home-go { width: 320px; height: 52px; font: 700 16px/24px var(--sans); }
.bx-home-more { margin: 0; height: 32px; display: grid; place-items: center; font: 500 15px/20px var(--sans); color: var(--muted); }
.bx-go.bx-home-in { height: 48px; padding: 0 24px; font: 700 16px/24px var(--sans); }
.bx-home-card { margin-top: 24px; width: 520px; padding: 20px; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.bx-home-film { display: block; width: 144px; height: 256px; border-radius: 12px; object-fit: cover; background: #000; }
.bx-home-art { background: #120a06 url(/scenes/shops-s.webp) 72% center / cover no-repeat; }
.bx-home-t { display: grid; align-content: center; gap: 24px; min-width: 0; }
.bx-home-what { display: grid; gap: 12px; align-content: start; }
.bx-home-k { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 13px/13px var(--sans); color: var(--muted); }
.bx-home-n { margin: 0; font: 900 46px/46px var(--sans); letter-spacing: -.02em; }
.bx-home-s { margin: 0; font: 600 15px/20px var(--sans); color: var(--muted); } .bx-home-s b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) {
  .bx-home { min-height: 0; align-content: start; padding-top: 32px; padding-bottom: 0; }
  .bx-home-top { gap: 8px; } .bx-home-top h1 { font-size: 26.5px; line-height: 25px; } .bx-home-top p { font-size: 16px; line-height: 22px; }
  .bx-home-act { margin-top: 16px; }
  .bx-home-card { width: 100%; max-width: 358px; padding: 16px; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
  .bx-home-film { width: 132px; height: 235px; }
  .bx-home-n { font-size: 36px; line-height: 36px; } .bx-home-s { font-size: 14px; }
  .bx-home-foot { position: static; flex-wrap: wrap; height: auto; padding: 24px 0 0; gap: 8px 16px; }
  .bx-home-fx .oa { width: 520px; height: 520px; transform: translate(-50%, -70%); } .bx-home-fx .lit { display: none; }
}

/* the child question: the served cut's frames are the task (large enough to judge a face, each with its second and the
   check's why), the film beside them at a fixed size; on a phone the frames two to a row and the film under them */
.bx-look-note { padding: 0 8px; font-size: 15px; font-weight: 600; color: var(--ink-82); }
.bx-look-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.bx-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bx-frame { margin: 0; display: grid; gap: 8px; align-content: start; }
.bx-frame-pic { display: block; aspect-ratio: 1; max-height: 560px; border-radius: var(--r-well); background: #000 center / contain no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.bx-frame figcaption { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bx-frame figcaption b { color: var(--ink); font-size: 13px; white-space: nowrap; }
.bx-look-none { display: grid; gap: 4px; }
.bx-look-none span { font-size: 14px; font-weight: 600; color: var(--ink-82); }
/* the film stays in view beside the frames while they scroll */
.bx-screen.bx-look-film { height: 498px; position: sticky; top: 88px; }
/* a try's redo choice: three pills on a well (the tab pair's anatomy) */
.bx-redo { padding: 4px; }
.bx-redo-o { position: relative; flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 9999px; font-size: 14px; font-weight: 700; color: var(--ink-62); cursor: pointer; white-space: nowrap; transition: background-color .15s var(--out), color .15s var(--out); }
.bx-redo-o input { position: absolute; opacity: 0; pointer-events: none; }
.bx-redo-o:hover { color: var(--ink); }
.bx-redo-o:has(input:checked) { background: var(--ink-14); color: var(--ink); }
.bx-redo-o:has(input:focus-visible) { outline: 2px solid rgb(243 243 240 / .3); outline-offset: 2px; }
@media (max-width: 1279px) { .bx-look-body { grid-template-columns: minmax(0, 1fr) 220px; } .bx-screen.bx-look-film { height: 391px; } }
@media (max-width: 899px) {
  .bx-look-body { grid-template-columns: 1fr; }
  .bx-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bx-frame figcaption { display: grid; gap: 2px; padding: 0 2px; }
  .bx-screen.bx-look-film { height: 400px; position: static; }
  .bx-redo-o { font-size: 13px; padding: 0 8px; }
}
/* a try's earlier asks, newest first: the words the next try was made from */
.bx-asked { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.bx-asked b { color: var(--muted); font-weight: 700; margin-right: 4px; }

/* ── a kept ad's own page on sale (pages/media-b.ts, bxa-): Play's skeleton; its path, its money, one act ───────── */
.bxa-path { grid-template-rows: auto auto; align-content: start; }
.bxa-steps { list-style: none; margin: 0; padding: 0 8px 0 0; display: grid; gap: 4px; }
.bxa-step { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-well); }
.bxa-path .bxa-step { min-height: 72px; } /* the kit's list pitch (Play's Up next rows): 76 px a row with the gap */
.bxa-step.next { background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink-14); }
.bxa-dot { width: 40px; height: 40px; flex: none; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); color: var(--muted); font-size: 15px; }
.bxa-dot .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.bxa-step.done .bxa-dot { background: var(--green-dark); color: var(--green); }
.bxa-step.next .bxa-dot { background: var(--ink); color: var(--on-ink); }
.bxa-step-t { display: grid; gap: 2px; min-width: 0; }
.bxa-step-t b { font-size: 15px; font-weight: 700; }
.bxa-step-t span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bxa-step:not(.done):not(.next) .bxa-step-t b { color: var(--muted); }
.bx-earned { color: var(--green); }
.bxa-link { display: grid; gap: 4px; }
.bxa-link code { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.bxa-copy { width: 100%; }
.bxa-copy.done { background: var(--green); color: var(--green-ink); }
.bxa-open { justify-self: center; padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.bxa-open:hover { color: var(--ink); }
.bxa-post { display: grid; gap: 8px; border-radius: var(--r-ticket); }
.bxa-line { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.bxa-postrow { display: flex; align-items: center; gap: 12px; }
.bxa-postn { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bxa-postn b { font-size: 15px; } .bxa-postn span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bxa-views { display: grid; justify-items: end; gap: 2px; } .bxa-views b { font-size: 20px; letter-spacing: -.02em; } .bxa-views span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bxa-record { display: grid; gap: 8px; }
.bxa-field { display: grid; gap: 4px; }
.bxa-field input, .bxa-field select { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--ink-8); color: var(--ink); font-size: 15px; font-weight: 600; outline: 0; }
.bxa-field input:focus-visible, .bxa-field select:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-14); }
.bxa-get { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bxa-get-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bxa-get-t b { font-size: 15px; } .bxa-get-t span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bxa-get-n { font-size: 24px; letter-spacing: -.02em; color: var(--green-text); }
.bxa-fine { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--faint); }
.bxa-clock { display: grid; gap: 4px; }
.bxa-clock b { font-size: 24px; letter-spacing: -.02em; color: var(--red-text); }
.bxa-clock span { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.bxa-math { font-size: 13px; font-weight: 600; color: var(--muted); }
/* narrower computers: a kept ad's left column goes under, its cards side by side; a phone takes its cards one by one */
@media (min-width: 900px) and (max-width: 1279px) {
  .bxa-left { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
}
@media (max-width: 899px) { .bxa-left { display: contents; } .bxa-when { order: 6; } .bxa-path { order: 8; } }

/* ── columns that end on one line (bx-even on a bx-page): on a computer each column stretches to the tallest and its
   last card takes what's left; nothing sticks (a stuck column is short all the same). A list at the left (the
   watchlist) takes the row's height and scrolls inside it instead of setting it; an empty state's picture takes the
   extra height of its card, never a hole under the words ───────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .bx-even.bx-page { align-items: stretch; }
  .bx-even > .bx-center, .bx-even > .bx-side, .bx-even > .bxa-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: static; }
  .bx-even > .bx-center > :last-child, .bx-even > .bx-side > :last-child, .bx-even > .bxa-left > :last-child { flex: 1 0 auto; }
  .bx-even .bx-watch { position: static; max-height: none; }
  .bx-even .bx-card { align-content: start; }
  .bx-even .bx-clear { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .bx-even .bx-clear-art { height: auto; min-height: 240px; }
  .bx-even .bx-side-ad .bx-screen { height: 480px; } /* A or B: the two films meet the side column */
  /* Play's Today desk as a side's last card: its rank's pack card takes the extra height (a bigger picture of the same
     card); with no rank, the week chart does (the bars grow, the numbers don't change) */
  .bx-even .bx-side > .bx-desk:last-child { display: flex; flex-direction: column; }
  .bx-even .bx-side > .bx-desk:last-child > .bx-rank { flex: 1 0 auto; align-items: stretch; }
  .bx-even .bx-side > .bx-desk:last-child > .bx-rank .bx-rank-art { width: auto; height: auto; min-height: 80px; aspect-ratio: 248 / 360; background-size: contain; }
  .bx-even .bx-side > .bx-desk:last-child > .bx-rank .bx-rank-t { align-content: center; }
  .bx-even .bx-side > .bx-desk:last-child:not(:has(> .bx-rank)) > .bx-run { flex: 1 0 auto; grid-template-rows: auto 1fr; }
  .bx-even .bx-side > .bx-desk:last-child .bx-wd { grid-template-rows: 1fr auto; }
  .bx-even .bx-side > .bx-desk:last-child .bx-wd-bar { height: auto; min-height: 32px; }
}
/* an empty state at 2000 fills the first screen with its picture; the side's chart grows to meet it */
@media (min-width: 1800px) { .bx-even .bx-clear-art { min-height: 440px; } }
@media (min-width: 1280px) { .bx-even > .bx-watch { contain: size; } }
@media (max-width: 899px) { .bxa .bx-price { flex-wrap: wrap; } .bxa .bx-price .bx-quiet { max-width: none; } }

.ico.down { transform: rotate(90deg); }
button.bx-ghost { border: 0; cursor: pointer; font-family: inherit; width: 100%; }
@media (max-width: 899px) {
  /* a kept ad on a phone: its one act docks over the tab bar, as Play's two do */
  .bxa-copy { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; z-index: 40; box-shadow: 0 -16px 32px -8px var(--bg); }
  .bxa .bx-screen { height: 400px; }
}
/* ── Credits (pages/credits.ts, cr-): the coin page's asset and ticket; the free way under the asset ──────────────── */
.cr { max-width: 1440px; margin: 0 auto; }
@media (min-width: 1800px) { .bx-page.bx-two.cr { grid-template-columns: minmax(0, 1fr) 440px; } }
.cr-costs { display: grid; gap: 4px; } .cr-costs > .bx-k { padding: 0 8px 4px; }
.cr-cost-row { padding: 8px; }
.cr-hist-rows { display: grid; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.cr-asset .bx-price > b { font: 400 48px/1 var(--display); letter-spacing: -.02em; } .cr-asset .bx-price .bx-unit { font: 700 15px var(--sans); color: var(--muted); }
.cr-face { background: #3a3014; color: #ffd36b; } .cr-face > .i { position: static; } .cr-face .ico { width: 32px; height: 32px; stroke-width: 2.4; }
.cr-what { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-82); max-width: 62ch; }
/* the scene whole, above the words: the card's width at the art's own shape (1600 x 678), never a sliver */
/* the free way's scene: under the ticket on a computer, taking the column's extra height; above the free way's words on a phone */
.cr-free { padding: 0; overflow: hidden; display: grid; }
.cr-art { display: block; padding: 0; min-height: 240px; background: #120a06 url(/scenes/play.webp) 90% center / cover no-repeat; }
.cr-free-in { display: grid; gap: 16px; align-content: start; padding: 24px; }
.cr-big { font-size: 16px; font-weight: 600; color: var(--muted); }
.cr-big b { font: 400 32px/1.1 var(--display); color: var(--ink); margin-right: 8px; letter-spacing: -.01em; }
.cr-rule { font-size: 15px; line-height: 24px; max-width: 64ch; }
.cr-ten { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.cr-ten span { height: 12px; border-radius: 9999px; background: var(--ink-14); }
.cr-ten span.on { background: var(--green); box-shadow: 0 0 12px -2px rgb(111 224 138 / .6); }
.cr-stake { display: grid; gap: 4px; } .cr-stake > span:last-child { font-size: 15px; font-weight: 600; color: var(--ink-82); } .cr-stake b { color: var(--ink); }
.cr-go, .cr-buy-go { width: 100%; } .cr-buy .bx-ghost { height: 52px; gap: 8px; font-size: 16px; } .cr-buy .bx-ghost .ico { width: 18px; height: 18px; }
.cr-buy { display: grid; gap: 12px; }
.cr-pay { display: grid; gap: 8px; }
.cr-pay-n b { display: none; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; }
.cr-get { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 16px; }
.cr-buy .bx-fine a { text-decoration: underline; text-underline-offset: 2px; } .cr-buy .bx-fine a:hover { color: var(--ink); } .cr-get > .bx-k { white-space: nowrap; line-height: 24px; }
.cr-get-n > span { display: none; text-align: right; } .cr-get-n b { display: block; font-size: 16px; } .cr-get-n span span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
/* the chosen pack's price and what it gets (no script: the checked chip picks them) */
.cr-buy:has(.bx-chip:nth-child(1) input:checked) .cr-pay-n > :nth-child(1), .cr-buy:has(.bx-chip:nth-child(2) input:checked) .cr-pay-n > :nth-child(2),
.cr-buy:has(.bx-chip:nth-child(3) input:checked) .cr-pay-n > :nth-child(3), .cr-buy:has(.bx-chip:nth-child(4) input:checked) .cr-pay-n > :nth-child(4) { display: block; }
.cr-buy:has(.bx-chip:nth-child(1) input:checked) .cr-get-n > :nth-child(1), .cr-buy:has(.bx-chip:nth-child(2) input:checked) .cr-get-n > :nth-child(2),
.cr-buy:has(.bx-chip:nth-child(3) input:checked) .cr-get-n > :nth-child(3), .cr-buy:has(.bx-chip:nth-child(4) input:checked) .cr-get-n > :nth-child(4) { display: block; }
.cr-cost { font-size: 15px; font-weight: 700; white-space: nowrap; flex: none; padding-right: 8px; } .cr-cost.up { color: var(--green-text); }
@media (max-width: 899px) { /* the one loud act docks over the tab bar, as Play's and a kept ad's do */
  .cr-go { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; z-index: 40; box-shadow: 0 -16px 32px -8px var(--bg); } }
@media (max-width: 899px) { .cr-asset { order: 1; } .cr-art { order: 2; min-height: 0; aspect-ratio: 1600 / 678; background-position: center; } .cr-free { order: 3; } .cr-ticket { order: 4; } .cr-hist { order: 5; } .cr-hist-rows { grid-template-columns: minmax(0, 1fr); } .cr .bx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr .bx-stat { padding: 12px; } .cr-free-in { padding: 16px; } .cr-big b { font-size: 28px; } }
/* on a kept ad's page the film isn't the job (sending its page is): at most 60% of the window's height, at fixed sizes */
.bxa .bx-screen { height: 540px; }
@media (min-width: 1800px) { .bxa .bx-screen { height: 560px; } } /* the centre meets the two sides at 2000 */
.bxa-post .bx-ghost { background: var(--ink-8); }
.bxa-post .bx-ghost:hover { background: var(--ink-14); }
/* the air goes outside the container: at 2000 a kept ad's page is 1,440 px wide, centred (DESIGN.md) */
.bxa { max-width: 1440px; margin-inline: auto; }
@media (min-width: 1800px) { .bxa.bx-page { grid-template-columns: 340px minmax(0, 1fr) 400px; } }

/* what each control on a try does to this ad: three short rows, the control's name first */
.bx-happens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bx-happens li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-82); }
.bx-happens b { color: var(--ink); }
.bx-happens-i { width: 20px; height: 20px; flex: none; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); color: var(--ink); }
.bx-happens-i .ico { width: 12px; height: 12px; stroke-width: 3; }
.bx-happens-i.ok { background: var(--green-dark); color: var(--green); } .bx-happens-i.bad { background: var(--red-dark); color: var(--red-text); }
.bx-toast a { pointer-events: auto; color: var(--green-text); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* a kept ad's page at 1440: under 60% of a 900 px window */
@media (max-width: 1799px) { .bxa .bx-screen { height: 520px; } }

/* the line saying how many delivered ads were left out because their file doesn't play */
.bx-left-out { margin: 0 auto 16px; max-width: 960px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 138, 122, .12); color: #ffb3a8; font-size: 13px; }
/* a kept ad's page on a phone: its film at a fixed 400 px, under 60% of the window's height (last, so it wins) */
@media (max-width: 899px) { .bxa .bx-screen { height: 400px; } }

/* ── the quest (pages/quest.ts, bxq-): A or B's parts; the two films side by side at every width, one loud control under
   each; the count (ten pips, the misses, the rule) always in view beside them ──────────────────────────────────── */
.bxq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bxq-ad { display: grid; gap: 12px; align-content: start; transition: opacity .3s var(--out), box-shadow .3s var(--out), border-color .3s var(--out); }
.bxq-screen { height: 480px; }
.bxq-pick, .bxq-next { width: 100%; }
.bxq-said { font-size: 14px; font-weight: 600; color: var(--muted); padding: 0 4px; animation: bx-rise .42s var(--drop) both; }
.bxq-said.up { color: var(--ink); }
.bxq-ad.kept { border-color: rgb(111 224 138 / .7); box-shadow: 0 0 0 1px rgb(111 224 138 / .5), 0 0 64px -12px rgb(111 224 138 / .55); }
.bxq-ad.cut { opacity: .55; }
.bxq-row { display: grid; gap: 8px; }
.bxq-pips, .bxq-miss { display: flex; gap: 4px; }
.bxq-pips i, .bxq-miss i { flex: 1; height: 12px; border-radius: 9999px; background: var(--ink-8); transition: background-color .3s var(--out); }
.bxq-pips i.on { background: var(--green); box-shadow: 0 0 12px -2px rgb(111 224 138 / .6); }
.bxq-miss { max-width: 120px; } .bxq-miss i.on { background: var(--red); }
.bxq-pop { animation: bx-pop .5s var(--pop); }
.bxq-drain i { animation: bxq-drain .8s var(--out) both; }
@keyframes bxq-drain { 0% { background: var(--green); } 60% { background: var(--red); } 100% { background: var(--ink-8); } }
.bxq-match { font-size: 15px; font-weight: 700; padding: 0 8px; }
.bxq-head .bx-face { font-size: 24px; } .bxq-head .bx-face .ico { width: 28px; height: 28px; }
@media (max-width: 899px) {
  .bxq-two { gap: 8px; order: 1; }
  .bxq-ad { padding: 8px; gap: 8px; border-radius: 20px; }
  .bxq-ad .bx-head h2 { font-size: 15px; } .bxq-ad .bx-head .bx-quiet { display: none; }
  .bxq-screen { height: 300px; }
  .bxq-pick, .bxq-next { height: 48px; padding: 0 12px; font-size: 15px; }
  .bxq-said { font-size: 13px; }
  .bxq-head { order: 0; }
  .bxq-count { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .bxq-said, .bxq-pop, .bxq-drain i { animation: none; } }
/* a phone on the quest: the answer's toast sits at the window's foot (over the tab bar when there is one), clear of the
   top bar, the question's header card and the Next pair button under the films */
@media (max-width: 899px) { body:has(.bxq) .bx-toasts { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); }
  body:has(.bxq):has(.bx-tabs) .bx-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* the keep card's possible-child flag: the frames to look at before keeping (the founder, Nov 14) */
.bx-flag { border: 1px solid rgba(255, 176, 32, .5); }
.bx-flag-frames { margin-top: 12px; }
/* ── a job's steps, one line each (a build run's job page, measured: research/competitors/screens/github_actions/):
   40 px rows, a 24 px status mark, the step's name, its latest words, its time at the right edge. Done: a tick; now: it
   turns and counts; stopped: red; ahead: an empty ring. Every step before the current one is done, every one after it
   ahead: a step is never blank between done ones. ─────────────────────────────────────────────────────────────── */
.bx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bx-step { min-height: 40px; display: grid; grid-template-columns: 24px 184px minmax(0, 560px) 96px; justify-content: start; align-items: center; gap: 12px; padding: 0 12px 0 8px; border-radius: 12px; font-size: 14px; }
.bx-step-i { width: 24px; height: 24px; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); color: var(--muted); }
.bx-step-i .ico { width: 14px; height: 14px; stroke-width: 3; }
.bx-step-n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-step-s { min-width: 0; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-step-t { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-align: right; }
.bx-step.now .bx-step-t, .bx-step.turn .bx-step-t { color: var(--ink); }
.bx-step.now, .bx-step.turn { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.bx-step.turn .bx-step-i { background: var(--green-dark); color: var(--green); }
.bx-step.turn .bx-step-s { color: var(--ink); }
.bx-step.now .bx-step-i { background: none; }
.bx-step.now .bx-step-s { color: var(--ink-82); }
.bx-step.now .bx-step-t { color: var(--ink); }
.bx-step.bad { background: var(--red-dark); }
.bx-step.bad .bx-step-i { background: rgb(255 107 120 / .16); color: var(--red-text); }
.bx-step.bad .bx-step-n, .bx-step.bad .bx-step-t { color: var(--red-text); }
.bx-step.ahead .bx-step-i { background: none; box-shadow: inset 0 0 0 2px var(--ink-8); }
.bx-step.ahead .bx-step-n { color: var(--faint); font-weight: 600; }
.bx-spin { width: 16px; height: 16px; border-radius: 9999px; border: 2px solid var(--ink-14); border-top-color: var(--ink); animation: bx-spin .9s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bx-spin { animation: none; } }
@media (max-width: 899px) {
  .bx-step { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; padding: 8px 12px 8px 8px; justify-content: stretch; }
  .bx-step-i { grid-row: 1 / 3; }
  .bx-step-s { grid-column: 2; grid-row: 2; font-size: 13px; }
  .bx-step-t { grid-column: 3; grid-row: 1 / 3; }
  .bx-step-s:empty { display: none; }
}

/* ── one ad being made (pages/call.ts): the bench down the left as a plain list (the build page's own list of jobs),
   then one stack of cards: the shop and its facts, its ad, its steps; 1,440 px wide at most, centred. One stack, so cards
   side by side never end on different lines ─────────────────────────────────────────────────────────────────── */
.cl-page { max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.cl-main { display: grid; gap: 12px; min-width: 0; }
.cl-rail { display: grid; gap: 12px; align-content: start; min-width: 0; }
/* the list's heading starts on the first card's top line */
.cl-rail .bx-head { padding: 0 8px; min-height: 0; align-items: flex-start; }
.cl-rail .bx-rows { overflow: visible; padding-right: 0; }
.cl-rail .bx-row.on { background: var(--raised); box-shadow: inset 2px 0 0 var(--ink); }
.cl-steps, .cl-slot { display: grid; gap: 12px; }
.cl-head .bx-asset-top { align-items: center; }
.cl-state { display: flex; align-items: center; gap: 8px; }
.cl-state.bad { color: var(--red-text); }
.cl-act { flex: none; }
.cl-actform { margin: 0; }
.cl-cost { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; margin-left: 4px; border-left: 1px solid rgb(21 21 20 / .2); }
.cl-cost .ico { width: 14px; height: 14px; }
.cl-tries { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); font-size: 14px; font-weight: 600; color: var(--ink-82); }
.cl-tries b { color: var(--ink); }
.cl-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-14); }
.cl-more { padding: 0 8px; font-size: 14px; font-weight: 700; }
.cl-film { height: 480px; border-radius: var(--r-well); overflow: hidden; background: #000; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; }
.cl-film .bx-video { height: 100%; max-height: 100%; }
.cl-row, .cl-decide { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-ticket { display: grid; gap: 12px; align-content: start; }
.cl-pic { position: relative; display: block; height: 200px; border-radius: var(--r-well); background: var(--well) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.cl-pic-k { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; border-radius: 9999px; background: rgb(11 11 11 / .78); font-size: 12px; font-weight: 700; color: var(--ink-82); }
.cl-pic.art { background: #120a06 url(/scenes/make-s.webp) center / cover no-repeat; }
.cl-acts { grid-template-columns: 1fr 1fr; }
@media (max-width: 1279px) {
  .cl-page { grid-template-columns: minmax(0, 1fr); }
  .cl-page > .cl-rail { order: 2; }
}
@media (max-width: 899px) {
  .cl-page { display: flex; flex-direction: column; gap: 12px; }
  .cl-head .bx-stats { grid-template-columns: 1fr 1fr; }
  .cl-act { flex: 1 1 100%; } .cl-act .bx-go { width: 100%; }
  .cl-film { height: 440px; }
  .cl-row, .cl-decide { grid-template-columns: minmax(0, 1fr); }
  /* the kit sends a phone's asset panel after the film; here the shop's name stays first */
  .cl-main > .cl-head { order: 0; }
  .cl-head .bx-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cl-head .bx-stat { padding: 8px 12px; }
  .cl-head .bx-stat b { font-size: 16px; line-height: 20px; }
  .cl-head .bx-stat .bx-quiet { font-size: 12px; }
}
.bxq-head .bx-asset-n p { text-transform: none; }
.bxq-match { padding: 0; }

/* the quiet ground under a kit page (DESIGN.md, Surfaces): a low grid that fades down, the sides falling to dark, one
   warm glow behind the top of the page. A layer of its own, behind everything, never over words */
.bx-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bx-ground::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / .028) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgb(255 255 255 / .028) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.bx-ground::after { content: ""; position: absolute; inset: 0; background: radial-gradient(48% 36% at 50% 0%, rgb(255 138 76 / .08), transparent 72%), linear-gradient(90deg, rgb(0 0 0 / .6), transparent 22%, transparent 78%, rgb(0 0 0 / .6)); }


/* ── Bring a shop (pages/share.ts, sh2-): the coin app's earn panel (a small line, a heavy capital headline, one
   sentence, one 360 px white pill, a fine line) beside our share scene at the email step's two-column size; then the
   rule in the program's numbers, the three steps, who you brought ──────────────────────────────────────────────── */
.sh2 { max-width: 1440px; margin: 0 auto; display: grid; gap: 12px; }
.sh2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); gap: 12px; align-items: stretch; }
.sh2-card { display: grid; gap: 20px; align-content: center; justify-items: start; padding: 48px; }
.sh2-k { font-size: 13px; }
.sh2-card h1 { font: 400 52px/54px var(--display); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; max-width: 22ch; }
.sh2-sub { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--muted); max-width: 44ch; }
.sh2-go { width: 100%; max-width: 360px; } .bx-ghost.sh2-go { height: 52px; gap: 8px; font-size: 16px; } .sh2-go .ico { width: 18px; height: 18px; }
.sh2-link { display: grid; gap: 4px; width: 100%; max-width: 520px; }
.sh2-link code { font: 600 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.sh2-join { display: grid; gap: 12px; width: 100%; max-width: 520px; }
.sh2-field input { font-size: 17px; }
.sh2-wait { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; } .sh2-wait > .i .ico { width: 20px; height: 20px; }
.sh2-wait > span { display: grid; gap: 2px; } .sh2-wait span span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh2-no { color: var(--red-text); }
.sh2-art { display: block; padding: 0; min-height: 440px; background: #120a06 url(/scenes/share.webp) 94% center / cover no-repeat; }
.sh2-rule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
a.sh2-earned { transition: background-color .15s var(--out); } a.sh2-earned:hover { background: var(--raised); }
.sh2 .num.up { color: var(--green-text); }
.sh2-steps { display: grid; gap: 16px; padding: 24px; } .sh2-steps .bx-count { white-space: nowrap; flex: none; }
.sh2-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sh2-stop { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-well); background: var(--well); min-width: 0; }
.sh2-stop.next { background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink-14); }
.sh2-dot { width: 40px; height: 40px; flex: none; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); color: var(--muted); }
.sh2-dot .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.sh2-stop.done .sh2-dot { background: var(--green-dark); color: var(--green); } .sh2-stop.next .sh2-dot { background: var(--ink); color: var(--on-ink); }
.sh2-stop-t { display: grid; gap: 2px; min-width: 0; } .sh2-stop-t b { font-size: 15px; font-weight: 700; } .sh2-stop-t span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh2-stop:not(.done):not(.next) .sh2-stop-t b { color: var(--muted); }
.sh2-who-h { margin-top: 8px; } .sh2-who { display: grid; gap: 4px; } .sh2-amt { font-size: 15px; flex: none; padding-right: 8px; }
.sh2-none { font-size: 15px; font-weight: 600; color: var(--muted); } .sh2-none b { color: var(--ink); }
.sh2-ended { padding: 0 8px; }
.sh2-others { display: grid; gap: 8px; } .sh2-others summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; cursor: pointer; list-style: none; }
.sh2-others summary::-webkit-details-marker { display: none; } .sh2-others summary b { font: 400 18px/1 var(--display); text-transform: uppercase; }
.sh2-prog { display: grid; gap: 4px; } .sh2-prog code { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; } .sh2-prog .sh2-join { margin-top: 8px; }
@media (max-width: 1279px) { .sh2-top { grid-template-columns: minmax(0, 1fr) 360px; } .sh2-card { padding: 32px; } .sh2-card h1 { font-size: 44px; line-height: 46px; } }
@media (max-width: 899px) {
  .sh2-top { grid-template-columns: minmax(0, 1fr); } .sh2-art { min-height: 0; aspect-ratio: 760 / 671; background-image: url(/scenes/share-s.webp); background-position: center; }
  .sh2-card { padding: 24px; gap: 16px; } .sh2-card h1 { font-size: 34px; line-height: 36px; } .sh2-sub { font-size: 16px; }
  .sh2-go { max-width: none; } .sh2-rule { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh2-road { grid-template-columns: minmax(0, 1fr); } .sh2-steps { padding: 16px; }
}

/* ── A shop's page (pages/shop-ad.ts, signin.ts's shop steps, sh-): a token's own page in the coin app the kit was
   measured from (research/competitors/screens/bags_fm/scr_d478e62de5334794568b 2000, scr_b438d0909fc84deb6485 390):
   a 720 px column (a header card: a 60 px picture, the name at 36 px in the display face, 28 on a phone, one line, three
   wells; the media card under it, 12 px apart) beside a 400 px action card 32 px away (a two-way switch 48 tall, a
   well holding the one field, a white 52 px pill); on a phone one column and the pill pinned to the screen's foot.
   Fixed sizes at every window; the window gives the air. ────────────────────────────────────────────────────────── */
.sh-help { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.sh-notice { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); font-size: 14px; font-weight: 600; text-align: center; color: var(--ink-82); }
.sh-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; max-width: 560px; margin: 0 auto; padding: 8px 0 120px; }
.sh-col, .sh-act, .sh-below { display: grid; gap: 12px; min-width: 0; }
.sh-head { display: grid; gap: 20px; padding: 16px; }
.sh-id { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-width: 0; }
.sh-av { width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 30%; background: var(--well) center / cover no-repeat; font: 400 22px/1 var(--display); color: var(--ink-62); }
.sh-name { display: grid; gap: 4px; min-width: 0; flex: 1; }
.sh-name h1 { font: 400 28px/1.05 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sh-name p { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.sh-state i { width: 8px; height: 8px; border-radius: 9999px; background: var(--muted); flex: none; }
.sh-state.live { color: var(--green-text); } .sh-state.live i { background: var(--green); box-shadow: 0 0 12px var(--green); }
.sh-state.still { color: var(--muted); }
.sh-state.down { color: var(--red-text); } .sh-state.down i { background: var(--red); }
.sh-id > .sh-state { flex-basis: 100%; }
.sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sh-stat { display: grid; gap: 4px; align-content: start; padding: 12px; min-width: 0; }
.sh-stat dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sh-ad { display: grid; justify-items: center; gap: 16px; padding: 16px; }
.sh-film { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-well); overflow: hidden; background: #000; }
.sh-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.sh-chip { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 9999px; background: rgb(0 0 0 / .6); font-size: 13px; font-weight: 700; pointer-events: none; }
.sh-still { display: block; }
.sh-still-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .22; filter: saturate(.5); }
.sh-still-on { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.sh-still-on b { font: 400 20px/1.2 var(--display); } .sh-still-on > span:not(.sh-still-i):not(.sh-spin-w) { max-width: 24ch; font-size: 14px; font-weight: 600; color: var(--muted); }
.sh-still-i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 9999px; background: var(--ink-8); } .sh-still-i .ico { width: 24px; height: 24px; }
.sh-spin-w { position: relative; width: 32px; height: 32px; }
.sh-spin { position: absolute; inset: 0; border-radius: 9999px; border: 3px solid var(--ink-14); border-top-color: var(--ink); animation: sh-spin .9s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-ad-t { display: grid; gap: 12px; align-content: start; min-width: 0; width: 100%; }
.sh-ad { align-content: start; }
.sh-say { font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink-82); }
.sh-sent { font-size: 13px; font-weight: 600; color: var(--muted); } .sh-sent b { font: 400 13px/1 var(--display); color: var(--ink); } .sh-sent a { color: var(--ink-82); text-decoration: underline; text-decoration-color: var(--ink-14); text-underline-offset: 3px; }
.sh-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-82); } .sh-back .ico { width: 16px; height: 16px; }
/* the action card */
.sh-ticket { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.sh-ticket > * { min-width: 0; }
.sh-ticket-foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sh-sw { height: 48px; gap: 4px; }
.sh-sw-a { flex: 1; height: 40px; display: grid; place-items: center; border-radius: 9999px; font-size: 15px; font-weight: 700; color: var(--ink-62); transition: background-color .15s var(--out), color .15s var(--out); }
.sh-sw-a:hover { color: var(--ink); } .sh-sw-a.on { background: var(--ink-14); color: var(--ink); }
.sh-join, .sh-forms, .sh-forms .form { display: grid; gap: 12px; margin: 0; }
.sh-field { border-radius: var(--r-ticket); padding: 12px 16px; }
.sh-field textarea { width: 100%; min-height: 56px; border: 0; outline: 0; background: none; padding: 0; resize: vertical; font-size: 16px; font-weight: 600; line-height: 1.5; }
.sh-field textarea::placeholder { color: var(--faint); }
.sh-get { display: grid; gap: 8px; padding: 4px 4px 0; }
.sh-gets { display: grid; gap: 4px; margin: 0; } .sh-gets b { font-size: 16px; font-weight: 700; } .sh-gets span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh-terms { display: grid; gap: 4px; margin: 0; padding: 0 4px; list-style: none; }
.sh-terms li { position: relative; padding-left: 12px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--faint); } .sh-terms li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 9999px; background: var(--faint); }
.sh-then { padding-top: 12px; border-top: 1px solid var(--line); }
.sh-asks { display: grid; gap: 8px; }
.sh-get ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-get li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-82); } .sh-get li .ico { width: 16px; height: 16px; margin-top: 2px; }
.sh-wide { width: 100%; }
.bx-well .bx-ghost { height: 48px; background: var(--ink-8); color: var(--ink); } .bx-well .bx-ghost:hover { background: var(--ink-14); }
.sh-act-head { display: grid; gap: 4px; }
.sh-act-head h2, .sh-plans h2 { font: 400 18px/1.15 var(--display); letter-spacing: -.01em; }
/* the offer: the join card's headline, the page's loudest words; and its one line under the shop's name */
.sh-offer-head h2 { font: 400 28px/1.1 var(--display); }
.sh-offer { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.sh-hint { margin: -4px 0 0; }
.sh-stat-wide { grid-column: 1 / -1; }
/* the one thing to buy for a shop arriving: its name and line at the left, the price and its button at the right */
.sh-paycard { display: grid; gap: 16px; padding: 16px; }
.sh-pay-t { display: grid; gap: 4px; } .sh-pay-t b { font-size: 16px; } .sh-pay-t > span { font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.sh-pay-go { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
.sh-pay-go .bx-ghost { height: 48px; padding: 0 24px; } .sh-pay-go .bx-fine { grid-column: 1 / -1; }
.sh-act-sub { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--muted); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background-color .15s var(--out); } .sh-row:hover { background: #262624; }
.sh-row-t { display: grid; gap: 4px; min-width: 0; } .sh-row-t b { font-size: 15px; font-weight: 700; } .sh-row-t span { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.sh-row-s { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 13px; font-weight: 700; color: var(--muted); } .sh-row-s .ico { width: 16px; height: 16px; }
.sh-price { display: grid; gap: 12px; }
/* an unproved shop's price: the proof in its place, the line it answers to */
.sh-proof { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--muted); } .sh-price-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-amt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sh-buy { margin: 0; display: grid; }
.sh-ok { margin: 0; }
.sh-receipt { display: grid; gap: 4px; }
.sh-receipt-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .sh-receipt-n b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .sh-receipt-n span { font-size: 14px; font-weight: 600; color: var(--muted); }
.sh-receipt-l { font-size: 14px; font-weight: 600; color: var(--ink-82); }
.sh-refund { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sh-refund p { font-size: 14px; font-weight: 600; color: var(--muted); }
/* the forms other pages build (frame.ts command and field), worn in the kit's look here */
.sh-ticket .form, .sh-refund .form { display: grid; gap: 12px; margin: 0; }
.sh-ticket .form > *, .sh-ticket .form label > * { min-width: 0; }
.sh-ticket .form label { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-ticket); background: var(--well); font-size: 12px; font-weight: 700; color: var(--muted); }
/* a field inside a price well (the proof in place of its button) stands out from the well, as its buttons do */
.sh-price .form label { background: var(--ink-8); }
.sh-price .form label:focus-within { box-shadow: inset 0 0 0 2px var(--ink-62); }
.sh-ticket .form input:not([type=hidden]) { width: 100%; border: 0; outline: 0; background: none; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.sh-ticket .form input[name="code"] { font: 400 32px/1.2 var(--display); letter-spacing: .32em; font-variant-numeric: tabular-nums; }
.sh-ticket .btn, .sh-refund .btn { height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border: 0; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font: 700 16px/1 var(--sans); cursor: pointer; }
.sh-ticket .btn.small, .sh-refund .btn.small, .sh-plans .btn.small { height: 40px; padding: 0 16px; background: var(--ink-14); color: var(--ink); font-size: 14px; }
.sh-ticket .quiet { font-size: 13px; font-weight: 600; color: var(--faint); }
/* the plan, for a shop that has its ad */
.sh-plans { display: grid; gap: 16px; padding: 16px; }
.sh-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sh-tier { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 16px; }
.sh-tier.best { box-shadow: inset 0 0 0 2px var(--ink-62); }
.sh-tier-t { display: grid; gap: 4px; justify-items: start; } .sh-tier-t b { font: 400 20px/1.1 var(--display); } .sh-tier-t > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh-mark { padding: 4px 8px; border-radius: 9999px; background: var(--ink-14); font-size: 12px; font-weight: 700; }
.sh-tier-p { display: flex; align-items: baseline; gap: 8px; } .sh-tier-p b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .sh-tier-p span { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-meter { display: block; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--well); } .sh-meter i { display: block; height: 100%; border-radius: 9999px; background: var(--green); }
.sh-fold > summary::-webkit-details-marker, .sh-below details.revise > summary::-webkit-details-marker { display: none; }
.sh-fold > summary, .sh-below details.revise > summary { list-style: none; padding: 12px 4px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.sh-fold { display: grid; gap: 8px; } .sh-below details.revise > p { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--faint); }
.sh-about { padding: 0 4px; }
.sh-note { font-size: 13px; font-weight: 600; color: var(--muted); }
.sh-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 24px 16px 32px; font-size: 13px; font-weight: 600; color: var(--faint); }
.sh-gone { max-width: 480px; margin: 48px auto 0; }
.sh-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; } .sh-links form { margin: 0; }
.sh-link { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: underline; text-decoration-color: var(--ink-14); text-underline-offset: 3px; cursor: pointer; }
/* a phone: the one control at the foot of the screen, as the reference's Buy */
.sh-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px 16px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--card); box-shadow: inset 0 1px 0 var(--line), 0 -12px 32px -16px #000; }
@media (max-width: 999px) { .sh-ad-side { display: none; } }
@media (max-width: 359px) { .sh-help { display: none; } }
@media (min-width: 1000px) {
  .sh-page { grid-template-columns: minmax(0, 720px) 400px; gap: 12px 32px; align-items: stretch; justify-content: center; max-width: none; padding: 24px 24px 48px; }
  .sh-col, .sh-act { display: flex; flex-direction: column; gap: 12px; }
  .sh-col > :last-child, .sh-act > :last-child { flex: 1 0 auto; }
  .sh-below { grid-column: 1 / -1; }
  .sh-head { padding: 24px; }
  .sh-name h1 { font-size: 28px; }
  .sh-offer-head h2 { font-size: 40px; }
  .sh-offer { font-size: 18px; }
  .sh-paycard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 24px; }
  .sh-pay-go { grid-template-columns: auto 280px; }
  .sh-id { flex-wrap: nowrap; align-items: flex-start; } .sh-id > .sh-state { flex-basis: auto; max-width: 320px; margin-left: auto; align-self: flex-start; }
  .sh-stat { padding: 12px 16px; } .sh-stat dd { font-size: 20px; }
  .sh-ad { grid-template-columns: 270px minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 24px; }
  .sh-film { width: 270px; height: 480px; aspect-ratio: auto; }
  .sh-ad-t .sh-stats { grid-template-columns: minmax(0, 1fr); }

  .sh-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-bar { display: none; }
  .sh-page:not(:has(.sh-bar)) { padding-bottom: 48px; }
}
@media (max-width: 999px) { .sh-page:not(:has(.sh-bar)) { padding-bottom: 48px; } }
@media (prefers-reduced-motion: reduce) { .sh-spin { animation-duration: 3s; } }

/* ── Earnings (pages/money.ts, mo2-): a public trading profile's skeleton: two cards side by side (who and their totals |
   one big number over its line), then every earning as a row with its still, why, its state and its amount ─────── */
.mo2 { max-width: 1200px; margin: 0 auto; display: grid; gap: 12px; }
.mo2-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.mo2-who { display: grid; gap: 16px; align-content: start; }
.mo2-me { display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: var(--r-well); transition: background-color .15s var(--out); }
.mo2-me:hover { background: var(--raised); } .mo2-me:hover .bx-mini { background: var(--ink); color: var(--on-ink); }
.mo2-pack { width: 48px; height: 68px; flex: none; background: center / contain no-repeat; }
.mo2-me-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mo2-me-t b { font: 400 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.mo2-me-t span { font-size: 13px; font-weight: 600; color: var(--muted); }
.mo2-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.mo2-three > div { display: grid; gap: 4px; } .mo2-three b { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; } .mo2-three span { font-size: 12px; font-weight: 600; color: var(--muted); }
.mo2 .num.zero { color: var(--faint); } .mo2 .num.up { color: var(--green-text); }
/* the totals under the three: each label over its number, two across (never a label and its value a gulf apart) */
.mo2-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0 8px; }
.mo2-dl > div { display: grid; gap: 4px; } .mo2-dl dt { font-size: 12px; font-weight: 600; color: var(--muted); } .mo2-dl dd { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; }
.mo2-dl dt a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .mo2-dl dt a:hover { color: var(--ink); }
.mo2-next { display: grid; gap: 8px; padding: 12px 16px; border-radius: var(--r-well); background: var(--well); transition: background-color .15s var(--out); } .mo2-next:hover { background: var(--raised); }
.mo2-next-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .mo2-next-t b { font-size: 16px; } .mo2-next-t span { font-size: 13px; font-weight: 600; color: var(--muted); }
.mo2-num { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.mo2-num-t { display: grid; gap: 4px; padding: 0 8px; }
.mo2-big { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.02em; } .mo2-big.zero { color: var(--muted); }
.mo2-line { display: block; min-height: 120px; color: var(--green); } .mo2-line svg { display: block; width: 100%; height: 100%; }
.mo2-axis { display: flex; justify-content: space-between; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--faint); }
.mo2-art { display: block; min-height: 160px; border-radius: var(--r-well); background: #03100c url(/scenes/earn.webp) 86% 28% / 150% auto no-repeat; }
.mo2-go { width: 100%; } .mo2-go .ico { width: 18px; height: 18px; }
.mo2-rows, .mo2-pay { display: grid; gap: 12px; }
.mo2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 220px 140px; gap: 12px; padding: 0 16px 0 72px; font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.mo2-cols > :last-child { text-align: right; }
.mo2-list { display: grid; gap: 4px; }
.mo2-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 220px 140px; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-well); transition: background-color .15s var(--out); }
.mo2-row:hover { background: var(--raised); }
.mo2-row .bx-th { width: 44px; height: 44px; border-radius: 12px; } .mo2-i { background: var(--ink-8); color: var(--muted); } .mo2-i > .i { position: static; } .mo2-i .ico { width: 18px; height: 18px; }
.mo2-row .bx-row-t a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mo2-st { justify-self: start; text-transform: none; font-weight: 700; }
.mo2-row-e { display: grid; justify-items: end; gap: 4px; } .mo2-row-e .form { margin: 0; }
.mo2-amt { font-size: 16px; white-space: nowrap; } .mo2-amt.up { color: var(--green-text); } .mo2-amt.down { color: var(--red-text); } .mo2-amt.held { color: var(--ink-82); }
.mo2-more summary { cursor: pointer; list-style: none; padding: 8px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); } .mo2-more summary::-webkit-details-marker { display: none; } .mo2-more[open] summary { display: none; }
.mo2-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.mo2-stop { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-well); background: var(--well); min-width: 0; }
.mo2-stop.next { background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink-14); }
.mo2-dot { width: 40px; height: 40px; flex: none; border-radius: 9999px; display: grid; place-items: center; background: var(--ink-8); color: var(--muted); } .mo2-dot .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.mo2-stop.done .mo2-dot { background: var(--green-dark); color: var(--green); } .mo2-stop.next .mo2-dot { background: var(--ink); color: var(--on-ink); }
.mo2-stop:not(.done):not(.next) .bx-row-t b { color: var(--muted); } .mo2-stop .bx-row-t span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mo2 .bx-head { justify-content: flex-start; }
.mo2-to { display: grid; gap: 8px; padding: 0 8px; font-size: 15px; font-weight: 600; }
.mo2-payform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 560px; } .mo2-field input { font-size: 17px; } .bx-ghost.mo2-save { height: auto; padding: 0 24px; }
.mo2-change summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .mo2-change summary::-webkit-details-marker { display: none; }
.mo2-change[open] summary { margin-bottom: 8px; }
.mo2-pay > .bx-fine, .mo2-sold-line { padding: 0 8px; }
/* whether a sale counts in the balance: its own line, so the buyer and date never cut it off */
.mo2-row .bx-row-t .mo2-in { white-space: normal; }
@media (max-width: 899px) {
  .mo2-top { grid-template-columns: minmax(0, 1fr); } .mo2-num { order: -1; } .mo2-big { font-size: 34px; line-height: 40px; }
  .mo2-cols { display: none; }
  .mo2-row { grid-template-columns: 44px minmax(0, 1fr) auto; } .mo2-st { grid-column: 2; grid-row: 2; } .mo2-row-e { grid-row: 1; grid-column: 3; } .mo2-row .bx-th { grid-row: 1 / 3; }
  .mo2-road { grid-template-columns: minmax(0, 1fr); } .mo2-payform { grid-template-columns: minmax(0, 1fr); } .bx-ghost.mo2-save { height: 52px; }
}

/* A shop's picture (the kit's part: pages give the element showing a shop's own picture the class bx-pic, with the
   picture as its inline background-image; public/shop-pic.js measures it). Whole, over a blur of itself darkened, until
   it is measured; a picture at or near its box's shape then fills the box edge to edge. A crop never cuts through a
   shop's name. The blur is ::before, the sharp picture ::after (above the blur), the element's own children above both. */
:where(.bx-pic) { position: relative; }
.bx-pic { overflow: hidden; isolation: isolate; background-size: 0 0 !important; background-repeat: no-repeat !important; } /* the picture itself is drawn only by ::after */
.bx-pic::before, .bx-pic::after { content: ""; position: absolute; background-image: inherit; background-position: center; background-repeat: no-repeat; pointer-events: none; }
.bx-pic::before { inset: -32px; z-index: -1; background-size: cover; filter: blur(24px) brightness(.45) saturate(1.3); }
.bx-pic::after { inset: 0; z-index: 0; background-size: contain; }
.bx-pic > * { z-index: 1; }
.bx-pic[data-pic="fill"]::before { display: none; }
.bx-pic[data-pic="fill"]::after { background-size: cover; }

/* ── the shop's ad page, from the lab's experiment 01 (pages/shop-land.ts; research/v4/ux-lab/01-shop-lands) ──────────
   On a phone the ad is the whole first screen and the offer rides on it; on a computer the ad stands as a phone on the
   door's tiled wall with the offer beside it. Below: what you get in pictures, the deal and the plans as rows. */
.bx-app.bx-out:has(.bx-ln) { background: #0b0a09; }
/* the page draws its own clear top over the film (the kit's bar is frosted) */
.bx-out:has(.bx-ln) .bx-top { display: none; }
.bx-ln-top { position: absolute; z-index: 7; inset: 12px 0 auto 0; height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-out:has(.bx-ln) .bx-main { padding: 0; }
/* the icon sprite takes no line above the film (the film is the screen's top edge) */
body:has(.bx-ln) > .sprite { position: absolute; width: 0; height: 0; }
.bx-ln { isolation: isolate; }
.bx-ln-for { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 9999px; background: rgb(12 11 10 / .62); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; white-space: nowrap; }
.bx-ln-for i { width: 28px; height: 28px; border-radius: 9999px; background: var(--well) 50% 22% / 260% no-repeat; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }

/* the film: the page's first screen on a phone */
.bx-ln-film { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: #000; }
.bx-ln-poster, .bx-ln-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bx-ln-poster { animation: bx-ln-drift 18s ease-in-out infinite alternate; }
.bx-ln-film.on .bx-ln-poster { animation: none; }
@keyframes bx-ln-drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.08) translateY(-1.5%); } }
.bx-ln-video { cursor: pointer; }
/* the still until the film can play (public/land.js marks the film; with no script the film shows as it loads) */
.bx-ln-film.js:not(.on) .bx-ln-video { opacity: 0; }
.bx-ln-film::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(8 7 6 / .78), transparent); }
/* dark enough under the words for a white still too (a preview still being made is a light drawing) */
.bx-ln-film::after { content: ""; position: absolute; inset: auto 0 0 0; height: 68%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(8 7 6 / .84) 28%, rgb(8 7 6 / .97) 54%, #0b0a09); }
.bx-ln-chip { position: absolute; z-index: 2; left: 16px; top: 80px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 9999px; background: rgb(12 11 10 / .62); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
.bx-ln-chip .ico { width: 16px; height: 16px; }
.bx-ln-wait { cursor: default; }
.bx-ln-spin { width: 14px; height: 14px; border-radius: 9999px; border: 2px solid var(--ink-14); border-top-color: var(--ink); animation: bx-ln-turn 1s linear infinite; }
@keyframes bx-ln-turn { to { transform: rotate(1turn); } }
.bx-ln-bar { position: absolute; z-index: 8; left: 12px; right: 12px; top: 8px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .22); overflow: hidden; pointer-events: none; }
.bx-ln-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.bx-ln-seal { position: absolute; z-index: 3; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 9999px; background: var(--green); color: var(--green-ink); font-size: 15px; font-weight: 800; box-shadow: 0 12px 28px -10px rgb(111 224 138 / .7); }
.bx-ln-seal .ico { width: 18px; height: 18px; stroke-width: 3; }

/* the offer, riding on the film's foot on a phone */
.bx-ln-offer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 16px 24px; display: grid; gap: 16px; animation: bx-ln-rise .7s var(--out) both; }
@keyframes bx-ln-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bx-ln-line { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-82); }
.bx-ln-line b { color: var(--green); }
.bx-ln-line.bad { color: var(--red-text); } .bx-ln-line.bad .bx-ln-dot { background: var(--red); box-shadow: none; }
.bx-ln-dot { width: 8px; height: 8px; flex: none; border-radius: 9999px; background: var(--green); box-shadow: 0 0 0 4px rgb(111 224 138 / .18); }
.bx-ln-h { font: 400 40px/1 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.bx-ln-h em { display: block; overflow: clip; overflow-clip-margin: 8px; font-style: normal; background: var(--warm-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-ln-sub { font-size: 16px; line-height: 1.45; color: var(--ink-82); max-width: 34ch; text-wrap: pretty; }
.bx-ln-join { display: grid; gap: 8px; margin: 0; }
.bx-ln-field { display: grid; gap: 2px; padding: 8px 16px; border-radius: var(--r-well); background: rgb(22 21 20 / .86); box-shadow: inset 0 0 0 1px var(--ink-14); }
.bx-ln-field span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bx-ln-field input { width: 100%; height: 24px; padding: 0; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 600; }
.bx-ln-field:focus-within { box-shadow: inset 0 0 0 2px var(--ink-62); }
.bx-ln-go, .bx-ln-ghost { height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9999px; font: 800 17px/1 var(--sans); cursor: pointer; transition: transform .12s var(--out); }
.bx-ln-go { background: var(--ink); color: var(--on-ink); box-shadow: 0 16px 32px -16px rgb(255 160 90 / .55); }
.bx-ln-ghost { background: var(--ink-14); color: var(--ink); }
.bx-ln-go:active, .bx-ln-ghost:active { transform: scale(.98); }
.bx-ln-go .ico, .bx-ln-ghost .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.bx-ln-easy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; font-weight: 700; color: var(--ink-82); }
.bx-ln-easy li { display: inline-flex; align-items: center; gap: 8px; }
.bx-ln-easy b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 9999px; background: var(--ink-14); font-size: 12px; font-weight: 800; }
.bx-ln-meter { display: none; }
.bx-ln-fine { font-size: 12px; line-height: 1.5; color: var(--muted); }
.bx-ln-note { font-size: 14px; line-height: 1.45; color: var(--ink-82); } .bx-ln-note b { color: var(--ink); }

/* under the hero */
.bx-ln-more { display: grid; gap: 48px; max-width: 1200px; margin: 0 auto; padding: 48px 16px 48px; }
.bx-ln-sec { display: grid; gap: 16px; align-content: start; }
.bx-ln-h2 { font: 400 24px/1.1 var(--display); letter-spacing: -.02em; }
.bx-ln-steps { display: grid; gap: 12px; }
/* an order for something that isn't an ad (pages/order-view.ts): its picture at its own shape, not in a phone */
.bx-ln-film.pic { height: auto; min-height: 0; aspect-ratio: 760 / 671; }
.bx-ln-film.pic .bx-ln-poster { animation: none; object-position: 50% 50%; }
.bx-ln-film.pic::after { height: 30%; }
.bx-mo .bx-ln-hero .bx-ln-film.pic { height: auto; min-height: 0; }
.bx-ln-film.pic.off .bx-ln-poster { filter: grayscale(.85) brightness(.55); }
.bx-mo-foot { max-width: 1200px; margin: 0 auto; padding: 32px 16px 48px; }
@media (min-width: 900px) {
  .bx-mo .bx-ln-hero { grid-template-columns: 560px minmax(0, 520px); gap: 80px; }
  .bx-mo .bx-ln-film.pic { width: 560px; height: auto; border-radius: 36px; box-shadow: 0 0 0 1px rgb(255 214 180 / 22%), 0 60px 120px -30px #000, 0 0 140px -20px var(--warm-glow); }
  .bx-mo .bx-ln-film.pic::after { display: none; }
  .bx-mo-foot { padding: 0 40px 48px; }
}
/* a big window: the picture and the gap grow with it, so the moment isn't a small island on the ground */
@media (min-width: 1800px) and (min-height: 960px) {
  .bx-mo .bx-ln-hero { grid-template-columns: 720px minmax(0, 560px); gap: 112px; }
  .bx-mo .bx-ln-film.pic { width: 720px; border-radius: 44px; }
  .bx-bo-head.none .bx-bo-none { max-width: 640px; }
}
/* Bought (pages/bought.ts), from the lab's experiment 06: what waits on you, what you hold as pictures, the receipts */
.bx-bo { display: grid; gap: 32px; max-width: 1480px; margin: 0 auto; }
.bx-bo-sub { margin: 12px 0 0; color: var(--ink-82); font-size: 17px; line-height: 1.5; max-width: 44ch; }
.bx-bo-h2 { font: 400 20px/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 16px; }
.bx-bo-head { display: grid; gap: 24px; }
.bx-bo-wait { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-card); background: linear-gradient(180deg, rgb(255 178 122 / .14), rgb(255 178 122 / .03)), var(--card); box-shadow: inset 0 0 0 1px rgb(255 178 122 / .4), 0 24px 48px -24px var(--warm-glow); }
.bx-bo-wait img { width: 72px; height: 72px; border-radius: var(--r-well); object-fit: cover; }
.bx-bo-wait b { display: block; font: 400 20px/1.15 var(--display); letter-spacing: -.02em; } .bx-bo-wait span { display: block; margin-top: 4px; color: var(--ink-82); font-size: 15px; }
.bx-bo-pay { grid-column: 1 / -1; height: 48px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: linear-gradient(180deg, var(--warm), var(--warm-2)); color: var(--on-ink); font-size: 15px; font-weight: 800; }
.bx-bo-pay.first { display: inline-flex; margin-top: 24px; }
.bx-bo-none { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); filter: grayscale(.85) brightness(.7); box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 900px) { .bx-bo-none { justify-self: end; } }
.bx-bo-have { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bx-bo-it { display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-card); overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.bx-bo-pic { position: relative; aspect-ratio: 4 / 5; background: var(--well) 50% 30% / cover no-repeat; } .bx-bo-pic.scene { background-position: 60% 40%; }
.bx-bo-pic::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, transparent, var(--card)); }
.bx-bo-seal { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 9999px; background: var(--green); color: var(--green-ink); font-size: 12px; font-weight: 800; }
.bx-bo-say { position: relative; margin-top: -24px; padding: 0 16px 12px; }
.bx-bo-say small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; } .bx-bo-say b { display: block; margin-top: 4px; font: 400 20px/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: 2px; }
.bx-bo-say p { margin: 4px 0 0; color: var(--ink-62); font-size: 13px; line-height: 1.5; }
.bx-bo-go { margin: 0 12px 12px; height: 44px; display: grid; place-items: center; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 800; }
.bx-bo-rc { border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bx-bo-r { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; } .bx-bo-r + .bx-bo-r { box-shadow: inset 0 1px 0 var(--line); }
.bx-bo-r strong { font: 400 20px/1 var(--display); color: var(--warm); } .bx-bo-r b { display: block; font-size: 15px; font-weight: 800; } .bx-bo-r span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bx-bo-r.back strong { color: var(--muted); font-size: 15px; }
.bx-bo-acts { display: grid; gap: 8px; justify-items: end; } .bx-bo-acts .form { margin: 0; }
.bx-bo-acts a, .bx-bo-acts .btn { height: auto; padding: 0; border: 0; background: none; color: var(--ink-82); font: 700 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bx-bo-fine { margin: 12px 0 0; }
.bx-bo-past summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.bx-bo-decide { display: grid; gap: 16px; } .bx-bo-ad { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; } .bx-bo-ad .player { width: 120px; border-radius: var(--r-well); }
.bx-bo-ad b { display: block; font-size: 16px; font-weight: 800; } .bx-bo-yn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .bx-bo-yn .form { margin: 0; }
@media (min-width: 900px) {
  .bx-bo { gap: 48px; }
  .bx-bo-head.none { align-content: center; align-items: start; gap: 48px; min-height: calc(100vh - 240px); } .bx-bo-head.none .bx-bo-none { max-width: 520px; }
  .bx-bo-head { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end; }
  .bx-bo-wait { grid-template-columns: auto minmax(0, 1fr) auto; } .bx-bo-wait .bx-bo-pay { grid-column: auto; }
  .bx-bo-have { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .bx-bo-say { padding: 0 20px 16px; } .bx-bo-say b { font-size: 24px; } .bx-bo-go { margin: 0 16px 16px; height: 48px; }
  .bx-bo-r { grid-template-columns: 96px minmax(0, 1fr) auto; padding: 16px 24px; } .bx-bo-r strong { font-size: 24px; } .bx-bo-r.back strong { font-size: 15px; }
  .bx-bo-acts { grid-auto-flow: column; gap: 16px; align-items: center; }
}
@media (min-width: 900px) and (max-width: 1279px) { .bx-bo-have { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a shop's email and code steps (pages/signin.ts), beside its ad */
.bx-ln-code { letter-spacing: .3em; }
.bx-ln-links { display: flex; flex-wrap: wrap; gap: 8px 24px; } .bx-ln-links form { margin: 0; }
.bx-ln-links a, .bx-ln-links button { padding: 0; border: 0; background: none; color: var(--muted); font: 700 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* what should we make for you next: four pictures, one tap */
.bx-ln-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bx-ln-opts form { margin: 0; display: grid; }
.bx-ln-opt { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 12px 12px 16px; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; cursor: pointer; color: var(--ink); transition: box-shadow .15s var(--out), transform .12s var(--out); }
.bx-ln-opt:hover { box-shadow: inset 0 0 0 1px var(--ink-14); } .bx-ln-opt:active { transform: scale(.98); }
.bx-ln-opt.on { box-shadow: inset 0 0 0 2px var(--green); }
.bx-ln-opt b { font-size: 16px; font-weight: 800; } .bx-ln-opt > span:not(.bx-ln-opt-pic) { font-size: 13px; color: var(--muted); }
.bx-ln-opt-pic { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-well); margin-bottom: 8px; overflow: hidden; background: var(--well) var(--ad, url(/scenes/make-s.webp)) 50% 45% / cover; }
.bx-ln-opt-pic.openings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: none; }
.bx-ln-opt-pic.openings i { border-radius: 12px; background: var(--well) var(--ad, url(/scenes/make-s.webp)) 50% 30% / cover; }
.bx-ln-opt-pic.openings i:nth-child(2) { background-position: 30% 60%; } .bx-ln-opt-pic.openings i:nth-child(3) { background-position: 70% 10%; }
.bx-ln-opt-pic.drama { background-size: 220%; background-position: 50% 70%; filter: grayscale(.6) brightness(.8); }
.bx-ln-opt-pic.other { display: grid; place-items: center; background: var(--well); font: 400 40px/1 var(--display); color: var(--ink-62); }
.bx-ln-opt.other { cursor: default; } .bx-ln-opt.other label { display: grid; gap: 4px; width: 100%; }
.bx-ln-opt.other input[type="text"] { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.bx-ln-opt.other button { justify-self: start; height: 40px; padding: 0 20px; margin-top: 4px; border: 0; border-radius: 9999px; background: var(--ink-14); color: var(--ink); font-size: 15px; font-weight: 800; cursor: pointer; }
/* the pictures grow so every card in a row ends full (no empty lower third beside the one with a field) */
.bx-ln-opt { grid-template-rows: 1fr; align-content: stretch; } .bx-ln-opt-pic { aspect-ratio: auto; min-height: 96px; height: 100%; }
@media (min-width: 900px) { .bx-ln-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bx-ln-step, .bx-ln-paid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #ffffff08; }
.bx-ln-shot { position: relative; width: 96px; aspect-ratio: 9 / 16; border-radius: var(--r-well); overflow: hidden; background: #000 50% 30% / cover no-repeat; box-shadow: 0 12px 24px -12px #000; }
.bx-ln-shot.card::after { content: "cracked"; position: absolute; inset: auto 0 0 0; height: 26%; display: grid; place-items: center; background: #0b0a09; font: 400 13px/1 var(--display); letter-spacing: -.02em; box-shadow: inset 0 1px 0 var(--line); }
.bx-ln-shot.next { display: grid; place-items: center; background-color: var(--well); }
.bx-ln-shot.next i { position: absolute; inset: 0; background: 50% 30% / cover no-repeat; opacity: .16; filter: blur(6px) saturate(.6); }
.bx-ln-shot.next b { position: relative; font: 400 32px/1 var(--display); color: var(--ink-62); }
.bx-ln-shot.none { display: grid; place-items: center; background: var(--well); } .bx-ln-shot.none b { font: 400 15px/1 var(--display); color: var(--ink-62); } .bx-ln-shot.none.card::after { content: none; }
.bx-ln-shot.clean { box-shadow: 0 0 0 2px var(--warm), 0 12px 32px -8px var(--warm-glow); }
.bx-ln-step small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bx-ln-step b { display: block; margin-top: 4px; font-size: 18px; line-height: 1.25; font-weight: 800; }
.bx-ln-step p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-62); }
.bx-ln-price { color: var(--warm); }
.bx-ln-rows { display: grid; margin: 0; padding: 0; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bx-ln-rows li { list-style: none; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px 20px; font-size: 15px; line-height: 1.4; color: var(--ink-82); }
.bx-ln-rows > * + * { box-shadow: inset 0 1px 0 var(--line); }
.bx-ln-rows li .ico { color: var(--muted); }
.bx-ln-plan { margin: 0; }
.bx-ln-plan, .bx-ln-plan > button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 16px 20px; }
.bx-ln-plan > .i, .bx-ln-plan > button > .i { color: var(--muted); } a.bx-ln-plan:hover { background: var(--ink-6); }
.bx-ln-plan:has(> button) { padding: 0; } .bx-ln-plan > button { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; } .bx-ln-plan > button:hover { background: var(--ink-6); }
.bx-ln-plan-t b { display: block; font-size: 17px; font-weight: 800; } .bx-ln-plan-t span { display: block; font-size: 13px; color: var(--muted); }
.bx-ln-plan strong { font: 400 22px/1 var(--display); } .bx-ln-plan strong i { font: 600 12px/1 var(--sans); font-style: normal; color: var(--muted); }
.bx-ln-paid { background: linear-gradient(180deg, rgb(255 178 122 / .1), rgb(255 178 122 / .02)), var(--card); box-shadow: inset 0 0 0 1px rgb(255 178 122 / .38), 0 24px 48px -28px var(--warm-glow); }
.bx-ln-paid h3 { margin: 0; font: 400 22px/1.1 var(--display); letter-spacing: -.02em; }
.bx-ln-paid p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-82); }
.bx-ln-paid form { margin: 0; }
.bx-ln-buy { margin-top: 12px; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 0; border-radius: 9999px; background: var(--warm); color: var(--warm-ink); font: 800 15px/1 var(--sans); cursor: pointer; }
/* the proof, inside the paid card where its button would be */
.bx-ln-open { grid-column: 1 / -1; } .bx-ln-open > summary { list-style: none; } .bx-ln-open > summary::-webkit-details-marker { display: none; }
.bx-ln-open[open] > summary { display: none; }
.bx-ln-proof { padding: 12px 4px 4px; box-shadow: inset 0 1px 0 var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-82); }
.bx-ln-proof > div { display: grid; gap: 12px; }
.bx-ln-proof p .i { display: inline-flex; vertical-align: -4px; margin-right: 8px; } .bx-ln-proof .ico { color: var(--muted); } .bx-ln-proof b { color: var(--ink); } .bx-ln-proof a { color: var(--warm); text-decoration: underline; text-underline-offset: 2px; }
.bx-ln-proof .form { display: grid; gap: 8px; margin: 0; }
.bx-ln-proof .form label { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-well); background: var(--ink-8); font-size: 12px; font-weight: 700; color: var(--muted); }
.bx-ln-proof .form input:not([type=hidden]) { width: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 17px; font-weight: 600; color: var(--ink); }
.bx-ln-proof .btn { height: 48px; border: 0; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font: 800 15px/1 var(--sans); cursor: pointer; }
.bx-ln-proof .quiet { font-size: 13px; color: var(--muted); }
.bx-ln-said { padding: 8px 12px; border-radius: 12px; background: var(--red-dark); color: var(--red-text); font-size: 14px; font-weight: 700; }
.bx-ln-foot { display: grid; gap: 16px; font-size: 13px; color: var(--muted); }
.bx-ln-says, .bx-ln-legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.bx-ln-says a { font-weight: 700; color: var(--ink-82); } .bx-ln-foot a:hover { color: var(--ink); }

@media (max-width: 899px) {
  .bx-ln-more.joined { padding-top: 32px; }
  /* a banded preview: the film at the screen's top (the band whole near its foot), the offer under it */
  .bx-ln-hero.split .bx-ln-film { height: 46svh; min-height: 320px; }
  .bx-ln-hero.split .bx-ln-poster, .bx-ln-hero.split .bx-ln-video { object-position: 50% 21%; }
  .bx-ln-hero.split .bx-ln-film::after { height: 20%; background: linear-gradient(180deg, transparent, #0b0a09); }
  .bx-ln-hero.split { background: #0b0a09; }
  .bx-ln-hero.split .bx-ln-offer { position: static; padding: 16px 16px 24px; animation: none; }
  /* joined: the film is most of the screen, the offer under it (the seal stays on the film) */
  .bx-ln-hero.joined .bx-ln-film { height: 62svh; min-height: 480px; } .bx-ln-hero.joined .bx-ln-film::after { height: 40%; }
  .bx-ln-hero.joined .bx-ln-offer { position: static; padding: 24px 16px 0; animation: none; }
  /* the sound pill at the film's foot when the words sit under the film (the ad's own captions run across its top) */
  .bx-ln-hero.joined .bx-ln-sound, .bx-ln-hero.split .bx-ln-sound { top: auto; left: auto; right: 16px; bottom: 24px; }
  .bx-ln-hero.joined.split .bx-ln-film { height: 46svh; min-height: 320px; } .bx-ln-hero.joined.split .bx-ln-offer { padding-top: 16px; }
  .bx-ln-hero.joined { background: #0b0a09; }
}
/* a computer: the same ad as a phone standing on the wall, the offer beside it */
@media (min-width: 900px) {
  .bx-ln-top { top: 0; height: 88px; padding: 0 40px; }
  .bx-ln-hero { min-height: 100vh; display: grid; grid-template-columns: 420px minmax(0, 560px); gap: 96px; justify-content: center; align-content: center; align-items: start; padding: 88px 40px 48px; }
  .bx-ln-film { width: 420px; height: 746px; min-height: 0; border-radius: 52px; box-shadow: 0 0 0 10px #0e0d0c, 0 0 0 11px rgb(255 214 180 / .22), 0 60px 120px -30px #000, 0 0 140px -20px var(--warm-glow); }
  .bx-ln-film::before { height: 120px; } .bx-ln-film::after { height: 22%; background: linear-gradient(180deg, transparent, rgb(8 7 6 / .7)); }
  .bx-ln-chip { top: auto; bottom: 44px; left: 24px; } .bx-ln-bar { z-index: 2; top: auto; bottom: 24px; left: 24px; right: 24px; }
  .bx-ln-seal { left: 24px; bottom: 60px; } .bx-ln-film:has(.bx-ln-seal) .bx-ln-chip { left: auto; right: 24px; }
  .bx-ln-offer { position: static; padding: 0; gap: 24px; animation: none; }
  .bx-ln-h { font-size: 64px; }
  .bx-ln-sub { font-size: 20px; max-width: 30ch; }
  .bx-ln-join { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; border-radius: 9999px; background: rgb(22 21 20 / .86); box-shadow: inset 0 0 0 1px var(--ink-14), 0 24px 48px -24px #000; }
  .bx-ln-join:not(:has(.bx-ln-field)) { grid-template-columns: auto; justify-content: start; background: none; box-shadow: none; padding: 0; }
  .bx-ln-field { padding: 4px 16px 4px 20px; align-content: center; background: none; box-shadow: none; } .bx-ln-field:focus-within { box-shadow: none; }
  .bx-ln-go, .bx-ln-ghost { padding: 0 32px; justify-self: start; min-width: 320px; }
  .bx-ln-join .bx-ln-go { min-width: 0; }
  .bx-ln-meter { display: grid; grid-template-columns: repeat(100, 3px); gap: 2px; margin-top: -12px; }
  .bx-ln-meter i { height: 12px; border-radius: 2px; background: var(--green); opacity: .78; } .bx-ln-meter i.off { background: var(--ink-14); opacity: 1; }
  .bx-ln-line { order: -1; }
  .bx-ln-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; padding: 24px 40px 48px; align-items: stretch; }
  .bx-ln-sec.wide, .bx-ln-foot { grid-column: 1 / -1; }
  .bx-ln-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .bx-ln-step, .bx-ln-paid { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 16px; }
  .bx-ln-shot { width: 120px; }
  .bx-ln-rows li, .bx-ln-plan:not(:has(button)), .bx-ln-plan > button { min-height: 76px; }
  /* under a joined shop's ad: the one thing to buy, then the plans, each across the block (their lengths vary with the rows) */
  .bx-ln-more.joined { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
  /* the warm button under the words, the picture beside both */
  .bx-ln-paid:has(.bx-ln-open) { grid-template-rows: auto minmax(0, 1fr); row-gap: 12px; align-items: start; }
  .bx-ln-paid:has(.bx-ln-open) > .bx-ln-shot { grid-row: 1 / span 2; } .bx-ln-open { grid-column: 2; }
  .bx-ln-paid:has(.bx-ln-open) > div { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bx-ln-poster, .bx-ln-offer, .bx-ln-spin { animation: none; } }

/* a joined shop's month: this month's ad as a picture, the next in words */

/* the shop's page after paying (experiment 01's third screen, paid.html): the receipt in the warm card under the clean
   file; back from Stripe before it has said, the same page waits honestly; a shop on the plan sees its plan as a row */
.bx-ln-rcpt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-card); background: linear-gradient(180deg, rgb(255 178 122 / .1), rgb(255 178 122 / .02)), var(--card); box-shadow: inset 0 0 0 1px rgb(255 178 122 / .38); }
.bx-ln-rcpt-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.bx-ln-rcpt-t b { font: 400 22px/1 var(--display); color: var(--warm); } .bx-ln-rcpt-t span { font-size: 14px; font-weight: 700; color: var(--ink-82); }
.bx-ln-rcpt > a { font-size: 13px; font-weight: 700; color: var(--ink-82); text-decoration: underline; text-underline-offset: 3px; }
.bx-ln-rcpt-r { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bx-ln-rcpt-r p { margin: 0; font-size: 13px; color: var(--muted); }
.bx-ln-rcpt-r .form { margin: 0; } .bx-ln-rcpt-r .btn { height: auto; padding: 0; border: 0; background: none; color: var(--muted); font: 600 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bx-ln-line.wait { color: var(--warm); } .bx-ln-line.wait .bx-ln-dot { background: var(--warm); box-shadow: 0 0 0 4px rgb(255 178 122 / .18); }
.bx-ln-state { font-size: 13px; font-weight: 800; color: var(--green-text); } .bx-ln-state.still { color: var(--muted); }
.bx-ln-plan-on .form { margin: 0; } .bx-ln-plan-on .btn { height: 32px; padding: 0 12px; border: 0; border-radius: 9999px; background: var(--ink-8); color: var(--ink); font: 700 13px/1 var(--sans); cursor: pointer; }
@media (min-width: 900px) { .bx-ln-rcpt, .bx-ln-hero.joined .bx-ln-go { max-width: 520px; } }

/* ── /free: where "link in bio" goes (pages/free.ts; research/v4/ux-lab/03-link-in-bio) ──────────────────────────────
   The offer in the shop page's words, the tagged shops as their ads (one big card, or a grid whose every card is the
   tap), one way on for a shop that isn't here yet. It reuses the shop page's bx-ln parts; its own carry bx-fr-. */
.bx-fr .bx-ln-top { position: static; }
.bx-fr-in { padding: 0 16px; color: var(--ink-82); }
.bx-fr-page { display: grid; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 8px 16px 32px; }
.bx-fr-say { display: grid; gap: 12px; }
.bx-fr .bx-ln-h { font-size: 36px; } .bx-fr .bx-ln-sub { font-size: 15px; max-width: 36ch; }
.bx-fr .bx-ln-meter { margin-top: 4px; }
/* no post out: the picture where the tagged shops will stand (the showcase's pick playing, or the shops scene) */
.bx-fr-pic { position: relative; margin: 0; display: grid; justify-items: center; }
.bx-fr-pic img { display: block; width: auto; height: 240px; max-width: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.bx-fr-pic.film video { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 50% 30%; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 214 180 / .3), 0 30px 60px -30px #000; }
.bx-fr-pic figcaption { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink-82); }
.bx-fr-page.none .bx-fr-say { gap: 8px; } .bx-fr-page.none { gap: 16px; }
.bx-fr-col { display: contents; } .bx-fr-page.none .bx-fr-pic { order: 1; } .bx-fr-page.none .bx-fr-ask { order: 2; }
@media (max-width: 899px) { .bx-fr .bx-home-fx { background: #0b0a09; } }
.bx-fr-k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bx-fr-find { display: grid; gap: 12px; }
.bx-fr-shops { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-fr-find.one .bx-fr-shops { grid-template-columns: minmax(0, 1fr); }
.bx-fr-shop { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 13; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 214 180 / .3), 0 30px 60px -30px #000; }
.bx-fr-find.one .bx-fr-shop { aspect-ratio: 4 / 5; border-radius: 28px; box-shadow: inset 0 0 0 1px rgb(255 214 180 / .3), 0 30px 60px -30px #000, 0 0 100px -30px var(--warm-glow); }
.bx-fr-shop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.bx-fr-shop::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, transparent, rgb(8 7 6 / .9) 70%); }
.bx-fr-t { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 12px; }
.bx-fr-t b { display: block; font: 400 18px/1.05 var(--display); letter-spacing: -.02em; }
.bx-fr-t small { display: block; margin-top: 4px; font: 700 13px/1.3 var(--sans); color: var(--ink-82); }
.bx-fr-find.one .bx-fr-t { left: 20px; right: 20px; bottom: 20px; } .bx-fr-find.one .bx-fr-t b { font-size: 30px; }
.bx-fr-t .bx-ln-go { width: 100%; }
.bx-fr-ask { display: grid; gap: 12px; padding: 20px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 #ffffff08; }
.bx-fr-ask h2 { margin: 0; font: 400 22px/1.1 var(--display); letter-spacing: -.02em; }
.bx-fr-ask p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-62); } .bx-fr-ask p a, .bx-fr-ask p b { color: var(--ink); font-weight: 700; }
.bx-fr-ask .bx-ln-go, .bx-fr-ask .bx-ln-ghost { justify-self: stretch; }
.bx-fr-form { display: grid; gap: 12px; margin: 0; }
.bx-fr .bx-ln-field { background: var(--well); }
.bx-fr-back { justify-self: start; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bx-fr-ask .bx-fr-ok { color: var(--green-text); font-weight: 700; }
.bx-fr-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; max-width: 1280px; margin: 0 auto; padding: 0 16px 48px; font-size: 13px; color: var(--muted); }
@media (min-width: 900px) {
  .bx-fr .bx-ln-top { height: 88px; padding: 0 40px; }
  /* the offer and the ask at the left, the tagged shops beside both; with none yet, the offer beside the ask */
  .bx-fr-page { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "say find" "ask find"; grid-template-rows: auto 1fr; gap: 48px 96px; padding: 40px 40px 48px; align-items: start; }
  .bx-fr-say { grid-area: say; } .bx-fr-find { grid-area: find; } .bx-fr-ask { grid-area: ask; }
  .bx-fr-foot { padding: 0 40px 48px; justify-content: center; }
  /* no post out yet: the offer over the ask at the left, the picture beside both, in the middle of the wall */
  .bx-fr-page.none { grid-template-columns: minmax(0, 520px) minmax(0, 520px); grid-template-areas: none; grid-template-rows: auto; gap: 48px 96px; justify-content: center;
    min-height: calc(100vh - 88px); align-content: center; }
  /* inside the left column the offer and the ask simply stack (the page's named areas don't exist there, and naming them piled one on the other) */
  .bx-fr-col > .bx-fr-say, .bx-fr-col > .bx-fr-ask { grid-area: auto; }
  .bx-fr-page.none .bx-fr-say { gap: 20px; }
  .bx-fr-col { display: grid; gap: 48px; align-content: start; } .bx-fr-page.none .bx-fr-pic, .bx-fr-page.none .bx-fr-ask { order: 0; }
  .bx-fr-pic { align-self: start; }
  .bx-fr-pic img { width: 520px; height: auto; }
  .bx-fr-pic.film video { width: 420px; height: 746px; border-radius: 52px; box-shadow: 0 0 0 10px #0e0d0c, 0 0 0 11px rgb(255 214 180 / .22), 0 60px 120px -30px #000, 0 0 140px -20px var(--warm-glow); }
  .bx-fr-pic figcaption { margin-top: 24px; }
  .bx-fr .bx-ln-h { font-size: 64px; } .bx-fr .bx-ln-sub { font-size: 20px; }
  .bx-fr-say { gap: 20px; }
  .bx-fr-find { justify-items: center; }
  .bx-fr-shops { grid-template-columns: repeat(auto-fill, 240px); gap: 24px; justify-content: center; width: 100%; }
  .bx-fr-shop { width: 240px; aspect-ratio: 9 / 16; border-radius: 30px; box-shadow: 0 0 0 6px #0e0d0c, 0 0 0 7px rgb(255 214 180 / .2), 0 40px 80px -30px #000; }
  .bx-fr-shop .bx-fr-t { left: 16px; right: 16px; bottom: 20px; } .bx-fr-t b { font-size: 20px; }
  .bx-fr-find.one .bx-fr-shops { grid-template-columns: 420px; }
  .bx-fr-find.one .bx-fr-shop { width: 420px; aspect-ratio: 9 / 16; border-radius: 52px; box-shadow: 0 0 0 10px #0e0d0c, 0 0 0 11px rgb(255 214 180 / .22), 0 60px 120px -30px #000, 0 0 140px -20px var(--warm-glow); }
  .bx-fr-find.one .bx-fr-t { left: 32px; right: 32px; bottom: 36px; }
}