/* ===========================================================================
   FACES - served from our own origin
   Downloaded from Google Fonts once and committed. The content policy is
   font-src 'self', the box is the only thing that has to be up for the app to
   render, and a dashboard should not wait on a third party to draw its labels.
   Archivo is the variable cut: one file carries every weight 100-900 AND the
   width axis, which is what makes the display face genuinely expanded.
   =========================================================================== */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
    src: url('../fonts/archivo-100_900-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 125%;
    font-display: swap;
    src: url('../fonts/archivo-100_900-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   AURORA LTC - the whole design, in one file
   ---------------------------------------------------------------------------
   Built to the canvas at _stack/design/"Aurora LTC - Redesign.dc.html".
   Every value below is lifted from it: the same oklch triples, the same
   paddings, the same type sizes, the same 1px hairlines.

   Two decisions the canvas implies rather than states:

   1. Nothing is rounded. Not a card, not a button, not an input. That single
      restraint is what makes the screen read as instrumentation instead of a
      web app, so it is enforced globally rather than per component.

   2. The canvas asks for 'Archivo Expanded', which is not a family Google
      serves - the request is silently dropped and the mockup falls back to
      plain Archivo. Archivo IS variable on the width axis, so the display face
      here loads that axis and sets font-stretch:125%. That is what the canvas
      was drawing towards; matching the font-loading bug instead would be
      matching a mistake.

   Colour is load-bearing and means one thing only:
      lime  - a condition passes, a number is in our favour, the system is live
      red   - a condition blocks, a number is against us, an action is final
      amber - held: neither broken nor ready
   =========================================================================== */

/* ===========================================================================
   TOKENS
   =========================================================================== */
:root {
    /* Ground. Six steps, all at the same near-neutral hue so the accent is the
       only chromatic event on the page. */
    --paper-0:  oklch(10% 0.006 250);   /* terminal well */
    --paper-1:  oklch(11% 0.006 250);   /* rail, ticker, login ground */
    --paper-2:  oklch(12% 0.006 250);   /* inputs */
    --paper:    oklch(13% 0.006 250);   /* page */
    --paper-3:  oklch(15% 0.006 250);   /* panels */
    --paper-4:  oklch(16% 0.006 250);   /* the login card */
    --paper-5:  oklch(24% 0.008 250);   /* an unlit knob */

    /* Ink */
    --ink:      oklch(97% 0.004 250);
    --ink-2:    oklch(85% 0.006 250);
    --ink-3:    oklch(60% 0.010 252);
    --ink-4:    oklch(46% 0.010 255);
    --ink-5:    oklch(40% 0.010 255);
    --ink-6:    oklch(38% 0.010 255);
    --ink-7:    oklch(35% 0.010 255);

    /* State */
    --lime:     oklch(88% 0.205 128);
    --lime-ink: oklch(20% 0.06 128);
    --lime-13:  oklch(88% 0.205 128 / 0.13);
    --lime-14:  oklch(88% 0.205 128 / 0.14);
    --lime-22:  oklch(88% 0.205 128 / 0.22);
    --red:      oklch(65% 0.21 27);
    --red-2:    oklch(72% 0.19 27);
    --red-14:   oklch(65% 0.21 27 / 0.14);
    --amber:    oklch(83% 0.16 85);
    --amber-14: oklch(83% 0.16 85 / 0.14);
    /* Used only in the ambient wash, never on a component. */
    --steel:    oklch(72% 0.09 250);

    /* Hairlines. The canvas uses five weights of white; naming them stops the
       markup from inventing a sixth. */
    --line:     oklch(100% 0 0 / 0.08);
    --line-lo:  oklch(100% 0 0 / 0.05);
    --line-mid: oklch(100% 0 0 / 0.06);
    --line-up:  oklch(100% 0 0 / 0.10);
    --line-hi:  oklch(100% 0 0 / 0.12);
    --line-sw:  oklch(100% 0 0 / 0.14);   /* a control's edge, not a surface's */
    --line-max: oklch(100% 0 0 / 0.24);
    --fill:     oklch(100% 0 0 / 0.06);
    --fill-nav: oklch(100% 0 0 / 0.055);
    --fill-row: oklch(100% 0 0 / 0.04);

    /* Type */
    --font:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Archivo', system-ui, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    --rail: 236px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================================================
   BASE
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    /* clip, never hidden - hidden would kill the sticky rail and topbar */
    overflow-x: clip;
}

body {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--lime); text-decoration: none; }
a:hover { color: oklch(94% 0.16 128); }
::selection { background: oklch(88% 0.205 128 / 0.28); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }

/* Nothing in this design is round. */
input, select, textarea, button { border-radius: 0; font: inherit; }

:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.mono   { font-family: var(--mono); }
.up     { color: var(--lime); }
.down   { color: var(--red); }
.held   { color: var(--amber); }
.dim    { color: var(--ink-4); }
.dim-2  { color: var(--ink-3); }
.num    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }
.sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* The display face: Archivo pushed to the wide end of its width axis. */
.display {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* The lower-case mono caps used as every label in this system. */
.label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.label-sm {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
}

/* ===========================================================================
   MOTION
   =========================================================================== */
@keyframes spinSlow  { to { transform: rotate(360deg); } }
@keyframes spinBack  { to { transform: rotate(-360deg); } }
@keyframes sweep     { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes breathe   { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes flicker   { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes caret     { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tick      { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes drift     { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-56px,-56px,0); } }
@keyframes scan      { 0% { transform: translateX(-30%); } 100% { transform: translateX(430%); } }
@keyframes scanY     { 0% { transform: translateY(-10%); opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { transform: translateY(1100%); opacity: 0; } }
@keyframes rise      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.rise    { animation: rise 500ms var(--ease) both; }
.rise-1  { animation: rise 500ms var(--ease) 60ms both; }
.rise-2  { animation: rise 500ms var(--ease) 120ms both; }
.rise-3  { animation: rise 500ms var(--ease) 80ms both; }

/* Scrollbars are chrome the terminal look does not want. */
[data-noscroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-noscroll]::-webkit-scrollbar { display: none; }

/* ===========================================================================
   APP SHELL
   =========================================================================== */
.shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
    min-height: 100vh;
}

/* A wash in the two far corners, fixed so it does not travel with the page. */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(56rem 40rem at 88% -6%, oklch(88% 0.205 128 / 0.055), transparent 62%),
        radial-gradient(48rem 36rem at 4% 104%, oklch(72% 0.09 250 / 0.06), transparent 60%);
}

/* ---------------------------------------------------------------- the rail */
.rail {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 24px 14px;
    background: var(--paper-1);
    border-right: 1px solid var(--line);
}

.rail-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 2px 8px 20px;
    border-bottom: 1px solid var(--line);
}

/* The mark: an outlined square with a breathing core. It is the whole logo. */
.mark {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1.5px solid var(--lime);
}
.mark::after {
    content: '';
    position: absolute;
    inset: 4.5px;
    background: var(--lime);
    animation: breathe 3s ease-in-out infinite;
}
.mark-lg { width: 26px; height: 26px; flex-basis: 26px; }
.mark-lg::after { inset: 5px; }

.brand-name {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.brand-sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-4);
}

.rail-nav { display: flex; flex-direction: column; gap: 1px; }

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 10px 10px 13px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
    background: transparent;
    transition: color 140ms ease, background 140ms ease;
}
.nav-link i { width: 15px; text-align: center; font-size: 12px; }
.nav-link span:not(.nav-tag):not(.nav-mark) { flex: 1; }
.nav-link:hover { color: var(--ink); background: var(--fill-row); }
.nav-link.on { color: var(--ink); font-weight: 600; background: var(--fill-nav); }

/* The active page is marked on the edge, not by a colour swap - the eye finds
   an edge faster than it re-reads six labels. */
.nav-mark { display: none; }
.nav-link.on .nav-mark {
    display: block;
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--lime);
}

.nav-tag { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.nav-link.on .nav-tag { color: var(--lime); }

.rail-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.rail-book { padding: 0 8px; }
.rail-book .label-sm { margin-bottom: 6px; display: block; }
.rail-book-row { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------- the chrome */
.main {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: oklch(13% 0.006 250 / 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 0 28px;
    flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.page-title {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.page-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------- status chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line-hi);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.chip-live { color: var(--lime); }
.chip-warn { color: var(--amber); border-color: oklch(83% 0.16 85 / 0.5); background: var(--amber-14); }
.chip-danger { color: var(--red); border-color: oklch(65% 0.21 27 / 0.5); background: var(--red-14); }

/* A square that pings. Same device wherever something is alive. */
.beacon { position: relative; width: 6px; height: 6px; flex: 0 0 6px; background: currentColor; }
.beacon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid currentColor;
    animation: pulseRing 2.2s ease-out infinite;
}
.beacon-static::after { display: none; }

/* A flat tag with no border, for book / mode / reason. */
.tag {
    display: inline-flex;
    padding: 4px 9px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--lime-13);
    color: var(--lime);
    white-space: nowrap;
}
.tag-red { background: var(--red-14); color: var(--red); }
.tag-amber { background: var(--amber-14); color: var(--amber); }
.tag-mute { background: var(--fill); color: var(--ink-3); }

/* ------------------------------------------------------------- the ticker */
.ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line-mid);
    background: var(--paper-1);
}
/* A slow band of light crossing the strip. The strip carries the numbers that
   change on their own, so it is the one place that should look awake. */
.ticker::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 22%;
    background: linear-gradient(90deg, transparent, oklch(88% 0.205 128 / 0.055), transparent);
    animation: scan 11s linear infinite;
    pointer-events: none;
}
.ticker-row {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: hidden;
}
.tick {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 18px;
    border-right: 1px solid var(--line-mid);
    white-space: nowrap;
}
.tick-k {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.tick-v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.tick-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

.content {
    flex: 1;
    min-width: 0;
    padding: 26px 28px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1560px;
}
.stack { display: flex; flex-direction: column; gap: 20px; }

/* ===========================================================================
   PANELS - the one surface everything sits on
   =========================================================================== */
.panel {
    border: 1px solid var(--line);
    background: var(--paper-3);
    min-width: 0;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.panel-head-tight { padding: 14px 20px; }
.panel-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); white-space: nowrap; }
.panel-body { padding: 22px; }
.panel-body-tight { padding: 20px; }
.panel-note {
    padding: 16px 22px;
    font-size: 13px;
    color: var(--ink-3);
    max-width: 96ch;
    text-wrap: pretty;
}
.panel-note strong { color: var(--ink-2); font-weight: 600; }
.panel-col { display: flex; flex-direction: column; }

/* Columns split by two hairlines. */
.cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 20px;
}
.cols-sm { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.cols-xs { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* The hairline grid: cells separated by the background showing through a 1px
   gap. Cheaper than borders and it never doubles up at a seam. */
.mesh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.mesh-sm { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.mesh-xs { grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); }
.mesh-md { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.mesh-flush { border: 0; }
.cell { background: var(--paper-3); padding: 20px 22px; min-width: 0; }
.cell-sm { padding: 14px 18px; }
.cell-xs { padding: 11px 12px; }
.cell-lg { padding: 22px; }

/* ===========================================================================
   READOUTS - a label, a number, a line of context
   =========================================================================== */
.readout-k {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.readout-v {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin: 8px 0 4px;
}
.readout-v small { font-size: 16px; color: var(--ink-3); }
.readout-v.word {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.readout-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.readout-v-sm { font-family: var(--mono); font-size: 20px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.readout-v-md { font-family: var(--mono); font-size: 26px; font-weight: 600; margin-top: 8px; font-variant-numeric: tabular-nums; }
.readout-v-xs { font-family: var(--mono); font-size: 15px; margin-top: 5px; }

/* One segment per closed trade, in order. Seventeen trades is a number you can
   count on a strip; a percentage alone hides that. */
.segments { display: flex; gap: 2px; margin-top: 8px; }
.segments span { flex: 1; height: 4px; background: var(--lime); }
.segments span.loss { background: var(--red); }

/* ===========================================================================
   DASHBOARD - the lattice and the condition ledger
   =========================================================================== */
.gate-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-3);
}
/* A surveyor's grid behind the lattice, faded out towards the ledger so it
   never sits under text. */
.gate-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(oklch(100% 0 0 / 0.022) 1px, transparent 1px),
        linear-gradient(90deg, oklch(100% 0 0 / 0.022) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 80% at 22% 50%, #000 10%, transparent 72%);
}
.gate-split {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    align-items: stretch;
}

.lattice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px clamp(16px, 3vw, 34px);
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.lattice > svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    overflow: visible;
    margin: auto;
}
.lattice .label-sm { margin-bottom: 6px; }

/* The lattice's own parts, styled here so the SVG in the page stays structural. */
.web        { fill: none; stroke: var(--line-up); }
.web-spoke  { fill: none; stroke: var(--line-up); stroke-opacity: 0.5; }
.web-ring   { fill: none; stroke: var(--line-up); stroke-opacity: 0.18; stroke-dasharray: 2 9; }
.web-live   { fill: none; stroke: var(--lime); stroke-opacity: 0.55; stroke-width: 1.4; }
.web-sweep  {
    fill: none;
    stroke: var(--lime);
    stroke-opacity: 0.85;
    stroke-width: 1.4;
    stroke-dasharray: 140 615;
    transform-origin: 170px 170px;
    animation: spinSlow 12s linear infinite;
}
.node-ok   { fill: oklch(88% 0.205 128 / 0.15); stroke: var(--lime); stroke-width: 1.4; }
.node-ok-c { fill: var(--lime); }
.node-no   { fill: oklch(65% 0.21 27 / 0.16); stroke: var(--red); stroke-width: 1.5; }
.node-no-c { fill: var(--red); }
.node-ping { fill: none; stroke: var(--red); animation: pulseRing 2s ease-out infinite; }
.node-text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.node-text-no { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; fill: var(--red); }
.lattice-num {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: 52px;
    letter-spacing: -0.03em;
    fill: var(--ink);
}
.lattice-of { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; fill: var(--ink-4); }
.lattice-badge-bg { fill: var(--amber-14); }
.lattice-badge-bg.armed { fill: var(--lime-14); }
.lattice-badge {
    font-family: var(--font);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    fill: var(--amber);
}
.lattice-badge.armed { fill: var(--lime); }

/* ------------------------------------------------------- the condition ledger */
.ledger { display: flex; flex-direction: column; min-width: 0; }
.ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}
.ledger-head h2 { font-family: var(--font); font-weight: 600; font-size: 15px; }
.ledger-head p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ledger-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.cond {
    padding: 14px 22px;
    border-right: 1px solid var(--line-mid);
    border-bottom: 1px solid var(--line-mid);
    min-width: 0;
}
.cond-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.cond-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.cond-dot { width: 6px; height: 6px; flex: 0 0 6px; background: var(--lime); }
.cond.no .cond-dot { background: var(--red); animation: flicker 1.6s ease-in-out infinite; }
.cond-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cond-val { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cond.no .cond-val { color: var(--red); }

/* Track, the window the rule allows, and a pin where the market actually is.
   You can read not just pass or fail but by how much. */
.cond-track { position: relative; height: 6px; background: var(--fill); }
.cond-band { position: absolute; top: 0; bottom: 0; background: var(--lime-22); }
.cond.no .cond-band { background: var(--line-up); }
.cond-pin {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
}
.cond.no .cond-pin { background: var(--red); box-shadow: 0 0 8px var(--red); }
.cond-need { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 7px; }

/* ------------------------------------------------------------ price readout */
.price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.price-now {
    font-family: var(--mono);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.price-delta { font-family: var(--mono); font-size: 14px; }
.price-range { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.chart-wrap { position: relative; width: 100%; }
.chart-h-sm { height: 220px; }
.chart-h-md { height: 260px; }
.chart-h-lg { height: 380px; }

.chart-key {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    flex-wrap: wrap;
}
.chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.key-line { width: 10px; height: 2px; background: var(--lime); }
.key-in   { width: 6px; height: 6px; background: var(--lime); }
.key-out  { width: 6px; height: 6px; background: var(--red); }

/* -------------------------------------------------------- observation journal */
.journal { flex: 1; display: flex; flex-direction: column; }
.jrow {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 48px 34px 62px;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-lo);
    font-family: var(--mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.jrow > :nth-child(1) { color: var(--ink-4); }
.jrow > :nth-child(2) { color: var(--ink-2); }
.jrow > :nth-child(3),
.jrow > :nth-child(4) { color: var(--ink-3); text-align: right; }
.jverdict {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--ink-4);
}
.jverdict.open { color: var(--lime); }

.live-mark { font-family: var(--mono); font-size: 10px; color: var(--lime); animation: flicker 2.6s ease-in-out infinite; }

/* ===========================================================================
   DATA ROWS - trades, quality, anything with columns
   =========================================================================== */
.rows { min-width: 0; }
.row-head, .row {
    display: grid;
    gap: 10px;
    align-items: center;
}
.row-head {
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.row {
    padding: 13px 22px;
    border-bottom: 1px solid var(--line-lo);
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.row:hover { background: oklch(100% 0 0 / 0.02); }

/* Each table declares its own track sizes; the row shell above is shared. */
.cols-trades { grid-template-columns: 120px 90px 90px 100px 90px 130px minmax(120px, 1fr); min-width: 760px; }
.cols-quality { grid-template-columns: 110px 90px 90px 100px 110px minmax(120px, 1fr); min-width: 660px; }

.c-mute { color: var(--ink-4); }
.c-body { color: var(--ink-2); }
.c-result { font-size: 12.5px; text-align: right; font-weight: 500; }

.why {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    justify-self: start;
    background: var(--lime-13);
    color: var(--lime);
}
.why.stop { background: var(--red-14); color: var(--red); }

/* A bar whose height carries the size of the move and whose colour carries the
   sign. It is a sparkline for a single number. */
.spark-cell { display: flex; align-items: center; height: 18px; }
.spark {
    background: oklch(88% 0.205 128 / 0.35);
    border-left: 2px solid var(--lime);
}
.spark.loss { background: oklch(65% 0.21 27 / 0.35); border-left-color: var(--red); }

.kept-cell { display: flex; align-items: center; gap: 12px; }
.kept-track { position: relative; flex: 1; height: 6px; background: var(--fill); }
.kept-bar { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0.5; background: var(--lime); }
.kept-bar.mid { background: var(--amber); }
.kept-bar.low { background: var(--red); }
.kept-val { font-family: var(--mono); font-size: 12px; width: 42px; text-align: right; color: var(--lime); }
.kept-val.mid { color: var(--amber); }
.kept-val.low { color: var(--red); }

/* How positions ended */
.exits { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.exit-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.exit-name {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.exit-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.exit-track { height: 10px; background: var(--fill); }
.exit-bar { height: 10px; background: var(--lime); opacity: 0.75; }
.exit-bar.stop { background: var(--red); }
.exits-note {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
    text-wrap: pretty;
}

/* ===========================================================================
   CONTROLS
   =========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border: 1px solid var(--line-hi);
    background: transparent;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.btn:hover { color: var(--ink); border-color: var(--line-max); }
.btn i { font-size: 10px; }

.btn-primary {
    border: 0;
    background: var(--lime);
    color: var(--lime-ink);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transition: filter 160ms ease;
}
.btn-primary:hover { filter: brightness(1.08); color: var(--lime-ink); }

.btn-lg { padding: 15px; font-size: 12px; letter-spacing: 0.2em; width: 100%; }

.btn-danger {
    padding: 13px 20px;
    border: 1px solid oklch(65% 0.21 27 / 0.4);
    background: oklch(65% 0.21 27 / 0.12);
    color: var(--red-2);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    white-space: nowrap;
}
.btn-danger:hover { background: oklch(65% 0.21 27 / 0.2); color: var(--red-2); border-color: oklch(65% 0.21 27 / 0.6); }

.btn-on {
    border-color: oklch(88% 0.205 128 / 0.4);
    background: oklch(88% 0.205 128 / 0.10);
    color: var(--lime);
}
.btn-on:hover { color: var(--lime); border-color: oklch(88% 0.205 128 / 0.7); }

/* Segmented tabs: hairline-separated, the live one filled. */
.tabs { display: flex; gap: 1px; background: var(--line); }
.tabs-boxed { border: 1px solid var(--line); }
.tab {
    padding: 9px 15px;
    border: 0;
    background: var(--paper-3);
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tab:hover { color: var(--ink); background: var(--paper-4); }
.tab.on { background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.tab.on:hover { background: var(--lime); }
.tab-wide { padding: 11px 20px; flex: 1; justify-content: center; }
.tab-count { font-family: var(--mono); font-size: 10px; opacity: 0.7; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line-hi);
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field-sm input, .field-sm select { padding: 12px 13px; font-size: 12.5px; color: var(--ink-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--lime);
    box-shadow: 0 0 0 3px oklch(88% 0.205 128 / 0.14);
}
.field input::placeholder { color: var(--ink-5); }
.field-hint { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }

/* A small binary switch. */
.toggle {
    position: relative;
    width: 52px;
    height: 26px;
    flex: 0 0 52px;
    border: 1px solid var(--line-sw);
    background: var(--paper-1);
    cursor: pointer;
    padding: 0;
}
.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--ink-5);
    transition: left 220ms var(--ease), background 220ms ease;
}
.toggle.on { background: var(--lime-22); }
.toggle.on .toggle-knob { left: 29px; background: var(--lime); }

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.switch-row h3 { font-size: 14px; font-weight: 600; }
.switch-row p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ===========================================================================
   ALERTS
   =========================================================================== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line-hi);
    background: var(--paper-3);
    font-size: 13.5px;
    color: var(--ink-2);
}
.alert i { margin-top: 2px; }
.alert-good { border-color: oklch(88% 0.205 128 / 0.35); background: var(--lime-13); color: var(--lime); }
.alert-warn { border-color: oklch(83% 0.16 85 / 0.35); background: var(--amber-14); color: var(--amber); }
.alert-bad  { border-color: oklch(65% 0.21 27 / 0.4); background: var(--red-14); color: var(--red-2); }
.alert strong { display: block; font-weight: 600; }
.alert > div { flex: 1; min-width: 0; }

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 52px 24px;
    text-align: center;
    color: var(--ink-3);
}
.empty i { font-size: 22px; color: var(--ink-5); }
.empty strong { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.empty p { font-size: 13px; max-width: 46ch; text-wrap: pretty; }

/* ===========================================================================
   TERMINAL - the logs page
   =========================================================================== */
.term {
    position: relative;
    border: 1px solid var(--line);
    background: var(--paper-0);
    min-width: 0;
}
.term-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    flex-wrap: wrap;
}
.term-body { height: 560px; overflow: auto; padding: 12px 0; }
.logline {
    display: grid;
    grid-template-columns: 14px 78px 68px 78px minmax(150px, 1fr);
    gap: 10px;
    min-width: 470px;
    align-items: baseline;
    padding: 5px 18px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
}
.logline:hover { background: oklch(100% 0 0 / 0.02); }
.log-glyph { font-size: 11px; color: var(--ink-4); }
.log-time { color: var(--ink-5); }
.log-level { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
.log-module { color: var(--ink-3); }
.log-msg { color: var(--ink-2); word-break: break-word; }

.lv-debug .log-glyph, .lv-debug .log-level { color: var(--ink-4); }
.lv-debug .log-msg { color: var(--ink-3); }
.lv-info .log-glyph, .lv-info .log-level { color: var(--lime); }
.lv-warning .log-glyph, .lv-warning .log-level { color: var(--amber); }
.lv-error .log-glyph, .lv-error .log-level,
.lv-critical .log-glyph, .lv-critical .log-level { color: var(--red); }

.term-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--lime);
}
.caret { width: 8px; height: 14px; background: var(--lime); animation: caret 1s step-end infinite; }

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===========================================================================
   SETTINGS - execution authority
   =========================================================================== */
.arm {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-3);
    transition: background 260ms ease, border-color 260ms ease;
}
.arm.live { border-color: oklch(65% 0.21 27 / 0.45); background: oklch(17% 0.03 27); }
/* Hazard hatching, the way a machine marks the part that can hurt you. */
.arm::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(135deg, oklch(100% 0 0 / 0.02) 0 12px, transparent 12px 24px);
}
.arm-in {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 32px;
    align-items: center;
    padding: 28px clamp(18px, 3vw, 30px);
}
.arm-head {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.arm-copy { max-width: 56ch; font-size: 14px; color: oklch(68% 0.010 252); text-wrap: pretty; }
.arm-facts { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.arm-facts div > div:last-child { font-family: var(--mono); font-size: 14px; margin-top: 4px; }
.arm-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* The one control in the app that can start spending real money. It is the
   size of a physical switch on purpose - you should not be able to graze it. */
.arm-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 236px;
    height: 74px;
    padding: 0;
    border: 1px solid var(--line-sw);
    background: var(--paper-1);
    cursor: pointer;
}
.arm.live .arm-switch { border-color: oklch(65% 0.21 27 / 0.6); }
.arm-knob {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 112px;
    height: 62px;
    background: var(--paper-5);
    transition: left 320ms var(--ease), background 260ms ease;
}
.arm.live .arm-knob { left: 119px; background: var(--red); }
.arm-word {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
}
.arm-word.live { font-weight: 700; color: var(--ink-4); }
.arm.live .arm-word { color: var(--ink-4); }
.arm.live .arm-word.live { color: oklch(18% 0.04 27); }

.danger { border: 1px solid oklch(65% 0.21 27 / 0.28); background: var(--paper-3); }
.danger .panel-head { border-bottom-color: oklch(65% 0.21 27 / 0.20); }
.danger-body {
    padding: 22px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
    align-items: end;
}
.danger-body h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.danger-body p { margin-bottom: 16px; max-width: 62ch; font-size: 13px; color: var(--ink-3); text-wrap: pretty; }

/* ===========================================================================
   DOCS
   =========================================================================== */
.doc-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-3);
    padding: 34px 30px;
}
.doc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(40rem 30rem at 92% 10%, oklch(88% 0.205 128 / 0.07), transparent 62%);
}
.doc-hero-in { position: relative; max-width: 74ch; }
.doc-kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 14px;
}
.doc-hero h2 {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
.doc-hero p { font-size: 15px; color: oklch(68% 0.010 252); text-wrap: pretty; }

.doc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-lo);
}
.doc-row span:first-child { font-size: 13.5px; color: var(--ink-2); }
.doc-row span:last-child { font-family: var(--mono); font-size: 11.5px; color: var(--lime); white-space: nowrap; }
.doc-note { margin-top: 16px; font-size: 13px; color: var(--ink-3); text-wrap: pretty; }
.doc-lead { margin-bottom: 20px; font-size: 13.5px; color: oklch(68% 0.010 252); text-wrap: pretty; }
.doc-svg { width: 100%; height: auto; display: block; }
.doc-axis { stroke: var(--line); }
.doc-bar { stroke: var(--lime); }
.doc-bar-1 { fill: oklch(88% 0.205 128 / 0.22); }
.doc-bar-2 { fill: oklch(88% 0.205 128 / 0.32); }
.doc-bar-3 { fill: oklch(88% 0.205 128 / 0.45); }
.doc-val { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.doc-tick { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; fill: var(--ink-4); }
.doc-tick-v { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--ink-4); }
.doc-curve { fill: none; stroke: var(--lime); stroke-width: 2; }
.doc-curve-fill { fill: oklch(88% 0.205 128 / 0.10); }
.doc-dot { fill: var(--lime); }
.doc-cap { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }

/* ===========================================================================
   LOGIN - the only screen with an atmosphere
   =========================================================================== */
.login {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--paper-1);
}

/* A grid that drifts diagonally, masked to an ellipse so the edges stay dark. */
.lg-grid {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(oklch(100% 0 0 / 0.028) 1px, transparent 1px),
        linear-gradient(90deg, oklch(100% 0 0 / 0.028) 1px, transparent 1px);
    background-size: 56px 56px;
    animation: drift 26s linear infinite;
    mask-image: radial-gradient(ellipse 62% 62% at 50% 46%, #000 18%, transparent 76%);
}
.lg-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(46rem 34rem at 76% 12%, oklch(88% 0.205 128 / 0.09), transparent 62%),
        radial-gradient(52rem 40rem at 14% 96%, oklch(72% 0.09 250 / 0.10), transparent 60%);
}

/* Three stacked layers make the radar: a sweeping conic wedge, a soft core
   glow, and the SVG lattice itself. */
.lg-orb {
    position: absolute;
    top: 50%;
    left: 42vw;
    width: min(56vw, 600px);
    height: min(56vw, 600px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.lg-sweep {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        oklch(88% 0.205 128 / 0.22),
        oklch(88% 0.205 128 / 0.04) 20%,
        transparent 32%);
    mask-image: radial-gradient(circle, #000 26%, transparent 70%);
    animation: sweep 9s linear infinite;
}
.lg-core {
    border-radius: 50%;
    background: radial-gradient(circle, oklch(88% 0.205 128 / 0.16), transparent 46%);
}
.lg-radar { opacity: 0.55; }

.lg-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(transparent 0 2px, oklch(100% 0 0 / 0.016) 2px 3px);
}
.lg-rule {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, oklch(88% 0.205 128 / 0.22) 0 3px, transparent 3px 12px);
}
.lg-rule-top { top: 19%; }
.lg-rule-bot {
    bottom: 17%;
    background: repeating-linear-gradient(90deg, oklch(72% 0.09 250 / 0.22) 0 3px, transparent 3px 12px);
}

/* The strapline set on its side down the left edge, like a plate on a machine. */
.lg-vrail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46px;
    border-right: 1px solid var(--line-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.lg-vrail span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-6);
    white-space: nowrap;
    transform: rotate(-90deg);
}

.lg-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lg-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(88% 0.205 128 / 0.5), transparent);
    animation: scanY 7s linear infinite;
}
.lg-corner { position: absolute; width: 16px; height: 16px; }
.lg-corner.tl { top: 22px; left: 22px;  border-top: 1px solid oklch(88% 0.205 128 / 0.4); border-left: 1px solid oklch(88% 0.205 128 / 0.4); }
.lg-corner.tr { top: 22px; right: 22px; border-top: 1px solid oklch(88% 0.205 128 / 0.4); border-right: 1px solid oklch(88% 0.205 128 / 0.4); }
.lg-corner.bl { bottom: 22px; left: 22px;  border-bottom: 1px solid oklch(88% 0.205 128 / 0.4); border-left: 1px solid oklch(88% 0.205 128 / 0.4); }
.lg-corner.br { bottom: 22px; right: 22px; border-bottom: 1px solid oklch(88% 0.205 128 / 0.4); border-right: 1px solid oklch(88% 0.205 128 / 0.4); }

.lg-body {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    align-items: center;
    gap: 48px 64px;
    padding: 56px clamp(20px, 4vw, 72px);
    max-width: 1600px;
    margin: 0 auto;
}

.pitch { max-width: 560px; animation: rise 700ms var(--ease) both; }
.pitch-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; flex-wrap: wrap; }
.pitch-name {
    font-family: var(--display);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.pitch-ver { font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.1em; }
.pitch h1 {
    margin-bottom: 20px;
    font-family: var(--display);
    /* The one place the display face is NOT expanded. At 86px a 125% width runs
       past the column and breaks the three-line shape the headline is built on;
       the wide cut earns its keep on the small caps, not here. */
    font-stretch: 100%;
    font-weight: 800;
    font-size: clamp(42px, 5.6vw, 86px);
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-wrap: balance;
    /* long words must break rather than push the page sideways */
    overflow-wrap: anywhere;
    min-width: 0;
}
.pitch h1 em { font-style: normal; color: var(--lime); }
.pitch-lead {
    margin-bottom: 34px;
    max-width: 42ch;
    font-size: 17px;
    line-height: 1.55;
    color: oklch(68% 0.010 252);
    text-wrap: pretty;
}
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line-up);
}
.fact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
    white-space: nowrap;
}
.fact::before { content: ''; width: 5px; height: 5px; background: var(--lime); }

.lg-right { display: flex; justify-content: flex-end; }
.lg-card {
    position: relative;
    width: 100%;
    max-width: 436px;
    background: oklch(16% 0.006 250 / 0.86);
    border: 1px solid var(--line-up);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 40px 90px -30px oklch(0% 0 0 / 0.8);
    animation: rise 800ms var(--ease) 120ms both;
}
/* A lit seam along the top edge, where a lid would meet a body. */
.lg-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, oklch(88% 0.205 128 / 0.9), transparent);
}
.lg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
}
.lg-head .label { color: var(--ink-3); }
.lg-online {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
}
.lg-form { padding: 28px 24px 24px; }
.lg-form .field:last-of-type { margin-bottom: 26px; }

/* Seven bars, one per entry condition, idling. It says what the machine is
   without claiming a live reading on a screen nobody has signed into yet. */
.lg-seven {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--paper-2);
}
.lg-seven > span:first-child {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-4);
    white-space: nowrap;
}
.lg-bars { display: flex; align-items: flex-end; gap: 4px; height: 20px; }
.lg-bars i { width: 4px; background: var(--lime); animation: tick 3.2s ease-in-out infinite; }
.lg-bars i:nth-child(1) { height: 9px;  animation-delay: 0s; }
.lg-bars i:nth-child(2) { height: 14px; animation-delay: 0.18s; }
.lg-bars i:nth-child(3) { height: 20px; animation-delay: 0.36s; }
.lg-bars i:nth-child(4) { height: 13px; animation-delay: 0.54s; }
.lg-bars i:nth-child(5) { height: 17px; animation-delay: 0.72s; }
.lg-bars i:nth-child(6) { height: 10px; animation-delay: 0.90s; }
.lg-bars i:nth-child(7) { height: 15px; animation-delay: 1.08s; }

.lg-foot { border-top: 1px solid var(--line); padding: 12px 24px; overflow: hidden; }
.lg-boot {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    white-space: nowrap;
}
.lg-boot b { color: var(--lime); font-weight: 400; }
.lg-boot s { color: var(--ink-7); text-decoration: none; }
.lg-boot .caret { width: 7px; height: 13px; }

/* The boot line cycles through the modules a tick actually calls: eight lines
   stacked, each lit for its eighth of the loop. Pure CSS, because the content
   policy is script-src 'self' and a decorative ticker is not worth a file. */
.lg-boot-stack { position: relative; flex: 1; height: 17px; min-width: 0; }
.lg-boot-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    opacity: 0;
    animation: boot 20.8s linear infinite;
}
@keyframes boot {
    0%, 1%    { opacity: 0; }
    2%, 11%   { opacity: 1; }
    12%, 100% { opacity: 0; }
}
.lg-boot-line:nth-child(1) { animation-delay: 0s; }
.lg-boot-line:nth-child(2) { animation-delay: 2.6s; }
.lg-boot-line:nth-child(3) { animation-delay: 5.2s; }
.lg-boot-line:nth-child(4) { animation-delay: 7.8s; }
.lg-boot-line:nth-child(5) { animation-delay: 10.4s; }
.lg-boot-line:nth-child(6) { animation-delay: 13s; }
.lg-boot-line:nth-child(7) { animation-delay: 15.6s; }
.lg-boot-line:nth-child(8) { animation-delay: 18.2s; }

/* ===========================================================================
   RESPONSIVE
   The rail becomes a horizontal band; everything else already reflows because
   every grid in this file is auto-fit with a min() floor.
   =========================================================================== */
@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .rail-brand { border-bottom: 0; padding: 0 8px 0 0; }
    .rail-nav { flex-direction: row; flex-wrap: wrap; }
    .rail-foot {
        margin: 0 0 0 auto;
        padding-top: 0;
        border-top: 0;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .topbar-in, .content { padding-left: 16px; padding-right: 16px; }
    .lg-vrail { display: none; }
}

@media (max-width: 560px) {
    .content { padding-top: 18px; }
    .arm-switch { width: 200px; height: 64px; }
    .arm-knob { width: 94px; height: 52px; }
    .arm.live .arm-knob { left: 101px; }
    .arm-head { font-size: 26px; }
    .lg-body { padding: 40px 18px; }
    .pitch-brand { margin-bottom: 32px; }
    .readout-v { font-size: 26px; }
    .price-now { font-size: 28px; }
    /* A tap target is never smaller than a fingertip. */
    .nav-link, .tab, .btn { min-height: 44px; }
}

/* ===========================================================================
   THE LAST SIX
   Values the canvas uses exactly once each. Each one is a place where the
   mockup deliberately breaks its own rhythm, so they are kept rather than
   rounded to the nearest token.
   =========================================================================== */

/* The only corner in the app. The sign-in mark is 2px round - just enough to
   read as a machined part instead of a CSS box. The rail's mark stays square. */
.mark-lg { border-radius: 2px; }

/* Undock sits in the rail's footer, below a hairline rather than in the nav
   stack, so it loses the 3px the active-page marker needs. */
.rail-foot .nav-link { padding: 9px 10px; }

/* A chart panel closes tighter than a form panel: the legend under the chart
   already supplies the bottom margin. */
.panel-body-chart { padding: 20px 22px 16px; }

/* Toolbar buttons sit above a panel rather than inside one, so they run
   shorter than a form's primary action. */
.btn-sm { padding: 9px 14px; }
.btn-dot { font-size: 7px; }

/* A tag that has to hold two words rather than one. */
.tag-wide { padding: 4px 10px; }