/* SideSignal — white and blue. One grotesk, one mono, hairlines, soft radii. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f8fc;
  --surface-2: #eef2f9;
  --ink: #0b1630;
  --ink-2: #33405c;
  --muted: #5f6a82;
  --line: #e4e9f2;
  --line-strong: #cdd5e3;
  --accent: #3e61f5;
  --accent-deep: #2745d6;
  --accent-soft: #eef2ff;
  --accent-ink: #18287a;
  --yes: #3e61f5;
  --yes-soft: #eef2ff;
  --no: #56637f;
  --no-soft: #f1f3f8;
  --warning: #b26a00;
  --warning-soft: #fff6e5;
  --danger: #d23d2d;
  --success: #0f8f63;
  --info: #3e61f5;
  --font-sans: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-2xl: clamp(2.9rem, 7vw, 6rem);
  --lh-tight: 1;
  --lh-body: 1.55;
  --wrap: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgb(11 22 48 / .04), 0 1px 1px rgb(11 22 48 / .03);
  --shadow-2: 0 1px 2px rgb(11 22 48 / .04), 0 12px 32px -12px rgb(11 22 48 / .16);
  --shadow-3: 0 2px 4px rgb(11 22 48 / .04), 0 24px 60px -20px rgb(30 50 140 / .28);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 720ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--text-md)/var(--lh-body) var(--font-sans); font-variant-ligatures: no-contextual; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: var(--accent); color: white; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-150%); border-radius: 999px; background: var(--ink); color: white; padding: 10px 16px; }
.skip-link:focus { transform: none; }
code { font-family: var(--font-mono); font-size: .88em; }

/* ---------- Header ---------- */
.scroll-progress { position: fixed; z-index: 60; inset: 0 0 auto; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); background: var(--accent); pointer-events: none; }
.route-bar { position: fixed; z-index: 61; inset: 0 0 auto; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgb(62 97 245 / .35), var(--accent)); box-shadow: 0 0 8px rgb(62 97 245 / .45); opacity: 0; pointer-events: none; will-change: transform, opacity; }
/* The current page stays while the next loads; it dims only if the wait becomes noticeable. */
#app { transition: opacity 160ms ease; }
#app.route-pending { opacity: .55; transition: opacity 260ms ease 150ms; }

.site-header { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px var(--gutter); background: rgb(255 255 255 / .82); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2), padding var(--dur-2) var(--ease-out); }
.site-header.scrolled { border-bottom-color: var(--line); padding-block: 10px; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.03em; }
.brand-mark { display: block; width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; border-radius: 8px; transition: transform var(--dur-3) var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.site-header nav { position: relative; display: flex; justify-content: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgb(246 248 252 / .9); }
.site-header nav a { position: relative; z-index: 1; min-height: 34px; display: grid; place-items: center; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; transition: color var(--dur-2); }
.site-header nav a:hover, .site-header nav a.active { color: var(--ink); }
.site-header nav a.active { color: var(--accent-deep); }
.nav-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: white; box-shadow: var(--shadow-1), 0 0 0 1px var(--line); opacity: 0; transform: translateX(var(--x, 0)); transition: transform 520ms var(--ease-spring), width 520ms var(--ease-spring), opacity var(--dur-2); pointer-events: none; }
.nav-indicator.on { opacity: 1; }
.header-actions, .wallet-status { justify-self: end; display: flex; align-items: center; gap: 8px; }
.wallet-status > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font: 500 var(--text-xs) var(--font-mono); }
.wallet-status > span:empty { display: none; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: white; padding: 0; position: relative; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child { top: 22px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.button { position: relative; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--accent); border-radius: 999px; padding: 11px 22px; background: var(--accent); color: white; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); }
.button:hover:not(:disabled) { transform: translateY(-2px); background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 10px 24px -10px rgb(62 97 245 / .7); }
.button:hover:not(:disabled)::after { transform: translateX(120%); }
.button:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: 80ms; }
.button .arrow, .button > span:last-child:not(:first-child) { display: inline-block; transition: transform var(--dur-2) var(--ease-spring); }
.button:hover .arrow, .button:hover > span:last-child:not(:first-child) { transform: translateX(4px); }
.button.secondary { background: white; color: var(--ink); border-color: var(--line-strong); }
.button.secondary::after { background: linear-gradient(110deg, transparent 30%, rgb(62 97 245 / .08) 50%, transparent 70%); }
.button.secondary:hover:not(:disabled) { background: white; color: var(--accent-deep); border-color: var(--accent); box-shadow: 0 8px 20px -12px rgb(62 97 245 / .5); }
.button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.button.ghost:hover:not(:disabled) { background: var(--surface); color: var(--ink); border-color: transparent; box-shadow: none; }
.button.compact { min-height: 38px; padding: 7px 16px; font-size: var(--text-sm); }
.button.danger { background: var(--danger); border-color: var(--danger); }
.button.danger:hover:not(:disabled) { background: #b8301f; border-color: #b8301f; box-shadow: 0 10px 24px -10px rgb(210 61 45 / .6); }
.text-button, .text-link, .back-link { position: relative; border: 0; padding: 0 0 2px; background: none; color: var(--accent-deep); font-weight: 500; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1); }
.text-button:hover, .text-link:hover, .back-link:hover { background-size: 100% 1px; }
.back-link { color: var(--muted); }
.back-link:hover { color: var(--ink); }

/* ---------- Wallet dialog ---------- */
.wallet-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: white; color: var(--ink); box-shadow: var(--shadow-3); }
.wallet-dialog[open] { animation: dialog-in 420ms var(--ease-spring); }
.wallet-dialog::backdrop { background: rgb(11 22 48 / .32); backdrop-filter: blur(4px); animation: fade-in 260ms ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
.wallet-dialog h2 { margin: 6px 0 18px; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }
.wallet-dialog p { color: var(--muted); font-size: var(--text-sm); }
.wallet-dialog-close { float: right; width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--surface); font-size: 1.2rem; line-height: 1; transition: background var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.wallet-dialog-close:hover { background: var(--surface-2); transform: rotate(90deg); }
.wallet-options { display: grid; gap: 8px; margin: 18px 0; }
.wallet-options button { width: 100%; justify-content: space-between; text-align: left; }
.wallet-qr { display: block; max-width: 100%; height: auto; margin: 16px auto; border-radius: 12px; }
.wallet-qr[hidden] { display: none; }
#wallet-qr-option { width: 100%; }
#wallet-not-detected { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin: 18px 0; }
#wallet-not-detected strong { font-size: var(--text-sm); font-weight: 600; }
#wallet-not-detected .actions { margin-top: 14px; align-items: center; }
#wallet-detect-again { font-size: var(--text-sm); }

/* ---------- Base type ---------- */
main { min-height: 72vh; outline: none; }
main:focus, main:focus-visible { outline: none; }
.loading { min-height: 65vh; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--muted); font: var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.loading span { width: 120px; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.loading span::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--accent); animation: slide 1.1s var(--ease-in-out) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.eyebrow, .step, .category { display: block; color: var(--accent); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.category { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--text-2xl); line-height: var(--lh-tight); letter-spacing: -.045em; }
h2 { font-size: var(--text-xl); line-height: 1.08; letter-spacing: -.035em; }
h3 { font-size: 1.1rem; line-height: 1.3; letter-spacing: -.015em; }
p { text-wrap: pretty; }
em { font-style: normal; color: var(--accent); }

/* ---------- Motion primitives ---------- */
/* The mask clips vertically for the reveal; side padding (cancelled by margins) keeps tight-tracked glyphs whole. */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .08em; margin: 0 -.12em -.08em; }
.word > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms + var(--d, 0ms)); }
.split-in .word > span, .split-on-view.is-in .word > span { transform: none; }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
[data-reveal].revealed, [data-reveal].is-in { opacity: 1; transform: none; }
.page-enter > * { animation: page-in 420ms var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgb(15 143 99 / .5); animation: live 2s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 7px rgb(15 143 99 / 0); } 100% { box-shadow: 0 0 0 0 rgb(15 143 99 / 0); } }

/* ---------- Home hero ---------- */
.hero { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter) 0; text-align: center; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -80px 0 auto; height: 720px; background: radial-gradient(60% 50% at 50% 0%, rgb(62 97 245 / .1), transparent 70%), linear-gradient(to right, rgb(62 97 245 / .06) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(to bottom, rgb(62 97 245 / .06) 1px, transparent 1px) 0 0 / 64px 64px; -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, black, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 20%, black, transparent 80%); pointer-events: none; }
.hero-copy { display: grid; justify-items: center; }
.hero h1 { max-width: 14ch; margin: 0 0 22px; font-size: clamp(3.1rem, 8.4vw, 7.2rem); line-height: .95; letter-spacing: -.055em; }
.hero h1 em { color: var(--accent); }
.hero-copy > p { max-width: 520px; margin: 0; color: var(--ink-2); font-size: var(--text-lg); }
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-actions { justify-content: center; margin-top: 32px; }

/* Live product demo — an embedded, animated miniature of the app */
.demo-stage { position: relative; max-width: 1040px; margin: clamp(48px, 7vw, 84px) auto 0; perspective: 1600px; }
.demo { --tilt: 10deg; position: relative; display: grid; grid-template-columns: 1.25fr .75fr; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-3); text-align: left; overflow: hidden; transform: rotateX(var(--tilt)) scale(.97); transform-origin: 50% 0; transition: transform 1200ms var(--ease-out); }
.demo-stage.is-in .demo { --tilt: 0deg; transform: rotateX(0) scale(1); }
.demo-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.demo-bar i + i { margin-left: -8px; }
.demo-bar span { flex: 1; max-width: 340px; margin: 0 auto; padding: 5px 12px; border-radius: 999px; background: white; border: 1px solid var(--line); color: var(--muted); font: var(--text-xs) var(--font-mono); text-align: center; }
.demo-main { padding: 26px 28px 28px; border-right: 1px solid var(--line); }
.demo-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-meta .status { text-transform: none; letter-spacing: 0; }
.demo-main h3 { margin: 14px 0 22px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: -.03em; }
.demo-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 24px; }
.demo-rail::before, .demo-rail::after { content: ""; position: absolute; top: 5px; left: 10%; right: 10%; height: 2px; border-radius: 2px; background: var(--line); }
.demo-rail::after { right: auto; width: calc(80% * var(--rail, 0)); background: var(--accent); transition: width 900ms var(--ease-in-out); }
.demo-rail span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; color: var(--muted); font: 500 .68rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; transition: color var(--dur-2); }
.demo-rail span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: white; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.demo-rail span.done { color: var(--ink); }
.demo-rail span.done::before { border-color: var(--accent); background: var(--accent); }
.demo-rail span.active::before { transform: scale(1.35); box-shadow: 0 0 0 5px rgb(62 97 245 / .15); }
.demo-pools { display: grid; gap: 10px; }
.demo-pool { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: var(--text-sm); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.demo-pool::before { content: ""; position: absolute; inset: 0; z-index: 0; width: var(--fill, 0%); background: var(--yes-soft); transition: width 900ms var(--ease-out); }
.demo-pool.no::before { background: var(--no-soft); }
.demo-pool > * { position: relative; z-index: 1; }
.demo-pool b { font: 600 var(--text-xs) var(--font-mono); letter-spacing: .06em; color: var(--yes); }
.demo-pool.no b { color: var(--no); }
.demo-pool strong { font: 500 var(--text-sm) var(--font-mono); font-variant-numeric: tabular-nums; }
.demo-pool.pressed { transform: scale(.98); border-color: var(--yes); }
.demo-pool.win { border-color: var(--yes); box-shadow: 0 0 0 3px rgb(62 97 245 / .14); }
.demo-side { display: grid; align-content: start; gap: 16px; padding: 26px 24px; background: linear-gradient(180deg, white, var(--surface)); }
.demo-amount { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; font: 500 1.05rem var(--font-mono); font-variant-numeric: tabular-nums; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.demo-amount small { color: var(--muted); font-size: .72rem; }
.demo-amount.focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(62 97 245 / .12); }
.demo-amount .caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: caret 1s steps(1) infinite; opacity: 0; }
.demo-amount.focus .caret { opacity: 1; }
@keyframes caret { 50% { visibility: hidden; } }
.demo-cta { min-height: 42px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: white; font-size: var(--text-sm); font-weight: 500; transition: transform 160ms var(--ease-spring), background var(--dur-2); }
.demo-cta.pressed { transform: scale(.95); background: var(--accent-deep); }
.demo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-stats div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.demo-stats dt { color: var(--muted); font: 500 .66rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-stats dd { margin: 4px 0 0; font: 500 1.05rem var(--font-mono); font-variant-numeric: tabular-nums; }
.demo-toast { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: white; font-size: var(--text-sm); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity var(--dur-2), transform 500ms var(--ease-spring); pointer-events: none; }
.demo-toast.show { opacity: 1; transform: none; }
.demo-toast i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-style: normal; font-size: .7rem; }
.demo-cursor { position: absolute; z-index: 4; top: 0; left: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: translate(var(--cx, 70%), var(--cy, 80%)); transition: transform 900ms var(--ease-in-out), opacity 300ms; filter: drop-shadow(0 2px 3px rgb(11 22 48 / .3)); }
.demo-cursor.on { opacity: 1; }
.demo-cursor.click svg { transform: scale(.82); }
.demo-cursor svg { transition: transform 120ms; transform-origin: 4px 4px; }
/* Demo phases: lock, checks, challenge window, payout */
.demo-pools { position: relative; }
.demo-pool-label { display: inline-flex; align-items: center; gap: 10px; }
.demo-checks { display: inline-flex; align-items: center; gap: 0; }
.demo-checks em { margin-left: 8px; color: var(--accent-deep); font: 500 .68rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
.demo-checks.label em { opacity: 1; transform: none; }
.demo-check { width: 0; height: 18px; overflow: visible; opacity: 0; transition: width 380ms var(--ease-spring), opacity 200ms, margin 380ms var(--ease-spring); }
.demo-check + .demo-check { margin-left: 0; }
.demo-check circle { fill: var(--accent); transform-origin: 10px 10px; transform: scale(0); transition: transform 420ms var(--ease-spring); }
.demo-check path { fill: none; stroke: white; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 360ms var(--ease-out) 220ms; }
.demo-check.on { width: 18px; opacity: 1; }
.demo-check.on + .demo-check.on { margin-left: -5px; }
.demo-check.on + .demo-check.on circle { stroke: white; stroke-width: 1.6; }
.demo-check.on circle { transform: scale(1); }
.demo-check.on path { stroke-dashoffset: 0; }
.demo-lock { position: absolute; z-index: 2; inset: -6px; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 14px; background: rgb(255 255 255 / .55); backdrop-filter: blur(5px) saturate(1.2); -webkit-backdrop-filter: blur(5px) saturate(1.2); opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease-out), visibility 0s 420ms; }
.demo-lock.show { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease-out), visibility 0s; }
.demo-lock-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(160deg, #ffffff, var(--accent-soft)); border: 1px solid rgb(62 97 245 / .25); box-shadow: 0 10px 30px -10px rgb(62 97 245 / .55), inset 0 1px 0 white; transform: translateY(8px) scale(.8); transition: transform 600ms var(--ease-spring); }
.demo-lock.show .demo-lock-icon { transform: none; }
.demo-lock.shut .demo-lock-icon { animation: lock-thunk 420ms var(--ease-out); }
@keyframes lock-thunk { 30% { transform: translateY(2px) scale(.96); } 70% { transform: translateY(-1px); } }
.demo-lock svg { width: 34px; height: 34px; overflow: visible; }
.demo-lock rect { fill: var(--accent); }
.demo-lock circle { fill: white; }
.demo-lock .keyhole { stroke: white; stroke-width: 1.8; stroke-linecap: round; }
.demo-lock .shackle { fill: none; stroke: var(--accent-ink); stroke-width: 2.6; stroke-linecap: round; transform: translateY(-5px); transform-origin: 22px 14px; transition: transform 380ms var(--ease-spring); }
.demo-lock.shut .shackle { transform: none; }
.demo-lock b { color: var(--accent-ink); font: 500 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity var(--dur-2) 200ms, transform var(--dur-2) var(--ease-out) 200ms; }
.demo-lock.show b { opacity: 1; transform: none; }
.demo-window { position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--window, 0)); opacity: 0; transition: opacity var(--dur-2); }
.demo-window.on { opacity: 1; }
.demo-pool.lose { opacity: .55; }
.demo-pool { transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), opacity 600ms var(--ease-out), box-shadow var(--dur-2); }
.demo-side { position: relative; }
.demo-form { display: grid; gap: 16px; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), filter 500ms; }
.demo-form > span { color: var(--muted); font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-form.locked .demo-amount { opacity: .5; }
.demo-form.locked .demo-cta { background: var(--surface-2); color: var(--muted); }
.demo-cta { transition: transform 160ms var(--ease-spring), background var(--dur-2), color var(--dur-2); }
.demo-form.away { opacity: 0; transform: translateY(-10px); filter: blur(4px); pointer-events: none; }
.demo-payout { position: absolute; inset: 26px 24px; display: grid; align-content: start; gap: 6px; opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-spring), visibility 0s 500ms; }
.demo-payout.show { opacity: 1; transform: none; visibility: visible; transition: opacity 500ms var(--ease-out) 150ms, transform 600ms var(--ease-spring) 150ms, visibility 0s; }
.demo-payout > span { color: var(--muted); font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-payout strong { position: relative; color: var(--accent); font: 500 clamp(2rem, 3.4vw, 2.6rem)/1.05 var(--font-mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.demo-payout > small { margin-top: -2px; color: var(--muted); font: 500 .72rem var(--font-mono); }
.demo-payout dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.demo-payout dl div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.demo-payout dt { color: var(--muted); font: 500 .64rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.demo-payout dd { margin: 2px 0 0; font: 500 .95rem var(--font-mono); font-variant-numeric: tabular-nums; }
.demo-burst { position: absolute; top: 44px; left: 40px; width: 0; height: 0; pointer-events: none; }
.demo-burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; }
.demo-burst i:nth-child(even) { width: 4px; height: 4px; background: #8ea2ff; }
.demo-payout.burst .demo-burst i { animation: burst 900ms var(--ease-out) forwards; }
.demo-burst i:nth-child(1) { --tx: -38px; --ty: -26px; } .demo-burst i:nth-child(2) { --tx: 6px; --ty: -40px; }
.demo-burst i:nth-child(3) { --tx: 46px; --ty: -24px; } .demo-burst i:nth-child(4) { --tx: 62px; --ty: 4px; }
.demo-burst i:nth-child(5) { --tx: -46px; --ty: 10px; } .demo-burst i:nth-child(6) { --tx: 30px; --ty: 30px; }
.demo-burst i:nth-child(7) { --tx: -18px; --ty: 34px; } .demo-burst i:nth-child(8) { --tx: 84px; --ty: -18px; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); } }
.demo-claim.done { background: var(--accent-soft); color: var(--accent-deep); }
.demo-glow { position: absolute; z-index: -1; inset: 10% 8% -6%; border-radius: 40px; background: radial-gradient(50% 50% at 50% 50%, rgb(62 97 245 / .22), transparent 70%); filter: blur(30px); }

/* ---------- Overview heading: introduces the market preview, then the five-step story ---------- */
.overview-head { margin: clamp(88px, 12vw, 140px) auto 0; }
.overview-head h2 { margin: 12px 0 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.overview-head + .demo-stage { margin-top: clamp(32px, 5vw, 56px); }

/* ---------- Agent quickstart: one prompt in a light blue terminal ---------- */
.agent-start { max-width: 760px; margin: clamp(52px, 7vw, 76px) auto 0; }
.agent-start h2 { margin: 0 0 18px; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; letter-spacing: -.035em; }
.agent-term { --term-bg: #f7f9ff; --term-line: #dde4fb; border: 1px solid var(--term-line); border-radius: 16px; background: var(--term-bg); box-shadow: var(--shadow-2); text-align: left; overflow: hidden; transition: box-shadow var(--dur-2), border-color var(--dur-2); }
.agent-term:hover, .agent-term:focus-within { border-color: #c9d3fa; box-shadow: 0 1px 2px rgb(11 22 48 / .04), 0 18px 40px -18px rgb(62 97 245 / .4); }
.agent-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--term-line); background: white; }
.agent-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.agent-term-bar > span { flex: 1; margin-left: 10px; color: var(--muted); font: 500 var(--text-xs) var(--font-mono); }
.agent-term-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 var(--text-xs) var(--font-mono); transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.agent-term-button svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2) var(--ease-out); }
.agent-term-button:hover { background: var(--accent-soft); color: var(--accent-deep); }
.agent-term-button:active { transform: scale(.95); }
.agent-term-button.primary { border-color: var(--term-line); color: var(--accent-deep); }
.agent-term-button.primary.copied { background: var(--accent); border-color: var(--accent); color: white; }
.agent-term-button.copied svg path { stroke-dasharray: 16; animation: term-check 360ms var(--ease-out) both; }
.agent-term-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.agent-term-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 18px; font: 400 var(--text-sm)/1.75 var(--font-mono); }
.agent-term-prompt { color: var(--accent); font-weight: 600; }
.agent-term-line p { height: 1.75em; margin: 0; overflow: hidden; color: var(--accent-ink); white-space: nowrap; text-overflow: ellipsis; transition: height var(--dur-3) var(--ease-out); }
.agent-term.expanded .agent-term-line p { height: auto; white-space: normal; overflow-wrap: anywhere; }
.agent-term-line b { color: var(--accent); font-weight: 500; }
.agent-term.expanded .agent-term-line b { white-space: nowrap; }
.agent-term-caret { display: inline-block; width: .55em; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--accent); animation: term-caret 1.1s steps(1) infinite; }
@keyframes term-caret { 50% { opacity: 0; } }
@keyframes term-check { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@media (max-width: 600px) { .agent-term-bar i, .agent-term-bar > span { display: none; } .agent-term-bar { justify-content: flex-end; } .agent-term.expanded .agent-term-line b { white-space: normal; overflow-wrap: normal; } }

/* ---------- Sticky story: five embedded screens ---------- */
.story { max-width: var(--wrap); margin: clamp(90px, 12vw, 160px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 80px); }
.story-visual { position: sticky; top: 92px; align-self: start; height: min(620px, calc(100vh - 120px)); display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 16px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.story-visual::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to right, rgb(62 97 245 / .06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(to bottom, rgb(62 97 245 / .06) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: radial-gradient(closest-side, black, transparent); mask-image: radial-gradient(closest-side, black, transparent); }
.story-pills { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: white; overflow-x: auto; scrollbar-width: none; }
.story-pills button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .78rem; font-weight: 500; white-space: nowrap; transition: background var(--dur-2), color var(--dur-2); }
.story-pills button span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font: 500 .66rem var(--font-mono); transition: background var(--dur-2), color var(--dur-2); }
.story-pills button:hover { color: var(--ink); }
.story-pills button.active { background: var(--accent-soft); color: var(--accent-deep); }
.story-pills button.active span { background: var(--accent); color: white; }
.ss-stack { position: relative; min-height: 0; }
.ss-stack .ss-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.97); pointer-events: none; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.ss-stack .ss-screen.active { opacity: 1; transform: none; }
.story-steps { display: grid; padding: 10vh 0 14vh; }
.story-step { min-height: 62vh; display: grid; align-content: center; gap: 12px; opacity: .25; transform: translateX(-6px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.story-step.active { opacity: 1; transform: none; }
.story-step > span { color: var(--accent); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .08em; }
.story-step h3 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -.04em; line-height: 1.05; }
.story-step p { max-width: 440px; margin: 0; color: var(--ink-2); font-size: var(--text-md); }
.story-step-screen:empty { display: none; }

@media (min-width: 861px) and (max-height: 780px) {
  .story-visual { top: 80px; height: calc(100vh - 100px); grid-template-rows: 1fr; padding: 12px; }
  .story-pills { display: none; }
  .ss-body { gap: 9px; padding: 14px 16px; }
  .ss-bar { padding-block: 8px; }
}
/* Screen chrome */
.ss-screen { container-type: inline-size; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-2); overflow: hidden; font-size: 13px; line-height: 1.4; text-align: left; }
.ss-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ss-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ss-bar span { margin-left: 8px; color: var(--muted); font: .7rem var(--font-mono); }
.ss-bar em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font: 500 .62rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ss-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px; min-height: 0; }
.ss-body > * { flex-shrink: 0; }
.ss-body h4 { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.ss-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ss-tag { color: var(--muted); font: 500 .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ss-mono { color: var(--muted); font: .7rem var(--font-mono); }
.ss-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font: 500 .7rem var(--font-mono); }
.ss-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ss-status.open i { animation: live 2s ease-out infinite; }
.ss-status.closed i { background: var(--muted); }
.ss-status.resolving i { background: var(--warning); }
.ss-status.settled i { background: var(--accent); }
.ss-cta { display: grid; place-items: center; min-height: 40px; border-radius: 999px; background: var(--accent); color: white; font-weight: 500; transition: transform 160ms var(--ease-spring), background var(--dur-2), opacity var(--dur-2); }
.ss-cta.press, .ss-cta.done { background: var(--accent-deep); }
.ss-cta.press { transform: scale(.96); }
.ss-cta.danger { background: var(--ink); }
.press { transform: scale(.96); }
.ss-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); opacity: 0; }
.focus .ss-caret { opacity: 1; animation: caret 1s steps(1) infinite; }
.ss-cursor { position: absolute; z-index: 9; top: 0; left: 0; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; opacity: 0; transform: translate(var(--cx, 78%), var(--cy, 88%)); transition: transform 720ms var(--ease-in-out), opacity 260ms; filter: drop-shadow(0 2px 3px rgb(11 22 48 / .3)); }
.ss-cursor.jump { transition: none; }
.ss-cursor.on { opacity: 1; }
.ss-cursor svg { flex: none; transition: transform 120ms; transform-origin: 4px 4px; }
.ss-cursor.click svg { transform: scale(.8); }
.ss-cursor b { margin-top: 16px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: white; font: 500 .62rem var(--font-mono); white-space: nowrap; }
.ss-toast { position: absolute; z-index: 8; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: white; font-size: .78rem; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px) scale(.96); transition: opacity var(--dur-2), transform 480ms var(--ease-spring); pointer-events: none; }
.ss-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ss-toast i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--success); font-style: normal; font-size: .62rem; }

/* 1 · Create */
.ss-field small, .ss-time small { display: block; margin-bottom: 4px; color: var(--muted); font: 500 .64rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ss-input { min-height: 54px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: .9rem; line-height: 1.35; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.ss-input.focus, .ss-amount.focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(62 97 245 / .12); }
.ss-rules { display: grid; gap: 6px; opacity: .35; transition: opacity 400ms; }
.ss-rules.in { opacity: 1; }
.ss-rules div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); font-size: .78rem; }
.ss-rules b { color: var(--accent); font: 500 .68rem var(--font-mono); }
.ss-rules div + div b { color: var(--no); }
.ss-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ss-time { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color var(--dur-2), background var(--dur-2), transform 160ms var(--ease-spring); }
.ss-time small { font-size: .58rem; }
.ss-time b { display: block; font: 500 .74rem var(--font-mono); letter-spacing: -.02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-time.set b { color: var(--ink); animation: drop-in 380ms var(--ease-out); }
.ss-time.focus { border-color: var(--accent); }
.ss-time.bad { border-color: var(--danger); background: #fff5f4; }
.ss-time.bad b { color: var(--danger); }
.ss-timeline { position: relative; height: 68px; margin: 0 6px; }
.ss-track { position: absolute; left: 0; right: 0; top: 24px; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ss-trade, .ss-frozen { position: absolute; top: 0; bottom: 0; transition: width 700ms var(--ease-out), left 700ms var(--ease-out); }
.ss-trade { left: 0; width: var(--close, 0%); background: var(--accent); }
.ss-frozen { left: var(--close, 0%); width: max(0%, calc(var(--deadline, 0%) - var(--close, 0%))); background: repeating-linear-gradient(-45deg, #b8c3dd 0 4px, #dfe5f1 4px 8px); }
.ss-pin { position: absolute; top: 18px; left: var(--x, 0%); display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); opacity: 0; transition: left 700ms var(--ease-spring), opacity var(--dur-2); }
.ss-pin::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 50%; background: white; }
.ss-pin b { color: var(--ink-2); font: 500 .6rem var(--font-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ss-pin.show, .ss-pin.now { opacity: 1; }
.ss-pin.now::before { border-color: var(--line-strong); }
.ss-pin.bad::before { border-color: var(--danger); animation: shake 380ms; }
.ss-pin.bad b { position: absolute; bottom: calc(100% + 4px); color: var(--danger); }
@container (max-width: 440px) {
  .ss-times { grid-template-columns: 1fr; gap: 6px; }
  .ss-time { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; }
  .ss-time small { margin: 0; }
  .ss-choices { grid-template-columns: 1fr 1fr; }
  .ss-choices span:last-child { grid-column: 1 / -1; }
}
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ss-alert { min-height: 30px; display: flex; align-items: center; padding: 6px 10px; border-radius: 8px; color: var(--muted); font: 500 .7rem var(--font-mono); opacity: 0; transition: opacity var(--dur-2), background var(--dur-2), color var(--dur-2); }
.ss-alert.ok, .ss-alert.bad { opacity: 1; }
.ss-alert.ok { background: var(--accent-soft); color: var(--accent-deep); }
.ss-alert.ok::before { content: "✓"; margin-right: 8px; }
.ss-alert.bad { background: #fdeeec; color: var(--danger); animation: shake 380ms; }
.ss-alert.bad::before { content: "!"; margin-right: 8px; font-weight: 700; }
.ss-screen [data-create] { margin-top: auto; }

/* 2 · Take a side */
.ss-odds { display: grid; gap: 6px; }
.ss-oddsbar { height: 8px; border-radius: 8px; background: #c3cbdc; overflow: hidden; }
.ss-oddsbar i { display: block; height: 100%; width: var(--w, 59.8%); border-radius: 8px; background: var(--accent); transition: width 800ms var(--ease-out); }
.ss-oddslabels { display: flex; justify-content: space-between; color: var(--muted); font: 500 .7rem var(--font-mono); }
.ss-oddslabels b { color: var(--ink); font-weight: 500; }
.ss-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-side { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2), transform 160ms var(--ease-spring); }
.ss-side b { font: 500 .9rem var(--font-mono); color: var(--yes); }
.ss-side.no b { color: var(--no); }
.ss-side small { color: var(--muted); font-size: .72rem; }
.ss-side.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgb(62 97 245 / .12); }
.ss-amount { display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 .95rem var(--font-mono); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.ss-amount small { margin-left: auto; color: var(--muted); font-size: .68rem; }
.ss-quote { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); opacity: .4; transition: opacity 400ms, background 400ms; }
.ss-quote.in { opacity: 1; background: var(--accent-soft); }
.ss-quote span { color: var(--ink-2); }
.ss-quote b { font: 500 .9rem var(--font-mono); color: var(--accent-deep); }
.ss-quote small { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.ss-vault { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); transition: border-color var(--dur-2), background var(--dur-2); }
.ss-vault b { display: block; font-weight: 500; }
.ss-vault small { color: var(--muted); font-size: .72rem; }
.ss-vault strong { font: 500 .8rem var(--font-mono); }
.ss-lock { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: white; border: 1px solid var(--line); color: var(--muted); transition: color var(--dur-2), background var(--dur-2), border-color var(--dur-2); }
.ss-shackle { transition: transform 400ms var(--ease-spring); transform: translateY(-3px); transform-box: fill-box; }
.ss-vault.locked { border-style: solid; border-color: rgb(62 97 245 / .4); background: var(--accent-soft); }
.ss-vault.locked .ss-lock { color: white; background: var(--accent); border-color: var(--accent); }
.ss-vault.locked .ss-shackle { transform: none; }
.ss-vault.pulse { animation: vault 600ms var(--ease-spring); }
@keyframes vault { 40% { transform: scale(1.03); } }
.ss-wallet { position: absolute; z-index: 6; top: 10px; right: 10px; width: 210px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-3); opacity: 0; transform: translateY(-8px) scale(.95); transform-origin: top right; transition: opacity var(--dur-2), transform 420ms var(--ease-spring); pointer-events: none; }
.ss-wallet.open { opacity: 1; transform: none; }
.ss-wallet-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--muted); font: 500 .66rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.ss-wallet-dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #8aa0ff); }
.ss-wallet-step { display: none; gap: 3px; }
.ss-wallet.connect [data-wstep="connect"], .ss-wallet.approve [data-wstep="approve"] { display: grid; animation: drop-in 320ms var(--ease-out); }
.ss-wallet-step b { font-weight: 500; }
.ss-wallet-step small { color: var(--muted); font-size: .72rem; }
.ss-wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.ss-wallet-actions span { display: grid; place-items: center; min-height: 30px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .74rem; transition: transform 160ms var(--ease-spring); }
.ss-wallet-actions .go { border-color: var(--accent); background: var(--accent); color: white; }
.ss-coin { position: absolute; z-index: 7; top: 0; left: 0; width: 44px; height: 44px; display: none; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #5f7cff, var(--accent-deep)); color: white; font: 600 .68rem var(--font-mono); box-shadow: 0 6px 16px -4px rgb(39 69 214 / .6); transform: translate(calc(var(--fx) - 22px), calc(var(--fy) - 22px)); }
.ss-coin.at { display: grid; }
.ss-coin.fly { transform: translate(calc(var(--tx) - 22px), calc(var(--ty) - 22px)) scale(.5); opacity: .2; transition: transform 800ms var(--ease-in-out), opacity 800ms ease-in; }

/* 3 · Propose */
.ss-wire { position: relative; padding: 14px; border-radius: 14px; background: var(--ink); color: white; overflow: hidden; opacity: 0; transform: translateY(-12px); transition: opacity 400ms, transform 600ms var(--ease-spring); }
.ss-wire.in { opacity: 1; transform: none; }
.ss-wire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .12) 50%, transparent 70%); transform: translateX(-100%); }
.ss-wire.in::after { animation: sweep 1.4s 300ms var(--ease-out); }
@keyframes sweep { to { transform: translateX(100%); } }
.ss-wire-top { display: flex; align-items: center; gap: 8px; color: #9fb0e6; font: 500 .66rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ss-wire-top i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b5a; animation: live 1.6s ease-out infinite; }
.ss-wire p { margin: 8px 70px 0 0; font-size: .95rem; }
.ss-stamp { position: absolute; right: 14px; top: 50%; padding: 4px 10px; border: 2.5px solid #8ea4ff; border-radius: 8px; color: #8ea4ff; font: 700 1.2rem var(--font-mono); letter-spacing: .06em; opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.4); }
.ss-stamp.hit { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1); transition: transform 360ms cubic-bezier(.5, 1.8, .6, 1), opacity 120ms; }
.ss-checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ss-checks li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .76rem; transition: color 300ms; }
.ss-checks li::before { content: ""; width: 16px; height: 16px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; background: white center / 10px no-repeat; transition: background-color 300ms, border-color 300ms, transform 300ms var(--ease-spring); }
.ss-checks li.ok { color: var(--ink); }
.ss-checks li.ok::before { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E"); transform: scale(1.1); }
.ss-record { display: none; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ss-record.in { display: grid; animation: drop-in 420ms var(--ease-out); }
.ss-record b { display: block; font-weight: 500; }
.ss-record small { color: var(--muted); font-size: .72rem; }
.ss-propose { display: grid; gap: 10px; transition: opacity 400ms, transform 500ms var(--ease-out); }
.ss-propose.gone { opacity: 0; transform: translateY(8px); pointer-events: none; height: 0; overflow: hidden; }
.ss-note { padding: 8px 10px; border-radius: 8px; background: var(--warning-soft); color: var(--warning); font: 500 .72rem var(--font-mono); }
.ss-choices { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.ss-choices span { display: grid; place-items: center; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 .78rem var(--font-mono); transition: border-color var(--dur-2), background var(--dur-2), transform 160ms var(--ease-spring); }
.ss-choices span.picked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.ss-bond { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.ss-bond b { color: var(--ink); font: 500 .78rem var(--font-mono); }
.ss-window { display: none; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgb(62 97 245 / .3); border-radius: 14px; background: var(--accent-soft); }
.ss-window.in { display: grid; animation: drop-in 420ms var(--ease-out); }
.ss-window svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ss-window circle { fill: none; stroke: white; stroke-width: 3.5; }
.ss-window .ss-window-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 1) * 100); transition: stroke-dashoffset 130ms linear; }
.ss-window small { display: block; color: var(--accent-deep); font: 500 .64rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.ss-window b { font: 500 1.5rem var(--font-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ss-window > span { grid-column: 1 / -1; color: var(--ink-2); font-size: .74rem; }

/* 4 · Challenge */
.ss-dispute { display: grid; gap: 8px; }
.ss-party { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; transition: border-color var(--dur-2), background var(--dur-2); }
.ss-party b { display: block; font-weight: 500; }
.ss-party small { color: var(--muted); font-size: .72rem; }
.ss-party strong { font: 500 .8rem var(--font-mono); }
.ss-party strong::after { content: " USDC"; color: var(--muted); font-size: .66rem; }
.ss-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font: 500 .6rem var(--font-mono); }
.ss-avatar.b { background: var(--ink); color: white; }
.ss-party[data-challenger] { border-style: dashed; opacity: .55; }
.ss-party[data-challenger].in { border-style: solid; border-color: var(--ink); opacity: 1; animation: vault 500ms var(--ease-spring); }
.ss-cta.gone { display: none; }
.ss-court { display: none; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--surface), white); }
.ss-court.in { display: grid; animation: drop-in 420ms var(--ease-out); }
.ss-court-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.ss-court-head b { display: block; font-weight: 500; }
.ss-court-head small { color: var(--muted); font-size: .72rem; }
.ss-gavel { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: white; transform-origin: 70% 70%; }
.ss-gavel.strike { animation: strike 380ms var(--ease-in-out); }
@keyframes strike { 50% { transform: rotate(-28deg); } 80% { transform: rotate(6deg); } }
.ss-verdict { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 500 .68rem var(--font-mono); }
.ss-court.decided .ss-verdict { background: var(--accent); color: white; animation: vault 500ms var(--ease-spring); }
.ss-voters { display: grid; grid-template-columns: repeat(12, 16px); justify-content: space-between; row-gap: 8px; padding: 2px 0; }
.ss-voters i { aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); transition: background 200ms, transform 300ms var(--ease-spring); }
.ss-voters i.yes { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.ss-voters i.no { background: #c3cbdc; border-color: #c3cbdc; transform: scale(1.08); }
.ss-tally { height: 6px; border-radius: 6px; background: #c3cbdc; overflow: hidden; }
.ss-tally i { display: block; height: 100%; width: var(--w, 50%); background: var(--accent); transition: width 200ms; }
.ss-outcome { display: grid; gap: 6px; opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.ss-outcome.in { opacity: 1; transform: none; }
.ss-outcome span { padding: 7px 10px; border-radius: 8px; font: 500 .72rem var(--font-mono); }
.ss-outcome .ok { background: var(--accent-soft); color: var(--accent-deep); }
.ss-outcome .ok::before { content: "✓  "; }
.ss-outcome .bad { background: #fdeeec; color: var(--danger); }
.ss-outcome .bad::before { content: "✕  "; }

/* 5 · Settle */
.ss-split { display: grid; gap: 8px; }
.ss-stackbar { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.ss-stackbar i { width: 0; transition: width 900ms var(--ease-out); }
.ss-split.in .ss-stackbar i { width: var(--w); }
.ss-stackbar .w { background: var(--accent); transition-delay: 0ms; }
.ss-stackbar .r { background: #7d95ff; transition-delay: 250ms; }
.ss-stackbar .c { background: #aebcff; transition-delay: 400ms; }
.ss-stackbar .p { background: var(--ink); transition-delay: 550ms; }
.ss-brace { position: relative; width: 95%; height: 22px; border: 2px solid var(--accent); border-top: 0; border-radius: 0 0 10px 10px; opacity: 0; transform: scaleX(.6); transform-origin: left; transition: opacity 400ms, transform 700ms var(--ease-out); }
.ss-brace.in { opacity: 1; transform: none; }
.ss-brace span { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--accent); color: white; font: 500 .68rem var(--font-mono); white-space: nowrap; }
.ss-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; margin-top: 12px; color: var(--ink-2); font: .68rem var(--font-mono); }
.ss-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.ss-legend .w i { background: var(--accent); }
.ss-legend .r i { background: #7d95ff; }
.ss-legend .c i { background: #aebcff; }
.ss-legend .p i { background: var(--ink); }
.ss-winners { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.ss-winners-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.ss-winners-head small { color: var(--muted); font: 500 .64rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.ss-winners-head span { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--muted); font-size: .66rem; }
.ss-winners-head i { width: 9px; height: 9px; margin-left: 6px; border-radius: 2px; }
.ss-winners-head .stake { background: #c9d4ff; }
.ss-winners-head .gain { background: var(--accent); }
.ss-summary { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: white; opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 500ms var(--ease-spring); }
.ss-summary.in { opacity: 1; transform: none; }
.ss-summary span { color: #a9b4d0; font-size: .78rem; }
.ss-summary b { margin-left: auto; font: 500 1.1rem var(--font-mono); }
.ss-summary em { color: #8ea4ff; font: 500 .8rem var(--font-mono); }
.ss-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; opacity: 0; transform: translateX(-8px); transition: opacity 400ms, transform 500ms var(--ease-out); }
.ss-row.in { opacity: 1; transform: none; }
.ss-row > span:first-child { font-weight: 500; }
.ss-row b { font: 500 .72rem var(--font-mono); white-space: nowrap; }
.ss-row b em { color: var(--accent); }
.ss-hbar { display: flex; height: 14px; border-radius: 4px; background: var(--surface); }
.ss-hbar i { width: 0; height: 100%; transition: width 900ms var(--ease-out); }
.ss-row.in .ss-hbar i { width: max(3px, var(--w)); }
.ss-hbar .stake { background: #c9d4ff; border-radius: 4px 0 0 4px; }
.ss-hbar .gain { background: var(--accent); border-radius: 0 4px 4px 0; transition-delay: 350ms; }
.ss-row.you { grid-template-columns: 44px 1fr auto auto; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; background: var(--accent-soft); }
.ss-claim { padding: 4px 12px; border-radius: 999px; background: var(--accent); color: white; font-size: .72rem; font-weight: 500; transition: transform 160ms var(--ease-spring), background var(--dur-2); }
.ss-claim.done { background: var(--success); }

/* ---------- Settlement rail (detail + create) ---------- */
.settlement-rail { position: relative; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; width: 100%; }
.settlement-rail span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.settlement-rail span i { width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 50%; background: white; font: normal 500 10px var(--font-mono); transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.settlement-rail span b { font: 500 var(--text-xs) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.settlement-rail em { position: relative; height: 2px; margin: 0 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.settlement-rail em::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--ease-in-out); transition-delay: calc(var(--k, 0) * 140ms + 200ms); }
.settlement-rail.is-in em.done::after { transform: scaleX(1); }
.settlement-rail span.done { color: var(--ink); }
.settlement-rail span.done i { background: var(--accent); border-color: var(--accent); color: white; }
.settlement-rail span.active { color: var(--accent-deep); }
.settlement-rail span.active i { border-color: var(--accent); color: var(--accent-deep); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(62 97 245 / .14); } }

/* ---------- Directory ---------- */
.directory-head, .page-heading, .market-detail-head { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 28px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.directory-head h1, .directory-head h2, .page-heading h1 { margin: 8px 0 0; font-size: clamp(2.6rem, 5.5vw, 4.4rem); letter-spacing: -.05em; }
.directory-head p, .page-heading p { max-width: 560px; margin: 12px 0 0; color: var(--muted); }
.directory-head .eyebrow, .page-heading .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.subnav { max-width: var(--wrap); margin: 0 auto; padding: clamp(28px, 4vw, 40px) var(--gutter) 0; }
.subnav div { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.subnav a { min-height: 34px; display: grid; place-items: center; padding: 0 16px; border-radius: 999px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; transition: color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2); }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { background: white; color: var(--accent-deep); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.subnav + .directory-head, .subnav + .page-heading, .subnav + .empty-page { padding-top: 24px; }
.home-markets { margin-top: clamp(80px, 10vw, 140px); }
.page-heading { display: grid; justify-content: start; gap: 0; }
.market-controls { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 0 var(--gutter) 16px; }
.market-controls label { position: relative; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding-left: 16px; background: white; color: var(--muted); font: 500 var(--text-xs) var(--font-mono); text-transform: uppercase; letter-spacing: .04em; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.market-controls label:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(62 97 245 / .1); }
.market-controls .search::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.market-controls input, .market-controls select { min-height: 44px; border: 0; outline: 0; background: transparent; box-shadow: none; }
.market-controls input:focus, .market-controls select:focus { box-shadow: none; background: transparent; }
.market-controls input { width: 100%; padding: 0 16px 0 4px; font: var(--text-md) var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.market-controls select { padding: 0 34px 0 4px; color: var(--ink); font: 500 var(--text-sm) var(--font-sans); text-transform: none; letter-spacing: 0; }
.market-browser { max-width: var(--wrap); margin: 0 auto 100px; display: grid; gap: 18px; padding: 0 var(--gutter); }
.market-pages { max-width: var(--wrap); margin: -64px auto 100px; padding: 0 var(--gutter); }
.category-rail { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.category-rail::-webkit-scrollbar { display: none; }
.category-rail > strong { display: none; }
.category-rail button { flex: none; min-height: 36px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: white; color: var(--ink-2); font-size: var(--text-sm); transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.category-rail button b { color: var(--muted); font: 500 .7rem var(--font-mono); transition: color var(--dur-2); }
.category-rail button:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.category-rail button.active { border-color: var(--ink); background: var(--ink); color: white; }
.category-rail button.active b { color: rgb(255 255 255 / .6); }
.market-results { min-width: 0; }
.results-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; color: var(--muted); font: var(--text-xs) var(--font-mono); }
.results-meta span:last-child { display: flex; align-items: center; gap: 7px; }
.results-meta i, .status i { width: 7px; height: 7px; display: inline-block; flex: none; border-radius: 50%; background: var(--success); }
.results-meta i { background: var(--line-strong); }
.results-meta .live i { background: var(--success); }
.status.open i, .results-meta .live i { animation: live 2s ease-out infinite; }
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.market-card { position: relative; min-height: 268px; display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform 500ms var(--ease-spring), box-shadow var(--dur-2), border-color var(--dur-2), opacity 800ms var(--ease-out); }
.market-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.market-card[data-reveal]:not(.is-in) { transform: translateY(22px); }
.market-card-top, .market-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font: 500 var(--text-xs) var(--font-mono); white-space: nowrap; }
.status.resolving i { background: var(--accent); animation: none; }
.status.settled i { background: var(--line-strong); animation: none; }
.market-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.025em; transition: color var(--dur-2); }
.market-card:hover h3 { color: var(--accent-deep); }
.pools { display: grid; gap: 8px; margin-top: auto; }
.card-sides { display: grid; gap: 10px; }
.card-side { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; }
.card-side-name { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; row-gap: 7px; min-width: 0; }
.card-side-name b { font: 600 var(--text-sm) var(--font-mono); letter-spacing: .04em; color: var(--yes); }
.card-side.no .card-side-name b { color: var(--no); }
.card-side-name small { overflow: hidden; color: var(--muted); font: 500 var(--text-xs) var(--font-mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.card-side-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.card-side-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--yes); }
.card-side.no .card-side-bar i { background: #8d97ad; }
.card-side-pays { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: 600 var(--text-xs) var(--font-mono); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-side-share { grid-column: 3; display: grid; place-items: center; height: 36px; border: 1px solid color-mix(in srgb, var(--yes) 45%, var(--line)); border-radius: 999px; color: var(--accent-deep); font: 600 1rem/1 var(--font-sans); font-style: normal; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.card-side.no .card-side-share { border-color: var(--line-strong); color: var(--ink); }
.split-bar { display: flex; height: 6px; gap: 3px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.split-bar i { display: block; height: 100%; border-radius: 6px; background: var(--yes); width: 0; transition: width 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
.split-bar i + i { background: #c3cbdc; }
.is-in .split-bar i, .split-bar.is-in i { width: var(--w); }
.market-card-bottom { align-items: end; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.market-card-bottom b { flex: none; color: var(--ink); font: 500 var(--text-xs) var(--font-mono); white-space: nowrap; }
.market-skeleton { min-height: 240px; display: grid; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); }
.market-skeleton i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.market-skeleton i:first-child { width: 30%; }
.market-skeleton i:nth-child(2) { width: 85%; height: 20px; }
.market-skeleton i:last-child { width: 60%; margin-top: 60px; }
@keyframes shimmer { to { background-position: -300% 0; } }
.empty { padding: 72px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
#app > .empty { width: min(100% - 2 * var(--gutter), calc(var(--wrap) - 2 * var(--gutter))); margin: 0 auto 64px; }
.eyebrow-address { text-transform: none; letter-spacing: .02em; }
.empty h2 { font-size: 1.6rem; }
.empty p { color: var(--muted); }
.empty .button { margin-top: 8px; }

/* ---------- Create ---------- */
.create-layout { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); padding: 0 var(--gutter) 100px; }
.create-intro { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; padding: 56px 0 24px; }
.create-intro h1 { margin: 0 0 28px; font-size: clamp(2.6rem, 4.2vw, 3.9rem); letter-spacing: -.05em; }
.create-intro > p { max-width: 460px; color: var(--ink-2); font-size: var(--text-lg); }
.create-intro > dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 28px; }
.create-intro > dl div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.create-intro dt { font: 500 1.05rem var(--font-mono); letter-spacing: -.02em; }
.create-intro dd { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }
.create-intro > a { font-weight: 500; }
.create-intro > .text-link { align-self: start; margin-bottom: 14px; }
.create-intro > a:last-child { align-self: start; color: var(--muted); font-size: var(--text-sm); }
.create-form { min-width: 0; padding-top: 56px; }
.form-section { padding: 28px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.form-section:focus-within { border-color: rgb(62 97 245 / .45); box-shadow: 0 0 0 4px rgb(62 97 245 / .06); }
.step { margin-bottom: 18px; }
.two-fields, .three-fields { display: grid; gap: 16px; }
.two-fields { grid-template-columns: 1fr 1fr; }
.three-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
input[type="datetime-local"] { min-width: 0; padding-inline: 10px; font: 400 var(--text-sm) var(--font-mono); letter-spacing: -.02em; }
label { display: grid; gap: 8px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; padding: 12px 14px; outline: none; font-weight: 400; color: var(--ink); transition: border-color var(--dur-1), box-shadow var(--dur-2); }
input, select { min-height: 46px; }
select { appearance: none; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369748c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; padding-right: 36px; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #8892a7; }
input:hover, textarea:hover, select:hover { border-color: #b4bfd2; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(62 97 245 / .12); }
.field-note { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); }
.create-field { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.create-field > label { display: block; padding-right: 50px; }
.optional-label { margin-left: 4px; color: var(--muted); font: 400 .7rem var(--font-mono); white-space: nowrap; }
.field-help { color: var(--muted); font-size: var(--text-sm); }
.field-help > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: .75rem; font-weight: 500; }
.field-help > summary::-webkit-details-marker { display: none; }
.create-field .field-help > summary { position: absolute; top: 1px; right: 0; }
.field-help > div { padding: 14px; border-radius: var(--radius-sm); background: var(--surface); margin-top: 6px; overflow-wrap: anywhere; animation: drop-in 380ms var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
.field-help p { margin: 0 0 10px; line-height: 1.6; font-size: var(--text-sm); color: var(--ink-2); }
.field-help a { display: block; margin-top: 6px; color: var(--accent); font-size: .78rem; }
details::details-content { block-size: 0; overflow: clip; transition: block-size 420ms var(--ease-out), content-visibility 420ms allow-discrete; }
details[open]::details-content { block-size: auto; }
.optional-rules { padding: 0; margin-top: 16px; border-top: 1px solid var(--line); }
.optional-rules > summary, .economics > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding-top: 16px; font-weight: 500; }
.optional-rules > summary::-webkit-details-marker, .economics > summary::-webkit-details-marker { display: none; }
.optional-rules > summary::before, .economics > summary::before { content: "+"; width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 500 15px/1 var(--font-mono); transition: transform var(--dur-2) var(--ease-spring); }
.optional-rules[open] > summary::before, .economics[open] > summary::before { transform: rotate(45deg); }
.optional-rules > summary small { color: var(--muted); font-weight: 400; font-size: var(--text-sm); }
.optional-rules > .two-fields { margin-top: 18px; }
.optional-rules .create-field:last-child { grid-column: 1 / -1; }
.create-field > .field-note { margin: 0; font-size: .75rem; }
.economics > summary { padding-top: 0; }
.economics[open] > summary { margin-bottom: 18px; }
.attestation-help { margin: -14px 0 18px; }
.attestation-help > .field-help > summary { width: fit-content; margin-left: auto; padding-right: 4px; }
.economics > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.economics > div span { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: var(--text-xs); }
.economics b { color: var(--ink); font: 500 1.5rem var(--font-mono); letter-spacing: -.04em; }
.economics > div span:last-child { background: var(--accent-soft); }
.economics > div span:last-child b { color: var(--accent-deep); }
.economics p { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); }
.attestation { grid-template-columns: auto 1fr; align-items: start; gap: 13px; padding: 18px; margin: 14px 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2); }
.attestation:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.attestation input { width: 20px; min-height: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--accent); box-shadow: none; }
.attestation span { display: grid; gap: 4px; }
.attestation b { color: var(--ink); font-weight: 500; }
.attestation small { color: var(--muted); font-weight: 400; }
.create-submit { width: 100%; min-height: 54px; font-size: var(--text-md); }
.transaction-progress { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-deep); font: 500 var(--text-xs) var(--font-mono); animation: drop-in 380ms var(--ease-out); }
.notice { padding: 12px 14px; border: 1px solid rgb(62 97 245 / .2); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-sm); }

/* ---------- Market detail ---------- */
.market-detail-head { align-items: start; padding-bottom: 24px; }
.market-detail-head h1 { max-width: 980px; margin: 12px 0 16px; font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.045em; line-height: 1.04; }
.market-detail-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; color: var(--muted); font: var(--text-xs) var(--font-mono); }
.market-detail-head p > .status { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.market-detail-head .back-link { display: inline-block; margin-bottom: 24px; font-size: var(--text-sm); }
.market-detail-head + .settlement-rail { width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); margin: 0 auto 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.pool-board { position: relative; width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); margin: 0 auto 28px; display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 10px; }
.pool-board > div { min-height: 150px; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; text-align: center; }
.pool-board span { color: var(--muted); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pool-board strong { font: 500 clamp(1.6rem, 3vw, 2.6rem) var(--font-mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pool-board small { color: var(--muted); font-size: var(--text-xs); }
.pool-side.yes { background: linear-gradient(180deg, var(--yes-soft), white); border-color: rgb(62 97 245 / .22); }
.pool-side.yes span { color: var(--yes); }
.pool-side.no { background: linear-gradient(180deg, var(--no-soft), white); }
.pool-side.no span { color: var(--no); }
.pool-board > .split-bar { grid-column: 1 / -1; min-height: 0; height: 8px; padding: 0; border: 0; }
.market-layout { max-width: var(--wrap); margin: 0 auto 100px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); gap: 20px; padding: 0 var(--gutter); }
.market-main { display: grid; gap: 14px; align-content: start; }
.action-card, .market-sidebar section { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.action-card h2, .market-sidebar h2 { margin: 0 0 18px; font-size: 1.45rem; }
.action-card > .eyebrow + h2, .market-sidebar .eyebrow + h2 { margin-top: 8px; }
.outcome-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.outcome-picker label { position: relative; cursor: pointer; }
.outcome-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.outcome-picker span { min-height: 64px; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: white; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); }
.outcome-picker label:hover span { transform: translateY(-2px); }
.outcome-picker b { font: 500 var(--text-lg) var(--font-mono); letter-spacing: .02em; color: var(--yes); }
.outcome-picker .no b { color: var(--no); }
.outcome-picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.outcome-picker input:checked + span { animation: pick 420ms var(--ease-spring); }
@keyframes pick { 40% { transform: scale(.97); } }
.outcome-picker .yes input:checked + span { border-color: var(--yes); background: var(--yes-soft); box-shadow: 0 0 0 3px rgb(62 97 245 / .14); }
.outcome-picker .no input:checked + span { border-color: var(--no); background: var(--no-soft); box-shadow: 0 0 0 3px rgb(86 99 127 / .14); }
.outcome-picker small { color: var(--ink-2); font-weight: 400; line-height: 1.4; }
.amount { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: white; transition: border-color var(--dur-1), box-shadow var(--dur-2); }
.amount:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(62 97 245 / .12); }
.amount input { border: 0; box-shadow: none !important; font-family: var(--font-mono); }
.amount span { padding: 0 14px; color: var(--muted); font: 500 var(--text-xs) var(--font-mono); }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.inline-fields .amount { margin-bottom: 12px; }
.inline-fields select { margin-bottom: 12px; }
.resolution-card { position: relative; overflow: hidden; }
.resolution-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.resolution-card > p { color: var(--ink-2); }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 18px; padding: 8px 4px; }
.maintenance-actions p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.market-sidebar { display: grid; gap: 14px; align-content: start; }
.market-sidebar dl { margin: 0; }
.market-sidebar dt { margin-top: 16px; color: var(--accent); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .04em; }
.market-sidebar dt:first-child { margin-top: 0; }
.market-sidebar dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.market-sidebar .technical dt { color: var(--muted); }
.market-sidebar .technical dd { overflow-wrap: anywhere; font: var(--text-xs) var(--font-mono); }
.fee-note { background: var(--accent-soft) !important; border-color: rgb(62 97 245 / .2) !important; }
.fee-note strong { font-weight: 500; }
.fee-note p { margin: 8px 0; color: var(--accent-ink); font: 500 var(--text-sm) var(--font-mono); }
.fee-note small { color: var(--ink-2); }

/* ---------- Lists ---------- */
.portfolio-list, .activity-list { max-width: var(--wrap); margin: 0 auto 100px; padding: 0 var(--gutter); display: grid; gap: 8px; }
.portfolio-list > a, .activity-list > a { display: grid; align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: white; transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2), box-shadow var(--dur-2), opacity 800ms var(--ease-out); }
.portfolio-list > a { grid-template-columns: 1fr auto; }
.portfolio-list > a:hover, .activity-list > a:hover { transform: translateX(4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.portfolio-list h2, .activity-list h2 { margin: 4px 0 0; font-size: 1.12rem; letter-spacing: -.02em; }
.portfolio-list dl { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; margin: 0; }
.portfolio-list dl div { display: grid; gap: 3px; }
.portfolio-list dt { color: var(--muted); font: var(--text-xs) var(--font-mono); }
.portfolio-list dd { margin: 0; font: 500 var(--text-sm) var(--font-mono); }
.activity-list > a { grid-template-columns: 36px 1fr auto; }
.activity-list > a > span { color: var(--muted); font: 500 var(--text-xs) var(--font-mono); }
.activity-list strong { color: var(--accent); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .04em; }
.activity-list small { color: var(--muted); font-size: var(--text-xs); }
.activity-list b { color: var(--accent-deep); font-weight: 500; font-size: var(--text-sm); transition: transform var(--dur-2) var(--ease-spring); }
.activity-list > a:hover b { transform: translateX(4px); }

/* ---------- Editorial pages ---------- */
.editorial-hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 72px); }
.editorial-hero h1 { max-width: 16ch; margin: 14px 0 0; font-size: clamp(2.8rem, 6.4vw, 5.6rem); }
.editorial-hero p { max-width: 620px; margin: 24px 0 0; color: var(--ink-2); font-size: var(--text-lg); }
.mechanism-steps { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 var(--gutter); counter-reset: step; }
.mechanism-steps article { position: relative; min-height: 300px; display: flex; flex-direction: column; padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2), box-shadow var(--dur-2), opacity 800ms var(--ease-out); }
.mechanism-steps article:hover { transform: translateY(-4px); border-color: rgb(62 97 245 / .4); box-shadow: var(--shadow-2); }
.mechanism-steps span { color: var(--accent); font: 500 var(--text-xs) var(--font-mono); }
.mechanism-steps h2 { margin: 0 0 10px; padding-top: 84px; font-size: 1.5rem; }
.mechanism-steps p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.editorial-note { max-width: 860px; margin: clamp(80px, 10vw, 130px) auto; padding: 0 var(--gutter); }
.editorial-note h2 { margin: 12px 0 18px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.editorial-note p { color: var(--ink-2); font-size: var(--text-lg); }
.protocol-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--gutter); }
.protocol-grid article { min-height: 260px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: border-color var(--dur-2), box-shadow var(--dur-2), opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.protocol-grid article:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.protocol-grid h2 { margin: auto 0 12px; padding-top: 44px; font-size: 1.6rem; }
.protocol-grid p { margin-bottom: 10px; color: var(--ink-2); }
.protocol-grid .text-link { align-self: start; margin-top: 6px; }
.about-heading { max-width: var(--wrap); margin: 0 auto; padding: clamp(72px, 9vw, 110px) var(--gutter) 24px; scroll-margin-top: 90px; }
.about-heading h2 { margin: 12px 0 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.about-heading p { max-width: 680px; margin: 14px 0 0; color: var(--ink-2); }
.about-grid article { min-height: 0; }
.primitives-grid { grid-template-columns: repeat(3, 1fr); }
.about-grid h2 { margin-top: 18px; padding-top: 0; }
.about-grid h3 { margin: 18px 0 12px; font-size: 1.25rem; }
.about-grid .eyebrow + h3 { margin-top: 12px; }
.contract-grid code { overflow-wrap: anywhere; }
.contract-address { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-xs); }
.contract-grid .actions { gap: 16px; margin-top: auto; padding-top: 14px; }
.fee-table { width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter))); margin: 12px auto clamp(80px, 10vw, 120px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fee-table div { min-height: 220px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.fee-table div:last-child { background: var(--accent); border-color: var(--accent); color: white; }
.fee-table span { color: var(--muted); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fee-table div:last-child span, .fee-table div:last-child p { color: rgb(255 255 255 / .8); }
.fee-table b { margin: auto 0 8px; padding-top: 40px; font: 500 clamp(2.8rem, 5vw, 4rem)/1 var(--font-mono); letter-spacing: -.06em; color: var(--accent); }
.fee-table div:last-child b { color: white; }
.fee-table p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.text-page, .empty-page { max-width: 960px; min-height: 70vh; margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--gutter); }
.text-page h1, .empty-page h1 { margin: 14px 0 40px; font-size: clamp(2.4rem, 5vw, 4rem); }
.text-page-body { display: grid; gap: 8px; margin-bottom: 32px; }
.text-page-body article { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: baseline; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.text-page-body span { color: var(--accent); font: 500 var(--text-xs) var(--font-mono); }
.text-page-body p { margin: 0; font-size: var(--text-lg); color: var(--ink); }
.empty-page p { max-width: 620px; color: var(--ink-2); font-size: var(--text-lg); }

/* ---------- Footer ---------- */
.site-footer { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; margin-top: 40px; padding: 64px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 0; border-top: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.wordmark { font-size: 1.3rem; font-weight: 600; letter-spacing: -.035em; }
.footer-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.footer-wordmark .brand-mark { width: 36px; height: 36px; }
.footer-brand p { max-width: 340px; margin-top: 16px; color: var(--ink-2); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer-links div { display: grid; align-content: start; gap: 10px; }
.footer-links strong { margin-bottom: 4px; color: var(--muted); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.footer-links a { justify-self: start; color: var(--ink-2); font-size: var(--text-sm); transition: color var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.footer-links a:hover { color: var(--accent-deep); transform: translateX(3px); }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); font: var(--text-xs) var(--font-mono); }
.footer-giant { grid-column: 1 / -1; display: flex; justify-content: center; margin: 8px 0 0; padding-bottom: clamp(24px, 4vw, 56px); font-size: clamp(3.5rem, 15vw, 13rem); font-weight: 600; line-height: 1.05; letter-spacing: -.065em; color: var(--accent); user-select: none; pointer-events: none; }
.footer-giant span { display: inline-block; transform: translateY(70%); opacity: 0; transition: transform 1000ms var(--ease-out), opacity 1000ms var(--ease-out); transition-delay: calc(var(--w, 0) * 45ms); }
.footer-giant.is-in span { transform: none; opacity: 1; }

/* ---------- Toast ---------- */
#toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: min(460px, calc(100vw - 40px)); transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none; padding: 13px 18px; border-radius: 14px; background: var(--ink); color: white; font-size: var(--text-sm); box-shadow: var(--shadow-3); transition: opacity var(--dur-2), transform 520ms var(--ease-spring); }
#toast.show { opacity: 1; transform: none; }
#toast.error { background: var(--danger); }

/* ---------- Docs ---------- */
.docs-layout { max-width: 1360px; margin: auto; display: grid; grid-template-columns: 220px minmax(0, 1fr) 190px; gap: 48px; padding: 40px var(--gutter) 80px; }
.docs-sidebar, .docs-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; font-size: var(--text-sm); scrollbar-width: thin; }
.docs-label { display: block; margin-bottom: 22px; font-weight: 600; }
.docs-group { display: block; margin: 22px 0 8px; color: var(--muted); font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.docs-sidebar nav a, .docs-resources a { display: block; padding: 7px 12px; margin: 2px 0; border-radius: 8px; color: var(--ink-2); transition: background var(--dur-1), color var(--dur-1); }
.docs-sidebar nav a:hover { background: var(--surface); color: var(--ink); }
.docs-sidebar nav a[aria-current] { background: var(--accent-soft); color: var(--accent-deep); font-weight: 500; }
.docs-sidebar a:hover, .docs-toc button:hover { color: var(--accent); }
.docs-resources { margin-top: 24px; border-top: 1px solid var(--line); }
.docs-resources a { padding-left: 0; font-size: var(--text-xs); }
.docs-mobile-nav { display: none; }
.docs-content { min-width: 0; max-width: 740px; }
.docs-header { margin: 8px 0 24px; }
.docs-header .eyebrow { font-size: .68rem; }
.docs-title-row { position: relative; margin-top: 14px; }
.docs-header h1 { margin-bottom: 14px; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.04em; }
.docs-copy-page { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: white; color: var(--ink-2); font-size: var(--text-xs); transition: border-color var(--dur-1), color var(--dur-1); }
.docs-copy-page:hover { border-color: var(--accent); color: var(--accent); }
.docs-lead { margin-bottom: 10px; color: var(--ink-2); font-size: 1.06rem; }
.docs-markdown { font-size: var(--text-xs); color: var(--accent); }
.docs-notice { padding: 14px 16px; border: 1px solid rgb(62 97 245 / .2); border-radius: 12px; background: var(--accent-soft); font-size: var(--text-sm); }
.docs-notice strong { color: var(--accent-ink); font-weight: 500; }
.docs-notice p { margin: 4px 0 0; color: var(--ink-2); }
.docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 32px; }
.docs-cards a { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: white; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); }
.docs-cards a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.docs-cards span { font: 500 var(--text-xs) var(--font-mono); color: var(--muted); }
.docs-cards h2 { font-size: 1.05rem; margin: 14px 0 6px; letter-spacing: -.02em; line-height: 1.3; }
.docs-cards p { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.docs-cards b { position: absolute; right: 20px; top: 20px; color: var(--accent); transition: transform var(--dur-2) var(--ease-spring); }
.docs-cards a:hover b { transform: translateX(4px); }
.docs-section { margin-top: 36px; scroll-margin-top: 96px; }
.docs-section h2 { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.02em; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.docs-section p, .docs-section li { font-size: .95rem; line-height: 1.75; overflow-wrap: anywhere; color: var(--ink-2); }
.docs-section ul { padding-left: 22px; }
.docs-section li { padding: 3px 0; }
.docs-section li::marker { color: var(--accent); }
.payout-guide { max-width: var(--wrap); margin: clamp(80px, 10vw, 120px) auto; padding: 0 var(--gutter); }
.payout-guide > * { max-width: 900px; }
.payout-guide header h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 12px 0; }
.payout-guide header p { color: var(--ink-2); }
.payout-guide .docs-section h3 { font-size: 1.3rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.payout-jump-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.payout-jump-links button { font: inherit; font-size: .85rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; text-align: left; transition: border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.payout-jump-links button:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); }
.docs-table-scroll { max-width: 100%; overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 12px; }
.docs-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .88rem; line-height: 1.5; }
.docs-table caption { text-align: left; font-weight: 500; padding: 14px 14px 10px; }
.docs-table th, .docs-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs-table thead th { background: var(--surface); font-weight: 500; color: var(--ink-2); font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.docs-table tbody th { font-weight: 500; }
.docs-table td { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .docs-table-scroll::before { content: "Scroll →"; display: block; padding: 10px 14px 0; color: var(--muted); font-size: .8rem; }
}
.docs-section p code, .docs-section li code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .8rem; color: var(--ink); }
/* Commands never break at their hyphens; a long one scrolls inside its own chip instead. */
.docs-section p code, .docs-section li code { display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap; vertical-align: bottom; overflow-wrap: normal; scrollbar-width: thin; }
.docs-code { min-width: 0; border: 1px solid #1d2a4d; border-radius: 12px; background: #0b1630; color: #dbe3ff; margin: 18px 0; overflow: hidden; }
.docs-code > div { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1d2a4d; padding: 8px 14px; color: #8894b8; font: var(--text-xs) var(--font-mono); }
.docs-code button { background: transparent; border: 0; padding: 4px 8px; border-radius: 6px; color: #b8c3e8; font-size: var(--text-xs); transition: background var(--dur-1); }
.docs-code button:hover { background: #1d2a4d; }
.docs-code pre { margin: 0; padding: 18px; overflow-x: auto; font: .78rem/1.85 var(--font-mono); }
.docs-toc .docs-group { margin-top: 10px; }
.docs-toc button { display: block; width: 100%; text-align: left; padding: 6px 0 6px 12px; border: 0; border-left: 2px solid var(--line); background: transparent; font-size: var(--text-xs); color: var(--muted); transition: color var(--dur-1), border-color var(--dur-2); }
.docs-toc button.current { color: var(--accent-deep); border-left-color: var(--accent); }
.docs-toc > a { display: block; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; font-size: var(--text-xs); color: var(--accent); }
.docs-downloads { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; color: var(--accent); font-size: var(--text-sm); }
.docs-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.docs-pagination a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; font-weight: 500; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.docs-pagination a:hover { border-color: var(--accent); transform: translateY(-2px); }
.docs-pagination a:last-child:not(:first-child) { text-align: right; }
.docs-pagination small { color: var(--muted); font: 400 var(--text-xs) var(--font-mono); }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header nav { position: absolute; top: calc(100% + 6px); left: var(--gutter); right: var(--gutter); display: grid; justify-content: stretch; gap: 2px; padding: 8px; border-radius: 18px; background: white; box-shadow: var(--shadow-3); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; visibility: hidden; transition: opacity var(--dur-2), transform 420ms var(--ease-spring), visibility 0s var(--dur-2); }
  .site-header nav.open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-2), transform 420ms var(--ease-spring), visibility 0s; }
  .site-header nav a { justify-content: start; min-height: 46px; padding: 0 14px; font-size: var(--text-md); }
  .site-header nav a.active { background: var(--accent-soft); }
  .nav-indicator { display: none; }
  .nav-toggle { display: block; order: 3; }
  .header-actions { order: 2; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mechanism-steps { grid-template-columns: repeat(2, 1fr); }
  .mechanism-steps article:last-child { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .fee-table { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .demo-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .story { grid-template-columns: 1fr; }
  .story-visual { display: none; }
  .story-steps { padding: 0; gap: 14px; }
  .story-step { min-height: 0; padding: 0; opacity: 1; transform: none; }
  .story-step h3 { font-size: 1.6rem; }
  .story-step-screen { margin-top: 10px; }
  .story-step-screen .ss-screen { min-height: 440px; }
  .create-layout, .market-layout { grid-template-columns: 1fr; }
  .create-intro { position: static; padding-bottom: 0; }
  .create-form { padding-top: 8px; }
  .docs-layout { grid-template-columns: 1fr; gap: 0; padding-top: 18px; }
  .docs-sidebar { position: static; max-height: none; margin-bottom: 20px; }
  .docs-desktop-nav, .docs-resources, .docs-label { display: none; }
  .docs-mobile-nav { display: block; border: 1px solid var(--line); border-radius: 12px; }
  .docs-mobile-nav summary { cursor: pointer; padding: 12px 14px; font-weight: 500; }
  .docs-mobile-nav nav { padding: 0 8px 10px; }
  .protocol-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .site-header { padding-block: 10px; gap: 10px; }
  .brand > span { display: none; }
  .header-actions { gap: 6px; }
  .header-actions .button.compact { min-height: 36px; padding-inline: 11px; font-size: .8rem; }
  .wallet-status > span { max-width: 92px; }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .hero-copy > p { font-size: var(--text-md); }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1; padding-inline: 16px; }
  .demo-main, .demo-side { padding: 20px; }
  .demo-bar span { font-size: .66rem; }
  .directory-head, .page-heading { flex-direction: column; align-items: start; }
  .directory-head > .button { width: 100%; }
  .market-controls { grid-template-columns: 1fr 1fr; }
  .market-controls .search { grid-column: 1 / -1; }
  .market-grid { grid-template-columns: 1fr; }
  .market-card { min-height: 0; }
  .market-detail-head { flex-direction: column; }
  .market-detail-head + .settlement-rail { overflow-x: auto; }
  .settlement-rail { grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; min-width: 0; }
  .settlement-rail span b { display: none; }
  .settlement-rail span.active b { display: inline; }
  .settlement-rail em { margin: 0 6px; }
  .pool-board { grid-template-columns: 1fr 1fr; }
  .pool-board .pool-total { grid-column: 1 / -1; order: -1; min-height: 110px; }
  .pool-board > div { min-height: 120px; }
  .pool-board strong { font-size: 1.35rem; white-space: nowrap; }
  .pool-board .pool-total strong { font-size: 1.9rem; }
  .two-fields, .two-fields:nth-child(2), .three-fields, .optional-rules > .two-fields { grid-template-columns: 1fr; }
  .optional-rules > summary { flex-wrap: wrap; row-gap: 2px; white-space: nowrap; }
  .optional-rules > summary small { flex-basis: 100%; padding-left: 32px; white-space: normal; }
  .create-intro > dl, .economics > div { grid-template-columns: 1fr 1fr 1fr; }
  .economics > div { grid-template-columns: 1fr 1fr; }
  .form-section { padding: 20px; }
  .outcome-picker, .inline-fields { grid-template-columns: 1fr 1fr; }
  .outcome-picker span { min-height: 56px; padding: 14px; }
  .portfolio-list > a { grid-template-columns: 1fr; }
  .portfolio-list dl { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .activity-list > a { grid-template-columns: 1fr auto; }
  .activity-list > a > span { display: none; }
  .mechanism-steps, .fee-table { grid-template-columns: 1fr; }
  .mechanism-steps article { min-height: 0; }
  .mechanism-steps h2 { padding-top: 28px; }
  .fee-table div { min-height: 160px; }
  .text-page-body article { grid-template-columns: 30px 1fr; padding: 16px; }
  .text-page-body p { font-size: var(--text-md); }
  .site-footer { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .docs-cards, .docs-pagination { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-reveal], .word > span, .footer-giant span { opacity: 1 !important; transform: none !important; }
  .demo { transform: none !important; }
}

.agent-wallet-summary, .agent-wallet-grid, .agent-wallet-status, #app > .agent-wallet-step { width: min(100% - 2 * var(--gutter), calc(var(--wrap) - 2 * var(--gutter))); margin-inline: auto; }
.agent-wallet-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 24px 0; border-block: 1px solid var(--line); }
.agent-wallet-summary code, .agent-grants code { display: block; overflow-wrap: anywhere; font-size: 13px; }
.agent-wallet-summary strong { display: block; font-size: 28px; }
.agent-wallet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 32px; }
.agent-connected-list, .agent-section-title, .agent-wallet-note { width: min(100% - 2 * var(--gutter), calc(var(--wrap) - 2 * var(--gutter))); margin-inline: auto; }
.agent-connected-list { display: grid; gap: 16px; margin-top: 28px; }
.agent-connected { display: grid; gap: 18px; padding: clamp(22px, 3vw, 32px); border: 1px solid #dde4fb; border-radius: 20px; background: linear-gradient(180deg, #f7f9ff, white 70%); box-shadow: var(--shadow-2); }
.agent-connected-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.agent-connected-head .status { padding: 6px 12px; border-radius: 999px; background: white; border: 1px solid var(--line); color: var(--success); }
.agent-connected-head code { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.agent-connected-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.agent-connected-facts div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; min-width: 0; }
.agent-connected-facts dt { color: var(--muted); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.agent-connected-facts dd { margin: 6px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.agent-connected > p { margin: 0; color: var(--ink-2); }
.agent-connected .button { justify-self: start; }
.agent-section-title { margin-top: clamp(40px, 6vw, 64px); margin-bottom: -8px; font-size: 1.3rem; letter-spacing: -.02em; }
.agent-wallet-note { margin-top: 24px; margin-bottom: 48px; color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 760px) { .agent-connected-facts { grid-template-columns: 1fr; } }
.agent-wallet-step { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.agent-wallet-step h2 { margin-block: 12px 20px; }
.pair-flow { width: min(100% - 2 * var(--gutter), 640px); margin: clamp(28px, 5vw, 56px) auto clamp(64px, 9vw, 110px); }
.pair-flow h1 { margin: 12px 0 28px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.04em; }
.pair-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pair-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; transition: opacity var(--dur-2); }
.pair-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.pair-step.done:not(:last-child)::before { background: var(--accent); }
.pair-step-n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: white; color: var(--muted); font: 600 var(--text-sm) var(--font-mono); }
.pair-step.current .pair-step-n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.pair-step.done .pair-step-n { border-color: var(--accent); background: var(--accent); color: white; }
.pair-step.todo { opacity: .5; }
.pair-step h2 { margin: 5px 0 8px; font-size: 1.2rem; letter-spacing: -.02em; }
.pair-step p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; }
.pair-step form { display: grid; gap: 12px; justify-items: start; }
.pair-step .agent-pair-code { display: inline-grid; margin: 4px 0 10px; }
.pair-flow .notice { margin-bottom: 20px; }
.agent-pair-code { display: grid; gap: 6px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #dde4fb; border-radius: 14px; background: #f7f9ff; }
.agent-pair-code span { color: var(--muted); font: 500 var(--text-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.agent-pair-code strong { color: var(--accent-deep); font: 600 clamp(1.6rem, 4vw, 2.1rem)/1.1 var(--font-mono); letter-spacing: .08em; }
.agent-pair-code p { margin: 0 !important; color: var(--ink-2); font-size: var(--text-sm); }
.agent-wallet-step form { display: grid; gap: 16px; margin-top: 20px; }
.agent-wallet-step label { display: grid; gap: 8px; }
.agent-wallet-step p, .agent-wallet-status { line-height: 1.6; margin-block: 12px; }
.agent-wallet-step p, .agent-wallet-step code { overflow-wrap: anywhere; }
.agent-wallet-step input:not([type="checkbox"]), .agent-wallet-step select, .agent-wallet-step textarea { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #ccc; background: transparent; color: inherit; font: inherit; min-width: 0; }
.agent-wallet-step textarea { resize: vertical; }
.agent-wallet-step .agent-action { display: flex; align-items: center; gap: 8px; margin-block: 10px; }
.agent-wallet-step .agent-action input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; padding: 0; margin: 0; accent-color: var(--accent); }
.agent-advanced summary { cursor: pointer; padding-block: 12px; font-weight: 600; }
.agent-advanced[open] { display: grid; gap: 16px; }
#agent-review { max-height: 85vh; overflow-y: auto; }
#agent-review-steps { line-height: 1.6; padding-left: 24px; }
.agent-wallet-step fieldset { padding: 16px; border: 1px solid #ccc; }
.agent-grants > section { border-bottom: 1px solid #ddd; padding-block: 16px; }
.agent-wallet-status { overflow-wrap: anywhere; }
@media (max-width: 760px) { .agent-wallet-grid, .agent-wallet-summary { grid-template-columns: 1fr; } .agent-wallet-step { padding: 18px; } }