/* Cracked V4's one stylesheet. Its look is the approved game mocks (research/v4/game-mocks/v2/mocks.html, Nov 12:
   "I think this UX is pretty decent... make it look as good as possible on the app"): a night page with grain, drawn
   objects with lips (the road, 3D step buttons, the coin, shields and medals, Slot), Bricolage Grotesque for display and
   Geist for text. One orange thing per screen; money green; the game gold. One spacing scale (4 8 12 16 24 32 48), one
   centred capped column; phones get a tab bar, computers a top nav. Shop pages and Admin share the tokens and type,
   never the game pieces. */
@font-face { font-family: "Inter"; src: url("/fonts/Inter-100-900.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --c-void: #06070a; --c-bg: #0c0d12; --c-bg-up: #13151c;
  --c-surface: #16181f; --c-surface-2: #1d2029; --c-surface-3: #262a35; --c-edge: #2c303c;
  --c-road: #1a1d25; --c-road-edge: #252935; --c-road-dash: #3a3f4c;
  --c-ink: #f6f3ee; --c-ink-2: #c4c6ce; --c-muted: #8d919d; --c-faint: #5c616e;
  /* a colour for each kind of thing (the next step is orange, done and earned gold, money green; these are posting, shops, lessons) */
  --c-violet: #a78bfa; --c-violet-lo: #7c5cf0; --c-violet-deep: #4c2fb3; --c-blue: #4cc3ff; --c-blue-lo: #1f8fd6; --c-blue-deep: #0e4f7d;
  --c-teal: #3fe0b0; --c-teal-lo: #14a57d; --c-teal-deep: #0a5c45;
  --c-orange: #ff6a2b; --c-orange-hi: #ffa070; --c-orange-lo: #e0501a; --c-orange-deep: #9a3109;
  --c-green: #2fd27a; --c-green-hi: #8af7bd; --c-green-lo: #15995a; --c-green-deep: #0b3f28;
  --c-gold: #ffc53d; --c-gold-hi: #fff0b8; --c-gold-lo: #d9930b; --c-gold-deep: #7d4c00; --c-gold-ink: #6b4100;
  --c-lock: #2a2d37; --c-lock-hi: #363a46; --c-lock-lip: #15171d; --c-lock-ink: #5f6472;
  --c-slot-hi: #fffbf4; --c-slot: #ece4d8; --c-slot-lo: #b4a996; --c-visor: #0f1117; --c-visor-hi: #2a2e3a; --c-blush: #ff9c8c;
  --c-shadow: #000; --c-white: #fffaf4; --mask: #000; --c-focus: #ffd7c2;
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-chip: 999px; --r-card: 20px; --r-btn: 16px; --r-tile: 12px;
  --hair: color-mix(in oklab, var(--c-ink) 8%, transparent);
  --hair-2: color-mix(in oklab, var(--c-ink) 12%, transparent);
  --hi-line: inset 0 1px 0 color-mix(in oklab, var(--c-ink) 8%, transparent);
  --sh-card: inset 0 1px 0 color-mix(in oklab, var(--c-ink) 7%, transparent), 0 1px 0 color-mix(in oklab, var(--c-shadow) 70%, transparent), 0 2px 4px color-mix(in oklab, var(--c-shadow) 30%, transparent), 0 18px 36px -16px color-mix(in oklab, var(--c-shadow) 85%, transparent);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the names the pages already use, on the mocks' values */
  --c-page: var(--c-bg); --c-side: var(--c-void); --c-card: var(--c-surface); --c-line: var(--hair); --c-line-2: var(--hair-2); --c-tint: var(--c-surface-2);
  --c-body: var(--c-ink-2); --c-soft: var(--c-muted);
  --c-coral: var(--c-orange); --c-coral-h: var(--c-orange-hi); --c-coral-ink: var(--c-orange-hi); --c-coral-t: color-mix(in oklab, var(--c-orange) 14%, transparent); --c-coral-ring: color-mix(in oklab, var(--c-orange) 45%, transparent);
  --c-navy: var(--c-void); --c-ok: var(--c-green); --c-ok-t: color-mix(in oklab, var(--c-green) 13%, transparent);
  --c-wait: #f5b942; --c-wait-t: rgba(245,185,66,.13); --c-bad: #ff5a6e; --c-bad-t: rgba(255,90,110,.13); --c-gold-t: color-mix(in oklab, var(--c-gold) 13%, transparent);
  --c-btn: linear-gradient(180deg, var(--c-orange-hi) -40%, var(--c-orange) 45%, var(--c-orange-lo));
  --c-r: var(--r-card); --c-r-sm: var(--r-tile);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --c-font: var(--font-body);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(64px + var(--s3)); } /* a #link lands below the sticky .top, not under it */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; background-image: var(--noise); opacity: .035; mix-blend-mode: overlay; pointer-events: none; z-index: 80; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
img, video { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; }
.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; }
.num { font-variant-numeric: tabular-nums; }

/* the frame: the top bar (the mark, the chips, on a computer the places), a tab bar on a phone */
.app { min-height: 100vh; background: radial-gradient(120% 60% at 50% -10%, var(--c-bg-up), transparent 60%), var(--c-bg); }
.top { position: sticky; top: 0; z-index: 20; height: 64px; background: color-mix(in oklab, var(--c-bg) 82%, transparent); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 var(--hair); }
.top-in { height: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--s4); display: flex; align-items: center; gap: var(--s2); }
.mark { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.03em; color: var(--c-ink); text-decoration: none; flex: none; }
.mark svg { width: 26px; height: 26px; display: block; }
.grow { flex: 1 1 0; min-width: 0; }
.chips { display: flex; gap: var(--s2); flex: none; }
.chip { height: 32px; display: inline-flex; align-items: center; gap: var(--s2); padding: 0 12px 0 4px; border-radius: var(--r-chip); white-space: nowrap; flex: none; text-decoration: none;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 4px 10px -4px color-mix(in oklab, var(--c-shadow) 80%, transparent);
  font: 600 14px/1 var(--font-body); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.chip.plain { padding-left: 12px; }
.chip .ico { width: 16px; height: 16px; color: var(--c-ink-2); }
.chip .medal-mini { width: 22px; height: 22px; display: block; }
.chip.money { color: var(--c-green); }
.chip .unit { color: var(--c-muted); font-weight: 500; }
.chip.test { padding-left: 12px; color: var(--c-wait); }
.d-nav { display: none; gap: var(--s1); margin-left: var(--s4); }
.d-nav a { height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--c-muted); text-decoration: none; white-space: nowrap; }
.d-nav a .ico { width: 18px; height: 18px; }
.d-nav a[aria-current="page"] { color: var(--c-ink); background: color-mix(in oklab, var(--c-ink) 8%, transparent); box-shadow: var(--hi-line); }
.d-nav a:hover { color: var(--c-ink); }
.me { display: none; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: linear-gradient(180deg, color-mix(in oklab, var(--c-bg) 88%, transparent), var(--c-bg)); box-shadow: inset 0 1px 0 var(--hair); backdrop-filter: blur(12px); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--c-faint); text-decoration: none; }
.tab .pill2 { width: 52px; height: 30px; border-radius: var(--r-chip); display: grid; place-items: center; }
.tab .ico { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--c-ink); }
.tab[aria-current="page"] .pill2 { background: color-mix(in oklab, var(--c-ink) 9%, transparent); box-shadow: var(--hi-line); }
.main { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); display: grid; gap: var(--s5); align-content: start; }
.main.wide { max-width: 1080px; }
.signed .main { padding-bottom: 120px; }
.org-pick { max-width: 220px; min-width: 0; height: 32px; padding: 0 var(--s2); border: 0; border-radius: 999px; background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--hair); font: 600 13px var(--font-body); color: var(--c-ink); }
.avatar { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--c-coral-t); color: var(--c-coral-ink); font-weight: 800; font-size: 13px; letter-spacing: .02em; text-decoration: none; }
.avatar.sq { border-radius: 10px; width: 32px; height: 32px; }
@media (max-width: 419px) { .mark .word { display: none; } }
@media (max-width: 359px) { .chip { padding-right: 10px; font-size: 13px; } .chip.plain { padding-left: 10px; } .chips { gap: 6px; } }
@media (min-width: 900px) {
  .d-nav { display: flex; } .tabs { display: none; } .me { display: inline-grid; }
  .signed .main { padding-bottom: var(--s7); }
  .main { padding: var(--s6) var(--s5) var(--s7); }
}
@media (min-width: 900px) and (max-width: 1099px) { .d-nav a { padding: 0 10px; } .d-nav a .ico { display: none; } }
/* the You page: every other place, the organization you act for, sign out */
.you-list { display: grid; gap: 2px; }
.you-list a, .you-list button { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s3); border-radius: 12px; text-decoration: none; color: var(--c-ink); font: 600 15px var(--font-body); background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
.you-list a:hover, .you-list button:hover { background: color-mix(in oklab, var(--c-ink) 6%, transparent); }
.you-list .ico { color: var(--c-ink-2); }
.you-list .count { margin-left: auto; }

/* type */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-soft); }
.title { font-family: var(--font-display); font-size: 30px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em; font-variation-settings: "wdth" 92; }
.lede { color: var(--c-body); font-size: 16px; }
.head { display: grid; gap: var(--s2); }
.quiet { color: var(--c-soft); font-size: 13px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
@media (min-width: 900px) { .title { font-size: 40px; } }

/* cards and lists */
.card { background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface) 70%); border: 0; border-radius: var(--r-card); box-shadow: var(--sh-card), 0 0 0 1px var(--hair); padding: 20px; display: grid; gap: var(--s3); min-width: 0; }
.card.navy { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.card.navy .quiet { color: #b9bfcc; }
.card h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); }
.card-head > * { min-width: 0; overflow-wrap: anywhere; }
.stack { display: grid; gap: var(--s3); }
.list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line); }
.list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--c-line); min-width: 0; }
.list > li:last-child { border-bottom: 0; }
.main-col, .list .main-col { display: grid; gap: 2px; min-width: 0; }
td .btn, td a, .one-line { white-space: nowrap; }
.list .main-col.grow { flex: 1 1 160px; }
.list .main-col > * { overflow-wrap: anywhere; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: var(--s3); }
.stats.eight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .stats.eight { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .stats.eight { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.stat { background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface) 70%); border: 0; box-shadow: var(--sh-card), 0 0 0 1px var(--hair); border-radius: var(--r-card); padding: var(--s4); display: grid; gap: var(--s1); }
.stat b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
a.stat { text-decoration: none; color: inherit; }
.card-head > .main-col { flex: 1 1 12rem; }
.bad-text { color: var(--c-bad); }
.count { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-coral); color: #fff; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.search { display: flex; gap: var(--s2); }
.search input { flex: 1; min-width: 0; }
a.stat:hover { box-shadow: var(--sh-card), 0 0 0 1px var(--c-coral-ring); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--c-tint); color: var(--c-body); white-space: nowrap; }
.pill.ok { background: var(--c-ok-t); color: var(--c-ok); }
.pill.wait { background: var(--c-wait-t); color: var(--c-wait); }
.pill.bad { background: var(--c-bad-t); color: var(--c-bad); }
.pill.key { background: var(--c-coral-t); color: var(--c-coral-ink); }
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: var(--s2) var(--s2); border-bottom: 1px solid var(--c-line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-soft); font-weight: 700; white-space: nowrap; }
td { overflow-wrap: break-word; }
/* Admin's wide tables keep readable columns on a phone and scroll sideways inside their card, never the page */
.table-wrap table { min-width: 640px; }
/* Admin → Competitors: one line per competitor that opens to its columns and funnel; three columns on a computer, stacked on a phone */
/* You → Data (the UX chat's mock, research/v4/game-mocks/data-place): the place, its crumbs, one row per data asset */
.dt { display: grid; gap: var(--s5); min-width: 0; } .dt.narrow { max-width: 760px; width: 100%; margin: 0 auto; }
.dt-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); }
.dt-crumb a { color: var(--c-ink-2); text-decoration: none; } .dt-crumb a:hover { text-decoration: underline; } .dt-crumb .sep { color: var(--c-faint); }
.dt .head .title { font-size: 34px; } .dt .lede { font-size: 15px; color: var(--c-muted); max-width: 64ch; }
.dt-assets { padding: var(--s1) var(--s4); }
.dt-asset { display: flex; align-items: center; gap: var(--s2) var(--s3); min-height: 72px; padding: var(--s3) 0; text-decoration: none; color: inherit; }
.dt-asset .t { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; } .dt-asset .t b { font-size: 16px; font-weight: 700; } .dt-asset .t span { font-size: 13px; color: var(--c-muted); }
.dt-asset > .i:last-child { color: var(--c-faint); } .dt-asset .t .own { margin-top: 6px; }
/* /skill: the free skill file as text */
.skill-file { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.55 ui-monospace, Menlo, monospace; padding: var(--s4); border-radius: 14px; background: var(--c-surface); color: var(--c-ink-2); max-width: 100%; }
/* Admin → ERD: tables under their root, a child indented under its parent */
.erd-tree { list-style: none; margin: 0; padding: 0; display: grid; } .erd-tree .erd-tree { margin-left: var(--s4); padding-left: var(--s3); border-left: 1px solid var(--c-line); }
.erd-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); padding: var(--s2) 0; min-width: 0; } .erd-t a { font-size: 14px; }
.erd-t .erd-to { flex: 1 1 200px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; } .erd-t .num { font-variant-numeric: tabular-nums; margin-left: auto; }
/* where and when a fact was read, under the fact; the Sources list */
.cmp-read { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; } .cmp-read a { color: var(--c-ink-2); }
.src-day > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); cursor: pointer; min-height: 44px; } .src-day[open] > summary { margin-bottom: var(--s2); }
.src-list li.off { opacity: 0.6; } .src-list .main-col > * { overflow-wrap: anywhere; min-width: 0; } .src-list .mono { font-size: 12px; }
.cmp-heads, .cmp > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 96px; gap: var(--s2) var(--s4); align-items: center; }
.cmp-heads { padding-bottom: var(--s2); border-bottom: 1px solid var(--c-line); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.stat > * { min-width: 0; overflow-wrap: anywhere; }
.cmp { border-bottom: 1px solid var(--c-line); }
.cmp:last-of-type { border-bottom: 0; }
.cmp > summary { min-height: 56px; padding: var(--s3) 0; cursor: pointer; list-style: none; }
.cmp > summary::-webkit-details-marker { display: none; }
.cmp-name { display: grid; gap: 2px; min-width: 0; }
.cmp-name > *, .cmp-price { overflow-wrap: anywhere; }
.cmp-price { font-size: 13px; }
.cmp-end { justify-self: end; }
.cmp[open] > summary b { color: var(--c-coral-ink); }
.cmp-body { display: grid; gap: var(--s4); padding: var(--s2) 0 var(--s5); }
.cmp-body h3 { margin: 0; font-size: 15px; }
.cmp-fields { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.cmp-fields dt { color: var(--c-soft); padding-top: 2px; }
.cmp-fields dd { margin: 0; overflow-wrap: anywhere; }
.cmp-steps { display: grid; gap: var(--s3); margin: 0; padding-left: var(--s5); }
.cmp-step { display: grid; gap: 2px; }
.cmp-step > * { overflow-wrap: anywhere; }
.cmp-next { margin: 2px 0 0; font-size: 13px; }
/* Competitor insights: one line per insight (its claim, what to do about it, then its confidence and status) that opens to the
   numbers it rests on; a competitor's row lists the insights that rest on it, the label before each */
.ins > summary { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ins .cmp-name { gap: var(--s1); }
.ins .cmp-name b { font-weight: 600; line-height: 1.35; }
.ins .cmp-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); }
.ins.off .cmp-name b { color: var(--c-soft); }
/* the switch between the two views wraps on a narrow phone instead of scrolling: both names stay whole */
.sl-chips.cmp-views { flex-wrap: wrap; overflow: visible; }
.cmp-insights { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.cmp-insights li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: baseline; }
.cmp-insights li > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 699px) {
  .cmp-heads { display: none; }
  .cmp > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-price { grid-column: 1 / -1; grid-row: 2; }
  .cmp-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cmp-fields dd { margin-bottom: var(--s3); }
  .ins > summary { grid-template-columns: minmax(0, 1fr); }
  .ins .cmp-end { justify-content: flex-start; justify-self: start; }
  .cmp-insights li { grid-template-columns: minmax(0, 1fr); }
}

/* forms */
form { margin: 0; }
.form { display: grid; gap: var(--s3); }
label { display: grid; gap: var(--s1); font-size: 13px; font-weight: 600; color: var(--c-body); }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--c-line-2); border-radius: var(--c-r-sm); background: var(--c-tint);
  font: 400 15px/1.4 var(--c-font); color: var(--c-ink); }
textarea { min-height: 96px; resize: vertical; }
.key-box { min-height: 0; word-break: break-all; color: var(--c-ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-coral-ring); border-color: var(--c-coral); }
.code-input { font: 700 28px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.3em; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 3px 0 var(--c-lock-lip); color: var(--c-ink); font: 600 15px var(--font-body); transition: transform .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(2px); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 1px 0 var(--c-lock-lip); }
.btn.primary { min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-btn); color: var(--c-white); font: 700 16px var(--font-body); letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--c-orange-hi) -40%, var(--c-orange) 45%, var(--c-orange-lo));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), inset 0 -2px 0 color-mix(in oklab, var(--c-orange-deep) 40%, transparent), 0 5px 0 var(--c-orange-deep), 0 16px 32px -8px color-mix(in oklab, var(--c-orange) 55%, transparent);
  text-shadow: 0 1px 0 color-mix(in oklab, var(--c-orange-deep) 60%, transparent); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary:active { transform: translateY(4px); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 1px 0 var(--c-orange-deep); }
.btn.small { min-height: 36px; padding: 0 var(--s3); font-size: 13px; border-radius: 12px; }
.btn.primary.small { min-height: 40px; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 3px 0 var(--c-orange-deep), 0 10px 20px -8px color-mix(in oklab, var(--c-orange) 55%, transparent); }
.btn.block { width: 100%; }
details.card > summary, details.revise > summary { cursor: pointer; font-weight: 700; }
details.revise { display: grid; gap: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--c-line); }
.check { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }

/* notices */
.flash { padding: var(--s3) var(--s4); border-radius: var(--c-r-sm); background: var(--c-ok-t); color: var(--c-ok); font-weight: 600; }
.flash.bad { background: var(--c-bad-t); color: var(--c-bad); }
.empty { padding: var(--s5); text-align: center; color: var(--c-soft); border: 1px dashed var(--c-line-2); border-radius: var(--c-r); background: var(--c-card); }

/* the ad: a 9:16 player */
.ad { display: grid; gap: var(--s3); }
.player { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: var(--c-r); background: #000; object-fit: cover; margin: 0 auto; }
.pitch { display: grid; gap: var(--s5); }
.hero { display: grid; gap: var(--s5); grid-template-areas: "head" "cta" "ad" "rest"; }
.hero.no-cta { grid-template-areas: "head" "ad" "rest"; }
.hero-head { grid-area: head; } .hero-cta { grid-area: cta; } .hero-ad { grid-area: ad; } .hero-rest { grid-area: rest; display: grid; gap: var(--s5); align-content: start; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: 360px minmax(0, 600px); grid-template-areas: "ad head" "ad cta" "ad rest"; grid-template-rows: auto auto 1fr; column-gap: var(--s7); justify-content: center; align-items: start; }
  .hero.no-ad { grid-template-columns: minmax(0, 600px); grid-template-areas: "head" "cta" "rest"; }
  .hero.no-cta { grid-template-areas: "ad head" "ad rest"; grid-template-rows: auto 1fr; }
  .hero.no-ad.no-cta { grid-template-areas: "head" "rest"; }
  .hero-ad { position: sticky; top: var(--s5); } .hero-ad .player { margin: 0; }
}
@media (min-width: 1000px) { .pitch { grid-template-columns: 360px 1fr; align-items: start; } .pitch .player { margin: 0; } }
.price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.version { position: fixed; right: 10px; bottom: 10px; z-index: 50; padding: 3px 8px; border-radius: 999px; background: rgb(26 26 26 / 92%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 40%); color: var(--c-faint); font: 500 11px/1.4 ui-monospace, Menlo, monospace; text-decoration: none; }
.test-strip { background: var(--c-wait-t); color: var(--c-wait); text-align: center; font-size: 12px; font-weight: 700; padding: 6px var(--s4); }
/* the job page: V2's stage tracker, then the next step, the preview and the record side by side from 1000 px */
.stages { display: flex; gap: 0; margin: 0; padding: var(--s3) var(--s2); list-style: none; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-r); }
.stages li { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: var(--s2); position: relative; font-size: 12px; color: var(--c-soft); text-align: center; }
.stages li i { width: 12px; height: 12px; border-radius: 999px; background: var(--c-line-2); position: relative; z-index: 1; }
.stages li::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--c-line-2); }
.stages li:first-child::before { display: none; }
.stages li.done { color: var(--c-ink); }
.stages li.done i, .stages li.done::before { background: var(--c-coral); }
.stages li.now { color: var(--c-coral-ink); font-weight: 700; }
.stages li.now i { background: var(--c-card); box-shadow: 0 0 0 2px var(--c-coral); }
.stages li.now.bad { color: var(--c-bad); }
.stages li.now.bad i { box-shadow: 0 0 0 2px var(--c-bad); }
@media (max-width: 480px) { .stages { padding: var(--s3) 0; } .stages li { font-size: 10.5px; line-height: 1.25; padding: 0 2px; } }
@media (max-width: 360px) { .stages li { font-size: 9.5px; letter-spacing: -0.01em; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.job-grid { display: grid; gap: var(--s4); }
.job-grid .preview .player { max-width: 320px; }
@media (min-width: 1000px) { .job-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .job-grid > .preview { order: 1; } .job-grid > .stack { order: 2; } }
@media (min-width: 1280px) { .job-grid { grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); } }
/* Your AI: V2's numbered steps and AI tiles; the approvals and history beside them from 1000 px */
.step-title { display: flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--c-ink); margin: 0; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--c-coral); color: #fff; font-size: 13px; font-weight: 800; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.tile { display: grid; gap: 2px; padding: var(--s3); border: 1px solid var(--c-line-2); border-radius: var(--c-r-sm); background: var(--c-card); cursor: pointer; position: relative; }
.tile input { position: absolute; opacity: 0; }
.tile:has(input:checked) { border-color: var(--c-coral); box-shadow: 0 0 0 2px var(--c-coral-ring); }
.tile:has(input:focus-visible) { outline: 2px solid var(--c-coral); outline-offset: 2px; }
/* high-contrast (forced colours) modes drop shadows and recolour borders: show the real radio there */
@media (forced-colors: active) { .tile input { position: static; opacity: 1; } .tile:has(input:checked) { outline: 3px solid Highlight; } }
.ai-grid { display: grid; gap: var(--s4); }
@media (min-width: 1000px) { .ai-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.computer-only { display: none; }
.nowrap { flex-wrap: nowrap; }
@media (min-width: 900px) { .computer-only { display: block; } .phone-only { display: none; } }
/* phones: last, so these win over the rules above */
@media (max-width: 599px) { .stat { padding: var(--s3); } .stat b { font-size: clamp(15px, 4.4vw, 20px); white-space: nowrap; } }
.link-text code { display: block; padding: var(--s3); border: 1px solid var(--c-line-2); border-radius: var(--c-r-sm); background: var(--c-card); overflow-wrap: anywhere; font-size: 13px; }
.review-card .decide { display: grid; gap: var(--s4); align-content: start; }
/* one row of an Admin list from the next: a hairline and air, at every width */
.review-card + .review-card { border-top: 1px solid var(--hair); padding-top: var(--s5); margin-top: var(--s3); }
@media (min-width: 1000px) { .review-card { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .review-card > .card-head { grid-column: 1 / -1; } .review-card > .player { margin: 0; } }
/* a face check's frames: each crop with its time and why, big enough to look at */
.face-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s4); }
.face-frames figure { margin: 0; display: grid; gap: var(--s2); }
.face-frames img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--sunk, #0001); border-radius: 8px; }
.face-note { padding: var(--s3) var(--s4); border-radius: 10px; background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--hair); }
.face-frames figcaption { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }

/* the terms: every page's foot, and the legal pages (LAUNCH #6) */
.foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13px; }
.foot a { color: var(--c-soft); text-decoration: none; }
.foot a:hover { color: var(--c-ink); text-decoration: underline; }
.legal { max-width: 680px; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p { margin: 0 0 12px; line-height: 1.6; color: var(--c-body); }
.legal-list { display: grid; gap: 10px; padding-left: 18px; }
.flash.draft { background: var(--c-wait-t); color: var(--c-wait); border-color: transparent; }
.legal h2:first-child { margin-top: 8px; }

/* a post's landing page (LAUNCH 10a, F3) */
.landing-actions { display: grid; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; }
.landing { max-width: 480px; width: 100%; margin: 0 auto; text-align: center; display: grid; gap: var(--s5); }
.landing .head { text-align: center; }
.hero-buttons { display: grid; gap: 12px; }


/* the game (research/v4/GAME.md), lifted from the mocks and laid out to flow at 320-1920: rules 7, 14, 15 */
.g-h1 { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variation-settings: "wdth" 92; }
.g-sub { font-size: 15px; color: var(--c-muted); margin-top: var(--s2); }
.g-k { font-size: 13px; color: var(--c-muted); }
.g-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.g-steps { display: flex; gap: 4px; margin-bottom: 8px; flex: none; }
.g-steps i { width: 14px; height: 6px; border-radius: 3px; background: var(--c-surface-3); }
.g-steps i.d { background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 50%, var(--c-gold-lo)); }
.g-steps i.n { background: var(--c-orange); }
@media (min-width: 900px) { .g-h1 { font-size: 44px; } .g-sub { font-size: 16px; } .g-steps i { width: 40px; } }
/* the road: phone, top to bottom; computer, a board left to right */
.g-path { position: relative; height: 560px; margin: 0 calc(-1 * var(--s4)); -webkit-mask-image: linear-gradient(180deg, var(--mask) 92%, transparent); mask-image: linear-gradient(180deg, var(--mask) 92%, transparent); }
.g-board { display: none; position: relative; height: 340px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 90% at 38% 60%, color-mix(in oklab, var(--c-orange) 7%, transparent), transparent 70%), linear-gradient(180deg, var(--c-surface), color-mix(in oklab, var(--c-surface) 60%, var(--c-bg)));
  box-shadow: var(--sh-card), 0 0 0 1px var(--hair); }
.g-board::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in oklab, var(--c-ink) 6%, transparent) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--mask) 30%, var(--mask) 70%, transparent); mask-image: linear-gradient(180deg, transparent, var(--mask) 30%, var(--mask) 70%, transparent); }
@media (min-width: 900px) { .g-path { display: none; } .g-board { display: block; } }
.g-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-road path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g-node { position: absolute; width: 68px; height: 68px; margin: -38px 0 0 -34px; border-radius: 50%; display: grid; place-items: center; z-index: 2; text-decoration: none; }
.g-node::after { content: ""; position: absolute; left: 16%; top: 9%; width: 44%; height: 26%; border-radius: 50%; background: linear-gradient(180deg, color-mix(in oklab, var(--c-white) 55%, transparent), transparent); transform: rotate(-18deg); pointer-events: none; }
.g-node .ico { width: 30px; height: 30px; stroke-width: 2.4; position: relative; z-index: 1; }
.g-node.done { background: radial-gradient(circle at 38% 30%, var(--c-gold-hi), var(--c-gold) 42%, var(--c-gold-lo) 88%);
  box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--c-gold-hi) 55%, transparent), inset 0 -6px 10px color-mix(in oklab, var(--c-gold-deep) 45%, transparent), 0 6px 0 var(--c-gold-deep), 0 16px 24px -8px color-mix(in oklab, var(--c-gold) 40%, transparent); color: var(--c-gold-ink); }
.g-node.lock { background: radial-gradient(circle at 38% 30%, var(--c-lock-hi), var(--c-lock) 60%);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c-ink) 5%, transparent), 0 6px 0 var(--c-lock-lip), 0 14px 20px -8px color-mix(in oklab, var(--c-shadow) 90%, transparent); color: var(--c-lock-ink); }
.g-node.lock::after { opacity: .18; }
.g-node.now { width: 84px; height: 84px; margin: -46px 0 0 -42px; background: radial-gradient(circle at 38% 30%, var(--c-orange-hi), var(--c-orange) 45%, var(--c-orange-lo) 90%);
  box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--c-orange-hi) 60%, transparent), inset 0 -8px 12px color-mix(in oklab, var(--c-orange-deep) 45%, transparent), 0 7px 0 var(--c-orange-deep), 0 0 0 10px color-mix(in oklab, var(--c-orange) 16%, transparent), 0 18px 44px -4px color-mix(in oklab, var(--c-orange) 65%, transparent); color: var(--c-white); }
.g-node.now .ico { width: 36px; height: 36px; }
.g-node.now .ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--c-orange) 60%, transparent); animation: g-ring 2.2s ease-out infinite; }
@keyframes g-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.g-lab { position: absolute; width: 42%; max-width: 170px; z-index: 2; transform: translateY(-50%); }
.g-lab.r { text-align: right; }
.g-lab b { display: block; font-size: 15px; font-weight: 600; color: var(--c-ink); letter-spacing: -.01em; line-height: 1.25; }
.g-lab span { display: block; font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.g-lab.dim b { color: var(--c-ink-2); }
.g-board .g-lab { width: 160px; max-width: none; margin-left: -80px; text-align: center; transform: none; }
.g-bubble { position: absolute; z-index: 3; width: 46%; max-width: 230px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--sh-card), 0 0 0 1px var(--hair-2); transform: translateY(-50%); }
/* two lines at most on the phone's road: a third pushed the bubble onto the next step's label (cold walk, Nov 13) */
.g-bubble b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.g-board .g-bubble b { display: block; -webkit-line-clamp: unset; overflow: visible; }
.g-bubble span { display: block; font-size: 13px; color: var(--c-ink-2); margin-top: 2px; }
.g-bubble::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; background: var(--c-surface-3); transform: translateY(-50%) rotate(45deg); box-shadow: 1px -1px 0 var(--hair-2); }
.g-bubble.to-r::after { right: -6px; }
.g-bubble.to-l::after { left: -6px; box-shadow: -1px 1px 0 var(--hair-2); }
.g-board .g-bubble { width: auto; max-width: 420px; transform: none; }
.g-board .g-bubble::after { left: 28px; top: auto; bottom: -6px; transform: rotate(45deg); background: var(--c-surface-2); box-shadow: 1px 1px 0 var(--hair-2); }
.g-slot { position: absolute; z-index: 3; pointer-events: none; }
.g-slot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.g-bob { animation: g-bob 3.2s ease-in-out infinite; }
@keyframes g-bob { 50% { transform: translateY(-4px); } }
/* the one next step, as a 3D button (phones: under the road; computers: the next bar with the pack) */
.g-go { position: relative; min-height: 56px; width: 100%; border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0 var(--s5);
  font: 700 17px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--c-white); text-decoration: none; border: 0; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, var(--c-orange-hi) -40%, var(--c-orange) 45%, var(--c-orange-lo));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), inset 0 -2px 0 color-mix(in oklab, var(--c-orange-deep) 40%, transparent), 0 5px 0 var(--c-orange-deep), 0 16px 32px -8px color-mix(in oklab, var(--c-orange) 55%, transparent);
  text-shadow: 0 1px 0 color-mix(in oklab, var(--c-orange-deep) 60%, transparent); transition: transform .12s ease, box-shadow .12s ease; }
.g-go .ico { width: 20px; height: 20px; stroke-width: 2.25; }
.g-go:active { transform: translateY(4px); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 1px 0 var(--c-orange-deep); }
.g-go .tail { position: absolute; right: 16px; font-size: 14px; font-weight: 600; opacity: .85; display: flex; align-items: center; gap: 4px; }
.g-quiet { min-height: 56px; width: 100%; border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; gap: var(--s2); font: 700 16px var(--font-body); color: var(--c-ink); text-decoration: none;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 4px 0 var(--c-lock-lip); }
.g-dock { margin-top: calc(-1 * var(--s4)); }
.g-nextbar { display: none; }
@media (min-width: 900px) {
  .g-dock { display: none; }
  .g-nextbar { display: flex; align-items: center; gap: var(--s5); padding: 20px 20px 20px 24px; }
  .g-nextbar .t { flex: 1; min-width: 0; } .g-nextbar .t b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
  .g-nextbar .t span { display: block; font-size: 14px; color: var(--c-muted); margin-top: 4px; }
  .g-nextbar .g-go { width: auto; min-width: 280px; flex: none; }
}
.g-pack { width: 96px; height: 72px; position: relative; flex: none; }
.g-pack i { position: absolute; top: 4px; width: 46px; height: 64px; border-radius: 9px; background: linear-gradient(160deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: inset 0 0 0 1.5px var(--hair-2), 0 8px 16px -6px color-mix(in oklab, var(--c-shadow) 90%, transparent); overflow: hidden; }
.g-pack i::after { content: ""; position: absolute; inset: 6px; border-radius: 5px; border: 1.5px dashed color-mix(in oklab, var(--c-ink) 16%, transparent); }
.g-pack i:nth-child(1) { left: 2px; transform: rotate(-12deg); }
.g-pack i:nth-child(2) { left: 25px; transform: translateY(-4px); z-index: 2; background: linear-gradient(160deg, var(--c-orange-hi), var(--c-orange) 55%, var(--c-orange-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 40%, transparent), 0 10px 20px -6px color-mix(in oklab, var(--c-orange) 60%, transparent); }
.g-pack i:nth-child(2)::after { border-color: color-mix(in oklab, var(--c-white) 45%, transparent); }
.g-pack i:nth-child(3) { left: 48px; transform: rotate(12deg); }
.g-pack .i { position: absolute; left: 36px; top: 18px; z-index: 3; color: var(--c-white); }
.g-pack .ico { width: 26px; height: 26px; }
/* badges: earned only by a real first; locked ones grey with their goal */
.g-badges-top { display: flex; justify-content: space-between; align-items: baseline; }
.g-badges-top b { font-size: 17px; font-weight: 700; font-family: var(--font-display); }
.g-badge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s2); margin-top: var(--s4); }
@media (min-width: 600px) { .g-badge-row { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.g-bdg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); min-width: 0; }
.g-bdg .face { position: relative; width: 56px; height: 63px; }
.g-bdg .face > svg { width: 100%; height: 100%; overflow: visible; display: block; }
.g-bdg .face .i { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); color: var(--c-gold-ink); }
.g-bdg .face .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.g-bdg.off .face .i { color: var(--c-lock-ink); }
.g-bdg b { font-size: 13px; font-weight: 600; color: var(--c-ink); line-height: 1.2; }
.g-bdg span { font-size: 12px; color: var(--c-faint); margin-top: -4px; line-height: 1.25; }
.g-bdg.off b { color: var(--c-muted); }
/* the money track: balance (cleared and pending, from the rows), the level rail, the next ad, the sales */
.g-bal { padding: 16px 20px; }
.g-bal .v { font-family: var(--font-display); font-size: 48px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: var(--s2); color: var(--c-green); font-variation-settings: "wdth" 90; }
.g-bal .v small { font-size: 28px; letter-spacing: -.03em; }
.g-split { display: flex; gap: 4px; height: 12px; margin-top: var(--s4); }
.g-split .a { border-radius: 6px 2px 2px 6px; background: linear-gradient(180deg, var(--c-green-hi), var(--c-green) 55%, var(--c-green-lo)); box-shadow: 0 0 14px -2px color-mix(in oklab, var(--c-green) 60%, transparent); }
.g-split .p { border-radius: 2px 6px 6px 2px; background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--c-green) 30%, transparent) 0 4px, color-mix(in oklab, var(--c-green) 12%, transparent) 4px 8px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-green) 30%, transparent); }
.g-split .a:only-child, .g-split .p:only-child { border-radius: 6px; }
.g-split .z { flex: 1; border-radius: 6px; background: var(--c-surface-3); }
.g-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.g-legend b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-legend span { display: block; font-size: 12px; color: var(--c-muted); }
.g-legend .p b { color: var(--c-ink-2); }
.g-lvl { padding: 20px 20px 12px; }
.g-lvl-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--s3); }
.g-lvl-top b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.g-lvl-top b em { font-style: normal; color: var(--c-gold); }
.g-rail { position: relative; height: 92px; margin-top: var(--s3); }
.g-rail-line { position: absolute; left: 10%; right: 10%; top: 26px; height: 8px; border-radius: 4px; background: var(--c-surface-3); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--c-shadow) 60%, transparent); }
.g-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 50%, var(--c-gold-lo)); }
.g-rung { position: absolute; top: 0; width: 64px; margin-left: -32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.g-rung .sh { position: relative; width: 46px; height: 52px; }
.g-rung .sh svg { width: 100%; height: 100%; overflow: visible; display: block; }
.g-rung .sh em { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 4px; font: 800 15px var(--font-display); font-style: normal; color: var(--c-gold-ink); }
.g-rung.off .sh em { color: var(--c-lock-ink); }
.g-rung.now .sh { width: 56px; height: 62px; margin-top: -6px; }
.g-rung b { font-size: 12px; font-weight: 700; margin-top: 4px; color: var(--c-ink-2); }
.g-rung span { font-size: 11px; color: var(--c-faint); }
.g-rung.now b { color: var(--c-gold); }
.g-next { padding: var(--s4); display: grid; gap: var(--s4); }
.g-next-top { display: flex; gap: var(--s3); align-items: center; }
.g-thumb { width: 48px; height: 64px; border-radius: 10px; flex: none; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: 0 0 0 1px var(--hair-2), 0 6px 14px -6px color-mix(in oklab, var(--c-shadow) 90%, transparent); color: var(--c-ink-2); font-weight: 800; }
.g-next-top b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.g-next-top span { display: block; font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.g-sales .g-k { margin: 0 4px var(--s2); }
.g-srow { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 6px 4px; text-decoration: none; color: inherit; }
.g-srow + .g-srow { box-shadow: inset 0 1px 0 var(--hair); }
.g-srow .g-thumb { width: 32px; height: 42px; border-radius: 7px; font-size: 12px; }
.g-srow .t { flex: 1; min-width: 0; }
.g-srow .t b { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.g-srow .t span { display: block; font-size: 12px; color: var(--c-muted); }
.g-srow .amt { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-green); white-space: nowrap; }
.g-srow .amt.p { color: var(--c-muted); font-weight: 600; }
@media (min-width: 900px) { .g-money { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; } .g-money > .g-col { display: grid; gap: var(--s4); } }
/* Make: the render clock and its stages, read from the call's row */
.g-eta { padding: var(--s4) var(--s4) var(--s4) 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.g-eta .when { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: var(--s2); font-variation-settings: "wdth" 90; }
.g-eta .when small { font-size: 18px; letter-spacing: -.02em; color: var(--c-ink-2); margin-left: 4px; }
.g-eta .k2 { font-size: 13px; color: var(--c-muted); margin-top: 8px; }
.g-dial { width: 104px; height: 104px; position: relative; flex: none; }
.g-dial svg { width: 100%; height: 100%; display: block; }
.g-dial .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.g-dial .c b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.g-dial .c span { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
@media (max-width: 359px) { .g-eta .when { font-size: 28px; } .g-dial { width: 88px; height: 88px; } .g-dial .c b { font-size: 20px; } }
.g-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 40px; list-style: none; margin: 0; padding: 0 4px; }
.g-seg { position: relative; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--c-faint); isolation: isolate; }
.g-seg::before { content: ""; position: absolute; inset: 0; transform: skewX(-14deg); border-radius: 8px; background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--hair); z-index: -1; }
.g-seg.d { color: var(--c-bg); }
.g-seg.d::before { background: linear-gradient(180deg, var(--c-white), var(--c-ink-2)); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--c-shadow) 18%, transparent); }
.g-seg.n { color: var(--c-ink); }
.g-seg.n::before { background: repeating-linear-gradient(-60deg, var(--c-surface-3) 0 8px, var(--c-edge) 8px 16px); box-shadow: inset 0 0 0 1.5px var(--c-ink), 0 0 18px -2px color-mix(in oklab, var(--c-ink) 35%, transparent); animation: g-slide 1.2s linear infinite; background-size: 200% 100%; }
.g-seg.bad { color: var(--c-bad); } .g-seg.bad::before { box-shadow: inset 0 0 0 1.5px var(--c-bad); }
@keyframes g-slide { to { background-position: -37px 0; } }
.g-seg span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.g-seg .ico { width: 13px; height: 13px; stroke-width: 3; }
@media (max-width: 379px) { .g-seg { font-size: 10.5px; } .g-seg .i { display: none; } }
.g-nowcard { padding: 20px; }
.g-nc-top { display: flex; align-items: center; gap: var(--s3); }
.g-tile { width: 44px; height: 44px; border-radius: var(--r-tile); display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair-2), 0 3px 0 var(--c-lock-lip); color: var(--c-ink); }
.g-tile .ico { width: 22px; height: 22px; }
.g-nc-top b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.g-nc-top span { display: block; font-size: 13px; color: var(--c-muted); }
.g-eq { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-left: auto; }
.g-eq i { width: 4px; border-radius: 2px; background: var(--c-ink); animation: g-eq 1s ease-in-out infinite; transform-origin: bottom; }
.g-eq i:nth-child(1) { height: 40%; animation-delay: -.2s; } .g-eq i:nth-child(2) { height: 85%; animation-delay: -.5s; } .g-eq i:nth-child(3) { height: 60%; animation-delay: -.1s; } .g-eq i:nth-child(4) { height: 100%; animation-delay: -.7s; } .g-eq i:nth-child(5) { height: 50%; animation-delay: -.35s; }
@keyframes g-eq { 50% { transform: scaleY(.45); } }
.g-lrows { display: grid; gap: var(--s3); }
.g-lrow { display: flex; align-items: center; gap: var(--s3); }
.g-lrow .tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--c-white), var(--c-ink-2)); color: var(--c-bg); box-shadow: 0 2px 0 color-mix(in oklab, var(--c-shadow) 60%, transparent); }
.g-lrow .tick .ico { width: 15px; height: 15px; stroke-width: 3; }
.g-lrow .todo { background: var(--c-surface-2); box-shadow: inset 0 0 0 1.5px var(--c-edge); color: var(--c-muted); }
.g-lrow b { display: block; font-size: 15px; font-weight: 600; }
.g-lrow span { display: block; font-size: 13px; color: var(--c-muted); }
.g-lrow.later b { color: var(--c-faint); }
/* moments (rule 15): full screen only for a first or rare record, about 2.5 s; repeats small in place; tap skips */
.g-moment { position: fixed; inset: 0; z-index: 90; overflow: hidden; display: grid; place-items: center; cursor: pointer; padding: var(--s5);
  background: radial-gradient(90% 55% at 50% 30%, color-mix(in oklab, var(--c-green) 34%, transparent), transparent 70%), radial-gradient(60% 40% at 50% 30%, color-mix(in oklab, var(--c-gold) 14%, transparent), transparent 70%), var(--c-bg);
  animation: g-in .3s ease-out both; }
.g-moment.gold { background: radial-gradient(90% 55% at 50% 30%, color-mix(in oklab, var(--c-gold) 30%, transparent), transparent 70%), var(--c-bg); }
.g-moment.orange { background: radial-gradient(90% 55% at 50% 30%, color-mix(in oklab, var(--c-orange) 28%, transparent), transparent 70%), var(--c-bg); }
.g-moment .rays { position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in oklab, var(--c-green-hi) 10%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle at 50% 34%, var(--mask) 0, transparent 52%); mask-image: radial-gradient(circle at 50% 34%, var(--mask) 0, transparent 52%); animation: g-spin 40s linear infinite; }
.g-moment.gold .rays { background: repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in oklab, var(--c-gold-hi) 10%, transparent) 0 7deg, transparent 7deg 20deg); }
.g-moment.orange .rays { background: repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in oklab, var(--c-orange-hi) 9%, transparent) 0 7deg, transparent 7deg 20deg); }
@keyframes g-spin { to { transform: rotate(360deg); } }
.g-m-body { position: relative; z-index: 2; width: 100%; max-width: 400px; display: grid; justify-items: center; text-align: center; gap: var(--s3); }
.g-m-art { position: relative; width: 200px; height: 200px; filter: drop-shadow(0 24px 30px color-mix(in oklab, var(--c-shadow) 70%, transparent)) drop-shadow(0 0 40px color-mix(in oklab, var(--c-gold) 35%, transparent)); }
.g-m-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g-m-art .g-slot { right: -70px; bottom: -40px; width: 112px; height: 127px; }
.g-m-video { width: 200px; aspect-ratio: 9 / 16; border-radius: 18px; object-fit: cover; background: #000; box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-orange) 70%, transparent), 0 0 60px color-mix(in oklab, var(--c-orange) 45%, transparent); }
.g-m-k1 { font-size: 17px; font-weight: 600; color: var(--c-ink); margin-top: var(--s3); }
.g-m-amt { font-family: var(--font-display); font-size: 76px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variation-settings: "wdth" 88;
  background: linear-gradient(180deg, var(--c-green-hi), var(--c-green) 60%, var(--c-green-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 var(--c-green-deep)) drop-shadow(0 0 28px color-mix(in oklab, var(--c-green) 45%, transparent)); font-variant-numeric: tabular-nums; }
.g-m-title { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.g-m-what { font-size: 15px; color: var(--c-ink-2); line-height: 1.45; }
.g-m-skip { font-size: 12px; color: var(--c-faint); margin-top: var(--s2); }
.g-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--c-ink-2); z-index: 5; background: color-mix(in oklab, var(--c-ink) 7%, transparent); border: 0; cursor: pointer; }
.g-moment.small { inset: auto var(--s4) 104px auto; padding: 0; background: none; place-items: end; overflow: visible; animation: g-pop .25s ease-out both; }
.g-moment.small .rays, .g-moment.small .g-close, .g-moment.small .g-m-skip, .g-moment.small .g-slot { display: none; }
.g-moment.small .g-m-body { width: auto; max-width: 300px; grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; gap: 2px var(--s3); padding: 12px 16px 12px 12px; border-radius: 16px;
  background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--sh-card), 0 0 0 1px var(--hair-2); }
.g-moment.small .g-m-art { width: 44px; height: 44px; grid-row: span 2; filter: none; }
.g-moment.small .g-m-video { display: none; }
.g-moment.small .g-m-k1 { margin: 0; font-size: 14px; } .g-moment.small .g-m-title, .g-moment.small .g-m-amt { font-size: 18px; filter: none; } .g-moment.small .g-m-what { display: none; }
@media (min-width: 900px) { .g-moment.small { bottom: var(--s5); right: var(--s5); } }
.g-moment.out { animation: g-out .25s ease-in both; }
@keyframes g-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes g-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes g-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g-moment, .g-moment.small, .g-moment.out { animation: g-fade .2s both; } .g-moment .rays, .g-bob, .g-node.now .ring, .g-seg.n::before, .g-eq i { animation: none; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }

/* the product page while an ad's preview is being made: a small spinner beside one line, no prices yet */
.preview-wait { display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--c-r); background: var(--c-card); }
.preview-wait p { margin: 0; }
.spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-line); border-top-color: var(--c-coral); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
/* a long shop name wraps inside its card and button instead of running past the edge on a phone */
.card { grid-template-columns: minmax(0, 1fr); }
.card p, .card h2, .card h3, .card .btn { overflow-wrap: anywhere; }
.card .btn { text-align: center; white-space: normal; max-width: 100%; }
.wide-only { display: none; }
@media (min-width: 1200px) { .wide-only { display: inline; } }
.test-strip { margin: 0; }
.avatar.me[aria-current="page"] { box-shadow: 0 0 0 2px var(--c-coral-ring); }
.g-board .g-bubble.flip::after { left: auto; right: 28px; }
.g-money, .g-money > .g-col { display: grid; gap: var(--s4); }
.home-game { display: grid; gap: var(--s5); }

@media (min-width: 900px) { .chip.computer-only { display: inline-flex; } }
@media (max-width: 379px) { .g-go { font-size: 15px; padding: 0 var(--s4); } }
.home-game { max-width: 980px; width: 100%; margin: 0 auto; }
/* a phone keeps the one next step in view, docked above the tab bar (the mock's dock) */
@media (max-width: 899px) { .g-dock { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 15; margin-top: calc(-1 * var(--s5)); } }
.main.wide:has(.home-game) > * { max-width: 980px; width: 100%; justify-self: center; }

/* onboarding (research/v4/game-mocks/onboarding): one question a screen, the bar, Slot, one button, the quiet link */
:root { --c-mint-hi: #dcfff1; --c-mint: #7fe3bd; --c-mint-lo: #3ca782; --c-sky-hi: #e3f2ff; --c-sky: #8ec5ff; --c-sky-lo: #4a8ad2; --c-lilac-hi: #f2e9ff; --c-lilac: #c4a8ff; --c-lilac-lo: #8a68d4; --r-opt: 18px; }
.slot-cream { --slot-fill: url(#g-slot); --slot-arm: var(--c-slot-lo); } .slot-orange { --slot-fill: url(#g-slot-orange); --slot-arm: var(--c-orange-lo); }
.slot-mint { --slot-fill: url(#g-slot-mint); --slot-arm: var(--c-mint-lo); } .slot-sky { --slot-fill: url(#g-slot-sky); --slot-arm: var(--c-sky-lo); }
.slot-lilac { --slot-fill: url(#g-slot-lilac); --slot-arm: var(--c-lilac-lo); } .slot-gold { --slot-fill: url(#g-slot-gold); --slot-arm: var(--c-gold-lo); }
.ob-main { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 0 var(--s4) var(--s5); }
.ob { min-height: 100vh; display: flex; flex-direction: column; gap: var(--s5); }
.ob-top { height: 60px; display: flex; align-items: center; gap: var(--s3); margin: 0 calc(-1 * var(--s2)); }
.ob-back { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--c-muted); flex: none; text-decoration: none; }
.ob-back .ico { width: 24px; height: 24px; } .ob-back.off { visibility: hidden; }
.ob-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--c-surface-3); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--c-shadow) 60%, transparent); position: relative; display: block; }
.ob-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(180deg, var(--c-orange-hi), var(--c-orange) 55%, var(--c-orange-lo)); box-shadow: 0 0 12px -2px color-mix(in oklab, var(--c-orange) 70%, transparent); }
.ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.ob-head .g-h1 { font-size: 30px; }
.ob-slot { width: 66px; height: 75px; flex: none; display: block; }
.ob-slot svg, .ob-bigslot svg, .ob-mini svg, .sbadge svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ob-body { flex: 1; display: grid; gap: var(--s3); align-content: start; }
.ob-side { display: none; }
/* sign-up on a computer: the question on the left, a sample ad and three facts beside it */
@media (min-width: 1000px) {
  .ob-main { max-width: 1060px; padding-inline: var(--s6); }
  .ob { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: var(--s8, 64px); row-gap: var(--s5); }
  .ob > * { grid-column: 1; min-width: 0; }
  .ob > .ob-side { display: grid; grid-column: 2; grid-row: 1 / -1; align-self: center; justify-items: center; gap: var(--s4); padding: var(--s6); border-radius: 32px; background: linear-gradient(180deg, var(--c-surface-2), color-mix(in oklab, var(--c-orange) 7%, var(--c-surface-2))); box-shadow: 0 0 0 1px var(--hair-2); }
  .ob-phone { width: min(100%, 270px); padding: 8px; border-radius: 36px; background: linear-gradient(160deg, var(--c-surface-3), var(--c-void)); box-shadow: 0 30px 50px -24px color-mix(in oklab, var(--c-shadow) 90%, transparent), 0 0 90px -30px color-mix(in oklab, var(--c-orange) 55%, transparent); }
  .ob-phone img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 28px; background: var(--c-void); }
  .ob-cap { margin: 0; font-size: 13px; color: var(--c-muted); text-align: center; }
  .ob-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); width: 100%; }
  .ob-facts li { display: grid; gap: 2px; padding: var(--s3); border-radius: 14px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--hair-2); text-align: center; }
  .ob-facts b { font-size: 15px; color: var(--c-ink); } .ob-facts span { font-size: 12px; line-height: 1.35; color: var(--c-ink-2); }
}
.ob-dock { display: grid; gap: var(--s2); position: sticky; bottom: 0; padding: var(--s3) 0 var(--s2); background: linear-gradient(180deg, transparent, var(--c-bg) 30%); }
.ob-quiet { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--c-muted); text-decoration: none; }
.ob-quiet:hover { color: var(--c-ink-2); }
.ob-later { text-align: center; font-size: 14px; color: var(--c-faint); }
.ob-opts { display: grid; gap: var(--s3); }
.ob-opt, .ob-cat { position: relative; display: flex; align-items: center; gap: var(--s4); min-height: 76px; padding: var(--s3) var(--s4); border-radius: var(--r-opt); cursor: pointer;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 4px 0 var(--c-lock-lip); }
.ob-opt input, .ob-cat input, .ob-goal input, .ob-sw input { position: absolute; opacity: 0; pointer-events: none; }
.ob-opt .t { flex: 1; min-width: 0; } .ob-opt .t b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.ob-opt .t span { display: block; font-size: 14px; color: var(--c-muted); margin-top: 2px; }
.ob-opt:has(input:checked), .ob-cat:has(input:checked), .ob-opt.on, .ob-cat.on { background: linear-gradient(180deg, color-mix(in oklab, var(--c-orange) 15%, var(--c-surface-2)), color-mix(in oklab, var(--c-orange) 7%, var(--c-surface)));
  box-shadow: inset 0 0 0 2px var(--c-orange), 0 4px 0 var(--c-orange-deep), 0 16px 30px -14px color-mix(in oklab, var(--c-orange) 60%, transparent); }
.ob-opt:has(input:focus-visible), .ob-cat:has(input:focus-visible), .ob-goal:has(input:focus-visible), .ob-sw:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.ob-radio { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--c-edge); color: var(--c-white); }
.ob-radio .ico { width: 15px; height: 15px; stroke-width: 3; opacity: 0; }
:has(> input:checked) > .ob-radio { background: linear-gradient(180deg, var(--c-orange-hi) -30%, var(--c-orange)); box-shadow: 0 2px 0 var(--c-orange-deep); }
:has(> input:checked) > .ob-radio .ico { opacity: 1; }
.ob-tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair-2), 0 3px 0 var(--c-lock-lip); color: var(--c-ink-2); }
.ob-tile .ico { width: 24px; height: 24px; }
.ob-opt:has(input:checked) .ob-tile { background: linear-gradient(180deg, var(--c-orange-hi) -30%, var(--c-orange) 50%, var(--c-orange-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 3px 0 var(--c-orange-deep); color: var(--c-white); }
.ob-confirm { margin: var(--s5) calc(-1 * var(--s4)) 0; padding: 30px 20px; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--c-green) 16%, var(--c-surface-2)), color-mix(in oklab, var(--c-green) 5%, var(--c-bg)) 60%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-green-hi) 30%, transparent); }
.ob-confirm .c-title { display: flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--c-green-hi); line-height: 1.1; }
.ob-confirm .ok { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--c-green-hi) -30%, var(--c-green) 55%, var(--c-green-lo)); box-shadow: 0 3px 0 var(--c-green-deep); color: var(--c-green-deep); }
.ob-confirm .ok .ico { width: 18px; height: 18px; stroke-width: 3; }
.ob-confirm .t { font-size: 15px; color: var(--c-ink-2); margin-top: var(--s3); line-height: 1.45; }
.ob-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.ob-cat { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 132px; padding: var(--s4); }
.ob-cat .art { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--c-white); background: linear-gradient(160deg, var(--c-surface-3), var(--c-edge));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 30%, transparent), 0 3px 0 color-mix(in oklab, var(--c-shadow) 55%, transparent); }
.ob-cat .art .ico { width: 28px; height: 28px; stroke-width: 2.1; }
.c-food .art { background: linear-gradient(160deg, #8a4d26, #2b170d); } .c-beauty .art { background: linear-gradient(160deg, #6cc4b2, #1e5a53); } .c-pets .art { background: linear-gradient(160deg, #e59a5c, #8a4a1c); }
.c-home .art { background: linear-gradient(160deg, #6b7280, #2c303c); } .c-gifts .art { background: linear-gradient(160deg, #c4a8ff, #5b3fa8); } .c-wellness .art { background: linear-gradient(160deg, #4fa86b, #1d4a2c); }
.c-apparel .art { background: linear-gradient(160deg, #ff8f6b, #9a3109); } .c-fitness .art { background: linear-gradient(160deg, #ffc53d, #7d4c00); } .c-tech .art { background: linear-gradient(160deg, #8ec5ff, #2a4f87); }
.ob-cat .t b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ob-cat .t span { display: block; font-size: 13px; color: var(--c-muted); margin-top: 1px; }
.ob-cat .ob-radio { position: absolute; top: var(--s4); right: var(--s4); }
.ob-video { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 22px; object-fit: cover; background: #000; box-shadow: 0 0 0 1px var(--hair-2), 0 24px 40px -14px color-mix(in oklab, var(--c-shadow) 95%, transparent); }
.ob-steps { list-style: none; margin: 0; padding: var(--s2) var(--s4); display: grid; }
.ob-steps li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; } .ob-steps li + li { box-shadow: inset 0 1px 0 var(--hair); }
.ob-steps .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c-surface-3); font-weight: 700; color: var(--c-ink-2); }
.ob-steps b { display: block; font-size: 15px; font-weight: 600; } .ob-steps li span span { display: block; font-size: 13px; color: var(--c-muted); }
.ob-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ob-goal { position: relative; height: 56px; border-radius: 16px; display: grid; place-items: center; font: 700 17px var(--font-display); cursor: pointer;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 4px 0 var(--c-lock-lip); }
.ob-goal:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c-orange), 0 4px 0 var(--c-orange-deep); background: linear-gradient(180deg, color-mix(in oklab, var(--c-orange) 15%, var(--c-surface-2)), var(--c-surface)); }
.ob-path { list-style: none; margin: var(--s3) 0 0; padding: 0 0 0 var(--s2); display: grid; gap: var(--s3); }
.ob-path li { display: flex; align-items: center; gap: var(--s3); font-size: 15px; font-weight: 600; color: var(--c-ink-2); }
.ob-path .dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 38% 30%, var(--c-lock-hi), var(--c-lock) 60%); box-shadow: 0 4px 0 var(--c-lock-lip); color: var(--c-lock-ink); }
.ob-path li.now .dot { background: radial-gradient(circle at 38% 30%, var(--c-orange-hi), var(--c-orange) 45%, var(--c-orange-lo) 90%); box-shadow: 0 4px 0 var(--c-orange-deep), 0 0 0 6px color-mix(in oklab, var(--c-orange) 16%, transparent); color: var(--c-white); }
.ob-path li.goal .dot { width: 56px; height: 56px; background: radial-gradient(circle at 38% 30%, var(--c-gold-hi), var(--c-gold) 42%, var(--c-gold-lo) 88%); box-shadow: 0 5px 0 var(--c-gold-deep); color: var(--c-gold-ink); }
.ob-path li.goal { font: 800 20px var(--font-display); color: var(--c-gold); }
.ob-path li.goal em { display: inline-block; margin-left: var(--s2); padding: 2px 10px; border-radius: 999px; background: var(--c-gold); color: var(--c-gold-ink); font: 700 12px var(--font-body); font-style: normal; vertical-align: middle; }
.ob-bigslot { width: 160px; height: 181px; margin: var(--s4) auto 0; display: block; }
.ob-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.ob-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2); font-size: 12px; color: var(--c-muted); cursor: pointer; }
.ob-sw i { width: 46px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; box-shadow: inset 0 2px 0 color-mix(in oklab, var(--c-white) 45%, transparent), inset 0 -4px 6px color-mix(in oklab, var(--c-shadow) 25%, transparent), 0 4px 0 color-mix(in oklab, var(--c-shadow) 60%, transparent); }
.ob-sw:has(input:checked) { color: var(--c-ink); font-weight: 600; }
.ob-sw:has(input:checked) i { box-shadow: inset 0 2px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 4px 0 color-mix(in oklab, var(--c-shadow) 60%, transparent), 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-ink); }
.ob-badge { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); }
.sbadge { width: 56px; height: 56px; border-radius: 18px; flex: none; display: grid; place-items: center; padding: 4px; background: var(--c-surface-3); box-shadow: 0 3px 0 var(--c-lock-lip); }
.ob-badge .t b { display: block; font-size: 16px; font-weight: 700; } .ob-badge .t span { display: block; font-size: 13px; color: var(--c-muted); }
.ob-pack { position: relative; height: 300px; }
.ob-pcard { position: absolute; top: 40px; width: 42%; max-width: 160px; aspect-ratio: 150 / 212; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--c-surface-3), var(--c-surface-2));
  box-shadow: inset 0 0 0 1.5px var(--hair-2), 0 6px 0 var(--c-lock-lip), 0 24px 40px -14px color-mix(in oklab, var(--c-shadow) 95%, transparent); }
.ob-pcard::after { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1.5px dashed color-mix(in oklab, var(--c-white) 22%, transparent); }
.ob-pcard.l { left: 4%; transform: rotate(-10deg); } .ob-pcard.r { right: 4%; transform: rotate(10deg); }
.ob-pcard.mid { left: 50%; top: 20px; transform: translateX(-50%); z-index: 2; background: linear-gradient(160deg, #127179, #0a2a33); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--c-orange-hi) 70%, transparent), 0 7px 0 var(--c-orange-deep), 0 30px 60px -14px color-mix(in oklab, var(--c-orange) 55%, transparent); }
.ob-pcard .lk { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--c-bg) 55%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-white) 25%, transparent); color: var(--c-white); }
.ob-pcard .meta { position: absolute; left: 16px; right: 16px; bottom: 18px; }
.ob-pcard .cc { display: inline-flex; height: 24px; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in oklab, var(--c-white) 16%, transparent); color: var(--c-white); }
.ob-pcard .meta i { display: block; height: 9px; border-radius: 5px; background: color-mix(in oklab, var(--c-white) 30%, transparent); margin-top: 12px; filter: blur(1.5px); }
.ob-pcard .meta i + i { width: 60%; margin-top: 8px; background: color-mix(in oklab, var(--c-white) 18%, transparent); }
.ob-sealed { display: flex; align-items: center; gap: var(--s3); }
.ob-mini { width: 60px; height: 68px; flex: none; display: block; }
.ob-sealed .g-bubble { position: relative; transform: none; width: auto; max-width: none; flex: 1; }
.ob-field { display: grid; gap: var(--s2); font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.ob-field input { height: 56px; border-radius: 14px; font-size: 17px; padding: 0 var(--s4); background: var(--c-surface); border: 0; box-shadow: inset 0 0 0 1px var(--hair-2), inset 0 2px 4px color-mix(in oklab, var(--c-shadow) 45%, transparent); }
.ob-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c-orange), 0 0 0 4px color-mix(in oklab, var(--c-orange) 18%, transparent); }
.ob-saving { padding: var(--s4); }
.ob-saving .keep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); text-align: center; margin-top: var(--s3); }
.ob-saving .keep b { display: block; font-size: 14px; font-weight: 600; margin-top: var(--s2); } .ob-saving .keep div > span:last-child { display: block; font-size: 12px; color: var(--c-muted); }
.ob-ico { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--c-orange-hi), var(--c-orange) 55%, var(--c-orange-lo)); color: var(--c-white); box-shadow: 0 4px 0 var(--c-orange-deep); }
.ob-ico.gold { background: radial-gradient(circle at 38% 30%, var(--c-gold-hi), var(--c-gold) 42%, var(--c-gold-lo) 88%); color: var(--c-gold-ink); box-shadow: 0 4px 0 var(--c-gold-deep); }
.ob-ico.sbadge { border-radius: 18px; background: var(--c-surface-3); box-shadow: 0 3px 0 var(--c-lock-lip); }
.ob-sum { padding: var(--s2) var(--s4); display: grid; }
.ob-sum > div { display: flex; align-items: center; gap: var(--s3); min-height: 48px; } .ob-sum > div + div { box-shadow: inset 0 1px 0 var(--hair); }
.ob-sum .ico { color: var(--c-muted); width: 18px; height: 18px; } .ob-sum .k { width: 52px; font-size: 13px; color: var(--c-muted); } .ob-sum b { font-weight: 600; }
.ob-offer { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); text-decoration: none; color: inherit; position: relative; }
.ob-offer.on { box-shadow: inset 0 0 0 2px var(--c-orange), 0 4px 0 var(--c-orange-deep); background: linear-gradient(180deg, color-mix(in oklab, var(--c-orange) 13%, var(--c-surface-2)), var(--c-surface)); }
.ob-offer .t { flex: 1; min-width: 0; } .ob-offer .t b { display: block; font-size: 17px; font-weight: 700; } .ob-offer .t span { display: block; font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.ob-offer .price { font: 800 28px var(--font-display); letter-spacing: -.03em; }
.ob-offer .best { position: absolute; top: -11px; left: var(--s4); padding: 2px 10px; border-radius: 999px; background: var(--c-gold); color: var(--c-gold-ink); font-size: 12px; font-weight: 700; }
@media (max-width: 359px) { .ob-head .g-h1 { font-size: 26px; } .ob-slot { width: 52px; height: 59px; } .ob-cat { min-height: 116px; padding: var(--s3); } }
@media (min-width: 900px) { .ob-main { padding-top: var(--s5); } .ob-head .g-h1 { font-size: 36px; } }

.goal-tag { display: inline-block !important; margin-top: 4px !important; padding: 1px 10px; border-radius: 999px; background: var(--c-gold); color: var(--c-gold-ink) !important; font-size: 12px !important; font-weight: 700; }

.g-lesson { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--c-gold); text-decoration: none; }
.g-lesson:hover { text-decoration: underline; }

/* a step fits the window: Continue pinned, no scroll under it */
.ob { min-height: calc(100dvh - var(--s5)); }
@media (min-width: 900px) { .ob { min-height: calc(100dvh - 2 * var(--s5)); } }
/* motion (Emil Kowalski's rules, Nov 12: "world class"): strong ease-out curves, presses that answer in 160 ms,
   only transform and opacity animate, nothing animates that a person sees tens of times a day except a press, and
   reduced motion keeps fades only. Moving between pages is a view transition: the bar, the tabs and the onboarding
   progress stay put while the page changes under them; onboarding slides forward and back like a phone's screens. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: var(--ease-out); }
.top { view-transition-name: top; } .tabs { view-transition-name: tabs; }
.tab[aria-current="page"] .pill2 { view-transition-name: tab-pill; } .d-nav a[aria-current="page"] { view-transition-name: nav-pill; }
::view-transition-group(tab-pill), ::view-transition-group(nav-pill) { animation-duration: 280ms; animation-timing-function: var(--ease-drawer); }
::view-transition-old(tab-pill), ::view-transition-old(nav-pill) { animation: none; opacity: 0; } ::view-transition-new(tab-pill), ::view-transition-new(nav-pill) { animation: none; }
/* onboarding: the bar grows, Slot and the button stay, the question slides (forward from the right, back from the left) */
.ob-bar i { view-transition-name: ob-fill; } .ob-slot { view-transition-name: ob-slot; } .ob-dock { view-transition-name: ob-dock; }
::view-transition-group(ob-fill) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-old(ob-fill), ::view-transition-new(ob-fill) { height: 100%; animation: none; } ::view-transition-old(ob-fill) { opacity: 0; }
::view-transition-group(ob-slot), ::view-transition-group(ob-dock) { animation-duration: 300ms; animation-timing-function: var(--ease-out); }
html:active-view-transition-type(ob-fwd)::view-transition-old(root) { animation: vt-out-l 200ms var(--ease-out) both; }
html:active-view-transition-type(ob-fwd)::view-transition-new(root) { animation: vt-in-r 320ms var(--ease-out) both; }
html:active-view-transition-type(ob-back)::view-transition-old(root) { animation: vt-out-r 200ms var(--ease-out) both; }
html:active-view-transition-type(ob-back)::view-transition-new(root) { animation: vt-in-l 320ms var(--ease-out) both; }
@keyframes vt-out-l { to { opacity: 0; transform: translateX(-32px); } } @keyframes vt-in-r { from { opacity: 0; transform: translateX(48px); } }
@keyframes vt-out-r { to { opacity: 0; transform: translateX(32px); } } @keyframes vt-in-l { from { opacity: 0; transform: translateX(-48px); } }

/* presses: the 3D buttons sink onto their lip; everything else tapped scales a touch */
.btn, .g-go, .g-quiet { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms ease; -webkit-tap-highlight-color: transparent; }
.g-quiet:active { transform: translateY(3px); box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 1px 0 var(--c-lock-lip); }
.ob-opt, .ob-cat, .ob-goal, .ob-offer, .chip, .tab, a.stat, .g-srow, .you-list a, .you-list button, .tile { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms ease; -webkit-tap-highlight-color: transparent; }
.ob-opt:active, .ob-cat:active, .ob-offer:active, a.stat:active, .tile:active { transform: scale(.98); }
.ob-goal:active, .chip:active, .ob-sw:active i { transform: scale(.96); }
.tab:active .pill2, .you-list a:active, .you-list button:active, .g-srow:active { transform: scale(.97); }
.tab .pill2, .ob-sw i { transition: transform 160ms var(--ease-out); }
.g-node.now { transition: transform 200ms var(--ease-out); } .g-node.now:active { transform: scale(.94); }
.btn.primary:hover, .g-go:hover { filter: none; }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover, .g-go:hover { filter: brightness(1.06); } .g-node.now:hover { transform: scale(1.04); } }
/* a pick: its check springs in, its tile lights */
.ob-radio { transition: background-color 160ms ease, box-shadow 160ms ease; }
.ob-radio .ico { transform: scale(.4); transition: transform 260ms var(--ease-spring), opacity 120ms ease; }
:has(> input:checked) > .ob-radio .ico { transform: none; }
.ob-tile, .ob-cat .art { transition: transform 260ms var(--ease-spring); }
.ob-opt:has(input:checked) .ob-tile, .ob-cat:has(input:checked) .art { transform: rotate(-6deg) scale(1.06); }
.ob-sw i { transition: transform 260ms var(--ease-spring), box-shadow 160ms ease; } .ob-sw:has(input:checked) i { transform: scale(1.08); }
.ob-bigslot svg { transition: transform 260ms var(--ease-spring); }
/* a confirmation rises like a sheet, Slot perched on it */
.ob-confirm { animation: g-sheet 420ms var(--ease-drawer) both; }
.ob-confirm .ok { animation: g-pop-in 420ms 180ms var(--ease-spring) both; }
@keyframes g-sheet { from { transform: translateY(40px); opacity: 0; } }
@keyframes g-pop-in { from { transform: scale(.85); opacity: 0; } }
/* the pack: three cards deal in */
.ob-pcard { animation: g-deal 520ms var(--ease-out) both; } .ob-pcard.l { animation-delay: 60ms; --r: -10deg; } .ob-pcard.mid { animation-delay: 0ms; --r: 0deg; } .ob-pcard.r { animation-delay: 120ms; --r: 10deg; }
@keyframes g-deal { from { opacity: 0; translate: 0 60px; scale: .9; } }
/* the goal's gold stop lands */
.ob-path li { animation: g-rise 360ms var(--ease-out) both; } .ob-path li:nth-child(2) { animation-delay: 40ms; } .ob-path li:nth-child(3) { animation-delay: 80ms; } .ob-path li:nth-child(4) { animation-delay: 120ms; } .ob-path li.goal { animation: g-pop-in 480ms 200ms var(--ease-spring) both; }
@keyframes g-rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }

/* the path: a step that lit since you last looked turns gold where it sits with a burst, then the now node lands
   (game.js adds .lit-new once per step, on this browser) */
.g-node.lit-new { animation: g-flip 700ms var(--ease-out) both; }
@keyframes g-flip { 0% { transform: rotateY(90deg) scale(.8); filter: saturate(0) brightness(.7); } 60% { transform: rotateY(-12deg) scale(1.08); filter: none; } 100% { transform: none; } }
.g-node.now.land { animation: g-land 560ms 520ms var(--ease-spring) both; }
@keyframes g-land { from { transform: scale(.85); opacity: 0; } }
.g-burst { position: absolute; z-index: 4; width: 0; height: 0; pointer-events: none; }
.g-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c-gold); opacity: 0; animation: g-spark 700ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
.g-burst i:nth-child(3n) { background: var(--c-gold-hi); border-radius: 50%; } .g-burst i:nth-child(4n) { background: var(--c-orange); }
@keyframes g-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 56px)) scale(.4); } }
/* a number that changed since you last looked counts to its new value and glows once */
.g-glow { animation: g-glow 900ms var(--ease-out); }
@keyframes g-glow { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 18px color-mix(in oklab, currentColor 70%, transparent); } 100% { text-shadow: 0 0 0 transparent; } }
.chip.g-glow { animation: g-chip 900ms var(--ease-out); }
@keyframes g-chip { 30% { transform: scale(1.08); box-shadow: var(--hi-line), 0 0 0 1px currentColor, 0 0 20px -2px currentColor; } }

/* Make's render: the dial fills with the browser's clock; the striped stage slides */
.g-dial .arc { transition: stroke-dasharray 1s linear; }
.g-eta .when { white-space: nowrap; font-size: clamp(26px, 8.4vw, 34px); }
@media (max-width: 359px) { .g-eta { padding-left: var(--s4); } .g-eta .when { font-size: 23px; } .g-eta .when small { font-size: 14px; } }
.g-eta.late .g-dial .arc { stroke: var(--c-wait); }
.g-ready { animation: g-sheet 420ms var(--ease-drawer) both; }

/* moments, choreographed: the backdrop, then the art springs in with a burst, then the words, one after another */
.g-moment.big { animation: g-fade 220ms var(--ease-out) both; }
.g-moment.big .rays { animation: g-spin 40s linear infinite, g-rays-in 700ms var(--ease-out) both; }
@keyframes g-rays-in { from { opacity: 0; scale: .6; } }
.g-moment.big .g-m-art, .g-moment.big .g-m-video { animation: g-art 640ms 80ms var(--ease-spring) both; }
@keyframes g-art { from { opacity: 0; transform: scale(.55) translateY(24px); } }
.g-moment.big.coin .g-m-art > svg { animation: g-coin 1100ms 80ms var(--ease-out) both; transform-style: preserve-3d; }
@keyframes g-coin { from { transform: rotateY(-540deg); } }
.g-moment.big .g-m-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 35%, color-mix(in oklab, var(--c-white) 55%, transparent) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: overlay; animation: g-shine 900ms 700ms var(--ease-in-out) both; pointer-events: none; }
.g-moment.big .g-m-video + .g-m-art, .g-moment.big.ad .g-m-art::after { display: none; }
@keyframes g-shine { to { background-position: -40% 0; } }
.g-moment.big .g-m-video { animation-name: g-art, g-frame; animation-duration: 640ms, 1600ms; animation-delay: 80ms, 700ms; animation-timing-function: var(--ease-spring), ease-in-out; animation-iteration-count: 1, infinite; }
@keyframes g-frame { 50% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-orange) 90%, transparent), 0 0 90px color-mix(in oklab, var(--c-orange) 60%, transparent); } }
.g-moment.big .g-slot { animation: g-peek 600ms 420ms var(--ease-spring) both; }
@keyframes g-peek { from { opacity: 0; transform: translate(-30px, 30px) rotate(-12deg) scale(.7); } }
.g-moment.big .g-m-k1, .g-moment.big .g-m-amt, .g-moment.big .g-m-title, .g-moment.big .g-m-what, .g-moment.big .g-m-body > .card { animation: g-rise 420ms var(--ease-out) both; }
.g-moment.big .g-m-k1 { animation-delay: 300ms; } .g-moment.big .g-m-amt, .g-moment.big .g-m-title { animation-delay: 360ms; } .g-moment.big .g-m-what { animation-delay: 460ms; } .g-moment.big .g-m-body > .card { animation-delay: 560ms; }
.g-moment.big .g-m-skip { animation: g-fade 400ms 1200ms ease both; }
.g-moment.big.out { animation: g-out 200ms var(--ease-out) both; }
.g-moment.big.out .g-m-body { transition: transform 200ms var(--ease-out); transform: scale(.98); }
.g-moment.small { animation: g-toast 420ms var(--ease-drawer) both; }
.g-moment.small .g-m-art { animation: g-pop-in 420ms 120ms var(--ease-spring) both; }
.g-moment.small.out { animation: g-toast-out 180ms var(--ease-out) both; }
@keyframes g-toast { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes g-toast-out { to { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 160ms !important; }
  html:active-view-transition-type(ob-fwd)::view-transition-old(root), html:active-view-transition-type(ob-fwd)::view-transition-new(root),
  html:active-view-transition-type(ob-back)::view-transition-old(root), html:active-view-transition-type(ob-back)::view-transition-new(root) { animation-name: g-fade; }
  .ob-confirm, .ob-confirm .ok, .ob-pcard, .ob-path li, .ob-path li.goal, .g-node.lit-new, .g-node.now.land, .g-ready, .g-moment.big .rays, .g-moment.big .g-m-art, .g-moment.big .g-m-video,
  .g-moment.big.coin .g-m-art > svg, .g-moment.big .g-slot, .g-moment.big .g-m-k1, .g-moment.big .g-m-amt, .g-moment.big .g-m-title, .g-moment.big .g-m-what, .g-moment.big .g-m-body > .card, .g-moment.small, .g-moment.small .g-m-art { animation: g-fade 200ms ease both !important; }
  .g-moment.big .g-m-art::after, .g-burst { display: none; }
  .ob-radio .ico, .ob-tile, .ob-cat .art, .ob-sw i { transition: opacity 120ms ease; transform: none !important; }
}

/* Home's head on a phone: the count and its dots on one line (the mock's), the second sentence only where it fits */
.g-head { align-items: flex-end; }
.g-head .g-sub { white-space: nowrap; }
@media (max-width: 379px) { .g-sub-more { display: none; } .g-steps i { width: 12px; } }
@media (min-width: 380px) and (max-width: 520px) { .g-head .g-sub { font-size: 13.5px; letter-spacing: -.005em; } .g-steps i { width: 10px; } .g-steps { gap: 3px; } }
/* the path's words: a bubble holds its step, one line of lesson and the goal tag without growing into the next row */
.g-bubble { width: 50%; max-width: 250px; }
.g-lesson { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-tag { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.g-lab span, .g-bubble span { overflow-wrap: anywhere; }
.make-short { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--c-line); }
.make-short .quiet { flex: 1 1 14rem; }
/* the moment's parts: the ad's glowing frame, the burst around the art, the first sale's receipt */
.g-m-ad { position: relative; display: grid; place-items: center; }
.g-m-ad .g-burst, .g-m-art .g-burst { left: 50%; top: 50%; z-index: -1; }
.g-moment .g-burst i { width: 10px; height: 10px; left: -5px; top: -5px; animation-duration: 900ms; }
.g-moment.green .g-burst i:nth-child(2n) { background: var(--c-green-hi); }
.g-m-receipt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0; width: 100%; margin-top: 8px; gap: 0; }
.g-m-receipt > div { text-align: center; padding: 0 8px; min-width: 0; } .g-m-receipt > div + div { box-shadow: inset 1px 0 0 var(--hair); }
.g-m-receipt .g-k { display: block; font-size: 12px; } .g-m-receipt b { display: block; font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; } .g-m-receipt b.mine { color: var(--c-green); }
.g-moment.small .g-burst { display: none; }
@media (max-height: 640px) { .g-m-art { width: 150px; height: 150px; } .g-m-video { width: 150px; } .g-m-amt { font-size: 60px; } .g-m-title { font-size: 32px; } }
/* onboarding's confirmation sits at the foot like a sheet, Slot perched on its edge */
.ob-body:has(> .ob-confirm) { align-content: end; }
.ob-confirm { position: relative; margin-top: 72px; }
.ob-perch { position: absolute; right: 20px; top: -62px; width: 60px; height: 68px; }
/* Slot's colour screen: Slot stands in a soft light, on a shadow */
.ob-bigslot { position: relative; isolation: isolate; }
.ob-bigslot::before { content: ""; position: absolute; inset: -30% -40% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--slot-arm, var(--c-slot-lo)) 34%, transparent), transparent); }
.ob-bigslot::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 18px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c-shadow) 80%, transparent), transparent); }
/* the pack's side cards take a warm tint, like the mock's */
.ob-pcard.l, .ob-pcard.r { background: linear-gradient(160deg, #5a3520, #24160e); }
/* Earnings' rows: what and when on the left, the amount (green, grey while held, red taken back) or status at the end */
.g-rows { display: grid; }
.g-rows .g-srow { padding: 8px 0; }
.g-srow .amt.bad { color: var(--c-bad); }
.g-srow .t span { overflow-wrap: anywhere; }
/* Make: one shop, one engine, one orange button with its price on it (Creatify's link-first make step, our game pieces) */
.mk { display: grid; gap: var(--s5); max-width: 560px; width: 100%; margin: 0 auto; }
.mk-form { display: grid; gap: var(--s4); }
.mk-ava { width: 56px; height: 56px; flex: none; display: block; }
.mk-ava .art { width: 100%; height: 100%; border-radius: 16px; display: grid; place-items: center; font: 800 20px/1 var(--font-display); letter-spacing: -.02em; color: var(--c-white); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 24%, transparent), 0 3px 0 var(--c-lock-lip), 0 10px 18px -10px var(--c-shadow); }
.c-none .art { background: linear-gradient(160deg, var(--c-surface-3), var(--c-edge)); }
.g-srow .mk-ava { width: 40px; height: 40px; } .g-srow .mk-ava .art { border-radius: 12px; font-size: 15px; }
/* a phone's now bubble with a lesson on it keeps to the step and the lesson, so it never covers the next step's words */
@media (max-width: 699px) { .g-path .g-bubble:has(.g-lesson) > span:not(.goal-tag) { display: none; } }
.mk-eng { min-height: 68px; }
.mk-eng.off { opacity: .5; cursor: not-allowed; }
.mk-cost { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.mk-cost .ico { width: 16px; height: 16px; stroke-width: 2.4; color: var(--c-gold); }
.mk-after { font-size: 13px; color: var(--c-muted); text-align: center; }
.mk-fine { font-size: 12px; line-height: 1.5; color: var(--c-faint); text-align: center; text-wrap: balance; }
.mk-form .p-fac, .mk-form .p-free { display: none; }
.mk-form:has(input[value="ast_factory_engine"]:checked) .p-fast, .mk-form:has(input[value="ast_sample_engine"]:checked) .p-fast { display: none; }
.mk-form:has(input[value="ast_factory_engine"]:checked) .p-fac, .mk-form:has(input[value="ast_sample_engine"]:checked) .p-free { display: inline-flex; }
.mk-more { border-top: 0; padding-top: 0; }
.mk-more > summary { font-size: 13px; font-weight: 600; color: var(--c-muted); min-height: 44px; display: flex; align-items: center; justify-content: center; list-style: none; }
.mk-more > summary::-webkit-details-marker { display: none; }
.mk-more[open] > summary { color: var(--c-ink-2); }
.mk-lesson { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; }
.mk-lesson .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mk-lesson .t b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.mk-lesson .t > span { font-size: 13px; color: var(--c-muted); }
.mk-lesson { padding: var(--s3) var(--s4); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--hair-2); }
.mk-lesson .g-tile { color: var(--c-gold); }
.mk-lesson > .i:last-child { color: var(--c-faint); }
.mk-none { padding: var(--s5) var(--s4); border-radius: var(--r-card); border: 1px dashed var(--hair-2); color: var(--c-muted); font-size: 14px; text-align: center; text-wrap: balance; }
/* ---- Make (pages/make.ts): the composer, the bench, pick a shop, just made; a call's page; an ad's own page.
   A create screen read live (research/ux-refs/craft-1113/runway-home-create-1440.png: one composer on top, the picks as
   chips in it, rows of real pictures under it) inside Home's lobby (the st- tiles, bars and dots). Its own names
   (mke-, mkm-) so no older rule reaches it. ---- */
.mke { display: grid; gap: 24px; min-width: 0; }
.mke > * { min-width: 0; }
.mke-hero { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 236px; gap: 28px; align-items: start; padding: 24px; border-radius: 10px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(255, 106, 31, .3), rgba(255, 106, 31, 0) 60%), radial-gradient(60% 90% at 100% 100%, rgba(255, 106, 31, .12), rgba(255, 106, 31, 0) 70%), var(--st-pan); }
.mke-hero.pick { grid-template-columns: minmax(0, 1fr) 236px; }
.mke-hero.solo { grid-template-columns: minmax(0, 1fr); }
.mke-pic { display: block; min-width: 0; } .mke-pic .st-tile-p { box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); }
.mke-pic .st-tile-n { font-size: 34px; bottom: 30px; left: 10px; right: 10px; } .mke-pic .st-tile-s { font-size: 10px; bottom: 12px; } .mke-pic .st-tile-l { font-size: 96px; }
.mke-c { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mke-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-or2); }
.mke-k.bad { color: #ff7a7a; } .mke-k .ico { width: 15px; height: 15px; }
.mke-h { margin: 0; font: 800 46px/.98 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
.mke-sub { margin: 0; max-width: 62ch; font-size: 15px; color: var(--st-mute); } .mke-sub b { color: #fff; font-weight: 800; }
.mke-site { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--st-mute); }
.st-shell .main a.mke-change { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.mke-why { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d5d9e0; } .mke-why .ico { width: 16px; height: 16px; color: var(--st-gr); }
.mke-engs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.mke-engs.one { grid-template-columns: minmax(0, 1fr); }
.mke-eng { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; min-height: 64px; padding: 12px 14px; border-radius: 8px; background: var(--st-pan2); cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: background .15s, box-shadow .15s; }
.mke-eng input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mke-eng .t { display: grid; gap: 3px; min-width: 0; } .mke-eng .t b { font-size: 15px; font-weight: 800; color: #fff; } .mke-eng .t span { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--st-mute); }
.mke-eng .mk-cost { font-size: 15px; color: #fff; } .mke-eng .mk-cost .ico { color: var(--st-or2); }
.mke-eng:has(input:checked) { background: rgba(255, 106, 31, .16); box-shadow: inset 0 0 0 2px var(--st-or); }
.mke-eng:has(input:focus-visible) { outline: 2px solid var(--st-or2); outline-offset: 2px; }
.mke-eng.off { opacity: .42; cursor: not-allowed; }
.mke-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
.st-shell .mke-go .g-go { width: auto; min-width: 300px; min-height: 54px; padding: 0 26px; font-size: 18px; }
.mke-go .g-go .tail { position: static; margin-left: 6px; opacity: .8; font-size: 15px; font-weight: 700; }
.mke-go .mk-after { margin: 0; text-align: left; }
.mke-fine { margin: 0; max-width: 72ch; font-size: 12px; line-height: 1.5; color: #7b8494; }
.st-shell .main a.mke-quiet { color: var(--st-mute); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mke-more > summary, .mke-paste > summary { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; font-weight: 700; color: var(--st-mute); cursor: pointer; list-style: none; }
.mke-more > summary::-webkit-details-marker, .mke-paste > summary::-webkit-details-marker { display: none; }
.mke-more > summary::after, .mke-paste > summary::after { content: "›"; margin-left: 8px; transition: transform .15s; } .mke-more[open] > summary::after, .mke-paste[open] > summary::after { transform: rotate(90deg); }
.mke-more[open] { display: grid; gap: 12px; }
.mke-list { display: grid; gap: 6px; } .mke-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--st-bg); }
.mke-list .t { flex: 1; display: grid; min-width: 0; } .mke-list .t span { font-size: 12px; color: var(--st-mute); }
.mke-wal { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 8px; background: rgba(0, 0, 0, .32); }
.mke-big { display: flex; align-items: center; gap: 6px; font: 800 34px/1 var(--font-display); letter-spacing: -.02em; } .mke-big .ico { width: 26px; height: 26px; color: var(--st-or2); }
.st-shell .main a.mke-wal-a { margin-top: 8px; height: 40px; border-radius: 8px; background: var(--st-pan2); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.mke-find { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 16px; border-radius: 8px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px var(--st-pan2); color: var(--st-mute); }
.mke-find:focus-within { box-shadow: inset 0 0 0 2px var(--st-or2); }
.st-shell .mke-find input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; outline: 0; font-size: 16px; color: #fff; }
.st-shell .mke-find .btn { min-height: 44px; padding: 0 18px; }
.mke-pasteform { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; } .mke-pasteform .mke-go { grid-column: 1 / -1; margin-top: 0; }
.mke-pasteform label { color: var(--st-mute); }
.mke-bars { margin: 0; } .mke-bars a { cursor: pointer; }
.mke-row { display: grid; } .mke-row .st-sh { margin: 0 0 12px; } .mke-row .st-more { margin: 14px 0 0; }
.mke-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 15px; }
.mke-tile .st-tile-p { transition: transform .15s ease, box-shadow .15s ease; } .mke-tile:hover .st-tile-p { transform: translateY(-3px); }
.mke-tile.on .st-tile-p { box-shadow: 0 0 0 3px var(--st-or), 0 10px 24px -8px rgba(255, 106, 31, .6); }
.mke-nobench { margin: 0; }
.mke-x { display: none; }
.mke .st-dot.wait { background: #76808f; box-shadow: none; }
.mke-tile .st-tile-pic.mke-under { inset: 0; }
.mke-tile .st-tile-p:has(.st-frame)::after { inset: 48% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86) 72%); }
.mke-failed { padding: 12px 16px; border-radius: 8px; background: rgba(255, 90, 90, .1); box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .25); }
.mke-failed summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .mke-failed summary::-webkit-details-marker { display: none; } .mke-failed summary > .i { color: #ff8a8a; }
.mke-failed summary .t { display: grid; gap: 2px; } .mke-failed summary b { font-size: 15px; } .mke-failed summary .t span { font-size: 13px; color: var(--st-mute); }
.mke-failed-row { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .mke-failed-row p { margin: 0; font-size: 13px; color: #d5d9e0; overflow-wrap: anywhere; }
.mke-line { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; background: var(--st-pan); } .mke-line > .i:first-child { color: var(--st-or2); } .mke-line > .i:last-child { color: var(--st-mute); }
.mke-line .t { flex: 1; display: grid; gap: 2px; min-width: 0; } .mke-line .t b { font-weight: 700; } .mke-line .t span { font-size: 13px; color: var(--st-mute); }
/* a call's page: the clock and its window inside the composer's place */
.mke-eta.g-eta { padding: 14px 16px; border-radius: 8px; background: rgba(0, 0, 0, .32); }
.mke-eta .g-k { margin: 0; font-size: 12px; font-weight: 700; color: var(--st-mute); } .mke-eta .when { margin: 6px 0 0; color: #fff; } .mke-eta .k2 { margin: 6px 0 0; color: var(--st-mute); }
.mke-eta.late .when { color: var(--st-or2); } .mke-eta .g-dial .c span { color: var(--st-mute); }
.mke-track { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.mke-track li { min-height: 40px; padding: 0 6px; border-radius: 8px; background: rgba(0, 0, 0, .32); display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 700; color: var(--st-mute); }
.mke-track li > span { display: inline-flex; align-items: center; gap: 6px; } .mke-track .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.mke-track li.d { background: rgba(45, 224, 28, .14); color: var(--st-gr); }
.mke-track li.n { background: var(--st-or) repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 10px, rgba(255, 255, 255, 0) 10px 20px); background-size: 28px 28px; color: #1b0b00; animation: mke-stripe 1s linear infinite; }
.mke-track li.bad { background: rgba(255, 90, 90, .16); color: #ff8a8a; }
@keyframes mke-stripe { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .mke-track li.n { animation: none; } }
/* an ad's own page: the ad large on the left and kept in view, the shop, what it is and the one next thing beside it */
.mke.mkm { grid-template-columns: 380px minmax(0, 1fr); column-gap: 36px; align-items: start; }
.mkm-ad { position: sticky; top: 84px; } .st-shell .mkm-ad .player { display: block; width: 100%; max-width: none; border-radius: 12px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 100px -30px rgba(255, 106, 31, .55); }
.mkm-c { display: grid; gap: 16px; align-content: start; min-width: 0; }
.mkm-shop { display: flex; align-items: center; gap: 12px; justify-self: start; } .mkm-ava { width: 48px; flex: none; }
.mkm-ava .st-tile-p { aspect-ratio: 1; border-radius: 10px; } .mkm-ava .st-tile-p::after, .mkm-ava .st-tile-n, .mkm-ava .st-tile-s { display: none; } .mkm-ava .st-tile-l { padding: 0; font-size: 24px; } .mkm-ava .st-tile-pic { inset: 0; }
.mkm-shop .t { display: grid; } .mkm-shop .t b { font-size: 16px; font-weight: 800; } .mkm-shop .t span { font-size: 13px; color: var(--st-mute); }
.mkm .mke-h { font-size: 38px; }
.st-shell .mkm .card.md-next { gap: 14px; padding: 18px; }
.st-shell .mkm .card.md-keep { background: radial-gradient(100% 140% at 0% 0%, rgba(255, 106, 31, .26), rgba(255, 106, 31, 0) 65%), var(--st-pan); box-shadow: inset 0 0 0 2px var(--st-or); }
.mkm .md-next .g-go, .mkm .md-next .btn.primary { width: 100%; }
@media (max-width: 1199px) {
  .mke-hero { grid-template-columns: 200px minmax(0, 1fr); } .mke-hero.pick { grid-template-columns: minmax(0, 1fr); } .mke-hero .mke-wal { display: none; }
  .mke.mkm { grid-template-columns: 320px minmax(0, 1fr); column-gap: 28px; }
}
@media (max-width: 760px) {
  .mke { gap: 20px; }
  .mke-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; padding: 14px; background: radial-gradient(120% 70% at 0% 0%, rgba(255, 106, 31, .3), rgba(255, 106, 31, 0) 70%), var(--st-pan); }
  .mke-hero:has(> .mke-pic) > .mke-c { display: contents; }
  .mke-hero:has(> .mke-pic) > .mke-pic { grid-row: 1 / span 3; align-self: start; }
  .mke-hero:has(> .mke-pic) > .mke-c > * { grid-column: 1 / -1; }
  .mke-hero:has(> .mke-pic) > .mke-c > :is(.mke-k, .mke-h, .mke-site) { grid-column: 2; }
  .mke-pic .st-tile-n { font-size: 15px; bottom: 16px; left: 4px; right: 4px; } .mke-pic .st-tile-s { display: none; } .mke-pic .st-tile-l { font-size: 44px; }
  .mke-h { font-size: 28px; line-height: 1.02; } .mke-k { font-size: 11px; } .mke-site { font-size: 13px; }
  .mke-engs { grid-template-columns: minmax(0, 1fr); gap: 8px; } .mke-eng { min-height: 56px; padding: 10px 12px; }
  .mke-go { display: grid; justify-items: stretch; } .st-shell .mke-go .g-go { min-width: 0; width: 100%; }
  .mke-go .mk-after { text-align: center; }
  .mke-pasteform { grid-template-columns: minmax(0, 1fr); }
  .mke-find { height: 52px; padding-left: 12px; } .st-shell .mke-find .btn { padding: 0 12px; }
  .mke-tiles { display: flex; gap: 9px; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; } .mke-tiles::-webkit-scrollbar { display: none; }
  .mke-tiles .st-tile { width: 116px; flex: none; } .mke-tiles .st-tile-n { font-size: 20px; bottom: 22px; }
  .mke-track li { font-size: 12px; }
  .mke-bars a { gap: 8px; padding: 0 10px; font-size: 13px; } .mke-bars a > .i:first-child { display: none; }
  .mke.mkm { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } .mkm-ad { position: static; justify-self: center; width: min(100%, 236px); } .mkm .mke-h { font-size: 28px; }
}
/* Sell: your claims, your pack, then open shops (chips over a list) */
.sl-act { display: contents; }
.sl-link { justify-self: center; min-height: 36px; padding: 0 var(--s3); border: 0; background: none; font: 600 13px var(--font-body); color: var(--c-muted); cursor: pointer; border-radius: 10px; }
.sl-link:hover { color: var(--c-ink-2); }
.sl-sec { display: grid; gap: var(--s3); min-width: 0; }
.card.sl-list { padding: var(--s1) var(--s4); gap: 0; }
.sl-list .g-srow { min-height: 64px; }
.sl-list .btn.small { min-height: 40px; min-width: 72px; }
.sl-chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4); }
.sl-chips::-webkit-scrollbar { display: none; }
.sl-chip { flex: none; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--c-ink-2); text-decoration: none; background: var(--c-surface-2); box-shadow: var(--hi-line), 0 0 0 1px var(--hair); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.sl-chip:active { transform: scale(.96); }
.sl-chip.on { background: var(--c-ink); color: var(--c-bg); box-shadow: none; }
/* the playbook on Home: the course's lessons in order, each on its Path step; and a lesson's own page */
.pb { display: grid; gap: var(--s3); min-width: 0; }
.pb .g-badges-top a { text-decoration: none; }
.pb-row { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4) var(--s2); scroll-padding-left: var(--s4); }
.pb-row::-webkit-scrollbar { display: none; }
.pb-card { flex: none; width: 156px; min-height: 132px; scroll-snap-align: start; display: grid; gap: var(--s2); align-content: start; padding: var(--s3); border-radius: 16px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface) 70%); box-shadow: var(--hi-line), 0 0 0 1px var(--hair); transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.pb-card:active { transform: scale(.97); }
.pb-card b { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.pb-card .on { font-size: 12px; line-height: 1.35; color: var(--c-muted); }
.pb-n { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font: 800 14px/1 var(--font-display); color: var(--c-ink-2); background: var(--c-surface-3); box-shadow: var(--hi-line); font-variant-numeric: tabular-nums; }
.pb-n .ico { width: 15px; height: 15px; stroke-width: 3; }
.pb-card.done .pb-n { color: var(--c-gold-ink); background: linear-gradient(180deg, var(--c-gold-hi) -30%, var(--c-gold) 55%, var(--c-gold-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 2px 0 var(--c-gold-deep); }
.pb-card.done b { color: var(--c-ink-2); }
.pb-card.next { box-shadow: var(--hi-line), 0 0 0 1.5px color-mix(in oklab, var(--c-gold) 70%, transparent), 0 12px 24px -14px color-mix(in oklab, var(--c-gold) 60%, transparent); }
.pb-card.next .on { color: var(--c-gold); font-weight: 600; }
@media (min-width: 900px) { .pb-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } .pb-card { width: auto; } }
.ls-top { display: flex; align-items: center; gap: var(--s3); }
.ls-dots { flex: 1; }
.card.ls-body { gap: var(--s4); padding: var(--s5); }
.ls-body p { font-size: 16px; line-height: 1.6; color: var(--c-ink-2); text-wrap: pretty; }
.ls-body p b { color: var(--c-ink); font-weight: 700; }
.card.ls-step { gap: var(--s4); padding: var(--s4); }
.ls-step .g-tile { color: var(--c-gold); }
.g-srow .pb-n { width: 32px; height: 32px; border-radius: 10px; }
/* a tail (the price) sits beside its label where the button is too narrow to hold it at the edge */
@media (max-width: 379px) { .g-go .tail { position: static; margin-left: var(--s1); } }
@media (min-width: 700px) { .sl-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.ls-dots { margin-bottom: 0; } .ls-dots i { flex: 1; max-width: 44px; }
/* the wait card: the window and the dial share the row at every width (the dial ran off a 390 phone's card) */
.g-eta > div:first-child { flex: 1; min-width: 0; }
.g-eta .when { font-size: clamp(22px, 6.4vw, 34px); }
@media (max-width: 419px) { .g-dial { width: 88px; height: 88px; } .g-dial .c b { font-size: 21px; } }
/* a phone's docked button floats over the page on a fade, so what scrolls under it never reads as cut off */
@media (max-width: 899px) { .g-dock::before { content: ""; position: absolute; inset: -28px calc(-1 * var(--s4)) -12px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--c-bg) 92%, transparent) 46%); } .g-dock { isolation: isolate; } }
.g-nextbar .g-go .tail { position: static; margin-left: var(--s1); }
/* an ad's own page: the ad, where it stands (made, review, on sale), and the one next thing to do with it */
.card.md-next { gap: var(--s4); padding: var(--s4); }
.md-next .g-tile.ok { color: var(--c-green); }
.mk .form > .btn.primary { width: 100%; min-height: 56px; font-size: 17px; }
.ico.down { transform: rotate(90deg); }
/* Credits: the wallet, the packs as picks under one button, the history as rows */
.cr-bal .v { display: flex; align-items: center; gap: var(--s2); color: var(--c-ink); }
.cr-bal .v .ico { width: 34px; height: 34px; stroke-width: 2.4; color: var(--c-gold); }
.cr-price { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cr .g-srow .amt { color: var(--c-ink); }
/* Share: the referral path lit from rows, your link, who you brought; other programs fold away */
.sh .g-track { padding: 0; }
.sh-link .link-text code { text-align: center; font-size: 14px; }
.sh-earned { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sh-earned b { font: 800 28px/1 var(--font-display); letter-spacing: -.03em; color: var(--c-green); }
.sh-others { text-align: left; } .sh-others > .card { margin-top: var(--s3); }
/* ---- Earnings and Share (pages/money.ts, sharePage in pages/sell.ts, programs.ts, bought.ts): the wallet in the lobby
   look (docs/LOOK.md). A close copy of a real creator platform's Earnings (balance, four totals, a timeline of queued,
   arriving and received rows with the clip's frame) and a wallet app's cleared and pending bar: a main column and a
   340 side column (the level, bring a shop, where payouts go) on a computer; one column on a phone, the level second.
   Its own names (mo-). ---- */
.mo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; color: #fff; }
.mo-main, .mo-aside { min-width: 0; } .mo-aside { display: grid; gap: 14px; position: sticky; top: 84px; }
.mo-h1 { grid-column: 1 / -1; margin: 0 0 -10px; font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.mo-k { display: block; font-size: 13px; color: var(--st-mute); }
.mo-wal { padding: 22px 24px; border-radius: 10px; background: var(--st-pan); }
.mo-wal-t { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; } .mo-wal-t .mo-k { width: 100%; }
.mo-big { margin: 0; font: 800 76px/.95 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.st-app .mo-big.won { color: var(--st-gr); text-shadow: 0 0 28px rgba(45, 224, 28, .35); }
.st-shell .main a.mo-go, .mo-go { margin-left: auto; height: 48px; padding: 0 18px 0 20px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; background: var(--st-or); color: #1b0b00; font: 800 16px var(--font-body); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.mo-go:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.mo-bar { display: flex; gap: 4px; height: 12px; margin: 20px 0 16px; } .mo-bar i { border-radius: 6px; min-width: 6px; }
.mo-bar .r, .mo-sw.r { background: var(--st-gr); box-shadow: 0 0 12px -2px rgba(45, 224, 28, .7); }
.mo-bar .p, .mo-sw.p { background: repeating-linear-gradient(-45deg, rgba(45, 224, 28, .45) 0 4px, rgba(45, 224, 28, .14) 4px 8px); }
.mo-bar .z { flex: 1; background: var(--st-pan2); } .mo-sw.d { background: #fff; }
.mo-leg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mo-leg > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: start; } .mo-sw { margin-top: 4px; }
.mo-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .mo-leg span:not(.mo-sw) { font-size: 13px; color: var(--st-mute); } .mo-leg b { grid-column: 2; font: 800 20px/1.2 var(--font-display); letter-spacing: -.01em; }
.mo-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--st-pan2); font-size: 13px; line-height: 1.45; color: var(--st-mute); }
.mo-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mo-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px; border-radius: 10px; background: var(--st-pan); }
.mo-tile .mo-ic { grid-row: span 2; } .mo-tile b { font: 800 22px/1.1 var(--font-display); letter-spacing: -.01em; } .mo-tile > span:last-child { font-size: 12px; color: var(--st-mute); } .st-app .mo-tile.won b { color: var(--st-gr); }
.mo-ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--st-pan2); color: var(--st-or2); flex: none; }
.mo-sec { margin-top: 28px; }
.mo-sh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; } .mo-sh b { font-weight: 700; } .mo-sh .i { color: var(--st-mute); }
.mo-sh > span:last-child:not(.i) { margin-left: auto; font-size: 14px; color: var(--st-mute); }
.mo-path { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.mo-path li > * { height: 100%; min-height: 150px; padding: 14px; border-radius: 10px; background: var(--st-pan); display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.mo-path .mo-row-t b { display: block; font-size: 15px; font-weight: 700; } .mo-path .mo-row-t span { display: block; margin-top: 4px; font-size: 12px; color: var(--st-mute); }
.mo-rk { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--st-pan2); font: 800 15px var(--font-display); color: var(--st-mute); } .mo-rk .ico { width: 16px; height: 16px; stroke-width: 3; }
.mo-path li.done .mo-rk, .mo-rungs li.done .mo-rk { background: var(--st-gr); color: #052b00; }
.mo-path li.now > * { background: linear-gradient(160deg, #ff8a2b, #c74407); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); } .mo-path li.now .mo-rk { background: #fff; color: #c74407; } .mo-path li.now .mo-row-t span { color: #ffe6d2; }
.mo-here { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .mo-here .ico { width: 14px; height: 14px; }
.mo-done { font-size: 12px; font-weight: 700; color: var(--st-gr); text-transform: uppercase; letter-spacing: .06em; }
.mo-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--st-mute); }
.mo-grp { position: relative; padding-left: 24px; } .mo-grp::before { content: ""; position: absolute; left: 5px; top: 24px; bottom: 0; width: 1px; background: var(--st-pan2); }
.mo-grp-h { position: relative; display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 12px; font-size: 16px; }
.mo-dot { position: absolute; left: -24px; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: var(--st-pan2); }
.mo-grp.r .mo-dot { background: var(--st-gr); box-shadow: 0 0 8px var(--st-gr); } .mo-grp.p .mo-dot { background: var(--st-or2); box-shadow: 0 0 8px var(--st-or2); } .mo-grp.d .mo-dot { background: #fff; }
.mo-grp-h .n, .mo-grp-h .s { color: var(--st-mute); } .mo-grp-h .s { font-size: 13px; } .mo-grp-h .tot { margin-left: auto; font-size: 14px; color: var(--st-mute); } .mo-grp-h .tot b { color: #fff; font-weight: 700; }
.mo-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 8px; background: var(--st-pan); margin-bottom: 8px; }
.mo-th { position: relative; width: 48px; height: 64px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--st-pan2); color: var(--st-mute); }
.mo-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .mo-th.link { color: var(--st-or2); }
.mo-row-t { min-width: 0; } .mo-row-t b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; } .mo-row-t span { display: block; margin-top: 3px; font-size: 13px; color: var(--st-mute); overflow-wrap: anywhere; } .mo-row-t b::first-letter { text-transform: uppercase; }
.mo-row-t .mo-fail { color: var(--c-bad); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mo-row-e { display: grid; justify-items: end; gap: 5px; text-align: right; } .mo-row-e .form { margin: 0; }
.mo-amt { font: 800 21px/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; } .st-app .mo-amt.won { color: var(--st-gr); } .mo-amt.bad { color: var(--c-bad); }
.mo-st, .mo-pill { padding: 3px 8px; border-radius: 6px; background: var(--st-pan2); font-size: 12px; font-weight: 600; color: var(--st-mute); white-space: nowrap; }
.mo-st.r, .mo-pill.ok { background: rgba(45, 224, 28, .13); color: var(--st-gr); } .mo-st.p, .mo-pill.wait { background: rgba(255, 154, 61, .13); color: var(--st-or2); } .mo-pill.bad { background: var(--c-bad-t); color: var(--c-bad); }
.mo-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 20px; border-radius: 10px; background: var(--st-pan); text-align: center; }
.mo-empty .mo-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--st-or); color: #1b0b00; margin-bottom: 4px; } .mo-empty b { font-size: 16px; } .mo-empty > span:last-child { font-size: 13px; color: var(--st-mute); }
.mo-firsts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mo-firsts > div { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: 10px; background: var(--st-pan); text-align: center; }
.mo-firsts .mo-ic { width: 52px; height: 52px; border-radius: 50%; margin-bottom: 6px; color: #6c7483; } .mo-firsts b { font-size: 14px; } .mo-firsts > div > span:last-child { font-size: 12px; color: var(--st-mute); }
.mo-firsts .on .mo-ic { background: radial-gradient(circle at 35% 30%, #fff0b8, #ffc53d 45%, #d9930b); color: #6b4100; box-shadow: 0 0 18px rgba(255, 197, 61, .35); }
.mo-firsts > div:not(.on) b { color: var(--st-mute); }
.mo-list .mo-row-e, .mo-list .mo-pill { justify-self: end; }
.mo-lvl, .mo-side { padding: 18px; border-radius: 10px; background: var(--st-pan); }
.mo-lvl-t b { display: block; margin: 4px 0 2px; font: 800 44px/1 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; }
.mo-keep { font-size: 14px; color: var(--st-mute); } .mo-keep em { font: normal 800 24px/1 var(--font-display); color: var(--st-or2); letter-spacing: -.01em; }
.mo-lvbar { display: block; height: 10px; margin-top: 16px; border-radius: 8px; background: var(--st-bg); overflow: hidden; } .mo-lvbar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--st-or), var(--st-or2)); }
.mo-small { margin: 8px 0 14px; font-size: 13px; color: var(--st-mute); }
.mo-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mo-rungs li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 8px; background: var(--st-bg); }
.mo-rungs .mo-rk { grid-row: span 2; } .mo-rungs b { font-size: 14px; } .mo-rungs li > span:not(.mo-rk) { grid-column: 2; font-size: 12px; color: var(--st-mute); }
.mo-rungs em { grid-column: 3; grid-row: 1 / 3; font: normal 800 20px/1 var(--font-display); color: var(--st-mute); }
.mo-rungs li.now { background: rgba(255, 106, 31, .14); box-shadow: inset 0 0 0 1px var(--st-or); } .mo-rungs li.now .mo-rk { background: var(--st-or); color: #1b0b00; } .mo-rungs li.now em { color: var(--st-or2); }
.mo-rungs li.done em { color: #fff; }
.mo-bring { display: block; padding: 18px; border-radius: 10px; background: linear-gradient(135deg, #ff8a2b, #c74407); color: #fff; }
.mo-bring .mo-k { color: #ffe6d2; } .mo-bring b { display: block; margin: 6px 0 8px; font: 800 24px/1.08 var(--font-display); letter-spacing: -.01em; } .mo-bring > span { display: block; font-size: 13px; color: #ffe6d2; }
.mo-bring .mo-bring-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; height: 36px; padding: 0 12px; border-radius: 6px; background: rgba(0, 0, 0, .28); color: #fff; font-weight: 700; }
.mo-side .mo-sh { font-size: 16px; margin-bottom: 8px; } .mo-side p { margin: 0 0 8px; font-size: 14px; } .mo-side .form { margin-top: 8px; }
@media (min-width: 1700px) { .st-shell .main.wide:has(.mo) { max-width: 1420px; } .mo { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 1199px) { .mo { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; } .mo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mo-big { font-size: 64px; } }
@media (max-width: 899px) {
  .mo { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .mo-main, .mo-aside { display: contents; }
  .mo-h1 { order: 0; margin: 0 0 14px; } .mo-wal { order: 1; } .mo-lvl { order: 2; margin-top: 12px; } .mo-tiles { order: 3; } .mo-main > .mo-sec { order: 4; } .mo-bring { order: 5; margin-top: 28px; } .mo-side { order: 6; margin-top: 12px; }
  .mo-aside { position: static; }
}
@media (max-width: 760px) {
  .mo-h1 { font-size: 24px; margin: 0 0 10px; }
  .mo-wal { padding: 18px 16px; } .mo-big { font-size: 54px; } .st-shell .main a.mo-go, .mo-go { margin: 10px 0 0; width: 100%; justify-content: center; }
  .mo-leg { grid-template-columns: 1fr; gap: 8px; } .mo-leg > div { grid-template-columns: 10px minmax(0, 1fr) auto; } .mo-leg b { grid-column: 3; font-size: 17px; }
  .mo-tiles { gap: 8px; } .mo-tile { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; column-gap: 10px; } .mo-tile .mo-ic { width: 34px; height: 34px; } .mo-tile b { font-size: 18px; }
  .mo-sh { font-size: 18px; }
  .mo-path { grid-auto-flow: row; gap: 8px; } .mo-path li > * { min-height: 0; grid-template-rows: none; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
  .mo-grp { padding-left: 20px; } .mo-dot { left: -20px; } .mo-grp-h .s { display: none; }
  .mo-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 10px 8px 8px; } .mo-th { width: 40px; height: 54px; grid-row: span 2; } .mo-amt { font-size: 18px; } .mo-row-t b { font-size: 14px; } .mo-row-t span { font-size: 12px; }
  .mo-row-e { display: contents; } .mo-row > .mo-th { grid-column: 1; grid-row: 1 / 3; } .mo-row > .mo-row-t { grid-column: 2; grid-row: 1; } .mo-row-e .mo-amt, .mo-row > .mo-pill { grid-column: 3; grid-row: 1; align-self: start; }
  .mo-row-e .mo-st, .mo-row-e .form { grid-column: 2 / 4; grid-row: 2; justify-self: start; white-space: normal; }
  .mo-rungs { display: flex; flex-direction: row-reverse; gap: 6px; } .mo-rungs li { flex: 1; min-width: 0; display: grid; grid-template-columns: none; justify-items: center; gap: 4px; padding: 10px 4px; text-align: center; }
  .mo-rungs .mo-rk { grid-row: auto; width: 28px; height: 28px; } .mo-rungs b { font-size: 12px; } .mo-rungs li > span:not(.mo-rk) { display: none; } .mo-rungs em { grid-column: auto; grid-row: auto; font-size: 16px; }
  .mo-firsts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mo-lvl-t b { font-size: 38px; }
}
@media (max-width: 359px) { .mo-big { font-size: 46px; } .mo-tiles { grid-template-columns: 1fr; } .mo-row-e .mo-st { white-space: normal; } }
/* a creator's own places: one head style everywhere (no eyebrow over the title; the tab already says where you are) */
.app.game .head .eyebrow { display: none; }
.app.game .head .title { font-size: 34px; line-height: 1.05; }
.app.game .head .lede { font-size: 15px; color: var(--c-muted); }
.you-top { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.you-top > div { min-width: 0; } .you-top .g-h1 { font-size: 28px; overflow-wrap: anywhere; } .you-top .g-sub { margin-top: 4px; overflow-wrap: anywhere; }
.avatar.big { width: 56px; height: 56px; font-size: 18px; }
/* sign in: one field, one orange button, the same as onboarding's own */
.mk.in { margin-top: var(--s5); }
.in .code-input { height: 64px; font-size: 28px; letter-spacing: .3em; text-align: center; padding: 0; }
/* an ad's page, where a shop first meets its ad: the ad in a phone frame, facts as chips, the price and the next step
   in a bar that stays (Productoons' and 30 Second Ad Factory's order pages; no game pieces on a page a shop sees) */
.pd-plain { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.pd { display: grid; gap: var(--s5); align-content: start; max-width: 520px; width: 100%; margin: 0 auto; min-width: 0; padding-bottom: 96px; }
.pd-head { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.pd-head .g-h1 { font-size: clamp(28px, 8vw, 38px); text-wrap: balance; } .pd-head .g-h1 em { font-style: normal; color: var(--c-orange); }
.pd-head .g-sub { margin-top: 0; max-width: 38ch; text-wrap: pretty; }
.pd-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); background: var(--c-surface-2); box-shadow: var(--hi-line), 0 0 0 1px var(--hair-2); }
.pd-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-green) 22%, transparent); }
.pd-frame { position: relative; width: min(100%, 300px); margin: 0 auto; padding: 8px; border-radius: 34px; background: linear-gradient(160deg, var(--c-surface-3), var(--c-void)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 16%, transparent), 0 0 0 1px var(--hair-2), 0 30px 60px -24px var(--c-shadow), 0 0 90px -30px color-mix(in oklab, var(--c-orange) 55%, transparent); }
.pd-frame .player { max-width: none; border-radius: 26px; }
.pd > .quiet { text-align: center; text-wrap: balance; }
.pd-anchor { scroll-margin-top: 80px; display: block; }
.pd .card h2 { font-size: 18px; }
.landing .pd-head { gap: var(--s3); } .landing .landing-actions { max-width: 360px; }
/* the shop's block on a post's page: what the ad is made of, its say over it, the two ways to work with Cracked */
.ld-shop { gap: var(--s4); padding: var(--s5); text-align: left; }
.ld-shop-top { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.ld-shop-top b { display: block; font-family: var(--f-display, inherit); font-size: 20px; line-height: 1.2; color: var(--c-ink); }
.ld-shop-top span:not(.g-tile):not(.i) { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }
.ld-say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
/* Take it down: a fold that opens the form (one line of words, an optional address), no sign-in */
.ld-td { border-radius: var(--r-md, 14px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-bad) 35%, transparent); }
.ld-td > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s4); font-weight: 600; color: var(--c-bad); cursor: pointer; list-style: none; border-radius: inherit; }
.ld-td > summary::-webkit-details-marker { display: none; }
.ld-td > summary:focus-visible { outline: 2px solid var(--c-bad); outline-offset: 2px; }
.ld-td[open] > summary { justify-content: flex-start; min-height: 44px; }
.ld-td-form { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.ld-td-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.ld-td-form textarea, .ld-td-form input { width: 100%; font: inherit; font-weight: 400; }
.ld-td-form .btn.ld-remove { justify-content: center; min-height: 48px; background: var(--c-bad); color: var(--c-white, #fff); box-shadow: none; }
/* held: why, since when, what happens next */
.ld-held { box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-bad) 35%, transparent); background: var(--c-bad-t, rgba(255, 90, 110, .1)); }
.ld-held .ld-shop-top span + span { margin-top: var(--s2); }
.ld-held .g-tile { color: var(--c-bad); }
.ld-say .btn { justify-content: center; min-height: 48px; padding-inline: var(--s2); text-align: center; }
.ld-say .ld-remove { color: var(--c-bad); }
.ld-shop .mk-fine { margin: 0; text-align: left; } .ld-shop .ld-mine { justify-self: start; }
.ld-doors { display: grid; gap: var(--s3); text-align: left; } .ld-doors .dt-h2 { margin: 0; }
.ld-two { display: grid; gap: var(--s3); }
.ld-want { justify-self: center; } .fs-ad { margin-inline: auto; }
.card.ld-door { gap: var(--s2); padding: var(--s5); align-content: start; }
.ld-door b { font-size: 18px; line-height: 1.25; color: var(--c-ink); } .ld-door p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-ink-2); }
.ld-door .btn { margin-top: var(--s2); }
.ld-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--c-surface-2); color: var(--c-ink-2); }
.ld-tag.paid { background: color-mix(in oklab, var(--c-orange) 16%, transparent); color: var(--c-orange-deep, var(--c-orange)); }
@media (max-width: 340px) { .ld-say { grid-template-columns: 1fr; } }
/* on a computer the ad stands on the left and everything about it reads beside it */
@media (min-width: 900px) {
  .landing { max-width: 980px; grid-template-columns: 320px minmax(0, 1fr); column-gap: var(--s7); align-items: start; text-align: left; }
  .landing > * { grid-column: 2; } .landing > .flash { grid-column: 1 / -1; }
  .landing > .ld-held { grid-column: 1 / -1; }
  .landing > .pd-frame, .landing > .quiet { grid-column: 1; grid-row: 2 / span 5; position: sticky; top: 96px; margin: 0; width: 100%; }
  .landing .pd-head { justify-items: start; text-align: left; } .landing .pd-head .g-sub { max-width: 52ch; }
  .landing .landing-actions { margin: 0; max-width: 360px; }
  .ld-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* onboarding's pace: three picks, then the week as it will sit on Home (a ring that fills, seven days that light) */
.ob-goal.pace { height: auto; min-height: 72px; align-content: center; gap: 2px; padding: 8px 4px; text-align: center; } .ob-goal.pace b { font: 800 17px var(--font-display); letter-spacing: -.01em; } .ob-goal.pace span { font-size: 13px; font-weight: 500; color: var(--c-muted); }
.ob-goal.pace:has(input:checked) span { color: var(--c-ink-2); }
.card.ob-week { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); }
.ob-ring { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-content: center; text-align: center; }
.ob-ring-svg { position: absolute; inset: 0; } .ob-ring svg { width: 100%; height: 100%; display: block; } .ob-ring > b, .ob-ring > span:not(.ob-ring-svg) { position: relative; } .ob-ring b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; } .ob-ring span { font-size: 12px; color: var(--c-muted); }
.ob-week .t { display: grid; gap: var(--s2); min-width: 0; } .ob-week .t > b { font-size: 16px; font-weight: 700; } .ob-week .t > span { font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.ob-days { display: flex; gap: 6px; margin-top: 2px; } .ob-days i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-body); font-style: normal; color: var(--c-faint); background: var(--c-surface-3); box-shadow: var(--hi-line); }
@media (max-width: 359px) { .card.ob-week { flex-direction: column; align-items: flex-start; } .ob-days i { width: 24px; height: 24px; } }
/* Home's week: Slot's one line, the ring against your pace, the day streak, the week's seven days (all row counts) */
.card.g-week { gap: var(--s4); padding: var(--s4); }
.g-say { display: flex; align-items: center; gap: var(--s3); }
.g-say-slot { width: 44px; height: 50px; flex: none; display: block; } .g-say-slot svg { width: 100%; height: 100%; display: block; }
.g-say p { position: relative; flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-ink); background: var(--c-surface-3); box-shadow: var(--hi-line); text-wrap: pretty; }
.g-say p::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: var(--c-surface-3); transform: translateY(-50%) rotate(45deg); }
.g-week-row { display: flex; align-items: center; gap: var(--s4); }
.g-ring { position: relative; width: 84px; height: 84px; flex: none; } .g-ring svg { width: 100%; height: 100%; display: block; }
.g-ring .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .g-ring .c b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; } .g-ring .c span { font-size: 12px; color: var(--c-muted); }
.g-ring .arc { transition: stroke-dasharray 900ms var(--ease-out); } .g-ring.full .c b { color: var(--c-gold); }
.g-week-t { flex: 1; min-width: 0; display: grid; gap: var(--s3); }
.g-week-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); } .g-week-top > b { font: 700 17px var(--font-display); }
.g-streak { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-muted); background: var(--c-surface-3); white-space: nowrap; }
.g-streak svg { width: 18px; height: 18px; display: block; filter: saturate(0) brightness(.7); } .g-streak b { color: var(--c-ink-2); }
.g-streak.on { color: var(--c-orange-hi); background: color-mix(in oklab, var(--c-orange) 16%, var(--c-surface-2)); } .g-streak.on svg { filter: none; } .g-streak.on b { color: var(--c-ink); }
.g-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.g-days i { aspect-ratio: 1; max-width: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--font-body); font-style: normal; color: var(--c-faint); background: var(--c-surface-3); box-shadow: var(--hi-line); }
.g-days i.today { box-shadow: 0 0 0 2px var(--c-ink-2); color: var(--c-ink); }
.g-days i.on { color: var(--c-gold-ink); background: linear-gradient(180deg, var(--c-gold-hi) -30%, var(--c-gold) 55%, var(--c-gold-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 2px 0 var(--c-gold-deep); }
.g-days i.on.today { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 2px 0 var(--c-gold-deep), 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-gold); }
.g-days .ico { width: 14px; height: 14px; stroke-width: 3; }
.g-quests { display: grid; gap: var(--s3); min-width: 0; }
.g-qtile { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c-ink-2); background: var(--c-surface-3); box-shadow: var(--hi-line), 0 3px 0 var(--c-lock-lip); }
.g-quest.now .g-qtile { color: var(--c-white); background: linear-gradient(180deg, var(--c-orange-hi) -30%, var(--c-orange) 50%, var(--c-orange-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 3px 0 var(--c-orange-deep); }
.g-quest.done .g-qtile { color: var(--c-gold-ink); background: linear-gradient(180deg, var(--c-gold-hi) -30%, var(--c-gold) 55%, var(--c-gold-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-gold-deep); }
.g-quest.done .t b { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-faint); }
.g-quest > .i:last-child { color: var(--c-faint); } .g-quest .g-qtile .ico { width: 20px; height: 20px; stroke-width: 2.4; }
@media (max-width: 359px) { .g-week-row { gap: var(--s3); } .g-ring { width: 72px; height: 72px; } .g-ring .c b { font-size: 22px; } .g-days { gap: 4px; } }
@media (min-width: 900px) { .card.g-week { flex-direction: row; display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s5); } .g-say { flex: 1 1 0; } .g-week-row { flex: 1 1 0; } .g-days i { max-width: 32px; } }
@media (prefers-reduced-motion: reduce) { .g-ring .arc { transition: none; } }
.g-dock-alt { display: block; margin-top: var(--s2); padding: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--c-ink-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; border-radius: 10px; background: color-mix(in oklab, var(--c-bg) 80%, transparent); }
/* You → Data: a data asset's tables as a plain work table (no game pieces): tabs, the table's own column names, three
   lines a row on a phone, and one competitor on its own page */
.dt .mono, .dt-fields dt { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.01em; }
.dt .head .title { font-size: 34px; } .dt .lede { font-size: 15px; color: var(--c-muted); max-width: 64ch; }
.dt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; gap: 4px; border-radius: 14px; background: var(--c-surface); box-shadow: 0 0 0 1px var(--hair); }
.dt-tab { min-height: 52px; padding: 6px 4px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--c-muted); text-decoration: none; }
.dt-tab .n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--c-faint); }
.dt-tab.on { background: var(--c-surface-3); color: var(--c-ink); box-shadow: var(--hi-line); } .dt-tab.on .n { color: var(--c-ink-2); }
.dt-tools { display: grid; gap: var(--s3); min-width: 0; } .dt-search { max-width: 360px; }
.dt-kinds { margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4); }
.card.dt-grid { padding: 0; gap: 0; overflow: clip; }
.dt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name threat" "kind kind" "price price"; gap: 4px var(--s3); padding: var(--s3) var(--s4); text-decoration: none; color: inherit; box-shadow: inset 0 -1px 0 var(--hair); font-size: 14px; }
.dt-row:last-child { box-shadow: none; } a.dt-row:hover { background: color-mix(in oklab, var(--c-ink) 4%, transparent); }
.dt-head { display: none; }
.dt-row .c-name { grid-area: name; min-width: 0; } .dt-row .c-name b { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .dt-row .c-name .one { display: none; }
.dt-row .c-threat { grid-area: threat; justify-self: end; display: inline-flex; align-items: center; gap: 6px; } .dt-row .c-kind { grid-area: kind; font-size: 13px; color: var(--c-muted); }
.dt-row .c-price { grid-area: price; font-size: 13px; color: var(--c-ink-2); overflow-wrap: anywhere; min-width: 0; } .dt-row .c-rev, .dt-row .c-checked { display: none; }
.dt .clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dt .dt-row .c-rev.clamp2 { display: none; }
.dt-threat { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--c-surface-3); color: var(--c-ink-2); }
.dt-threat.hi { background: var(--c-bad-t); color: var(--c-bad); } .dt-threat.mid { background: var(--c-wait-t); color: var(--c-wait); }
.dt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 13px; margin-top: var(--s1); } .dt-meta a { color: var(--c-ink-2); }
.dt-kv { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); }
.dt-two { display: grid; gap: var(--s5); min-width: 0; } .dt-sec { display: grid; gap: var(--s3); min-width: 0; align-content: start; }
.dt-h2 { font: 700 17px var(--font-display); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); } .dt-h2 .mono { font-size: 12px; font-weight: 500; }
.card.dt-fields { margin: 0; padding: var(--s2) var(--s4); gap: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dt-fields dt { font-size: 12px; color: var(--c-muted); padding-top: var(--s3); } .dt-fields dd { margin: 0; padding: 2px 0 var(--s3); font-size: 15px; line-height: 1.5; color: var(--c-ink-2); overflow-wrap: anywhere; box-shadow: inset 0 -1px 0 var(--hair); }
.dt-fields dd:last-child { box-shadow: none; } .dt-fields a, .dt-block a { color: var(--c-ink); }
.card.dt-block { padding: var(--s4); gap: var(--s3); } .dt-block h3 { font: 700 16px var(--font-display); margin: 0; } .dt-block .cmp-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: var(--s2); }
.dt-block .cmp-insights { list-style: none; margin: 0; padding: 0; display: grid; } .dt-block .cmp-insights li { display: grid; gap: 2px; padding: var(--s3) 0; box-shadow: inset 0 -1px 0 var(--hair); font-size: 14px; line-height: 1.45; } .dt-block .cmp-insights li:last-child { box-shadow: none; }
.dt-funnel .cmp-steps { list-style: none; margin: 0; padding: 0; gap: 0; counter-reset: step; }
.dt-funnel .cmp-steps > li { position: relative; counter-increment: step; padding: 0 0 var(--s4) 40px; }
.dt-funnel .cmp-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--c-surface-3); color: var(--c-ink-2); box-shadow: var(--hi-line); }
.dt-funnel .cmp-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--c-edge); }
.dt-funnel .cmp-step { gap: 4px; padding-top: 3px; font-size: 14px; line-height: 1.45; } .dt-funnel .cmp-step b { font-size: 15px; font-weight: 600; }
.dt-funnel .cmp-next { margin: 6px 0 0; font-size: 12px; }
@media (min-width: 900px) {
  .dt-tabs { display: inline-flex; justify-self: start; } .dt-tab { min-height: 36px; padding: 0 14px; flex-direction: row; gap: 8px; font-size: 14px; white-space: nowrap; }
  .dt-kinds { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .dt-tools { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .dt-head { display: grid; position: sticky; top: 64px; z-index: 5; background: var(--c-surface-2); font: 500 12px ui-monospace, Menlo, monospace; color: var(--c-muted); padding-top: 10px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--hair-2); }
  .dt-head .r { justify-self: end; white-space: nowrap; } .dt-head b { color: var(--c-ink); }
  .dt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr) 150px 96px; grid-template-areas: none; gap: 0 var(--s4); align-items: start; }
  .dt-row > * { grid-area: auto !important; } .dt .dt-row .c-rev.clamp2 { display: -webkit-box; } .dt-row .c-checked { display: block; white-space: nowrap; color: var(--c-muted); } .dt-row .c-rev, .dt-row .c-checked { font-size: 13px; min-width: 0; }
  .dt-row .c-rev { color: var(--c-ink-2); overflow-wrap: anywhere; }
  .dt-row .c-name .one { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: 13px; color: var(--c-muted); margin-top: 2px; }
  .dt-two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
/* onboarding: the pack opens (after it's saved): its three shops deal in, face up */
.ob-shop { min-height: 76px; } .ob-shop .mk-ava { width: 48px; height: 48px; } .ob-shop .t span { overflow-wrap: anywhere; }
.ob-dealt .ob-shop { animation: g-deal 520ms var(--ease-out) both; } .ob-dealt .ob-shop:nth-child(2) { animation-delay: 90ms; } .ob-dealt .ob-shop:nth-child(3) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .ob-dealt .ob-shop { animation: g-fade 200ms ease both; } }
/* /skill: the link to hand an AI, then the file to read (a public page; the look of an ad's page, no game pieces) */
.pd.sk { max-width: 720px; padding-bottom: var(--s6); }
.sk .link-text code { text-align: center; font-size: 14px; }
details.card.sk-file { padding: var(--s4); gap: var(--s3); } .sk-file > summary { font: 700 16px var(--font-display); cursor: pointer; }
.sk-file .skill-file { margin: 0; padding: var(--s4); background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--hair); max-height: 70vh; overflow: auto; }
/* a new pack: the shops shown since you last looked deal in, and a gold tag says how many (game.js; once) */
.sl-new { display: inline-flex; align-items: center; height: 22px; margin-left: 6px; padding: 0 9px; border-radius: 999px; vertical-align: 2px; font: 700 12px var(--font-body); color: var(--c-gold-ink); background: linear-gradient(180deg, var(--c-gold-hi) -30%, var(--c-gold) 55%, var(--c-gold-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 2px 0 var(--c-gold-deep); animation: g-pop-in 420ms var(--ease-spring) both; }
.sl-new[hidden] { display: none; }
.g-srow.dealt-new { animation: g-deal 520ms var(--ease-out) both; }
.g-srow.dealt-new .mk-ava .art, .g-srow.is-new .mk-ava .art { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 24%, transparent), 0 0 0 2px var(--c-gold), 0 0 18px -2px color-mix(in oklab, var(--c-gold) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .sl-new { animation: none; } }
/* your channels on Sell: prove one is yours (a code in its bio), and an ad's posts with their views */
.sl-cant { flex: none; max-width: 112px; font-size: 12px; line-height: 1.3; color: var(--c-muted); text-align: right; }
.card.sl-proof { gap: var(--s3); padding: var(--s4); }
.sl-proof-h { font: 800 18px/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sl-steps { padding: 0; }
.sl-steps li .t { flex: 1; min-width: 0; }
.sl-steps .btn.small { flex: none; min-height: 40px; min-width: 72px; }
.ob-steps .sl-code { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 44px; margin-top: 6px; padding: 0 var(--s3); border: 0; border-radius: 12px; background: var(--c-surface-3); color: var(--c-ink); cursor: pointer; transition: transform 160ms var(--ease-out); }
.ob-steps .sl-code:active { transform: scale(.98); }
.ob-steps .sl-code code { font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; user-select: all; }
.ob-steps .sl-code span { display: inline; flex: none; font: 700 13px var(--font-body); color: var(--c-orange, var(--c-ink-2)); }
.sl-proof > .sl-act > .g-go, .sl-proof > .sl-act > .g-quiet { width: 100%; }
.md-post .form { display: grid; gap: var(--s3); }
.md-prow { flex-wrap: wrap; row-gap: var(--s2); }
.md-prow .t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.md-views { flex: none; display: grid; justify-items: end; text-align: right; }
.md-views b { font: 800 20px/1.1 var(--font-display); letter-spacing: -.02em; }
.md-views span { font-size: 12px; color: var(--c-muted); }
a.md-prove { display: block; text-align: center; text-decoration: underline; text-underline-offset: 2px; }
.md-prow .t .md-why { color: var(--c-gold, var(--c-muted)); }
/* Admin: what waits on a decision comes first, each count a jump to its card */
.adm-wait .stat { transition: transform 160ms var(--ease-out); } .adm-wait .stat:active { transform: scale(.98); }
.adm-wait .stat.on b { color: var(--c-orange); }
.adm-wait .stat:not(.on) b { color: var(--c-muted); }
.adm-sec { scroll-margin-top: 84px; display: grid; gap: var(--s4); min-width: 0; } .adm-sec:empty { display: none; }
@media (max-width: 599px) { .stats.adm-wait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the ERD: the tables under their roots, with a side panel of the rows changed most recently (beside the tree on a computer, under it on a phone) */
.erd-split { display: grid; gap: var(--s5); min-width: 0; }
.erd-main { display: grid; gap: var(--s5); min-width: 0; align-content: start; }
.card.erd-side { align-content: start; gap: var(--s2); }
.erd-side-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3); }
.erd-side-head b { font: 800 16px/1.2 var(--font-display); letter-spacing: -.02em; }
.erd-side-head .erd-live { font-size: 12px; }
.erd-recent { list-style: none; margin: 0; padding: 0; display: grid; }
.erd-recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s3); padding: var(--s2) 0; box-shadow: inset 0 1px 0 var(--hair); }
.erd-recent a { font-size: 13px; overflow-wrap: anywhere; }
.erd-recent .erd-at { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.erd-recent .erd-id { grid-column: 1 / -1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erd-recent li.in { animation: g-rise 420ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .erd-recent li.in { animation: none; } }
@media (min-width: 1000px) {
  .erd-split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .card.erd-side { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding: var(--s4); }
}
.erd-main .table-wrap table { min-width: 0; }
@media (max-width: 999px) { .card.erd-side { order: -1; max-height: 330px; overflow-y: auto; } }
/* the moment a pack opens (moments.js, kind pack): its three shops as cards that turn over one after another */
.g-m-pack { position: relative; display: flex; justify-content: center; gap: 10px; perspective: 800px; }
.g-m-pack .g-burst { left: 50%; top: 50%; }
.g-m-card { width: 100px; min-height: 136px; padding: 12px 8px; border-radius: 16px; display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; background: linear-gradient(180deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--hi-line), 0 0 0 1.5px color-mix(in oklab, var(--c-gold) 70%, transparent), 0 16px 30px -12px var(--c-shadow); }
.g-m-card .mk-ava { width: 48px; height: 48px; }
.g-m-card b { font-size: 12px; line-height: 1.25; color: var(--c-ink); overflow-wrap: anywhere; }
.g-moment.big .g-m-card { animation: g-flip 700ms var(--ease-out) both; animation-delay: calc(160ms + var(--i) * 140ms); }
@media (max-width: 359px) { .g-m-card { width: 88px; } .g-m-pack { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .g-moment .g-m-card { animation: none; } }
/* the Path's optional step (up for sale through Cracked): drawn smaller and dashed, never the step you're on */
.g-node.lock.opt { transform: scale(.8); box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3.5px color-mix(in oklab, var(--c-muted) 55%, transparent); opacity: .85; }
.g-steps i.o { background: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
/* To rate: one ad at a time, big; a score, your words, keep or kill */
.rt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.rt-left { flex: none; display: grid; justify-items: center; min-width: 64px; padding: 8px 12px; border-radius: 16px; background: linear-gradient(180deg, var(--c-orange-hi), var(--c-orange) 55%, var(--c-orange-lo)); color: var(--c-white); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 3px 0 var(--c-orange-deep); }
.rt-left b { font: 800 24px/1 var(--font-display); letter-spacing: -.02em; } .rt-left span { font-size: 11px; font-weight: 700; opacity: .9; }
.rt-form { display: grid; min-width: 0; }
.card.rt-card { gap: var(--s4); padding: var(--s4); }
.rt-what { display: grid; gap: 2px; min-width: 0; }
.rt-what b { font: 800 20px/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.rt-what span, .rt-what a { font-size: 13px; color: var(--c-muted); overflow-wrap: anywhere; } .rt-what a { text-decoration: underline; text-underline-offset: 2px; justify-self: start; }
.rt-film { display: grid; place-items: center; }
.rt-film .player { width: auto; max-width: 100%; max-height: min(62vh, 560px); aspect-ratio: 9 / 16; border-radius: 18px; background: var(--c-black, #000); margin: 0; }
.rt-score { display: flex; align-items: center; gap: var(--s4); }
.rt-num { flex: none; width: 76px; text-align: center; font: 800 44px/1 var(--font-display); letter-spacing: -.03em; color: var(--c-muted); }
.rt-form.scored .rt-num { color: color-mix(in oklab, var(--c-green) calc(var(--score, .5) * 100%), var(--c-orange)); }
.rt-slide { flex: 1; min-width: 0; display: grid; gap: 6px; }
.rt-slide input[type=range] { width: 100%; height: 44px; margin: 0; accent-color: var(--c-orange); }
.rt-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-muted); }
.rt-words { position: relative; display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.rt-words textarea { width: 100%; min-height: 92px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--c-line-2); background: var(--c-card); color: var(--c-ink); font: 400 16px/1.45 var(--font-body); resize: vertical; }
.rt-talk { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--c-surface-3); color: var(--c-ink); font: 600 14px var(--font-body); cursor: pointer; }
.rt-talk[hidden] { display: none; } .rt-talk.on { background: var(--c-orange); color: var(--c-white); }
.rt-note { margin: 0; text-align: center; } .rt-note.bad { color: var(--c-orange); }
/* four optional ticks under the words: chips that fill when ticked */
.rt-ticks { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
.rt-ticks-k { width: 100%; padding: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); }
.rt-tick { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--hair-2); font-size: 14px; font-weight: 600; color: var(--c-ink-2); cursor: pointer; }
.rt-tick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rt-tick:has(input:checked) { background: var(--c-ink); color: var(--c-bg); box-shadow: none; }
.rt-tick:has(input:focus-visible) { outline: 2px solid var(--c-orange); outline-offset: 2px; }
/* which is better: two ads side by side at every width, a button under each */
/* narrow enough that both ads and both buttons fit one screen on a computer */
.mk.rt.pk { max-width: 600px; }
.pk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.pk-side { display: grid; gap: var(--s2); min-width: 0; padding: var(--s3); border-radius: 22px; background: var(--c-card); box-shadow: var(--sh-card), 0 0 0 1px var(--hair-2); }
.pk-name { justify-self: center; font: 800 16px var(--font-display); color: var(--c-ink-2); }
.pk-side .player { width: 100%; max-width: none; aspect-ratio: 9 / 16; margin: 0; border-radius: 14px; background: #000; }
.pk-go { width: 100%; min-height: 52px; }
.pk-quiet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s5); }
@media (max-width: 420px) { .pk-side { padding: var(--s2); border-radius: 18px; } .pk-two { gap: var(--s2); } }
.rt-verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s3); align-items: stretch; }
.rt-verdict .g-go { width: 100%; }
.rt-kill { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 18px; background: var(--c-surface-3); color: var(--c-ink); font: 700 17px var(--font-body); cursor: pointer; box-shadow: var(--hi-line), 0 0 0 1px var(--hair), 0 3px 0 var(--c-shadow); transition: transform 160ms var(--ease-out); }
.rt-kill:active { transform: translateY(2px) scale(.98); }
.rt-form:not(.scored) .rt-verdict button { opacity: .55; }
@media (min-width: 900px) {
  .card.rt-card { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: var(--s6); align-items: start; padding: var(--s5); }
  .rt-what { grid-column: 2; } .rt-film { grid-column: 1; grid-row: 1 / span 6; } .rt-score, .rt-words, .rt-note, .rt-verdict { grid-column: 2; }
  .rt-film .player { max-height: 640px; }
}
.rt-home { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border-radius: var(--r-card); text-decoration: none; color: var(--c-ink); background: linear-gradient(180deg, color-mix(in oklab, var(--c-orange) 16%, var(--c-surface-2)), var(--c-surface)); box-shadow: var(--hi-line), 0 0 0 1.5px color-mix(in oklab, var(--c-orange) 60%, transparent); transition: transform 160ms var(--ease-out); }
.rt-home:active { transform: scale(.985); }
.rt-home-n { flex: none; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; display: grid; place-items: center; font: 800 20px/1 var(--font-display); color: var(--c-white); background: linear-gradient(180deg, var(--c-orange-hi), var(--c-orange) 55%, var(--c-orange-lo)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 45%, transparent), 0 3px 0 var(--c-orange-deep); }
.rt-home .t { flex: 1; min-width: 0; display: grid; gap: 2px; } .rt-home .t b { font-size: 16px; } .rt-home .t span { font-size: 13px; color: var(--c-muted); }
.main.wide:has(.home-game) > .rt-home { max-width: 980px; width: 100%; justify-self: center; }
/* Make, short of credits: Get credits, unless the free sample is the pick; then its own button */
.mk-form .mk-freego { display: none; }
.mk-form:has(input[value="ast_sample_engine"]:checked) .mk-get { display: none; }
.mk-form:has(input[value="ast_sample_engine"]:checked) .mk-freego { display: flex; }
/* what the last look at a channel's bio found, beside its button */
.sl-said { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; background: var(--c-ok-t); color: var(--c-ok); overflow-wrap: anywhere; }
.sl-said.bad { background: color-mix(in oklab, var(--c-orange) 14%, transparent); color: var(--c-orange-hi); }
/* To rate: on a phone the film leaves room for the slider under it; on a computer the card is two columns in a wider page */
.mk.rt { max-width: 560px; }
@media (max-width: 899px) { .rt-film .player { max-height: min(46vh, 400px); } }
@media (min-width: 900px) { .mk.rt { max-width: 880px; } .mk.rt > .sl-sec, .mk.rt > .rt-head { max-width: 880px; } }
/* the pick screen stays narrow at every width, after the rule above */
.mk.rt.pk { max-width: 600px; margin-inline: auto; }
/* ---- Shops (pages/sell.ts sellPage, shops.ts, shop.ts, shop-parts.ts) in the lobby look (docs/LOOK.md): close copies
   of a pack screen, a token list and a coin page read live on Nov 13 2026 (pump.fun's Packs and Explore, bags.fm's
   coin page), drawn with our rows. Its own names (sp-) inside the lobby shell's st- tokens. ---- */
.sp { display: grid; min-width: 0; color: #fff; font-size: 14px; }
.sp h1, .sp h2, .sp p { margin: 0; }
.sp-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-mute); }
.sp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.sp-head h1 { font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; }
.sp-head-n { color: var(--st-mute); font-size: 16px; font-weight: 600; white-space: nowrap; }
.sp .sp-head-a { margin-left: auto; height: 40px; padding: 0 14px; border-radius: 8px; background: var(--st-pan); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; } .sp-head-a .i { color: var(--st-mute); }
.sp-sh { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; min-width: 0; } .sp-sh > .i { color: var(--st-mute); } .sp-sh h2 { font: 700 20px/1.2 var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sh-n { color: var(--st-mute); font-size: 16px; font-weight: 600; } .sp .sp-sh a { margin-left: auto; color: var(--st-mute); font-weight: 600; white-space: nowrap; }
.sp-fine { margin-top: 10px !important; font-size: 12px; color: var(--st-mute); } .sp-empty { padding: 16px; border-radius: 10px; background: var(--st-pan); color: var(--st-mute); }
.sp-arrow { margin-left: auto; color: var(--st-mute); font-size: 20px; }
/* a shop's picture: an ad's frame, its own picture over its colour and first letter */
.sp-pic { position: relative; display: block; overflow: hidden; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.sp-pic video, .sp-img { z-index: 1;  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat; pointer-events: none; }
.sp-l { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1em/1 var(--font-display); color: rgba(255, 255, 255, .95); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.sp-pic.sm { width: 40px; height: 40px; border-radius: 8px; flex: none; font-size: 20px; }
.sp-pic.lg { width: 88px; height: 88px; border-radius: 10px; flex: none; font-size: 46px; }
/* the buttons: orange is the one action, a raised grey panel the rest */
.sp .sp-cta { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 8px; background: var(--st-or); color: #1b0b00; font-weight: 800; font-size: 16px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.sp .sp-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--st-pan2); color: #fff; font: 700 13px var(--font-body); white-space: nowrap; cursor: pointer; }
.sp .sp-go.or, .sp .sp-take { background: var(--st-or); color: #1b0b00; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.sp-go .ico { width: 16px; height: 16px; } .sp-cost { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; opacity: .75; } .sp-cost .ico { width: 13px; height: 13px; } .sp-cost::after { content: " credits"; }
.sp-cta:active, .sp-go:active, .sp-take:active { transform: translateY(2px); }
/* the line: six counts, one a step; the first step a person must act on is lit */
.sp-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.sp .sp-st, .sp .sp-all { display: grid; gap: 8px; align-content: center; min-width: 0; padding: 12px 14px; border-radius: 8px; background: var(--st-pan); }
.sp-st-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--st-mute); white-space: nowrap; overflow: hidden; } .sp-st-k .ico { width: 15px; height: 15px; flex: none; }
.sp-st b, .sp-all b { font: 800 26px/1 var(--font-display); letter-spacing: -.01em; }
.sp-st.zero b { color: #545b66; }
.sp-st.sold:not(.zero) b { color: var(--st-gr); }
.sp .sp-st.lit { box-shadow: inset 0 0 0 2px var(--st-or); } .sp-st.lit .sp-st-k { color: var(--st-or2); } .sp-st.lit b { color: var(--st-or2); }
.sp .sp-st.on, .sp .sp-all.on { background: var(--st-pan2); box-shadow: inset 0 -3px 0 #fff; }
.sp .sp-st:hover, .sp .sp-all:hover { background: var(--st-pan2); }
.sp-tabs { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; min-width: 0; } .sp-all { font-size: 12px; font-weight: 600; color: var(--st-mute); } .sp-all b { color: #fff; display: block; margin-top: 8px; }
.sp-sell .sp-line { margin-top: 12px; }
/* search */
.sp-find { position: relative; display: flex; align-items: center; margin-bottom: 12px; } .sp-find > .i { position: absolute; left: 15px; color: var(--st-mute); pointer-events: none; }
.st-shell .sp-find input { width: 100%; height: 50px; margin: 0; padding: 0 14px 0 46px; font-size: 15px; }
/* tiles: Home's 3:4 lobby tiles, the shop's picture or its ad's frame, its name in heavy capitals */
.sp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; } .sp-tiles > :nth-child(n+13) { display: none; }
.sp-tile { display: block; min-width: 0; }
.sp-tile-p, .sp-card-p, .sp-claim-p { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 2px 4px -1px rgba(0, 0, 0, .12); }
.sp-tile-p > .sp-pic, .sp-card-p > .sp-pic, .sp-claim-p > .sp-pic { position: absolute; inset: 0; font-size: 64px; } .sp-tile-p .sp-l, .sp-card-p .sp-l, .sp-claim-p .sp-l { padding-bottom: 32%; }
.sp-tile-p::after, .sp-card-p::after, .sp-claim-p::after { content: ""; position: absolute; inset: 42% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88) 74%); pointer-events: none; }
.sp-tile-n { position: absolute; left: 8px; right: 8px; bottom: 26px; z-index: 1; text-align: center; font: 800 24px/.95 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sp-tile-s { position: absolute; left: 8px; right: 8px; bottom: 9px; z-index: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 8.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.sp-tile-c { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--st-mute); white-space: nowrap; overflow: hidden; } .sp-tile-c b { color: #fff; font-weight: 600; }
/* the banner: the pack (pump.fun's Packs: the pack big on a glow, its name, one button), or the shop closest to a sale */
.sp-banner { --glow: #ff6a1f; position: relative; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 32px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(55% 85% at 15% 50%, color-mix(in oklab, var(--glow) 42%, transparent), transparent 72%), var(--st-pan); }
.sp-banner.seller { --glow: #19c46a; } .sp-banner.pro { --glow: #2d6bff; } .sp-banner.star { --glow: #f2b630; } .sp-banner.legend { --glow: #9a5cff; }
.sp-banner:not(.pack):not(.best) { grid-template-columns: minmax(0, 1fr); }
.sp-pack { position: relative; display: grid; place-items: center; }
.sp-pack-art { display: block; width: 100%; aspect-ratio: 622 / 900; max-height: 380px; background: center / contain no-repeat; mix-blend-mode: lighten; animation: sp-float 4s ease-in-out infinite alternate; }
@keyframes sp-float { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(6px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .sp-pack-art { animation: none; } }
.sealed .sp-pack-art { filter: saturate(.55) brightness(.62); }
.sp-lock { position: absolute; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 7, 8, .82); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); } .sp-lock .ico { width: 28px; height: 28px; }
.sp-banner-c { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.sp-banner h1 { font: 800 36px/1.05 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.sp-banner-c > p { color: #d5d9e0; font-size: 15px; max-width: 52ch; } .sp-banner-c > .sp-cta { margin-top: 6px; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 8px; }
.sp-card { display: grid; gap: 10px; min-width: 0; } .sp-card .sl-act { display: contents; }
.sp .sp-take { height: 44px; border: 0; border-radius: 8px; font: 800 15px var(--font-body); cursor: pointer; width: 100%; }
.sp-card.dealt-new { animation: g-deal 520ms var(--ease-out) both; } .sp-card.is-new .sp-card-p { box-shadow: 0 0 0 2px var(--st-or2), 0 0 22px -4px var(--st-or2); }
.sp-banner.best { grid-template-columns: 210px minmax(0, 1fr); }
.sp-banner-f { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); } .sp-banner-f > .sp-pic { width: 100%; height: 100%; font-size: 80px; }
.sp-banner.best h1 { font-size: 44px; text-transform: uppercase; font-stretch: 75%; }
/* your claims: a tile each, its days left as a bar, its one next thing */
.sp-claims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.sp-claim { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 10px; border-radius: 10px; background: var(--st-pan); }
.sp-claim .sp-go { width: 100%; height: 40px; } .sp-claim .sl-act { display: contents; } .sp-claim .sl-link { justify-self: center; min-height: 28px; font-size: 12px; }
.sp-days { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--st-mute); } .sp-days > i { display: block; height: 6px; border-radius: 3px; background: var(--st-pan2); overflow: hidden; } .sp-days > i > i { display: block; height: 100%; background: var(--st-gr); }
/* rows in a panel: channels, ads on sale */
.sp-panel { border-radius: 10px; background: var(--st-pan); padding: 2px 16px; min-width: 0; }
.sp-line-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); min-width: 0; } .sp-line-row:last-child { box-shadow: none; }
.sp-line-row .t { flex: 1; min-width: 0; display: grid; gap: 2px; } .sp-line-row .t b { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-line-row .t span { font-size: 12px; color: var(--st-mute); }
.sp-line-row .sl-act { display: contents; }
.sp-ch { width: 40px; height: 40px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--st-pan2); color: var(--st-mute); } .sp-ch.ok { background: rgba(45, 224, 28, .14); color: var(--st-gr); }
.sp-foot2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sp-foot2 > .sp-sec { display: grid; gap: 12px; align-content: start; min-width: 0; } .sp-foot2 > .sp-sec:last-child { padding-top: 62px; }
.sp-foot2 .sp-sh { margin-bottom: 0; } .sp-foot2 .sl-proof { margin: 0; }
.sp-add { margin: 0; } .sp-add > summary { color: var(--st-mute); }
.sp .sp-bring { display: grid; gap: 8px; padding: 18px; border-radius: 10px; background: linear-gradient(135deg, #ff8a2b, #c74407); color: #fff; }
.sp-bring .sp-k { color: #ffe6d2; } .sp-bring b { font: 800 24px/1.08 var(--font-display); letter-spacing: -.01em; } .sp-bring p { font-size: 13px; color: #ffe6d2; } .sp .sp-bring-a { font-weight: 800; color: #fff; }
.sp .sp-lesson { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--st-pan); margin-top: 12px; } .sp-lesson > .i { color: var(--st-or2); }
.sp-lesson > span:not(.sp-arrow) { display: grid; gap: 2px; min-width: 0; } .sp-lesson b { font-weight: 700; } .sp-lesson span span { font-size: 12px; color: var(--st-mute); }
/* every shop: the token list's dense table (pump.fun's Explore): a row a shop, its bar, its numbers, its next thing */
.sp-table { border-radius: 10px; background: var(--st-pan); overflow: hidden; min-width: 0; }
.sp-row { display: grid; grid-template-columns: minmax(200px, 2fr) 160px 52px 52px 52px minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.3fr) 128px; align-items: center; gap: 0 14px; min-height: 62px; padding: 8px 16px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); min-width: 0; }
.sp-row:last-child { box-shadow: none; } .sp-row:not(.hd):hover { background: rgba(255, 255, 255, .025); }
.sp-row.hd { min-height: 42px; background: var(--st-rail); } .sp-row.hd .sp-c { font-size: 12px; font-weight: 600; color: var(--st-mute); } .sp-row.hd .sp-c.k { text-align: right; }
.sp-c { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #d5d9e0; } .sp-c.none { color: #545b66; }
.sp .sp-c.shop { display: flex; align-items: center; gap: 12px; } .sp-c.shop .t { min-width: 0; display: grid; gap: 1px; }
.sp-c.shop b { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; } .sp-c.shop .t span { font-size: 12px; color: var(--st-mute); overflow: hidden; text-overflow: ellipsis; }
.sp-c.shop:hover b { text-decoration: underline; text-underline-offset: 2px; }
.sp-c.step { display: grid; gap: 6px; } .sp-said { font-size: 12px; font-weight: 600; color: var(--st-mute); overflow: hidden; text-overflow: ellipsis; }
.sp-said.to_rate { color: var(--st-or2); } .sp-said.approved, .sp-said.posted, .sp-said.verified { color: #fff; } .sp-said.sold { color: var(--st-gr); }
.sp-c.k { text-align: right; font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .sp-c.k.none { color: #545b66; font-weight: 500; }
.sp-c.go { justify-self: end; overflow: visible; }
.sp-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 150px; } .sp-bar i { height: 6px; border-radius: 3px; background: var(--st-pan2); }
.sp-bar i.d { background: #e8ecf2; } .sp-bar i.n { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-or2); } .sold .sp-bar i.d { background: var(--st-gr); }
.sp-none { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border-radius: 10px; background: var(--st-pan); text-align: center; } .sp-none b { font: 800 22px/1.1 var(--font-display); } .sp-none span { color: var(--st-mute); } .sp-none .sp-go { margin-top: 8px; height: 44px; }
.sp-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--st-mute); font-size: 13px; }
/* one shop: the coin page (bags.fm): the shop and four number boxes, the line, its ads; the one next thing at the right */
.sp-crumb { display: flex; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--st-mute); min-width: 0; } .sp .sp-crumb a { color: #fff; font-weight: 600; } .sp-crumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-one-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "id side" "main side"; column-gap: 24px; align-items: start; }
.sp-one-grid > .sp-id { grid-area: id; } .sp-one-grid > .sp-one-main { grid-area: main; } .sp-one-grid > .sp-one-side { grid-area: side; }
.sp-one-main, .sp-one-side { display: grid; min-width: 0; align-content: start; }
.sp-one-side > .sp-sec .sp-sh { margin-top: 26px; }
.sp-id { display: grid; gap: 18px; padding: 20px; border-radius: 10px; background: var(--st-pan); }
.sp-id-top { display: flex; align-items: center; gap: 16px; min-width: 0; } .sp-id-top .t { flex: 1; min-width: 0; display: grid; gap: 8px; }
.sp-id h1 { font: 800 34px/1.02 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sp-id-top p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--st-mute); } .sp .sp-id-top p a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.sp-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--st-pan2); font-size: 12px; font-weight: 600; color: #fff; } .sp-tag.ok { background: rgba(45, 224, 28, .13); color: var(--st-gr); } .sp-tag .ico { width: 13px; height: 13px; }
.sp-id-st { flex: none; text-align: right; } .sp-id-st span { display: block; font-size: 12px; color: var(--st-mute); } .sp-id-st b { font: 800 22px/1.1 var(--font-display); }
.sp-id-st.to_rate b { color: var(--st-or2); } .sp-id-st.sold b { color: var(--st-gr); }
.sp-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: 8px; background: var(--st-bg); } .sp-box span { font-size: 12px; font-weight: 600; color: var(--st-mute); }
.sp-box b { font: 800 26px/1 var(--font-display); } .sp-box.zero b { color: #545b66; } .sp-box.or:not(.zero) b { color: var(--st-or2); }
.sp-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sp-road li { display: grid; gap: 8px; justify-items: start; padding-top: 10px; border-top: 4px solid var(--st-pan2); font-size: 12px; font-weight: 600; color: var(--st-mute); min-width: 0; }
.sp-road li.d { border-color: #e8ecf2; color: #fff; } .sp-road li.n { border-color: var(--st-or); color: var(--st-or2); }
.sp-road i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--st-pan2); font-style: normal; font-size: 12px; } .sp-road i .ico { width: 14px; height: 14px; }
.sp-road .d i { background: #e8ecf2; color: #111; } .sp-road .n i { background: var(--st-or); color: #1b0b00; }
.sp-ads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.sp-ad { display: grid; gap: 8px; align-content: start; min-width: 0; } .sp-ad.killed .sp-ad-f { opacity: .55; }
.sp-ad-f { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--st-pan2); } .sp-ad-f video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sp-chip { position: absolute; left: 8px; top: 8px; z-index: 1; height: 22px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; background: rgba(7, 7, 8, .8); color: #fff; }
.sp-chip.keep { background: var(--st-gr); color: #052b00; } .sp-chip.kill { background: rgba(7, 7, 8, .85); color: #ff8f7a; } .sp-chip.wait { background: var(--st-or); color: #1b0b00; } .sp-chip.post { left: auto; right: 8px; }
.sp-ad-t { display: grid; gap: 2px; min-width: 0; } .sp-ad-t b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-ad-t span { font-size: 12px; color: var(--st-mute); }
.sp-ad-w { font-size: 12px; font-style: italic; color: #d5d9e0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sp-offer { display: grid; gap: 4px; padding: 12px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); min-width: 0; } .sp-offer:last-child { box-shadow: none; }
.sp-offer b { font-weight: 700; overflow-wrap: anywhere; } .sp-offer > span { font-size: 12px; color: var(--st-mute); overflow-wrap: anywhere; } .sp .sp-offer a { text-decoration: underline; }
.sp-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 11px; color: var(--st-gr); vertical-align: 1px; }
.sp-next { display: grid; gap: 8px; padding: 20px; border-radius: 10px; background: var(--st-pan); box-shadow: inset 0 0 0 1px var(--st-pan2); }
.sp-next > b { font: 800 26px/1.05 var(--font-display); letter-spacing: -.01em; } .sp-next p { color: #d5d9e0; } .sp-next .sp-cta { width: 100%; margin-top: 6px; }
.sp-one-side .sp-bring { margin-top: 12px; }
.sp-facts { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); margin: 0; padding: 2px 16px; border-radius: 10px; background: var(--st-pan); }
.sp-facts dt, .sp-facts dd { margin: 0; padding: 10px 0; font-size: 13px; line-height: 1.4; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); } .sp-facts dt { color: var(--st-mute); padding-right: 14px; } .sp-facts dd { overflow-wrap: anywhere; }
.sp-facts dt:last-of-type, .sp-facts dd:last-of-type { box-shadow: none; } .sp .sp-facts a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
.sp-facts + .sp-facts { margin-top: 8px; }
.sp .table-wrap { margin: 0; border-radius: 10px; background: var(--st-pan); }
.sp-small { font-size: 12px; color: var(--st-mute); }
.sp-banner .sp-road { width: 100%; max-width: 520px; margin: 4px 0 6px; }
/* widths: wide screens show more tiles; between, the table keeps the shop, its step, its counts and its next thing */
@media (min-width: 1700px) { .sp-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } .sp-tiles > :nth-child(n+13) { display: block; } .sp-tiles > :nth-child(n+17) { display: none; } .sp-claims { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sp-ads { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1399px) {
  .sp-row { grid-template-columns: minmax(180px, 2fr) 150px 48px 48px 48px minmax(0, 1fr) 124px; } .sp-c.prog, .sp-c.seg { display: none; }
  .sp-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  /* one column: the shop, its next thing and the rule, its ads and reads, then what's held about it */
  .sp-one-grid { display: flex; flex-direction: column; } .sp-one-side { display: contents; }
  .sp-one-grid > .sp-id { order: 0; } .sp-next { order: 1; margin-top: 15px; } .sp-one-side .sp-bring { order: 2; margin-top: 12px; } .sp-one-grid > .sp-one-main { order: 3; } .sp-one-side > .sp-sec { order: 4; }
  .sp-banner { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 24px; } .sp-banner h1 { font-size: 30px; }
}
@media (max-width: 899px) {
  .sp-row.hd { display: none; }
  .sp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "shop go" "step step"; gap: 8px 10px; padding: 12px 14px; }
  .sp .sp-c.shop { grid-area: shop; } .sp-c.go { grid-area: go; } .sp .sp-c.step { grid-area: step; display: flex; align-items: center; gap: 10px; padding-left: 52px; } .sp-bar { max-width: 90px; }
  .sp-c.k, .sp-c.runs, .sp-c.prog, .sp-c.seg { display: none; }
  .sp-line { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sp-tabs { grid-template-columns: minmax(0, 1fr); } .sp .sp-all { grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 10px 14px; } .sp-all b { margin: 0; font-size: 20px; }
  .sp-foot2 { grid-template-columns: minmax(0, 1fr); gap: 0; } .sp-foot2 > .sp-sec:last-child { padding-top: 24px; }
  .sp-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 760px) {
  .sp-head h1 { font-size: 24px; } .sp-sh { margin-top: 24px; } .sp-sh h2 { font-size: 18px; }
  .sp-st b { font-size: 22px; } .sp .sp-st { padding: 10px 12px; gap: 6px; }
  .sp-tiles { display: flex; gap: 9px; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; } .sp-tiles::-webkit-scrollbar { display: none; } .sp-tiles > :nth-child(n) { display: block; }
  .sp-tile { width: 116px; flex: none; } .sp-tile-n { font-size: 20px; bottom: 22px; }
  .sp-banner, .sp-banner.best { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 14px 16px; justify-items: center; text-align: center; background: radial-gradient(90% 55% at 50% 18%, color-mix(in oklab, var(--glow) 40%, transparent), transparent 75%), var(--st-pan); }
  .sp-banner-c { justify-items: center; } .sp-banner h1 { font-size: 26px; } .sp-banner-c > p { font-size: 14px; }
  .sp-pack-art { width: auto; height: 170px; } .sp-pack { width: 100%; }
  .sp-cards { gap: 8px; } .sp-card .sp-tile-n { font-size: 16px; bottom: 20px; } .sp-card .sp-tile-s { font-size: 7px; letter-spacing: .08em; } .sp .sp-take { height: 40px; font-size: 14px; }
  .sp-banner-f { width: 150px; } .sp-banner.best h1 { font-size: 34px; }
  .sp-claim .sp-tile-n { font-size: 18px; }
  .sp-one-side { grid-template-columns: minmax(0, 1fr); } .sp-one-side .sp-bring { margin-top: 12px; }
  .sp-id { padding: 16px; gap: 14px; } .sp-id-top { flex-wrap: wrap; gap: 12px; } .sp-pic.lg { width: 64px; height: 64px; font-size: 34px; } .sp-id h1 { font-size: 26px; } .sp-id-top .t { flex-basis: calc(100% - 80px); }
  .sp-id-st { text-align: left; flex-basis: 100%; display: flex; align-items: baseline; gap: 8px; } .sp-id-st b { font-size: 18px; }
  .sp-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-box b { font-size: 22px; }
  .sp-road li { font-size: 10px; } .sp-road li span { overflow-wrap: anywhere; }
  .sp-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-c.step { padding-left: 52px; }
}
@media (max-width: 359px) { .sp-cards { gap: 6px; } .sp-card .sp-tile-n { font-size: 14px; } .sp-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-head-a { padding: 0 10px; } }
/* the Path: a long step name wraps into even lines beside its node */
.g-lab b { text-wrap: balance; }
/* the skill page: the ad a visitor came from, the way in without an AI, three words */
.sk-ad { display: grid; gap: var(--s2); justify-items: center; } .sk-ad .mk-fine { margin: 0; }
.sk-words .g-srow { min-height: 0; padding: var(--s3) 0; } .sk-words .t span { font-size: 13px; line-height: 1.4; }
/* the ERD: each table's newest row on its line, quiet and in code style; the known answers as a table that wraps */
.erd-t .erd-new { flex: 0 1 auto; min-width: 0; font: 11px ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.erd-known .table-wrap table { min-width: 0; } .erd-known { scroll-margin-top: 84px; }
a.erd-changed { display: block; text-decoration: none; }
@media (min-width: 1000px) { .erd-t .erd-to { flex-basis: 160px; } .erd-t .erd-new { max-width: 250px; text-align: right; } }
/* a price in credits says the word on the buttons that spend them on Sell and Make (a stranger: "an 8 on it, not sure if that's credits") */
.mk-go .tail.num:not(:empty)::after { content: " credits"; }
.ob-own { display: block; text-align: center; margin-top: var(--s2); }
.erd-t .erd-to { order: 1; } .erd-t .erd-new { order: 2; } .erd-t .num { order: 3; }
/* Colour by what a thing is, the same on every page: the next step is orange, done and earned are gold, money is green,
   posting and channels are blue, shops are teal, lessons are violet. A tile takes its colour from its own icon. */
.g-tile { background: linear-gradient(180deg, var(--c-lock-hi), var(--c-lock)); color: var(--c-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 22%, transparent), 0 3px 0 var(--c-lock-lip); }
.g-tile:has(use[href="#i-school"]), .g-qtile:has(use[href="#i-school"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-violet) 70%, var(--c-white)), var(--c-violet) 55%, var(--c-violet-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-violet-deep); }
.g-tile:has(use[href="#i-share"]), .g-tile:has(use[href="#i-eye"]), .g-qtile:has(use[href="#i-share"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-blue) 60%, var(--c-white)), var(--c-blue) 55%, var(--c-blue-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-blue-deep); }
.g-tile:has(use[href="#i-store"]), .g-qtile:has(use[href="#i-store"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-teal) 60%, var(--c-white)), var(--c-teal) 55%, var(--c-teal-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-teal-deep); }
.g-tile:has(use[href="#i-clock"]) { background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 55%, var(--c-gold-lo)); color: var(--c-gold-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-gold-deep); }
.g-tile.ok { background: linear-gradient(180deg, var(--c-green-hi), var(--c-green) 55%, var(--c-green-lo)); color: var(--c-green-deep); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-green-deep); }
.md-next .g-tile.ok { color: var(--c-green-deep); }
.g-quest.done .g-qtile { background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 50%, var(--c-gold-lo)); color: var(--c-gold-ink); }
.chip.money { background: linear-gradient(180deg, color-mix(in oklab, var(--c-green) 26%, var(--c-surface-2)), color-mix(in oklab, var(--c-green) 12%, var(--c-surface))); color: var(--c-green-hi); }
.chip .ico { color: var(--c-gold); }
/* the same colours where a person first meets them: onboarding's five answers, and the Path's steps still ahead (dimmed until lit) */
:root { --c-pink: #ff6fae; --c-pink-lo: #e0407f; --c-pink-deep: #8f1f4c; }
.ob-opt .ob-tile:has(use[href="#i-seed"]), .ob-opt .ob-tile:has(use[href="#i-leaf"]) { background: linear-gradient(180deg, var(--c-green-hi), var(--c-green) 55%, var(--c-green-lo)); color: var(--c-green-deep); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-green-deep); }
.ob-opt .ob-tile:has(use[href="#i-film"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-pink) 65%, var(--c-white)), var(--c-pink) 55%, var(--c-pink-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-pink-deep); }
.ob-opt .ob-tile:has(use[href="#i-share"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-blue) 60%, var(--c-white)), var(--c-blue) 55%, var(--c-blue-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-blue-deep); }
.ob-opt .ob-tile:has(use[href="#i-person"]) { background: linear-gradient(180deg, var(--c-gold-hi), var(--c-gold) 55%, var(--c-gold-lo)); color: var(--c-gold-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-gold-deep); }
.ob-opt .ob-tile:has(use[href="#i-store"]) { background: linear-gradient(180deg, color-mix(in oklab, var(--c-teal) 60%, var(--c-white)), var(--c-teal) 55%, var(--c-teal-lo)); color: var(--c-void); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-white) 55%, transparent), 0 3px 0 var(--c-teal-deep); }
.g-node.lock:has(use[href="#i-share"]) { background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--c-blue) 55%, var(--c-lock-hi)), color-mix(in oklab, var(--c-blue) 28%, var(--c-lock)) 62%); color: color-mix(in oklab, var(--c-blue) 55%, var(--c-white)); }
.g-node.lock:has(use[href="#i-store"]) { background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--c-teal) 55%, var(--c-lock-hi)), color-mix(in oklab, var(--c-teal) 28%, var(--c-lock)) 62%); color: color-mix(in oklab, var(--c-teal) 55%, var(--c-white)); }
.g-node.lock:has(use[href="#i-tag"]) { background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--c-violet) 55%, var(--c-lock-hi)), color-mix(in oklab, var(--c-violet) 28%, var(--c-lock)) 62%); color: color-mix(in oklab, var(--c-violet) 55%, var(--c-white)); }
.g-node.lock:has(use[href="#i-cash"]), .g-node.lock:has(use[href="#i-bank"]) { background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--c-green) 50%, var(--c-lock-hi)), color-mix(in oklab, var(--c-green) 24%, var(--c-lock)) 62%); color: color-mix(in oklab, var(--c-green) 55%, var(--c-white)); }
/* Day: the light page (picked Nov 13: "B looks the best"). The same pieces on cream and white; the tokens carry it, and
   the few rules under them are the pieces that were drawn for the night. Night stays as it was, one switch away. */
:root[data-theme="light"] { color-scheme: light;
  --c-void: #efe4d2; --c-bg: #fbf4e6; --c-bg-up: #ffffff; --c-surface: #ffffff; --c-surface-2: #fffaf0; --c-surface-3: #f4ead8; --c-edge: #e2d5bd;
  --c-road: #eadfca; --c-road-edge: #dccdb0; --c-road-dash: #b6a585; --c-ink: #1c1733; --c-ink-2: #403b5c; --c-muted: #746f8d; --c-faint: #a9a3ba;
  --c-lock: #e8decb; --c-lock-hi: #f7efdf; --c-lock-lip: #cbbfa6; --c-lock-ink: #9f947b; --c-shadow: #6b5632;
  --c-green: #0fa35a; --c-green-hi: #0b7d45; --c-orange-hi: #ff8a52; --c-visor: #1c1733; --c-white: #ffffff; --c-focus: #ff6a2b; --c-wait: #b97800; --c-bad: #d92d4a;
  --c-wait-t: rgba(185,120,0,.12); --c-bad-t: rgba(217,45,74,.1);
  --hair: color-mix(in oklab, var(--c-ink) 10%, transparent); --hair-2: color-mix(in oklab, var(--c-ink) 16%, transparent);
  --hi-line: inset 0 1px 0 #ffffff;
  --sh-card: inset 0 1px 0 #ffffff, 0 2px 0 var(--c-edge), 0 14px 28px -18px rgba(107,86,50,.45); }
[data-theme="light"] body::after { opacity: 0; }
[data-theme="light"] .app { background: radial-gradient(120% 46% at 50% -14%, #ffe9d6 0%, transparent 60%), var(--c-bg); }
[data-theme="light"] .top { background: color-mix(in oklab, var(--c-bg) 88%, transparent); }
[data-theme="light"] .tabs { background: color-mix(in oklab, var(--c-white) 94%, transparent); box-shadow: 0 -1px 0 var(--c-edge); }
[data-theme="light"] .card, [data-theme="light"] .g-week, [data-theme="light"] .ob-opt, [data-theme="light"] .ob-cat, [data-theme="light"] .chip, [data-theme="light"] .g-bubble, [data-theme="light"] .g-quiet, [data-theme="light"] .btn:not(.primary) { background: var(--c-white); }
[data-theme="light"] .g-bubble::after { background: var(--c-white); }
[data-theme="light"] .g-go, [data-theme="light"] .btn.primary, [data-theme="light"] .g-node.now { color: #fff; }
[data-theme="light"] .g-node.done { color: var(--c-gold-ink); }
[data-theme="light"] .chip.money { color: #0b7d45; background: #e3f8ec; } [data-theme="light"] .pill.ok { color: #0b7d45; background: #dcf6e7; }
[data-theme="light"] .g-tile { background: linear-gradient(180deg, #ffffff, var(--c-surface-3)); color: var(--c-ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--hair-2), 0 3px 0 var(--c-lock-lip); }
[data-theme="light"] .mark .i { filter: invert(1); }
[data-theme="light"] .ob-opt:has(input:checked), [data-theme="light"] .ob-cat:has(input:checked), [data-theme="light"] .ob-opt.on, [data-theme="light"] .ob-cat.on { background: #fff1e7; }
[data-theme="light"] .g-qtile { background: var(--c-surface-3); color: var(--c-ink); }
[data-theme="light"] .g-quest.now .g-qtile { color: #fff; }
[data-theme="light"] .test-strip { background: #fff0cf; color: #8a5a00; }
[data-theme="light"] .avatar { background: #ffe1cf; color: #b8430f; }
[data-theme="light"] .pill.wait { background: #fff0cf; color: #8a5a00; }
[data-theme="light"] .rt-note.bad, [data-theme="light"] .sl-said.bad { color: #b8430f; }
/* the look's switch: in the foot of every page, and on You */
.foot-theme { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.foot-theme .t-night { display: none; } [data-theme="dark"] .foot-theme .t-night { display: inline; } [data-theme="dark"] .foot-theme .t-day { display: none; }
.card.you-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); }
.you-theme .t { display: grid; gap: 2px; } .you-theme .t b { font-size: 15px; } .you-theme .t span { font-size: 12px; color: var(--c-muted); }
.you-seg { display: inline-grid; grid-auto-flow: column; padding: 4px; gap: 4px; border-radius: 14px; background: var(--c-surface-3); }
.you-seg button { min-height: 40px; min-width: 72px; padding: 0 14px; border: 0; border-radius: 10px; background: none; font: 600 14px var(--font-body); color: var(--c-muted); cursor: pointer; }
[data-theme="light"] .you-seg .seg-light, [data-theme="dark"] .you-seg .seg-dark { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--hi-line), 0 0 0 1px var(--hair-2); }
/* Day: text and icons that were light-on-dark get a darker ink (gold words, a locked step's icon) */
[data-theme="light"] .g-lesson { color: #9a5a00; }
[data-theme="light"] .g-node.lock { color: var(--c-lock-ink); }
[data-theme="light"] .g-node.lock:has(use[href="#i-share"]) { color: var(--c-blue-deep); } [data-theme="light"] .g-node.lock:has(use[href="#i-store"]) { color: var(--c-teal-deep); }
[data-theme="light"] .g-node.lock:has(use[href="#i-tag"]) { color: var(--c-violet-deep); } [data-theme="light"] .g-node.lock:has(use[href="#i-cash"]), [data-theme="light"] .g-node.lock:has(use[href="#i-bank"]) { color: var(--c-green-hi); }
[data-theme="light"] .mk-cost, [data-theme="light"] .chip .ico { color: #b97800; }
/* the count of ads to rate, on Make in the nav of every page */
.nav-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-orange); color: #fff; font: 700 11px/1 var(--font-body); }
.tab .pill2 { position: relative; } .tab .pill2 .nav-n { position: absolute; top: -4px; right: -8px; box-shadow: 0 0 0 2px var(--c-bg); }
.d-nav a .nav-n { margin-left: 2px; }
/* To rate: which of two ads for one shop is better */
.card.rt-pair { gap: var(--s3); padding: var(--s4); } .rt-pair > div:first-child { display: grid; gap: 2px; } .rt-pair > div:first-child b { font-size: 16px; } .rt-pair > div:first-child span { font-size: 13px; color: var(--c-muted); }
.rt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .rt-two form { display: grid; gap: var(--s2); min-width: 0; }
.rt-two .player { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; margin: 0; background: #000; } .rt-two .btn { width: 100%; white-space: normal; min-height: 44px; }
/* Your organization (/floor): the line of stations with the step written on each belt, engines as machines with a belt in per organization */
.fl-eye { font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 4px; }
.fl-sec { display: grid; gap: var(--s3); min-width: 0; } .fl-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.fl-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fl-st { display: grid; justify-items: stretch; }
.fl-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--sh-card), 0 0 0 1px var(--hair-2); text-decoration: none; color: var(--c-ink); }
.fl-box b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; order: 3; } .fl-box > span:last-child { font-size: 15px; font-weight: 600; order: 2; }
.fl-st.none .fl-box b { color: var(--c-faint); }
.fl-belt { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: var(--s3); padding: 0 var(--s4); min-height: 34px; font-size: 12px; color: var(--c-muted); }
.fl-belt i { justify-self: center; width: 4px; height: 34px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--c-road-dash) 0 6px, transparent 6px 12px); }
.fl-st.sold .fl-box .g-tile { background: linear-gradient(180deg, var(--c-green-hi), var(--c-green) 55%, var(--c-green-lo)); color: var(--c-green-deep); }
.card.fl-m { gap: var(--s3); padding: var(--s4); }
.fl-m-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .fl-m-top .t { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; } .fl-m-top .t b { font: 800 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.fl-m-top .t .mono { font-size: 11px; color: var(--c-muted); overflow-wrap: anywhere; }
.fl-price { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--c-surface-3); font-weight: 700; font-size: 13px; } .fl-price .ico { width: 14px; height: 14px; }
.fl-users { display: grid; } .fl-u { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px var(--s3); padding: 10px 0; box-shadow: inset 0 1px 0 var(--hair); font-size: 13px; }
.fl-u .c-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .fl-u .c-who b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.fl-in { flex: none; width: 22px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--c-road-dash) 0 5px, transparent 5px 9px); }
.fl-uh { display: none; } .fl-u .num:nth-of-type(3)::after { content: " calls used"; color: var(--c-muted); } .fl-u .num:nth-of-type(4)::after { content: " made"; color: var(--c-muted); }
.fl-u .c-dial { grid-column: 3; grid-row: 1 / span 2; } .fl-dial { display: contents; }
.fl-none { margin: 0; text-align: left; }
@media (min-width: 900px) {
  .fl-line { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
  .fl-st { position: relative; padding-right: var(--s5); } .fl-st.sold { padding-right: 0; }
  .fl-box { grid-template-columns: 1fr; justify-items: start; gap: var(--s2); min-height: 132px; align-content: start; } .fl-box b { order: 2; font-size: 30px; } .fl-box > span:last-child { order: 3; }
  .fl-belt { position: absolute; right: 0; top: 0; width: var(--s5); height: 132px; padding: 0; display: block; } .fl-belt i { position: absolute; left: 2px; right: 2px; top: 64px; width: auto; height: 4px; background: repeating-linear-gradient(90deg, var(--c-road-dash) 0 5px, transparent 5px 9px); }
  .fl-belt span { position: absolute; top: 140px; right: -40px; width: 110px; text-align: center; line-height: 1.25; }
  .fl-line { padding-bottom: 36px; }
  .fl-u { grid-template-columns: minmax(0, 1.6fr) 90px 110px 70px 90px; } .fl-uh { display: grid; font: 600 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); box-shadow: none; padding: 0 0 4px; }
  .fl-u .num::after { content: none !important; } .fl-u .c-dial { grid-column: auto; grid-row: auto; justify-self: end; }
}
/* Make: the newest ads as cards with their own first frame */
.mk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mk-card { display: grid; gap: var(--s2); text-decoration: none; color: var(--c-ink); min-width: 0; }
.mk-card-film { display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--c-surface-3), var(--c-surface-2)); box-shadow: var(--sh-card), 0 0 0 1px var(--hair-2); font: 800 22px var(--font-display); color: var(--c-muted); transition: transform 200ms var(--ease-out); }
.mk-card-film video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mk-card:hover .mk-card-film { transform: translateY(-2px); }
.mk-card .t { display: grid; gap: 2px; min-width: 0; } .mk-card .t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card .t > span { font-size: 12px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-card .st { margin-top: 2px; }
/* The computer's shell (data-shell="side", set on every page): the places down the left side, the page wide beside
   them. On since Nov 13: every screen after the front page was a 400 px column in an empty page (cold walk). */
@media (min-width: 1100px) {
  [data-shell="side"] .app.signed { padding-left: 232px; }
  [data-shell="side"] .signed .top { position: fixed; inset: 0 auto 0 0; width: 232px; height: auto; backdrop-filter: none; background: var(--c-surface-2); box-shadow: inset -1px 0 0 var(--hair-2); }
  [data-shell="side"] .signed .top-in { max-width: none; height: 100%; flex-direction: column; align-items: stretch; padding: 20px 12px 16px; gap: var(--s1); }
  [data-shell="side"] .signed .mark { padding: 4px 10px 18px; }
  [data-shell="side"] .signed .d-nav { flex-direction: column; align-items: stretch; gap: 2px; }
  [data-shell="side"] .signed .d-nav a { height: 42px; padding: 0 12px; border-radius: 12px; justify-content: flex-start; gap: 12px; font-size: 15px; }
  [data-shell="side"] .signed .d-nav a .nav-n { margin-left: auto; }
  [data-shell="side"] .signed .top-in .grow { flex: 1; }
  [data-shell="side"] .signed .chips { flex-direction: column; align-items: stretch; gap: 6px; }
  [data-shell="side"] .signed .chips .chip { height: 38px; justify-content: flex-start; padding: 0 12px; }
  [data-shell="side"] .signed .chips .avatar { align-self: flex-start; margin: 6px 0 0 6px; }
  /* a screen with one job (a call cooking, the course, an order) is a reading column centred beside the rail; a screen
     with a library or a board is wide */
  [data-shell="side"] .signed .main { max-width: 760px; padding: var(--s6) var(--s6) var(--s7); }
  [data-shell="side"] .signed .main > * { max-width: none; }
  [data-shell="side"] .signed .main.wide, [data-shell="side"] .signed .main:has(> .mk > .mk-ads), [data-shell="side"] .signed .main:has(> .mk.md), [data-shell="side"] .signed .main:has(> .mk.rt), [data-shell="side"] .signed .main:has(> .mk.sl), [data-shell="side"] .signed .main:has(> .home-game) { max-width: 1180px; }
  /* the pick screen stays narrow, so both ads and both buttons fit one screen */
  [data-shell="side"] .signed .main > .mk.rt.pk { max-width: 600px; margin-inline: auto; }
  /* the two dense tables keep the room they were drawn for */
  [data-shell="side"] .signed .main.wide:has(.shp), [data-shell="side"] .signed .main.wide:has(.s1) { max-width: 1320px; }
  /* Your shops: its heading across, then two balanced columns of cards */
  [data-shell="side"] .mk.sl { display: block; max-width: none; columns: 2; column-gap: var(--s6); }
  [data-shell="side"] .mk.sl > * { break-inside: avoid; margin: 0 0 var(--s5); }
  [data-shell="side"] .mk.sl > :first-child { column-span: all; }
  /* Make beside its library: the form on the left, your ads as a grid on the right */
  [data-shell="side"] .mk:has(> .mk-ads) { max-width: none; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  [data-shell="side"] .mk:has(> .mk-ads) > * { grid-column: 1; }
  [data-shell="side"] .mk:has(> .mk-ads) > .mk-ads { grid-column: 2; grid-row: 1 / span 12; }
  [data-shell="side"] .mk-ads .mk-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  /* an ad's own screen: the ad stands on the left and stays in view; what it is and what to do with it read beside it */
  [data-shell="side"] .mk.md { max-width: 1000px; grid-template-columns: 340px minmax(0, 1fr); column-gap: var(--s7); row-gap: 0; align-items: start; }
  [data-shell="side"] .mk.md > * { grid-column: 2; margin-bottom: var(--s5); }
  [data-shell="side"] .mk.md > .md-ad { grid-column: 1; grid-row: 1 / span 14; position: sticky; top: var(--s6); margin: 0; }
  [data-shell="side"] .mk.md > .md-ad .player { max-width: 340px; width: 100%; }
  /* a call's screen (cooking, or what went wrong): its clock and steps on the left, what happens next beside them */
  [data-shell="side"] .mk.ck { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  [data-shell="side"] .mk.ck > :first-child { grid-column: 1 / -1; }
}
/* between the rail's first width and a full screen there's less room beside it: Make's library is two across, and
   the shops table keeps the shop, its state, its counts, its segment and its next step */
@media (min-width: 1100px) and (max-width: 1399px) {
  [data-shell="side"] .shp-row { grid-template-columns: minmax(180px, 1.6fr) 104px 44px 44px 48px minmax(0, 1fr) 112px; }
  [data-shell="side"] .shp-row .c-prog, [data-shell="side"] .shp-row .c-runs, [data-shell="side"] .shp-row .c-offer, [data-shell="side"] .shp-hd > :nth-child(7), [data-shell="side"] .shp-hd > :nth-child(8), [data-shell="side"] .shp-hd > :nth-child(9) { display: none; }
  [data-shell="side"] .mk-ads .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the test line of a test organization starts after the rail */
@media (min-width: 1100px) { [data-shell="side"] .app.signed > .flash:first-child, [data-shell="side"] .app.signed > .test-line { margin-left: 0; } }
/* people in an ad, as a fact under its player: checked and clear, cleared with people, not checked yet, or held */
.md-people { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-radius: var(--r-md, 14px); background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--hair-2); text-align: left; }
.md-people b { display: block; font-size: 15px; line-height: 1.3; color: var(--c-ink); } .md-people span:not(.g-tile):not(.i) { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--c-ink-2); }
.md-people.ok .g-tile { color: var(--c-ok, #1f9d6b); } .md-people.bad { background: var(--c-bad-t, rgba(255, 90, 110, .13)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-bad) 40%, transparent); } .md-people.bad .g-tile { color: var(--c-bad); }
/* an engine's in and out: two short rows of counts from its real calls */
.fl-io { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s3); }
.fl-io-g { display: grid; gap: var(--s2); min-width: 0; padding: var(--s3); border-radius: var(--r-md, 14px); background: var(--c-surface-2); }
.fl-io-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.fl-io-r { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.fl-io-c { display: grid; gap: 2px; min-width: 44px; } .fl-io-c b { font-size: 20px; line-height: 1.1; color: var(--c-ink); } .fl-io-c span { font-size: 12px; color: var(--c-ink-2); }
.fl-io-c.zero b { color: var(--c-muted); } .fl-io-c.bad:not(.zero) b { color: var(--c-bad, #c2410c); }
.fl-callers { display: grid; gap: var(--s2); } .fl-why { display: grid; gap: var(--s1); padding: var(--s2) 0 0; } .fl-why p { margin: 0; font-size: 13px; color: var(--c-ink-2); }
@media (max-width: 699px) { .fl-io { grid-template-columns: 1fr; } .fl-io-r { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); } .fl-io-c { min-width: 0; } .fl-io-c span { font-size: 11px; } }
.fl-sum { margin: 0; font-size: 14px; color: var(--c-ink-2); } .fl-sum b { color: var(--c-ink); }
.fl-fold summary { cursor: pointer; font: 600 13px var(--font-body); color: var(--c-muted); padding: 4px 0; } .fl-fold[open] summary { margin-bottom: 4px; }
/* Your organization, on the machine queries: a Real / Test rows switch, dials as chips, a flow strip, money as bars */
.fl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.fl-dials { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fl-u { grid-template-columns: minmax(0, 1fr) auto; } .fl-u .c-may { grid-column: 1 / -1; font-size: 12px; color: var(--c-muted); overflow-wrap: anywhere; } .fl-u .num::after { content: none !important; }
.card.fl-bars { gap: var(--s2); padding: var(--s4); } .fl-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: var(--s3); font-size: 13px; min-height: 28px; }
.fl-bar-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-bar-t { height: 10px; border-radius: 5px; background: var(--c-surface-3); overflow: hidden; } .fl-bar-t i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--c-green-lo), var(--c-green)); }
.fl .fl-fold .table-wrap table { min-width: 0; }
@media (min-width: 900px) {
  .fl-u { grid-template-columns: minmax(0, 1.2fr) 150px minmax(0, 1.6fr) 90px; } .fl-u .c-may { grid-column: auto; }
}

/* ---- Home, signed in (pages/stage.ts; docs/LOOK.md) ----
   The lobby look: a close copy of a real lobby's layout read live on Nov 13 2026 (a slim icon rail, a banner around one
   bright button, two count bars, a search bar, rows of eight loud 3:4 tiles with heavy white capitals and a live count
   under each, a live column at the right), with our rows and the frames of our own ads. data-st picks the ground:
   "black" (near-black) or "navy". Orange is the action, green is live and real money. Its own names (st-) so no older
   rule reaches it. */
html:has(.st-app), html:has(.st-app) body { background: #0e0e10; color-scheme: dark; }
html:has(.st-app[data-st="navy"]), html:has(.st-app[data-st="navy"]) body { background: #172b39; }
html:has(.st-app) body::after { display: none; }
.app.st-app { --st-bg: #0e0e10; --st-rail: #070708; --st-pan: #1b1b1f; --st-pan2: #2b2b31; --st-mute: #a9b4c4; --st-gr: #2de01c; --st-or: #ff6a1f; --st-or2: #ff9a3d;
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 340px; min-height: 100vh; background: var(--st-bg); color: #fff; font: 500 14px/1.35 var(--font-body); }
.app.st-app[data-st="navy"] { --st-bg: #172b39; --st-rail: #0e202d; --st-pan: #213545; --st-pan2: #3e586c; --st-mute: #a1bfd6; }
.st-app a { color: inherit; text-decoration: none; }
.st-app .i { display: inline-flex; } .st-app .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-rail { position: sticky; top: 0; height: 100vh; background: var(--st-rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; box-shadow: 2px 0 8px rgba(0, 0, 0, .25); z-index: 3; }
.st-rail a { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--st-mute); } .st-app .st-rail a.on { background: var(--st-pan); color: #fff; }
.st-rule { width: 32px; height: 2px; background: var(--st-pan); margin: 8px 0; }
.st-mid { min-width: 0; }
.st-top { position: sticky; top: 0; z-index: 2; height: 60px; background: var(--st-bg); box-shadow: 0 4px 8px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 10px; padding: 0 24px; }
.st-logo { font: italic 800 24px/1 var(--font-display); letter-spacing: -.03em; margin-right: auto; }
.st-pin { height: 44px; padding: 0 20px; border-radius: 8px; background: var(--st-pan); display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; white-space: nowrap; } .st-pin .i { color: var(--st-or2); }
.st-wal { display: flex; align-items: center; height: 44px; border-radius: 8px; background: var(--st-rail); overflow: hidden; font-size: 16px; font-weight: 600; } .st-wal span { padding: 0 16px; } .st-wal span.won { color: var(--st-gr); }
.st-wal b { height: 44px; padding: 0 16px; display: flex; align-items: center; background: var(--st-or); color: #1b0b00; font-weight: 800; }
.st-wrap { max-width: 934px; margin: 0 auto; padding: 20px 24px 40px; }
.st-hero { position: relative; aspect-ratio: 3.16; border-radius: 10px; overflow: hidden; background: #2a0e03 url(/packs/banner.webp) center / cover; }
.st-hero::after { content: ""; position: absolute; left: 51%; top: 50%; width: 420px; height: 300px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(30, 9, 0, .55), rgba(30, 9, 0, 0)); }
.st-hero-c { position: absolute; left: 51%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 300px; z-index: 1; }
.st-hero h1 { margin: 0 0 6px; font: 800 27px/1.1 var(--font-display); letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); color: #fff; }
.st-hero p { margin: 0 0 14px; font-size: 14px; color: #ffe6d2; }
.st-app a.st-cta { display: block; height: 48px; border-radius: 8px; background: #fff; color: #1b0b00; font-weight: 800; font-size: 16px; line-height: 48px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.st-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.st-bars a { height: 44px; border-radius: 8px; background: var(--st-pan); display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 700; } .st-bars a > span:last-child { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--st-mute); } .st-bars b { color: #fff; }
.st-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-gr); box-shadow: 0 0 6px var(--st-gr); flex: none; display: inline-block; } .st-dot.now { background: var(--st-or2); box-shadow: 0 0 6px var(--st-or2); }
.st-find { height: 50px; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--st-pan2); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--st-mute); margin-bottom: 22px; }
.st-sh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 20px/1.2 var(--font-body); } .st-sh .i, .st-sh > span { color: var(--st-mute); }
.st-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; } .st-tiles > :nth-child(n+7) { display: none; }
.st-tile { display: block; min-width: 0; }
.st-tile-p { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 2px 4px -1px rgba(0, 0, 0, .12); }
.st-tile-p .st-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.st-tile-p::after { content: ""; position: absolute; inset: 52% 0 0 0; background: linear-gradient(180deg, transparent, var(--c2) 70%); }
.st-tile-p:has(.st-frame)::after { inset: 48% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .86) 72%); }
.st-tile-pic { position: absolute; inset: 0 0 34% 0; background: center / cover no-repeat; } .st-tile-p:has(.st-tile-pic)::after { inset: 36% 0 0 0; background: linear-gradient(180deg, transparent, var(--c2) 44%); }
.st-site { margin: 0 0 12px; height: 44px; border-radius: 8px; background: var(--st-pan); display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--st-mute); } .st-site b { color: #fff; font-weight: 700; }
.st-tile-l { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; font: 800 64px/1 var(--font-display); color: rgba(255, 255, 255, .95); text-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.st-tile-n { position: absolute; left: 6px; right: 6px; bottom: 26px; z-index: 1; text-align: center; font: 800 24px/.95 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.st-tile-s { position: absolute; left: 6px; right: 6px; bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; text-align: center; font: 700 8.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.st-tile-p.dark { --c1: var(--st-pan2); --c2: var(--st-pan); } .st-tile-p.done { --c1: #2de01c; --c2: #0b5c1a; }
.st-tile-k { position: absolute; inset: 8% 14% 26%; background: center / contain no-repeat; mix-blend-mode: lighten; }
.st-tile-c { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--st-mute); white-space: nowrap; overflow: hidden; } .st-tile-c b { color: #fff; font-weight: 600; }
.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; }
.st-more { display: flex; align-items: center; gap: 16px; margin: 14px 0 26px; color: var(--st-mute); font-weight: 400; font-size: 16px; } .st-more::before, .st-more::after { content: ""; flex: 1; height: 1px; background: var(--st-pan2); }
.st-gap { height: 26px; }
.st-packrow { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 8px; background: var(--st-pan); }
.st-pack { display: block; width: 64px; height: 92px; flex: none; background: center / contain no-repeat; mix-blend-mode: lighten; }
.st-packrow b { display: block; font-size: 15px; font-weight: 700; } .st-packrow span span { font-size: 13px; color: var(--st-mute); }
.st-live { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--st-rail); box-shadow: -2px 0 8px rgba(0, 0, 0, .25); }
.st-live-h { height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 700; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); }
.st-you { margin: 14px 14px 4px; padding: 14px; border-radius: 8px; background: var(--st-pan); display: block; } .st-you.phone { display: none; }
.st-bring { display: block; margin: 10px 14px 4px; padding: 14px; border-radius: 8px; background: linear-gradient(135deg, #ff8a2b, #c74407); } .st-bring.phone { display: none; }
.st-bring .st-k { color: #ffe6d2; } .st-bring b { display: block; font: 800 22px/1.08 var(--font-display); letter-spacing: -.01em; color: #fff; } .st-bring > span:last-child { display: block; margin-top: 8px; font-size: 12px; color: #ffe6d2; }
.st-k { display: block; font-size: 12px; color: var(--st-mute); margin-bottom: 6px; } .st-big { display: block; font: 800 34px/1 var(--font-display); letter-spacing: -.02em; } .st-app .st-big.won { color: var(--st-gr); }
.st-you-r { display: flex; gap: 8px; margin-top: 12px; } .st-you-r a { flex: 1; height: 36px; border-radius: 6px; background: var(--st-bg); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 13px; } .st-you-r .i { color: var(--st-or2); } .st-you-r .ico { width: 15px; height: 15px; }
.st-lv { display: block; height: 8px; border-radius: 8px; background: var(--st-bg); margin-top: 12px; overflow: hidden; } .st-lv span { display: block; height: 100%; min-width: 3%; background: var(--st-or); }
.st-small { display: block; margin-top: 6px; color: var(--st-mute); font-size: 12px; }
.st-ev { margin: 6px 14px 0; padding: 10px 12px; border-radius: 6px; background: var(--st-bg); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.st-ev .st-frame, .st-ev-x { width: 34px; height: 44px; border-radius: 4px; object-fit: cover; background: linear-gradient(180deg, var(--c1, var(--st-pan2)), var(--c2, var(--st-pan2))); display: grid; place-items: center; font: 800 18px/1 var(--font-display); color: #fff; }
.st-ev-t { display: block; min-width: 0; } .st-ev-t b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-ev-t span { color: var(--st-mute); font-size: 12px; } .st-app .st-ev-t .ok { color: var(--st-gr); } .st-app .st-ev-t .now { color: var(--st-or2); }
.st-ev-at { color: var(--st-mute); font-size: 11px; white-space: nowrap; } .st-none { margin: 14px; color: var(--st-mute); font-size: 13px; }
.st-livep, .st-tabs { display: none; }
@media (max-width: 1199px) {
  .app.st-app { grid-template-columns: 60px minmax(0, 1fr); } .st-live { display: none; } .st-you.phone { display: block; margin: 0 0 22px; } .st-bring.phone { display: block; margin: -10px 0 22px; }
  .st-livep { display: block; margin-top: 26px; } .st-livep .st-ev { margin: 6px 0 0; background: var(--st-pan); }
  .st-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app.st-app { grid-template-columns: minmax(0, 1fr); } .st-rail { display: none; }
  .st-top { height: 56px; padding: 0 14px; } .st-logo { font-size: 22px; } .st-pin { display: none; } .st-wal, .st-wal b { height: 40px; }
  .st-wrap { padding: 12px 12px 100px; }
  .st-hero { aspect-ratio: auto; height: 230px; background: url(/packs/rookie-cut.webp) -34px 60% / auto 86% no-repeat, url(/packs/legend-cut.webp) calc(100% + 40px) 70% / auto 80% no-repeat, radial-gradient(90% 140% at 50% 110%, #ff8a2b 0, #c74407 38%, #3a1505 78%); } .st-hero::after { width: 300px; height: 260px; background: radial-gradient(closest-side, rgba(30, 9, 0, .82), rgba(30, 9, 0, .5) 70%, rgba(30, 9, 0, 0)); }
  .st-hero-c { width: 230px; left: 50%; } .st-hero h1 { font-size: 22px; } .st-hero p { font-size: 12px; margin-bottom: 10px; } .st-app a.st-cta { height: 44px; line-height: 44px; font-size: 15px; }
  .st-bars { gap: 8px; } .st-bars a { padding: 0 10px; font-size: 13px; } .st-bars .w { display: none; } .st-find { margin-bottom: 18px; }
  .st-tiles { display: flex; gap: 9px; overflow-x: auto; margin-right: -12px; padding-right: 12px; scrollbar-width: none; } .st-tiles::-webkit-scrollbar { display: none; } .st-tiles > :nth-child(n+7) { display: block; }
  .st-tile { width: 116px; flex: none; } .st-tile-n { font-size: 20px; bottom: 22px; } .st-more { margin: 10px 0 20px; }
  .st-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--st-rail); box-shadow: 0 -4px 8px rgba(0, 0, 0, .25); justify-content: space-around; align-items: center; z-index: 20; }
  .st-tabs a { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--st-mute); min-width: 56px; } .st-app .st-tabs a.on { color: #fff; }
}
@media (min-width: 1700px) { .st-wrap { max-width: 1230px; } .st-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } .st-tiles > :nth-child(n+7) { display: block; } .st-tiles > :nth-child(n+9) { display: none; } }
/* ---- The lobby shell on every signed-in page (pages/frame.ts): Home's rail, top bar and tabs around each page, and
   the older pages' tokens set near-black with the lobby's radii, panels and orange, so cards, buttons, fields and type
   read in the look until each page is redrawn in it (docs/LOOK.md). ---- */
.app.st-app.st-shell { grid-template-columns: 60px minmax(0, 1fr);
  --c-void: #070708; --c-bg: #0e0e10; --c-bg-up: #151518; --c-surface: #1b1b1f; --c-surface-2: #222227; --c-surface-3: #2b2b31; --c-edge: #34343b;
  --c-road: #1b1b1f; --c-road-edge: #2b2b31; --c-road-dash: #3d3d45;
  --c-ink: #fff; --c-ink-2: #d5d9e0; --c-muted: #a9b4c4; --c-faint: #76808f;
  --c-orange: #ff6a1f; --c-orange-hi: #ff9a3d; --c-orange-lo: #e85a10; --c-orange-deep: #8f3406; --c-green: #2de01c;
  --c-lock: #26262b; --c-lock-hi: #33333a; --c-lock-lip: #09090a; --c-lock-ink: #6c7483; --c-white: #fff;
  --r-card: 10px; --r-btn: 8px; --r-tile: 8px;
  --hair: rgba(255, 255, 255, .08); --hair-2: rgba(255, 255, 255, .14); --hi-line: 0 0 0 0 transparent;
  --sh-card: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 2px 4px -1px rgba(0, 0, 0, .12);
  --c-page: var(--c-bg); --c-side: var(--c-void); --c-card: var(--c-surface); --c-line: var(--hair); --c-line-2: var(--hair-2); --c-tint: var(--c-surface-2);
  --c-body: var(--c-ink-2); --c-soft: var(--c-muted);
  --c-coral: var(--c-orange); --c-coral-h: var(--c-orange-hi); --c-coral-ink: var(--c-orange-hi); --c-coral-t: color-mix(in oklab, var(--c-orange) 14%, transparent); --c-coral-ring: color-mix(in oklab, var(--c-orange) 45%, transparent);
  --c-navy: var(--c-void); --c-ok: var(--c-green); --c-ok-t: color-mix(in oklab, var(--c-green) 13%, transparent);
  --c-btn: var(--c-orange); --c-r: var(--r-card); --c-r-sm: var(--r-tile); }
.st-shell .st-rail a { position: relative; } .st-shell .st-rail .nav-n, .st-shell .st-tabs .nav-n { position: absolute; top: 2px; right: 0; background: var(--st-or); color: #1b0b00; }
.st-shell .st-tabs a { position: relative; }
/* fixed-width digits wherever a number can change, so it never jitters (docs/LOOK.md, Craft) */
.app.st-app { font-variant-numeric: tabular-nums; }
.st-unit { color: var(--st-mute); font-weight: 500; }
@media (max-width: 1099px) { .st-top .st-unit { display: none; } }
.st-shell .main { max-width: 934px; padding: 24px 24px 56px; font-size: 15px; color: var(--c-ink); } .st-shell .main.wide { max-width: 1230px; }
.st-shell .main a { color: inherit; }
.st-shell .title, .st-shell .g-h1 { font: 800 28px/1.1 var(--font-display); letter-spacing: -.02em; font-variation-settings: normal; }
.st-shell .card, .st-shell .stat { background: var(--st-pan); box-shadow: none; border-radius: 10px; }
.st-shell .btn { min-height: 44px; border-radius: 8px; background: var(--st-pan2); color: #fff; box-shadow: none; font-weight: 700; }
.st-shell .btn.primary, .st-shell .g-go { min-height: 48px; border-radius: 8px; background: var(--st-or); color: #1b0b00; font: 800 16px var(--font-body); letter-spacing: 0; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); text-shadow: none; }
.st-shell .btn.primary.small { min-height: 40px; font-size: 14px; }
.st-shell .btn:active, .st-shell .btn.primary:active, .st-shell .g-go:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.st-shell input[type="text"], .st-shell input[type="email"], .st-shell input[type="search"], .st-shell input[type="url"], .st-shell input[type="number"], .st-shell input:not([type]), .st-shell select, .st-shell textarea {
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--st-pan2); color: #fff; }
.st-shell input:focus, .st-shell select:focus, .st-shell textarea:focus { outline: 2px solid var(--st-or2); outline-offset: 0; }
.st-shell .foot { border-top-color: var(--st-pan); }
.st-shell .test-strip { background: #33260a; color: #ffcf5a; }
@media (max-width: 760px) { .app.st-app.st-shell { grid-template-columns: minmax(0, 1fr); } .st-shell .main { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); } }
/* Admin → Screens (pages/screens.ts): competitors' screens as a graph */
.scr-filters { display: grid; gap: var(--s2); min-width: 0; }
.scr-chips .n { margin-left: 6px; font-weight: 500; opacity: .7; }
.scr-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.card.scr-tile { display: grid; gap: 4px; padding: 0 0 var(--s3); overflow: clip; text-decoration: none; color: inherit; font-size: 13px; }
.scr-tile img, .scr-noshot { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--c-tint); margin-bottom: var(--s2); }
.scr-noshot { display: grid; place-items: center; }
.scr-tile b, .scr-tile span { padding: 0 var(--s3); overflow-wrap: anywhere; } .scr-tile b { font-size: 15px; font-weight: 600; }
a.scr-tile:hover { background: color-mix(in oklab, var(--c-ink) 4%, transparent); }
.scr-two { display: grid; gap: var(--s5); min-width: 0; }
.scr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); } .scr-bar .sl-chips { margin: 0; padding: 0; }
.card.scr-shot { padding: 0; overflow: auto; max-height: 80vh; display: block; } .scr-shot img { display: block; width: 100%; height: auto; }
.card.scr-frame { padding: 0; width: 100%; height: 80vh; border: 0; background: #fff; display: block; }
.card.scr-links { list-style: none; margin: 0; padding: var(--s2) var(--s4); gap: 0; font-size: 14px; }
.scr-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); padding: var(--s2) 0; box-shadow: inset 0 -1px 0 var(--hair); overflow-wrap: anywhere; }
.scr-links li:last-child { box-shadow: none; } .scr-links .mono { font-size: 12px; } .scr-links a { color: var(--c-ink); font-weight: 600; }
@media (min-width: 1000px) { .scr-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---- A shop's ad page (pages/shop-ad.ts): plain and white, its own colours in the Day and Night looks alike.
   Sizes after a video page read live (research/v4/shots-ux-1112/66-shop-page-theirs-ours.jpg). ---- */
html:has(.sa), body:has(.sa) { background: #fff; } body:has(.sa)::after { display: none; }
.sa { min-height: 100vh; background: #fff; color: #16181d; font: 400 16px/1.5 var(--font-body); }
.sa a { color: inherit; }
.sa-top { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid #e6e8ec; }
.sa-logo { font-weight: 700; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.sa-mail { font-size: 14px; color: #4a505c; }
.sa > .flash { max-width: 1080px; margin: 12px auto 0; width: calc(100% - 32px); border-radius: 10px; background: #eaf6ee; color: #14532d; }
.sa > .flash.bad { background: #fdecec; color: #8f1d1d; }
.sa-band { display: grid; justify-items: center; gap: 10px; padding: 16px; background: #0f1012; }
.sa-band .player { max-width: 300px; margin: 0; border-radius: 10px; }
.sa-cap { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.4; color: #a9adb8; text-align: center; }
.sa-held, .sa-band .preview-wait { width: 100%; max-width: 420px; padding: 22px 20px; border: 0; border-radius: 10px; background: #1b1d21; color: #c9ccd3; font-size: 15px; }
.sa-held { display: grid; gap: 8px; } .sa-held b { font-size: 19px; line-height: 1.3; color: #fff; } .sa-held p { margin: 0; }
.sa-body { display: grid; gap: 14px; align-content: start; min-width: 0; max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.sa-body > * { margin: 0; min-width: 0; }
.sa h1 { font: 700 23px/1.2 var(--font-body); letter-spacing: -.02em; text-wrap: balance; }
.sa-by { margin-top: -8px; font-size: 14px; color: #5b616e; }
.sa-say { font-size: 17px; text-wrap: pretty; }
.sa-who, .sa-note { padding: 12px 14px; border-radius: 10px; background: #f4f5f7; font-size: 14px; color: #3d424d; }
.sa-note { background: #fff6dd; color: #6b4a00; }
.sa-paid { display: grid; gap: 8px; justify-items: start; font-size: 14px; color: #5b616e; } .sa-paid p { margin: 0; }
.sa-ok { padding: 12px 14px; border-radius: 10px; background: #eaf6ee; color: #14532d; font-size: 15px; font-weight: 600; }
.sa h2 { margin-top: 12px; font: 700 17px/1.3 var(--font-body); letter-spacing: 0; }
.sa-ch { display: grid; gap: 10px; }
.sa-c { padding: 14px 16px; border: 1px solid #d9dce2; border-radius: 12px; }
.sa-c:not(details), .sa-c > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.sa-c > summary { list-style: none; cursor: pointer; } .sa-c > summary::-webkit-details-marker { display: none; }
.sa-c > summary:focus-visible, .sa-btn:focus-visible { outline: 2px solid #16181d; outline-offset: 3px; border-radius: 8px; }
.sa-c b { grid-column: 1; font-size: 16px; font-weight: 600; } .sa-c span { grid-column: 1; font-size: 14px; color: #5b616e; }
.sa-c em { grid-column: 1 / -1; margin-top: 2px; font-style: normal; font-size: 13px; color: #7a808c; }
.sa-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid #16181d; border-radius: 8px; background: #fff; color: #16181d; font: 600 14px var(--font-body); font-style: normal; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sa-c .sa-btn { grid-row: 1 / 3; grid-column: 2; }
.sa-btn.sa-solid { background: #16181d; color: #fff; } .sa .sa-btn.sa-solid { color: #fff; }
.sa-body > .sa-btn { justify-self: start; min-height: 44px; }
.sa-td[open] > summary .sa-btn { visibility: hidden; }
.sa-td .form { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6e8ec; }
.sa-td .form .sa-btn { grid-row: auto; grid-column: auto; justify-self: start; min-height: 44px; }
.sa-fine { margin: 0; font-size: 13px; line-height: 1.5; color: #5b616e; }
.sa label { font-size: 14px; color: #16181d; }
.sa input[type="text"], .sa input[type="email"], .sa textarea { border: 1px solid #c9cdd6; border-radius: 8px; background: #fff; color: #16181d; font: 400 16px/1.4 var(--font-body); }
.sa textarea { min-height: 72px; }
.sa input:focus, .sa textarea:focus { outline: 2px solid #16181d; border-color: #16181d; }
.sa .card { padding: 16px; border: 1px solid #d9dce2; border-radius: 12px; background: #fff; box-shadow: none; }
.sa .card h2 { margin: 0; font-size: 17px; } .sa .card p { margin: 0; } .sa .quiet { color: #5b616e; }
.sa .btn, .sa .btn.primary { min-height: 44px; padding: 0 16px; border-radius: 8px; background: #fff; color: #16181d; box-shadow: inset 0 0 0 1px #16181d; font: 600 15px var(--font-body); letter-spacing: 0; transform: none; filter: none; }
.sa .btn.primary { background: #16181d; color: #fff; }
.sa .flash.draft { background: #fff6dd; color: #6b4a00; }
.sa details.revise { border-top: 1px solid #e6e8ec; } .sa details.revise > summary { font-size: 14px; font-weight: 600; }
.sa-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13px; color: #7a808c; }
@media (max-width: 359px) { .sa-c:not(details), .sa-c > summary { grid-template-columns: minmax(0, 1fr); } .sa-c .sa-btn { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 6px; } }
@media (min-width: 900px) {
  .sa-top { padding: 0 max(24px, calc(50% - 540px)); }
  .sa-page { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 660px); gap: 40px; justify-content: space-between; align-items: start; max-width: 1128px; margin: 0 auto; padding: 32px 24px 64px; }
  .sa-page.solo { grid-template-columns: minmax(0, 660px); justify-content: center; }
  .sa-band { position: sticky; top: 20px; padding: 20px; border-radius: 14px; } .sa-band .player { max-width: 340px; }
  .sa-body { max-width: none; margin: 0; padding: 4px 0 0; }
  .sa h1 { font-size: 30px; } .sa-say { font-size: 18px; }
}