/* public/css/ll-type.css — generated from the shared type source */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/landing/landing-v12/fonts/dm-sans-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/landing-v12/fonts/dm-sans-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/landing-v12/fonts/dm-sans-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/landing/landing-v12/fonts/dm-sans-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/landing/landing-v12/fonts/jetbrains-mono-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/landing/landing-v12/fonts/jetbrains-mono-latin.woff2?v=1') format('woff2')}
/* LoanLedger type tokens — the one source for families, scale, line heights, letter-spacing and weights.
   Rule: docs/BRAND_TYPE.md. Registers: product (default, every page behind the front door) and landing (html[data-landing]).
   Pages and components never write a font-family literal; they consume these tokens. */
:root{
  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --wordmark:'DM Sans',system-ui,-apple-system,sans-serif;
  --t-display:clamp(2rem,4vw,3rem);--t-1:1.75rem;--t-2:1.5rem;--t-3:1.2rem;--t-body:1rem;--t-ui:.875rem;--t-small:.8125rem;--t-label:.75rem;--t-micro:.6875rem;
  --lh-display:1.1;--lh-heading:1.2;--lh-body:1.5;--lh-ui:1.4;--lh-label:1.3;
  --tr-display:-.02em;--tr-heading:-.01em;--tr-body:0;--tr-label:.06em;--tr-eyebrow:.18em;--tr-wordmark:-.01em;
  --w-regular:400;--w-medium:500;--w-bold:700;--w-black:800;
}
html[data-landing]{
  --display:var(--font);
  --font:'Schibsted Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ui:'DM Sans',system-ui,sans-serif;
}
html[data-landing][data-face="serif"]{--display:'Instrument Serif',Georgia,serif}
html[data-landing][data-face="system"]{--display:'DM Sans',system-ui,sans-serif}

/* landing-v12/fonts/fonts.css */
/* Google Fonts Latin subsets; provenance and SIL OFL 1.1 licences accompany the files. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/schibsted-grotesk-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-serif-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/jetbrains-mono-latin.woff2?v=1') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/dm-sans-latin.woff2?v=1') format('woff2')}

/* _ds/design-system-13a4c627-1e0b-44ba-9b26-9ada2f762339/public/css/site-tokens.css */
/**
 * LoanLedger public site — design token reference (mirrors --ll-* in styles-dataviz.css).
 * Import after themes if you need a single place to extend; most pages load themes + styles-dataviz.css.
 *
 * Copyright (c) 2026 LoanLedger
 */
:root {
  /* Documented anchors — see public/styles-dataviz.css for full set */
  --ll-site-asset-version: "0.7.0";
}

/* _ds/design-system-13a4c627-1e0b-44ba-9b26-9ada2f762339/public/css/themes/dataviz.css */
/* LoanLedger — Dataviz theme (default). Dark splash, cyan + gold. */

:root {
  /* Surfaces — body bg is now #111316 via styles-dataviz.css gradient; panels sit lighter */
  --ll-bg: #111316;
  --ll-bg-soft: #1c1e23;

  /* Text */
  --ll-text: #e5e7eb;
  --ll-text-muted: #9ca3af;

  /* Accent (primary CTA, links, chart) */
  --ll-accent: #22ccee;
  --ll-accent-rgb: 34, 204, 238;

  /* Accent alt (gold CTA, secondary) */
  --ll-accent-alt: #f59e0b;
  --ll-accent-alt-rgb: 245, 158, 11;

  /* Text on accent buttons */
  --ll-btn-on-accent: #0d1117;

  /* Typography */
  --ll-font-family:var(--font);

  /* Motion */
  --ll-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ll-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Radii */
  --ll-radius-sm: 4px;
  --ll-radius-md: 8px;
  --ll-radius-pill: 999px;

  /* Borders */
  --ll-border-subtle: rgba(255, 255, 255, 0.06);
  --ll-border-accent: rgba(var(--ll-accent-rgb), 0.2);

  /* Chart / decorative (for grid, SVG) */
  --ll-chart-line: #22ccee;
  --ll-chart-grid-rgba: rgba(34, 204, 238, 0.04);
  --ll-chart-baseline-rgba: rgba(34, 204, 238, 0.08);

  /* CTA gradients (full value for theme override) */
  --ll-gradient-cta-primary: linear-gradient(160deg, #4ddbf5 0%, #2dd4e8 25%, #22ccee 50%, #06b6d4 75%, #0891b2 100%);
  --ll-gradient-cta-gold: linear-gradient(160deg, #fcd34d 0%, #fbbf24 20%, #f59e0b 50%, #ea580c 80%, #c2410c 100%);

  /* Aliases for subpages that still use old names */
  --bg: var(--ll-bg);
  --bg-soft: var(--ll-bg-soft);
  --headline: var(--ll-text);
  --muted: var(--ll-text-muted);
  --cyan: var(--ll-accent);
  --gold: var(--ll-accent-alt);
}

/* ll-v5.css */
/* ============================================================
   LOANLEDGER · v5 SYSTEM — canonical stylesheet (ll-v5.css)
   The one token + component base. Dark-first (v5 north star);
   [data-theme="light"] override for app/console (T2/T1) surfaces.
   Import this on every page. Immersion is dialed by surface class,
   not by forking the tokens.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ---------- TOKENS · dark (default, v5) ---------- */
:root{
  /* surfaces */
  --bg:#0f1419;--bg-2:#12171f;--card:#121821;--card-2:#0f151d;--inset:#1a212c;--sunk:#0c1119;
  color-scheme:dark;
  /* ink */
  --ink:#f4f6f8;--text:#c4cad2;--muted:#9aa3b0;--dim:#566173;
  /* brand + spectrum */
  --gold:#e6a52a;--goldHi:#f5c451;
  --green:#3fd08a;--greenHi:#5fe0a0;
  --teal:#3fc7b4;--tealHi:#5fd9c8;
  --blue:#3b82f6;--blueHi:#7fb2ff;
  --violet:#b57bff;--violetHi:#c9a3ff;
  --red:#ef5d6a;--redHi:#ff7d88;
  /* product accents (semantic — used across every surface) */
  --ledger:var(--blueHi);--signals:var(--violet);--warden:var(--goldHi);
  /* soft tints */
  --gold-soft:rgba(230,165,42,.13);--green-soft:rgba(63,208,138,.13);--red-soft:rgba(239,93,106,.13);--teal-soft:rgba(63,199,180,.13);
  --blue-soft:rgba(59,130,246,.15);--violet-soft:rgba(181,123,255,.15);
  /* borders */
  --border:#222b38;--border-2:#171e29;--border-strong:rgba(230,165,42,.42);
  --row-hover:rgba(255,255,255,.035);--input-bg:rgba(0,0,0,.28);
  /* type */

  /* radius / motion / elevation */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  --t-fast:130ms;--t-base:220ms;--t-slow:420ms;--ease:cubic-bezier(.22,1,.36,1);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 8px 26px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
  --sh-lg:0 30px 70px -20px rgba(0,0,0,.7);
  --glow-gold:0 0 30px -6px rgba(245,196,81,.5);
  /* gradients */
  --grad-gold:linear-gradient(150deg,#f5c451,#e6a52a 55%,#c07f16);
  --grad-gold-text:var(--grad-gold);
  --sidebar-w:250px;--sidebar-collapsed:66px;--topbar-h:58px;
}
/* ---------- TOKENS · light (T2 app / T1 console) ---------- */
[data-theme="light"]{
  --bg:#e7e9ee;--bg-2:#eef0f4;--card:#ffffff;--card-2:#fbfcfe;--inset:#eceef3;--sunk:#f4f6f9;
  color-scheme:light;
  --ink:#161b22;--text:#39414d;--muted:#69707c;--dim:#8b93a0;
  --gold:#bf8413;--goldHi:#875e0a;
  /* light “hi” goes DARKER (toward ink), never lighter — goldHi is used as text/accents on light surfaces */
  /* product accents — light needs its own ink-weight values (dark's glow golds wash out on light):
     warden = bronze ink, ~4.7:1 on --bg. Literal (not var-chained) so page-level --goldHi overrides can't lighten it. */
  --warden:#8a5f0d;
  --green:#28784d;--greenHi:#2f8a58;
  --teal:#0f766e;--tealHi:#12857c;
  --blue:#2563eb;--blueHi:#1d55c9;
  --violet:#6d46c4;--violetHi:#7c53d4;
  --red:#b23a0a;--redHi:#c2410c;
  --gold-soft:#f5ecdb;--green-soft:#e6f1ea;--red-soft:#f7eae2;--teal-soft:#e2f2f0;
  --blue-soft:#e9eff9;--violet-soft:#efeafa;
  --border:#d5d9e0;--border-2:#e4e7ec;--border-strong:rgba(191,132,19,.4);
  --row-hover:#f6f8fb;--input-bg:#ffffff;
  --sh-sm:0 1px 2px rgba(22,38,61,.05);
  --sh-md:0 4px 14px rgba(22,38,61,.08),0 1px 2px rgba(22,38,61,.05);
  --sh-lg:0 22px 54px rgba(22,38,61,.14);
  --glow-gold:0 6px 18px rgba(191,132,19,.28);
  /* gradient TEXT deepens on light (plate gradients stay bright — they carry espresso ink) */
  --grad-gold-text:linear-gradient(150deg,#b8860f,#96690c 55%,#7a540a);
}

/* ---------- BASE ---------- */
html{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{min-height:100vh;}
.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;color:inherit;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:content-box;}
:focus-visible{outline:2px solid var(--goldHi);outline-offset:2px;border-radius:3px;}

/* ---------- TYPE HELPERS ---------- */
.kicker{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.mono-label{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.05;text-wrap:balance;}
.h2{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.12;}
.h3{font-size:1.06rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.lead{font-size:1.02rem;color:var(--muted);line-height:1.55;text-wrap:pretty;}
.gold-text{background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- IMMERSION TIERS (surface classes) ---------- */
.tier{border-radius:var(--r-lg);position:relative;overflow:hidden;}
/* T3 — immersive cosmic. FORCED-DARK ISLAND: cosmic surfaces are always dark, so they
   re-pin the ink ladder + gradient text locally — readable in BOTH themes by construction. */
.tier-immersive{background:radial-gradient(120% 90% at 50% -10%,#101826,#080b12 60%);border:1px solid var(--border-2);
  --ink:#f4f6f8;--text:#c4cad2;--muted:#9aa3b0;--dim:#566173;
  --card:#121821;--card-2:#0f151d;--inset:#1a212c;--sunk:#0c1119;
  --border:#222b38;--border-2:#171e29;--row-hover:rgba(255,255,255,.035);
  --goldHi:#f5c451;--gold:#e6a52a;
  --grad-gold-text:linear-gradient(150deg,#f5c451,#e6a52a 55%,#c07f16);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);--sh-md:0 8px 26px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
  color:var(--text);color-scheme:dark;}
.tier-immersive .starfield{position:absolute;inset:0;pointer-events:none;opacity:.7;}
.tier-immersive .st{position:absolute;border-radius:50%;background:#fff;opacity:var(--o,.5);animation:ll-tw var(--d,3s) ease-in-out infinite alternate;}
@keyframes ll-tw{to{opacity:.15;}}
/* T2 — ambient app */
.tier-ambient{background:var(--bg-2);border:1px solid var(--border-2);}
.tier-ambient::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 15% -10%,rgba(230,165,42,.06),transparent 60%);}
/* T1 — utility console */
.tier-utility{background:var(--sunk);border:1px solid var(--border-2);}
@media(prefers-reduced-motion:reduce){.tier-immersive .st{animation:none;}}

/* ---------- BUTTONS & CTAS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:var(--font);font-weight:600;font-size:.85rem;padding:.6rem 1.05rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);color:var(--text);transition:transform var(--t-fast) var(--ease),border-color var(--t-base),background var(--t-base),box-shadow var(--t-base);white-space:nowrap;box-shadow:var(--sh-sm);}
.btn svg{width:15px;height:15px;}
.btn:hover{transform:translateY(-1px);border-color:var(--border-strong);color:var(--ink);}
.btn:active{transform:translateY(0) scale(.98);}
.btn.primary{background:var(--grad-gold);border-color:transparent;color:#2a1c02;font-weight:700;box-shadow:var(--glow-gold);}
.btn.primary:hover{color:#2a1c02;filter:brightness(1.05);}
.btn.ghost{background:transparent;}
.btn.soft{background:var(--gold-soft);border-color:transparent;color:var(--goldHi);}
.btn.danger{color:var(--red);border-color:transparent;background:var(--red-soft);}
.btn.danger:hover{color:var(--redHi);}
.btn.lg{padding:.8rem 1.5rem;font-size:.96rem;}
.btn.sm{padding:.42rem .75rem;font-size:.78rem;}
.btn .arw{transition:transform var(--t-base) var(--ease);}
.btn:hover .arw{transform:translateX(3px);}
.btn.loading{color:transparent!important;pointer-events:none;position:relative;}
.btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:ll-spin .7s linear infinite;color:var(--ink);}
.link-arw{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.86rem;color:var(--goldHi);cursor:pointer;}
.link-arw .arw{transition:transform var(--t-base) var(--ease);}
.link-arw:hover .arw{transform:translateX(4px);}

/* ---------- CHIPS / TOGGLES / TABS / FILTER ---------- */
.chip{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:.34rem .72rem;border-radius:var(--r-pill);cursor:pointer;transition:all var(--t-fast);}
.chip:hover{color:var(--ink);border-color:var(--border-strong);}
.chip.on{color:#2a1c02;background:var(--grad-gold);border-color:transparent;font-weight:700;}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px;}
.seg button{font-weight:600;font-size:.8rem;color:var(--muted);background:none;border:none;padding:.42rem .9rem;border-radius:var(--r-pill);transition:all var(--t-fast);}
.seg button.on{background:var(--grad-gold);color:#2a1c02;font-weight:700;}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border-2);}
.tabs a{font-size:.86rem;font-weight:600;color:var(--muted);padding:.6rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all var(--t-fast);}
.tabs a:hover{color:var(--ink);}
.tabs a.on{color:var(--goldHi);border-bottom-color:var(--goldHi);}

/* ---------- INPUTS ---------- */
.field{font-family:var(--font);font-size:.88rem;color:var(--ink);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem .85rem;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%;}
.field::placeholder{color:var(--dim);}
.field:focus{border-color:var(--goldHi);box-shadow:0 0 0 3px var(--gold-soft);}
.search{position:relative;}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);}
.search .field{padding-left:2.35rem;}

/* ---------- CARDS ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-2);}
.card-b{padding:1.1rem 1.25rem;}
.panel{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
/* ---------- LIST CONTRACT (canonical, site-wide) ----------
   Dense row lists live INSIDE one rounded panel: the container owns radius, border,
   clip, and shadow; rows are flush, divider-separated, and never carry their own
   radius/shadow/gap. First/last rows inherit the panel's corners via clipping.
   Rails (severity/selection) are border-left:3px on the row — they wrap the corner.
   Apply .ll-list to the container (or rely on .panel>.lrow), rows = .lrow. */
.ll-list,.panel:has(>.lrow){border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;background:var(--card);}
.ll-list>*{border-radius:0!important;box-shadow:none!important;margin:0!important;}
/* ---- first-run + empty/error states (shared) ---- */
.fresh-only{display:none!important;}
html[data-fresh="1"] .fresh-only{display:flex!important;}
html[data-fresh="1"] .fresh-hide{display:none!important;}
.ll-empty{flex-direction:column;align-items:flex-start;gap:.7rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.5rem 1.6rem;}
.ll-empty .ee{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);}
.ll-empty h2,.ll-empty .eh{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0;}
.ll-empty p{font-size:.8rem;color:var(--muted);line-height:1.6;margin:0;max-width:52ch;}
.ll-empty .ea{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem;}
.ll-error{border-left:3px solid var(--red);}
.ll-error .ee{color:var(--red);}
/* ---- pro-lens: honest teaser — renders real, ghosts on Free, never hides data ---- */
.pro-lens{position:relative;}
.pro-lens .pl-pill{position:absolute;top:.7rem;right:.9rem;z-index:3;font-family:var(--mono);font-size:.52rem;font-weight:800;letter-spacing:.09em;color:#2a1c02;background:linear-gradient(180deg,var(--goldHi),var(--gold));border-radius:999px;padding:.2rem .5rem;}
html[data-plan="pro"] .pro-lens .pl-pill{opacity:.85;}
.pro-lens .pl-unlock{display:none;align-items:center;gap:.75rem;padding:.7rem 1.2rem;border-top:1px solid var(--border-2);font-size:.74rem;color:var(--muted);line-height:1.5;}
.pro-lens .pl-unlock b{color:var(--ink);}
.pro-lens .pl-unlock a{margin-left:auto;flex:none;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--goldHi);}
html[data-plan="free"] .pro-lens{display:none;}
.ll-list>*+*{border-top:1px solid var(--border-2);}
.panel .lrow,.ll-list .lrow{background:transparent;border:0;border-left:3px solid transparent;border-radius:0;box-shadow:none;}
.panel .srow,.ll-list .srow{background:transparent;border:0;border-radius:0;box-shadow:none;}
.panel .srow+.srow,.ll-list .srow+.srow{border-top:1px solid var(--border-2);}
[data-theme="light"] .panel .srow+.srow,[data-theme="light"] .ll-list .srow+.srow{border-top-color:var(--border);}
.panel .lrow+.lrow,.ll-list .lrow+.lrow{border-top:1px solid var(--border-2);}
.panel .lrow:hover,.ll-list .lrow:hover{background:var(--row-hover);}
[data-theme="light"] .ll-list,[data-theme="light"] .panel:has(>.lrow){border-color:var(--border);box-shadow:var(--sh-md);}
[data-theme="light"] .panel .lrow+.lrow,[data-theme="light"] .ll-list .lrow+.lrow{border-top-color:var(--border);}
/* ---------- SIGNALS: beacon instead of accent stripe (violet identifies, never decorates) ---------- */
[data-product="signals"] .kpi::before,[data-product="signals"] .scard::before{content:"";position:absolute;top:.7rem;right:.7rem;left:auto;bottom:auto;width:6px;height:6px;border-radius:50%;background:var(--ac);opacity:.55;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent);}
[data-product="signals"] .kpi::after{content:none;}
/* warning state: the card speaks with ONE voice — red rail (wraps the corner), soft wash, beacon goes red */
[data-product="signals"] .kpi.warn,[data-product="signals"] .scard.warn{border-left:3px solid var(--red);background:linear-gradient(90deg,color-mix(in srgb,var(--red) 7%,var(--card)),var(--card) 45%);}
[data-product="signals"] .kpi.warn::before,[data-product="signals"] .scard.warn::before{background:var(--red);opacity:.9;box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent);}

/* product card */
.scard{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;overflow:hidden;transition:transform var(--t-base) var(--ease),border-color var(--t-base);box-shadow:var(--sh-md);}
.scard:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--ac,var(--gold)) 55%,transparent);}
.scard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac,var(--gold));}
.scard .tag{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ac,var(--gold));}
.scard h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin:.5rem 0 .35rem;letter-spacing:-.01em;}
.scard p{font-size:.88rem;color:var(--muted);line-height:1.55;}
.scard .lk{display:inline-flex;margin-top:1rem;font-weight:700;font-size:.82rem;color:var(--ac,var(--gold));}

/* ---------- KPI TILE ---------- */
.kpi{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.15rem 1.3rem;box-shadow:var(--sh-sm);overflow:hidden;}
.kpi::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--ac,var(--gold)),transparent 72%);}
.kpi::after{content:"";position:absolute;top:-34%;right:-12%;width:120px;height:120px;border-radius:50%;background:var(--ac,var(--gold));opacity:.06;filter:blur(22px);}
.kpi .kl{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.kpi .kv{font-family:var(--mono);font-weight:700;font-size:1.8rem;color:var(--ink);margin-top:.45rem;line-height:1;letter-spacing:-.03em;}
.kpi .kv .cur{font-size:1rem;color:var(--dim);font-weight:600;}
.kpi .ks{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.78rem;color:var(--muted);}
.delta{font-family:var(--mono);font-weight:700;font-size:.78rem;}
.delta.up{color:var(--green);}.delta.down{color:var(--red);}
/* ---------- KPI BAND (canonical; was page-local in Today v5) ---------- */
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}
@media(max-width:1100px){.kpi-band{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.kpi-band{grid-template-columns:1fr;}}
.kpi{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base);}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.kpi .kl .i{width:21px;height:21px;border-radius:6px;display:inline-grid;place-items:center;background:color-mix(in oklab,var(--ac) 15%,transparent);color:var(--ac);margin-right:.15rem;vertical-align:-5px;}
.kpi .kl .i svg{width:12px;height:12px;}
.kpi .kv{position:relative;z-index:2;white-space:nowrap;text-shadow:0 1px 2px var(--card),0 0 8px var(--card),0 0 14px var(--card);}
.kpi .ks{position:relative;z-index:2;text-shadow:0 1px 2px var(--card),0 0 8px var(--card),0 0 12px var(--card);}
.kpi .tag{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:.06rem .35rem;border-radius:4px;}
.kpi .spark{position:absolute;left:0;right:0;bottom:0;height:48%;opacity:.5;pointer-events:none;z-index:1;transition:opacity var(--t-base) var(--ease);-webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 28%,#000 88%,transparent);}
.kpi .spark svg{width:100%;height:100%;overflow:visible;display:block;}
.kpi .spark .ln{fill:none;stroke:var(--ac);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85;}
.kpi:hover .spark{opacity:1;}


/* ---------- DATA ROWS ---------- */
.lrow{display:flex;align-items:center;gap:1rem;padding:.9rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.lrow.over{border-color:color-mix(in oklab,var(--red) 45%,var(--border));}
.lrow .who{display:flex;flex-direction:column;gap:.15rem;}
.lrow .nm{font-size:.92rem;font-weight:700;color:var(--ink);}
.lrow .nm .id{font-family:var(--mono);font-size:.7rem;color:var(--dim);font-weight:600;}
.lrow .due{font-size:.76rem;color:var(--muted);}
.lrow .due .late{color:var(--red);font-weight:700;}.lrow .due .soon{color:var(--gold);font-weight:700;}
.lrow .amt{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.96rem;color:var(--ink);}
.lrow .acts{display:flex;gap:.4rem;}
.brow{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:1rem;padding:.9rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.bav{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.74rem;flex:none;}
.bwho{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
.bname{font-size:.88rem;font-weight:700;color:var(--ink);}
.baka{font-family:var(--mono);font-size:.62rem;color:var(--gold);font-weight:600;}
.bhandle{font-family:var(--mono);font-size:.68rem;color:var(--dim);}
.bsig{font-size:.72rem;color:var(--muted);text-align:right;line-height:1.3;}
.bout{font-family:var(--mono);font-weight:700;font-size:.88rem;color:var(--ink);text-align:right;}
.btouch{font-size:.66rem;color:var(--dim);text-align:right;}
.bchev{width:18px;height:18px;color:var(--dim);}
/* signal row */
.srow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;padding:.85rem 1.15rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);}
.srow .cnt{display:flex;gap:.5rem;font-family:var(--mono);font-size:.72rem;font-weight:700;}
.srow .cnt .up{color:var(--green);}.srow .cnt .dn{color:var(--red);}
.srow .sub{font-family:var(--mono);font-size:.66rem;color:var(--dim);}

/* ---------- BADGES / PILLS / STAMPS / RISK ---------- */
.badge{display:inline-flex;align-items:center;gap:.32rem;font-size:.66rem;font-weight:700;padding:.2rem .52rem;border-radius:5px;}
.badge .d{width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge.active{color:var(--blueHi);background:var(--blue-soft);}
.badge.repaid{color:var(--green);background:var(--green-soft);}
.badge.overdue{color:var(--red);background:var(--red-soft);}
.badge.late{color:var(--gold);background:var(--gold-soft);}
.pill{font-family:var(--mono);font-size:.6rem;font-weight:700;padding:.14rem .5rem;border-radius:var(--r-pill);}
.pill.due{background:var(--green-soft);color:var(--green);}
.pill.late{background:var(--red-soft);color:var(--red);}
.risk{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;padding:.24rem .58rem;border-radius:var(--r-pill);white-space:nowrap;}
.risk .d{width:6px;height:6px;border-radius:50%;background:currentColor;}
.risk.def{color:var(--red);background:var(--red-soft);}
.risk.flag{color:var(--gold);background:var(--gold-soft);}
.risk.unv{color:var(--muted);background:var(--inset);}
.risk.good{color:var(--green);background:var(--green-soft);}
.stamp{font-family:var(--mono);font-weight:800;font-size:.6rem;letter-spacing:.09em;color:#fff;background:#d23b48;border:1.5px solid #ff7a85;border-radius:5px;padding:.2rem .5rem;text-transform:uppercase;}
.stamp.match{background:linear-gradient(180deg,#ffe49a,#f0a92a);color:#2a1c02;border-color:#ffe49a;}

/* ---------- STATES ---------- */
@keyframes ll-spin{to{transform:rotate(360deg);}}
@keyframes ll-shimmer{100%{background-position:-200% 0;}}
.spinner{width:16px;height:16px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:ll-spin .7s linear infinite;display:inline-block;}
.skel{border-radius:var(--r-sm);background:linear-gradient(100deg,var(--inset) 30%,var(--row-hover) 50%,var(--inset) 70%);background-size:200% 100%;animation:ll-shimmer 1.4s linear infinite;}
.skel-line{height:12px;}.skel-line.lg{height:16px;}.skel-line.sm{height:9px;}
@media(prefers-reduced-motion:reduce){.skel,.spinner{animation-duration:2s;}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1.5rem;}
.empty .ill{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin-bottom:1.1rem;background:var(--gold-soft);color:var(--goldHi);}
.empty .ill svg{width:32px;height:32px;}
.empty h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}
.empty p{font-size:.86rem;color:var(--muted);max-width:42ch;line-height:1.55;margin-bottom:1.2rem;text-wrap:pretty;}

/* ---------- OVERLAYS ---------- */
.annbar{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.6rem 1rem;font-size:.82rem;font-weight:600;color:#2a1c02;background:var(--grad-gold);}
.annbar .link-arw{color:#2a1c02;}
.toast{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--r-sm);box-shadow:var(--sh-lg);font-size:.85rem;color:var(--ink);max-width:340px;}
.toast.warn{border-left-color:var(--gold);}.toast.err{border-left-color:var(--red);}
.modal-scrim{position:absolute;inset:0;background:rgba(4,7,12,.68);backdrop-filter:blur(3px);display:grid;place-items:center;}
.modal{width:min(440px,92%);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;}
.modal .m-b{padding:1.5rem;}
.modal h3{font-size:1.2rem;font-weight:800;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em;}
.modal p{font-size:.9rem;color:var(--muted);line-height:1.55;margin-bottom:1.3rem;}
.modal .m-acts{display:flex;gap:.6rem;justify-content:flex-end;}
.coach{position:relative;background:var(--ink);color:var(--bg);border-radius:var(--r-md);padding:.9rem 1.05rem;max-width:260px;box-shadow:var(--sh-lg);font-size:.82rem;line-height:1.5;}
.coach b{font-weight:800;}
.coach::after{content:"";position:absolute;left:24px;bottom:-7px;width:14px;height:14px;background:var(--ink);transform:rotate(45deg);}

/* ---------- UTILITIES ---------- */
.stack{display:flex;flex-direction:column;gap:.7rem;}
.row-x{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:820px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.grid-3,.grid-4{grid-template-columns:1fr;}}
/* ---------- §5.1.1 narrow (<720): single column, stacked — suite-wide safety net ---------- */
@media(max-width:719px){
  .kpi-band{grid-template-columns:1fr 1fr!important;}
  .layout,.cols,.g2{grid-template-columns:1fr!important;}
  .stand{flex-wrap:wrap;}
  .stand .nums{width:100%;justify-content:flex-start;}
  .wrap{padding-left:1rem;padding-right:1rem;}
}

/* ---- wave 1: canonical focus ring, motion override, discreet mode ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--blueHi);outline-offset:2px;}
[data-product="signals"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--violet);}
[data-product="warden"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--gold);}
[data-product="lobby"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,[data-product="admin"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,[data-product="lab"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--green);}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important;}
html[data-motion="reduce"]{scroll-behavior:auto;}
.llm,.llm-el{cursor:default;}
html[data-discreet="1"] :is(.llm,.llm-el){text-decoration:underline dotted color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:3px;}

/* ---------- ACCESSIBILITY MODES (controls: Accessibility v1; persisted by ll-shell.js) ----------
   data-cv="rg" = red-green safe: repaid family -> cyan, loss family -> magenta.
   Gold, blue, violet, teal unchanged; open stays hollow (shape carries it); chips always print the word. */
html[data-cv="rg"]{--green:#2ec4ef;--greenHi:#5ad3f7;--green-soft:rgba(46,196,239,.13);--red:#ff4fa3;--redHi:#ff79b8;--red-soft:rgba(255,79,163,.14);}
html[data-cv="rg"][data-theme="light"]{--green:#0b7ea8;--greenHi:#0d8fbe;--green-soft:#e3f2f9;--red:#c2186f;--redHi:#d42a80;--red-soft:#f9e6f0;}
/* reduced motion: system preference always honoured; data-motion="reduce" is the manual override (key ll-motion) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}}
/* text size: rem-based components scale from the root */
html[data-fs="112"]{font-size:112.5%}
html[data-fs="125"]{font-size:125%}

/* ll-site.css */
/* LoanLedger — shared marketing chrome: tokens, nav, buttons, footer.
   Load after ll-v5.css and before the page stylesheet. Behaviour lives in ll-site.js. */
:root{--net:var(--ll-accent,#22ccee);--netHi:#6bd9ff;--netGold:var(--ll-accent-alt,#f59e0b);--netGoldHi:#ffd98f;--netInk:#042234;--netEase:var(--ll-ease-out,cubic-bezier(.22,1,.36,1))}
html[data-theme="light"]{--netHi:#0d6478;--netGoldHi:#8a5a06}
a{color:var(--netHi);text-decoration:none}a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--net);outline-offset:2px}
.wrap{width:min(var(--wrap),calc(100% - 3rem));margin:0 auto;position:relative}
.eye{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--netHi)}
.sp{flex:1}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom-color:var(--border-2)}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;min-height:64px;padding:.35rem 0}
.brand{font-family:var(--wordmark);display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:var(--tr-wordmark);white-space:nowrap}
.brand img{width:30px;height:30px}
.nl{display:flex;gap:1.3rem;font-size:.9rem;font-weight:500;color:var(--muted);margin-left:.4rem}
.nl a{color:var(--muted);white-space:nowrap}.nl a:hover{color:var(--ink)}
.llbtn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:0 1.5rem;border-radius:var(--ll-radius-pill,999px);font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:transform .14s var(--netEase),box-shadow .25s,background .25s,border-color .25s}
.llbtn:hover{transform:translateY(-1px)}
.llbtn.sm{min-height:38px;padding:0 1.05rem;font-size:.65rem;letter-spacing:.14em}
.llbtn.cyan,.llbtn.cyan:hover{color:var(--netInk)}
.llbtn.cyan{background:linear-gradient(135deg,#a6fcff,#57e8ff 34%,#18bee7);border:1px solid rgba(195,248,255,.5);box-shadow:0 14px 32px rgba(34,204,238,.28),0 0 24px rgba(34,204,238,.18),inset 0 1px 0 rgba(255,255,255,.3)}
.llbtn.gold,.llbtn.gold:hover{color:#3a1f00}
.llbtn.gold{background:linear-gradient(135deg,#ffe39a,#ffc966 35%,#f59e0b);border:1px solid rgba(255,217,143,.55);box-shadow:0 14px 32px rgba(245,158,11,.28),0 0 24px rgba(245,158,11,.18),inset 0 1px 0 rgba(255,255,255,.3)}
.llbtn.ghost{color:var(--ink);background:rgba(34,204,238,.06);border:1px solid rgba(34,204,238,.28)}
.llbtn.ghost:hover{color:var(--ink);background:rgba(34,204,238,.12);border-color:rgba(34,204,238,.5)}
.foot{padding:2.4rem 0 3rem;border-top:1px solid var(--border-2);display:flex;gap:1.5rem;align-items:center;font-family:var(--mono);font-size:.7rem;color:var(--dim);flex-wrap:wrap}
.foot a{color:var(--muted)}.foot a:hover{color:var(--ink)}
[data-theme="light"] .llbtn.ghost{background:rgba(13,100,120,.06);border-color:rgba(13,100,120,.26)}
[data-theme="light"] .tries a:hover{border-color:rgba(13,100,120,.5)}
.themeb{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 .85rem;border-radius:999px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--border);cursor:pointer;transition:color .2s,border-color .2s}
.themeb:hover{color:var(--ink);border-color:rgba(34,204,238,.45)}
.acts2{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.census{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.64rem;color:var(--muted);white-space:nowrap}
.census b{color:var(--ink);font-weight:700}
.census i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);flex:none}
@media(max-width:900px){.census{font-size:.6rem}.census i{display:none}}
/* footer, grouped (fd.groups) — brand + tag + census, three link columns, one closing line */
.foot.foot2{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.4rem 2rem;align-items:start;padding:3.4rem 0 2.4rem;position:relative}
.foot.foot2::before{content:"";position:absolute;left:22%;right:22%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--netHi) 55%,transparent),transparent)}
.foot2 .fb{display:grid;gap:.8rem;justify-items:start}
.foot2 .fb .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--wordmark);font-size:1.05rem;font-weight:800;letter-spacing:var(--tr-wordmark);color:var(--ink)}
.foot2 .fb .brand img{width:22px;height:22px}
.foot2 .fb p{font-family:var(--font);font-size:.92rem;line-height:1.5;color:var(--muted);max-width:32ch;text-wrap:pretty}
.foot2 .fg{display:grid;gap:.55rem;align-content:start}
.foot2 .fg b{font-size:.6rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--netHi);margin-bottom:.3rem}
.foot2 .fg a{color:var(--text);font-size:.74rem}.foot2 .fg a:hover{color:var(--ink)}
.foot2 .fl{grid-column:1/-1;display:flex;gap:1.5rem;align-items:center;padding-top:1.4rem;border-top:1px solid var(--border-2);color:var(--dim);font-size:.66rem}
@media(max-width:900px){.foot.foot2{grid-template-columns:1fr 1fr}.foot2 .fb{grid-column:1/-1}}

/* landing-v12/landing.css */
:root{--wrap:1240px}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-size:16px;line-height:1.5;overflow-x:hidden}
/* Reserve the DM Sans 800 advances plus each icon/gap before font swap; clip-margin preserves the phone hit extension. */
.nav .brand{width:calc(30px + 6.5341796875rem);flex:none;white-space:nowrap;overflow:clip;overflow-clip-margin:7px}
.foot2 .fb .brand{width:calc(22px + 6.484375rem);flex:none;white-space:nowrap;overflow:clip;overflow-clip-margin:7px}
.nav .brand img,.foot2 .fb .brand img{flex:none}
/* The script's token-only sizing arrives after the accepted actions can paint; reserve their advances and borders here, with room for the glow. */
.nav [data-actions]{width:calc(4px + 15.314453125rem);height:38px;flex:none;flex-wrap:nowrap;white-space:nowrap;overflow:visible}
@media(max-width:600px){
/* Treatment B already clips the wordmark at narrow widths; keep its accepted box and controls. */
.nav:has(.header-treatment) .brand{width:min(calc(30px + 6.5341796875rem),calc(100% - var(--action-width) - 2rem))}
}
.inst.war .eye{color:var(--netGoldHi)}
h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.04em;line-height:.98;text-wrap:balance;font-weight:800}
html[data-face="serif"]{}html[data-face="serif"] :is(h1,h2,h3){font-weight:400;letter-spacing:-.02em;line-height:1}html[data-face="serif"] h1{letter-spacing:-.03em}
html[data-face="system"]{}html[data-face="system"] :is(h1,h2,h3){letter-spacing:-.035em}
h2{font-size:clamp(2.4rem,4.6vw,4.2rem)}
.lede{font-size:1.12rem;color:var(--muted);text-wrap:pretty;line-height:1.55}.lede b{color:var(--text);font-weight:600}
/* nav */
/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(5rem,12svh,6.5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(34,204,238,.055) 0 1px,transparent 1px 34px);-webkit-mask-image:radial-gradient(72% 58% at 50% 28%,#000,transparent);mask-image:radial-gradient(72% 58% at 50% 28%,#000,transparent)}
.sky{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 45% at 32% 4%,rgba(34,204,238,.15),transparent 62%),radial-gradient(55% 40% at 84% 88%,rgba(245,158,11,.09),transparent 62%),radial-gradient(45% 35% at 60% 20%,color-mix(in srgb,var(--violet) 7%,transparent),transparent 70%)}
.copy{position:relative;z-index:2;text-align:center;width:min(1000px,calc(100% - 3rem));margin:0 auto}
.copy h1,.copy .eye,.copy .lede{transition:font-size .5s cubic-bezier(.2,.7,.2,1),margin .5s,opacity .4s,max-height .5s}
.hero.hit .copy h1{font-size:calc(clamp(2.6rem,min(6.2vw,11svh),5.8rem)*var(--hs,1)*.62)}.hero.hit .copy .eye{opacity:0;max-height:0;overflow:hidden}.hero.hit .copy .lede{opacity:0;max-height:0;overflow:hidden;margin-top:0}
h1{font-size:calc(clamp(2.6rem,min(6.2vw,11svh),5.8rem)*var(--hs,1));line-height:.94;letter-spacing:-.05em;max-width:14ch;margin:1.1rem auto 0}
.copy .lede{max-width:60ch;margin:clamp(.8rem,2svh,1.4rem) auto 0;font-size:clamp(1.05rem,1.3vw,1.22rem)}
.hsearch{margin:clamp(1.1rem,3svh,2rem) auto 0;max-width:720px;display:flex;align-items:center;gap:.8rem;height:60px;padding:0 .5rem 0 1.2rem;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .2s}
.hsearch:focus-within,.hsearch.hit{border-color:rgba(34,204,238,.55)}
.hsearch.hit{box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 4px rgba(34,204,238,.14)}
.nohit{margin-top:.7rem;font-family:var(--mono);font-size:.7rem;color:var(--muted)}.nohit[hidden]{display:none}.nohit a{color:var(--netHi);font-weight:700}
.hsearch .go{transition:background .2s}.hsearch .go .sm{display:none}
.hsearch svg{flex:none;color:var(--muted)}
.hsearch input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-family:var(--mono);font-size:1rem}
.hsearch input::placeholder{color:var(--dim)}
.hsearch .k{font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--muted);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:.2rem .5rem}
.hsearch .go{min-height:44px;padding:0 1.35rem;border-radius:999px;background:linear-gradient(135deg,#a6fcff,#57e8ff 34%,#18bee7);border:1px solid rgba(195,248,255,.5);box-shadow:0 10px 26px rgba(34,204,238,.26),inset 0 1px 0 rgba(255,255,255,.3);color:var(--netInk);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center}
.hsearch .go:hover{color:var(--netInk);box-shadow:0 14px 32px rgba(34,204,238,.34),inset 0 1px 0 rgba(255,255,255,.34)}
.tries{margin-top:.9rem;font-family:var(--mono);font-size:.7rem;color:var(--dim);display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;align-items:center}
.tries a{color:var(--text);border:1px solid var(--border);border-radius:999px;padding:.3rem .7rem;min-height:30px;display:inline-flex;align-items:center}
.tries a:hover{border-color:rgba(34,204,238,.5);color:var(--netHi)}
@keyframes up{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
.copy>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.copy>*:nth-child(2){animation-delay:.08s}.copy>*:nth-child(3){animation-delay:.16s}.copy>*:nth-child(4){animation-delay:.24s}.copy>*:nth-child(5){animation-delay:.32s}
/* the wire */
.wirefield{position:relative;flex:1;min-height:clamp(300px,42svh,520px);margin-top:1rem}
.wirefield canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wirefield canvas,.wirefield .labels,#leader{-webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);mask-image:linear-gradient(180deg,transparent,#000 34%)}
.labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.labels span{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.64rem;color:var(--dim);white-space:nowrap;will-change:transform;z-index:3;text-shadow:0 0 4px var(--bg),0 0 2px var(--bg),0 1px 0 var(--bg);opacity:.55;transition:opacity .6s}
.labels span.on{opacity:1}
.labels .ll{font-size:.58rem;color:var(--muted);letter-spacing:.05em}
.labels .yl b{color:var(--text)}
.fm{position:absolute;z-index:3;font-family:var(--mono);font-size:.64rem;color:var(--dim);line-height:1.7;text-shadow:0 0 4px var(--bg),0 1px 0 var(--bg)}
.fm.l{left:1.5rem;top:1.1rem}.fm.r{right:1.5rem;top:1.1rem;text-align:right}
.fm b{color:var(--text);font-weight:700}
#leader{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
#leader path{fill:none;stroke:var(--violet);stroke-width:1;stroke-dasharray:3 4}
.wirefield.focus .legend{opacity:.35}.wirefield.focus .fm{opacity:0}.fm{transition:opacity .4s}
.legend{position:absolute;right:1.5rem;top:3.7rem;transition:opacity .4s;z-index:3;display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;color:var(--dim);text-shadow:0 0 4px var(--bg)}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.35rem;box-shadow:0 0 6px currentColor;background:currentColor}
.legend .ok{color:var(--green)}.legend .bad{color:var(--red)}.legend .op{color:var(--blueHi)}.legend .gd{color:var(--goldHi)}.legend .ob{color:var(--muted)}.legend .ob i{box-shadow:none;opacity:.6}
.wireline{position:relative;z-index:3;display:flex;align-items:center;gap:.9rem;height:44px;border-top:1px solid var(--border-2);font-family:var(--mono);font-size:.7rem;color:var(--muted);padding:0 1.5rem;white-space:nowrap;overflow:hidden}
.wireline .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.7}}
.wireline .lbl{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text);font-size:.62rem}
.wireline .tk{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s;display:inline-block}
.wireline .tk.out{transform:translateY(-8px);opacity:.3}
.wireline .tk b{color:var(--ink)}.wireline em{font-style:normal;font-weight:700}.wireline .ok{color:var(--green)}.wireline .bad{color:var(--red)}.wireline .op{color:var(--blueHi)}.wireline .gd{color:var(--goldHi)}.wireline .ob{color:var(--muted)}
.wireline .ill{margin-left:auto;font-size:.6rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
html.nogl .wirefield canvas,html.nogl .labels{display:none}
html.nogl .wirefield{background:repeating-linear-gradient(90deg,var(--border-2) 0 1px,transparent 1px 9.09%)}
/* bands */
.band{position:relative;padding:7rem 0;border-top:1px solid var(--border-2)}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(34,204,238,.05) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(180deg,rgba(34,204,238,.05) 1px,transparent 1px) 0 0/32px 32px;-webkit-mask-image:radial-gradient(85% 70% at 50% 0%,#000,transparent);mask-image:radial-gradient(85% 70% at 50% 0%,#000,transparent)}
.band::after,.spine::after,.inst::after,.closer .tl{content:"";position:absolute;left:22%;right:22%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac,var(--ink)) 45%,transparent),transparent);pointer-events:none}
.band>.wrap,.spine>.wrap,.inst>.wrap,.closer>.wrap{z-index:1}
.bh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:end;margin-top:1rem}
.bh .lede{max-width:52ch;padding-bottom:.4rem}
/* lineage */
.axis{position:relative;margin-top:4.5rem;padding-top:3.4rem}
.axis .ln{position:absolute;left:0;right:0;top:3.4rem;height:1px;background:linear-gradient(90deg,var(--border),var(--border-strong) 50%,var(--border))}
.axis .yrs.y13{grid-template-columns:repeat(13,1fr)}
.axis .yrs{display:grid;grid-template-columns:repeat(11,1fr);font-family:var(--mono);font-size:.66rem;color:var(--dim)}
.axis .yrs span{position:relative;padding-top:.9rem}
.axis .yrs span::before{content:"";position:absolute;left:0;top:0;width:1px;height:.55rem;background:var(--border-strong)}
.axis .yrs span:first-child,.axis .yrs span:last-child{color:var(--ink);font-weight:700}
.axis .yrs span:last-child{text-align:right}.axis .yrs span:last-child::before{left:auto;right:0}
.pin{position:absolute;top:0;font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.6}.pin b{color:var(--ink);display:block;font-size:.74rem}
.pin.l{left:0}.pin.r{right:0;text-align:right}
.chapters{display:grid;grid-template-columns:repeat(5,1fr);margin-top:4.5rem;border-top:1px solid var(--border-2)}
.ch{padding:1.6rem 1.3rem 1.6rem 1.3rem;border-left:1px solid var(--border-2);display:flex;flex-direction:column;gap:.9rem;min-height:260px}
.ch:first-child{border-left:0;padding-left:0}
.ch .n{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;color:var(--dim)}
.ch .g{height:40px;display:flex;align-items:center;gap:.35rem}.ch .g img{height:40px;width:40px}
.ch .g i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:block}
.ch .g .wip{width:34px;height:34px;border-radius:50%;border:1.5px dashed var(--goldHi)}
.ch h3{font-size:1.35rem;letter-spacing:-.03em;font-weight:700}
.ch p{font-size:.95rem;color:var(--muted);line-height:1.5}
.ch .m{margin-top:auto;font-family:var(--mono);font-size:.64rem;color:var(--dim);letter-spacing:.04em;line-height:1.6}
.ch .m b{color:var(--goldHi)}
.gal .plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:3rem;align-items:start}
.plate{--pc:var(--netHi);position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card-2);color:inherit;transition:transform .35s var(--netEase),border-color .35s,box-shadow .35s}
.plate:hover{color:inherit;transform:translateY(-4px);border-color:color-mix(in srgb,var(--pc) 55%,var(--border));box-shadow:0 30px 60px -40px color-mix(in srgb,var(--pc) 60%,#000)}
.plate .pv{--well:#0f1419;position:relative;aspect-ratio:400/164;min-height:150px;overflow:hidden;background:radial-gradient(85% 70% at 50% 112%,color-mix(in srgb,var(--pc) 12%,transparent),transparent 68%),var(--well)}
.plate .pv svg{position:absolute;inset:0;width:100%;height:100%}
.plate .pv::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(0deg,color-mix(in srgb,var(--well) 78%,transparent),transparent)}
.plate .pt{padding:.85rem 1.05rem 1.05rem;display:flex;flex-direction:column;gap:.3rem}
.plate .pn{font-style:normal;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc)}
.plate .pt b{color:var(--ink);font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.plate .pt span{font-size:.82rem;color:var(--muted);line-height:1.45}
.plate .pt em{font-style:normal;font-family:var(--mono);font-size:.58rem;color:var(--dim);letter-spacing:.06em;margin-top:.45rem;padding-top:.55rem;border-top:1px solid var(--border-2);display:flex;justify-content:space-between;gap:.6rem}
.plate .pt em b{color:var(--pc);font-size:.58rem;letter-spacing:.06em}
.plate.p2{--pc:var(--blueHi)}.plate.p3{--pc:var(--goldHi)}.plate.p4{--pc:var(--green)}.plate.p5{--pc:var(--violet)}
.ancline{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--border-2);font-family:var(--mono);font-size:.68rem;color:var(--dim);display:flex;gap:.7rem;flex-wrap:wrap;align-items:baseline;line-height:1.7}
.ancline a{color:var(--muted);border-bottom:1px solid var(--border)}.ancline a:hover{color:var(--netHi)}
@media(max-width:1000px){.gal .plates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gal .plates{grid-template-columns:1fr}}
/* product panels */
.pz{position:relative;padding:8rem 0;border-top:1px solid var(--border-2);overflow:hidden}
.pz::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 12% 25%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 65%),radial-gradient(45% 50% at 92% 85%,color-mix(in srgb,var(--ac) 7%,transparent),transparent 70%)}
.pz.rev::before{background:radial-gradient(60% 55% at 88% 25%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 65%),radial-gradient(45% 50% at 8% 85%,color-mix(in srgb,var(--ac) 7%,transparent),transparent 70%)}
.pz::after{content:"";position:absolute;left:30%;right:30%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 60%,transparent),transparent)}
.pz.sig{--ac:var(--violet)}.pz.led{--ac:var(--blueHi)}.pz.war{--ac:var(--goldHi)}
.pg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4.5rem;align-items:center}
.pz.rev .pg{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.pz.rev .pg>.txt{order:2}
.lock{display:flex;align-items:center;gap:.9rem}
.lock img{width:56px;height:56px}
.lock .nm{font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;display:flex;align-items:center;gap:.6rem}
.lock .tg{font-family:var(--mono);font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .55rem;border-radius:5px;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.lock small{display:block;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:.4rem;letter-spacing:.08em}
.txt h2{margin-top:1.8rem}
.txt .lede{margin-top:1.2rem;max-width:48ch}
.facts{display:flex;gap:1.8rem;margin-top:1.7rem;flex-wrap:wrap}
.facts span{font-family:var(--mono);font-size:.64rem;color:var(--dim);letter-spacing:.04em;line-height:1.6}
.facts span b{display:block;color:var(--ink);font-size:.82rem;font-weight:700}
.acts{display:flex;gap:1rem;margin-top:2rem;align-items:center;flex-wrap:wrap}
.plink{font-weight:600;font-size:.92rem;color:var(--netHi)}.plink:hover{color:var(--ink)}
/* shots — real UI, one surface, no card stacks */
.shotwrap{position:relative}
.shotwrap::before{content:"";position:absolute;inset:15% -4% -8% -4%;background:radial-gradient(60% 60% at 50% 55%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%);filter:blur(28px);pointer-events:none}
.shot{position:relative;container:shot/inline-size;font-family:var(--ui);color:var(--text);background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--ac) 28%,var(--border));border-radius:18px;box-shadow:0 50px 90px -50px color-mix(in srgb,var(--ac) 45%,#000),0 1px 0 rgba(255,255,255,.06) inset;overflow:hidden}
.shot::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 80%,transparent),transparent);z-index:1}
.sh{display:flex;align-items:center;gap:.8rem;padding:.75rem 1.2rem;border-bottom:1px solid var(--border-2);font-family:var(--mono);font-size:.68rem;color:var(--muted);background:color-mix(in srgb,var(--sunk) 70%,transparent)}
.sh b{color:var(--ink)}.sh .r{margin-left:auto;color:var(--muted);font-size:.7rem;letter-spacing:.06em}.sh .r b{color:var(--ac)}
.sb{position:relative;padding:1.2rem 1.3rem 1.3rem}
.reg{position:relative}.tst{position:absolute;right:.3rem;top:-1.15rem;display:flex;align-items:center;gap:.45rem;background:var(--card);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);border-radius:999px;padding:.32rem .75rem;font-family:var(--mono);font-size:.62rem;color:var(--text);white-space:nowrap;z-index:2;animation:toastIn 8s cubic-bezier(.45,0,.2,1) infinite}
.tst b{color:var(--ac)}.tst i{width:6px;height:6px;border-radius:50%;background:var(--green)}
@keyframes toastIn{0%,6%{transform:translateY(10px) scale(.97);opacity:.35}16%,58%{transform:none;opacity:1}72%,100%{transform:translateY(10px) scale(.97);opacity:.35}}
/* signals record */
.idh{display:flex;align-items:center;gap:1rem}
.avat{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-family:var(--mono);font-size:.9rem;font-weight:800;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.hand{font-family:var(--mono);font-size:1.55rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.stand{font-family:var(--mono);font-size:.76rem;color:var(--text);margin-top:.3rem}.stand b{color:var(--ink)}
.obs{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:.2rem}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.mchip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.04em;padding:.22rem .55rem;border-radius:4px;color:var(--muted);background:var(--inset);white-space:nowrap}
.mchip.ok{color:var(--green);background:var(--green-soft)}.mchip.bad{color:var(--red);background:var(--red-soft)}.mchip.good{color:var(--goldHi);background:var(--gold-soft)}.mchip.open{color:var(--violet);background:var(--violet-soft)}.mchip.role{text-transform:uppercase;letter-spacing:.09em}
.mchip.hi{animation:chipHi 8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes chipHi{0%,20%,70%,100%{box-shadow:0 0 0 0 transparent}32%,58%{box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 60%,transparent)}}
.obar{display:flex;gap:2px;height:8px;margin-top:.8rem}.obar i{display:block;border-radius:2px}
.obar .ok{background:var(--green)}.obar .bad{background:var(--red)}.obar .open{background:repeating-linear-gradient(-45deg,var(--violet) 0 3px,rgba(181,123,255,.24) 3px 7px)}
.reading{font-size:1rem;font-weight:700;color:var(--ink);border-top:1px solid var(--border-2);margin-top:.9rem;padding-top:.7rem;line-height:1.45}
.reading small{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--muted);margin-top:.25rem}
svg text{font-family:var(--mono)}.halo{paint-order:stroke;stroke:var(--card);stroke-width:3.5px}
.tlsvg{display:block;width:100%;height:auto;margin-top:.8rem}
@container shot (max-width:520px){.tlsvg text{display:none}}
.reg{margin-top:.6rem;border-top:1px solid var(--border);font-family:var(--mono);font-size:.72rem}
.reg .h,.reg .r{display:grid;grid-template-columns:52px 64px minmax(0,1.1fr) minmax(0,1fr) 62px;gap:.6rem;padding:.5rem .3rem;border-bottom:1px solid var(--border-2);align-items:center;position:relative}
.reg .h span,.reg .r>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.reg .r>span.mchip{overflow:visible;padding:.16rem .4rem}
.reg .h{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.reg .r{color:var(--text)}.reg .r b{color:var(--ink)}.reg .r .src{color:var(--muted);text-align:right}
.reg .r.new::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ac) 12%,transparent);opacity:0;animation:rowHi 8s cubic-bezier(.45,0,.2,1) infinite;pointer-events:none}
@keyframes rowHi{0%,12%{opacity:0}22%,58%{opacity:1}72%,100%{opacity:0}}
/* ledger book */
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}
.kp>div{padding:.75rem .9rem;border:1px solid var(--border-2);border-radius:10px;background:color-mix(in srgb,var(--sunk) 60%,transparent)}
.kp .kl{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.kp .kv{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--ink);margin-top:.3rem;letter-spacing:-.02em}
.kp .kv small{font-size:.64rem;color:var(--muted);font-weight:500;margin-left:.3rem}.kp .kv.blue{color:var(--ac)}
.lt .lh,.lt .lr{display:grid;grid-template-columns:50px minmax(0,1fr) minmax(0,92px) minmax(0,50px) 44px;gap:.6rem;align-items:center;padding:.55rem .6rem;font-family:var(--mono);font-size:.72rem;white-space:nowrap}
.lt .lh{font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--border)}
.lt .lr{border-bottom:1px solid var(--border-2);color:var(--text)}
.lt .lr b,.lt .lr>span{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;min-width:0}.lt .lr>span{color:var(--text);font-weight:400}
.lt .lr .d{color:var(--dim)}.lt .lr .tk{color:var(--green);font-weight:800;text-align:center}
.lt .lr .op{color:var(--ac);font-weight:800;font-size:.58rem;letter-spacing:.08em;text-align:center}.lt .lr .late{color:var(--red);font-weight:800;font-size:.58rem;letter-spacing:.08em;text-align:center}
.lt .lr.new{animation:rowIn 8s cubic-bezier(.45,0,.2,1) infinite;border-left:3px solid var(--ac);padding-left:calc(.6rem - 3px)}
@keyframes rowIn{0%,8%{transform:translateX(-10px);opacity:.4}20%,64%{transform:none;opacity:1}80%,100%{transform:translateX(-10px);opacity:.4}}
.lt .lr .tk.new{display:inline-block;animation:tickIn 8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes tickIn{0%,30%{transform:scale(.6);opacity:.35}42%,80%{transform:none;opacity:1}92%,100%{transform:scale(.6);opacity:.35}}
.lf{display:flex;gap:1rem;align-items:center;margin-top:1rem;font-family:var(--mono);font-size:.62rem;color:var(--dim);letter-spacing:.04em;flex-wrap:wrap}
.lf .step{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted)}.lf .step i{width:8px;height:8px;border:1.5px solid currentColor;border-radius:2px;display:block}.lf .step.on{color:var(--ac)}.lf .step.on i{border-radius:50%;background:currentColor}
/* warden watch */
.stack3{position:relative;height:200px}
.al{position:absolute;inset:0;background:var(--card);border:1px solid color-mix(in srgb,var(--ac) 25%,var(--border));border-radius:12px;padding:.9rem 1rem;font-family:var(--mono)}
.al.b1{transform:translateY(10px) scale(.97);opacity:.7;animation:ghost1 8s cubic-bezier(.45,0,.2,1) infinite}.al.b2{transform:translateY(20px) scale(.94);opacity:.45;animation:ghost2 8s cubic-bezier(.45,0,.2,1) infinite}
.al.front{animation:alIn 8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes alIn{0%,6%{transform:translateY(-14px) scale(.985);opacity:.6}20%,78%{transform:none;opacity:1}94%,100%{transform:translateY(-14px) scale(.985);opacity:.6}}
@keyframes ghost1{0%,6%,94%,100%{transform:translateY(5px) scale(.985)}20%,78%{transform:translateY(10px) scale(.97)}}
@keyframes ghost2{0%,6%,94%,100%{transform:translateY(12px) scale(.965)}20%,78%{transform:translateY(20px) scale(.94)}}
.al .ah{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:800;letter-spacing:.12em;color:var(--ac)}
.al .ah i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.al .at{font-family:var(--ui);font-size:1.15rem;font-weight:800;color:var(--ink);margin-top:.5rem;letter-spacing:-.02em}
.al .am{font-size:.68rem;color:var(--muted);margin-top:.35rem;line-height:1.55}.al .am b{color:var(--red)}
.al .af{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.al .af span{font-size:.6rem;font-weight:800;letter-spacing:.08em;padding:.2rem .5rem;border-radius:4px;background:var(--red-soft);color:var(--red)}.al .af span.g{background:var(--gold-soft);color:var(--goldHi)}
.al .ar{display:block;font-size:.62rem;color:var(--dim);margin-top:.7rem;padding-top:.55rem;border-top:1px solid var(--border-2)}
.standing{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border-2);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.6}
.standing b{color:var(--ink)}.standing .segs{display:flex;gap:3px}.standing .segs i{width:18px;height:6px;border-radius:2px;background:var(--ac)}.standing .segs i.off{background:var(--inset)}
/* tier truth — typographic */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3.5rem;border-top:1px solid var(--border)}
.tierv{padding:2rem;border-left:1px solid var(--border-2);display:flex;flex-direction:column;gap:1rem;position:relative}
.tierv:first-child{border-left:0;padding-left:0}.tierv:last-child{padding-right:0}
.tierv::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--tc)}
.tierv.free{--tc:var(--green)}.tierv.pro{--tc:var(--violet)}.tierv.max{--tc:var(--goldHi)}
.tierv .tn{display:flex;align-items:baseline;gap:.6rem}.tierv .tn b{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}.tierv .tn span{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.tierv q{display:block;font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.4;quotes:none;letter-spacing:-.01em}
.tierv ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.95rem;color:var(--muted)}
.tierv li{padding-left:1.2rem;position:relative}.tierv li::before{content:"•";position:absolute;left:0;color:var(--tc)}
.tierv .ft{font-family:var(--mono);font-size:.66rem;color:var(--dim);margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border-2);line-height:1.6}
/* closer + footer */
.closer{position:relative;padding:9rem 0;border-top:1px solid var(--border-2);text-align:center;overflow:hidden}
.closer::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%);pointer-events:none}
.closer::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--goldHi) 28%,transparent) 1px,transparent 1.6px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(62% 78% at 50% 100%,#000,transparent);mask-image:radial-gradient(62% 78% at 50% 100%,#000,transparent)}
.closer h2{font-size:clamp(2.6rem,5.4vw,5rem);max-width:18ch;margin:1rem auto 0}
.closer .lede{max-width:52ch;margin:1.4rem auto 0}
.closer .acts{justify-content:center}
/* scroll reveals — from a visible offset, never from nothing */
html.js .rv{opacity:.35;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv.d1{transition-delay:.12s}html.js .rv.d2{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}.copy>*{animation:none}}
/* the header adapts to its own content: rem-based container queries follow the root text size, not only the viewport, so enlarged text hides the links before they can wrap or clip (body pins 16px, so em would not move) */
.nav{container:nav/inline-size}
@container nav (max-width:67.5rem){.nl{display:none}}
@container nav (max-width:37.5rem){.nav .llbtn.ghost{display:none}.nav .wrap{min-height:56px;gap:.4rem 1rem}}
@container nav (max-width:37.5rem){.nav [data-actions]{width:calc(2px + 9.5947265625rem)}}
.step .txt h2{margin-top:1.4rem}
@media(max-width:900px){.bh,.pg,.anc,.pz.rev .pg{grid-template-columns:1fr}.pz.rev .pg>.txt{order:0}.chapters{grid-template-columns:repeat(2,1fr)}.ch{border-left:0;padding-left:0;border-top:1px solid var(--border-2)}.tiles,.tiers{grid-template-columns:1fr}.tierv{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--border-2)}.hsearch .k{display:none}.legend,.fm.r{display:none}.axis .yrs span:not(:first-child):not(:last-child){visibility:hidden}.pin{max-width:45%}.pz{padding:5rem 0}.band{padding:5rem 0}}

/* tweak hooks */
html[data-grain="off"] body::after{display:none}
html[data-anc="off"] .anc{display:none}
html[data-ticker="off"] .wireline{display:none}
html[data-panels="aligned"] .pz.rev .pg{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}html[data-panels="aligned"] .pz.rev .pg>.txt{order:0}html[data-panels="aligned"] .pz.rev::before{background:radial-gradient(60% 55% at 12% 25%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 65%),radial-gradient(45% 50% at 92% 85%,color-mix(in srgb,var(--ac) 7%,transparent),transparent 70%)}
html[data-palette="signals"] .legend :is(.ok,.op,.gd){color:var(--violet)}html[data-palette="ink"] .legend :is(.ok,.op,.gd){color:var(--ink)}
.labels.hide{display:none}
[data-theme="light"] .hsearch{box-shadow:0 24px 50px -30px rgba(20,30,50,.35),inset 0 1px 0 #fff}[data-theme="light"] .shot{box-shadow:0 40px 80px -50px color-mix(in srgb,var(--ac) 40%,#223),0 1px 0 #fff inset}[data-theme="light"] body::after{opacity:.035}[data-theme="light"] .tile{--ink:#f4f6f8;--muted:#9aa3b0;--dim:#566173;--card-2:#0f151d;--border:#222b38;background:#0f151d}
#tweaks{position:relative;z-index:80}
/* search result — assembles from the lit points */
.rescard{position:absolute;left:1.5rem;top:1rem;max-height:calc(100% - 6.4rem);overflow:hidden;z-index:4;width:min(400px,calc(100% - 3rem));background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid color-mix(in srgb,var(--violet) 38%,var(--border));border-radius:16px;padding:1rem 1.1rem 1.05rem;font-family:var(--ui);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--violet) 45%,#000),0 1px 0 rgba(255,255,255,.06) inset;--ac:var(--violet)}
.rescard[hidden]{display:none}
.rescard .rc-h{display:flex;align-items:center;gap:.9rem}.rescard .avat{width:48px;height:48px;font-size:.8rem}.rescard .hand{font-size:1.3rem}
.rescard .chips{margin-top:.8rem}.rescard .reading{font-size:.92rem}.rescard .reading small{white-space:normal}
.rescard .rc-go{display:inline-flex;margin-top:.8rem;font-weight:700;font-size:.9rem;color:var(--violet)}.rescard .rc-go:hover{color:var(--ink)}
@keyframes asIn{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes asChip{from{opacity:.3;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}
@keyframes asBar{from{transform:scaleX(.08)}to{transform:scaleX(1)}}
.rescard.play{animation:asIn .5s ease-out both}
.rescard.play .rc-h{animation:asIn .6s ease-out both;animation-delay:.1s}
.rescard.play .chips .mchip{animation:asChip .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--i,0)*.09s)}
.rescard.play .obar{transform-origin:left;animation:asBar .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.75s}
.rescard.play .reading,.rescard.play .rc-go{animation:asIn .6s ease-out both;animation-delay:1.05s}
/* the record spine — one handle pinned, three products resolve around it */
.spine{position:relative;padding:6rem 0 2rem;border-top:1px solid var(--border-2)}
.sp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4rem;align-items:start;margin-top:3rem}
.sp-pin{position:sticky;top:max(5.5rem,calc(50svh - 340px))}
.sp-steps .step{min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}
.sp-steps .step:first-child{min-height:70svh;justify-content:flex-start;padding-top:1rem}
.sp-steps .step:last-child{min-height:60svh}
.rstage{--ac:var(--violet);position:relative;container:shot/inline-size;font-family:var(--ui);color:var(--text);background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid color-mix(in srgb,var(--ac) 32%,var(--border));border-radius:18px;box-shadow:0 50px 90px -50px color-mix(in srgb,var(--ac) 45%,#000),0 1px 0 rgba(255,255,255,.06) inset;overflow:hidden;transition:border-color .6s,box-shadow .6s}
.rstage::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 80%,transparent),transparent);z-index:1;transition:background .6s}
.rstage[data-view="ledger"]{--ac:var(--blueHi)}.rstage[data-view="warden"]{--ac:var(--goldHi)}
.rtop{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--border-2);font-family:var(--mono);font-size:.66rem;color:var(--muted);background:color-mix(in srgb,var(--sunk) 70%,transparent);flex-wrap:wrap}
.rtop b{color:var(--ink)}
.rview{display:flex;gap:2px;margin-left:auto;background:var(--inset);border-radius:999px;padding:2px}
.rview i{font-style:normal;padding:.22rem .55rem;border-radius:999px;font-weight:700;letter-spacing:.06em;font-size:.6rem;color:var(--dim);cursor:pointer;transition:color .3s,background .3s}
.rview i.on{color:var(--bg);background:var(--ac)}
.plan{display:flex;gap:2px;border:1px solid var(--border);border-radius:999px;padding:2px}
.plan button{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;border:0;background:none;color:var(--dim);padding:.2rem .6rem;border-radius:999px;cursor:pointer;min-height:24px}
.plan button.on{color:var(--ink);background:var(--inset)}
.rbody{padding:1.1rem 1.2rem 1.2rem;position:relative}
.rbody .reg .r .yours{display:none;font-style:normal;font-size:.54rem;font-weight:800;letter-spacing:.1em;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);border-radius:3px;padding:.02rem .3rem;margin-left:.35rem;vertical-align:1px}
.rstage[data-view="ledger"] .reg .r.mine{background:color-mix(in srgb,var(--ac) 10%,transparent);border-left:3px solid var(--ac);padding-left:calc(.3rem - 3px)}
.rstage[data-view="ledger"] .yours{display:inline}
.layer{display:block}
.rlayers{display:grid;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-2)}
.rstage .rlayers>.layer{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .45s var(--netEase),transform .45s var(--netEase)}
.rstage[data-view="signals"] .layer.sig,.rstage[data-view="ledger"] .layer.led,.rstage[data-view="warden"] .layer.war{opacity:1;visibility:visible;transform:none;transition:none}
.lyh{font-family:var(--mono);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);display:flex;gap:.6rem;align-items:center}
.lyh small{color:var(--dim);letter-spacing:.04em;font-weight:500;text-transform:none;margin-left:auto;font-size:.6rem}
.entry{display:grid;grid-template-columns:50px minmax(0,1fr) auto auto;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.72rem;padding:.6rem .7rem;margin-top:.7rem;border:1px solid color-mix(in srgb,var(--ac) 30%,var(--border));border-left:3px solid var(--ac);border-radius:8px;background:color-mix(in srgb,var(--ac) 8%,transparent);color:var(--text);white-space:nowrap}
.entry b{color:var(--ink);overflow:hidden;text-overflow:ellipsis}.entry .d{color:var(--dim)}.entry .op{color:var(--ac);font-weight:800;font-size:.58rem;letter-spacing:.08em}
.prolens{margin-top:.8rem;padding:.7rem .85rem;border:1px dashed color-mix(in srgb,var(--violet) 45%,var(--border));border-radius:8px;font-family:var(--mono);font-size:.66rem;color:var(--text);line-height:1.6;transition:background .4s,border-color .4s}
.prolens b{color:var(--ink)}
.prolens .pl{display:inline-block;font-size:.54rem;font-weight:800;letter-spacing:.1em;color:var(--bg);background:var(--violet);border-radius:3px;padding:.1rem .4rem;margin-right:.45rem;vertical-align:1px}
.prolens .body{display:block;transition:opacity .4s}
.prolens .unlock{display:none;margin-top:.45rem;color:var(--violet);font-weight:700}
.rstage[data-plan="free"] .prolens .body{opacity:.5}.rstage[data-plan="free"] .prolens .unlock{display:block}
.rstage[data-plan="pro"] .prolens{border-style:solid;background:color-mix(in srgb,var(--violet) 8%,transparent)}
.wl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.wl div{padding:.6rem .75rem;border:1px solid var(--border-2);border-radius:8px;background:color-mix(in srgb,var(--sunk) 60%,transparent);line-height:1.55}
.wl b{display:block;color:var(--ink);font-size:.74rem;margin-bottom:.15rem}.wl .rep b{color:var(--red)}
.rfoot{padding:.6rem 1.2rem;border-top:1px solid var(--border-2);font-family:var(--mono);font-size:.62rem;color:var(--dim);display:flex;gap:1rem;flex-wrap:wrap}
.rfoot span:last-child{margin-left:auto;color:var(--ac);transition:color .6s}
/* product modes */
html[data-products="spine"] .pz{display:none}html[data-products="panels"] .spine{display:none}
/* section numerals via counters — hidden sections don't count */
body{counter-reset:sec 1}
.numb{counter-increment:sec}
.numb::before{content:counter(sec,decimal-leading-zero);position:absolute;right:0;top:-.48em;font-family:var(--mono);font-size:clamp(6rem,13vw,12rem);font-weight:700;letter-spacing:-.08em;line-height:1;color:transparent;background-image:linear-gradient(180deg,color-mix(in srgb,var(--ink) 9%,transparent),color-mix(in srgb,var(--ink) 1.5%,transparent));-webkit-background-clip:text;background-clip:text;pointer-events:none;user-select:none}
html[data-nums="off"] .numb::before{display:none}
[data-theme="light"] .numb::before{background-image:linear-gradient(180deg,color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 2%,transparent))}
/* phones */
@media(max-width:1000px){.sp-grid{grid-template-columns:1fr;gap:1.5rem}.sp-pin{position:sticky;top:64px;z-index:6}.rstage .tlsvg,.rstage .reg,.rstage .obs{display:none}.rbody{padding:.9rem 1rem 1rem}.sp-steps .step{min-height:70svh}.sp-steps .step:first-child{min-height:50svh}.spine{padding-top:4rem}}
@media(max-width:600px){h2{font-size:clamp(2rem,9vw,3rem)}.hsearch .go .lg{display:none}.hsearch .go .sm{display:inline}.hsearch{height:56px;padding-left:.9rem;gap:.6rem}.tries a:nth-child(n+4){display:none}.chapters{grid-template-columns:1fr}.ch{min-height:0}.rescard{right:1rem;left:1rem;width:auto;padding:.85rem .9rem}.rescard .hand{font-size:1.1rem}.hero{padding-top:4.6rem}.copy .lede{font-size:1rem}.wl{grid-template-columns:1fr}.rtop{gap:.5rem}.rview{margin-left:0}.plan{margin-left:auto}.pz{padding:4rem 0}.pg{gap:2.2rem}.lock img{width:44px;height:44px}.lock .nm{font-size:1.3rem}}

/* instruments — data art in the wire's language */
.inst{position:relative;padding:7rem 0;border-top:1px solid var(--border-2);overflow:hidden}
.inst::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 50% at 80% 20%,color-mix(in srgb,var(--ac) 10%,transparent),transparent 65%)}
.inst.war::before{background:radial-gradient(55% 50% at 20% 20%,color-mix(in srgb,var(--ac) 10%,transparent),transparent 65%)}
.inst.pay{--ac:var(--blueHi)}.inst.war{--ac:var(--goldHi)}
.ig{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem;align-items:center;margin-top:1rem}
.inst.war .ig{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.inst.war .ig>.txt{order:2}
.inst .txt h2{margin-top:1rem}.inst .lock+h2{margin-top:1.6rem}
h2 em{font-style:normal;color:var(--goldHi);letter-spacing:.02em}
.inst .art{position:relative;aspect-ratio:16/10;min-width:0;border:1px solid color-mix(in srgb,var(--ac) 22%,var(--border));border-radius:18px;background:radial-gradient(70% 60% at 50% 100%,color-mix(in srgb,var(--ac) 8%,transparent),transparent 70%),color-mix(in srgb,var(--card-2) 80%,transparent);overflow:hidden;box-shadow:0 40px 80px -50px color-mix(in srgb,var(--ac) 35%,#000)}
.inst .art::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 70%,transparent),transparent);z-index:2}
.inst .art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lanes{position:absolute;left:1.2rem;right:1.2rem;top:19px;bottom:42px;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none;z-index:2}
.lanes .row{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.lanes .ln{color:var(--text);font-weight:700;text-shadow:0 0 4px var(--card),0 0 2px var(--card),0 1px 0 var(--card);white-space:nowrap;font-size:.62rem;display:flex;align-items:center;gap:.45rem}
.lanes .ln i{font-style:normal;margin-left:.45rem;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--goldHi);border:1px solid color-mix(in srgb,var(--goldHi) 50%,transparent);padding:.05rem .35rem;border-radius:3px;vertical-align:1px}
.lanes .out{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--border-2);padding:.28rem .55rem;border-radius:6px}
.lanes .bar{display:flex;gap:1px;width:96px;height:6px;border-radius:2px;overflow:hidden;background:var(--inset)}.lanes .bar i{display:block;height:100%}
.lanes .out b{color:var(--ink);font-size:.8rem}
.inst .cap{position:absolute;left:1.2rem;right:1.2rem;bottom:.85rem;font-family:var(--mono);font-size:.6rem;color:var(--dim);display:flex;justify-content:space-between;gap:1rem;z-index:2}
.inst .cap em{font-style:normal;font-weight:700}.cap .ok{color:var(--green)}.cap .bad{color:var(--red)}.cap .op{color:var(--blueHi)}.cap .gd{color:var(--goldHi)}.cap .ob{color:var(--muted)}
.stat{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border-2)}
.stat b{font-family:var(--mono);font-size:clamp(2.6rem,4.5vw,4rem);font-weight:700;letter-spacing:-.05em;color:var(--ac);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.98rem;color:var(--text);line-height:1.5}.stat small{display:block;font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:.35rem;letter-spacing:.02em}
.stats3{display:flex;gap:1.8rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--border-2)}
.stats3 span{font-family:var(--mono);font-size:.64rem;color:var(--dim);line-height:1.5;max-width:11rem}.stats3 b{display:block;font-size:1.6rem;color:var(--ac);letter-spacing:-.03em;font-weight:700;margin-bottom:.15rem}
@media(max-width:900px){.ig,.inst.war .ig{grid-template-columns:1fr;gap:2rem}.inst.war .ig>.txt{order:0}.inst{padding:5rem 0}.inst .art{aspect-ratio:4/3}.lanes .ln{font-size:.6rem}.lanes .bar{width:60px}.inst .cap span:last-child{display:none}.tiles{grid-template-columns:1fr}}

[data-theme="light"] .hsearch:focus-within,[data-theme="light"] .hsearch.hit{border-color:rgba(13,100,120,.5)}
[data-theme="light"] .hsearch.hit{box-shadow:0 24px 50px -30px rgba(20,30,50,.35),0 0 0 4px rgba(13,100,120,.12)}
[data-theme="light"] .ancline a:hover{color:var(--netHi)}

/* LANDING-MOBILE-1: on phones the supporting text reaches the reading floor (eyebrows, chapter counters, card headers,
   chips, footnotes were 9.3–11.5px) and touch targets reach 44px through invisible hit areas, so nothing moves. */
@media(max-width:520px),(max-height:500px) and (pointer:coarse){
.eye{font-size:.72rem}
.llbtn.sm{font-size:.7rem}
.nav [data-actions]{width:calc(4px + 16.1142578125rem)}
@container nav (max-width:37.5rem){.nav [data-actions]{width:calc(2px + 10.1689453125rem)}}
.sh,.sh .r{font-size:.74rem}
.cp .mchip,.tries .mchip{font-size:.72rem}
.cp .mchip.tag{font-size:.72rem}
.tries,.hsearch .go,.hsearch .k{font-size:.75rem}
.reading small,.lock small{font-size:.75rem}
.plink{font-size:max(.92rem,12px)}
.kp .kl,.lt .lh{font-size:.66rem}
.kp .kv small{font-size:.7rem}
}
/* below 380px the header keeps one row (a wider action pill wrapped it at 360×800) and the card header keeps its handle whole */
@media(max-width:380px){
.llbtn.sm{padding:0 .85rem;letter-spacing:.08em}
.nav [data-actions]{width:calc(2px + 9.138671875rem)}
.sh,.sh .r{font-size:.7rem}
}
@media(pointer:coarse){
.llbtn.sm{min-height:44px}
.nav [data-actions]{height:44px}
.hsearch input{min-height:44px}
.brand,.plink,.tries .mchip{position:relative}
.brand::after,.tries .mchip::after{content:"";position:absolute;inset:-7px 0}
.plink::after{content:"";position:absolute;inset:-14px 0}
}

/* ll-chips.css */
/* ll-chips.css — the chip set. One grammar for every small labelled unit across LoanLedger: mono, one line, 22px tall, 5px radius, a hairline inset edge.
   .mchip                base (neutral, on the inset surface)
   status  .ok .bad .op .gd .ac   tint + text in the semantic colour — green = money back · red = late/default · blue = capital out (open) · gold = standing/recovered · .ac = the product accent
           add .d for a leading dot; open's dot is HOLLOW (shape carries the state, never colour alone)
   .role                 a neutral outline — what someone is (Borrower · Lender), never a judgement; .role.bad flags a tag
   .tag                  tier / state caps (Free · Pro · Earned · entry earned) — uppercase, accent tint
   .fact                 <em>label</em> value — a labelled figure (CEILING $0 · WATCH synced); colour the value with .bad/.gd/.ok/.op
   .q                    a query chip (try u/handle) — pill, outline, hover ink
   .key                  a keycap (⌘K)
   .sm                   em-scaled, for HUD labels that size with their container
   Aliases kept from the landing: .open → .op · .good → .gd. Load after ll-v5.css / the page's own sheet. */
.mchip{display:inline-flex;align-items:center;gap:.42em;height:22px;padding:0 .55rem;border:0;border-radius:5px;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;color:var(--text);background:var(--inset);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent);vertical-align:middle;text-decoration:none;text-shadow:none}
.mchip b{font-weight:800;color:inherit}
.mchip.d::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.mchip.ok{color:var(--green);background:var(--green-soft)}
.mchip.bad{color:var(--red);background:var(--red-soft)}
.mchip.op,.mchip.open{color:var(--blueHi);background:var(--blue-soft)}
.mchip.gd,.mchip.good{color:var(--goldHi);background:var(--gold-soft)}
.mchip.ac{color:var(--ac,var(--goldHi));background:color-mix(in srgb,var(--ac,var(--goldHi)) 14%,transparent)}
.mchip.op.d::before,.mchip.open.d::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.mchip.role,.mchip.role.good{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--border)}
.mchip.role.bad{color:var(--red);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 45%,transparent)}
.mchip.tag{height:20px;padding:0 .5rem;font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--goldHi));background:color-mix(in srgb,var(--ac,var(--goldHi)) 14%,transparent);box-shadow:none}
.mchip.tag.ok{color:var(--green);background:var(--green-soft)}.mchip.tag.gd{color:var(--goldHi);background:var(--gold-soft)}.mchip.tag.bad{color:var(--red);background:var(--red-soft)}.mchip.tag.op{color:var(--blueHi);background:var(--blue-soft)}
.mchip.fact{gap:.5em;color:var(--ink);background:var(--inset);box-shadow:inset 0 0 0 1px var(--border-2)}
.mchip.fact em{font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mchip.fact.bad{color:var(--red)}.mchip.fact.gd{color:var(--goldHi)}.mchip.fact.ok{color:var(--green)}.mchip.fact.op{color:var(--blueHi)}
.mchip.q{height:30px;padding:0 .8rem;border:0;border-radius:999px;font-weight:600;color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--border);cursor:pointer;transition:color .15s,box-shadow .15s}
.mchip.q:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mchip.key{height:22px;padding:0 .45rem;border:0;border-radius:6px;font-size:.66rem;color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1px var(--border),inset 0 -1px 0 var(--border)}
.mchip.sm{height:1.9em;padding:0 .5em;font-size:.9em;border-radius:.35em}.mchip.sm.d::before{width:.45em;height:.45em}

/* landing-v12/journey5.css */
/* The Record v15.1 — pinned stage, ink points with a soft body under them, a drafted layer of hairline boundaries over them, scroll chapters. The landing is dark-locked (the command centre); light tokens stay in ll-v5.css untouched. */
.jour{position:relative;--gut:clamp(1.5rem,4vw,5rem);--col:min(32rem,40vw)}
body{counter-reset:sec 7}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;container-type:size}
/* the plate: a faint dot grid under the field, corner ticks + a readout on the 16:9 frame */
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 1px 1px,var(--border) 1px,transparent 1.6px) 0 0/28px 28px;opacity:.5;-webkit-mask-image:radial-gradient(55% 70% at 66% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(55% 70% at 66% 50%,#000 20%,transparent 100%)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;transition:opacity .5s}
.stage.focus canvas,.stage.focus #jlabels{opacity:.18}
.stage.nogl canvas,.stage.nogl #jlabels,.stage.nogl .jfoot,.stage.nogl .jhud{display:none}
/* the crisp overlay: SVG in the same 16:9 frame (viewBox 160×90 → unit coords ×160/×90); it resolves after the points settle (--w5/--w7 set per frame) */
#jvec{position:absolute;left:var(--fx,0%);top:var(--fy,0%);width:var(--fw,100%);height:var(--fh,100%);pointer-events:none;z-index:2;overflow:visible}
#jvec line,#jvec circle{vector-effect:non-scaling-stroke}#jvec .k5 line{vector-effect:none}
#jvec .k5{opacity:var(--w5,0)}#jvec .k7{opacity:var(--w7,0)}
/* the drafted layer: one hairline (1 CSS px = --hair user units, set on resize) at each count's true radius; journey5.js interpolates the primitives between formations and writes stroke colour inline */
#jgeo circle:not(.bz),#jgeo line{fill:none;vector-effect:none;stroke-width:var(--hair,.12);stroke-linecap:round}
/* the bezel: a graduated ring of ticks riding a settled boundary (one dashed circle per ring — dash = 1 px, stroke = the tick length, so no per-tick elements); the lit run is a second circle */
#jgeo .bz{fill:none;vector-effect:none;stroke-linecap:butt}html[data-bezel="off"] #jgeo .bz{display:none}
#jgeo{transition:opacity .5s}.stage.focus #jgeo{opacity:.18}html[data-geo="off"] #jgeo{display:none}
/* the inner ring sits inside the hole label below ~1100px — the label owns the centre */
@container (max-width:1100px){#gE{display:none}}
/* 02: the thread's axis, and the two doors — the request path draws from the thread to its orb; the prearranged one comes in from off-frame, dashed */
#jvec .k2{opacity:var(--w2,0)}#jvec .k2 .rail{stroke:var(--text);stroke-width:1;stroke-dasharray:2 5;opacity:.7}
#jvec .k2 line.door{vector-effect:none;stroke:var(--blueHi);stroke-width:.16;opacity:.85;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--w2,0))*100)}#jvec .k2 line.d2{vector-effect:non-scaling-stroke;stroke:var(--blue);stroke-width:1;stroke-dasharray:3 3;stroke-dashoffset:0;opacity:.7}#jvec .k2 .dn{fill:var(--bg);stroke:var(--blueHi);stroke-width:1.2}
#jvec .k5 line{stroke-width:.16;fill:none;opacity:.75;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--w5,0))*100)}
#jvec .ok{stroke:var(--green);fill:var(--green)}#jvec .bad{stroke:var(--red);fill:var(--red)}#jvec .op{stroke:var(--blueHi);fill:var(--blueHi)}
#jvec .seal *{vector-effect:none}#jvec .seal .sd{fill:var(--violet);stroke:var(--bg);stroke-width:2.5}#jvec .seal .sr{fill:none;stroke:var(--bg);stroke-width:1.1}#jvec .seal .ss{fill:none;stroke:var(--bg);stroke-width:3.8;stroke-linecap:round}#jvec .seal .sc{fill:var(--bg)}
#jvec .k5 .nr,#jvec .k9 .nr{fill:none;stroke-width:.14;opacity:.45;vector-effect:none}
/* Ledger's scan: a blue hairline crossing the record while the join runs (--s6 while 0<W<1); the book's loans light behind it */
#jvec .k6{opacity:var(--s6,0);transition:opacity .35s}#jvec .k6 .scan{stroke:var(--blueHi);stroke-width:1;opacity:.85}
/* the search's web: the same idiom as Signals, drawn in over the dimmed record (--w9) */
#jvec .k9{opacity:var(--w9,0)}#jvec .k9 line{vector-effect:none;stroke-width:.16;fill:none;opacity:.75;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--w9,0))*100)}
#jvec text{font-family:var(--mono);font-weight:700;font-size:1.7px;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:.7px;stroke-linejoin:round}#jvec text.hs{font-size:1.25px;font-weight:500;fill:var(--muted)}
.jl.v.s5{opacity:calc(var(--o5,0)*var(--w5,0))}.jl.v.s7{opacity:calc(var(--o7,0)*var(--w7,0))}
.jhud,#jlabels{position:absolute;left:var(--fx,0%);top:var(--fy,0%);width:var(--fw,100%);height:var(--fh,100%);pointer-events:none;z-index:2;transition:opacity .5s}
.jhud i{position:absolute;width:14px;height:14px;border:1px solid var(--border-strong,#2b3542);opacity:calc(.3 + .7*var(--ent,1))}
/* the entrance: the HUD arrives with the record (--ent 0→1 over 2.8 s, set on the stage per frame) — from a visible state, never from nothing */
.jhud .ro{opacity:calc(.35 + .65*var(--ent,1));transform:translateX(calc((1 - var(--ent,1))*12px))}.stage::before{opacity:calc(.5*var(--ent,1))}
.jhud .tl{left:1rem;top:4.4rem;border-right:0;border-bottom:0}.jhud .tr{right:1rem;top:4.4rem;border-left:0;border-bottom:0}.jhud .bl{left:1rem;bottom:1rem;border-right:0;border-top:0}.jhud .br{right:1rem;bottom:1rem;border-left:0;border-top:0}
.jhud .ro{position:absolute;left:calc(var(--col) + 2rem);right:2.2rem;bottom:1.2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;overflow:hidden}.jhud .ro b{color:var(--muted)}.jhud .ro span.x{overflow:hidden;text-overflow:ellipsis;min-width:0}
@container (max-width:1100px){.jhud .ro .x2{display:none}}
@media(max-height:600px){.jhud .ro{display:none}}
.jour:not([data-scene="0"]) .jhud .ro{opacity:0;transition:opacity .3s}
.jhud .ro em{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.jl{position:absolute;margin-top:var(--clr,0px);font-family:var(--mono);font-size:max(11px,.78cqw);line-height:1.35;color:var(--muted);white-space:nowrap;text-shadow:0 0 6px var(--bg),0 0 3px var(--bg),0 1px 0 var(--bg);transition:opacity .25s linear}
/* every label sits on a HUD plate (paint only — box-shadow spread, no layout change) so it reads over the stipple; the hole label is the ring's empty centre and needs none */
.jl:not(.hole){background:color-mix(in srgb,var(--bg) 74%,transparent);box-shadow:0 0 0 .38em color-mix(in srgb,var(--bg) 74%,transparent);border-radius:3px}
.jl .gd{color:var(--goldHi)}
.jl b{color:var(--ink);font-weight:700}.jl i,.jl em{display:block;font-style:normal;font-size:.92em}.jl i{color:var(--text)}.jl em{color:var(--muted)}.jl em.gap{margin-top:.55em}
@container (max-width:1000px){.jl em{display:none}}
.jl .ok{color:var(--green)}.jl .bad{color:var(--red)}.jl .op{color:var(--blueHi)}
/* a drawn ratio: one tick per ask, the funded one lit */
.jl .ticks{display:flex;gap:2px;margin:.35em 0 .3em}.jl.r .ticks{justify-content:flex-end}.jl .ticks i{display:block;width:.34em;height:.95em;background:var(--dim);border-radius:1px}.jl .ticks i.on{background:var(--ink)}
.jl.r{transform:translate(-100%,0)}.jl.mid{transform:translateY(-50%)}.jl.r.mid{transform:translate(-100%,-50%)}.jl.c{transform:translateX(-50%);text-align:center}.jl.c.mid{transform:translate(-50%,-50%)}
.jl.up{transform:translateY(-100%)}.jl.c.up{transform:translate(-50%,-100%)}.jl.r.up{transform:translate(-100%,-100%)}
.jl.r i,.jl.r em{text-align:right}
/* leader ticks: a hairline from the label toward its orb */
.jl.c:not(.mid)::before,.jl.r.mid::after{content:"";position:absolute;background:var(--border-strong,#2b3542)}
.jl.c:not(.mid):not(.up)::before{left:50%;top:-1em;width:1px;height:.75em}.jl.c.up::before{left:50%;bottom:-1em;width:1px;height:.75em}
.jl.r.mid::after{right:-1em;top:50%;width:.75em;height:1px}
.jl.hole .big{display:block;font-family:var(--display);font-size:max(1.5rem,2.2cqw);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.2em;color:var(--ink)}
.jour[data-scene="0"] .jl{opacity:0!important;visibility:hidden!important}
.jl.s1{opacity:var(--o1,0);visibility:var(--v1,hidden)}.jl.s2{opacity:var(--o2,0);visibility:var(--v2,hidden)}.jl.s3{opacity:var(--o3,0);visibility:var(--v3,hidden)}.jl.s4{opacity:var(--o4,0);visibility:var(--v4,hidden)}.jl.s5{opacity:var(--o5,0);visibility:var(--v5,hidden)}.jl.s6{opacity:var(--o6,0);visibility:var(--v6,hidden)}.jl.s7{opacity:var(--o7,0);visibility:var(--v7,hidden)}
/* the legend: one HUD card per scene (top-right) — a bordered plate with the scene's accent as a hairline along its top edge, rows, a footnote below a rule; chips inside use the chip set at em scale */
.jl.lg{--lga:var(--muted);padding:.65em .85em .7em;border:1px solid var(--border);border-radius:6px;background:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 12px 30px -18px rgba(0,0,0,.7);min-width:15em;text-shadow:none}
.jl.lg::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,transparent 8%,var(--lga) 50%,transparent 92%)}
.jl.lg.s5{--lga:var(--violet)}.jl.lg.s6{--lga:var(--blueHi)}.jl.lg.s7{--lga:var(--goldHi)}
.jl.lg>b{display:block;font-size:1.02em;margin-bottom:.15em}.jl.lg>b .n{font-weight:500;color:var(--muted)}
.jl.lg .rw{display:flex;justify-content:space-between;gap:1.4em;font-size:.92em;line-height:1.5}.jl.lg .rw i{display:inline;font-size:1em;color:var(--text)}.jl.lg .rw i:last-child{color:var(--muted)}.jl.lg .rw.on i{color:var(--ink)}
.jl.lg .row{display:flex;gap:.35em;margin:.55em 0 .15em;justify-content:flex-end}
.jl.lg em:first-of-type{margin-top:.5em;padding-top:.45em;border-top:1px solid var(--border-2)}.jl.lg em.gap{margin-top:.5em}
.jl.lg .ticks{margin:.45em 0 .35em}
/* bottom-right: chapter index (numerals, the live one named) + the plate's caption */
.jfoot{position:absolute;right:var(--gut);bottom:clamp(1rem,3svh,2rem);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;opacity:0;transition:opacity .4s;pointer-events:none}
.jour:not([data-scene="0"]) .jfoot{opacity:1;pointer-events:auto}
.jrail{display:flex;gap:.35rem;align-items:center}
.jrail button{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:0 .75rem;min-height:32px;cursor:pointer;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.jrail button span{display:none}.jrail button.on{color:var(--bg);background:var(--ink);border-color:var(--ink)}.jrail button.on span,.jrail button:hover span{display:inline}.jrail button:hover{color:var(--ink)}.jrail button.on:hover{color:var(--bg)}
.jrail .keys{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:.5rem;white-space:nowrap}@media(hover:none){.jrail .keys{display:none}}
.jrail .sep{width:1px;height:14px;background:var(--border);margin:0 .25rem}
/* the nav hairline: journey progress, in the current chapter's accent (set per frame by journey4.js) */
.nav .jprog{position:absolute;left:0;bottom:-1px;height:1px;width:100%;transform-origin:0 50%;transform:scaleX(var(--jp,0));background:var(--jpc,var(--muted));opacity:var(--jpo,0);transition:opacity .3s,background-color .4s;pointer-events:none}
/* section plates: the field, rendered once per marked section (journey4.js sets --plate), ghosted behind the lower page */
.plate{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--plate-o,.07);background:var(--plate,none) right 0 center/auto 118% no-repeat;-webkit-mask-image:radial-gradient(70% 90% at 78% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(70% 90% at 78% 50%,#000 25%,transparent 100%)}
.inst.pay>.wrap,.band>.wrap,.closer>.wrap{position:relative;z-index:1}html[data-plates="off"] .plate{display:none}
.jrail button.sig.on{background:var(--violet);border-color:var(--violet);color:#fff}.jrail button.led.on{background:var(--blueHi);border-color:var(--blueHi);color:var(--bg)}.jrail button.war.on{background:var(--goldHi);border-color:var(--goldHi);color:var(--bg)}
.jcap{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-align:right;line-height:1.6;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}.jcap b{color:var(--text)}
.jcap .pro{display:none}.jour[data-run="products"] .jcap .cen{display:none}.jour[data-run="products"] .jcap .pro{display:inline}
/* chapters scroll over the pinned stage; blocks are transparent and let pointer events through to the stage (the legacy .ch lineage rules in landing.css are neutralised here) */
.chs{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.chs>.ch,.chs>.ch:first-child{position:relative;min-height:130svh;display:flex;flex-direction:column;justify-content:flex-start;gap:0;border:0;padding:17svh var(--gut) 4rem}
.chs>.ch:last-child{min-height:150svh}
/* census chapters read at the field's centre line (the hero is centred too); the instruments keep the reading line — their shells are tall */
@media(min-width:901px){.chs>.ch:not(.h0):not(.pr){padding-top:max(17svh,calc(50svh - 8.5rem))}}
.cp{position:relative;width:var(--col);margin-left:var(--fx,0%);pointer-events:auto}
.cp::before{content:"";position:absolute;inset:-2rem -5rem -2rem calc(-1*var(--gut) - 2rem);z-index:-1;background:linear-gradient(90deg,var(--bg) 0 55%,transparent);opacity:.9;pointer-events:none}
.ch .num{font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.16em;margin-bottom:.7rem}
/* LANDING-MOBILE-1: the chapter counter reads at the phone floor (it was 9.92px) */
@media(max-width:520px),(max-height:500px) and (pointer:coarse){.ch .num{font-size:.7rem}}
.ch h2{font-size:clamp(2.1rem,3.4vw,3.5rem);margin-top:.7rem;letter-spacing:-.045em;line-height:.96;color:var(--ink);text-shadow:0 0 8px var(--bg),0 0 3px var(--bg)}
.ch p{font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.5;color:var(--muted);margin-top:1rem;text-wrap:pretty;text-shadow:0 0 6px var(--bg),0 0 2px var(--bg)}.ch p b{color:var(--text)}
.ch .plink{display:inline-flex;margin-top:1.1rem;font-family:var(--mono);font-size:.72rem;color:var(--netHi);font-weight:700;letter-spacing:.06em}
/* the hero is chapter zero: the same left column, the record dim on the right */
.chs>.ch.h0{min-height:100svh;justify-content:center;padding:clamp(5rem,12svh,7rem) var(--gut) 5rem}
.ch.h0 .cp{width:min(36rem,44vw)}
.h0 h1{font-size:clamp(2.4rem,4.4vw,4.6rem);line-height:.94;letter-spacing:-.05em;max-width:12ch;margin:1rem 0 0;text-shadow:0 0 10px var(--bg),0 0 3px var(--bg)}
.h0 .lede{margin:1.2rem 0 0;max-width:46ch;font-size:clamp(1rem,1.15vw,1.15rem);text-shadow:0 0 8px var(--bg),0 0 2px var(--bg)}
.h0 .hsearch{margin:clamp(1.1rem,3svh,1.8rem) 0 0;max-width:100%}
.h0 .tries{justify-content:flex-start}
.h0 h1,.h0 .eye,.h0 .lede{transition:font-size .5s cubic-bezier(.2,.7,.2,1),margin .5s,opacity .4s,max-height .5s}
.jour.hit .h0 h1{font-size:clamp(1.6rem,2.8vw,2.9rem)}.jour.hit .h0 .eye,.jour.hit .h0 .lede{opacity:0;max-height:0;overflow:hidden;margin-top:0}
.h0 .cp>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}.h0 .cp>*:nth-child(2){animation-delay:.08s}.h0 .cp>*:nth-child(3){animation-delay:.16s}.h0 .cp>*:nth-child(4){animation-delay:.24s}.h0 .cp>*:nth-child(5){animation-delay:.32s}
.jour .rescard{position:relative;left:auto;top:auto;right:auto;width:100%;margin:1rem 0 0;max-height:none;text-align:left}
.cue{position:absolute;left:var(--gut);bottom:clamp(1.2rem,4svh,2.6rem);font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:auto}
.cue a{color:var(--muted)}
@media(min-width:901px){.cue{left:calc(var(--fx,0%) + 2.2rem)}}.cue a:hover{color:var(--ink)}
/* the instruments: product shells in the copy column, the field settles into each product on the right */
.ch.pr{--ac:var(--violet)}.ch.led{--ac:var(--blueHi)}.ch.war{--ac:var(--goldHi)}
.ch.pr .cp{width:min(30rem,38vw)}
.ch.pr .lock img{width:44px;height:44px}.ch.pr .lock .nm{font-size:1.3rem}
/* palette discipline: the command centre is ink + gold, the instruments bring their own accent — the old site cyan (--netHi) never shows on this page */
.jour .eye{color:var(--ac,var(--muted))}.jour .plink{color:var(--ac,var(--ink))}.jour .plink:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.jour .nohit a,.jour .cue a{color:var(--text)}.jour .nohit a:hover,.jour .cue a:hover{color:var(--ink)}
.jour .hsearch{border-color:var(--border);background:color-mix(in srgb,var(--card) 88%,transparent)}
.jour .hsearch:focus-within,.jour .hsearch.hit{border-color:color-mix(in srgb,var(--ink) 32%,transparent);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.jour .hsearch .go,.jour .hsearch .go:hover{background:var(--ink);color:var(--bg);border:1px solid var(--ink);box-shadow:none;font-family:var(--mono);font-weight:800}
.jour .hsearch .go:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 16%,transparent)}
.jour .hsearch svg{color:var(--dim)}
/* open = capital out = blue (never violet, never red) — the outcome bar matches the chips and the field */
.jour .obar .open{background:repeating-linear-gradient(-45deg,var(--blueHi) 0 3px,color-mix(in srgb,var(--blueHi) 24%,transparent) 3px 7px)}
.jour .chips{gap:.4rem;margin-top:.9rem}
.ch.pr h2{font-size:clamp(1.9rem,2.8vw,2.8rem);margin-top:1.1rem}.ch.pr p{margin-top:.7rem;font-size:clamp(.95rem,1vw,1.05rem)}
.ch.pr .shot{margin-top:1.1rem;font-size:.85rem}.ch.pr .shot .sh{flex-wrap:nowrap;gap:.6rem}.ch.pr .shot .sh>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ch.pr .shot .sh .r{flex:none;margin-left:auto}.ch.pr .shot .sb{padding:.85rem 1rem 1rem}.ch.pr .lt .lr,.ch.pr .lt .lh{padding:.42rem .5rem}.ch.pr .kp{margin-bottom:.7rem}.ch.pr .kp>div{padding:.6rem .75rem}
.ch.pr .shot .hand{font-size:1.25rem}.ch.pr .shot .avat{width:44px;height:44px;font-size:.8rem}.ch.pr .reading{font-size:.9rem}
.ch.pr .al{position:relative;inset:auto}
.ch.pr .plink{margin-top:1rem}
/* the Ledger shell — the real Today view, abridged: a tools rail (Book · Notes · FX · Schedules · Watch, the lock says private), three KPI tiles with smooth curves (text haloed over the line; amplitude honest — a 20% swing fills the tile), then the book joined against the record (borrower · out in its own currency · due · what the record says about that handle), a per-currency footer — never summed */
.trail{display:flex;gap:.85rem;align-items:center;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.65rem;white-space:nowrap;overflow:hidden}
.trail .on{color:var(--ac);box-shadow:inset 0 -1px 0 var(--ac);padding-bottom:.15rem}.trail b{color:var(--text)}
.trail .lk{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);text-transform:none;letter-spacing:.04em;font-weight:500}.trail .lk i{position:relative;width:7px;height:6px;border:1px solid currentColor;border-radius:1.5px;margin-top:3px}.trail .lk i::before{content:"";position:absolute;left:1px;right:1px;top:-4px;height:4px;border:1px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}
.kp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.tc{position:relative;padding:.55rem .65rem 1.75rem;border:1px solid var(--border-2);border-radius:10px;background:color-mix(in srgb,var(--sunk) 60%,transparent);overflow:hidden;min-width:0}
.tc .kl{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc .kv{position:relative;z-index:1;font-family:var(--mono);font-size:clamp(.85rem,4.2cqi,1.15rem);font-weight:700;color:var(--ink);margin-top:.3rem;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 0 6px var(--card),0 0 3px var(--card),0 1px 0 var(--card)}.tc .kv small{font-size:.6em;color:var(--muted);font-weight:500}
.tc .kd{position:relative;z-index:1;display:inline-block;max-width:100%;background:var(--card);border-radius:3px;padding:0 .2rem;margin-left:-.2rem;font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}.tc .kd b{color:var(--green)}.tc .kd b.op{color:var(--blueHi)}
.tc .tsp{position:absolute;left:0;right:0;bottom:0;width:100%;height:34px;overflow:visible}.tc .tsp .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.tc .tsp .ar{stroke:none}.tsp.ok{color:var(--green)}.tsp.op{color:var(--blueHi)}.tsp.ac{color:var(--ac)}
.book{margin-top:.6rem;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;font-family:var(--mono)}
.book .bh{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .7rem;font-size:.62rem;color:var(--muted);border-bottom:1px solid var(--border-2);background:color-mix(in srgb,var(--sunk) 60%,transparent)}.book .bh b{color:var(--ink)}
.book .br{display:grid;grid-template-columns:minmax(6.5em,1fr) max-content max-content max-content;gap:.6rem;align-items:center;padding:.4rem .7rem;font-size:.62rem;color:var(--text);border-bottom:1px solid var(--border-2)}.book .br:last-child{border-bottom:0}
.book .br.h{font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.35rem .7rem}
.book .br>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book .amt,.book .due,.book .br.h span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.book .who{color:var(--ink);font-weight:600;display:flex;align-items:center;gap:.4rem}
.book .nt{flex:none;width:8px;height:9px;border:1px solid var(--dim);border-radius:1.5px;background:linear-gradient(var(--dim),var(--dim)) 2px 2px/3px 1px no-repeat,linear-gradient(var(--dim),var(--dim)) 2px 4px/3px 1px no-repeat}
.book .amt em{font-style:normal;color:var(--dim);font-size:.9em;margin-left:.3em}.book .due.late{color:var(--red);font-weight:700}
.book .rec{display:flex;justify-content:flex-end;overflow:visible;font-size:.68rem}
.bf{display:flex;justify-content:space-between;gap:.5rem .9rem;flex-wrap:wrap;margin-top:.5rem;font-family:var(--mono);font-size:.7rem;color:var(--muted)}.bf b{color:var(--ink)}
/* narrow shells (the copy column below ~1100px, phones): the due column steps out so the borrower and the record stay whole */
@container shot (max-width:420px){.book .br{grid-template-columns:minmax(6.5em,1fr) max-content max-content}.book .due,.book .br.h span:nth-child(3){display:none}.trail{gap:.7rem}.tc .kd .x2{display:none}}
/* copy fades in as it enters and out as it leaves — from a visible state, never from nothing */
@supports (animation-timeline:view()){.ch:not(.h0) .cp{animation:cpfade linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}
@keyframes cpfade{0%{opacity:.3;transform:translateY(18px)}16%{opacity:1;transform:none}74%{opacity:1;transform:none}100%{opacity:.3;transform:translateY(-10px)}}
@media(max-width:900px){.chs>.ch{min-height:120svh;padding:52svh 1.25rem 6svh}.chs>.ch:last-child{min-height:130svh}.chs>.ch.h0{min-height:100svh;justify-content:flex-end;padding:5rem 1.25rem 4rem}
.cp,.ch.h0 .cp,.ch.pr .cp{width:100%;margin-left:0}.cp::before{inset:-1.5rem -1.25rem;background:linear-gradient(180deg,transparent,var(--bg) 32%);opacity:1}
/* chapters 01–06: the copy's first lines get a clear backing where the copy column meets the art on tablets and short screens; the hero keeps its gentler fade (LANDING-READ-1) */
.ch:not(.h0) .cp::before{inset:-3.5rem -1.25rem -1.5rem;background:linear-gradient(180deg,transparent,var(--bg) 3.5rem)}
.jl:not(.hole):not(.m){display:none}.jl.hole{background:var(--bg);padding:.25rem .45rem;border-radius:8px}.jl.hole .big{font-size:1.25rem}.jfoot,.jhud,.cue{display:none}#gE{display:none}
.ch h2{font-size:clamp(1.9rem,8vw,2.6rem)}.ch p{font-size:1rem}.h0 h1{font-size:clamp(2.2rem,10vw,3rem)}
.ch.pr .shot{font-size:.82rem}.ch.pr .shot .kp{grid-template-columns:repeat(3,1fr);gap:.5rem}.ch.pr h2{font-size:clamp(1.6rem,7vw,2.2rem)}}
/* LANDING-MOBILE-1: below 380px the hero eyebrow sat on the disc rings (the phone backing only turns solid a third of the way down); the hero copy now backs from its top edge like the chapters do, the artwork itself untouched */
@media(max-width:380px){.h0 .cp::before{inset:-2rem -1.25rem -1.5rem;background:linear-gradient(180deg,transparent,var(--bg) 2rem)}}

/* landing-v12/journey6.css */
/* v16 proof layer. The v15 design system, page structure and product UI stay untouched. */
html[data-motion-proof] .stage::before{opacity:calc(.50 - var(--opening16,1)*.32)}
html[data-motion-proof] #jgeo{opacity:calc(1 - var(--opening16,1));transition:none}
html[data-motion-proof] #jvec .k2{opacity:calc(var(--w2,0)*(1 - var(--opening16,1)))}
html[data-motion-proof] .stage.focus #jgeo{opacity:calc((1 - var(--opening16,1))*.18)}
#draft16{fill:none;pointer-events:none;opacity:var(--opening16,1);transition:none}
#draft16 *{fill:none;stroke:var(--muted);stroke-width:.7;vector-effect:non-scaling-stroke}
#draft16 .lens16{opacity:calc(var(--lens16,1)*.48)}
#draft16 .lens16 ellipse{stroke:var(--text);stroke-width:.65;opacity:.55}
#draft16 .lens16 .back16{opacity:.22}
#draft16 .lens16 .inner16{opacity:.42}
#draft16 .register16{stroke:var(--goldHi);opacity:.65;stroke-width:.7}
#draft16 .routes16{opacity:var(--route16,0)}
#draft16 .routes16 path{stroke:var(--blueHi);stroke-width:.8;opacity:.52}
#draft16 .routes16 .pre16{stroke:var(--blue)}
#draft16 .dest16{opacity:var(--dest16,0)}
#draft16 .dest16 circle{stroke-width:.7;stroke:var(--blueHi);opacity:.55}
#draft16 .dest16 .pre16{stroke:var(--blue)}
#draft16 .dest16 .thread16{opacity:.42}
#draft16 .dest16 .wafer16{stroke:var(--blueHi);opacity:.16}
.stage.focus #draft16{opacity:calc(var(--opening16,1)*.18)}
html[data-geo="off"] #draft16{display:none}
.census16{max-width:23em;background:linear-gradient(90deg,transparent,var(--bg) 16%);padding:.25rem 0 .45rem 1rem}
.jl.other16{font-size:.56rem;opacity:var(--o2,0)}
html[data-motion-proof] .stage canvas{transition:opacity .25s}
/* V16C is (.70,.515) in the same cropped frame on every device; the box keeps the SVG's 6:5 aspect. */
html[data-motion-proof] .fallback16{position:absolute;left:calc(var(--fx,0%) + var(--fw,100%)*.425);top:calc(var(--fy,0%) + var(--fh,100%)*.107592593);width:calc(var(--fw,100%)*.55);height:calc(var(--fh,100%)*.814814815);opacity:.46;pointer-events:none;z-index:0;color:var(--muted)}
.fallback16 svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.65}
.fallback16 svg ellipse:nth-child(2n){opacity:.25}
.stage[data-engine="webgl"] .fallback16{display:none}
html[data-motion-proof] .stage.engine-enter #jc{animation:landing-field16 .45s ease both;transition:none}
.stage[data-engine="webgl"].engine-enter .fallback16{display:block;animation:landing-outline16 .45s ease both}
@keyframes landing-field16{from{opacity:0}}
@keyframes landing-outline16{to{opacity:0}}
.stage.engine-pending canvas{opacity:0}
.stage.nogl .fallback16{display:block}
.motion-fallback-note{font-family:var(--mono);font-size:.65rem;color:var(--muted);margin-top:.65rem;max-width:42ch}
.sample16{display:none}
/* Preview copy is held at full opacity; real-page scroll reading behavior is untouched. */
.jour[data-preview="true"] .ch .cp{animation:none!important;opacity:1!important;transform:none!important}
.jour[data-preview="true"] .h0 .cp>*{animation:none!important}
@media(max-width:900px){
 html[data-motion-proof] .census16{display:none}
 .sample16{display:block;position:absolute;left:1.25rem;top:4.65rem;z-index:4;color:var(--muted);font-family:var(--mono);font-size:.52rem;letter-spacing:.02em;pointer-events:none}
 #draft16 .routes16{opacity:calc(var(--route16,0)*.6)}
}
@media(prefers-reduced-motion:reduce){html[data-motion-proof] .stage canvas{transition:none}}
html[data-motion="reduce"] .stage canvas{transition:none}
@media(prefers-reduced-motion:reduce){html[data-motion-proof] .stage.engine-enter #jc{animation:none}.stage[data-engine="webgl"].engine-enter .fallback16{display:none;animation:none}}
html[data-motion="reduce"] .stage.engine-enter #jc{animation:none}
html[data-motion="reduce"] .stage[data-engine="webgl"].engine-enter .fallback16{display:none;animation:none}

.stage.nogl #jvec{display:none}

@media(max-width:900px){
 html[data-motion-proof] .foot2 .census{max-width:100%;white-space:normal;flex-wrap:wrap;row-gap:.2rem}
 .sample16{top:auto;bottom:.8rem;font-size:.49rem}
 .jl.prelabel16{font-size:.51rem}
 .jl.prelabel16 em{display:none}
}

/* landing-v12/warden-example.css */
/*
THESIS: Warden checks an incoming identity against a prior report at the community perimeter.
OWN-WORLD: Inherit v16's dark drafted particle field, neutral stipple, gold checkpoint, red reports, and sans/mono type.
STORY: Read the report before lending; the existing Open Warden action leads to the registry.
FIRST VIEWPORT: Current introduction left; filled round field right with one upper-right checkpoint and compact evidence annotation. Mobile places the field above the copy.
FORM: User-pinned v15 particle/perimeter composition in the shared stage. The inspection clock starts after the chapter settles; scrolling navigates the page without seeking the check.
*/
.chs>#ch7{padding-top:max(10rem,calc(50svh - 11rem))}
#ch7 .cp{width:min(30rem,38vw)}
#ch7 .cp::before{
  inset:-4rem -5rem -6rem calc(-1 * var(--gut));
  background:linear-gradient(90deg,var(--bg) 0 55%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 4rem,#000 calc(100% - 6rem),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 4rem,#000 calc(100% - 6rem),transparent);
}
.warden-intro{max-width:29rem}
#ch7 .warden-intro h2{margin-top:1.55rem;font-size:clamp(2.5rem,3.95vw,4.1rem);line-height:.98;letter-spacing:-.055em}
#ch7 .warden-intro p{max-width:31ch;margin-top:1.1rem;font-size:1.05rem;line-height:1.6}
#ch7 .warden-intro .lock small{font-size:.66rem;color:var(--muted)}
#ch7 .warden-open{min-height:44px;align-items:center;gap:.7rem;margin-top:1.8rem;font-size:.8rem;border-bottom:1px solid color-mix(in srgb,var(--goldHi) 42%,transparent)}
#ch7 .warden-caption{margin-top:1.25rem;font:11px/1.5 var(--mono);color:var(--muted)}
#jvec .k7 *, .warden-fallback svg *{vector-effect:non-scaling-stroke}
#jvec .k7 .guard,.warden-fallback .guard{fill:none;stroke:var(--goldHi);stroke-width:1;stroke-dasharray:2.5 4;opacity:.6}
#jvec .k7 .tick{stroke:var(--goldHi);stroke-width:1;opacity:.7}
#jvec .k7 .tick.mn{opacity:.35}
#jvec .k7 .checkpoint-arc{fill:none;stroke:var(--goldHi);stroke-width:1.7}
#jvec .k7 .rep,.warden-fallback .rep{stroke:var(--goldHi);stroke-width:1;stroke-dasharray:1 3;opacity:.8}
#jvec .k7 .rn-halo{fill:var(--goldHi);opacity:.13}
#jvec .k7 .rn,.warden-fallback .rn{fill:var(--goldHi)}
#jvec .k7 .tgt,.warden-fallback .tgt{fill:none;stroke:var(--red);stroke-width:1.25}
#jvec .k7 .tgt2{fill:none;stroke:var(--red);stroke-width:1;stroke-dasharray:1.5 3.5;opacity:.4}
#jvec .k7 .identity,.warden-fallback .identity{fill:var(--red)}
#jvec .k7 .evidence-leader{fill:none;stroke:var(--red);stroke-width:1;opacity:.4}
.jl.warden-match{font-size:clamp(12px,.85cqw,14px);line-height:1.6;text-align:left;background:color-mix(in srgb,var(--bg) 82%,transparent);box-shadow:0 0 14px 8px color-mix(in srgb,var(--bg) 82%,transparent)}
.jl.warden-match .warden-result{display:block;color:var(--red);font-size:.95em;letter-spacing:.06em}
.jl.warden-match b{display:block;font-weight:600}
.jl.warden-match i{text-align:left;color:var(--muted);font-size:.95em}
.jl.warden-community{font-size:clamp(10px,.72cqw,12px);color:var(--muted);letter-spacing:.08em}
.jl.warden-community::before{display:none}
html[data-motion-proof] .fallback16{opacity:calc(.46 * (1 - var(--warden-presence,0)))}
.warden-fallback{
  position:absolute;pointer-events:none;z-index:1;
  left:max(0px,calc((100cqw - 177.7778cqh)/2));top:max(0px,calc((100cqh - 56.25cqw)/2));
  width:min(100cqw,177.7778cqh);height:min(100cqh,56.25cqw);
  opacity:var(--warden-presence,0);
}
.warden-fallback svg{display:block;width:100%;height:100%}
.warden-fallback .neutral{fill:var(--muted);opacity:.38}
.warden-fallback .gold{fill:var(--goldHi);opacity:.85}
.warden-fallback .reported{fill:var(--red);opacity:.65}
.stage[data-engine="webgl"] .warden-fallback{display:none}
.stage.nogl .warden-fallback{display:block}
html[data-motion-proof] .jour .warden-fallback .jl{opacity:1!important;visibility:visible!important}
@media(max-width:900px){
  .chs>#ch7{padding:52svh 1.25rem 6rem;min-height:140svh}
  #ch7 .cp{width:100%;max-width:36rem}
  #ch7 .cp::before{inset:-5rem -1.25rem -4rem;background:linear-gradient(180deg,transparent,var(--bg) 5rem,var(--bg) calc(100% - 4rem),transparent);-webkit-mask-image:none;mask-image:none}
  #ch7 .warden-intro h2{font-size:clamp(2.45rem,8vw,3.5rem)}
  #ch7 .warden-intro p{font-size:1rem}
  #ch7 .warden-open{margin-top:1.35rem}
  .jl.warden-match{font-size:12px;line-height:1.45}
  .jl.warden-community{font-size:10px}
  .warden-fallback{left:calc(-100% * .38 / .62);top:7%;width:calc(100% / .62);height:auto;aspect-ratio:16/9}
}

/* The introduction stays beside the check until the chapter yields to the next section. */
#ch7 .cp{position:sticky;top:max(10rem,calc(50svh - 11rem));animation:none}
#ch7 .warden-caption{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem 1rem}
.warden-replay{display:inline-flex;align-items:center;gap:.4rem;min-height:32px;padding:.2rem 0;border:0;background:none;color:var(--goldHi);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.warden-replay[hidden],.jour:has(.stage.nogl) .warden-replay{display:none}
.warden-replay:focus-visible{outline:2px solid var(--goldHi);outline-offset:5px;border-radius:2px}
.warden-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#jvec .k7 .tgt,#jvec .k7 .tgt2{stroke:color-mix(in srgb,var(--red) calc(var(--warden-match-amount,1)*100%),var(--ink))}
#jvec .k7 .identity{fill:color-mix(in srgb,var(--red) calc(var(--warden-match-amount,1)*100%),var(--ink))}
#jvec .k7 .checkpoint-arc{opacity:var(--warden-check,1)}
#jvec .k7 .rn-halo{opacity:calc(.08 + .13*var(--warden-check,1))}
#jvec .k7 .rep{opacity:calc(.8*var(--warden-link,1))}
#jvec .k7 .evidence-leader{opacity:calc(.5*var(--warden-evidence,1))}
#jlabels .warden-result{color:color-mix(in srgb,var(--red) calc(var(--warden-match-amount,1)*100%),var(--goldHi))}
#jlabels .warden-evidence{opacity:var(--warden-evidence,1)}
@media(max-width:900px){#ch7 .cp{top:52svh}}
@media(prefers-reduced-motion:reduce){.warden-replay{display:none}}
html[data-motion="reduce"] .warden-replay{display:none}

#ch7 .warden-caption{display:block}
.warden-controls{display:flex;align-items:center;flex-wrap:wrap;gap:0 1.1rem;margin-top:.25rem}
.warden-controls button{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.2rem 0;border:0;background:none;font:inherit;cursor:pointer;text-underline-offset:4px}
.warden-controls button[hidden],.warden-identity-target[hidden]{display:none}
.warden-trace,.warden-pause{color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent)}
.warden-controls button:hover,.warden-trace[aria-pressed="true"]{color:var(--goldHi);text-decoration-color:currentColor}
.warden-controls .warden-trace:disabled{color:var(--muted);opacity:.5;text-decoration:none;cursor:default}
.warden-controls button:focus-visible{outline:2px solid var(--goldHi);outline-offset:3px;border-radius:2px}
.warden-interaction-layer{position:absolute;left:var(--fx,0%);top:var(--fy,0%);width:var(--fw,100%);height:var(--fh,100%);z-index:3;pointer-events:none}
.warden-identity-target{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer}
.warden-identity-target:hover{border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.warden-identity-target:focus-visible{outline:2px solid var(--goldHi);outline-offset:4px}
.stage.nogl .warden-interaction-layer,.jour:has(.stage.nogl) .warden-controls{display:none}
#jvec .k7 .community-route{fill:none;stroke:var(--goldHi);stroke-width:calc(.7px + .4px*var(--warden-focus,0));stroke-linejoin:round;opacity:calc(.03 + .62*var(--warden-focus,0))}
#jvec .k7 .community-signal{fill:none;stroke:var(--goldHi);stroke-width:1.15;stroke-dasharray:12 100;stroke-linecap:round;opacity:calc(.65*var(--warden-signal,0))}
#jvec .k7 .community-source{fill:var(--goldHi)}
#jvec .k7 .rn-halo{opacity:calc(.08 + .13*var(--warden-check,1) + .12*var(--warden-arrival,0) + .12*var(--warden-focus,0))}
#jvec .k7 .rep{opacity:calc((.65 + .35*var(--warden-focus,0))*var(--warden-link,1));stroke-width:calc(1px + .4px*var(--warden-focus,0))}
#jvec .k7 .evidence-leader{opacity:calc((.5 + .5*var(--warden-focus,0))*var(--warden-evidence,1));stroke-width:calc(1px + .35px*var(--warden-focus,0))}
#jvec .k7 .tgt2{opacity:calc(.4 + .5*var(--warden-focus,0))}
#jlabels .warden-evidence{color:color-mix(in srgb,var(--ink) calc(var(--warden-focus,0)*100%),var(--muted))}
@media(prefers-reduced-motion:reduce){.warden-controls .warden-pause,.warden-controls .warden-replay{display:none}}
html[data-motion="reduce"] .warden-controls .warden-pause,html[data-motion="reduce"] .warden-controls .warden-replay{display:none}

#jvec .k7 .perimeter-response{fill:none;stroke:var(--goldHi);stroke-width:1.8;stroke-linecap:round;opacity:var(--warden-perimeter,0)}
#jvec .k7 .guard{opacity:calc(.55 + .3*var(--warden-perimeter,0))}
#jvec .k7 .warden-subject{opacity:var(--warden-subject,1)}
#jvec .k7 .community-route{stroke-width:calc(.7px + .5px*var(--warden-focus,0));opacity:calc(.025 + .55*var(--warden-focus,0) + .06*var(--warden-signal,0))}
#jvec .k7 .community-signal{stroke-width:1.4;stroke-dasharray:14 114;opacity:calc(.82*var(--warden-signal,0))}
.jl.warden-steps{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:11px;color:var(--muted);white-space:nowrap}
.warden-step{padding-bottom:4px;border-bottom:1px solid transparent}
.warden-steps>span[aria-hidden]{opacity:.45}
.stage[data-warden-step="0"] .step-name,.stage[data-warden-step="1"] .step-record,.stage[data-warden-step="2"] .step-evidence{color:var(--goldHi);border-bottom-color:currentColor}
.stage[data-warden-phase="watch"] .warden-match b{visibility:hidden}
.stage[data-warden-phase="watch"] .warden-match .warden-result{color:var(--goldHi)}
.stage[data-warden-phase="watch"] .warden-match .warden-evidence{opacity:1;color:var(--muted)}
.warden-controls .warden-trace{min-width:14ch;text-align:left}
.warden-controls .warden-pause{min-width:13ch;text-align:left}
@media(max-width:900px){.jl.warden-steps{font-size:11px;gap:.55rem}}
/* LANDING-MOBILE-1: below 400px the community plate and the steps plate touched (5% at 360×800); the steps plate keeps its header clearance and drops a little */
@container (max-width:400px){.jl.warden-steps{margin-top:calc(var(--clr,0px) + .45em)}}
@media(max-width:600px){
 .chs>#ch7{--warden-copy-top:max(47svh,calc(77vw + 7svh + 2rem));padding-top:var(--warden-copy-top)}
 #ch7 .cp{top:var(--warden-copy-top)}
}
@media(min-width:601px) and (max-width:900px){
 .chs>#ch7{padding-top:49svh}
 #ch7 .cp{top:49svh}
 .warden-fallback{--warden-still-width:min(calc(100cqw / .62),87.15svh);width:var(--warden-still-width);left:calc(50% - var(--warden-still-width)*.71);top:calc(max(26svh,4rem + 12.5svh + .75rem) - var(--warden-still-width)*.2925)}
}
@media(min-width:901px) and (max-height:799px){
 .warden-fallback{transform:translateY(-3%)}
}

.warden-report{--report-reveal:1;position:absolute;z-index:4;left:calc(100vw - 2*var(--gut) - min(21rem,28vw));top:calc(5.5rem - max(10rem,50svh - 11rem));width:min(21rem,28vw);font:12px/1.45 var(--mono);color:var(--text);padding:.4rem 0;pointer-events:auto;text-shadow:0 0 6px var(--bg),0 0 3px var(--bg)}
.warden-report-heading{display:grid;gap:.15rem;min-height:2.9em;margin:.35rem 0}
.warden-report-kicker{display:flex;justify-content:space-between;gap:.8rem;color:var(--muted);font-size:10px;letter-spacing:.04em}
.warden-report-result{color:var(--goldHi)}
.warden-report-identity{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.warden-report-body{border-top:1px solid var(--border-strong);margin-top:.55rem;padding-top:.5rem;opacity:var(--report-reveal);clip-path:inset(0 0 calc((1 - var(--report-reveal))*100%) 0);transform:translateY(calc((1 - var(--report-reveal)) * -4px))}
.warden-report-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem .7rem;font-size:11px}
.warden-report-meta>span{color:var(--red)}
.warden-report blockquote{margin:.4rem 0;font:12px/1.5 var(--font);color:var(--ink)}
.warden-report-source{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.warden-trace-key{position:absolute;top:100%;left:0;display:flex;align-items:center;gap:.65rem;height:1.8rem;color:var(--goldHi);font-size:10px;opacity:0}
.warden-trace-key i{font-style:normal;color:var(--muted)}
.warden-report[data-inspecting="true"] .warden-trace-key{opacity:1}
.warden-report[data-revealed="true"] .warden-report-result{color:var(--red)}
#jlabels .warden-match,.warden-fallback .warden-match{display:none!important}
#jvec .k7 .stored-report{fill:none;stroke:var(--red);stroke-width:1;opacity:var(--warden-memory,.22)}
.warden-fallback .stored-report{fill:none;stroke:var(--red);stroke-width:1;opacity:1}
/* The found report carries a gold "!" while its evidence is unfolded (operator request 2026-09-11); the old
   marker-to-source connector only ever read as a stray bar through the icon, so it stays in the markup but is not drawn. */
#jvec .k7 .report-source-line{display:none}
#jvec .k7 .stored-report-lines{opacity:calc(1 - var(--warden-evidence,0))}
#jvec .k7 .stored-report-mark,.warden-fallback .stored-report-mark{stroke:var(--goldHi);stroke-width:1.6;stroke-linecap:round}
#jvec .k7 .stored-report-mark{opacity:calc(var(--warden-evidence,0)*(.75 + .25*var(--warden-focus,0)))}
.warden-fallback .stored-report-lines{display:none}
/* LANDING-MOBILE-1: on phones, portrait or landscape, the card's supporting lines read at 12px (they were 10–11px, under the reading floor); the card's layout is unchanged */
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
.warden-report .warden-report-kicker,.warden-report .warden-report-meta,.warden-report .warden-report-source,.warden-report .warden-trace-key,.warden-controls .warden-trace,.warden-controls button,#ch7 .warden-caption,#ch7 .warden-intro .lock small{font-size:12px}
}
#jvec .k7 .community-route{opacity:calc(.025 + .06*var(--warden-signal,0))}
.jour:has(.stage.nogl) .warden-controls{display:flex}
@media(max-width:900px){
 #ch7 .cp{position:relative;top:auto}
 .warden-report{position:relative;inset:auto;width:100%;max-width:36rem;margin:0 0 1.5rem;padding:.6rem 0;min-height:11.5rem}
 .warden-report blockquote{font-size:14px}
 .warden-report-kicker,.warden-report-source,.warden-report-meta{font-size:11px}
 .warden-report-result,.warden-report-identity{font-size:13px}
 .chs>#ch7{min-height:calc(var(--warden-copy-top,49svh) + 48rem)}
}
@media(prefers-reduced-motion:reduce){.warden-report-body{transform:none;clip-path:none}}
html[data-motion="reduce"] .warden-report-body{transform:none;clip-path:none}
@media(min-width:601px) and (max-width:900px) and (max-height:600px){.jl.warden-community,.jl.warden-steps{display:none!important}}

/* WARDEN-READ-1: below 900px the copy column stacks report → controls → introduction, so Trace evidence sits under the
   report it holds and the reader never leaves the field to reach it. The markup keeps the desktop reading order
   (introduction, then controls); reading-flow lets sequential focus follow the visual stack where supported. */
@media(max-width:900px){
 #ch7 .cp{display:flex;flex-direction:column;align-items:stretch;reading-flow:flex-visual}
 #ch7 .warden-report{order:0;margin:0}
 #ch7 .warden-caption{order:1;margin:.5rem 0 1.85rem}
 #ch7 .warden-intro{order:2}
 .warden-report .warden-trace-key{position:static;margin-top:.3rem}
 /* a Tab that lands on a control scrolls the report and field in with it instead of centring the button alone */
 .warden-controls button{scroll-margin-top:45svh}
}
@media(min-width:601px) and (max-width:900px) and (max-height:600px){
 /* short landscape: the report reads across two columns so the field, report and controls share one screen */
 .warden-report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:1.5rem;min-height:0;padding:.35rem 0 .2rem}
 .warden-report-heading{min-height:0;margin:.3rem 0 0}
 .warden-report-body{grid-column:2;grid-row:1/4;margin-top:0;padding:0 0 0 1.25rem;border-top:0;border-left:1px solid var(--border-strong)}
 .warden-report .warden-trace-key{grid-column:1;height:1.5rem;margin-top:.35rem}
 #ch7 .warden-caption{margin:.15rem 0 1.5rem}
 .warden-controls button{scroll-margin-top:80svh}
}