/* =============================================================================
   ama.css: the shared design system and app shell (owned by the shell area).

   Brand colours come from config: app/brand.mjs themeCss() appends --accent,
   --accent-deep, --accent-soft, --accent-ink, --hero, --mark-bg and --display
   after this file (and after the area sheets). Never hard-code the accent or
   an rgba copy of it; tint with color-mix(in srgb, var(--accent) 20%, transparent).
   Area sheets (web-src/css/<area>.css) load after this file and may override.

   COMPONENT INDEX (everything a page needs; helpers live in web-src/common.js)
   Tokens ....... --bg --panel --panel-2 --ink --ink-2 --muted --subtle --line --line-2
                  --good --bad --warn + --good-soft --bad-soft --warn-soft
                  --accent --accent-deep --accent-soft --accent-ink (brand, from config)
                  --accent-line (accent tinted border) --accent-tint (10% wash) --ring (focus glow)
                  --hero (hero gradient) --mark-bg --media (behind video) --media-2 (empty media)
                  --comic (comic button outline) --glass (top bar) --scrim (overlays)
                  --radius 16 --radius-s 12 --radius-l 24 --shadow --shadow-l
                  --side 232 --rail 64 --top-h --gutter --font --display --mono
   Theme ........ <html data-theme="light|dark">, set before paint by partials/head.html,
                  switched with toggleTheme() from common.js (stored as ama.theme).
   Type ......... h1..h4 use the display font. .display .num (tabular) .mono .muted .subtle
                  .ink .label (small caps) .lead (intro paragraph) .hint .up .down .clamp-2 .clamp-3
   Shell ........ .app .side .side-nav .side-card .side-foot .main .top .crumbs .ctl .vr
                  .page (content column) .foot (footer). Built by partials, wired by initChrome().
   Page parts ... .page-h (h1 + p; add .has-acts and a .page-h-acts div for buttons beside the title)
                  .sec (section spacing) .sec-h (h2 + p + actions)
                  .hero-card (brand gradient panel) .toolbar (search, tabs, selects)
   Buttons ...... .btn (secondary) .btn-a (comic primary) .btn-ink .btn-ghost .btn-lg (44px)
                  .btn-s (32px) .btn-block .ctl (36px top bar control, .icon-only) .icon-btn
   Chips ........ .chip (26px pill; .accent .ink .glass .good .bad .live) with .dot inside
                  .dot (8px; .on green, .accent, .bad, .warn, .off; add .pulse to animate)
                  .tag (22px squared label; .tag-model for modelChip()) .delta (.up .down) change pill
   Cards ........ .card (.pad .hover) .panel .empty .empty-state (+ .empty-ico) .skel .skel-card
   Coin card .... .cc .cc-media .cc-shade .cc-venue .cc-flag .cc-id .cc-avatar .cc-name .cc-play
                  .cc-main .cc-mc .cc-line .cc-tags .cc-stats  (all built by coinCard())
   Thought ...... .thought .thought-q (.clamp + --clamp:N) .qm .thought-foot; sizes .lg .sm .plain
                  (built by thoughtQuote()) .scene-line (sceneLine())
   Activity ..... .alist (rows in one card) .astrip (3 rows side by side) .aday (day heading)
                  .arow .arow-av .arow-kind .arow-main .arow-line .arow-sym .arow-q .arow-time
                  .arow-thumb .arow-play (built by activityRow(); kinds .arow-launch .arow-clip
                  .arow-answer .arow-milestone .arow-graduated; .compact)
   Media ........ .thumb (9:16 poster tile) .clip (wall tile) .wall (clip grid) .grid (card grid)
                  .c-img (coin image; .round) .lab (lab logo tile)
   Motion ....... .float (6s) .float-slow (9s) .float-d1 .float-d2 .float-d3 (phase offsets)
                  All motion stops under prefers-reduced-motion.
   Forms ........ .input select.input textarea.input .lbl .hint .search .tabs .switch .fields .full
   Overlays ..... .modal .modal-box .modal-actions .toast
   Utilities .... .hide-s (hidden <=860) .show-s (only <=860) .hide-sm (hidden <640)
                  .hide-xs (hidden <=520) .show-xs (only <=520) .sr-only .grow .skip
   Icons ........ sprite in partials/shell.html, use icon('name'): mark sol explore rocket film
                  pulse cpu user users book mic studio play download external copy check dot search
                  wallet x menu upload send arrow-right chevron-down chevron-right plus coins chat
                  thought sparkle clock pin scene eye flag trophy trend-up trend-down bolt refresh
                  shield sun moon x-logo youtube tiktok
   Legacy blocks (kept so the current pages keep rendering; area sheets may restyle them):
                  hero/stack/phone, steps/stepc/mini-q/mini-plat, coin page, launch, studio,
                  feed (.frow), docs (.doc), progress, 404 (.nf).
   ============================================================================= */

@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fonts/sora-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

/* ---- tokens ------------------------------------------------------------------ */
:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --panel-2: #f6f6f8;
  --ink: #0b0b0e;
  --ink-2: #2b2b33;
  --muted: #6b6b76;
  --subtle: #9a9aa6;
  --line: #ececf1;
  --line-2: #dcdce4;
  --good: #12a150;
  --bad: #e5484d;
  --warn: #c97a00;
  --good-soft: color-mix(in srgb, var(--good) 12%, var(--panel));
  --bad-soft: color-mix(in srgb, var(--bad) 11%, var(--panel));
  --warn-soft: color-mix(in srgb, var(--warn) 13%, var(--panel));
  /* Brand fallbacks; themeCss() overrides them with config.brand.theme. */
  --accent: #ff4d2e;
  --accent-deep: #d93212;
  --accent-soft: #ffe4db;
  --accent-ink: #ffffff;
  --hero: linear-gradient(135deg, #ffe7dc 0%, #fff4e6 46%, #f1ecff 100%);
  --mark-bg: var(--accent);
  --accent-line: color-mix(in srgb, var(--accent) 22%, var(--line));
  --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --ring: color-mix(in srgb, var(--accent) 18%, transparent);
  --comic: var(--ink);
  --media: #16161d;
  --media-2: linear-gradient(160deg, #2a2a33 0%, #121217 100%);
  --glass: color-mix(in srgb, var(--bg) 84%, transparent);
  --scrim: rgb(11 11 14 / .42);
  --radius: 16px;
  --radius-s: 12px;
  --radius-l: 24px;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .12);
  --shadow-l: 0 2px 6px rgb(0 0 0 / .05), 0 24px 48px -20px rgb(0 0 0 / .24);
  --side: 232px;
  --rail: 64px;
  --top-h: 60px;
  --gutter: 40px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Sora', var(--font);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0f0f14;
  --panel: #16161d;
  --panel-2: #1c1c25;
  --ink: #f4f4f6;
  --ink-2: #d4d4dc;
  --muted: #9a9aa6;
  --subtle: #6b6b76;
  --line: #26262f;
  --line-2: #34343f;
  --good: #2bb673;
  --bad: #ff5c62;
  --warn: #f0a52a;
  --good-soft: color-mix(in srgb, var(--good) 16%, var(--panel));
  --bad-soft: color-mix(in srgb, var(--bad) 15%, var(--panel));
  --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--panel));
  /* The brand's light soft tone would glare here; a brand may set accentSoftDark. */
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--panel));
  --accent-deep: color-mix(in srgb, var(--accent) 68%, #ffffff);
  --accent-line: color-mix(in srgb, var(--accent) 32%, var(--line));
  --media: #0b0b0f;
  --media-2: linear-gradient(160deg, #23232c 0%, #0c0c10 100%);
  --scrim: rgb(0 0 0 / .62);
  --shadow: none;
  --shadow-l: 0 24px 60px -24px rgb(0 0 0 / .75);
  color-scheme: dark;
}

/* ---- base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.nav-open body { overflow: hidden; }
.no-trans *, .no-trans *::before, .no-trans *::after { transition: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }
h3 { letter-spacing: -.025em; line-height: 1.2; }
h4 { letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0; }
table { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.display { font-family: var(--display); letter-spacing: -.03em; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.ink { color: var(--ink); }
.up { color: var(--good); }
.down { color: var(--bad); }
.lead { font-size: 17px; line-height: 1.5; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); }
.label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 18px; height: 18px; flex: none; }
.grow { flex: 1; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--panel); font-weight: 700; transition: top .15s; }
.skip:focus { top: 12px; }

/* ---- shell: sidebar ---------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; overflow-x: clip; }
.side { position: sticky; top: 0; z-index: 40; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 20px 12px 22px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding-left: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); border-radius: 10px; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-name { font: 800 22px/1 var(--display); letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn.side-close { display: none; }
.side-nav { display: grid; gap: 4px; margin-top: 26px; }
.side-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.side-nav a:hover { background: var(--panel-2); color: var(--ink); }
.side-nav a[aria-current='page'] { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.side-nav a[aria-current='page'] .i { color: var(--accent-deep); }
.side-nav .i { width: 20px; height: 20px; }
.nav-t { overflow: hidden; text-overflow: ellipsis; }
.side .grow { min-height: 16px; }
.side-card { display: grid; gap: 6px; margin: 0 2px 8px; padding: 14px; border-radius: 14px; background: var(--hero); border: 1px solid var(--accent-line); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; transition: transform .15s ease; }
.side-card:hover { transform: translateY(-1px); }
.side-card-h { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 800 14px/1.2 var(--display); letter-spacing: -.02em; }
.side-card-h .i { width: 18px; height: 18px; color: var(--accent-deep); }
.side-card-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent-deep); }
.side-card-more .i { width: 14px; height: 14px; }
.side-foot { padding: 6px 12px 0; }
.side-foot a { display: inline-flex; align-items: center; gap: 8px; height: 32px; border-radius: 8px; font-size: 13px; color: var(--muted); }
.side-foot a:hover { color: var(--ink); }
.side-foot .i { width: 16px; height: 16px; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); animation: fade-in .2s ease; }

/* ---- shell: top bar and content --------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 var(--gutter); background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.top .grow { min-width: 8px; }
.icon-btn.menu-toggle { display: none; }
.top-mark { display: none; flex: none; border-radius: 9px; }
/* brand and menu in the top bar: only a look with a top menu (looks/show.css) shows them */
.top-brand, .top-nav { display: none; }
.top-mark svg { width: 30px; height: 30px; display: block; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--muted); }
.crumbs a { white-space: nowrap; border-radius: 6px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--subtle); }
.crumbs b { min-width: 0; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr { width: 1px; height: 20px; background: var(--line-2); flex: none; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.ctl:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--ink) 22%, var(--line-2)); }
.ctl .i { width: 16px; height: 16px; }
.ctl.icon-only { width: 36px; padding: 0; }
.icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--panel-2); }
.icon-btn .i { width: 20px; height: 20px; }
.ca-chip { padding: 0 10px 0 6px; }
.ca-tag { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.ca-chip .mono { font-size: 12px; }
.ca-chip .i { color: var(--muted); }
.theme-btn .i-sun { display: none; }
:root[data-theme='dark'] .theme-btn .i-sun { display: block; }
:root[data-theme='dark'] .theme-btn .i-moon { display: none; }
.btn.wallet-btn { height: 36px; }
.btn.btn-a.wallet-btn.is-on { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; font-weight: 600; transform: none; }
.btn.btn-a.wallet-btn.is-on:hover { background: var(--panel-2); }
.wallet-btn .mono { font-size: 12.5px; }
.page { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 24px var(--gutter) 8px; }

/* ---- footer ------------------------------------------------------------------- */
.foot { margin-top: 56px; border-top: 1px solid var(--line); background: var(--bg); }
.foot-in { max-width: 1480px; margin: 0 auto; padding: 40px var(--gutter) 28px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.foot-brand p { margin-top: 12px; max-width: 340px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.foot-brand .ctl { margin-top: 18px; }
.foot h2 { font: 600 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.foot ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.foot nav ul a { font-size: 14px; color: var(--ink-2); border-radius: 4px; }
.foot nav ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-safe { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: 20px 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.safe-box { display: flex; align-items: flex-start; gap: 12px; align-self: start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.safe-box .i { width: 20px; height: 20px; margin-top: 1px; color: var(--accent-deep); }
.safe-box b { color: var(--ink); }
.foot .safe-list { list-style: disc; margin: 0; padding: 0 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.safe-list li::marker { color: var(--accent); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.foot-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.foot-links a { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-links .i { width: 13px; height: 13px; }
.disclaimer { margin-top: 56px; padding: 22px 0 32px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); max-width: 900px; }

/* ---- page parts ------------------------------------------------------------- */
.page-h { margin-bottom: 24px; }
.page-h.has-acts { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-h.has-acts > :first-child { min-width: 0; }
.page-h h1 { font-size: clamp(32px, 4vw, 42px); }
.page-h p { margin-top: 8px; max-width: 680px; font-size: 16px; color: var(--muted); }
.page-h-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.page-h:not(.has-acts) .page-h-acts { margin-top: 16px; }
.sec { margin-top: 56px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sec-h h2 { font-size: clamp(24px, 2.6vw, 30px); }
.sec-h p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.hero-card { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--hero); border: 1px solid var(--accent-line); }
.pill { display: inline-block; padding: 0 .2em .05em; border-radius: .2em; background: var(--accent); color: var(--accent-ink); border: .045em solid var(--comic); box-shadow: 0 .07em 0 var(--comic), 0 .45em 1.1em -.35em color-mix(in srgb, var(--accent) 60%, transparent); transform: rotate(-2deg); }

/* ---- buttons ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none; transition: transform .1s ease, box-shadow .1s ease, background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--ink) 25%, var(--line-2)); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .i { width: 18px; height: 18px; }
.btn .dot { width: 8px; height: 8px; }
/* The comic primary: accent fill, ink outline, a hard shadow that lifts and presses. */
.btn-a { background: var(--accent); color: var(--accent-ink); border: 2px solid var(--comic); box-shadow: 0 3px 0 var(--comic); font-weight: 700; }
.btn-a:hover { background: var(--accent); border-color: var(--comic); transform: translateY(-1px); box-shadow: 0 4px 0 var(--comic); }
.btn-a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--comic); }
.btn-a:disabled, .btn-a[aria-disabled='true'] { transform: none; box-shadow: 0 3px 0 var(--comic); }
.btn-a:focus-visible { outline-offset: 4px; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn-ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--panel-2); border-color: transparent; color: var(--ink); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn-s { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; gap: 6px; }
.btn-s .i { width: 15px; height: 15px; }
.btn-a.btn-s { box-shadow: 0 2px 0 var(--comic); }
.btn-a.btn-s:hover { box-shadow: 0 3px 0 var(--comic); }
.btn-a.btn-s:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--comic); }
.btn-block { width: 100%; }

/* ---- chips, dots, tags, change pill ------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip .i { width: 14px; height: 14px; }
a.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.chip.ink { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.chip.glass { background: rgb(255 255 255 / .92); border-color: transparent; color: #0b0b0e; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chip.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.chip.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1.4s ease-in-out infinite; }
.dot { --dot: var(--subtle); display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.dot.on { --dot: var(--good); }
.dot.accent { --dot: var(--accent); }
.dot.bad { --dot: var(--bad); }
.dot.warn { --dot: var(--warn); }
.dot.off { --dot: var(--line-2); }
.dot.pulse { animation: ping 1.8s cubic-bezier(.2, .6, .4, 1) infinite; }
.tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; }
.tag > span { overflow: hidden; text-overflow: ellipsis; }
.tag-model { color: var(--ink); }
.tag .lab { width: 14px; height: 14px; }
.tag .i { width: 13px; height: 13px; }
.delta { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.up { background: var(--good-soft); color: var(--good); }
.delta.down { background: var(--bad-soft); color: var(--bad); }
.delta .i { width: 12px; height: 12px; }

/* ---- cards and states ---------------------------------------------------------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 20px; }
.card.hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: var(--accent-line); }
.panel { padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.panel h3 .chip { margin-left: auto; }
.empty { padding: 28px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; color: var(--muted); background: var(--panel-2); }
.empty a:not(.btn) { color: var(--accent-deep); font-weight: 650; }
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 40px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); text-align: center; }
.empty-ico { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--accent-deep); }
.empty-ico .i { width: 22px; height: 22px; }
.empty-state b { font: 800 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.empty-state p { max-width: 440px; font-size: 14px; }
.empty-state .btn { margin-top: 8px; }
.grid > .empty, .grid > .empty-state, .wall > .empty, .wall > .empty-state { grid-column: 1 / -1; }

/* ---- coin card v2 (coinCard) ---------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.cc { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.cc:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: var(--accent-line); }
.cc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--accent-soft); }
.cc-media > img, .cc-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.cc-media > img { transition: transform .5s ease; }
a.cc:hover .cc-media > img { transform: scale(1.03); }
.cc-media > video { opacity: 0; transition: opacity .2s ease; }
.cc-media.is-playing > video { opacity: 1; }
.cc-media.none { display: grid; place-items: center; background: var(--hero); }
.cc-initials { font: 800 56px/1 var(--display); letter-spacing: -.05em; color: color-mix(in srgb, var(--accent) 55%, var(--ink)); opacity: .5; }
.cc-shade { position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / 0)); pointer-events: none; }
.cc-venue { position: absolute; top: 12px; right: 12px; height: 24px; font-size: 11px; }
.cc-flag { position: absolute; top: 12px; left: 12px; height: 24px; font-size: 11px; }
.cc-id { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; min-width: 0; color: #fff; }
.cc-id .cc-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; font-size: 12px; }
.cc-name { flex: 1; min-width: 0; }
.cc-name b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 21px/1.1 var(--display); letter-spacing: -.03em; text-shadow: 0 1px 10px rgb(0 0 0 / .35); }
.cc-name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .86); }
.cc-play { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px 0 3px; border-radius: 999px; background: rgb(255 255 255 / .92); color: #0b0b0e; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background .15s ease; }
a.cc:hover .cc-play { background: #fff; }
.cc-play-i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #0b0b0e; color: #fff; }
.cc-play-i .i { width: 11px; height: 11px; margin-left: 1px; }
.cc-main { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.cc-mc { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cc-mc small { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); }
.cc-mc b { display: block; font: 800 22px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cc-line { font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cc .thought { padding: 10px 12px; }
.cc .thought-q { font-size: 13px; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cc-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cc-stats span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-stats b { color: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* skeleton placeholders (skeletonCards), after .cc-media so the shimmer wins */
.skel { background: linear-gradient(90deg, var(--panel-2) 0%, var(--line) 50%, var(--panel-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 8px; }
.skel-card { pointer-events: none; }
.skel-card .cc-media { border-radius: 0; }
.skel-line { height: 12px; width: 100%; }
.skel-line.w40 { width: 40%; }
.skel-line.w70 { width: 70%; }
.skel-block { height: 60px; border-radius: 12px; }

/* ---- thought quote (thoughtQuote) ------------------------------------------------ */
.thought { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; }
.thought-q { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.thought-q.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp, 4); line-clamp: var(--clamp, 4); overflow: hidden; }
.thought .qm { font-family: var(--display); font-weight: 800; font-size: 1.15em; line-height: 0; color: var(--subtle); }
.thought .qm:first-child { margin-right: 2px; }
.thought .qm:last-child { margin-left: 1px; }
.thought-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.thought-foot b { color: var(--ink-2); font-weight: 600; }
.thought-foot .lab { width: 14px; height: 14px; }
.thought-foot .tag { height: 20px; font-size: 11px; }
.thought.is-live { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.thought.lg { padding: 18px 20px; border-radius: var(--radius); }
.thought.lg .thought-q { font-size: 18px; line-height: 1.5; color: var(--ink); }
.thought.lg .thought-foot { margin-top: 12px; font-size: 13px; }
.thought.sm { padding: 8px 10px; border-radius: 10px; }
.thought.sm .thought-q { font-size: 12.5px; }
.thought.plain { padding: 0; background: transparent; border: 0; }
.scene-line { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ink-2); }
.scene-line .i { width: 15px; height: 15px; margin-top: 2px; color: var(--accent-deep); }

/* ---- activity (activityRow) ------------------------------------------------------- */
.alist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.alist > .arow + .arow { border-top: 1px solid var(--line); }
.astrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.astrip > .arow + .arow { border-left: 1px solid var(--line); }
.aday { margin: 22px 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.aday:first-child { margin-top: 0; }
.arow { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; color: var(--ink); transition: background .15s ease; }
a.arow:hover { background: var(--panel-2); }
.arow-av { position: relative; flex: none; display: block; }
.arow-av .c-img { width: 44px; height: 44px; font-size: 13px; }
.arow-kind { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--panel); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.arow-kind .i { width: 12px; height: 12px; }
.arow-launch .arow-kind { background: var(--accent); color: var(--accent-ink); }
.arow-clip .arow-kind { background: var(--ink); color: var(--panel); }
.arow-answer .arow-kind { background: var(--good); color: #fff; }
.arow-milestone .arow-kind, .arow-graduated .arow-kind { background: var(--warn); color: #fff; }
.arow-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.arow-line { display: block; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.arow-line b { color: var(--ink); font-weight: 700; }
.arow-sym { margin-left: 5px; color: var(--muted); font-size: 13px; font-weight: 600; }
.arow-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.arow-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arow-time .i { width: 13px; height: 13px; }
.arow-thumb { position: relative; flex: none; display: block; width: 50px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 9px; background: var(--media-2); }
.arow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.arow-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.arow-play .i { width: 14px; height: 14px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.arow-thumb .dur { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 1px 0; border-radius: 4px; background: rgb(0 0 0 / .62); color: #fff; font: 600 9.5px var(--mono); text-align: center; }
.arow.compact { padding: 14px; }
.arow.compact .arow-line { font-size: 14px; }

/* ---- media tiles ---------------------------------------------------------------- */
.c-img { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: inline-grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; }
.c-img img { width: 100%; height: 100%; object-fit: cover; }
.c-img.round { border-radius: 50%; }
.lab { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 4px; }
.lab img { width: 100%; height: 100%; object-fit: contain; }
.lab.txt { background: var(--line); color: var(--ink-2); font-size: 8px; font-weight: 800; }
/* Lab logos are often black marks; give them a light tile on dark. */
:root[data-theme='dark'] .lab:not(.txt) { background: #fff; padding: 1px; }
.thumb { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--media); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb .dur { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgb(0 0 0 / .62); color: #fff; font: 600 11px var(--mono); }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb .play span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .92); }
.thumb .play .i { width: 14px; height: 14px; margin-left: 2px; color: #0b0b0e; }
.thumb.none { display: grid; place-items: center; padding: 8px; background: var(--media-2); color: rgb(255 255 255 / .6); font-size: 11px; text-align: center; }
.quote { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.clip { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: var(--media); box-shadow: var(--shadow); transition: transform .18s ease; }
a.clip:hover { transform: translateY(-2px); }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; }
.clip .ov { position: absolute; inset: auto 0 0 0; padding: 44px 12px 12px; background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0)); color: #fff; font-size: 12.5px; line-height: 1.4; }
.clip .ov b { display: block; font-size: 13.5px; }
.clip .ov span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.clip .top-l { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.clip .top-l .chip { background: rgb(255 255 255 / .92); border: 0; color: #0b0b0e; }

/* ---- motion ---------------------------------------------------------------------- */
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
.float-d1 { animation-delay: -2s; }
.float-d2 { animation-delay: -4s; }
.float-d3 { animation-delay: -6s; }
/* Float uses the translate property, so it composes with any transform (rotate, scale). */
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dot) 0%, transparent); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- forms ------------------------------------------------------------------------ */
.input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.input::placeholder { color: var(--subtle); }
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
select.input { appearance: none; padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
label.lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.search { position: relative; display: flex; align-items: center; }
.search .i { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 40px; }
.tabs { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 40px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 100%; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tabs button:hover, .tabs a:hover { background: var(--panel-2); color: var(--ink); }
.tabs [aria-pressed='true'], .tabs [aria-selected='true'], .tabs [aria-current='page'] { background: var(--accent-soft); color: var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.toolbar .search { flex: 1; min-width: 220px; }
.toolbar .input { height: 40px; }
.toolbar select.input { width: auto; min-width: 170px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.switch input { position: relative; flex: none; width: 36px; height: 20px; margin: 0; appearance: none; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .15s ease; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s ease; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields .full { grid-column: 1 / -1; }

/* ---- modal and toast ----------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade-in .15s ease; }
.modal-box { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 20px; background: var(--panel); border: 2px solid var(--comic); box-shadow: 0 6px 0 var(--comic); }
.modal-box h3 { font-size: 21px; }
.modal-box > p { margin-top: 6px; color: var(--muted); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--panel); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-l); opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--bad); color: #fff; }

/* =============================================================================
   Legacy page blocks. The current pages use these; area sheets may restyle.
   ============================================================================= */

/* ---- hero (home) ------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center; padding: 56px 56px 48px; border-radius: var(--radius-l); background: var(--hero); border: 1px solid var(--accent-line); }
.hero h1 { font-size: clamp(44px, 5.4vw, 68px); line-height: 1; letter-spacing: -.045em; }
.hero p.lead { margin-top: 20px; max-width: 500px; font-size: 17px; color: var(--muted); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .stats { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 32px; }
.hero .stats div { display: flex; align-items: center; gap: 10px; }
.hero .stats b { display: block; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero .stats small { color: var(--muted); font-size: 12px; }
.hero .stats .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); }
.stack { position: relative; height: 470px; }
.phone { position: absolute; top: 50%; left: 50%; width: 236px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; background: var(--media); border: 6px solid #fff; box-shadow: var(--shadow-l); }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; }
.phone.p1 { transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }
.phone.p2 { transform: translate(-112%, -46%) rotate(-8deg) scale(.88); z-index: 2; }
.phone.p3 { transform: translate(12%, -46%) rotate(8deg) scale(.88); z-index: 1; }
.phone .ph-tag { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; }
.phone .ph-tag .chip { background: rgb(255 255 255 / .92); border: 0; color: #0b0b0e; }
.phone .ph-foot { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(11 11 14 / .72); color: #fff; font-size: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.phone .ph-foot b { display: block; font-size: 13px; }
.phone.blank { display: grid; place-items: center; padding: 20px; background: var(--media-2); color: rgb(255 255 255 / .6); font-size: 13px; text-align: center; }

/* ---- how it works (home) ------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stepc { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stepc .n { font: 700 12px var(--mono); color: var(--accent-deep); }
.stepc h3 { font-size: 18px; }
.stepc p { color: var(--muted); font-size: 14px; }
.stepc .vis { height: 120px; display: grid; place-items: center; padding: 14px; overflow: hidden; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.mini-q { width: 100%; display: grid; gap: 8px; }
.mini-q div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; }
.mini-q div b { font-weight: 650; }
.mini-q div span { font: 600 11.5px var(--mono); color: var(--accent-deep); }
.mini-plat { display: flex; gap: 10px; }
.mini-plat span { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); }
.mini-plat .i { width: 22px; height: 22px; }

/* ---- coin page -------------------------------------------------------------------------- */
.coin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; }
.coin-head .c-img { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; }
.coin-head h1 { font-size: clamp(26px, 3vw, 32px); }
.coin-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.coin-head .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.coin-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.player { position: sticky; top: calc(var(--top-h) + 20px); }
.screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-l); background: var(--media); box-shadow: var(--shadow-l); }
.screen video { width: 100%; height: 100%; object-fit: cover; }
.screen .blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; text-align: center; color: rgb(255 255 255 / .8); background: var(--media-2); }
.screen .blank b { display: block; margin-bottom: 6px; font: 800 20px/1.2 var(--display); color: #fff; }
.screen .onair { position: absolute; top: 12px; left: 12px; }
.screen .onair .chip { background: rgb(255 255 255 / .92); border: 0; color: #0b0b0e; }
.caption { margin-top: 14px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.caption .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.caption .who b { color: var(--ink); }
.caption .q { margin-top: 8px; font-weight: 650; font-size: 15px; }
.caption .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask textarea { margin-top: 12px; }
.ask .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.gate { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.gate.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, var(--line)); color: var(--ink); }
.gate.need { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink); }
.queue { display: grid; gap: 8px; margin-top: 14px; }
.qrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.qrow .pos { padding-top: 2px; font: 700 12px var(--mono); color: var(--muted); }
.qrow .who { font-size: 12.5px; color: var(--muted); }
.qrow .who b { color: var(--ink); }
.qrow .txt { margin-top: 3px; font-size: 14px; overflow-wrap: anywhere; }
.qrow .amt { font: 700 12.5px var(--mono); color: var(--accent-deep); white-space: nowrap; }
.qrow.live { background: var(--accent-soft); border-color: var(--accent-line); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.facts div { padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.facts small { display: block; color: var(--muted); font-size: 12px; }
.facts b { font: 700 16px/1.3 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.split { display: flex; height: 8px; margin: 14px 0 8px; overflow: hidden; border-radius: 999px; background: var(--line); }
.split i { display: block; height: 100%; }
.split i:first-child { background: var(--accent); }
.split i:last-child { background: var(--ink); }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.minis button { position: relative; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: var(--media); cursor: pointer; }
.minis button[aria-pressed='true'] { border-color: var(--accent); }
.minis img { width: 100%; height: 100%; object-fit: cover; }
.minis .dur { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 5px; background: rgb(0 0 0 / .6); color: #fff; font: 600 10px var(--mono); }
.plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---- launch ------------------------------------------------------------------------------ */
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.lstep { padding: 22px; }
.lstep + .lstep { margin-top: 16px; }
.lstep-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lstep-h .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--panel); font: 700 13px var(--mono); }
.lstep-h h3 { font-size: 18px; }
.lstep-h .muted { margin-left: auto; font-size: 13px; }
.drop { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--panel-2); cursor: pointer; }
.drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.drop .prev { width: 72px; height: 72px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.drop .prev img { width: 100%; height: 100%; object-fit: cover; }
.drop b { display: block; }
.drop p { color: var(--muted); font-size: 13px; }
.face-row { display: flex; gap: 16px; align-items: flex-start; }
.face-row img { width: 96px; height: 96px; flex: none; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); }
.face-box { flex: 1; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; }
.tile:hover { border-color: var(--line-2); }
.tile[aria-pressed='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: 0 0 0 4px var(--ring); }
.tile b { display: block; font-size: 14px; }
.tile small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.tile .em { font-size: 22px; line-height: 1; }
.results { margin-top: 8px; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.results button:hover, .results button[aria-pressed='true'] { background: var(--panel-2); }
.results small { margin-left: auto; color: var(--muted); font: 12px var(--mono); }
.summary { position: sticky; top: calc(var(--top-h) + 20px); padding: 20px; }
.summary .preview { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-top: 12px; }
.summary .preview .face { aspect-ratio: 9 / 16; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--media-2); color: rgb(255 255 255 / .55); font-size: 11px; }
.summary .preview .face img { width: 100%; height: 100%; object-fit: cover; }
.summary .preview b { display: block; font: 800 18px/1.2 var(--display); letter-spacing: -.02em; }
.rows { display: grid; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.rows div { display: flex; justify-content: space-between; gap: 10px; }
.checklist { list-style: none; display: grid; gap: 6px; margin: 16px 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.checklist li { display: flex; align-items: center; gap: 8px; }
.checklist li .i { width: 16px; height: 16px; }
.checklist li.ok { color: var(--good); }

/* ---- studio -------------------------------------------------------------------------------- */
.plat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plat { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.plat-h { display: flex; align-items: center; gap: 10px; }
.plat-h .logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--panel); }
.plat-h .logo .i { width: 20px; height: 20px; }
.plat-h b { display: block; font-size: 16px; }
.plat-h small { color: var(--muted); font-size: 12.5px; }
.plat .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.ttk { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); }
.ttk + .ttk { margin-top: 10px; }
.ttk video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000; }
.ttk .form { display: grid; gap: 10px; align-content: start; }
.post-states { display: flex; flex-wrap: wrap; gap: 6px; }
.st-posted { background: var(--good-soft); color: var(--good); border-color: transparent; }
.st-failed { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.st-pending, .st-manual { background: var(--panel-2); }

/* ---- feed rows ------------------------------------------------------------------------------- */
.feed { display: grid; gap: 8px; }
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
a.frow:hover { border-color: var(--line-2); }
.frow .c-img { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.frow .t { flex: 1; min-width: 0; }
.frow .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .t small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.frow .ago { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---- docs, terms, privacy ------------------------------------------------------------------- */
.doc { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; }
.doc.single { grid-template-columns: minmax(0, 760px); }
.doc.single ul { padding-left: 20px; display: grid; gap: 8px; }
.doc nav { position: sticky; top: calc(var(--top-h) + 20px); align-self: start; display: grid; gap: 2px; font-size: 14px; }
.doc nav a { padding: 7px 10px; border-radius: 8px; color: var(--muted); }
.doc nav a:hover { background: var(--panel-2); color: var(--ink); }
.doc section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.doc section:first-of-type { padding-top: 0; }
.doc section:last-of-type { border-bottom: 0; }
.doc h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 24px; letter-spacing: -.03em; }
.doc h2 .n { font: 700 13px var(--mono); letter-spacing: 0; color: var(--accent-deep); }
.doc h3 { margin: 18px 0 6px; font-size: 16px; }
.doc p, .doc li { color: var(--ink-2); line-height: 1.6; }
.doc p + p { margin-top: 10px; }
.doc ul { display: grid; gap: 6px; margin: 10px 0; padding-left: 20px; }
.doc :is(p, li, td) a:not(.btn) { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.doc table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.doc td, .doc th { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.doc th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* ---- progress (launch modal) ------------------------------------------------------------------- */
.progress { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; }
.progress li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 14px; }
.progress li .st { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); font: 700 12px var(--mono); }
.progress li small { display: block; font-size: 12.5px; }
.progress li.active { color: var(--ink); }
.progress li.active .st { border-color: var(--accent); color: var(--accent-deep); }
.progress li.done { color: var(--ink); }
.progress li.done .st { background: var(--good); border-color: var(--good); color: #fff; }
.progress li.error .st { background: var(--bad); border-color: var(--bad); color: #fff; }
.progress .st .i { width: 14px; height: 14px; }

/* ---- 404 ------------------------------------------------------------------------------------------ */
.nf { display: grid; place-items: center; min-height: 52vh; padding: 24px 0; }
.nf-card { width: min(640px, 100%); padding: 48px 40px; text-align: center; }
.nf-code { display: inline-block; font: 800 15px/1 var(--mono); color: var(--accent-deep); letter-spacing: .1em; }
.nf-card h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 52px); }
.nf-card p { max-width: 440px; margin: 14px auto 0; font-size: 16px; color: var(--muted); }
.nf-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* =============================================================================
   Responsive. Desktop sidebar 232px; 861..1080px an icon rail; <=860px a drawer.
   ============================================================================= */
@media (max-width: 1280px) {
  :root { --gutter: 32px; }
}
@media (max-width: 1080px) {
  :root { --gutter: 28px; }
  .hero { grid-template-columns: 1fr; padding: 40px 32px; }
  .stack { height: 420px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coin-grid, .launch { grid-template-columns: 1fr; }
  .player, .summary { position: static; }
  .player { width: 100%; max-width: 380px; margin: 0 auto; }
  .plat-cards { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .doc nav { position: static; display: flex; flex-wrap: wrap; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-safe { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .app { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .side { align-items: center; padding: 14px 10px 20px; }
  .side-head { justify-content: center; padding: 0; }
  .brand-name, .side-card { display: none; }
  .side-nav { width: 100%; margin-top: 22px; }
  .side-nav a { justify-content: center; padding: 0; }
  .side .nav-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-foot { padding: 0; }
  .side-foot a { width: 44px; justify-content: center; }
}
@media (min-width: 861px) {
  .show-s, .scrim { display: none !important; }
}
@media (max-width: 860px) {
  :root { --gutter: 16px; --top-h: 56px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw; height: 100%; padding-top: 12px; transform: translateX(-100%); visibility: hidden; box-shadow: var(--shadow-l); transition: transform .24s ease, visibility 0s linear .24s; }
  .side.open { transform: none; visibility: visible; transition: transform .24s ease, visibility 0s; }
  .side-nav { margin-top: 18px; }
  .icon-btn.side-close { display: inline-grid; }
  .icon-btn.menu-toggle { display: inline-grid; margin-left: -6px; }
  .top { gap: 8px; }
  .top-mark { display: inline-flex; }
  .hide-s { display: none !important; }
  .page { padding-top: 16px; }
  .page-h { margin-bottom: 18px; }
  .sec { margin-top: 44px; }
  .hero { padding: 32px 20px; border-radius: 20px; }
  .stack { height: 380px; }
  .phone { width: 190px; }
  .steps { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .astrip { grid-template-columns: 1fr; }
  .astrip > .arow + .arow { border-left: 0; border-top: 1px solid var(--line); }
  .foot { margin-top: 44px; }
  .foot-in { padding-top: 32px; }
  .nf-card { padding: 36px 20px; }
  .toolbar select.input { flex: 1; min-width: 140px; }
}
@media (max-width: 639px) {
  .hide-sm { display: none !important; }
  .foot .safe-list { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 520px) {
  .hide-xs { display: none !important; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .cc-media { aspect-ratio: 1 / 1; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .toolbar .tabs { width: 100%; }
  .face-row { flex-direction: column; }
}
@media (min-width: 521px) {
  .show-xs { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .dot.pulse, .chip.live::before, .skel, .scrim, .modal { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =============================================================================
   coin.css: the coin page (player, ask, the mind, queue, about), the docs, My
   page and the clips wall. Owned by the coin-etc area; loads after ama.css.
   Colours only through tokens; tints with color-mix on var(--accent).
   ============================================================================= */

/* ---- copy button (copyButton() in common.js) ------------------------------------ */
.copy { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.copy:hover { border-color: var(--line-2); color: var(--ink); }
.copy .i { width: 13px; height: 13px; color: var(--muted); }

/* ---- coin head ---------------------------------------------------------------------- */
.coin-head { align-items: flex-start; }
.coin-head > .c-img { margin-top: 2px; }
.coin-id { flex: 1; min-width: 0; }
.coin-id h1 { overflow-wrap: anywhere; }
.coin-head .sub .delta { height: 26px; }
.coin-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.coin-tags .tag { height: 24px; }
.coin-head .acts { align-self: center; }

/* ---- right column panels ------------------------------------------------------------- */
.coin-side { min-width: 0; }
.panel h3 > span:not(.chip) { min-width: 0; }
.panel-sub { margin-top: 6px; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-acts:empty { display: none; }
.about-text { margin-top: 10px; color: var(--ink-2); overflow-wrap: anywhere; }
.facts:empty { display: none; }
.facts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-model { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 14px; letter-spacing: -.01em; }
.modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.modes:empty { display: none; }
.modes .chip .i { color: var(--accent-deep); }
.chip.off { background: transparent; border-style: dashed; color: var(--muted); }
.chip.off .i { color: var(--subtle); }

/* ---- caption under the player ------------------------------------------------------- */
.caption .q { overflow-wrap: anywhere; }
.caption .scene-line { margin-top: 8px; }

/* ---- the mind: what the coin is thinking --------------------------------------------- */
.mind h3 .chip.good .dot { margin-right: 1px; }
.mind-now { margin-top: 14px; }
.mind-now .empty { padding: 20px; font-size: 14px; }
.mind-now .thought.lg .thought-q { font-size: 17px; }
.mind-now-foot { display: grid; gap: 6px; margin-top: 10px; }
.mind-now-foot:empty { display: none; }
.mind-stats { font-size: 12.5px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.mind-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mind-list:empty { display: none; }
.mind-item { padding: 14px 0; border-top: 1px solid var(--line); }
.mind-item:last-child { padding-bottom: 2px; }
.mind-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--muted); }
.mind-time { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.mind-time .i { width: 13px; height: 13px; color: var(--muted); }
.mind-meta .tag { height: 20px; font-size: 11px; }
.mind-why { color: var(--muted); }
.mind-text { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.mind-item .scene-line { margin-top: 6px; font-size: 12.5px; }
.mind-item .mind-stats { margin-top: 4px; }
.mind-more { display: flex; justify-content: center; margin-top: 12px; }
/* On wide screens the timeline scrolls inside the panel instead of stretching the column. */
@media (min-width: 1081px) {
  .mind-list { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -8px; padding-right: 8px; }
}

/* ---- My page -------------------------------------------------------------------------- */
.sec-first { margin-top: 0; }
.mine { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mine > .cc { flex: 1; }
.mine-acts { display: flex; gap: 8px; }
.mine-acts .btn { flex: 1; }
.mine-lite { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.mine-lite-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mine-lite-t { min-width: 0; }
.mine-lite-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 17px/1.2 var(--display); letter-spacing: -.02em; }
.mine-lite-t small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 600; }
.mine-lite .hint a { color: var(--accent-deep); font-weight: 650; }
.mine-lite .mine-acts { margin-top: auto; }

/* ---- clips wall -------------------------------------------------------------------------- */
.clips-bar { justify-content: space-between; }
.clips-count { font-variant-numeric: tabular-nums; }
.wall .clip.skel { background: linear-gradient(90deg, var(--panel-2) 0%, var(--line) 50%, var(--panel-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; box-shadow: none; }

/* ---- docs ------------------------------------------------------------------------------- */
.doc-body { min-width: 0; }
.doc nav a { display: flex; align-items: baseline; gap: 8px; transition: background .15s ease, color .15s ease; }
.doc nav .n { font: 600 11px var(--mono); color: var(--subtle); }
.doc nav a[aria-current='true'] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.doc nav a[aria-current='true'] .n { color: var(--accent-deep); }
.doc section { scroll-margin-top: calc(var(--top-h) + 16px); }
.doc h3[id] { scroll-margin-top: calc(var(--top-h) + 16px); }
.doc-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; padding: 0; counter-reset: step; }
.doc-steps li { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); counter-increment: step; }
.doc-steps li::after { content: '0' counter(step); position: absolute; top: 16px; right: 16px; font: 700 12px var(--mono); color: var(--subtle); }
.doc-steps b { font: 800 16px/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); }
.doc-steps li > span:last-child { font-size: 14px; line-height: 1.5; color: var(--muted); }
.doc-step-ico { width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); }
.doc-step-ico .i { width: 18px; height: 18px; }
.doc-table { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); }
.doc-table table { margin-top: 0; min-width: 480px; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { background: var(--panel-2); }
.doc-note { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-s); border: 1px solid var(--accent-line); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }

@media (max-width: 1080px) {
  .doc nav { gap: 6px; }
  .doc nav a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; }
}
@media (max-width: 860px) {
  .coin-head .acts { margin-left: 0; width: 100%; }
  .doc-steps { grid-template-columns: minmax(0, 1fr); }
  .doc nav .n { display: none; }
}
@media (max-width: 520px) {
  .coin-head .c-img { width: 52px; height: 52px; border-radius: 14px; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mine-acts .btn { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .wall .clip.skel { animation: none; }
}

/* =============================================================================
   forms.css: the launch form and the studio (switch rows, the approval queue,
   post states). Owned by the coin-etc area; loads after ama.css.
   ============================================================================= */

/* ---- spacing helpers used by both forms --------------------------------------------- */
.field-gap { margin-top: 14px; }
.field-gap-l { margin-top: 16px; }
.field-hint { margin-top: 8px; }
.field-hint a { color: var(--accent-deep); font-weight: 650; }
.launch-banner { margin-bottom: 16px; }
.buy-field { max-width: 240px; }
.drop .prev .i { width: 22px; height: 22px; color: var(--muted); }
.drop .drop-note { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
select.input:disabled, .input:disabled { opacity: .55; cursor: not-allowed; }

/* ---- switch rows (launch "How it runs", studio "Mind and posting") ------------------- */
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.opt:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); }
.opt:has(input:checked) .opt-ico { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.opt-ico .i { width: 18px; height: 18px; }
.opt-t { flex: 1; min-width: 0; }
.opt-t b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.opt-t small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.opt .switch { flex: none; }
.opt .switch input:focus-visible { outline: none; }

/* ---- launch summary ------------------------------------------------------------------- */
.sum-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.summary .preview > div:last-child { min-width: 0; }
.summary .preview b, .summary .preview .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary .preview .muted { display: block; }
.rows span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.rows span:last-child .lab { display: inline-grid; vertical-align: -2px; }
.rows-tight { margin-top: 4px; }
.checklist li[hidden] { display: none; }

/* ---- studio ---------------------------------------------------------------------------- */
.sec-h h2 .chip { margin-left: 8px; vertical-align: 4px; font-family: var(--font); letter-spacing: 0; }
.save-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-top: 16px; }
.save-row .hint { margin-right: auto; }
.coin-head .sub .chip .i { color: var(--muted); }
.btn.chip-btn { height: 22px; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; }
.post-states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-pending { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.st-held { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.st-skipped { background: transparent; color: var(--muted); border-style: dashed; }
.st-manual { background: var(--panel-2); }

/* Waiting for your OK: one card per held clip, video left, decision right. */
.holds { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.hold { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; }
.hold video, .hold .thumb { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--media); }
.hold-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hold-title { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.hold-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hold-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

@media (max-width: 860px) {
  .holds { grid-template-columns: minmax(0, 1fr); }
  .recent-row { flex-wrap: wrap; }
  .recent-row .t { flex: 1; }
  .recent-row .post-states { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .hold { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .opt { align-items: flex-start; gap: 12px; padding: 12px; }
  .opt-ico { display: none; }
  .save-row .btn { width: 100%; }
}

/* =============================================================================
   home.css: the home page (owned by the home area). Loads after ama.css and
   only uses its tokens, so both themes and every brand colour just work.
   Blocks: hero (.hh-*), how it works (.hw-* with mockups .mk-*), discover
   (.hd-*, cards come from coinCard()), latest activity (.ha-*, rows from activityRow()).
   ============================================================================= */

/* ---- hero ------------------------------------------------------------------------ */
.home-hero { container: hh / inline-size; isolation: isolate; }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hh-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 36px 22px 8px; }
.hh-title { font-size: 44px; line-height: 1; letter-spacing: -.04em; overflow-wrap: break-word; }
.hh-title .pill { font-size: 1.04em; }
.hh-lead { margin-top: 20px; max-width: 500px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.hh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hh-cta { min-width: 188px; }
.hh-stats { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 32px 0 0; padding: 0; list-style: none; }
.hh-stats li { display: flex; align-items: center; gap: 10px; }
.hh-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); color: var(--ink-2); }
.hh-ico .i { width: 17px; height: 17px; }
.hh-stats b { display: block; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hh-stats small { display: block; font-size: 12px; color: var(--muted); }

/* The stage is drawn at 400x330 and scaled with --s; .hh-box reserves the scaled size. */
.hh-visual { --s: 1; position: relative; display: grid; place-items: center; min-width: 0; padding: 12px 16px 36px; }
.hh-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--panel) 78%, transparent), transparent 70%); }
.hh-box { position: relative; width: calc(400px * var(--s)); height: calc(330px * var(--s)); }
.hh-stage { position: absolute; left: 0; top: 0; width: 400px; height: 330px; transform: scale(var(--s)); transform-origin: 0 0; }
/* Rotation uses the rotate property so the float animation (translate) composes with it. */
.hh-slot { position: absolute; }
.hh-left, .hh-right { top: 46px; width: 150px; height: 226px; }
.hh-left { left: 8px; rotate: -9deg; }
.hh-right { right: 8px; rotate: 9deg; }
.hh-center { top: 14px; left: 112px; z-index: 10; width: 176px; height: 264px; }
.hh-face, .hh-reel { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 4px solid #fff; border-radius: 16px; background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--accent-line), 0 18px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); transition: box-shadow .2s ease; }
.hh-reel { border-width: 5px; border-radius: 18px; background: var(--media); }
a.hh-reel:hover, a.hh-face:hover { box-shadow: 0 0 0 1px var(--accent), 0 22px 44px -16px color-mix(in srgb, var(--accent) 80%, transparent); }
.hh-face img, .hh-reel img, .hh-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hh-blank { background: var(--hero); }
.hh-reel.hh-blank { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.hh-reel.hh-blank small { font-size: 12px; font-weight: 600; color: var(--muted); }
.hh-mark { width: 44px; height: 44px; opacity: .55; }
.hh-initials { font: 800 46px/1 var(--display); letter-spacing: -.05em; color: color-mix(in srgb, var(--accent) 55%, var(--ink)); opacity: .55; }
.hh-reel-shade { position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgb(0 0 0 / .45), rgb(0 0 0 / 0)); pointer-events: none; }
.hh-reel-play { position: absolute; left: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; transition: background .15s ease; }
a.hh-reel:hover .hh-reel-play { background: rgb(0 0 0 / .75); }
.hh-reel-play .i { width: 13px; height: 13px; margin-left: 2px; }
.hh-reel-badge { position: absolute; right: 8px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgb(0 0 0 / .7); color: #fff; font: 600 11px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.hh-reel-badge .i { width: 11px; height: 11px; }
.hh-chip { position: absolute; z-index: 20; height: 30px; padding: 0 12px; gap: 7px; background: color-mix(in srgb, var(--panel) 90%, transparent); border-color: var(--line); color: var(--ink); box-shadow: 0 8px 20px -10px rgb(11 11 14 / .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hh-chip .i { width: 14px; height: 14px; color: var(--muted); }
.hh-c1 { top: 2px; left: 4px; }
.hh-c2 { right: 0; bottom: 38px; }
.hh-c3 { left: 0; bottom: 0; max-width: 286px; }
.hh-c3 .i { color: var(--accent-deep); }
.hh-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hh-chip-t b { font-weight: 700; }
/* New faces and clips fade in; scale composes with the slot's rotate and float. */
.hh-in { animation: hh-in .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hh-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }

@container hh (min-width: 600px) {
  .hh-title { font-size: 60px; }
  .hh-copy { padding: 48px 40px 8px; }
}
@container hh (min-width: 880px) {
  .hh-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hh-copy { padding: 56px 24px 56px 56px; }
  .hh-visual { --s: .9; padding: 24px 24px 24px 0; }
}
@container hh (min-width: 1040px) {
  .hh-copy { padding-left: 64px; }
  .hh-visual { --s: 1; }
}
@container hh (min-width: 1160px) {
  .hh-title { font-size: 68px; }
}
@container hh (max-width: 479px) {
  .hh-visual { --s: .76; padding-bottom: 28px; }
}
@container hh (max-width: 379px) {
  .hh-visual { --s: .68; }
  .hh-title { font-size: 40px; }
}

/* ---- how it works ------------------------------------------------------------------ */
.hw-sec { container: hw / inline-size; }
.hw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@container hw (min-width: 560px) { .hw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container hw (min-width: 960px) { .hw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hw-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: var(--accent-line); }
.hw-vis { position: relative; height: 176px; flex: none; display: grid; place-items: center; padding: 16px 12px; overflow: hidden; border-bottom: 1px solid var(--line); background-color: color-mix(in srgb, var(--accent) 5%, var(--panel-2)); background-image: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.4px); background-size: 14px 14px; }
.hw-n { position: absolute; top: 12px; left: 12px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); font: 700 12px/1 var(--display); color: var(--ink); }
.hw-body { flex: 1; padding: 18px 20px 20px; }
.hw-body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 17px; }
.hw-body p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.hw-tag { height: 22px; padding: 0 8px; font: 700 11.5px/1 var(--font); letter-spacing: 0; }
/* Step 04 is the part nobody else has: it gets the accent ring. */
.hw-edge { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint), 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .12); }
:root[data-theme='dark'] .hw-edge { box-shadow: 0 0 0 3px var(--accent-tint); }

/* 01: the ticker draft and a stack of coins dropping in */
.mk-launch { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.mk-draft { width: 132px; display: grid; gap: 7px; padding: 11px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 2px 3px 0 var(--accent-line); }
.mk-lbl { font-size: 11px; font-weight: 500; color: var(--muted); }
.mk-field { display: flex; align-items: center; height: 32px; padding: 0 8px; overflow: hidden; white-space: nowrap; border-radius: 8px; background: var(--accent-tint); border: 1px solid var(--accent-line); font: 700 15px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.mk-caret { width: 1.5px; height: 16px; margin-left: 2px; flex: none; background: var(--ink); animation: mk-caret 1s steps(1) infinite; }
.mk-row { display: flex; gap: 5px; }
.mk-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mk-go { border-color: transparent; background: var(--good-soft); color: var(--good); }
.mk-coins { position: relative; width: 60px; height: 76px; flex: none; }
.mk-coin { position: absolute; left: 0; bottom: 0; width: 60px; height: 28px; border-radius: 50%; background: var(--accent); border: 2px solid var(--comic); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--comic) 22%, transparent); animation: mk-drop 4.8s cubic-bezier(.3, .7, .3, 1) infinite both; }
.mk-coin:nth-child(2) { bottom: 12px; animation-delay: .3s; }
.mk-coin:nth-child(3) { bottom: 24px; animation-delay: .6s; }
@keyframes mk-caret { 50% { opacity: 0; } }
@keyframes mk-drop { 0% { opacity: 0; translate: 0 -28px; } 12%, 84% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }

/* 02: the mind, its voice lines rolling and the labs taking turns */
.mk-mind { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 10px; }
.mk-mind-top { display: flex; align-items: center; gap: 8px; }
.mk-av { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--accent-deep); }
.mk-av .i { width: 20px; height: 20px; }
.mk-av-dot { --dot: var(--good); position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--dot); border: 2px solid var(--panel); animation: ping 1.8s cubic-bezier(.2, .6, .4, 1) infinite; }
.mk-voice { --row: 30px; width: 156px; height: 30px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
/* Four rows, the last repeats the first, so the roll loops without a jump. */
.mk-roll { display: grid; animation: mk-roll 9s ease-in-out infinite; }
.mk-roll > span { display: block; height: var(--row); padding: 0 10px; overflow: hidden; font-size: 12px; font-weight: 500; line-height: var(--row); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
@keyframes mk-roll { 0%, 28% { translate: 0 0; } 33%, 61% { translate: 0 -25%; } 66%, 94% { translate: 0 -50%; } 100% { translate: 0 -75%; } }
.mk-labs { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 224px; margin: 0; padding: 0; list-style: none; }
.mk-labs li { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; border-radius: 8px; border: 1px solid transparent; font-size: 11.5px; font-weight: 600; color: var(--muted); animation: mk-on 10s infinite; }
.mk-labs li:nth-child(2) { animation-delay: 2s; }
.mk-labs li:nth-child(3) { animation-delay: 4s; }
.mk-labs li:nth-child(4) { animation-delay: 6s; }
.mk-labs li:nth-child(5) { animation-delay: 8s; }
.mk-labs .lab { width: 14px; height: 14px; }
@keyframes mk-on { 0%, 17% { background: var(--panel); border-color: var(--accent-line); color: var(--ink); } 21%, 100% { background: transparent; border-color: transparent; color: var(--muted); } }

/* 03: phones with the newest clips, one still rendering, and the next scene */
.mk-scene { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 64px); height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); }
.mk-scene .i { width: 12px; height: 12px; flex: none; color: var(--accent-deep); }
.mk-scene-win { --row: 22px; height: 22px; min-width: 0; overflow: hidden; }
.mk-scene-win .mk-roll { animation-duration: 7.5s; }
.mk-scene-win .mk-roll > span { padding: 0; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.mk-phones { display: flex; align-items: center; margin-top: 22px; }
.mk-ph { position: relative; width: 64px; height: 104px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; border: 3px solid #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, var(--panel)), var(--accent-deep)); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 22px -12px rgb(0 0 0 / .45); }
.mk-ph + .mk-ph { margin-left: -6px; }
.mk-ph:nth-child(1) { rotate: -6deg; }
.mk-ph:nth-child(2) { z-index: 2; translate: 0 -6px; }
.mk-ph:nth-child(3) { rotate: 6deg; }
.mk-ph-b { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 25%, var(--panel)), color-mix(in srgb, var(--accent) 70%, var(--ink))); }
.mk-ph.real { background: var(--media); }
.mk-ph-mark { width: 26px; height: 26px; opacity: .55; }
.mk-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mk-ph-play { position: absolute; left: 4px; bottom: 4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; }
.mk-ph-play .i { width: 8px; height: 8px; margin-left: 1px; }
.mk-ph-dur { position: absolute; right: 4px; bottom: 5px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 3px; background: rgb(0 0 0 / .7); color: #fff; font: 600 9px/1.3 var(--mono); }
.mk-ph-dur .i { width: 8px; height: 8px; }
.mk-rendering { background: var(--panel-2); }
.mk-shim { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 80%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.mk-ph-chip { position: absolute; inset: auto 3px 8px; font-size: 9px; font-weight: 700; color: var(--muted); text-align: center; }

/* 04: the line of questions, biggest buy on air */
.mk-queue { position: relative; display: grid; gap: 6px; width: 100%; max-width: 236px; margin-top: 18px; }
.mk-q { display: flex; align-items: center; gap: 7px; min-width: 0; height: 32px; padding: 0 9px 0 5px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--ink); }
.mk-q b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.mk-q-av { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mk-q-sol { flex: none; font: 600 10.5px/1 var(--mono); color: var(--accent-deep); }
.mk-on { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); box-shadow: 0 0 0 3px var(--ring); }
.mk-air { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 10px; font-weight: 700; color: var(--accent-deep); }
.mk-air .dot { width: 6px; height: 6px; }
.mk-bubble { position: absolute; right: -2px; top: -28px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px 12px 12px 4px; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -10px rgb(0 0 0 / .5); animation: float 6s ease-in-out infinite; }
.mk-bubble .i { width: 12px; height: 12px; }

/* ---- discover ------------------------------------------------------------------------ */
.hd-head { margin-bottom: 14px; }
.hd-search { width: min(400px, 100%); }
.hd-search .input { height: 44px; padding-right: 42px; font-size: 15px; }
.hd-kbd { position: absolute; right: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--panel-2); color: var(--muted); font: 600 12px/1 var(--mono); pointer-events: none; }
.hd-search input:focus ~ .hd-kbd, .hd-search input:not(:placeholder-shown) ~ .hd-kbd { display: none; }
.hd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 18px; }
.hd-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.hd-selects select.input { width: auto; min-width: 150px; height: 40px; font-size: 14px; font-weight: 500; }
.hd-count { margin-right: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid.is-loading { opacity: .55; transition: opacity .2s ease; }
.hd-more { display: flex; justify-content: center; margin-top: 22px; }
.hd-more:has(> [hidden]) { display: none; }

/* ---- latest activity ------------------------------------------------------------------- */
.ha { padding: 20px 24px; }
.ha-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ha-head h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.ha-head p { margin-top: 2px; font-size: 15px; color: var(--muted); }
.ha-all { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ha-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.ha-all .i { width: 16px; height: 16px; }
.ha .astrip { margin-top: 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ha .astrip > .arow { align-items: center; padding: 2px 24px; }
.ha .astrip > .arow:first-child { padding-left: 0; }
.ha .astrip > .arow:last-child { padding-right: 0; }
.ha a.arow:hover { background: transparent; }
.ha a.arow:hover .arow-line b { text-decoration: underline; text-underline-offset: 3px; }
.ha .arow-main { gap: 2px; }
.ha .arow-line { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.ha .arow-time { font-size: 13px; color: var(--subtle); }
.ha .arow-thumb { width: 34px; border-radius: 7px; }
.ha .arow-thumb .dur { display: none; }
.ha-skel .arow-main { gap: 8px; }
.ha-skel-av { width: 44px; height: 44px; flex: none; border-radius: 50%; }

/* ---- responsive ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hd-search { width: 100%; }
  .hd-tools .tabs { width: 100%; }
  .hd-selects { width: 100%; }
  .hd-selects select.input { flex: 1; min-width: 0; }
  .ha { padding: 18px 16px; }
  .ha .astrip > .arow, .ha .astrip > .arow:first-child, .ha .astrip > .arow:last-child { padding: 12px 0; }
  .ha .astrip > .arow:first-child { padding-top: 4px; }
  .ha .astrip > .arow:last-child { padding-bottom: 0; }
}
@media (max-width: 520px) {
  .hd-count { display: none; }
  .hh-ctas .btn { flex: 1 1 auto; }
}
@media (hover: none) {
  .hd-kbd { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.home-hero) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-in, .mk-caret, .mk-coin, .mk-roll, .mk-labs li, .mk-av-dot, .mk-shim, .mk-bubble { animation: none !important; }
  .mk-labs li:first-child { background: var(--panel); border-color: var(--accent-line); color: var(--ink); }
}

/* =============================================================================
   pages.css: the activity, models and wallet (/u/<wallet>) pages.
   Builds on ama.css (tokens, .card, .chip, .tabs, .alist/.arow, .grid, .wall,
   .empty-state, .skel). Brand colours only through the tokens; tints with
   color-mix. Class prefixes: pg- / pstat (shared here), act- (activity),
   lb- and mdl- (models), u- (wallet page).
   ============================================================================= */

/* ---- shared ------------------------------------------------------------------- */
.pg-label { font: 700 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; }
.pg-more:not(:has(> :not([hidden]))) { display: none; }
.pg-more .hint { text-align: center; }

/* "N new updates": a comic pill that jumps back to the top of a live list. */
.pg-new { position: fixed; top: calc(var(--top-h) + 14px); left: calc(50% + var(--side) / 2); z-index: 25; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--comic); background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 3px 0 var(--comic); cursor: pointer; animation: pg-drop .25s ease; transition: translate .1s ease, box-shadow .1s ease; }
.pg-new:hover { translate: -50% -1px; box-shadow: 0 4px 0 var(--comic); }
.pg-new:active { translate: -50% 2px; box-shadow: 0 1px 0 var(--comic); }
.pg-new .i { width: 15px; height: 15px; rotate: -90deg; }
@keyframes pg-drop { from { opacity: 0; transform: translateY(-8px); } }

/* A count inside a tab ("All models 312"). */
.tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tabs [aria-pressed='true'] .tab-n { background: var(--panel); color: var(--ink-2); }

/* Stat tiles: round icon badge, a big number, a small label. */
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pstats.vert { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pstat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pstat.card { padding: 14px 16px; }
.pstat-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); }
.pstat-ico .i { width: 18px; height: 18px; }
.pstat-t { min-width: 0; display: grid; gap: 3px; }
.pstat-t b { font: 800 22px/1.05 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pstat-t small { overflow: hidden; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

/* ---- activity ------------------------------------------------------------------ */
.act-live { background: var(--panel); }
.act-live.is-off .dot { --dot: var(--warn); animation: none; }
.act-bar { margin-bottom: 20px; }
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.act-main { min-width: 0; }
.act-side { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 16px; min-width: 0; }
.act-day + .act-day { margin-top: 24px; }
.act-day .aday { margin: 0 0 10px; font: 700 13px/1.3 var(--font); letter-spacing: 0; color: var(--muted); }

/* The scene a clip was filmed in, under the row's sentence. */
.arow-scene { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.arow-scene .i { width: 13px; height: 13px; color: var(--accent-deep); }
.arow-scene span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Rows that arrived with a poll glow once. */
.arow.is-new { animation: act-in 2.4s ease-out; }
@keyframes act-in { from { background-color: color-mix(in srgb, var(--accent) 14%, var(--panel)); } to { background-color: transparent; } }

.act-skel { pointer-events: none; }
.act-skel .arow-main { gap: 10px; padding-top: 6px; }
.act-skel-av { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.act-skel-day { width: 90px; height: 12px; margin-bottom: 12px; }

.act-stats { padding: 18px; }
.act-stats .pstats { margin-top: 14px; }
.act-stats .pstat-ico { width: 36px; height: 36px; }
.act-stats .pstat-ico .i { width: 16px; height: 16px; }
.act-stats .pstat-t b { font-size: 20px; }
.act-cta { display: grid; justify-items: start; gap: 10px; padding: 20px; }
.act-cta h2 { font-size: 20px; letter-spacing: -.03em; line-height: 1.15; }
.act-cta p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.act-cta .btn { margin-top: 6px; }

/* ---- models: leaderboard -------------------------------------------------------- */
.lb-stats + .lb-sec { margin-top: 40px; }
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lb-sort { width: auto; min-width: 180px; height: 38px; font-size: 13.5px; }
.lb-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lb { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink-2); }
.lb th, .lb td { padding: 12px 14px; text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--line); }
.lb tbody tr:last-child > * { border-bottom: 0; }
.lb thead th { height: 44px; padding-top: 0; padding-bottom: 0; background: var(--panel-2); color: var(--muted); font: 600 12px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.lb tbody th { font-weight: 400; }
.lb .num { text-align: right; font-variant-numeric: tabular-nums; }
.lb td b { font-weight: 700; color: var(--ink); }
.lb tbody tr { transition: background .15s ease; }
.lb tbody tr:hover { background: var(--panel-2); }
.lb-sort-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; }
.lb-sort-btn:hover { background: var(--panel); color: var(--ink); }
.lb-sort-btn.on { color: var(--ink); }
.lb-caret { width: 13px; height: 13px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.lb-sort-btn:hover .lb-caret, .lb-sort-btn:focus-visible .lb-caret { opacity: .5; }
.lb-sort-btn.on .lb-caret { opacity: 1; color: var(--accent-deep); }
.lb-sort-btn.asc .lb-caret { transform: rotate(180deg); }
.lb .lb-rk { width: 52px; padding-right: 0; }
.lb-rank { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font: 700 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.rk-1 .lb-rank { background: var(--accent); border: 2px solid var(--comic); color: var(--accent-ink); box-shadow: 0 2px 0 var(--comic); }
.rk-2 .lb-rank, .rk-3 .lb-rank { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.lb-mi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-mi .lab { border-radius: 8px; }
.lb-mn { display: grid; gap: 1px; min-width: 0; }
.lb-mn b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font: 700 15px/1.25 var(--display); letter-spacing: -.02em; }
.lb-mn small { font-size: 12px; color: var(--muted); }
.lb-coins b { font-size: 15px; }
.lb-share { display: block; width: 64px; height: 4px; margin: 6px 0 0 auto; overflow: hidden; border-radius: 999px; background: var(--line); }
.lb-share i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lb-coin { display: inline-flex; align-items: center; gap: 8px; margin-left: -4px; padding: 3px 8px 3px 3px; border-radius: 999px; transition: background .15s ease; }
.lb-coin:hover { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.lb-coin .c-img { width: 28px; height: 28px; font-size: 10px; }
.lb-coin-t { display: grid; line-height: 1.2; }
.lb-coin-t b { font-size: 13.5px; }
.lb-coin-t small { font-size: 11.5px; color: var(--muted); }
.lb .lb-go { width: 1%; text-align: right; }
.lb-skel { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); }
.lb-skel:last-child { border-bottom: 0; }
.lb-skel-av { width: 32px; height: 32px; flex: none; border-radius: 9px; }
.lb-skel .skel-line { width: auto; flex: 1; }
.lb-skel .skel-line.w40 { flex: 0 0 22%; }

/* ---- models: available minds ------------------------------------------------------ */
.mdl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mdl-grid > .empty-state { grid-column: 1 / -1; }
.mdl { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.mdl:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); border-color: var(--accent-line); }
a.mdl:hover .mdl-go { background: var(--accent); border-color: var(--comic); color: var(--accent-ink); }
.mdl.in-use { border-color: var(--accent-line); }
.mdl-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mdl-h .lab { border-radius: 10px; }
.mdl-t { flex: 1; display: grid; gap: 3px; min-width: 0; }
.mdl-t b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font: 700 16px/1.25 var(--display); letter-spacing: -.02em; }
.mdl-t small { font-size: 12.5px; color: var(--muted); }
.mdl-new { align-self: flex-start; height: 22px; font-size: 11px; }
.mdl-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mdl-specs div { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.mdl-specs dt { font-size: 11px; line-height: 1.3; color: var(--muted); }
.mdl-specs dd { margin: 2px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); font: 700 14px/1.2 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mdl-use { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mdl-go { margin-top: auto; }
.mdl .skel-block { height: 58px; }

/* ---- wallet page (/u/<wallet>) ------------------------------------------------------- */
.u-head { padding: 28px; }
.u-head-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.u-av { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--panel); background: var(--accent-soft); color: var(--accent-deep); box-shadow: var(--shadow-l); }
.u-av .i { width: 32px; height: 32px; }
.u-id { flex: 1; display: grid; gap: 6px; min-width: 0; }
.u-id h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(30px, 4vw, 44px); }
.u-id h1.mono { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.u-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.u-meta .chip:not(.accent) { background: var(--panel); }
.u-meta .chip { height: 28px; }
.u-copy { cursor: pointer; }
.u-copy .mono { font-size: 12px; }
.u-copy:hover, .u-meta a.chip:hover { border-color: var(--line-2); color: var(--ink); }
.u-copy .i, .u-meta a.chip .i { color: var(--muted); }
.u-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.u-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
.u-total { height: 34px; padding: 0 14px; background: var(--panel); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.u-total b { color: var(--ink); font: 800 15px/1 var(--display); letter-spacing: -.02em; }
.u-total .i { width: 15px; height: 15px; color: var(--accent-deep); }
.u-skel-chip { display: inline-block; width: 120px; height: 34px; border-radius: 999px; }
.u-skel-clip { aspect-ratio: 9 / 16; border-radius: var(--radius); }
#u-state:not(:empty) { margin-top: 24px; }

/* ---- responsive ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .act-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .act-side { position: static; order: -1; margin-bottom: 20px; }
  .act-cta { display: none; }
  .act-stats { padding: 14px 16px; }
  .act-stats .pg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .act-stats .pstats { margin-top: 0; }
  .pstats.vert { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .pg-new { left: calc(50% + var(--rail) / 2); }
}
@media (min-width: 861px) and (max-width: 1280px) {
  /* The table needs the room: the launch button keeps only its icon. */
  .lb-go-t { display: none; }
  .lb th, .lb td { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 861px) {
  .lb-sort { display: none; }
}
@media (max-width: 860px) {
  .pg-new { left: 50%; top: calc(var(--top-h) + 10px); }
  .u-head { padding: 20px; }
  .u-av { width: 68px; height: 68px; }
  .u-acts { width: 100%; }
  .u-totals { margin-top: 18px; padding-top: 14px; }

  /* The leaderboard turns into one card per model. */
  .lb-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .lb, .lb tbody { display: block; }
  .lb thead { display: none; }
  .lb tr.lb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .lb tbody tr.lb-row:hover { background: var(--panel); }
  .lb tr.lb-row > * { display: block; padding: 0; border: 0; white-space: normal; }
  .lb .lb-rk { order: 1; flex: none; width: auto; }
  .lb .lb-model { order: 2; flex: 1 1 0; min-width: 0; }
  .lb .lb-go { order: 3; flex: none; width: auto; }
  .lb td[data-label] { order: 4; flex: 0 0 calc((100% - 20px) / 3); min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); text-align: left; }
  .lb td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
  .lb td.lb-top { order: 5; flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 10px; }
  .lb td.lb-top::before { margin: 0; }
  .lb-share { margin: 6px 0 0; }
  .lb-mn b { max-width: none; }
}
@media (max-width: 640px) {
  .pstats.vert { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstat.card { padding: 12px; gap: 10px; }
  .pstat-ico { width: 34px; height: 34px; }
  .pstat-t b { font-size: 19px; }
  .mdl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .u-id h1 { white-space: normal; overflow-wrap: anywhere; }
  .lb-go-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arow.is-new, .pg-new { animation: none !important; }
  a.mdl:hover { transform: none; }
}

/* =============================================================================
   zz-look.css: the stars look. Loads after every area sheet (name order) and
   before the brand's colours. Tinted surfaces (the brand's --tint, lavender for stars) and glass cards, black comic
   outlines with a hard shadow, a glossy sheen on the brand colour (buttons and
   the headline marker), white framed portraits. The brand still sets the accent.
   ============================================================================= */
:root {
  --bg: #fafafb;
  --panel: #ffffff;
  --panel-2: color-mix(in srgb, var(--tint) 7%, #ffffff);
  --muted: #646476;
  --subtle: #8a8a9c;
  --line: #dddde7;
  --line-2: color-mix(in srgb, var(--tint) 20%, #dddde7);
  --lav: color-mix(in srgb, var(--tint) 80%, #ffffff);
  --lav-active: var(--tint);
  --lav-pale: color-mix(in srgb, var(--tint) 16%, #ffffff);
  --lav-border: color-mix(in srgb, var(--tint) 62%, #ffffff);
  --card-border: color-mix(in srgb, var(--tint) 70%, #ffffff);
  --hero-border: color-mix(in srgb, var(--tint) 66%, #ffffff);
  --glow: color-mix(in srgb, var(--tint) 35%, transparent);
  --glow-soft: color-mix(in srgb, var(--tint) 18%, transparent);
  --glass-strong: #ffffffeb;
  --highlight: #ffffffd9;
  --sidebar: color-mix(in srgb, var(--tint) 7%, #ffffff);
  --sidebar-border: color-mix(in srgb, var(--tint) 22%, #ffffff);
  --outline: #111111;
  --comic: var(--outline);
  --ring: var(--glow);
  --sheen: linear-gradient(180deg, color-mix(in srgb, var(--accent) 52%, #ffffff) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 92%, #000000) 100%);
  --lift: 0 8px 20px -10px rgb(11 11 14 / .25);
  --shadow: inset 0 1px 0 var(--highlight), 0 1px 2px #0b0b0e0a, 0 0 0 1px var(--glow-soft);
  --shadow-l: 0 0 0 1px var(--glow), 0 18px 40px -18px var(--glow);
  --glass: rgb(255 255 255 / .8);
}
:root[data-theme='dark'] {
  --bg: #0f0f14;
  --panel: #16161d;
  --panel-2: color-mix(in srgb, var(--tint) 8%, #16161d);
  --muted: #a4a3b5;
  --subtle: #7c7b8f;
  --line: #2a2a36;
  --line-2: color-mix(in srgb, var(--tint) 14%, #2a2a36);
  --lav: color-mix(in srgb, var(--tint) 70%, #000000);
  --lav-pale: color-mix(in srgb, var(--tint) 18%, #0f0f14);
  --lav-border: color-mix(in srgb, var(--tint) 45%, #0f0f14);
  --card-border: color-mix(in srgb, var(--tint) 32%, #0f0f14);
  --hero-border: color-mix(in srgb, var(--tint) 32%, #0f0f14);
  --glow: color-mix(in srgb, var(--tint) 28%, transparent);
  --glow-soft: color-mix(in srgb, var(--tint) 14%, transparent);
  --glass-strong: #16161de0;
  --highlight: #ffffff14;
  --sidebar: color-mix(in srgb, var(--tint) 6%, #0f0f14);
  --sidebar-border: color-mix(in srgb, var(--tint) 14%, #0f0f14);
  --outline: #050507;
  --shadow: inset 0 1px 0 var(--highlight), 0 0 0 1px var(--glow-soft);
  --shadow-l: 0 0 0 1px var(--glow), 0 18px 40px -18px #000000;
  --glass: color-mix(in srgb, var(--panel) 82%, transparent);
}

/* ---- shell: tinted sidebar, glass top bar ------------------------------------ */
.side { background: var(--sidebar); border-right-color: var(--sidebar-border); }
.side-nav a:hover { background: color-mix(in srgb, var(--lav-pale) 70%, var(--panel)); }
.side-nav a[aria-current='page'] { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--highlight), 0 1px 2px #0b0b0e0a, 0 0 0 1px var(--glow-soft); }
.side-nav a[aria-current='page'] .i { color: var(--lav-active); }
.side-card { background: var(--hero); border-color: var(--hero-border); box-shadow: inset 0 1px 0 #ffffffb3, 0 0 0 1px var(--glow-soft); }
:root[data-theme='dark'] .side-card { background: var(--hero); box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px var(--glow-soft); }
.side-card-h .i, .side-card-more { color: var(--lav-active); }
:root:not([data-theme='dark']) .side-card-more { color: var(--accent-deep); }
.top { background: var(--glass); box-shadow: inset 0 -1px 0 rgb(255 255 255 / .6); }

/* ---- controls: glass secondaries, glossy comic primary ------------------------ */
.ctl, .btn:not(.btn-a):not(.btn-ink):not(.btn-ghost) { background: var(--glass-strong); border-color: var(--line); box-shadow: inset 0 1px 0 var(--highlight), 0 1px 2px #0b0b0e0a; }
.ctl:hover, .btn:not(.btn-a):not(.btn-ink):not(.btn-ghost):hover { border-color: var(--lav-border); box-shadow: inset 0 1px 0 var(--highlight), 0 0 0 1px var(--glow-soft), 0 6px 16px -10px var(--glow); }
.btn-a { background: var(--sheen); border-color: var(--outline); box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #11111114, 0 4px 0 var(--outline); }
.btn-a:hover { background: var(--sheen); filter: brightness(1.03); transform: none; box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #11111114, 0 4px 0 var(--outline); }
.btn-a:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffffffe6, 0 2px 0 var(--outline); }
.btn-a.btn-s, .btn-a.btn-s:hover { box-shadow: inset 0 1px 0 #ffffffe6, inset 0 -1px 0 #11111114, 0 2px 0 var(--outline); border-width: 1.5px; }
.btn-a:disabled, .btn-a[aria-disabled='true'] { filter: saturate(.6); }
:focus-visible { outline-color: var(--lav-active); }
.btn-a:focus-visible, .btn:focus-visible, .ctl:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lav-active), 0 0 18px 2px var(--glow); }

/* the headline marker, like a comic highlight */
.pill { background: var(--sheen); color: var(--accent-ink); border: 2px solid var(--outline); box-shadow: 0 4px 0 var(--outline); border-radius: .22em; padding: 0 .2em; transform: rotate(-1.5deg); }

/* tabs and chips */
.tabs { background: var(--glass-strong); border-color: var(--line); box-shadow: inset 0 1px 0 var(--highlight); }
.tabs [aria-pressed='true'], .tabs [aria-selected='true'], .tabs [aria-current='page'], .tabs [aria-current='true'] { background: var(--lav-pale); color: var(--ink); box-shadow: inset 0 0 0 1px var(--lav-border); }
.chip { background: var(--glass-strong); border-color: var(--line); }
.chip.accent { background: var(--lav-pale); border-color: var(--lav-border); color: var(--ink); }
.hh-chip, .chip.glass { background: rgb(255 255 255 / .9); border: 1px solid var(--line); box-shadow: var(--lift); color: #0b0b0e; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-theme='dark'] .hh-chip { background: var(--glass-strong); color: var(--ink); }
.tag { background: var(--panel); }

/* ---- surfaces: glass cards with a tinted ring --------------------------------- */
.card, .panel { background: var(--glass-strong); border-color: var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.card.hover:hover, .cc:hover, .hw-card:hover { border-color: var(--lav-border); box-shadow: inset 0 1px 0 var(--highlight), 0 1px 2px #0b0b0e0a, 0 0 0 1px var(--glow), 0 8px 24px -12px var(--glow); }
.thought { background: color-mix(in srgb, var(--lav-pale) 55%, var(--panel)); border-color: var(--line); }

/* the hero: tinted glass, soft glow */
.hero-card { background: var(--hero); border-color: var(--hero-border); box-shadow: inset 0 1px 0 #ffffffb3, inset 0 0 0 1px #ffffff59, 0 0 0 1px var(--glow-soft), 0 16px 40px -28px var(--glow); }
.hero-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 120% at 22% 50%, #ffffff80, transparent 70%); }
.hero-card > * { position: relative; z-index: 1; }
:root[data-theme='dark'] .hero-card { background: var(--hero); box-shadow: inset 0 1px 0 #ffffff0f, inset 0 0 0 1px #ffffff0a, 0 0 0 1px var(--glow-soft), 0 16px 40px -28px var(--glow); }
:root[data-theme='dark'] .hero-card::before { background: radial-gradient(60% 120% at 22% 50%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 70%); }
.hh-ico { background: rgb(255 255 255 / .8); border: 1px solid var(--line); }
:root[data-theme='dark'] .hh-ico { background: var(--glass-strong); }

/* white framed portraits with the tinted glow */
.hh-face, .hh-reel { border-color: #ffffff; background-color: var(--lav-pale); box-shadow: 0 0 0 1px var(--lav-border), 0 18px 40px -18px color-mix(in srgb, var(--tint) 70%, transparent); }
:root[data-theme='dark'] .hh-face, :root[data-theme='dark'] .hh-reel { border-color: #ffffff; box-shadow: 0 0 0 1px var(--card-border), 0 18px 40px -18px #000000; }

/* how it works and coin cards pick up the tint */
.hw-vis { background-color: var(--lav-pale); }
.hw-n { background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink); }
.hw-edge { border-color: var(--lav-border); box-shadow: 0 0 0 3px var(--glow-soft), var(--shadow); }
.cc { border-color: var(--line); }

/* activity strip and footer */
.astrip, .alist { background: var(--glass-strong); }
.foot { background: var(--bg); }

/* =============================================================================
   looks/show.css: the stars quality (glass, comic buttons, marker, floating
   portraits from zz-look.css) in our own arrangement, when the brand says
   "look": "show". The menu moves from the left sidebar into a glass pill in the
   top bar, and the hero stands centred with the faces fanned out below it.
   Phones keep the drawer.
   ============================================================================= */

/* ---- top menu instead of the sidebar (desktop and tablet) ------------------------ */
@media (min-width: 861px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .top { height: 72px; gap: 12px; }
  .top-mark, .crumbs { display: none; }
  .top-brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--ink); font: 800 20px/1 var(--display); letter-spacing: -.03em; }
  .top-brand svg { width: 34px; height: 34px; }
  .top-nav {
    display: flex; align-items: center; gap: 2px; margin-left: 14px; padding: 4px;
    border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--highlight), 0 1px 2px #0b0b0e0a;
  }
  .top-nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease; }
  .top-nav a:hover { background: var(--lav-pale); color: var(--ink); }
  .top-nav a[aria-current='page'] { background: var(--ink); color: var(--panel); }
  .page { max-width: 1320px; }
}
@media (min-width: 861px) and (max-width: 1199px) {
  .top-nav-wide { display: none !important; }
  .top-nav a { padding: 0 11px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .top .ca-chip { display: none; }
}

/* ---- hero: centred, faces fanned out below ---------------------------------------- */
@container hh (min-width: 880px) {
  .hh-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .hh-copy { align-items: center; padding: 64px 40px 4px; }
  .hh-title { font-size: 74px; }
  .hh-lead { margin-inline: auto; max-width: 600px; font-size: 18px; }
  .hh-ctas, .hh-stats { justify-content: center; }
  .hh-visual { --s: 1.12; padding: 8px 0 44px; }
  .hh-left { left: -70px; top: 58px; rotate: -12deg; }
  .hh-right { right: -70px; top: 58px; rotate: 12deg; }
  .hh-c1 { left: -120px; top: 6px; }
  .hh-c2 { right: -120px; bottom: 54px; }
  /* the float animation owns translate, so the chip is centred by its left edge (stage 400, chip at most 286) */
  .hh-c3 { left: 57px; bottom: -6px; }
}
@container hh (min-width: 1160px) {
  .hh-title { font-size: 84px; }
}

/* brand */
:root { --accent: #ff4d2e; --accent-deep: #a82708; --accent-soft: #ffe4db; --accent-ink: #ffffff; --hero: linear-gradient(135deg, #fff1ea 0%, #ffe5da 45%, #ffd9cb 100%); --tint: #ff6b4a; --mark-bg: #ff4d2e; --display: 'Sora', var(--font); }
:root[data-theme='dark'] { --hero: linear-gradient(135deg, #2b1611 0%, #22130f 50%, #1a100d 100%);  --accent-soft: #2a1a15; }