/* MIKODES Verified Calls — "Receipts" tokens (v0.3, research/DESIGN-DIRECTION-2026.md §2).
   OKLCH, warm neutral ramp (hue 60). Dark is the default; light is its own ramp, not an inversion.
   Colour meanings never change: up/down only for finished returns, accent (coral) for the one action,
   proof (blue) for seals, warn (amber) for flags. A hex block below serves engines without oklch(). */

@font-face {
  font-family: "Geist";
  src: url("/public/geist-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/public/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback so the swap does not shift the layout. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  /* ---- neutral ramp (dark) ---------------------------------------------------------------- */
  --n-1: oklch(14.2% 0.005 60);
  --n-2: oklch(17.4% 0.006 60);
  --n-3: oklch(20.6% 0.007 60);
  --n-4: oklch(24.2% 0.007 60);
  --n-5: oklch(28.5% 0.008 60);
  --n-6: oklch(33.5% 0.008 60);
  --n-7: oklch(43% 0.008 60);
  --n-8: oklch(54% 0.008 60);
  --n-9: oklch(64% 0.008 60);
  --n-10: oklch(74% 0.006 60);
  --n-11: oklch(85% 0.005 60);
  --n-12: oklch(96.5% 0.004 60);

  /* ---- roles ------------------------------------------------------------------------------ */
  --page: var(--n-1);
  --surface: var(--n-2);
  --raised: var(--n-3);
  --sunken: oklch(12.4% 0.005 60);
  --hover: oklch(100% 0 0 / 0.045);
  --press: oklch(100% 0 0 / 0.08);
  --line: oklch(100% 0 0 / 0.07);
  --line-strong: oklch(100% 0 0 / 0.13);
  --text-1: var(--n-12);
  --text-2: var(--n-11);
  --text-3: var(--n-9);
  --text-4: var(--n-8);
  --edge: inset 0 1px 0 oklch(100% 0 0 / 0.04);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-2: 0 12px 32px -12px oklch(0% 0 0 / 0.6), 0 2px 6px oklch(0% 0 0 / 0.25);
  --shadow-3: 0 24px 64px -16px oklch(0% 0 0 / 0.7), 0 4px 12px oklch(0% 0 0 / 0.3);
  --scrim: oklch(8% 0.005 60 / 0.6);
  --glass: oklch(14.2% 0.005 60 / 0.72);

  /* ---- semantic ---------------------------------------------------------------------------- */
  --up: oklch(79% 0.17 152);
  --down: oklch(70% 0.19 20);
  --flat: var(--n-10);
  --proof: oklch(74% 0.12 250);
  --warn: oklch(83% 0.14 80);
  --fail: oklch(68% 0.2 25);
  --accent-h: 38;
  --up-bg: oklch(79% 0.17 152 / 0.12);
  --down-bg: oklch(70% 0.19 20 / 0.12);
  --proof-bg: oklch(74% 0.12 250 / 0.13);
  --warn-bg: oklch(83% 0.14 80 / 0.12);
  --fail-bg: oklch(68% 0.2 25 / 0.14);
  --open: var(--n-7);

  /* ---- charts ------------------------------------------------------------------------------ */
  --chart-line: var(--n-9);
  --chart-line-active: var(--n-12);
  --chart-grid: oklch(100% 0 0 / 0.06);
  --chart-window: oklch(100% 0 0 / 0.04);
  --heat-0: var(--n-3);
  --heat-1: oklch(40% 0.03 250);
  --heat-2: oklch(52% 0.06 250);
  --heat-3: oklch(64% 0.09 250);
  --heat-4: oklch(78% 0.11 250);

  /* ---- type ---------------------------------------------------------------------------------- */
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(44px, 11vw, 72px);
  --fs-hero-sm: clamp(36px, 8vw, 52px);
  --fs-display: clamp(28px, 4.2vw, 40px);
  --fs-title: clamp(26px, 3.4vw, 34px);
  --fs-h2: 17px;
  --fs-h3: 15px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
  --fs-3xs: 11px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 650;
  --lh: 1.5;
  --track-tight: -0.035em;
  --track-title: -0.022em;

  /* ---- space, radius, layout ----------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --gutter: 16px;
  --gap: 12px;
  --max: 1200px;
  --rail: 340px;
  --bar-h: 56px;
  --bottom-h: 64px;

  /* ---- motion (§5.1) ------------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-chart: 700ms;
  --dur-roll: 450ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --ease-spring: linear(0, 0.38 12%, 0.74 25%, 0.96 40%, 1.03 55%, 1.01 70%, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --gap: 16px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 32px; }
}

/* ---- light: its own ramp ------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --n-1: oklch(98.3% 0.003 60);
    --n-2: oklch(100% 0 0);
    --n-3: oklch(96.6% 0.004 60);
    --n-4: oklch(93.8% 0.005 60);
    --n-5: oklch(90.5% 0.006 60);
    --n-6: oklch(86% 0.007 60);
    --n-7: oklch(76% 0.008 60);
    --n-8: oklch(62% 0.009 60);
    --n-9: oklch(52% 0.01 60);
    --n-10: oklch(42% 0.01 60);
    --n-11: oklch(33% 0.01 60);
    --n-12: oklch(19% 0.01 60);
    --sunken: oklch(95.8% 0.004 60);
    --hover: oklch(20% 0.01 60 / 0.045);
    --press: oklch(20% 0.01 60 / 0.08);
    --line: oklch(20% 0.01 60 / 0.085);
    --line-strong: oklch(20% 0.01 60 / 0.15);
    --edge: 0 0 0 1px oklch(20% 0.01 60 / 0.06);
    --shadow-1: 0 1px 2px oklch(20% 0.01 60 / 0.06);
    --shadow-2: 0 12px 32px -14px oklch(20% 0.01 60 / 0.18), 0 2px 6px oklch(20% 0.01 60 / 0.05);
    --shadow-3: 0 24px 64px -16px oklch(20% 0.01 60 / 0.25), 0 4px 12px oklch(20% 0.01 60 / 0.06);
    --scrim: oklch(20% 0.01 60 / 0.32);
    --glass: oklch(100% 0 0 / 0.78);
    --up: oklch(53% 0.15 152);
    --down: oklch(55% 0.2 22);
    --flat: var(--n-10);
    --proof: oklch(52% 0.16 256);
    --warn: oklch(58% 0.14 68);
    --fail: oklch(54% 0.21 25);
    --up-bg: oklch(53% 0.15 152 / 0.1);
    --down-bg: oklch(55% 0.2 22 / 0.09);
    --proof-bg: oklch(52% 0.16 256 / 0.09);
    --warn-bg: oklch(70% 0.14 75 / 0.16);
    --fail-bg: oklch(54% 0.21 25 / 0.09);
    --chart-grid: oklch(20% 0.01 60 / 0.07);
    --chart-window: oklch(20% 0.01 60 / 0.04);
    --heat-0: var(--n-4);
    --heat-1: oklch(86% 0.04 250);
    --heat-2: oklch(74% 0.08 250);
    --heat-3: oklch(60% 0.12 252);
    --heat-4: oklch(48% 0.15 256);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --n-1: oklch(98.3% 0.003 60);
  --n-2: oklch(100% 0 0);
  --n-3: oklch(96.6% 0.004 60);
  --n-4: oklch(93.8% 0.005 60);
  --n-5: oklch(90.5% 0.006 60);
  --n-6: oklch(86% 0.007 60);
  --n-7: oklch(76% 0.008 60);
  --n-8: oklch(62% 0.009 60);
  --n-9: oklch(52% 0.01 60);
  --n-10: oklch(42% 0.01 60);
  --n-11: oklch(33% 0.01 60);
  --n-12: oklch(19% 0.01 60);
  --sunken: oklch(95.8% 0.004 60);
  --hover: oklch(20% 0.01 60 / 0.045);
  --press: oklch(20% 0.01 60 / 0.08);
  --line: oklch(20% 0.01 60 / 0.085);
  --line-strong: oklch(20% 0.01 60 / 0.15);
  --edge: 0 0 0 1px oklch(20% 0.01 60 / 0.06);
  --shadow-1: 0 1px 2px oklch(20% 0.01 60 / 0.06);
  --shadow-2: 0 12px 32px -14px oklch(20% 0.01 60 / 0.18), 0 2px 6px oklch(20% 0.01 60 / 0.05);
  --shadow-3: 0 24px 64px -16px oklch(20% 0.01 60 / 0.25), 0 4px 12px oklch(20% 0.01 60 / 0.06);
  --scrim: oklch(20% 0.01 60 / 0.32);
  --glass: oklch(100% 0 0 / 0.78);
  --up: oklch(53% 0.15 152);
  --down: oklch(55% 0.2 22);
  --flat: var(--n-10);
  --proof: oklch(52% 0.16 256);
  --warn: oklch(58% 0.14 68);
  --fail: oklch(54% 0.21 25);
  --up-bg: oklch(53% 0.15 152 / 0.1);
  --down-bg: oklch(55% 0.2 22 / 0.09);
  --proof-bg: oklch(52% 0.16 256 / 0.09);
  --warn-bg: oklch(70% 0.14 75 / 0.16);
  --fail-bg: oklch(54% 0.21 25 / 0.09);
  --chart-grid: oklch(20% 0.01 60 / 0.07);
  --chart-window: oklch(20% 0.01 60 / 0.04);
  --heat-0: var(--n-4);
  --heat-1: oklch(86% 0.04 250);
  --heat-2: oklch(74% 0.08 250);
  --heat-3: oklch(60% 0.12 252);
  --heat-4: oklch(48% 0.15 256);
}

/* Accent: derived on <body> so a brand class there (accent-h-N, from the settings) re-tints it. */
body {
  --accent: oklch(72% 0.165 var(--accent-h));
  --accent-hover: oklch(76% 0.16 var(--accent-h));
  --accent-ink: oklch(18% 0.03 var(--accent-h));
  --accent-bg: oklch(72% 0.165 var(--accent-h) / 0.14);
}
:root[data-theme="light"] body {
  --accent: oklch(63% 0.19 var(--accent-h));
  --accent-hover: oklch(58% 0.19 var(--accent-h));
  --accent-ink: oklch(99% 0.01 var(--accent-h));
  --accent-bg: oklch(63% 0.19 var(--accent-h) / 0.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    --accent: oklch(63% 0.19 var(--accent-h));
    --accent-hover: oklch(58% 0.19 var(--accent-h));
    --accent-ink: oklch(99% 0.01 var(--accent-h));
    --accent-bg: oklch(63% 0.19 var(--accent-h) / 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-chart: 0ms; --dur-roll: 0ms; }
}

/* ---- hex fallback for engines without oklch() (roles only; the ramp is not used directly) ----- */
@supports not (color: oklch(50% 0.1 60)) {
  :root {
    --n-1: #0f0e0d; --n-2: #171615; --n-3: #1f1e1c; --n-4: #282624; --n-5: #312f2d; --n-6: #3c3a37;
    --n-7: #55524f; --n-8: #75726e; --n-9: #93908c; --n-10: #afaca8; --n-11: #d2d0cd; --n-12: #f4f3f1;
    --sunken: #0b0a09; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.13);
    --hover: rgba(255,255,255,.045); --press: rgba(255,255,255,.08); --glass: rgba(15,14,13,.72);
    --up: #3fd98a; --down: #ff6b72; --proof: #7fb2ff; --warn: #f5c451; --fail: #ff5d5d;
    --up-bg: rgba(63,217,138,.12); --down-bg: rgba(255,107,114,.12); --proof-bg: rgba(127,178,255,.13);
    --warn-bg: rgba(245,196,81,.12); --fail-bg: rgba(255,93,93,.14);
    --chart-grid: rgba(255,255,255,.06); --chart-window: rgba(255,255,255,.04);
    --heat-1: #2d3a4f; --heat-2: #3f5577; --heat-3: #5e7ca8; --heat-4: #93b3dd;
  }
  :root[data-theme="light"] {
    --n-1: #faf9f8; --n-2: #ffffff; --n-3: #f4f3f1; --n-4: #ecebe9; --n-5: #e3e1de; --n-6: #d6d4d1;
    --n-7: #b9b6b2; --n-8: #8f8b87; --n-9: #74706c; --n-10: #5a5754; --n-11: #43403d; --n-12: #1e1c1a;
    --sunken: #f1f0ee; --line: rgba(30,28,26,.085); --line-strong: rgba(30,28,26,.15);
    --hover: rgba(30,28,26,.045); --press: rgba(30,28,26,.08); --glass: rgba(255,255,255,.78);
    --up: #1a8a4f; --down: #cf2e3f; --proof: #2f63c9; --warn: #9a6b0c; --fail: #c42a2a;
  }
  body { --accent: #ff8a5c; --accent-hover: #ff9a70; --accent-ink: #231208; --accent-bg: rgba(255,138,92,.14); }
  :root[data-theme="light"] body { --accent: #e8643a; --accent-hover: #d4552d; --accent-ink: #fffaf7; --accent-bg: rgba(232,100,58,.1); }
}

/* MIKODES Verified Calls — "Receipts" components (v0.3). One class vocabulary for every page;
   documented in src/web/components/README.md. No inline styles anywhere (CSP): sizes/positions are
   classes, colours are tokens. */

/* ============================== base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 64px); }
body {
  margin: 0; min-height: 100dvh; background: var(--page); color: var(--text-1);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh);
  font-feature-settings: "calt", "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: var(--fw-semi); letter-spacing: var(--track-title); line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
:where(p, dd, td, li, .notice, .chain-detail, .step-desc, .hero-sub) a:not([class]) { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast); }
:where(p, dd, td, li, .notice, .chain-detail, .step-desc, .hero-sub) a:not([class]):hover { text-decoration-color: currentColor; }
:where(.seg, .footer-links, .topnav, .bottomnav, .toc) a { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { padding: 1px 5px; border-radius: 5px; background: var(--raised); }
strong, b { font-weight: var(--fw-semi); }
::selection { background: color-mix(in oklch, var(--proof) 35%, transparent); }
:focus-visible { outline: 2px solid var(--proof); outline-offset: 2px; border-radius: 6px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; letter-spacing: -0.01em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-sm); background: var(--text-1); color: var(--page); font-weight: var(--fw-semi); }
.skip:focus { top: 12px; }

/* text roles */
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.faint { color: var(--text-4); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.tiny { font-size: var(--fs-2xs); }
.strong-1 { color: var(--text-1); font-weight: var(--fw-semi); }
.up, .pos { color: var(--up); }
.down, .neg { color: var(--down); }
.zero { color: var(--flat); }
.warn-text { color: var(--warn); }
.proof-text { color: var(--proof); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }
.label { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0.005em; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.ico-inline { display: inline-block; vertical-align: -2px; margin-left: 2px; }

/* ============================== layout primitives ============================== */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-6 { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack-xl { display: flex; flex-direction: column; gap: var(--sp-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.self-start { align-self: flex-start; }
.span-all { grid-column: 1 / -1; }
.ta-right { text-align: right; }

/* ============================== app bar ============================== */
.appbar {
  position: sticky; top: 0; z-index: 40; height: var(--bar-h);
  background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-base), background var(--dur-base);
}
.appbar[data-scrolled] { border-bottom-color: var(--line); }
.appbar-inner { height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-semi); font-size: 15px; letter-spacing: -0.015em; min-width: 0; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--text-1); color: var(--page); flex: none; }
.brand-mark svg { width: 15px; height: 15px; }
.brand-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; }
.appbar-spacer { flex: 1 1 auto; }
.topnav { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--hover); }
.topnav a { padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-3); transition: color var(--dur-fast), background var(--dur-fast); }
.topnav a:hover { color: var(--text-1); }
.topnav a[aria-current="page"] { color: var(--text-1); background: var(--raised); box-shadow: var(--shadow-1), var(--edge); }
@media (min-width: 900px) { .topnav { display: flex; } }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text-2); transition: background var(--dur-fast), color var(--dur-fast), transform 80ms; flex: none; }
.iconbtn:hover { background: var(--hover); color: var(--text-1); }
.iconbtn:active { transform: scale(0.96); }
.iconbtn svg { width: 18px; height: 18px; }
.theme-ico-light { display: none; }
:root[data-theme="light"] .theme-ico-light { display: block; }
:root[data-theme="light"] .theme-ico-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-ico-light { display: block; }
  :root:not([data-theme="dark"]) .theme-ico-dark { display: none; }
}
.searchslot { display: none; position: relative; }
.searchslot input { width: 240px; height: 36px; padding: 0 12px 0 34px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--hover); font-size: var(--fs-sm); transition: width var(--dur-base) var(--ease-out), border-color var(--dur-fast); }
.searchslot input:focus { width: 300px; outline: none; border-color: var(--line-strong); background: var(--surface); }
.searchslot svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.searchslot kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-4); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; }
@media (min-width: 700px) { .searchslot { display: block; } }

/* demo marker: quiet, persistent, explicit */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px var(--gutter); font-size: var(--fs-2xs); color: var(--text-2); background: var(--warn-bg); border-bottom: 1px solid color-mix(in oklch, var(--warn) 25%, transparent); text-align: center; }
.demo-banner strong { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: var(--fw-semi); }
.demo-banner strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

/* floating bottom nav (phone) */
.bottomnav {
  position: fixed; z-index: 45; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 2px; padding: 5px; border-radius: 22px; width: max-content; max-width: calc(100vw - 20px);
  background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px);
  border: 1px solid var(--line); box-shadow: var(--shadow-3);
}
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 50px; padding: 4px 10px; border-radius: 17px; color: var(--text-3); font-size: 11px; font-weight: var(--fw-medium); transition: color var(--dur-fast), background var(--dur-fast); }
.bottomnav a svg { width: 21px; height: 21px; }
.bottomnav a[aria-current="page"] { color: var(--text-1); background: var(--press); font-weight: var(--fw-semi); }
@media (min-width: 900px) { .bottomnav { display: none; } }

/* ============================== surfaces ============================== */
.card { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--edge); border: 1px solid var(--line); min-width: 0; }
.card--lg { padding: var(--sp-5); }
@media (min-width: 768px) { .card--lg { padding: var(--sp-6); } }
.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: var(--sp-3) var(--sp-4); }
.card--sunken { background: var(--sunken); box-shadow: none; }
.card--plain { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head.flush { margin-bottom: 0; }
.card-head h2, .card-head h3 { font-size: var(--fs-h3); }
.card-body { color: var(--text-2); font-size: var(--fs-sm); }
.head-pad { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.h-md { font-size: var(--fs-h3); }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head > span, .sec-head .meta { font-size: var(--fs-xs); color: var(--text-3); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.section-head > span { font-size: var(--fs-xs); color: var(--text-3); }

/* ============================== chips (and v0.2 badges) ============================== */
.chip, .badge {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
  color: var(--text-2); background: var(--hover); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.chip svg, .badge svg { width: 12px; height: 12px; }
.chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--proof, .badge--sealed { color: var(--proof); background: var(--proof-bg); border-color: transparent; }
.chip--warn, .badge--exit-liq, .badge--flag { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip--up { color: var(--up); background: var(--up-bg); border-color: transparent; }
.chip--down { color: var(--down); background: var(--down-bg); border-color: transparent; }
.chip--fail, .badge--failed { color: var(--fail); background: var(--fail-bg); border-color: transparent; }
.chip--open, .badge--open { color: var(--text-2); background: transparent; border-style: dashed; border-color: var(--line-strong); }
.chip--muted, .badge--pending, .badge--not-checked, .badge--unpriceable { color: var(--text-3); background: transparent; }
.badge--reshill, .badge--final { color: var(--text-2); }
.chip--demo { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip--accent { color: var(--accent); background: var(--accent-bg); border-color: transparent; }
.chip--lg { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }

/* ============================== buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform 80ms, box-shadow var(--dur-fast);
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.18) inset, 0 6px 18px -8px var(--accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--raised); color: var(--text-1); border-color: var(--line); box-shadow: var(--edge); }
.btn--secondary:hover { background: var(--n-4); border-color: var(--line-strong); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--hover); color: var(--text-1); }
.btn--danger { background: var(--fail-bg); color: var(--fail); }
.btn--sm { height: 32px; padding: 0 12px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--lg { height: 48px; padding: 0 20px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; pointer-events: none; }
.btn .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--text-1); color: var(--page); font-size: 11px; font-weight: var(--fw-bold); }

/* ============================== segmented control ============================== */
.seg { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--hover); border: 1px solid var(--line); }
.seg a, .seg button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-3); font-size: var(--fs-sm); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; transition: color var(--dur-fast), background var(--dur-base) var(--ease-out); }
.seg a:hover { color: var(--text-1); }
.seg a[aria-current="true"], .seg a[aria-current="page"], .seg button[aria-pressed="true"] { color: var(--text-1); background: var(--raised); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
:root[data-theme="light"] .seg a[aria-current="true"], :root[data-theme="light"] .seg a[aria-current="page"] { background: var(--n-2); color: var(--n-12); box-shadow: 0 1px 3px oklch(20% 0.01 60 / 0.14), 0 0 0 1px oklch(20% 0.01 60 / 0.08); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .seg a[aria-current="true"], :root:not([data-theme="dark"]) .seg a[aria-current="page"] { background: var(--n-2); color: var(--n-12); box-shadow: 0 1px 3px oklch(20% 0.01 60 / 0.14), 0 0 0 1px oklch(20% 0.01 60 / 0.08); }
}
.seg .seg-count { font-size: 11px; color: var(--text-4); font-weight: var(--fw-medium); }
.seg--sm a { height: 28px; min-width: 44px; padding: 0 10px; font-size: var(--fs-xs); }

/* ============================== figures ============================== */
.hero { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-num { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: 0.95; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; white-space: nowrap; }
.hero-num--sm { font-size: var(--fs-hero-sm); }
.hero-num.is-unknown { color: var(--text-4); }
.hero-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-medium); }
.hero-sub { font-size: var(--fs-xs); color: var(--text-3); }
.hero-state { display: inline-flex; align-items: center; gap: 6px; }

/* stat tiles + bento */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); transition: background var(--dur-fast), border-color var(--dur-fast); }
a.tile:hover { background: var(--raised); border-color: var(--line-strong); }
.tile--span-2 { grid-column: span 2; }
.tile--span-3 { grid-column: span 2; }
.tile--span-4 { grid-column: 1 / -1; }
@media (min-width: 768px) { .tile--span-3 { grid-column: span 3; } }
.tile-label { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-3); }
.tile-value { font-size: 26px; font-weight: var(--fw-semi); letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-value--sm { font-size: 20px; }
.tile-sub { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.4; }
.tile--muted .tile-value { color: var(--text-3); font-weight: var(--fw-medium); }
.tile--warn .tile-value { color: var(--warn); }
.tile--up .tile-value { color: var(--up); }
.tile--down .tile-value { color: var(--down); }
.tile-chart { margin-top: auto; padding-top: var(--sp-2); }

/* v0.2 stat grid (admin keeps using it) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (min-width: 768px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.stat--wide { grid-column: 1 / -1; }
.stat-label { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-medium); }
.stat-value { font-size: 24px; font-weight: var(--fw-semi); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-value--md { font-size: 18px; }
.stat-value--plain { font-weight: var(--fw-medium); }
.stat-sub { font-size: var(--fs-2xs); color: var(--text-3); }

/* ============================== avatar ============================== */
.avatar {
  --h: 250; --sz: 40px;
  display: inline-grid; place-items: center; flex: none; width: var(--sz); height: var(--sz); border-radius: 50%;
  background: oklch(40% 0.085 var(--h)); color: oklch(94% 0.03 var(--h));
  font-size: calc(var(--sz) * 0.36); font-weight: var(--fw-semi); letter-spacing: -0.02em; line-height: 1;
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.08);
}
:root[data-theme="light"] .avatar { background: oklch(90% 0.05 var(--h)); color: oklch(36% 0.1 var(--h)); box-shadow: inset 0 0 0 1px oklch(20% 0.01 60 / 0.06); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .avatar { background: oklch(90% 0.05 var(--h)); color: oklch(36% 0.1 var(--h)); box-shadow: inset 0 0 0 1px oklch(20% 0.01 60 / 0.06); } }
.avatar--channel { border-radius: 30%; }
.avatar--24, .avatar--sm { --sz: 28px; }
.avatar--24 { --sz: 24px; }
.avatar--32 { --sz: 32px; }
.avatar--40 { --sz: 40px; }
.avatar--48 { --sz: 48px; }
.avatar--64, .avatar--lg { --sz: 64px; }
.avatar--88 { --sz: 88px; }

.caller { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.caller-text { display: flex; flex-direction: column; min-width: 0; }
.caller-name { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caller-meta { font-size: var(--fs-2xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================== outcome strip ============================== */
.strip { display: inline-flex; align-items: center; min-width: 0; }
.strip svg { height: 16px; width: auto; overflow: visible; }
.strip--sm svg { height: 12px; }
.strip rect { rx: 1.5px; }
.strip .t-up { fill: var(--up); }
.strip .t-down { fill: var(--down); }
.strip .t-flat { fill: var(--n-8); }
.strip .t-open { fill: none; stroke: var(--n-7); stroke-width: 1; stroke-dasharray: 2 1.5; }
.strip .t-unp { fill: var(--n-5); }
.strip .t-reshill { fill: var(--n-6); }
.strip-empty { color: var(--text-4); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: no-preference) {
  .strip rect { transform-box: fill-box; transform-origin: 50% 100%; animation: tick-in var(--dur-slow) var(--ease-out) both; }
  .strip rect:nth-child(4n+1) { animation-delay: 20ms; } .strip rect:nth-child(4n+2) { animation-delay: 50ms; }
  .strip rect:nth-child(4n+3) { animation-delay: 80ms; } .strip rect:nth-child(4n) { animation-delay: 110ms; }
}
@keyframes tick-in { from { transform: scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================== podium ============================== */
.podium { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .podium { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); } }
.podium-li { display: flex; min-width: 0; }
.podium-tile { flex: 1 1 auto; position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.podium-tile:hover { background: var(--raised); border-color: var(--line-strong); }
.podium-tile--1 { background: var(--raised); }
.podium-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 26px; }
.podium-top { flex-direction: column; align-items: flex-start; }
.podium-top .caller-text { max-width: 100%; }
.podium-top .caller-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; font-size: var(--fs-h2); }
.podium-meta { margin-top: auto; }
.podium-rank { position: absolute; top: var(--sp-5); right: var(--sp-5); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); font-variant-numeric: tabular-nums; }
.podium-fig { font-size: 40px; font-weight: var(--fw-bold); letter-spacing: var(--track-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.podium-tile--1 .podium-fig { font-size: clamp(44px, 5vw, 56px); }
.podium-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.podium-meta b { color: var(--text-2); font-weight: var(--fw-semi); }
.podium-flags { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 639px) {
  .podium { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .podium::-webkit-scrollbar { display: none; }
  .podium-tile { scroll-snap-align: start; }
  .podium-tile--1 { grid-column: auto; }
}

/* ============================== caller rows (leaderboard list) ============================== */
/* Phone: two lines. Real columns once the LIST is ≥ 720 px wide (container query, QA-1). */
.lb-wrap { container-type: inline-size; container-name: lb; }
.lb { display: flex; flex-direction: column; }
.lb-head { display: none; }
.lb-row { display: grid; align-items: center; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank id fig" "rank strip strip"; gap: 8px 12px; padding: 14px var(--sp-4); border-top: 1px solid var(--line); transition: background var(--dur-fast); }
.lb-row:first-child { border-top: 0; }
.lb-row:hover { background: var(--hover); }
.lb-rank { grid-area: rank; align-self: start; padding-top: 10px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-3); font-variant-numeric: tabular-nums; }
.lb-id { grid-area: id; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-id .caller-name { font-size: var(--fs-body); }
.lb-strip { grid-area: strip; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 52px; font-size: var(--fs-2xs); color: var(--text-3); flex-wrap: wrap; }
.lb-fig { grid-area: fig; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lb-fig .num { font-size: 18px; font-weight: var(--fw-semi); letter-spacing: -0.02em; }
.lb-fig .lbl { font-size: 11px; color: var(--text-3); }
.lb-flags--inline { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lb-flags--meta { display: none; }
.lb-col { display: none; }
@container lb (min-width: 720px) {
  .lb-head, .lb-row { grid-template-columns: 24px minmax(190px, 1fr) 122px 84px 66px 44px 40px 40px; grid-template-areas: none; }
  .lb-head { display: grid; gap: 12px; align-items: center; padding: 11px var(--sp-5); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-3); border-bottom: 1px solid var(--line); }
  .lb-head .r { text-align: right; }
  .lb-row { gap: 12px; padding: 12px var(--sp-5); min-height: 64px; }
  .lb-rank, .lb-id, .lb-strip, .lb-fig { grid-area: auto; }
  .lb-rank { align-self: center; padding-top: 0; }
  .lb-strip { padding-left: 0; }
  .lb-strip .lb-n, .lb-flags--inline { display: none; }
  .lb-fig .lbl { display: none; }
  .lb-col { display: block; text-align: right; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
  .lb-flags--meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
}

/* compact list rows (not ranked yet, seals, calls) */
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px var(--sp-4); border-top: 1px solid var(--line); transition: background var(--dur-fast); }
.mini-row:first-child { border-top: 0; }
a.mini-row:hover { background: var(--hover); }

/* ============================== proof chain ============================== */
.chain { display: flex; flex-direction: column; }
.chain-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding-bottom: var(--sp-4); }
.chain-step:last-child { padding-bottom: 0; }
.chain-step::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; border-radius: 1px; background: var(--line-strong); }
.chain-step:last-child::before { display: none; }
.chain-step[data-state="done"]::before { background: color-mix(in oklch, var(--proof) 55%, transparent); }
.chain-mark { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-3); }
.chain-mark svg { width: 13px; height: 13px; }
.chain-step[data-state="done"] .chain-mark { background: var(--proof); border-color: var(--proof); color: var(--page); }
.chain-step[data-state="current"] .chain-mark { border-color: var(--proof); color: var(--proof); }
.chain-step[data-state="current"] .chain-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--proof); }
.chain-step[data-state="failed"] .chain-mark { background: var(--fail); border-color: var(--fail); color: var(--page); }
.chain-step[data-state="na"] .chain-mark { border-style: dashed; }
.chain-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 24px; }
.chain-title time, .chain-title .t { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-regular); }
.chain-step[data-state="pending"] .chain-title, .chain-step[data-state="na"] .chain-title { color: var(--text-3); }
.chain-detail { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.chain-detail a { color: var(--text-2); }

/* ============================== steps (verify / link) ============================== */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--raised); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semi); border: 1px solid var(--line); transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-spring); }
.step[data-state="ok"] .step-mark { background: var(--proof); color: var(--page); border-color: transparent; }
.step[data-state="fail"] .step-mark { background: var(--fail); color: var(--page); border-color: transparent; }
.step[data-state="pending"] .step-mark { color: var(--text-3); }
.step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-title { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.step-desc { color: var(--text-3); font-size: var(--fs-xs); }
.step[data-state="fail"] .step-title { color: var(--fail); }
@media (prefers-reduced-motion: no-preference) {
  .step[data-state="ok"] .step-mark, .step[data-state="fail"] .step-mark { animation: pop var(--dur-slow) var(--ease-spring); }
}
@keyframes pop { from { transform: scale(0.6); } to { transform: none; } }

/* ============================== key/value (QA-3: values wrap) ============================== */
.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 8px 16px; font-size: var(--fs-sm); }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text-1); text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv--stack { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kv--stack dd { text-align: left; margin-bottom: 8px; }
.kv .sub { display: block; font-size: var(--fs-2xs); color: var(--text-3); }

/* ============================== code, hash ============================== */
.addr { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: -0.01em; }
.hash { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--text-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; word-break: break-all; }
.hash b { display: inline-block; min-width: 64px; margin-right: 8px; color: var(--text-3); font-weight: var(--fw-medium); }
.codeblock { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto; white-space: pre; }

/* ============================== notices ============================== */
.notice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r-md); background: var(--hover); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); }
.notice > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); }
.notice strong { color: var(--text-1); }
.notice--warn { background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 22%, transparent); }
.notice--warn > svg { color: var(--warn); }
.notice--fail { background: var(--fail-bg); border-color: color-mix(in oklch, var(--fail) 25%, transparent); }
.notice--fail > svg { color: var(--fail); }
.notice--proof { background: var(--proof-bg); border-color: color-mix(in oklch, var(--proof) 22%, transparent); }
.notice--proof > svg { color: var(--proof); }
.notice[hidden] { display: none; }

/* ============================== empty states that teach ============================== */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
.empty h2 { font-size: 19px; }
.empty p { color: var(--text-2); font-size: var(--fs-sm); max-width: 60ch; }
.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--raised); color: var(--text-2); border: 1px solid var(--line); }
.empty-icon svg { width: 22px; height: 22px; }
.checklist { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 560px; counter-reset: ck; }
.checklist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); counter-increment: ck; }
.checklist li:first-child { border-top: 0; }
.checklist .ck { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--line-strong); color: var(--text-3); font-size: 11px; font-weight: var(--fw-semi); }
.checklist .ck::before { content: counter(ck); }
.checklist li[data-done] .ck { border: 0; background: var(--up); color: var(--page); }
.checklist li[data-done] .ck::before { content: "✓"; }
.checklist .ck-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.checklist li[data-done] .ck-label { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist .ck-hint { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-regular); }

/* ============================== skeletons ============================== */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--raised) 0%, var(--n-4) 50%, var(--raised) 100%); background-size: 200% 100%; }
.sk-line { height: 12px; }
.sk-line--lg { height: 40px; width: 55%; border-radius: 10px; }
.sk-fig { margin-bottom: 6px; }
.sk-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sk-rows .sk:nth-child(2) { width: 80%; } .sk-rows .sk:nth-child(3) { width: 60%; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: shimmer 1.4s linear infinite; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================== toasts ============================== */
.toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
@media (min-width: 900px) { .toasts { left: auto; right: 24px; top: calc(var(--bar-h) + 16px); bottom: auto; transform: none; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--n-12); color: var(--n-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-3); }
.toast svg { width: 16px; height: 16px; flex: none; }
.toast--warn svg { color: var(--warn); } .toast--fail svg { color: var(--fail); } .toast--ok svg { color: var(--up); }
.toast .toast-field { width: 100%; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 0; background: var(--n-11); color: var(--n-1); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in var(--dur-base) var(--ease-out); } .toast[data-leaving] { animation: toast-out 160ms ease-in forwards; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ============================== bottom sheet (dialog) ============================== */
.sheet { padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: 24px 24px 0 0; background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-3); overflow: auto; }
.sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 6px 20px; }
.sheet-head h2 { font-size: 18px; }
.sheet-body { padding: 8px 20px 12px; display: flex; flex-direction: column; gap: var(--sp-5); }
.sheet-foot { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.sheet-foot .btn { flex: 1 1 0; }
@media (min-width: 700px) { .sheet { margin: auto; width: 480px; border-radius: 24px; } .sheet-grip { display: none; } .sheet-foot { padding-bottom: 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up var(--dur-slow) var(--ease-spring); }
  .sheet[open]::backdrop { animation: fade-in var(--dur-base) ease-out; }
  @media (min-width: 700px) { .sheet[open] { animation: pop-in var(--dur-base) var(--ease-out); } }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.4; } }
@keyframes pop-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ============================== forms ============================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .field-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-2); }
.field-hint { font-size: var(--fs-2xs); color: var(--text-3); }
.input, .select { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--sunken); color: var(--text-1); font-size: var(--fs-sm); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder { color: var(--text-4); }
.input:focus, .select:focus { outline: none; border-color: var(--proof); box-shadow: 0 0 0 3px var(--proof-bg); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.toggle { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunken); cursor: pointer; }
.toggle input { appearance: none; flex: none; width: 38px; height: 22px; margin: 1px 0 0; border-radius: 11px; background: var(--n-6); position: relative; cursor: pointer; transition: background var(--dur-fast); }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--n-12); transition: transform var(--dur-base) var(--ease-spring); }
.toggle input:checked { background: var(--proof); }
.toggle input:checked::after { transform: translateX(16px); background: #fff; }
.toggle .toggle-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.toggle .toggle-text span { font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-regular); }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1 1 auto; }

/* ============================== tables ============================== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-3); padding: 10px var(--sp-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 11px var(--sp-4); border-top: 1px solid var(--line); vertical-align: top; }
.table tr:first-child td { border-top: 0; }
.table .num { text-align: right; }

/* ============================== folds ============================== */
.fold { border-top: 1px solid var(--line); }
.fold:first-child { border-top: 0; }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.fold > summary .meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-regular); }
.fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-base) var(--ease-out); }
.fold[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.fold-body { padding: 0 0 14px; }

/* ============================== price chart (.pchart) ============================== */
.pchart { position: relative; height: 260px; margin: 8px 0 0; }
@media (min-width: 768px) { .pchart { height: 320px; } }
.pchart-plot { position: absolute; inset: 22px 0 6px 0; }
.pchart-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pchart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.pchart .window { fill: var(--chart-window); }
.pchart .line { fill: none; stroke: var(--chart-line); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.55; }
.pchart .line-active { fill: none; stroke: var(--chart-line-active); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pchart .guide { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 3 4; }
.pchart .base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
@media (prefers-reduced-motion: no-preference) {
  .pchart .line-active { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--dur-chart) var(--ease-out) forwards; }
  .pchart-pin { animation: pin-in var(--dur-base) var(--ease-out) both; animation-delay: 420ms; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pin-in { from { opacity: 0; } }
.pchart-y { position: absolute; left: 0; transform: translateY(-50%); font-size: 10.5px; color: var(--text-4); font-variant-numeric: tabular-nums; padding-right: 4px; background: var(--surface); border-radius: 4px; }
.pchart-pin { position: absolute; width: 0; height: 0; }
.pchart-dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--chart-line-active); box-shadow: 0 0 0 3px var(--surface); }
.pchart-dot--peak { background: var(--surface); border: 1.5px dashed var(--text-3); box-shadow: none; }
.pchart-dot--live { background: var(--proof); }
@media (prefers-reduced-motion: no-preference) { .pchart-dot--live::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--proof); animation: live 2s ease-out infinite; } }
@keyframes live { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
.pchart-tag { position: absolute; left: 10px; top: 8px; padding: 3px 8px; border-radius: 8px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; color: var(--text-2); background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; }
.pchart-tag b { color: var(--text-1); font-weight: var(--fw-semi); }
.pchart-tag--muted { color: var(--text-3); background: var(--surface); border-style: dashed; box-shadow: none; }
.pchart-tag.tag-up { top: -34px; }
.pchart-tag.tag-left { left: auto; right: 10px; }
.pchart-tag.tag-peak { left: 12px; top: -12px; }
.pchart-tag.tag-peak.tag-left { left: auto; right: 12px; }
.pchart-tag.tag-peak.tag-up { top: -34px; }
.pchart-tag.tag-down { top: 10px; }
.pchart-axis { position: relative; height: 22px; }
.pchart-x { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 10.5px; color: var(--text-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pchart-x--start { transform: none; }
.pchart-x--end { transform: translateX(-100%); }
.pchart-off { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-2xs); color: var(--text-3); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.chart-legend .k-entry { background: var(--chart-line-active); }
.chart-legend .k-peak { border: 1.5px dashed var(--text-3); }
.chart-legend .k-window { border-radius: 3px; background: var(--line-strong); }

/* ============================== sparkline, results plot, heatmap ============================== */
.spark { width: 100%; height: 32px; overflow: visible; }
.spark path { fill: none; stroke: var(--n-9); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark--up path { stroke: var(--up); } .spark--down path { stroke: var(--down); }

.rplot { position: relative; width: 100%; }
.rplot svg { width: 100%; height: auto; overflow: visible; }
.rplot .axis { stroke: var(--line-strong); stroke-width: 1; }
.rplot .zero { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 2 3; }
.rplot .band-hit { fill: var(--up-bg); }
.rplot .band-rug { fill: var(--down-bg); }
.rplot .med { stroke: var(--text-1); stroke-width: 2; }
.rplot .d-up { fill: var(--up); } .rplot .d-down { fill: var(--down); } .rplot .d-flat { fill: var(--n-8); }
.rplot circle { opacity: 0.85; }
.rplot text { font-family: var(--font-sans); font-size: 10.5px; fill: var(--text-4); font-variant-numeric: tabular-nums; }
.rplot .med-label { fill: var(--text-1); font-weight: 600; font-size: 11px; }

.heat { width: 100%; overflow-x: auto; }
.heat svg { width: 100%; max-width: 620px; height: auto; min-width: 280px; }
.heat rect { rx: 2.5px; }
.heat .h0 { fill: var(--heat-0); } .heat .h1 { fill: var(--heat-1); } .heat .h2 { fill: var(--heat-2); } .heat .h3 { fill: var(--heat-3); } .heat .h4 { fill: var(--heat-4); }
.heat .today { stroke: var(--text-1); stroke-width: 1.2; }
.heat text { font-family: var(--font-sans); font-size: 7.5px; fill: var(--text-4); }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--text-3); }
.heat-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.heat-legend .h0 { background: var(--heat-0); } .heat-legend .h1 { background: var(--heat-1); } .heat-legend .h2 { background: var(--heat-2); } .heat-legend .h3 { background: var(--heat-3); } .heat-legend .h4 { background: var(--heat-4); }

/* ============================== token mark ============================== */
.token-dot { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semi); color: var(--text-2); }
.token-dot--lg { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
.token-dot--sm { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

/* ============================== progress ring (open windows) ============================== */
.ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.ring .bg { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.ring .fg { fill: none; stroke: var(--text-2); stroke-width: 3; stroke-linecap: round; }
.meter { height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--text-2); }

/* MIKODES Verified Calls — page layouts for the Receipts public pages (v0.3) + generated utility classes.
   Components are in components.css, tokens in tokens.css. */

/* ============================== shell ============================== */
.page { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--sp-5) var(--gutter) calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .page { padding-top: var(--sp-7); padding-bottom: var(--sp-9); } }
.page--narrow { max-width: calc(640px + 2 * var(--gutter)); }
.page--wide { max-width: none; }
.layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.layout > .main { min-width: 0; }
.rail { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--sp-7); }
  .rail { position: sticky; top: calc(var(--bar-h) + 20px); }
}
.btn--solid { background: var(--text-1); color: var(--page); }
.btn--solid:hover { background: var(--n-11); }

.footer { border-top: 1px solid var(--line); padding: var(--sp-6) var(--gutter) calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .footer { padding-bottom: var(--sp-7); } }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 900px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--sp-7); } }
.footer-note { font-size: var(--fs-xs); color: var(--text-3); max-width: 60ch; }
.footer-note strong { color: var(--text-2); font-weight: var(--fw-semi); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--text-3); }
.footer-links a:hover { color: var(--text-1); }

/* page head */
.phead { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.phead h1 { font-size: var(--fs-title); letter-spacing: -0.03em; font-weight: var(--fw-semi); }
.lede { color: var(--text-2); font-size: var(--fs-body); max-width: 64ch; }
@media (min-width: 900px) { .lede { font-size: 16px; } }
.phead--center { align-items: center; text-align: center; max-width: 720px; margin: 0 auto var(--sp-5); }
.phead--center .lede { margin: 0 auto; }
.status-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); margin-top: 2px; }
.status-item { display: inline-flex; align-items: center; gap: 6px; }
.status-item svg { width: 14px; height: 14px; }

/* sticky toolbar under the app bar (window switcher at the thumb) */
.toolbar { position: sticky; top: var(--bar-h); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); background: transparent; transition: background-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease; }
.toolbar.is-stuck { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.toolbar-meta { margin-left: auto; }
@media (max-width: 520px) { .toolbar-meta { display: none; } }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.link-more:hover { color: var(--text-1); }
.link-more svg { width: 14px; height: 14px; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-3); font-weight: var(--fw-medium); margin-bottom: var(--sp-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back:hover { color: var(--text-1); }
.back svg { width: 15px; height: 15px; }

.mini-steps { display: flex; flex-direction: column; gap: 12px; }
.mini-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: var(--fs-sm); }
.mini-steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.mini-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); font-size: 11px; font-weight: var(--fw-semi); color: var(--text-2); }

/* ============================== leaderboard ============================== */
.board { overflow: visible; }
.board .lb-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.board-foot { padding: 0 4px; }
.ne > .ne-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--sp-4); font-size: var(--fs-sm); }
.ne > .ne-sum::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); margin-left: 8px; transition: transform var(--dur-base); }
.ne[open] > .ne-sum::after { transform: rotate(225deg); }
.ne[open] > .ne-sum { border-bottom: 1px solid var(--line); }
.ne .lb-row:first-child { border-top: 0; }

/* ============================== caller profile ============================== */
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: var(--sp-4); }
.profile-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profile-name { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.profile-meta { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
.profile-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (min-width: 700px) { .profile-head { grid-template-columns: auto minmax(0, 1fr) auto; } .profile-actions { grid-column: auto; } }
.profile-page .toolbar { margin-bottom: var(--sp-4); }
.hero-tile { gap: var(--sp-5); padding: var(--sp-5); }
@media (min-width: 768px) { .hero-tile { padding: var(--sp-6); } }
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }
.hero-side { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.hero-side-fig { font-size: 24px; font-weight: var(--fw-semi); letter-spacing: -0.02em; }
.rplot-wrap { display: flex; flex-direction: column; gap: 8px; }
.rplot-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rplot-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lg-dot.d-up { background: var(--up); } .lg-dot.d-down { background: var(--down); }
.lg-line { width: 2px; height: 12px; background: var(--text-1); display: inline-block; }
.lg-band { width: 12px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-band.hit { background: var(--up-bg); } .lg-band.rug { background: var(--down-bg); }
.badge-preview { padding: 14px; border-radius: var(--r-md); background: var(--sunken); border: 1px solid var(--line); }

.call-list { overflow: hidden; }
.call-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "tok main fig" "tok chips chips"; gap: 4px 12px; align-items: center; padding: 12px var(--sp-4); border-top: 1px solid var(--line); transition: background var(--dur-fast); }
.call-row:first-child { border-top: 0; }
.call-row:hover { background: var(--hover); }
.call-row > .token-dot { grid-area: tok; align-self: start; }
.call-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.call-token { display: flex; align-items: baseline; gap: 8px; font-weight: var(--fw-semi); font-size: var(--fs-sm); min-width: 0; }
.call-seq { font-size: var(--fs-2xs); color: var(--text-4); font-weight: var(--fw-medium); }
.call-when { font-size: var(--fs-2xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.call-chips:empty { display: none; }
.call-fig { grid-area: fig; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.call-fig .num { font-size: 16px; font-weight: var(--fw-semi); }
.call-fig-lbl { font-size: 11px; color: var(--text-3); }
@media (min-width: 900px) {
  .call-row { grid-template-columns: 32px minmax(180px, 1fr) minmax(0, auto) 110px; grid-template-areas: "tok main chips fig"; padding: 12px var(--sp-5); }
  .call-chips { justify-content: flex-end; }
}

/* ============================== call page ============================== */
.call-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.call-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.call-token--xl { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; font-weight: var(--fw-semi); }
.call-token--xl .addr { font-size: 1em; }
.token-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.token-full { min-width: 0; overflow-wrap: anywhere; color: var(--text-3); }
.token-chain { color: var(--text-2); font-weight: var(--fw-medium); }
.token-line .iconbtn { width: 44px; height: 44px; }
.caller-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); max-width: 560px; transition: background var(--dur-fast); }
.caller-strip:hover { background: var(--raised); }
.caller-strip > svg { margin-left: auto; color: var(--text-3); }
.call-page .notice { margin-bottom: var(--gap); }
.chart-card { display: flex; flex-direction: column; gap: 6px; }
.chart-src { margin-top: 4px; }
.chart-empty { display: grid; place-items: center; min-height: 180px; border-radius: var(--r-md); background: var(--sunken); border: 1px dashed var(--line-strong); padding: 20px; text-align: center; }
.results { display: flex; flex-direction: column; gap: var(--sp-5); }
.result-hero { display: flex; flex-direction: column; gap: var(--sp-4); }
.result-kv { max-width: 520px; }
.exit-early { color: var(--warn); }
.orail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.orail-cell { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); border: 1px solid var(--line); min-width: 0; transition: background var(--dur-fast), border-color var(--dur-fast); }
.orail-cell:hover { border-color: var(--line-strong); }
.orail-cell[aria-current="true"] { background: var(--raised); border-color: var(--text-3); box-shadow: var(--shadow-1); }
.orail-w { font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--text-3); }
.orail-fig { font-size: 20px; font-weight: var(--fw-semi); letter-spacing: -0.02em; }
.orail-sub { font-size: 11px; color: var(--text-3); }
.orail-sk { height: 22px; width: 70%; margin: 2px 0; }
.orail-cell .meter { margin-top: 4px; }
.cost-line { padding: 0 4px; margin-top: calc(-1 * var(--sp-3)); }
.quote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--line-strong); background: var(--sunken); border-radius: 0 var(--r-md) var(--r-md) 0; }
.call-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--text-1); }
.call-text-more > summary { color: var(--text-2); margin-top: 8px; }
.edit-list { display: flex; flex-direction: column; gap: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--proof); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 2s ease-in-out infinite; } }
@keyframes pulse { 50% { opacity: 0.35; } }
.proof-card .btn--primary { margin-top: 4px; }

/* ============================== verify ============================== */
.lookup { display: flex; gap: 8px; width: 100%; max-width: 560px; margin-top: var(--sp-3); }
.lookup .input { flex: 1 1 auto; height: 48px; font-size: var(--fs-body); border-radius: var(--r-md); }
.lookup .btn { height: 48px; }
.lookup-results { width: 100%; max-width: 560px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.lookup-results .mini-row { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.verify-stats { margin-bottom: var(--sp-6); }
.seal-list { overflow: hidden; }
.seal-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 14px; padding: 14px var(--sp-4); border-top: 1px solid var(--line); align-items: start; }
.seal-row:first-child { border-top: 0; }
.seal-no { display: grid; place-items: center; height: 36px; border-radius: 10px; background: var(--proof-bg); color: var(--proof); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.seal-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.seal-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--fs-sm); }
.seal-hash { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); }
.seal-links a:hover { color: var(--text-1); }
.seal-state { grid-column: 2; }
@media (min-width: 700px) { .seal-row { grid-template-columns: 52px minmax(0, 1fr) auto; } .seal-state { grid-column: auto; } }
.vhero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; padding: var(--sp-6); margin-bottom: var(--sp-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); }
.vhero h1 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.03em; margin: 4px 0 6px; }
.vhero-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vhero-mark { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--raised); color: var(--text-2); border: 1px solid var(--line); }
.vhero-mark svg { width: 30px; height: 30px; }
.vhero-mark > svg { display: none; }
.vhero[data-state="pending"] .vhero-mark > svg:only-child { display: block; }
.vhero[data-state="ok"] { background: var(--proof-bg); border-color: color-mix(in oklch, var(--proof) 30%, transparent); }
.vhero[data-state="ok"] .vhero-mark { background: var(--proof); color: var(--page); border-color: transparent; }
.vhero[data-state="ok"] .vhero-mark > svg:nth-of-type(1) { display: block; }
.vhero[data-state="fail"] { background: var(--fail-bg); border-color: color-mix(in oklch, var(--fail) 35%, transparent); }
.vhero[data-state="fail"] .vhero-mark { background: var(--fail); color: var(--page); border-color: transparent; }
.vhero[data-state="fail"] .vhero-mark > svg:last-of-type { display: block; }
.vhero-spin { display: none; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--proof); }
.vhero[data-verify-hero][data-state="pending"] .vhero-spin { display: block; }
@media (prefers-reduced-motion: no-preference) { .vhero-spin { animation: spin 0.9s linear infinite; } .vhero[data-state="ok"] .vhero-mark, .vhero[data-state="fail"] .vhero-mark { animation: pop var(--dur-slow) var(--ease-spring); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .vhero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); } .vhero-mark { width: 52px; height: 52px; border-radius: 16px; } }
.step-hashes { border-top: 0; margin-top: 4px; }
.step-hashes > summary { padding: 4px 0; font-size: var(--fs-xs); color: var(--text-2); font-weight: var(--fw-medium); justify-content: flex-start; }
.step-hashes > summary::after { width: 6px; height: 6px; }
.step-hashes .fold-body { padding-bottom: 4px; }

/* ============================== method ============================== */
.article-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-6); }
@media (min-width: 1000px) { .article-layout { grid-template-columns: 220px minmax(0, 720px); gap: var(--sp-9); } }
.toc { display: none; }
@media (min-width: 1000px) {
  .toc { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 2px; }
  .toc .tile-label { margin-bottom: 8px; }
  .toc a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 10px; font-size: var(--fs-sm); color: var(--text-3); }
  .toc a:hover { background: var(--hover); color: var(--text-1); }
  .toc a .num { width: 14px; color: var(--text-4); }
}
.article { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.article section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.article h2 { font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.article h3 { font-size: var(--fs-h3); margin-top: 8px; }
.article p { color: var(--text-2); font-size: 15.5px; line-height: 1.65; }
.article p.small { font-size: var(--fs-sm); }
.article strong { color: var(--text-1); }
.sec-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bullets { display: flex; flex-direction: column; gap: 8px; }
.bullets li { position: relative; padding-left: 18px; color: var(--text-2); font-size: 15px; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); }
.diagram { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.md-axis { stroke: var(--line-strong); stroke-width: 2; }
.md-window { fill: var(--chart-window); stroke: var(--line-strong); }
.md-post { fill: var(--text-4); }
.md-dot { fill: var(--text-1); stroke: var(--surface); stroke-width: 3; }
.md text { font-family: var(--font-sans); }
.md-t1 { fill: var(--text-1); font-size: 14px; font-weight: 600; }
.md-t2 { fill: var(--text-2); font-size: 13px; }
.md-t3 { fill: var(--text-3); font-size: 11.5px; }
.chain-inline { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: ci; }
.chain-inline li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--proof-bg); color: var(--proof); font-size: var(--fs-xs); font-weight: var(--fw-semi); counter-increment: ci; }
.chain-inline li::before { content: counter(ci); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--proof); color: var(--page); font-size: 11px; }
.hide-phone { display: none; }
@media (min-width: 700px) { .hide-phone { display: table-cell; } }
.only-phone { display: block; }
.only-desk { display: none; }
@media (min-width: 700px) { .only-phone { display: none; } .only-desk { display: block; } }

/* ============================== link ============================== */
.link-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ============================== 404 ============================== */
.nf { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--sp-9) 0; max-width: 560px; }
.nf-code { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); color: var(--text-4); line-height: 1; }

/* ============================== spacing utilities (v0.2 markup) ============================== */
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mb-2 { margin-bottom: var(--sp-2); }
.maxw-640 { max-width: 640px; }
.page-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sp-5); }
.page-head p { color: var(--text-2); max-width: 64ch; }

/* ============================== motion ============================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); }
  ::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-in-out); }
  .ticking { display: inline-block; animation: roll var(--dur-roll) var(--ease-out); }
}
@keyframes roll { from { transform: translateY(40%); opacity: 0; } }
.flash { animation: flash 1s ease-out; }
@keyframes flash { from { background: var(--press); } }

/* ============================== generated utilities (no inline styles under the CSP) ============================== */
/* avatar hue (format.avatarHue) */
.hue-0{--h:0}.hue-1{--h:1}.hue-2{--h:2}.hue-3{--h:3}.hue-4{--h:4}.hue-5{--h:5}.hue-6{--h:6}.hue-7{--h:7}.hue-8{--h:8}.hue-9{--h:9}.hue-10{--h:10}.hue-11{--h:11}.hue-12{--h:12}.hue-13{--h:13}.hue-14{--h:14}.hue-15{--h:15}.hue-16{--h:16}.hue-17{--h:17}.hue-18{--h:18}.hue-19{--h:19}.hue-20{--h:20}.hue-21{--h:21}.hue-22{--h:22}.hue-23{--h:23}.hue-24{--h:24}.hue-25{--h:25}.hue-26{--h:26}.hue-27{--h:27}.hue-28{--h:28}.hue-29{--h:29}.hue-30{--h:30}.hue-31{--h:31}.hue-32{--h:32}.hue-33{--h:33}.hue-34{--h:34}.hue-35{--h:35}.hue-36{--h:36}.hue-37{--h:37}.hue-38{--h:38}.hue-39{--h:39}.hue-40{--h:40}.hue-41{--h:41}.hue-42{--h:42}.hue-43{--h:43}.hue-44{--h:44}.hue-45{--h:45}.hue-46{--h:46}.hue-47{--h:47}.hue-48{--h:48}.hue-49{--h:49}.hue-50{--h:50}.hue-51{--h:51}.hue-52{--h:52}.hue-53{--h:53}.hue-54{--h:54}.hue-55{--h:55}.hue-56{--h:56}.hue-57{--h:57}.hue-58{--h:58}.hue-59{--h:59}.hue-60{--h:60}.hue-61{--h:61}.hue-62{--h:62}.hue-63{--h:63}.hue-64{--h:64}.hue-65{--h:65}.hue-66{--h:66}.hue-67{--h:67}.hue-68{--h:68}.hue-69{--h:69}.hue-70{--h:70}.hue-71{--h:71}.hue-72{--h:72}.hue-73{--h:73}.hue-74{--h:74}.hue-75{--h:75}.hue-76{--h:76}.hue-77{--h:77}.hue-78{--h:78}.hue-79{--h:79}.hue-80{--h:80}.hue-81{--h:81}.hue-82{--h:82}.hue-83{--h:83}.hue-84{--h:84}.hue-85{--h:85}.hue-86{--h:86}.hue-87{--h:87}.hue-88{--h:88}.hue-89{--h:89}.hue-90{--h:90}.hue-91{--h:91}.hue-92{--h:92}.hue-93{--h:93}.hue-94{--h:94}.hue-95{--h:95}.hue-96{--h:96}.hue-97{--h:97}.hue-98{--h:98}.hue-99{--h:99}.hue-100{--h:100}.hue-101{--h:101}.hue-102{--h:102}.hue-103{--h:103}.hue-104{--h:104}.hue-105{--h:105}.hue-106{--h:106}.hue-107{--h:107}.hue-108{--h:108}.hue-109{--h:109}.hue-110{--h:110}.hue-111{--h:111}.hue-112{--h:112}.hue-113{--h:113}.hue-114{--h:114}.hue-115{--h:115}.hue-116{--h:116}.hue-117{--h:117}.hue-118{--h:118}.hue-119{--h:119}.hue-120{--h:120}.hue-121{--h:121}.hue-122{--h:122}.hue-123{--h:123}.hue-124{--h:124}.hue-125{--h:125}.hue-126{--h:126}.hue-127{--h:127}.hue-128{--h:128}.hue-129{--h:129}.hue-130{--h:130}.hue-131{--h:131}.hue-132{--h:132}.hue-133{--h:133}.hue-134{--h:134}.hue-135{--h:135}.hue-136{--h:136}.hue-137{--h:137}.hue-138{--h:138}.hue-139{--h:139}.hue-140{--h:140}.hue-141{--h:141}.hue-142{--h:142}.hue-143{--h:143}.hue-144{--h:144}.hue-145{--h:145}.hue-146{--h:146}.hue-147{--h:147}.hue-148{--h:148}.hue-149{--h:149}.hue-150{--h:150}.hue-151{--h:151}.hue-152{--h:152}.hue-153{--h:153}.hue-154{--h:154}.hue-155{--h:155}.hue-156{--h:156}.hue-157{--h:157}.hue-158{--h:158}.hue-159{--h:159}.hue-160{--h:160}.hue-161{--h:161}.hue-162{--h:162}.hue-163{--h:163}.hue-164{--h:164}.hue-165{--h:165}.hue-166{--h:166}.hue-167{--h:167}.hue-168{--h:168}.hue-169{--h:169}.hue-170{--h:170}.hue-171{--h:171}.hue-172{--h:172}.hue-173{--h:173}.hue-174{--h:174}.hue-175{--h:175}.hue-176{--h:176}.hue-177{--h:177}.hue-178{--h:178}.hue-179{--h:179}.hue-180{--h:180}.hue-181{--h:181}.hue-182{--h:182}.hue-183{--h:183}.hue-184{--h:184}.hue-185{--h:185}.hue-186{--h:186}.hue-187{--h:187}.hue-188{--h:188}.hue-189{--h:189}.hue-190{--h:190}.hue-191{--h:191}.hue-192{--h:192}.hue-193{--h:193}.hue-194{--h:194}.hue-195{--h:195}.hue-196{--h:196}.hue-197{--h:197}.hue-198{--h:198}.hue-199{--h:199}.hue-200{--h:200}.hue-201{--h:201}.hue-202{--h:202}.hue-203{--h:203}.hue-204{--h:204}.hue-205{--h:205}.hue-206{--h:206}.hue-207{--h:207}.hue-208{--h:208}.hue-209{--h:209}.hue-210{--h:210}.hue-211{--h:211}.hue-212{--h:212}.hue-213{--h:213}.hue-214{--h:214}.hue-215{--h:215}.hue-216{--h:216}.hue-217{--h:217}.hue-218{--h:218}.hue-219{--h:219}.hue-220{--h:220}.hue-221{--h:221}.hue-222{--h:222}.hue-223{--h:223}.hue-224{--h:224}.hue-225{--h:225}.hue-226{--h:226}.hue-227{--h:227}.hue-228{--h:228}.hue-229{--h:229}.hue-230{--h:230}.hue-231{--h:231}.hue-232{--h:232}.hue-233{--h:233}.hue-234{--h:234}.hue-235{--h:235}.hue-236{--h:236}.hue-237{--h:237}.hue-238{--h:238}.hue-239{--h:239}.hue-240{--h:240}.hue-241{--h:241}.hue-242{--h:242}.hue-243{--h:243}.hue-244{--h:244}.hue-245{--h:245}.hue-246{--h:246}.hue-247{--h:247}.hue-248{--h:248}.hue-249{--h:249}.hue-250{--h:250}.hue-251{--h:251}.hue-252{--h:252}.hue-253{--h:253}.hue-254{--h:254}.hue-255{--h:255}.hue-256{--h:256}.hue-257{--h:257}.hue-258{--h:258}.hue-259{--h:259}.hue-260{--h:260}.hue-261{--h:261}.hue-262{--h:262}.hue-263{--h:263}.hue-264{--h:264}.hue-265{--h:265}.hue-266{--h:266}.hue-267{--h:267}.hue-268{--h:268}.hue-269{--h:269}.hue-270{--h:270}.hue-271{--h:271}.hue-272{--h:272}.hue-273{--h:273}.hue-274{--h:274}.hue-275{--h:275}.hue-276{--h:276}.hue-277{--h:277}.hue-278{--h:278}.hue-279{--h:279}.hue-280{--h:280}.hue-281{--h:281}.hue-282{--h:282}.hue-283{--h:283}.hue-284{--h:284}.hue-285{--h:285}.hue-286{--h:286}.hue-287{--h:287}.hue-288{--h:288}.hue-289{--h:289}.hue-290{--h:290}.hue-291{--h:291}.hue-292{--h:292}.hue-293{--h:293}.hue-294{--h:294}.hue-295{--h:295}.hue-296{--h:296}.hue-297{--h:297}.hue-298{--h:298}.hue-299{--h:299}.hue-300{--h:300}.hue-301{--h:301}.hue-302{--h:302}.hue-303{--h:303}.hue-304{--h:304}.hue-305{--h:305}.hue-306{--h:306}.hue-307{--h:307}.hue-308{--h:308}.hue-309{--h:309}.hue-310{--h:310}.hue-311{--h:311}.hue-312{--h:312}.hue-313{--h:313}.hue-314{--h:314}.hue-315{--h:315}.hue-316{--h:316}.hue-317{--h:317}.hue-318{--h:318}.hue-319{--h:319}.hue-320{--h:320}.hue-321{--h:321}.hue-322{--h:322}.hue-323{--h:323}.hue-324{--h:324}.hue-325{--h:325}.hue-326{--h:326}.hue-327{--h:327}.hue-328{--h:328}.hue-329{--h:329}.hue-330{--h:330}.hue-331{--h:331}.hue-332{--h:332}.hue-333{--h:333}.hue-334{--h:334}.hue-335{--h:335}.hue-336{--h:336}.hue-337{--h:337}.hue-338{--h:338}.hue-339{--h:339}.hue-340{--h:340}.hue-341{--h:341}.hue-342{--h:342}.hue-343{--h:343}.hue-344{--h:344}.hue-345{--h:345}.hue-346{--h:346}.hue-347{--h:347}.hue-348{--h:348}.hue-349{--h:349}.hue-350{--h:350}.hue-351{--h:351}.hue-352{--h:352}.hue-353{--h:353}.hue-354{--h:354}.hue-355{--h:355}.hue-356{--h:356}.hue-357{--h:357}.hue-358{--h:358}.hue-359{--h:359}
/* chart pins: 0.5% steps */
.px-0{left:0%}.px-1{left:0.5%}.px-2{left:1%}.px-3{left:1.5%}.px-4{left:2%}.px-5{left:2.5%}.px-6{left:3%}.px-7{left:3.5%}.px-8{left:4%}.px-9{left:4.5%}.px-10{left:5%}.px-11{left:5.5%}.px-12{left:6%}.px-13{left:6.5%}.px-14{left:7%}.px-15{left:7.5%}.px-16{left:8%}.px-17{left:8.5%}.px-18{left:9%}.px-19{left:9.5%}.px-20{left:10%}.px-21{left:10.5%}.px-22{left:11%}.px-23{left:11.5%}.px-24{left:12%}.px-25{left:12.5%}.px-26{left:13%}.px-27{left:13.5%}.px-28{left:14%}.px-29{left:14.5%}.px-30{left:15%}.px-31{left:15.5%}.px-32{left:16%}.px-33{left:16.5%}.px-34{left:17%}.px-35{left:17.5%}.px-36{left:18%}.px-37{left:18.5%}.px-38{left:19%}.px-39{left:19.5%}.px-40{left:20%}.px-41{left:20.5%}.px-42{left:21%}.px-43{left:21.5%}.px-44{left:22%}.px-45{left:22.5%}.px-46{left:23%}.px-47{left:23.5%}.px-48{left:24%}.px-49{left:24.5%}.px-50{left:25%}.px-51{left:25.5%}.px-52{left:26%}.px-53{left:26.5%}.px-54{left:27%}.px-55{left:27.5%}.px-56{left:28%}.px-57{left:28.5%}.px-58{left:29%}.px-59{left:29.5%}.px-60{left:30%}.px-61{left:30.5%}.px-62{left:31%}.px-63{left:31.5%}.px-64{left:32%}.px-65{left:32.5%}.px-66{left:33%}.px-67{left:33.5%}.px-68{left:34%}.px-69{left:34.5%}.px-70{left:35%}.px-71{left:35.5%}.px-72{left:36%}.px-73{left:36.5%}.px-74{left:37%}.px-75{left:37.5%}.px-76{left:38%}.px-77{left:38.5%}.px-78{left:39%}.px-79{left:39.5%}.px-80{left:40%}.px-81{left:40.5%}.px-82{left:41%}.px-83{left:41.5%}.px-84{left:42%}.px-85{left:42.5%}.px-86{left:43%}.px-87{left:43.5%}.px-88{left:44%}.px-89{left:44.5%}.px-90{left:45%}.px-91{left:45.5%}.px-92{left:46%}.px-93{left:46.5%}.px-94{left:47%}.px-95{left:47.5%}.px-96{left:48%}.px-97{left:48.5%}.px-98{left:49%}.px-99{left:49.5%}.px-100{left:50%}.px-101{left:50.5%}.px-102{left:51%}.px-103{left:51.5%}.px-104{left:52%}.px-105{left:52.5%}.px-106{left:53%}.px-107{left:53.5%}.px-108{left:54%}.px-109{left:54.5%}.px-110{left:55%}.px-111{left:55.5%}.px-112{left:56%}.px-113{left:56.5%}.px-114{left:57%}.px-115{left:57.5%}.px-116{left:58%}.px-117{left:58.5%}.px-118{left:59%}.px-119{left:59.5%}.px-120{left:60%}.px-121{left:60.5%}.px-122{left:61%}.px-123{left:61.5%}.px-124{left:62%}.px-125{left:62.5%}.px-126{left:63%}.px-127{left:63.5%}.px-128{left:64%}.px-129{left:64.5%}.px-130{left:65%}.px-131{left:65.5%}.px-132{left:66%}.px-133{left:66.5%}.px-134{left:67%}.px-135{left:67.5%}.px-136{left:68%}.px-137{left:68.5%}.px-138{left:69%}.px-139{left:69.5%}.px-140{left:70%}.px-141{left:70.5%}.px-142{left:71%}.px-143{left:71.5%}.px-144{left:72%}.px-145{left:72.5%}.px-146{left:73%}.px-147{left:73.5%}.px-148{left:74%}.px-149{left:74.5%}.px-150{left:75%}.px-151{left:75.5%}.px-152{left:76%}.px-153{left:76.5%}.px-154{left:77%}.px-155{left:77.5%}.px-156{left:78%}.px-157{left:78.5%}.px-158{left:79%}.px-159{left:79.5%}.px-160{left:80%}.px-161{left:80.5%}.px-162{left:81%}.px-163{left:81.5%}.px-164{left:82%}.px-165{left:82.5%}.px-166{left:83%}.px-167{left:83.5%}.px-168{left:84%}.px-169{left:84.5%}.px-170{left:85%}.px-171{left:85.5%}.px-172{left:86%}.px-173{left:86.5%}.px-174{left:87%}.px-175{left:87.5%}.px-176{left:88%}.px-177{left:88.5%}.px-178{left:89%}.px-179{left:89.5%}.px-180{left:90%}.px-181{left:90.5%}.px-182{left:91%}.px-183{left:91.5%}.px-184{left:92%}.px-185{left:92.5%}.px-186{left:93%}.px-187{left:93.5%}.px-188{left:94%}.px-189{left:94.5%}.px-190{left:95%}.px-191{left:95.5%}.px-192{left:96%}.px-193{left:96.5%}.px-194{left:97%}.px-195{left:97.5%}.px-196{left:98%}.px-197{left:98.5%}.px-198{left:99%}.px-199{left:99.5%}.px-200{left:100%}
.py-0{top:0%}.py-1{top:0.5%}.py-2{top:1%}.py-3{top:1.5%}.py-4{top:2%}.py-5{top:2.5%}.py-6{top:3%}.py-7{top:3.5%}.py-8{top:4%}.py-9{top:4.5%}.py-10{top:5%}.py-11{top:5.5%}.py-12{top:6%}.py-13{top:6.5%}.py-14{top:7%}.py-15{top:7.5%}.py-16{top:8%}.py-17{top:8.5%}.py-18{top:9%}.py-19{top:9.5%}.py-20{top:10%}.py-21{top:10.5%}.py-22{top:11%}.py-23{top:11.5%}.py-24{top:12%}.py-25{top:12.5%}.py-26{top:13%}.py-27{top:13.5%}.py-28{top:14%}.py-29{top:14.5%}.py-30{top:15%}.py-31{top:15.5%}.py-32{top:16%}.py-33{top:16.5%}.py-34{top:17%}.py-35{top:17.5%}.py-36{top:18%}.py-37{top:18.5%}.py-38{top:19%}.py-39{top:19.5%}.py-40{top:20%}.py-41{top:20.5%}.py-42{top:21%}.py-43{top:21.5%}.py-44{top:22%}.py-45{top:22.5%}.py-46{top:23%}.py-47{top:23.5%}.py-48{top:24%}.py-49{top:24.5%}.py-50{top:25%}.py-51{top:25.5%}.py-52{top:26%}.py-53{top:26.5%}.py-54{top:27%}.py-55{top:27.5%}.py-56{top:28%}.py-57{top:28.5%}.py-58{top:29%}.py-59{top:29.5%}.py-60{top:30%}.py-61{top:30.5%}.py-62{top:31%}.py-63{top:31.5%}.py-64{top:32%}.py-65{top:32.5%}.py-66{top:33%}.py-67{top:33.5%}.py-68{top:34%}.py-69{top:34.5%}.py-70{top:35%}.py-71{top:35.5%}.py-72{top:36%}.py-73{top:36.5%}.py-74{top:37%}.py-75{top:37.5%}.py-76{top:38%}.py-77{top:38.5%}.py-78{top:39%}.py-79{top:39.5%}.py-80{top:40%}.py-81{top:40.5%}.py-82{top:41%}.py-83{top:41.5%}.py-84{top:42%}.py-85{top:42.5%}.py-86{top:43%}.py-87{top:43.5%}.py-88{top:44%}.py-89{top:44.5%}.py-90{top:45%}.py-91{top:45.5%}.py-92{top:46%}.py-93{top:46.5%}.py-94{top:47%}.py-95{top:47.5%}.py-96{top:48%}.py-97{top:48.5%}.py-98{top:49%}.py-99{top:49.5%}.py-100{top:50%}.py-101{top:50.5%}.py-102{top:51%}.py-103{top:51.5%}.py-104{top:52%}.py-105{top:52.5%}.py-106{top:53%}.py-107{top:53.5%}.py-108{top:54%}.py-109{top:54.5%}.py-110{top:55%}.py-111{top:55.5%}.py-112{top:56%}.py-113{top:56.5%}.py-114{top:57%}.py-115{top:57.5%}.py-116{top:58%}.py-117{top:58.5%}.py-118{top:59%}.py-119{top:59.5%}.py-120{top:60%}.py-121{top:60.5%}.py-122{top:61%}.py-123{top:61.5%}.py-124{top:62%}.py-125{top:62.5%}.py-126{top:63%}.py-127{top:63.5%}.py-128{top:64%}.py-129{top:64.5%}.py-130{top:65%}.py-131{top:65.5%}.py-132{top:66%}.py-133{top:66.5%}.py-134{top:67%}.py-135{top:67.5%}.py-136{top:68%}.py-137{top:68.5%}.py-138{top:69%}.py-139{top:69.5%}.py-140{top:70%}.py-141{top:70.5%}.py-142{top:71%}.py-143{top:71.5%}.py-144{top:72%}.py-145{top:72.5%}.py-146{top:73%}.py-147{top:73.5%}.py-148{top:74%}.py-149{top:74.5%}.py-150{top:75%}.py-151{top:75.5%}.py-152{top:76%}.py-153{top:76.5%}.py-154{top:77%}.py-155{top:77.5%}.py-156{top:78%}.py-157{top:78.5%}.py-158{top:79%}.py-159{top:79.5%}.py-160{top:80%}.py-161{top:80.5%}.py-162{top:81%}.py-163{top:81.5%}.py-164{top:82%}.py-165{top:82.5%}.py-166{top:83%}.py-167{top:83.5%}.py-168{top:84%}.py-169{top:84.5%}.py-170{top:85%}.py-171{top:85.5%}.py-172{top:86%}.py-173{top:86.5%}.py-174{top:87%}.py-175{top:87.5%}.py-176{top:88%}.py-177{top:88.5%}.py-178{top:89%}.py-179{top:89.5%}.py-180{top:90%}.py-181{top:90.5%}.py-182{top:91%}.py-183{top:91.5%}.py-184{top:92%}.py-185{top:92.5%}.py-186{top:93%}.py-187{top:93.5%}.py-188{top:94%}.py-189{top:94.5%}.py-190{top:95%}.py-191{top:95.5%}.py-192{top:96%}.py-193{top:96.5%}.py-194{top:97%}.py-195{top:97.5%}.py-196{top:98%}.py-197{top:98.5%}.py-198{top:99%}.py-199{top:99.5%}.py-200{top:100%}
/* meters */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
/* brand accent hue from the settings (components/brand.ts) */
.accent-h-0{--accent-h:0}.accent-h-5{--accent-h:5}.accent-h-10{--accent-h:10}.accent-h-15{--accent-h:15}.accent-h-20{--accent-h:20}.accent-h-25{--accent-h:25}.accent-h-30{--accent-h:30}.accent-h-35{--accent-h:35}.accent-h-40{--accent-h:40}.accent-h-45{--accent-h:45}.accent-h-50{--accent-h:50}.accent-h-55{--accent-h:55}.accent-h-60{--accent-h:60}.accent-h-65{--accent-h:65}.accent-h-70{--accent-h:70}.accent-h-75{--accent-h:75}.accent-h-80{--accent-h:80}.accent-h-85{--accent-h:85}.accent-h-90{--accent-h:90}.accent-h-95{--accent-h:95}.accent-h-100{--accent-h:100}.accent-h-105{--accent-h:105}.accent-h-110{--accent-h:110}.accent-h-115{--accent-h:115}.accent-h-120{--accent-h:120}.accent-h-125{--accent-h:125}.accent-h-130{--accent-h:130}.accent-h-135{--accent-h:135}.accent-h-140{--accent-h:140}.accent-h-145{--accent-h:145}.accent-h-150{--accent-h:150}.accent-h-155{--accent-h:155}.accent-h-160{--accent-h:160}.accent-h-165{--accent-h:165}.accent-h-170{--accent-h:170}.accent-h-175{--accent-h:175}.accent-h-180{--accent-h:180}.accent-h-185{--accent-h:185}.accent-h-190{--accent-h:190}.accent-h-195{--accent-h:195}.accent-h-200{--accent-h:200}.accent-h-205{--accent-h:205}.accent-h-210{--accent-h:210}.accent-h-215{--accent-h:215}.accent-h-220{--accent-h:220}.accent-h-225{--accent-h:225}.accent-h-230{--accent-h:230}.accent-h-235{--accent-h:235}.accent-h-240{--accent-h:240}.accent-h-245{--accent-h:245}.accent-h-250{--accent-h:250}.accent-h-255{--accent-h:255}.accent-h-260{--accent-h:260}.accent-h-265{--accent-h:265}.accent-h-270{--accent-h:270}.accent-h-275{--accent-h:275}.accent-h-280{--accent-h:280}.accent-h-285{--accent-h:285}.accent-h-290{--accent-h:290}.accent-h-295{--accent-h:295}.accent-h-300{--accent-h:300}.accent-h-305{--accent-h:305}.accent-h-310{--accent-h:310}.accent-h-315{--accent-h:315}.accent-h-320{--accent-h:320}.accent-h-325{--accent-h:325}.accent-h-330{--accent-h:330}.accent-h-335{--accent-h:335}.accent-h-340{--accent-h:340}.accent-h-345{--accent-h:345}.accent-h-350{--accent-h:350}.accent-h-355{--accent-h:355}
@media (max-width: 560px) {
  .demo-banner > span { display: none; }
  .ne-sum > .xsmall { display: none; }
}