/* =========================================================
   spacedust · cinematic letterbox
   The app plays like the opening of a music video: the
   letterbox bars ARE the chrome (top = brand and wallet,
   bottom = the one action), the picture between them
   is the scene. Pink only where the duster or the burn acts.
   ========================================================= */

:root {
  --lb: #010101;
  --night: #070e24;
  --navy: #0e2a46;
  --plum: #2d2031;
  --belt: #553945;
  --ember: #d27738;
  --ember-hot: #ec8636;
  --flare: #f4ce7f;
  --flare-core: #fafac8;
  --lav: #958bb4;
  --lav-2: #b7aed2;
  --text: #f2eee8;
  --gold: #deb25f;
  --gold-deep: #9e6c25;
  --gold-ink: #1a1020;
  --pink: #e89ea4;
  --pink-hi: #eda8af;
  --pink-lo: #d28890;
  --cream: #fbf8f2;
  --hair: rgb(207 202 194 / .12);
  --hair-2: rgb(207 202 194 / .2);
  --sith: #f2b33d;
  --red: #ff4b3e;
  --kyber: #9cc8ff;
  --green: #6ee7a8;
  --surface: rgb(45 32 49 / .62);

  --f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --f-script: "Mr Dafoe", "Brush Script MT", "Snell Roundhand", cursive;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --spring: linear(0, .06 3.2%, .23 7.4%, .6 15.6%, .85 23%, .99 31.5%, 1.04 38.4%, 1.05 45%, 1.03 56%, 1.005 72%, 1);
  --spring-soft: linear(0, .06 4%, .23 9%, .5 16%, .78 24%, .96 32%, 1.04 40%, 1.06 47%, 1.04 56%, 1.01 68%, 1);
  --pop: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);

  --bar-top: 60px;
  --bar-bot: 80px;
  --gutter: 24px;
  --wrap: 1120px;
  color-scheme: dark;
}
html[data-scene="title"] { --bar-top: clamp(60px, 9vh, 92px); --bar-bot: clamp(48px, 7vh, 64px); --title-bot: clamp(48px, 7vh, 64px); }
html[data-scene="title"].bar-cta { --bar-bot: 84px; }
html.cinema-on { --bar-top: 92px; --bar-bot: 108px; }
@media (max-width: 640px) {
  :root { --bar-top: 52px; --bar-bot: 104px; --gutter: 16px; }
  html[data-scene="title"] { --bar-top: 52px; --bar-bot: 56px; --title-bot: 56px; }
  html[data-scene="title"].bar-cta { --bar-bot: 92px; }
  html.cinema-on { --bar-top: 72px; --bar-bot: 116px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--lb); -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* focus and anchors never land under the letterbox bars (WCAG 2.4.11); follows the bars' changing heights */
  scroll-padding-top: calc(var(--bar-top) + env(safe-area-inset-top) + 12px);
  scroll-padding-bottom: calc(var(--bar-bot) + env(safe-area-inset-bottom) + 12px);
}
html.rm { scroll-behavior: auto; }
html:has(dialog[open]), html.cinema-on { overflow: hidden; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--night);
  color: var(--text);
  font: 400 15px/1.5 var(--f-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 16px; } }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.mono { font-family: var(--f-mono); font-size: .86em; letter-spacing: -.01em; }
.i { width: 20px; height: 20px; flex: none; }
.i-sm { width: 16px; height: 16px; }
.data { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* saber focus: white core, kyber halo */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(156 200 255 / .45), 0 0 22px rgb(156 200 255 / .55);
  border-radius: 10px;
}

/* ---------- type ---------- */
.overline {
  font: 500 11px/1.4 var(--f-ui);
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--lav);
  margin-bottom: 10px;
}
.overline.pink { color: var(--pink); }
.overline.green { color: var(--green); }
.facts { color: var(--lav-2); max-width: 62ch; }
.facts b, .facts strong { color: var(--text); font-weight: 600; }
.scene-title {
  font: 600 clamp(46px, 7.4vw, 92px)/.9 var(--f-display);
  letter-spacing: -.012em;
  text-transform: lowercase;
  color: var(--text);
  margin-bottom: 14px;
  text-wrap: balance;
}
.script-gold {
  font-family: var(--f-script);
  font-weight: 400;
  background: linear-gradient(176deg, #fff6d8 0%, var(--flare) 22%, var(--gold) 48%, #b7852f 70%, var(--flare) 86%, #fff2c6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgb(74 46 12 / .9)) drop-shadow(0 8px 24px rgb(210 119 56 / .25));
}
.hint { font-size: 12.5px; color: var(--lav); line-height: 1.45; }
.hint.bad { color: #ffb4ad; }

/* ---------- letterbox bars ---------- */
.bar {
  position: fixed; left: 0; right: 0; z-index: 40;
  background: var(--lb);
  transition: height .75s var(--ease-io);
}
.bar-top { top: 0; height: calc(var(--bar-top) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); view-transition-name: bar-top; }
.bar-bot { bottom: 0; height: calc(var(--bar-bot) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); view-transition-name: bar-bot; }
.bar-in {
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; height: 100%;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

.bar-top .bar-in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; justify-self: start; border-radius: 8px; }
.brand-script {
  font: 400 36px/1 var(--f-script);
  background: linear-gradient(180deg, #fff3cf, var(--flare) 35%, var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgb(74 46 12 / .9));
  /* the script's lead-in and the t's crossbar reach past the glyph box, and the gradient only paints inside the
     padding, so the padding is generous and the negative margins keep the layout where it was */
  padding: .17em .4em .28em .34em; margin-inline: -.28em -.14em;
}
.brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sith); margin-left: 1px; box-shadow: 0 0 10px var(--sith); translate: 0 8px; }

.bar-right { justify-self: end; display: flex; align-items: center; gap: 8px; }

.wallet-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 6px; border-radius: 999px;
  background: rgb(207 202 194 / .06); box-shadow: inset 0 0 0 1px var(--hair-2);
  color: var(--text); font-size: 13px;
  transition: background .2s, box-shadow .2s, opacity .2s;
}
.wallet-chip:hover:not(:disabled) { background: rgb(207 202 194 / .1); }
.wallet-chip:disabled { opacity: .55; }
.idn { width: 24px; height: 24px; border-radius: 50%; display: block; flex: none; }

/* bottom bar */
.bar-bot .bar-in { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-top: 8px; padding-bottom: 10px; }
.action { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html[data-scene="title"] .action { display: none; }
html[data-scene="title"].bar-cta .action { display: flex; animation: fadein .35s var(--ease-out); }
html[data-scene="title"].bar-cta .bar-fine { display: none; }
.bar-fine { display: none; text-align: center; font-size: 11px; color: rgb(183 174 210 / .85); letter-spacing: .02em; }
html[data-scene="title"] .bar-fine { display: block; }

.sum { min-width: 0; }
.sum-main { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; min-width: 0; }
.sum-count { font: 600 24px/1.05 var(--f-display); letter-spacing: .005em; color: var(--text); font-variant-numeric: tabular-nums; }
.sum-worth { font: 600 15px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--lav-2); overflow: hidden; text-overflow: ellipsis; }
.sum-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12.5px; color: var(--lav-2); white-space: nowrap; min-width: 0; }
.sum-sub > span { overflow: hidden; text-overflow: ellipsis; }
.pinkt { color: var(--pink); }
.greent { color: var(--green); }
.m-show { display: none; }
.warnt { color: var(--sith); display: inline-flex; align-items: center; gap: 5px; }
.out-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 100%;
  height: 26px; padding: 0 6px 0 8px; border-radius: 7px;
  background: rgb(207 202 194 / .07); box-shadow: inset 0 0 0 1px var(--hair-2);
  color: var(--text); font: 600 12.5px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  transition: background .2s;
}
.out-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-chip .oc-num { flex: none; }
.out-chip .oc-sym { flex: 0 1 auto; min-width: 2.6em; max-width: 70vw; }
.out-chip .oc-sym.warnt { display: inline-flex; align-items: center; gap: 3px; }
.out-chip .oc-warn { width: 13px; height: 13px; color: var(--sith); display: inline-block !important; }
.out-chip:hover:not(:disabled) { background: rgb(207 202 194 / .13); }
.out-chip .i { width: 14px; height: 14px; color: var(--lav); }
.out-chip:disabled { cursor: default; }
.out-chip.stale .oc-num { opacity: .45; }
.out-chip:disabled .i { display: none; }
.act-right { display: flex; align-items: center; gap: 12px; flex: none; }

/* quote-freshness ring */
.ring { display: grid; justify-items: center; gap: 3px; flex: none; color: var(--lav-2); }
.ring-dial { position: relative; width: 40px; height: 40px; display: grid; place-items: center; font: 600 11px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.ring-cap { font: 500 9px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--lav); }
.ring svg { position: absolute; inset: 0; rotate: -90deg; }
.ring.expired .ring-dial { color: var(--sith); }
.ring.expired .ring-cap { color: var(--sith); }
.ring circle { fill: none; stroke-width: 2.5; }
.ring-bg { stroke: rgb(207 202 194 / .14); }
.ring-fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 97.4; transition: stroke-dashoffset 1s linear, stroke .3s; }
.ring.low .ring-fg { stroke: var(--sith); }
.ring.low { color: var(--sith); }

/* ---------- buttons ---------- */
.btn-gold {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 14px;
  font: 600 16px/1 var(--f-ui); letter-spacing: -.005em; color: var(--gold-ink);
  background: linear-gradient(180deg, #ffe8ad 0%, var(--flare) 18%, var(--gold) 52%, #c08c3a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .18), 0 0 0 1px var(--gold-deep), 0 8px 24px -8px rgb(210 119 56 / .55);
  transition: translate .18s var(--ease-out), box-shadow .25s, filter .25s, opacity .2s;
  white-space: nowrap;
}
.btn-gold::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 42%; z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / .75) 50%, rgb(255 255 255 / 0) 80%, transparent);
  translate: -130% 0; skew: -18deg;
}
.btn-gold:hover:not(:disabled)::after { animation: shine .62s var(--ease-out); }
@keyframes shine { to { translate: 330% 0; } }
.btn-gold:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(0 0 0 / .18), 0 0 0 1px var(--gold-deep), 0 12px 30px -8px rgb(236 134 54 / .7); }
.btn-gold:active:not(:disabled) { translate: 0 1px; filter: brightness(.95); }
.btn-gold:disabled {
  background: linear-gradient(180deg, #3a3040, #2b2232);
  color: rgb(242 238 232 / .7);
  box-shadow: inset 0 0 0 1px rgb(207 202 194 / .14);
}
.btn-gold.lg { height: 58px; padding: 0 30px; font-size: 17px; border-radius: 16px; }
.btn-gold.sm { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 12px; }
.btn-gold.block, .btn-ghost.block { width: 100%; }
.btn-gold .i { width: 18px; height: 18px; transition: translate .25s var(--ease-out); }
.btn-gold:hover:not(:disabled) .i { translate: 3px 0; }
.btn-gold .spin { display: none; }
.btn-gold.busy .spin { display: inline-block; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rot .8s linear infinite; opacity: .8; flex: none; }
@keyframes rot { to { rotate: 360deg; } }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 12px;
  color: var(--text); font-weight: 500; text-decoration: none;
  background: rgb(207 202 194 / .05);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: background .2s, box-shadow .2s, translate .15s;
}
.btn-ghost:hover { background: rgb(207 202 194 / .1); box-shadow: inset 0 0 0 1px rgb(207 202 194 / .32); }
.btn-ghost:active { translate: 0 1px; }
.btn-ghost.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-ghost .i { width: 16px; height: 16px; color: var(--lav-2); }
.btn-text { display: inline-flex; align-items: center; gap: 6px; color: var(--lav-2); font-weight: 500; padding: 6px 4px; border-radius: 8px; transition: color .15s; }
.btn-text:hover { color: var(--text); }
.btn-text.sm { font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--lav-2); transition: background .15s, color .15s; flex: none; }
.icon-btn:hover { background: rgb(207 202 194 / .08); color: var(--text); }
.icon-btn .i { width: 18px; height: 18px; }

/* ---------- picture & scenes ---------- */
.picture {
  position: relative; display: block;
  padding-top: calc(var(--bar-top) + env(safe-area-inset-top));
  padding-bottom: calc(var(--bar-bot) + env(safe-area-inset-bottom));
  min-height: 100dvh;
  transition: padding .75s var(--ease-io);
  view-transition-name: picture;
}
.picture::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgb(85 57 69 / .35), transparent 70%),
    radial-gradient(40% 30% at 90% 100%, rgb(14 42 70 / .5), transparent 70%),
    var(--night);
}
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 56px; }
.scene { position: relative; }
.scene-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-bottom: clamp(22px, 3vw, 34px); }
.sh-text { min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px -4px; color: var(--lav-2); font-size: 13px; font-weight: 500; padding: 4px; border-radius: 8px; }
.back-link:hover { color: var(--text); }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; font-size: 13.5px; color: var(--text); background: rgb(207 202 194 / .06); box-shadow: inset 0 0 0 1px var(--hair-2); }
.notice .i { width: 18px; height: 18px; color: var(--lav-2); margin-top: 1px; }
.notice.warn { background: rgb(242 179 61 / .07); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .35); }
.notice.warn .i { color: var(--sith); }
.notice.bad { background: rgb(140 35 34 / .3); box-shadow: inset 0 0 0 1px rgb(255 75 62 / .45); color: #ffd6d2; }
.notice.bad .i { color: var(--red); }
.dev-note { background: repeating-linear-gradient(-45deg, rgb(156 200 255 / .07) 0 10px, transparent 10px 20px); box-shadow: inset 0 0 0 1px rgb(156 200 255 / .4); }
.dev-note .i { color: var(--kyber); }

/* ---------- mascot ---------- */
.mascot { position: relative; display: block; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.mascot img {
  width: auto; height: 100%; max-width: none; flex: none;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / .45)) drop-shadow(0 10px 18px rgb(0 0 0 / .45));
  transition: opacity .14s var(--ease-out);
  user-select: none; -webkit-user-drag: none;
}
.mascot img:not([src]) { visibility: hidden; }
.mascot.idle img { animation: bob 3s ease-in-out 3; }
@keyframes bob { 50% { translate: 0 -2px; } }
.mascot.hop img { animation: hop .42s var(--spring); }
@keyframes hop { 0% { translate: 0 0; } 35% { translate: 0 -6px; } 100% { translate: 0 0; } }
.mascot.wiggle img { animation: wiggle 1.1s ease-in-out 3; transform-origin: 50% 90%; }
@keyframes wiggle { 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }
.mascot.jump img { animation: jump .9s var(--pop) 1; }
@keyframes jump { 0% { translate: 0 0; } 30% { translate: 0 -22px; } 60% { translate: 0 0; } 75% { translate: 0 -5px; } 100% { translate: 0 0; } }
.mascot-cameo { height: clamp(104px, 13vw, 156px); min-width: 80px; margin-bottom: -6px; display: flex; justify-content: center; align-items: flex-end; }
/* the finished screen: the droid with a stack of SOL, larger than the cameo it replaces */
.complete-art { height: clamp(150px, 20vw, 270px); width: auto; max-width: 100%; margin-bottom: -10px; filter: drop-shadow(0 0 26px rgb(244 206 127 / .28)) drop-shadow(0 12px 18px rgb(0 0 0 / .55)); }
.complete-art.pop { animation: art-pop .7s var(--pop) both; }
@keyframes art-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* ================= SC. 00 · TITLE ================= */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100dvh - var(--bar-top) - var(--title-bot, var(--bar-bot)) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid; align-items: center;
}
.still { position: absolute; inset: 0; z-index: 0; }
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #050a1c 0%, var(--night) 16%, #14142a 34%, #2a1d33 50%, #4a2e3a 62%,
    #8a4a3a 70%, var(--ember) 76%, var(--ember-hot) 80%, #f7b867 83%, #6b3b35 86%, #160f1c 100%);
}
.trails { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.trails .orbit { transform-box: view-box; animation: rot 300s linear infinite; }
.sun {
  position: absolute; left: 74%; top: 80%; width: clamp(240px, 34vw, 520px); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, var(--flare-core) 0 13%, var(--flare) 19%, rgb(236 134 54 / .75) 30%, rgb(210 119 56 / .28) 48%, transparent 68%);
  filter: blur(2px);
}
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.skyline.far { height: 21%; opacity: .85; }
.skyline.near { height: 17%; }
.haze { position: absolute; left: 0; right: 0; bottom: 6%; height: 22%; background: linear-gradient(180deg, transparent, rgb(73 47 56 / .35) 60%, transparent); pointer-events: none; }
.ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, #0b0810, #040306); box-shadow: 0 -1px 0 rgb(236 134 54 / .35); }
.grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 40% 45%, transparent 55%, rgb(1 1 1 / .55)), linear-gradient(90deg, rgb(7 10 26 / .55) 0%, rgb(7 10 26 / .25) 40%, transparent 62%); pointer-events: none; }

.title-card {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto;
  padding: clamp(18px, 3vh, 40px) var(--gutter) clamp(84px, 13vh, 170px);
}


.tagline {
  font: 600 clamp(40px, min(4.6vw, 7vh), 60px)/1 var(--f-display);
  text-transform: lowercase; letter-spacing: -.005em; color: var(--text);
  margin-bottom: 16px; max-width: 18ch; text-wrap: balance;
  text-shadow: 0 2px 14px rgb(7 14 36 / .7);
}
.hero-facts { max-width: 46ch; margin-bottom: 28px; color: #ded7ea; text-shadow: 0 1px 12px rgb(7 14 36 / .9); }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.helper { font-size: 13px; color: #d6cfe7; text-shadow: 0 1px 8px rgb(7 10 26 / .95), 0 0 2px rgb(7 10 26 / .8); }

.hero-stage { position: absolute; z-index: 1; left: 74%; bottom: 8.6%; height: clamp(170px, 40vh, 340px); translate: -50% 0; aspect-ratio: 254 / 334; }
.mascot-hero { height: 100%; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.mascot-hero img { filter: drop-shadow(0 1px 0 rgb(0 0 0 / .5)) drop-shadow(-6px 0 14px rgb(1 1 1 / .35)) drop-shadow(0 0 22px rgb(244 206 127 / .45)) brightness(.94) contrast(1.04); }
.m-rim {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--pose) center / auto 100% no-repeat; mask: var(--pose) center / auto 100% no-repeat;
  background: linear-gradient(100deg, rgb(14 20 50 / .28) 0%, transparent 45%, rgb(255 190 110 / .35) 85%, rgb(255 230 170 / .55) 100%);
  mix-blend-mode: soft-light;
}
.m-glow { position: absolute; left: 50%; bottom: -4%; width: 120%; height: 14px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .6), transparent); }
.hero-stage { animation: enter-m 1.1s 1.1s var(--ease-out) both; }
@keyframes enter-m { from { opacity: 0; translate: -50% 18px; } to { opacity: 1; translate: -50% 0; } }


.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px/1 var(--f-ui); letter-spacing: .36em; text-transform: uppercase; color: rgb(242 238 232 / .7); text-decoration: none;
  padding: 8px 10px; border-radius: 8px;
}
.scroll-cue:hover { color: var(--text); }

/* title reveal choreography (after the shutters open) */
.title-card > * { opacity: 0; translate: 0 14px; animation: rise .9s var(--ease-out) forwards; }
.title-card > :nth-child(1) { animation-delay: 1.05s; }
.title-card > :nth-child(2) { animation-delay: 1.15s; }
.title-card > :nth-child(3) { animation-delay: 1.25s; }
@keyframes rise { to { opacity: 1; translate: 0 0; } }
html.revisit .title-card > *, html.revisit .hero-stage { animation-delay: .05s; animation-duration: .5s; }

/* how it works, below the title */
.liner { position: relative; background: linear-gradient(180deg, #050812, var(--night) 120px); border-top: 1px solid rgb(236 134 54 / .25); }
.liner-tracks { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); }
.liner-tracks li { display: flex; gap: 16px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--hair); }
.liner-tracks li + li { padding-left: 22px; border-left: 1px solid var(--hair); }
.tn { font: 600 34px/1 var(--f-display); color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.liner-tracks h3 { font: 600 22px/1.1 var(--f-display); text-transform: lowercase; margin-bottom: 6px; letter-spacing: .01em; }
.liner-tracks p { color: var(--lav-2); font-size: 14px; }
.liner-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-bottom: 48px; }
.liner-grid:has(> .liner-burn[hidden]) { grid-template-columns: 1fr; }
.liner-h { font: 600 28px/1 var(--f-display); text-transform: lowercase; margin-bottom: 10px; }
.liner-burn p:not(.overline) { color: var(--lav-2); font-size: 14px; }
.liner-fine p:not(.overline) { color: var(--lav-2); font-size: 14px; margin-bottom: 12px; max-width: 68ch; }
.liner-fine b { color: var(--text); font-weight: 600; }

/* viewfinder frame: corner brackets instead of a generic card */
.frame {
  position: relative; padding: 20px;
  border-radius: 4px;
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 1.5px,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) top right / 14px 1.5px,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 14px,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 14px,
    var(--fbg, rgb(45 32 49 / .45));
  background-repeat: no-repeat;
  --c: rgb(207 202 194 / .4);
}
.mint-row { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 6px 8px 12px; border-radius: 10px; background: rgb(1 1 1 / .35); box-shadow: inset 0 0 0 1px var(--hair); }
.mint-full { word-break: break-all; color: var(--text); font-size: 12px; line-height: 1.45; flex: 1; }

/* ================= SC. 01 · THE POCKETS ================= */
.pk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.pk-aside { display: grid; gap: 16px; padding: 8px 2px 2px; }
/* the aside follows the list only when it fits on screen, so nothing in it is ever hidden in a scroll box */
@media (min-height: 780px) and (min-width: 901px) { .pk-aside { position: sticky; top: calc(var(--bar-top) + 24px); } }
@media (max-height: 940px) and (min-width: 901px) {
  .pk-aside { gap: 12px; }
  .pk-aside .burn-card .hint { display: none; }
  .pk-aside .opt { min-height: 54px; padding: 8px 10px; }
  .pk-aside .frame { padding: 16px; }
}
.aside-block { min-width: 0; }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; transition: opacity .3s; }
.toolbar.dim { opacity: .45; }
.seg {
  position: relative; display: inline-flex; padding: 3px; border-radius: 12px;
  background: rgb(1 1 1 / .35); box-shadow: inset 0 0 0 1px var(--hair);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  position: relative; z-index: 1; height: 36px; padding: 0 11px; border-radius: 9px;
  font: 500 13px/1 var(--f-ui); color: var(--lav-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { color: var(--gold-ink); font-weight: 600; }
.seg-thumb {
  position: absolute; z-index: 0; top: 3px; left: 0; height: 36px; border-radius: 9px;
  background: linear-gradient(180deg, var(--flare), var(--gold) 60%, #c4903d);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 10px rgb(222 178 95 / .3);
  transition: translate .42s var(--spring), width .42s var(--spring), opacity .2s;
  opacity: 0;
}
.search {
  position: relative; flex: 1 1 180px; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px; border-radius: 12px;
  background: rgb(1 1 1 / .35); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--lav); transition: box-shadow .2s;
}
.search:focus-within { box-shadow: inset 0 0 0 1px rgb(156 200 255 / .6), 0 0 0 3px rgb(156 200 255 / .14); }
.search input:focus-visible, .unit-in input:focus-visible { outline: none; box-shadow: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); font-size: 16px; }
@media (min-width: 641px) { .search input { font-size: 14px; } }
.search input::placeholder { color: rgb(149 139 180 / .85); }
.search input::-webkit-search-cancel-button { filter: invert(.7); }
.search .i { width: 17px; height: 17px; }

.tracklist { border-top: 1px solid var(--hair-2); }
.tl-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 46px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--lav-2); }
.tl-all { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; position: relative; min-height: 44px; }
.tl-col { margin-left: auto; font: 500 10px/1 var(--f-ui); letter-spacing: .34em; text-transform: uppercase; color: var(--lav); }

/* custom checkbox: gold plate with a four-point sparkle */
.cb-input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; pointer-events: none; }
.cb {
  position: relative; width: 22px; height: 22px; flex: none; border-radius: 7px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px rgb(207 202 194 / .42);
  background: rgb(1 1 1 / .2);
  transition: background .2s, box-shadow .2s;
}
.cb .i { width: 14px; height: 14px; color: var(--gold-ink); scale: 0; rotate: -45deg; transition: scale .34s var(--pop), rotate .34s var(--spring); }
.cb .dash { position: absolute; width: 10px; height: 2px; border-radius: 2px; background: var(--gold-ink); scale: 0; transition: scale .2s; }
.cb-input:checked + .cb, .cb-input:indeterminate + .cb { background: linear-gradient(180deg, var(--flare), var(--gold) 60%, #c4903d); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px var(--gold-deep), 0 0 12px rgb(222 178 95 / .35); }
.cb-input:checked + .cb .i { scale: 1; rotate: 0deg; }
.cb-input:indeterminate + .cb .i { scale: 0; }
.cb-input:indeterminate + .cb .dash { scale: 1; }
.cb-input:focus-visible + .cb { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(156 200 255 / .45), 0 0 18px rgb(156 200 255 / .5); }
.cb-input:disabled + .cb { opacity: .35; }

.rows { position: relative; }
.row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 22px 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 66px; padding: 10px 14px 10px 4px;
  border-bottom: 1px solid var(--hair);
  cursor: pointer; user-select: none;
  transition: background .25s;
}
.row:hover { background: rgb(14 42 70 / .35); }
.row:has(.cb-input:checked) { background: linear-gradient(90deg, rgb(85 57 69 / .62), rgb(85 57 69 / .2) 75%, rgb(85 57 69 / .06)); }
.row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px rgb(222 178 95 / .7); scale: 1 0; transition: scale .3s var(--spring); }
.row:has(.cb-input:checked)::before { scale: 1 1; }
.row.off { cursor: default; }
.row.off > :not(.sweep):not(.cb-input):not(.who) { opacity: .5; }
.row.off .sym { opacity: .6; }
.row .tno { font: 600 15px/1 var(--f-display); color: var(--gold-deep); text-align: right; font-variant-numeric: tabular-nums; transition: color .2s; }
.row:has(.cb-input:checked) .tno { color: var(--gold); }

/* the duster sweep: the real feather art wipes the row, leaving glints */
.sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.sweep .wipe {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(232 158 164 / .04) 0%, rgb(232 158 164 / .22) 50%, rgb(237 168 175 / .45) 88%, rgb(255 226 230 / .7) 98%, rgb(255 226 230 / 0) 100%);
  clip-path: inset(0 100% 0 0);
}
.sweep .duster {
  position: absolute; top: 50%; left: 0; width: 48px; height: 66px; margin-top: -33px;
  background: url("/img/droid/duster-feather.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45));
  opacity: 0;
}
.sweep .glint { position: absolute; width: 12px; height: 12px; color: #fff; opacity: 0; filter: drop-shadow(0 0 4px rgb(237 168 175 / .9)); }

.tok-ico {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
  font: 700 15px/1 var(--f-display); letter-spacing: .02em;
  background: radial-gradient(circle at 35% 30%, hsl(var(--h, 280) 32% 34%), hsl(var(--h, 280) 34% 16%));
  color: hsl(var(--h, 280) 60% 86%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 2px 6px rgb(0 0 0 / .3);
}
.tok-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #0b0d14; }
.tok-ico.burn { background: radial-gradient(circle at 35% 30%, #f4ce7f, #9e6c25); color: var(--gold-ink); }
.who { min-width: 0; }
.who-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sym { font-weight: 600; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.who-sub { display: block; font-size: 12px; color: var(--lav); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.who-sub .mono { font-size: 11px; color: rgb(170 162 200); }
.flag {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 7px; border-radius: 6px;
  font: 500 11px/1 var(--f-ui); color: var(--lav-2);
  box-shadow: inset 0 0 0 1px rgb(149 139 180 / .3);
  transition: box-shadow .15s, color .15s;
}
.flag .i { width: 12px; height: 12px; color: var(--sith); }
button.flag:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .55); }
.flag.v { color: var(--green); box-shadow: none; padding: 0 2px; }
.flag.v .i { color: var(--green); }
.flag.warn { color: var(--sith); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .45); background: rgb(242 179 61 / .06); }
.flag.pinkf { color: var(--pink); box-shadow: inset 0 0 0 1px rgb(232 158 164 / .4); }
.worth { text-align: right; min-width: 64px; }
.worth b { display: block; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.worth span { font-size: 12px; color: var(--lav); font-variant-numeric: tabular-nums; }

/* skeleton rows */
.row.skel { cursor: default; }
.row.skel:hover { background: none; }
.sk { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, rgb(207 202 194 / .06) 0%, rgb(207 202 194 / .14) 40%, rgb(207 202 194 / .06) 80%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.state-card { display: grid; justify-items: center; gap: 16px; padding: 12px 0 40px; }
.state-still { position: relative; width: 100%; display: grid; justify-items: center; text-align: center; padding: 28px 16px 22px; border-radius: 18px; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px var(--hair); }
.ss-sky { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 40% at 50% 100%, rgb(236 134 54 / .35), transparent 70%),
  linear-gradient(180deg, #070e24 0%, #1b1530 45%, #3a2434 78%, #1a1020 100%); }
.ss-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #0b0810, #040306); box-shadow: 0 -1px 0 rgb(236 134 54 / .35); }
.ss-pose { position: relative; height: clamp(200px, 32vh, 260px); width: auto; max-width: none; filter: drop-shadow(0 0 22px rgb(244 206 127 / .3)) drop-shadow(0 10px 16px rgb(0 0 0 / .55)); animation: rise .7s var(--ease-out) both; }
.ss-line { margin-top: 14px; font: 600 clamp(26px, 4vw, 34px)/1 var(--f-display); text-transform: lowercase; }
.ss-sub { margin-top: 6px; font-size: 13.5px; color: var(--lav-2); max-width: 42ch; }
.state-card .facts { margin-bottom: 4px; }
.state-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hidden-list { margin-top: 14px; border-radius: 12px; background: rgb(1 1 1 / .22); box-shadow: inset 0 0 0 1px var(--hair); }
.hidden-list summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; color: var(--lav-2); cursor: pointer; border-radius: 12px; min-height: 44px; }
.hidden-list summary::-webkit-details-marker { display: none; }
.hidden-list summary .i { margin-left: auto; transition: rotate .25s var(--ease-out); }
.hidden-list[open] summary .i { rotate: 180deg; }
.hidden-rows { padding: 0 14px 10px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--hair); font-size: 13px; }
.hrow .sym { display: block; font-size: 13px; text-decoration: line-through; text-decoration-color: rgb(149 139 180 / .5); color: var(--lav-2); }
.hrow .who-sub { white-space: normal; }
.hrow .reveal { padding: 2px 0; font-size: 12px; }
.left-alone { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 2px; }
.left-alone .i { flex: none; color: var(--lav); }
.rc-nft { margin-top: 18px; }
.rc-nft .list-label { display: flex; justify-content: space-between; gap: 12px; }
.rc-nft .hint { margin: 2px 0 8px; }
.rc-nft .rows { border-top: 1px solid var(--hair-2); }
.kept { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--lav-2); box-shadow: inset 0 0 0 1px rgb(232 158 164 / .22); background: rgb(232 158 164 / .05); }
.kept .tok-ico { width: 30px; height: 30px; font-size: 12px; }
.kept-txt { flex: 1 1 220px; min-width: 0; }
.kept-txt b { color: var(--text); font-weight: 600; }
.kept-txt span { display: block; font-size: 12.5px; color: var(--lav); margin-top: 2px; }

/* switch */
.toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; position: relative; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tg { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgb(207 202 194 / .18); transition: background .25s; margin-top: 1px; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: translate .32s var(--spring); box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.toggle input:checked + .tg { background: var(--gold); }
.toggle input:checked + .tg::after { translate: 16px 0; background: var(--gold-ink); }
.toggle input:focus-visible + .tg { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(156 200 255 / .45); }
.toggle.sm { font-size: 13px; align-items: center; }

/* aside */
.into-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.into-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.into-grid.three .opt { grid-template-columns: 1fr; row-gap: 6px; justify-items: start; }
.into-grid.three .opt .tok-ico { grid-row: auto; }
.opt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  min-height: 62px; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: rgb(1 1 1 / .28); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .2s, box-shadow .25s, translate .15s;
}
.opt:hover:not(:disabled) { background: rgb(14 42 70 / .45); box-shadow: inset 0 0 0 1px var(--hair-2); }
.opt:active:not(:disabled) { translate: 0 1px; }
.opt .tok-ico { grid-row: span 2; width: 30px; height: 30px; font-size: 13px; }
.opt-sym { font-weight: 600; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-est { font-size: 12px; color: var(--lav-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt[aria-checked="true"] { background: linear-gradient(180deg, rgb(85 57 69 / .7), rgb(45 32 49 / .7)); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 18px -6px rgb(222 178 95 / .6); }
.nofee { position: absolute; top: -8px; right: 8px; padding: 3px 7px; border-radius: 6px; background: var(--pink); color: var(--gold-ink); font: 700 10px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--cream), 0 2px 8px rgb(232 158 164 / .35); rotate: 3deg; }
.other-btn { margin-top: 6px; }
.into-custom { margin-top: 10px; }
.warn-card { padding: 14px; border-radius: 12px; background: rgb(242 179 61 / .07); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .35); font-size: 13px; color: var(--text); }
.warn-title { display: flex; align-items: center; gap: 8px; color: var(--sith); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.warn-title .i { width: 18px; height: 18px; }
.warn-card .mint-full { display: block; margin: 8px 0 10px; }

.burn-card { --fbg: linear-gradient(180deg, rgb(85 57 69 / .5), rgb(45 32 49 / .35)); --c: rgb(232 158 164 / .55); }
.burn-head { font: 600 24px/1 var(--f-display); margin-bottom: 10px; }
.burn-est { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; font-size: 14px; color: var(--lav-2); font-variant-numeric: tabular-nums; }
.burn-est b { font: 600 22px/1 var(--f-ui); color: var(--pink); letter-spacing: -.01em; }
.burn-est .i { width: 16px; height: 16px; color: var(--pink); align-self: center; }
.burn-card .hint { margin-bottom: 8px; }
.burn-card.nofee-state { --c: rgb(110 231 168 / .45); }
.burn-card.err-state { --c: rgb(242 179 61 / .5); }
.set-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.set-card .overline { margin-bottom: 6px; }
.set-sum { font-size: 13px; color: var(--lav-2); }

/* ================= SC. 02 · THE CUT ================= */
.cut-hero {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 22px;
  padding: 22px 0 24px; margin-bottom: 26px;
  border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair);
}
.ch-block { min-width: 0; }
.ch-block .overline { margin-bottom: 6px; }
.ch-big { font: 600 clamp(36px, 5.4vw, 64px)/.95 var(--f-display); letter-spacing: -.005em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-big small { font-size: .55em; color: var(--lav-2); margin-left: 6px; letter-spacing: .02em; }
.ch-sub { font-size: 13px; color: var(--lav-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ch-arrow { width: clamp(36px, 5vw, 64px); height: auto; color: var(--gold); flex: none; align-self: center; }
/* while building: one line, so the rows filling in start on the first screen */
.cut-hero.compact { padding: 12px 0; margin-bottom: 18px; }
.ch-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 600 22px/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.ch-line span { color: var(--lav-2); }
.ch-line .i { width: 18px; height: 18px; color: var(--gold); }
.ch-line-out { color: var(--flare); }
/* an expired quote stops looking like money */
.cut-hero.stale .ch-big, .cut-hero.stale .ch-sub { opacity: .45; }
.cut-hero.stale .ch-out .ch-big { filter: grayscale(.8); }
.old-tag { display: inline-block; margin-left: 10px; padding: 3px 6px; border-radius: 5px; font: 600 9.5px/1 var(--f-ui); letter-spacing: .14em; color: var(--sith); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .45); vertical-align: 1px; }
.list-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.list-label .tl-col { letter-spacing: .3em; }
.ch-out .ch-big { background: linear-gradient(180deg, #fff3cf, var(--flare) 40%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-out .ch-big small { -webkit-text-fill-color: var(--lav-2); }

.progress { margin: 0 0 14px; }
.progress-track { position: relative; height: 3px; border-radius: 3px; background: rgb(207 202 194 / .12); overflow: hidden; }
.progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--flare)); box-shadow: 0 0 12px rgb(244 206 127 / .6); transition: width .5s var(--ease-out); }
.progress-track::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent); animation: scan 1.6s linear infinite; }
@keyframes scan { from { translate: -100% 0; } to { translate: 340% 0; } }
.progress-label { margin-top: 10px; font-size: 13px; color: var(--lav-2); font-variant-numeric: tabular-nums; }

.cut-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.cut-aside { display: grid; gap: 16px; padding: 2px; }
.cut-main { min-width: 0; }
.tx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-2); }
.tx {
  display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--hair); min-height: 66px;
}
.tx .tno { font: 600 15px/1 var(--f-display); color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.tx-flow { font-size: 13px; color: var(--lav-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tx-flow .i { width: 13px; height: 13px; vertical-align: -2px; color: var(--lav); margin: 0 2px; }
.tx-flow b { color: var(--text); font-weight: 600; }
.tx-flow b.gone { color: var(--lav); font-weight: 500; text-decoration: line-through; text-decoration-color: rgb(149 139 180 / .7); }
.gone-l { color: var(--lav); }
.vm-s { display: none; }
.tx-burn { font-size: 12px; color: var(--pink); margin-top: 3px; display: flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.tx-burn .i { width: 12px; height: 12px; }
.tx-right { text-align: right; display: grid; justify-items: end; gap: 4px; }
.loss { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--lav-2); white-space: nowrap; }
.loss.mid { color: var(--sith); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  font: 500 12px/1 var(--f-ui); white-space: nowrap;
  background: rgb(207 202 194 / .07); color: var(--lav-2); box-shadow: inset 0 0 0 1px var(--hair);
}
.pill .spin { width: 11px; height: 11px; border-width: 1.5px; }
.pill .i { width: 13px; height: 13px; }
.pill.ready { color: var(--text); }
.pill.ready .i { color: var(--gold); }
.pill.ok { color: var(--green); background: rgb(110 231 168 / .08); box-shadow: inset 0 0 0 1px rgb(110 231 168 / .3), 0 0 14px -4px rgb(110 231 168 / .5); }
.pill.bad { color: #ffb4ad; background: rgb(140 35 34 / .3); box-shadow: inset 0 0 0 1px rgb(255 75 62 / .45), 0 0 14px -4px rgb(255 75 62 / .6); }
.pill.exp { color: var(--sith); background: rgb(242 179 61 / .07); box-shadow: inset 0 0 0 1px rgb(242 179 61 / .35); }
.pill.skip { color: var(--lav); }
.tx.stale { opacity: .55; }
.tx-note { grid-column: 3 / -1; font-size: 12.5px; color: var(--lav-2); line-height: 1.45; }
.tx-note.bad { color: #ffc9c4; }
.tx details { grid-column: 3 / -1; font-size: 12px; color: var(--lav); }
.tx summary { cursor: pointer; width: max-content; border-radius: 6px; padding: 2px 0; }
.kv { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 14px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kv dt { color: var(--lav); }
.kv dd { margin: 0; color: var(--text); }
.sol-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--kyber); text-decoration: none; border-radius: 6px; }
.sol-link:hover { text-decoration: underline; }
.sol-link .i { width: 12px; height: 12px; }

.skipped { margin-top: 26px; }
.skipped .overline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skip-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--hair); }
.skip-row .tno { font: 600 15px/1.3 var(--f-display); color: rgb(149 139 180 / .7); text-align: right; }
.skip-sym { font-weight: 600; text-decoration: line-through; text-decoration-color: rgb(149 139 180 / .6); color: var(--lav-2); overflow-wrap: anywhere; }
.skip-why { font-size: 13px; color: var(--text); margin-top: 2px; }
.skip-n { font-size: 12px; color: var(--lav); }
.skip-fix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.skip-row details { margin-top: 6px; font-size: 12px; color: var(--lav); }
.skip-row summary { cursor: pointer; width: max-content; border-radius: 6px; }
.skip-row details .mono { display: block; margin-top: 4px; word-break: break-all; }

.card { padding: 18px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgb(255 255 255 / .04); }
.card h3 { font: 600 22px/1.05 var(--f-display); text-transform: lowercase; margin-bottom: 10px; }
.ask-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 13px; color: var(--lav-2); }
.ask-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.ask-list .i { width: 14px; height: 14px; color: var(--gold); margin-top: 3px; }
.ask-list .i.pink { color: var(--pink); }
.ask-list b { color: var(--text); font-weight: 600; }
.big-burn { font: 600 34px/1 var(--f-display); color: var(--pink); letter-spacing: .005em; font-variant-numeric: tabular-nums; margin: 2px 0 6px; overflow-wrap: anywhere; }
.big-burn small { font-size: 16px; color: var(--pink-lo); margin-left: 4px; letter-spacing: .04em; }

/* ================= CINEMA (wallet prompt) ================= */
.cinema {
  position: fixed; inset: 0; z-index: 35;
  display: grid; place-items: center;
  padding: calc(var(--bar-top) + env(safe-area-inset-top) + 16px) var(--gutter) calc(var(--bar-bot) + env(safe-area-inset-bottom) + 16px);
  background: radial-gradient(70% 60% at 50% 50%, #1a1220, var(--lb) 75%);
  animation: fadein .45s var(--ease-out);
  overflow-y: auto;
}
.cinema.out { animation: fadeout .3s var(--ease-out) forwards; }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.cinema-in { max-width: 520px; text-align: center; display: grid; justify-items: center; }
/* the wallet prompt plays the dusting clip, framed like a screen (the clip is a full-frame scene on white) */
.cinema-reel { width: min(460px, 100%); max-width: 100%; aspect-ratio: 752 / 416; margin-bottom: 20px; border-radius: 14px; overflow: hidden; background: #fdfdfd; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 0 0 6px rgb(0 0 0 / .35), 0 24px 60px rgb(0 0 0 / .55), 0 0 70px rgb(244 206 127 / .14); animation: reel-in .55s var(--pop) both; }
.cinema-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes reel-in { from { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes lean { 50% { rotate: 1.2deg; translate: 0 -2px; } }
.cinema-cap { font: 600 clamp(34px, 5vw, 52px)/1 var(--f-ui); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 3px rgb(0 0 0 / .5), 0 0 30px rgb(0 0 0 / .6); margin-bottom: 14px; }
.cinema .facts { margin: 0 auto 18px; color: var(--text); }
.cinema .ask-list { text-align: left; max-width: 440px; padding: 16px 18px; border-radius: 14px; background: rgb(1 1 1 / .45); box-shadow: inset 0 0 0 1px var(--hair); }
.cinema-hint { font-size: 13px; color: var(--sith); }
.cinema-stuck { margin-top: 18px; display: grid; justify-items: center; gap: 10px; max-width: 440px; animation: fadein .4s; }
.cinema-stuck .hint { color: var(--lav-2); }
/* the review never shows through the cinema (one mascot, one message) */
html.cinema-on .picture { visibility: hidden; transition: padding .75s var(--ease-io), visibility 0s .45s; }
.ask-list li.ask-warn { color: var(--text); }
.ask-list .i.warn { color: var(--sith); }
.mint-inline { word-break: break-all; color: var(--text); }

/* ================= SC. 04 · THE DROP ================= */
.stamp-wrap { margin: -4px 0 10px; }
.scene-title.as-stamp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stamp { position: relative; display: inline-block; font-size: clamp(96px, 14vw, 176px); line-height: .9; rotate: -4deg; transform-origin: 20% 60%; }
.stamp .script-gold { display: inline-block; padding: .04em .2em .2em .06em; }
.stamp .swash { position: absolute; left: 4%; bottom: -.02em; width: 96%; height: auto; overflow: visible; }
.stamp.slam { animation: slam .7s var(--pop) both; }
@keyframes slam { from { opacity: 0; scale: 1.5; rotate: -10deg; filter: blur(6px); } 40% { opacity: 1; filter: blur(0); } }
.stamp.slam .swash path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1s .35s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.chain-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair); }
.chain { flex: 0 1 auto; min-width: 0; max-width: 100%; height: 48px; }
.chain svg { height: 48px; max-width: 100%; overflow: visible; display: block; }
.link-g { transition: opacity .3s; }
.link-g rect { fill: none; stroke-width: 5; transition: stroke .3s; }
.link-g .hi { stroke-width: 1.2; stroke: rgb(255 255 255 / .35); }
.link-g.pending { opacity: .3; }
.link-g.pending rect.body, .link-g.sending rect.body, .link-g.confirming rect.body { stroke: url(#gChrome); }
.link-g.confirming { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.link-g.confirmed rect.body { stroke: url(#gGold); }
.link-g.confirmed { filter: drop-shadow(0 0 4px rgb(244 206 127 / .55)); }
.link-g.confirmed.glint { animation: glintL .6s var(--ease-out); }
@keyframes glintL { 0% { filter: drop-shadow(0 0 0 rgb(255 255 255 / 0)) brightness(1); } 35% { filter: drop-shadow(0 0 10px rgb(255 250 220 / .95)) brightness(1.6); } 100% { filter: drop-shadow(0 0 4px rgb(244 206 127 / .55)) brightness(1); } }
.link-g.failed rect.body { stroke: url(#gRed); stroke-dasharray: 28 9 200; }
.link-g.failed { filter: drop-shadow(0 0 6px rgb(255 75 62 / .7)); }
.link-g.failed.flash { animation: redflash .3s steps(2) 2; }
@keyframes redflash { 50% { opacity: .3; } }
.link-g.expired { opacity: .55; }
.link-g.expired rect.body { stroke: var(--sith); stroke-dasharray: 3 4; stroke-width: 2.2; }
.link-g.never rect.body { stroke: rgb(207 202 194 / .4); stroke-dasharray: 2 5; stroke-width: 2; }
.chain-count { font: 600 22px/1 var(--f-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chain-count span { color: var(--lav-2); font: 500 13px/1 var(--f-ui); margin-left: 6px; }

.result { margin-top: 24px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); background: var(--surface); }
.stat { padding: 18px 20px; position: relative; min-width: 0; }
.stat + .stat { box-shadow: -1px 0 0 var(--hair); }
.stat .overline { margin-bottom: 8px; }
.stat-v { font: 600 clamp(28px, 3.4vw, 40px)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-v small { font-size: .45em; color: var(--lav-2); margin-left: 5px; letter-spacing: .06em; }
.stat-s { font-size: 12.5px; color: var(--lav-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat.burned { background: linear-gradient(180deg, rgb(232 158 164 / .1), transparent); }
.stat.burned .stat-v { color: var(--pink); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.result-note { margin-top: 14px; font-size: 13px; color: var(--lav-2); max-width: 70ch; }
.run-label { margin-top: 28px; }

/* odometer */
.odo { display: inline-flex; overflow: hidden; height: 1em; line-height: 1em; vertical-align: top; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: translate .9s var(--ease-out); }
.odo-strip span { height: 1em; display: block; text-align: center; }

/* particles */
.ember { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff3c4, var(--ember-hot) 55%, transparent 70%); pointer-events: none; animation: ember 1.3s var(--ease-out) forwards; }
@keyframes ember { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: var(--dx) -46px; scale: .4; } }
.feather { position: fixed; z-index: 45; width: 26px; height: 26px; pointer-events: none; color: var(--pink); animation: fall var(--dur, 1.8s) var(--ease-out) forwards; opacity: 0; }
@keyframes fall { 0% { opacity: 0; translate: 0 -10px; rotate: 0deg; } 15% { opacity: .95; } 100% { opacity: 0; translate: var(--dx) 150px; rotate: var(--rot); } }

/* ================= dialogs & popovers ================= */
dialog.sheet {
  width: min(460px, calc(100vw - 32px)); max-height: min(86dvh, 720px);
  padding: 0; border: 0; border-radius: 20px; color: var(--text);
  background: linear-gradient(180deg, #2a1f30, #1a1424);
  box-shadow: 0 0 0 1px rgb(207 202 194 / .16), inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 80px rgb(0 0 0 / .6);
  overflow: auto;
  opacity: 0; translate: 0 10px; scale: .98;
  transition: opacity .16s var(--ease-out), translate .34s var(--spring), scale .34s var(--spring), display .34s allow-discrete, overlay .34s allow-discrete;
}
dialog.sheet[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { dialog.sheet[open] { opacity: 0; translate: 0 10px; scale: .98; } }
dialog.sheet::backdrop { background: rgb(1 1 1 / .7); }
.sheet-in { padding: 22px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sheet-title { font: 600 34px/.95 var(--f-display); text-transform: lowercase; }
.wl { display: grid; gap: 8px; }
.w-opt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 62px; padding: 10px 14px; border-radius: 14px; text-align: left; width: 100%; text-decoration: none; color: var(--text);
  background: rgb(1 1 1 / .28); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background .2s, box-shadow .2s, translate .15s;
}
.w-opt:hover:not(:disabled) { background: rgb(14 42 70 / .5); box-shadow: inset 0 0 0 1px var(--hair-2); }
.w-opt:active:not(:disabled) { translate: 0 1px; }
.w-opt:disabled { cursor: default; }
.w-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 700 18px/1 var(--f-display); overflow: hidden; background: rgb(207 202 194 / .1); }
.w-ico img { width: 100%; height: 100%; object-fit: contain; }
.w-name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sub { font-size: 12px; color: var(--lav-2); display: block; }
.w-tag { font-size: 11px; color: var(--green); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.w-tag.no { color: var(--lav-2); }
.w-opt.connecting { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 22px -8px rgb(222 178 95 / .7); }
.wd-note { margin-top: 14px; font-size: 13px; color: var(--lav-2); display: flex; gap: 8px; align-items: flex-start; }
.wd-note .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--lav); }
.wd-note.neutral { padding: 12px 14px; border-radius: 12px; background: rgb(207 202 194 / .06); color: var(--text); }
.wd-note.bad { padding: 12px 14px; border-radius: 12px; background: rgb(140 35 34 / .3); box-shadow: inset 0 0 0 1px rgb(255 75 62 / .4); color: #ffd6d2; }
.wd-fine { margin-top: 16px; font-size: 12px; color: var(--lav-2); }
.wd-group { font: 500 10px/1 var(--f-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--lav); margin: 16px 0 8px; }
.deep { display: grid; gap: 8px; }

[popover].pop {
  position: fixed; inset: auto; margin: 0;
  width: min(340px, calc(100vw - 24px)); max-height: min(70dvh, 560px); overflow: auto;
  padding: 16px; border: 0; border-radius: 16px; color: var(--text);
  background: linear-gradient(180deg, rgb(48 35 54 / .97), rgb(30 23 38 / .98));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgb(207 202 194 / .14), inset 0 1px 0 rgb(249 238 219 / .12), 0 20px 50px rgb(0 0 0 / .55);
  opacity: 0; translate: 0 6px; scale: .97;
  transition: opacity .14s var(--ease-out), translate .14s var(--ease-out), scale .14s var(--ease-out), display .14s allow-discrete, overlay .14s allow-discrete;
}
[popover].pop:popover-open {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .16s var(--ease-out), translate .34s var(--spring), scale .34s var(--spring), display .34s allow-discrete, overlay .34s allow-discrete;
}
[popover].pop::backdrop { background: rgb(1 1 1 / 0); transition: background .2s, display .2s allow-discrete, overlay .2s allow-discrete; }
@starting-style { [popover].pop:popover-open { opacity: 0; translate: 0 6px; scale: .97; } }
[popover].pop.up { translate: 0 -6px; }
[popover].pop.up:popover-open { translate: 0 0; }
@starting-style { [popover].pop.up:popover-open { translate: 0 -6px; } }
.pop-title { font: 600 22px/1 var(--f-display); text-transform: lowercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pop-head .pop-title, .pop-head .overline { margin-top: 6px; }
.pop-x { width: 44px; height: 44px; margin: -10px -10px 0 0; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pop-title.warn-title { font: 600 14px/1.2 var(--f-ui); text-transform: none; color: var(--sith); }
.pop-info { width: min(360px, calc(100vw - 24px)); }
.pop-wallet { width: 290px; }
.pop-actions { display: grid; margin-top: 10px; }
.menu-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--text); text-decoration: none; text-align: left; }
.menu-item:hover { background: rgb(207 202 194 / .08); }
.menu-item .i { width: 17px; height: 17px; color: var(--lav-2); }
.menu-item.danger { color: #ffb4ad; }
.menu-item.danger .i { color: #ffb4ad; }
.mini-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; font-size: 13.5px; }
.mini-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.mini-steps li > span:first-child { font: 600 16px/1.2 var(--f-display); color: var(--pink); }
.pop-info .btn-ghost.block { margin-top: 12px; }

.out-list { display: grid; gap: 4px; margin-bottom: 12px; }
.out-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-align: left; width: 100%; }
.out-item:hover { background: rgb(207 202 194 / .08); }
.out-item .tok-ico { width: 30px; height: 30px; font-size: 13px; }
.out-item .chk { color: var(--gold); width: 18px; height: 18px; }
.oi-end { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.out-item[aria-current="true"] { background: rgb(222 178 95 / .08); box-shadow: inset 0 0 0 1px rgb(222 178 95 / .35); }
.out-item .r { font-size: 12px; color: var(--lav-2); font-variant-numeric: tabular-nums; }
.out-item .nofee-inline { color: var(--pink); font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.combo { border-top: 1px solid var(--hair); padding-top: 12px; }
.combo-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.combo-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; min-height: 48px; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: rgb(207 202 194 / .09); }
.combo-list li[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.combo-list li .tok-ico { width: 30px; height: 30px; font-size: 13px; }
.cm-sub { font-size: 11.5px; color: var(--lav-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-main { min-width: 0; overflow: hidden; }
.cm-main b { overflow-wrap: anywhere; }
.combo-note { margin-top: 8px; font-size: 12px; color: var(--lav-2); }

.field { margin-bottom: 16px; }
.field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.unit-in { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 10px; background: rgb(1 1 1 / .4); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 14px; color: var(--lav-2); }
.unit-in input { width: 56px; border: 0; background: none; outline: none; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.unit-in.pre input { text-align: left; width: 100%; }
.unit-in input::-webkit-inner-spin-button, .unit-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.unit-in:focus-within { box-shadow: inset 0 0 0 1px rgb(156 200 255 / .6), 0 0 0 3px rgb(156 200 255 / .14); }
.unit-in.bad { box-shadow: inset 0 0 0 1px rgb(255 75 62 / .7); }
.chips { display: flex; gap: 6px; margin-bottom: 6px; }
.chips button { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; color: var(--lav-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.chips button[aria-pressed="true"] { color: var(--gold-ink); background: var(--gold); box-shadow: none; font-weight: 600; }
.pop-set .toggle { margin: 4px 0 12px; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.range-fields label { display: grid; gap: 6px; font-size: 12.5px; color: var(--lav-2); }
.range-fields .unit-in { width: 100%; }
.pop-range .btn-gold { margin-top: 12px; }

/* toasts: die-cut vinyl stickers that slap on and settle a little crooked */
#toasts.toasts {
  position: fixed; inset: auto 0 calc(var(--bar-bot) + env(safe-area-inset-bottom) + 16px) 0; margin: 0 auto;
  width: min(420px, calc(100vw - 32px)); padding: 6px; border: 0; background: none; overflow: visible;
  display: grid; gap: 12px; pointer-events: none;
}
#toasts.toasts:not(:popover-open) { display: none; }
.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px 10px 14px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #2b2031, #1d1626);
  box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 3.5px rgb(0 0 0 / .7), 0 22px 40px -14px rgb(0 0 0 / .9);
  color: var(--text);
  rotate: -.8deg;
  animation: slap .5s var(--spring);
}
.toast:nth-child(even) { rotate: .6deg; }
.toast.leaving { animation: toastout .2s var(--ease-out) forwards; }
@keyframes slap { from { opacity: 0; scale: 1.2; rotate: -6deg; } }
@keyframes toastout { to { opacity: 0; scale: .95; } }
.toast .t-ico { width: 20px; height: 20px; margin-top: 1px; color: var(--lav-2); }
.toast.bad { box-shadow: 0 0 0 2.5px var(--cream), 0 0 0 3.5px rgb(0 0 0 / .7), inset 3px 0 0 var(--red), 0 22px 40px -14px rgb(0 0 0 / .9); }
.toast.bad .t-ico { color: var(--red); filter: drop-shadow(0 0 5px rgb(255 75 62 / .7)); }
.toast.ok .t-ico { color: var(--green); }
.t-title { font-weight: 600; font-size: 14px; }
.t-body { font-size: 13px; color: var(--lav-2); margin-top: 2px; }
.t-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.t-act .btn-ghost { height: 32px; font-size: 12.5px; padding: 0 10px; }
.toast .icon-btn { width: 32px; height: 32px; margin: -6px 0 0; }

/* ================= view-transition scene cuts ================= */
::view-transition-group(bar-top), ::view-transition-group(bar-bot) { animation-duration: .6s; animation-timing-function: var(--ease-io); }
::view-transition-old(picture) { animation: cut-out .22s var(--ease-io) both; }
::view-transition-new(picture) { animation: cut-in .5s .12s var(--ease-out) both; }
@keyframes cut-out { to { opacity: 0; scale: .985; filter: blur(3px); } }
@keyframes cut-in { from { opacity: 0; translate: 0 16px; } }
html:active-view-transition-type(back)::view-transition-new(picture) { animation-name: cut-in-back; }
@keyframes cut-in-back { from { opacity: 0; translate: 0 -12px; } }

/* shutters (opening) */
.shutter { position: fixed; left: 0; right: 0; height: 50.5vh; background: var(--lb); z-index: 60; pointer-events: none; }
.shutter.top { top: 0; transform-origin: 50% 0; }
.shutter.bot { bottom: 0; transform-origin: 50% 100%; }
.bar-top .bar-in, .bar-bot .bar-in { animation: fadein .6s .8s both; }
html.revisit .bar-top .bar-in, html.revisit .bar-bot .bar-in { animation: none; }

/* ================= token images (same-origin proxy) ================= */
/* the letter badge stays visible until the proxied image has actually arrived, so a slow or missing image
   never shows as an empty dark disc */
.tok-ico img { opacity: 0; transition: opacity .25s var(--ease-out); }
.tok-ico img.on { opacity: 1; }
/* the badge's edge drawn over the picture, so a white or black logo doesn't melt into the page */
.tok-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); pointer-events: none; z-index: 1; }

/* ================= the cleanup: rent back ================= */

.liner-cleanup { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 40px; --c: rgb(110 231 168 / .45); }
.liner-cleanup > div { flex: 1 1 420px; min-width: 0; }
.liner-cleanup p:not(.overline) { color: var(--lav-2); font-size: 14px; max-width: 68ch; }
.liner-cleanup .btn-ghost { flex: none; }
.powered { padding: 24px 0 8px; border-top: 1px solid var(--hair); text-align: center; font-size: 13px; color: var(--lav-2); }
.powered a { color: var(--text); text-underline-offset: 3px; }

.rent-card { animation: fadein .45s var(--ease-out); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; --c: rgb(222 178 95 / .55); --fbg: linear-gradient(180deg, rgb(222 178 95 / .09), rgb(45 32 49 / .32)); }
.rent-card .overline { margin-bottom: 4px; color: var(--flare); }
.rent-txt { min-width: 0; }
.rent-line { font-size: 13px; color: var(--lav-2); }
.rent-line b { color: var(--text); font-weight: 600; }
.rent-card .btn-ghost { flex: none; }
.res-rc:empty { display: none; }
/* the rent offer under the pockets title: one line, sentence case like the facts above it */
.pk-rentline { margin-top: 6px; }
.rent-link { color: var(--flare); padding-left: 0; text-align: left; }
.rent-link:hover { color: #fff3cf; }
.rent-link .i { flex: none; }

.rc-rows .row { content-visibility: auto; contain-intrinsic-size: auto 66px; }
.rc-row .worth b { color: var(--flare); }
/* the name keeps a readable width before anything else in the row gives way */
.rc-row .sym { flex: 0 1 auto; min-width: min(8ch, 100%); }
/* a burn row leads with the value being destroyed, and its sub-line may wrap so "could be sold instead" is never cut */
.rc-row.burn .worth b { color: var(--text); }
.rc-row.burn .worth b.pinkt { color: var(--pink); }
.rc-row.burn .worth span { white-space: nowrap; }
.rc-row.burn .who-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.rc-row.burn:has(.cb-input:checked) { background: linear-gradient(90deg, rgb(232 158 164 / .2), rgb(232 158 164 / .06) 75%, transparent); }
.rc-row.burn::before { background: var(--pink); box-shadow: 0 0 10px rgb(232 158 164 / .7); }
.rc-row.burn .cb-input:checked + .cb { background: linear-gradient(180deg, #f7cdd1, var(--pink) 60%, #c47880); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px #b06a72, 0 0 12px rgb(232 158 164 / .35); }
.rc-row.burn:has(.cb-input:checked) .tno { color: var(--pink); }
.btn-text:disabled { opacity: .45; cursor: not-allowed; }
.btn-text:disabled:hover { color: var(--lav-2); }
.rc-wsol { margin-bottom: 18px; }
.rc-wsol .rows { border-top: 1px solid var(--hair-2); }
.rc-more { margin: 14px auto 0; display: flex; }
.rc-burn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 14px 0 6px; }
.rc-burn-head .hint { flex-basis: 100%; }
.rc-pricing { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 6px; }
.ch-usd { margin-top: 2px; }
.rc-burn { margin-top: 18px; background: rgb(232 158 164 / .04); box-shadow: inset 0 0 0 1px rgb(232 158 164 / .25); }
.rc-burn summary { color: var(--text); }
.hidden-list summary .rc-flame { margin-left: 0; color: var(--pink); }
.hidden-list[open] summary .rc-flame { rotate: none; }
.rc-warn { margin: 2px 0 10px; }
.rc-warn > p:not(.warn-title) { color: var(--lav-2); margin-bottom: 10px; }
.rc-burn-tools { display: flex; justify-content: flex-end; gap: 8px; }
.rc-burn .rows { border-top: 1px solid var(--hair); }
.rc-holding { margin-top: 14px; }
.cut-main > .tracklist + .hidden-list { margin-top: 18px; }

/* two icons overlapping by about a third, so both stay readable, and a count for the rest */
.ico-stack { position: relative; width: 36px; height: 36px; }
.ico-stack .tok-ico { position: absolute; width: 24px; height: 24px; font-size: 10px; box-shadow: 0 0 0 2px var(--night), 0 2px 6px rgb(0 0 0 / .35); }
.ico-stack .tok-ico:nth-child(1) { left: 0; top: 2px; z-index: 2; }
.ico-stack .tok-ico:nth-child(2) { left: 15px; top: 2px; z-index: 1; }
.ico-more { position: absolute; left: 50%; translate: -50% 0; bottom: -1px; white-space: nowrap; z-index: 3; padding: 1px 4px; border-radius: 6px; background: var(--night); color: var(--gold); font: 700 9px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgb(222 178 95 / .45); }
.rc-accts { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 3px; max-height: 240px; overflow: auto; font-variant-numeric: tabular-nums; }
.rc-accts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
.rc-a-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stamp.long { font-size: clamp(64px, 10vw, 150px); }

@media (max-width: 900px) {
  /* after the protection card, so it doesn't split the list from its own "dust into" choice */
  .rent-card { order: 5; width: 100%; margin-top: 16px; }
}
/* the cleanup's explainer stays in view beside a long list, like the pockets aside */
@media (min-height: 780px) and (min-width: 901px) { #rcAside { position: sticky; top: calc(var(--bar-top) + 24px); } }
@media (max-width: 640px) {
  .rent-card { padding: 12px 14px; }
  .liner-cleanup .btn-ghost { width: 100%; }
  /* the cleanup's two numbers sit side by side on phones, so the list starts on the first screen; the SOL figure
     gets the wider column and shrinks with the screen rather than run past it */
  .rc-hero:not(.compact) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
  .rc-hero .ch-out { padding-top: 0; border-top: 0; padding-left: 16px; border-left: 1px dashed var(--hair); }
  .rc-hero .ch-big { font-size: clamp(24px, 8.6vw, 34px); white-space: nowrap; }
  .rc-hero .ch-sub { font-size: 12px; white-space: normal; }
  .rc-tracklist .tl-col, .rc-wsol .tl-col { display: none; }
  .tx .ico-stack { width: 32px; height: 32px; }
  .tx .ico-stack .tok-ico { width: 22px; height: 22px; }
  .ico-stack .tok-ico:nth-child(2) { left: 14px; }
  .rc-accts li { grid-template-columns: minmax(0, 1fr) auto; }
  .rc-accts .mono { display: none; }
  .rc-burn-tools { justify-content: flex-start; }
}

/* ================= responsive ================= */
@media (max-width: 1080px) {
  .pk-grid, .cut-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
}
@media (max-width: 900px) {
  .pk-grid, .cut-grid { display: flex; flex-direction: column; gap: 0; }
  .pk-aside, .cut-aside { position: static; display: contents; }
  .pk-main { order: 1; width: 100%; }
  .into { order: 2; margin-top: 28px; width: 100%; }
  .burn-card { order: 3; margin-top: 16px; width: 100%; }
  .set-card { order: 4; margin-top: 16px; width: 100%; }
  .into-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .into-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cut-main { order: 2; width: 100%; margin-bottom: 26px; }
  .cut-aside > * { order: 3; width: 100%; margin-bottom: 14px; }
  .cut-aside > .ask-card { order: 1; margin-bottom: 26px; }
  .liner-tracks { grid-template-columns: 1fr; }
  .liner-tracks li + li { padding-left: 0; border-left: 0; }
  .liner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bar-top .bar-in { gap: 8px; }
  .brand-script { font-size: 30px; }
  .wallet-chip { padding: 0 8px 0 5px; gap: 6px; font-size: 12px; height: 34px; }
  .wallet-chip .i { display: none; }
  .idn { width: 22px; height: 22px; }
  .bar-bot .bar-in { gap: 6px; padding-top: 8px; padding-bottom: 10px; }
  .bar-fine { font-size: 10.5px; text-wrap: balance; }
  .sum-count { font-size: 21px; }
  .sum-worth { font-size: 13px; }
  .sum-sub { font-size: 12px; gap: 3px 6px; flex-wrap: wrap; white-space: normal; }
  .sum-sub > span { flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .out-chip .oc-sym { max-width: 52vw; }
  .out-chip { padding: 0 4px 0 7px; gap: 3px; }
  .out-chip .oc-arr { display: none; }
  .btn-gold { height: 50px; padding: 0 18px; font-size: 15px; }
  .act-right { gap: 8px; }
  .ring-dial { width: 32px; height: 32px; font-size: 10px; }

  .hero { align-items: start; }
  .title-card { padding-top: 26px; padding-bottom: 0; }
  .tagline { font-size: 34px; max-width: 14ch; margin-bottom: 14px; }
  .hero-facts { font-size: 14.5px; margin-bottom: 20px; max-width: 34ch; }
  .cta-row { gap: 8px; }
  .cta-row .helper { width: 100%; max-width: 54%; }
  .hero-stage { left: auto; right: 2%; translate: 0 0; height: clamp(130px, 21vh, 180px); bottom: 7%; }
  @keyframes enter-m { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  .sun { left: 78%; width: 280px; }
  .skyline.far { height: 22%; }
  .ledge { height: 8%; }
  .scroll-cue { left: 16px; translate: 0 0; bottom: 10px; }

  .scene-head { gap: 10px; }
  .scene-head .overline { letter-spacing: .3em; }
  .scene-title { font-size: clamp(42px, 13vw, 58px); }
  .mascot-cameo { height: 92px; }
  .complete-art { height: 132px; }
  .facts { font-size: 14px; }
  .toolbar { gap: 10px; }
  .seg { width: 100%; }
  .seg button { flex: 1 0 auto; padding: 0 9px; font-size: 12.5px; }
  .search { flex-basis: 100%; }
  .tl-head { padding-left: 38px; padding-right: 8px; }
  .row { grid-template-columns: 16px 22px 32px minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px 10px 2px; }
  .row .tno { font-size: 13px; }
  .tok-ico { width: 32px; height: 32px; font-size: 13px; }
  .who-sub .nm { display: none; }
  .into-grid, .into-grid.three { grid-template-columns: 1fr 1fr; }
  .into-grid.three .opt { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; }
  .into-grid.three .opt .tok-ico { grid-row: span 2; }

  .cut-hero { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
  .ch-arrow { display: none; }
  .ch-out { padding-top: 14px; border-top: 1px dashed var(--hair); }
  .ch-big { font-size: 40px; white-space: normal; }
  .tx { grid-template-columns: 20px 32px minmax(0, 1fr) auto; gap: 4px 10px; }
  .tx-flow { white-space: normal; }
  .loss .vm, .m-hide { display: none; }
  .loss .vm-s { display: inline; color: var(--lav); }
  .m-show { display: inline; }
  .tx .tok-ico { width: 32px; height: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 16px; }
  .stat-v { font-size: 28px; }
  .stat.received { grid-column: 1 / -1; box-shadow: 0 1px 0 var(--hair); }
  .stat.received .stat-v { font-size: 38px; }
  .stat.received + .stat { box-shadow: none; }
  .chain-wrap { gap: 10px; }
      
  /* popovers become bottom sheets on phones */
  [popover].pop { inset: auto 0 0 0 !important; width: 100% !important; max-width: none; max-height: 80dvh; border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); translate: 0 24px; }
  [popover].pop.up { translate: 0 24px; }
  @starting-style { [popover].pop:popover-open, [popover].pop.up:popover-open { translate: 0 24px; } }
  [popover].pop:popover-open::backdrop { background: rgb(1 1 1 / .55); }
  @starting-style { [popover].pop:popover-open::backdrop { background: rgb(1 1 1 / 0); } }
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; max-height: 88dvh; }
  .sheet-in { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 400px) {
  .row .flag .flag-t { display: none; }
  .row .flag { padding: 0 5px; }
  .seg { -webkit-mask: linear-gradient(90deg, #000 84%, transparent); mask: linear-gradient(90deg, #000 84%, transparent); }
}
@media (max-width: 420px) {
  #ctaAlt.wide-only { display: none; }
}
/* below 360px the cleanup's numbers stack like the swap's cut */
@media (max-width: 360px) {
  .rc-hero:not(.compact) { grid-template-columns: 1fr; gap: 12px; }
  .rc-hero .ch-out { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px dashed var(--hair); }
}
.xs-show { display: none; }
@media (max-width: 380px) {
  .xs-show { display: inline; }
  .xs-hide { display: none !important; }
  .sum-worth { display: none; }
  .btn-gold { padding: 0 14px; }
}
@media (max-height: 700px) and (max-width: 640px) {
  .hero-stage { height: 130px; }
  .tagline { font-size: 30px; }
}

/* tablet portrait / small laptops: the title text and the mascot stop overlapping */
@media (min-width: 641px) and (max-width: 1024px) {
  .title-card > * { max-width: 54%; }
  .hero-facts { max-width: 40ch; }
  .hero-stage { left: auto; right: 2%; translate: 0 0; height: min(34vh, 320px); }
  @keyframes enter-m { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
}

/* touch: every control gets a 44px target. Small inline controls grow an invisible hit area instead of
   growing visually, so the layout stays the same. */
@media (pointer: coarse) {
  .seg button, .btn-ghost.sm, .chips button, .t-act .btn-ghost, .back-link, .wallet-chip { min-height: 44px; }
  .seg-thumb { height: 44px; }
  .btn-text, .btn-text.sm { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .toast .icon-btn { width: 44px; height: 44px; margin: -12px -4px 0 0; }
  .out-chip, button.flag, details > summary, .sol-link, .reveal { position: relative; }
  .out-chip::after, button.flag::after, details > summary::after, .sol-link::after { content: ""; position: absolute; inset: -10px -6px; }
  .tx summary, .skip-row summary { padding: 8px 0; }
  .out-chip { height: 32px; }
}

/* short or landscape viewports: the bars shrink so the picture keeps most of the screen */
@media (max-height: 520px) {
  :root, html[data-scene="title"], html[data-scene="title"].bar-cta { --bar-top: 44px; --bar-bot: 70px; --title-bot: 44px; }
  html[data-scene="title"]:not(.bar-cta) { --bar-bot: 44px; }
  html.cinema-on { --bar-top: 44px; --bar-bot: 64px; }
  .bar-bot .bar-in { padding-top: 6px; padding-bottom: 6px; gap: 0; }
  .bar-fine { display: none !important; }
  .btn-gold { height: 44px; }
  .sum-count { font-size: 19px; }
  .sum-sub { flex-wrap: nowrap; white-space: nowrap; }
  .sum-sub > span { display: block; flex-basis: auto; overflow: hidden; text-overflow: ellipsis; }
  .brand-script { font-size: 28px; }
  .ring-cap { display: none; }
  .mascot-cameo { height: 72px; }
  .complete-art { height: 104px; }
  .scene-title { font-size: clamp(36px, 8vh, 52px); }
  .wrap { padding-top: 18px; }
  .cinema-reel { width: min(240px, 100%); margin-bottom: 10px; }
  .cinema-cap { font-size: 28px; }
}

/* ================= reduced motion =================
   Feedback stays (fast opacity), travel goes. */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; }
html.rm .trails .orbit, html.rm .mascot img, html.rm .complete-art, html.rm .cinema-reel, html.rm .progress-track::after { animation: none !important; }
html.rm ::view-transition-group(*), html.rm ::view-transition-old(*), html.rm ::view-transition-new(*) { animation-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .trails .orbit, .mascot img, .complete-art, .cinema-reel, .progress-track::after { animation: none !important; }
}