@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/inter-latin-400-normal.8909904ab6c8.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/inter-latin-500-normal.f3779f1efccc.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/inter-latin-600-normal.f9a06e79cd3a.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/inter-latin-700-normal.6f56409fd3d6.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/jetbrains-mono-latin-400-normal.14425ba9c695.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/jetbrains-mono-latin-500-normal.cb182feeed4d.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/jetbrains-mono-latin-600-normal.400c6bfda18d.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/jetbrains-mono-latin-700-normal.d0d4e818808f.woff2') format('woff2')}
/* ===========================================================================
   BrainSpot — Webfonts
   Inter · JetBrains Mono, served from Google Fonts (brand v1.0, Oct 2026: DM Sans retired).
   NOTE: font binaries are loaded from the Google Fonts CDN (no licensed
   binaries were available in the source repos). To self-host, drop the .woff2
   files in assets/fonts/ and replace this 500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");
/* ===========================================================================
   BrainSpot — Color tokens
   Dark-first premium neurotech. Deep navy field, cyan signal, restrained
   purple depth, green for positive states. amber/magenta semantic-only.
   =========================================================================== */

:root {
  /* --- Backgrounds (deep navy field) --- */
  --bg-base:    #05070D;  /* deepest — app canvas behind the field glows */
  --bg:         #0B0F19;  /* primary surface base */
  --surface-1:  #111827;  /* card — top of gradient */
  --surface-2:  #151E2E;  /* card — bottom of gradient / elevated */
  --surface-3:  #1B2436;  /* hover / raised */
  --bezel:      #0D1119;  /* device + inset chrome */

  /* --- Signal (the BrainSpot cyan — dominant accent) --- */
  --cyan:        #00D4FF;
  --cyan-bright: #5EE7FF;
  --cyan-deep:   #0892B3;

  /* --- Depth (restrained supporting purple) --- */
  --purple:      #8B5CF6;
  --purple-deep: #6D45D6;

  /* --- Semantic state colors --- */
  --green:   #3DDC97;  /* positive / readiness / recovery */
  --amber:   #F6B73C;  /* caution / moderate */
  --magenta: #EC4899;  /* high-arousal / strain — semantic only */
  --rose:    #F2789A;  /* negative valence (softened) */
  --red:     #F26D6D;  /* alert / low signal */

  /* --- Text (white + muted blue-grey, per brand) --- */
  --white:  #F8FAFC;  /* primary text */
  --text-2: #C3CEDC;  /* secondary-strong */
  --muted:  #94A3B8;  /* secondary blue-grey */
  --faint:  #64748B;  /* tertiary / disabled */

  /* --- Hairlines & fills --- */
  --line:        rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);
  --fill-soft:   rgba(255, 255, 255, 0.03);
  --fill-1:      rgba(255, 255, 255, 0.04);
  --fill-2:      rgba(255, 255, 255, 0.07);

  /* --- Tinted glows (used at low opacity around active signal) --- */
  --cyan-12:   rgba(0, 212, 255, 0.12);
  --cyan-22:   rgba(0, 212, 255, 0.22);
  --cyan-28:   rgba(0, 212, 255, 0.28);
  --purple-12: rgba(139, 92, 246, 0.12);
  --green-16:  rgba(61, 220, 151, 0.16);

  /* ---------------------------------------------------------------------
     Valence × arousal quadrant palette (the decoder's 4-class output).
     Right side = positive valence (cyan/green), left = negative (magenta/
     purple). Top = high arousal (vivid), bottom = low arousal (calmer).
     --------------------------------------------------------------------- */
  --q-energized: var(--cyan);     /* high valence · high arousal — elated, alert */
  --q-calm:      var(--green);    /* high valence · low arousal  — content, relaxed */
  --q-tense:     var(--magenta);  /* low valence  · high arousal — stressed, anxious */
  --q-flat:      var(--purple);   /* low valence  · low arousal  — low, depleted */

  /* --- Binary readout (the V0 collapse → valence) --- */
  --positive: var(--green);
  --negative: var(--rose);
  --neutral:  var(--muted);

  /* ---- Semantic aliases (prefer these in components) ---- */
  --text-primary:    var(--white);
  --text-secondary:  var(--muted);
  --text-accent:     var(--cyan);
  --surface-card:    var(--surface-1);
  --surface-app:     var(--bg);
  --border-hairline: var(--line);
  --accent:          var(--cyan);

  /* canvas-viz hooks (read by BrainMap / QuadrantMap) */
  --viz-base: 7, 10, 18;       /* @kind other */
  --viz-dim:  74, 88, 120;     /* @kind other */
  --viz-marker: 255, 255, 255; /* @kind other */
}

/* ===========================================================================
   LIGHT THEME — set data-theme="light" on a root element. Higher specificity
   (:root[data-theme]) so it wins over the base :root regardless of import order.
   Soft cool off-white field, white cards, deep-navy text, deepened accents for
   contrast, and softened glows. The two canvas data-displays stay legible via
   the --viz-* hooks below.
   =========================================================================== */
:root[data-theme="light"] {
  /* Backgrounds — cool near-white field */
  --bg-base:    #E7ECF5;
  --bg:         #F4F7FC;
  --surface-1:  #FFFFFF;
  --surface-2:  #F6F8FC;
  --surface-3:  #EEF2F9;
  --bezel:      #D7DEEC;

  /* Signal — deepen for contrast on white */
  --cyan:        #0FB5DE;
  --cyan-bright: #34C6E8;
  --cyan-deep:   #067897;

  --purple:      #7C4DEC;
  --purple-deep: #5B34C6;

  --green:   #16A06B;
  --amber:   #C9821A;
  --magenta: #D6357F;
  --rose:    #D14E78;
  --red:     #D64B4B;

  /* Text — deep navy → slate */
  --white:  #0C1424;  /* primary text (semantic foreground) */
  --text-2: #2B3A52;
  --muted:  #5A6A82;
  --faint:  #93A1B6;

  /* Hairlines & fills — dark low-opacity on light */
  --line:        rgba(15, 23, 42, 0.10);
  --line-strong: rgba(15, 23, 42, 0.16);
  --fill-soft:   rgba(15, 23, 42, 0.02);
  --fill-1:      rgba(15, 23, 42, 0.035);
  --fill-2:      rgba(15, 23, 42, 0.065);

  /* Tinted glows — much softer on light */
  --cyan-12:   rgba(15, 181, 222, 0.10);
  --cyan-22:   rgba(15, 181, 222, 0.18);
  --cyan-28:   rgba(15, 181, 222, 0.24);
  --purple-12: rgba(124, 77, 236, 0.10);
  --green-16:  rgba(22, 160, 107, 0.14);

  /* Accent text should use the deepened cyan for legibility */
  --text-accent: var(--cyan-deep);

  /* Gradients (defined in spacing.css) — relit for white surfaces */
  --grad-card: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%); /* @kind other */
  --grad-field:
    radial-gradient(900px 600px at 50% -10%, rgba(124, 77, 236, 0.10), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(15, 181, 222, 0.10), transparent 55%),
    var(--bg-base);

  /* Shadows & glow — cool, soft, no neon */
  --shadow-sm:   0 1px 2px rgba(20, 30, 55, 0.06);
  --shadow-card: 0 1px 2px rgba(20, 30, 55, 0.06), 0 10px 30px rgba(20, 30, 55, 0.08);
  --shadow-pop:  0 24px 60px rgba(20, 30, 55, 0.18);
  --shadow-device: 0 0 0 11px #E2E8F3, 0 0 0 13px #CBD5E8,
                   0 40px 110px rgba(20, 30, 55, 0.22), 0 0 70px rgba(15, 181, 222, 0.05);
  --glow-cyan:   0 6px 22px rgba(15, 181, 222, 0.20);
  --glow-cyan-s: 0 0 5px rgba(15, 181, 222, 0.45);
  --glow-green:  0 6px 20px rgba(22, 160, 107, 0.18);
  --glow-btn:    0 10px 26px rgba(15, 181, 222, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --inner-top:   inset 0 1px 0 rgba(255, 255, 255, 0.7); /* @kind shadow */

  /* canvas-viz hooks — light instrument */
  --viz-base: 244, 247, 251;   /* @kind other */
  --viz-dim:  120, 135, 165;   /* @kind other */
  --viz-marker: 12, 20, 36;    /* @kind other */
}

/* ===========================================================================
   BrainSpot — Typography tokens
   DM Sans (headings) · Inter (product copy) · JetBrains Mono (metrics, labels,
   timestamps, scientific). Mono is load-bearing brand voice: every metric,
   unit, channel and timestamp is set in mono.
   =========================================================================== */

:root {
  /* --- Families --- */
  --font-display: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* --- Weights --- */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */

  /* --- Type scale (px) --- */
  --fs-score:   60px;  /* hero ring score */
  --fs-display: 38px;  /* marketing display */
  --fs-h1:      25px;  /* screen title */
  --fs-h2:      19px;  /* card title */
  --fs-h3:      16px;  /* sub-head */
  --fs-stat:    30px;  /* metric numbers */
  --fs-body-lg: 15px;
  --fs-body:    13.5px; /* product copy */
  --fs-body-sm: 12px;
  --fs-caption: 11px;
  --fs-eyebrow: 11px;  /* mono eyebrow */
  --fs-label:   10px;  /* mono label */

  /* --- Line heights --- */
  --lh-tight:   1.12;  /* @kind font */
  --lh-snug:    1.3;   /* @kind font */
  --lh-body:    1.5;   /* @kind font */
  --lh-relaxed: 1.55;  /* @kind font */

  /* --- Letter spacing --- */
  --ls-display:  -0.03em;  /* @kind font */
  --ls-heading:  -0.01em;  /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-label:    0.14em;   /* @kind font */
  --ls-mono:     0.04em;   /* @kind font */

  /* ---- Semantic aliases ---- */
  --text-title:   var(--fw-semibold) var(--fs-h1)/var(--lh-tight) var(--font-display);
  --text-body:    var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-body);
  --text-metric:  var(--fw-bold) var(--fs-stat)/1 var(--font-display);
}
/* ===========================================================================
   BrainSpot — Spacing, radii, shadows, motion
   4px base grid. Generous radii (rounded dark cards). Soft glow only around
   active signal states. Gentle, calm motion — never gaming-style energy.
   =========================================================================== */

:root {
  /* --- Spacing scale (4px base) --- */
  --sp-0:  0;     /* @kind spacing */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-9:  18px;
  --sp-10: 20px;
  --sp-12: 24px;
  --sp-14: 28px;
  --sp-16: 32px;
  --sp-20: 40px;
  --sp-24: 48px;
  --sp-32: 64px;

  /* --- Radii (rounded dark cards + rings) --- */
  --r-xs:   8px;
  --r-sm:   13px;   /* chips, segmented control */
  --r-md:   16px;   /* buttons, inputs */
  --r-lg:   22px;   /* cards (the canonical card radius) */
  --r-xl:   28px;
  --r-bezel:46px;   /* device frame */
  --r-pill: 999px;

  /* --- Borders --- */
  --bw:      1px;   /* @kind other */
  --bw-glow: 1px;   /* @kind other */

  /* --- Shadows (deep, soft — for floating dark cards) --- */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop:  0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-device: 0 0 0 11px #0D1119, 0 0 0 13px #1C2230,
                   0 40px 120px rgba(0, 0, 0, 0.65), 0 0 80px rgba(0, 212, 255, 0.06);

  /* --- Glow (only around live/active signal) --- */
  --glow-cyan:   0 0 30px rgba(0, 212, 255, 0.25);
  --glow-cyan-s: 0 0 6px rgba(0, 212, 255, 0.6);   /* icon / dot glow */
  --glow-green:  0 0 24px rgba(61, 220, 151, 0.22);
  --glow-btn:    0 10px 30px rgba(0, 212, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --inner-top:   inset 0 1px 0 rgba(255, 255, 255, 0.06);  /* @kind shadow */

  /* --- Layered card gradient --- */
  --grad-card: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%); /* @kind other */
  /* the field glow that sits behind the whole app */
  --grad-field:
    radial-gradient(900px 600px at 50% -10%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(0, 212, 255, 0.08), transparent 55%),
    var(--bg-base);

  /* --- Motion (gentle pulse, line draw, signal stabilization) --- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);       /* @kind other */
  --dur-fast:    0.15s;  /* @kind other */
  --dur-base:    0.25s;  /* @kind other */
  --dur-slow:    0.6s;   /* @kind other */
  --press-scale: 0.98;   /* @kind other */
}
/* ===========================================================================
   BrainSpot — brand v1.0 (October 2026, "Vector & Brand Bundle", N. Mangan)
   applied to the website as token overrides. Loaded AFTER the design-system
   tokens; nothing in _ds/ is edited. Every component keeps reading the same
   variable names, so the page, the demo window and the visuals re-skin together.

   Brand → token map
     Ink        #111827   text on light; the dark surface family
     Teal       #4B8DA8   "Spot", the ring dot, accent text (on dark: Teal light #63AECB)
     Sky/Blue/Indigo  #8AD2F4 → #5FA6E8 → #5B55D8   the ring gradient
                       on dark: #A4DEFA → #6FB2F0 → #7C77F0
     --cyan        = Blue (the one accent for live signal and the primary action)
     --cyan-bright = Sky · --purple = Indigo · --text-accent = Teal
   Functional colours (positive / caution / negative) are not brand colours and are
   kept muted; they only mark state in the product UI shown on the page.
   Type: Inter SemiBold headlines, Inter Regular body at 1.45, JetBrains Mono for
   labels, metrics and data. DM Sans is retired.
   Dark is the default (the brand's "primary on dark"); the light set below is the
   brand's "primary on light". The logo never takes effects: no glows on marks.
   =========================================================================== */

:root {
  /* surfaces: black, then the Ink family */
  --bg-base:    #000000;
  --bg:         #05070B;
  --surface-1:  #0E121B;
  --surface-2:  #111827;
  --surface-3:  #171E2C;
  --bezel:      #0B0E15;

  /* the ring gradient, as the accent family */
  --cyan:        #6FB2F0;   /* Blue light · primary action, rings, live state */
  --cyan-bright: #A4DEFA;   /* Sky on dark */
  --cyan-deep:   #63AECB;   /* Teal light */
  --purple:      #7C77F0;   /* Indigo on dark */
  --purple-deep: #5B55D8;   /* Indigo */
  --teal:        #63AECB;   /* the dot and "Spot" on dark */

  /* functional, muted */
  --green:   #5CB99A;
  --amber:   #E0B15A;
  --magenta: #7C77F0;       /* no magenta in the brand: high-activation reads as Indigo */
  --rose:    #D98A9E;
  --red:     #D9706E;

  /* text: white on black, greys from the Ink family */
  --white:  #FFFFFF;
  --text-2: #D1D5DB;
  --muted:  #9CA3AF;
  --faint:  #6B7280;

  --line:        rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);
  --fill-soft:   rgba(255, 255, 255, 0.03);
  --fill-1:      rgba(255, 255, 255, 0.04);
  --fill-2:      rgba(255, 255, 255, 0.07);

  --cyan-12:   rgba(111, 178, 240, 0.12);
  --cyan-22:   rgba(111, 178, 240, 0.22);
  --cyan-28:   rgba(111, 178, 240, 0.28);
  --purple-12: rgba(124, 119, 240, 0.12);
  --green-16:  rgba(92, 185, 154, 0.16);

  /* the state map's four corners, from the brand palette */
  --q-energized: var(--cyan-bright);  /* Alert & Focused · Sky */
  --q-calm:      var(--teal);         /* Calm & Settled · Teal */
  --q-tense:     var(--purple);       /* Restless · Indigo */
  --q-flat:      var(--cyan);         /* Quiet / Low Energy · Blue */

  --text-accent: var(--teal);
  --accent:      var(--cyan);

  --viz-base:   0, 0, 0;
  --viz-dim:    72, 82, 108;
  --viz-marker: 255, 255, 255;

  --grad-brand: linear-gradient(135deg, #A4DEFA 0%, #6FB2F0 50%, #7C77F0 100%);
  --grad-card:  linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
  --grad-field:
    radial-gradient(900px 600px at 50% -10%, rgba(124, 119, 240, 0.10), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(111, 178, 240, 0.08), transparent 55%),
    var(--bg-base);

  /* calmer light: soft shadows, glow only as a faint tint */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop:  0 20px 60px rgba(0, 0, 0, 0.55);
  --glow-cyan:   0 10px 40px rgba(111, 178, 240, 0.10);
  --glow-cyan-s: 0 0 4px rgba(99, 174, 203, 0.55);
  --glow-green:  0 8px 24px rgba(92, 185, 154, 0.12);
  --glow-btn:    0 10px 30px rgba(111, 178, 240, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* type */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --lh-body:      1.45;
  --lh-relaxed:   1.45;
  --ls-display:   -0.025em;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-base:    #FFFFFF;
  --bg:         #FFFFFF;
  --surface-1:  #FFFFFF;
  --surface-2:  #F8FAFC;
  --surface-3:  #F1F5F9;
  --bezel:      #E5E7EB;

  --cyan:        #5FA6E8;   /* Blue */
  --cyan-bright: #8AD2F4;   /* Sky */
  --cyan-deep:   #4B8DA8;   /* Teal */
  --purple:      #5B55D8;   /* Indigo */
  --purple-deep: #4A45B8;
  --teal:        #4B8DA8;

  --green:   #2E9B74;
  --amber:   #B8860B;
  --magenta: #5B55D8;
  --rose:    #C2607F;
  --red:     #C84B4B;

  --white:  #111827;        /* Ink: primary text */
  --text-2: #374151;
  --muted:  #6B7280;
  --faint:  #9CA3AF;

  --line:        rgba(17, 24, 39, 0.10);
  --line-strong: rgba(17, 24, 39, 0.16);
  --fill-soft:   rgba(17, 24, 39, 0.02);
  --fill-1:      rgba(17, 24, 39, 0.035);
  --fill-2:      rgba(17, 24, 39, 0.065);

  --cyan-12:   rgba(95, 166, 232, 0.10);
  --cyan-22:   rgba(95, 166, 232, 0.18);
  --cyan-28:   rgba(95, 166, 232, 0.24);
  --purple-12: rgba(91, 85, 216, 0.10);
  --green-16:  rgba(46, 155, 116, 0.14);

  --text-accent: var(--teal);

  --grad-brand: linear-gradient(135deg, #8AD2F4 0%, #5FA6E8 50%, #5B55D8 100%);
  --grad-card:  linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --grad-field:
    radial-gradient(900px 600px at 50% -10%, rgba(91, 85, 216, 0.06), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(138, 210, 244, 0.14), transparent 55%),
    var(--bg-base);

  --shadow-sm:   0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.06), 0 10px 30px rgba(17, 24, 39, 0.08);
  --shadow-pop:  0 24px 60px rgba(17, 24, 39, 0.16);
  --shadow-device: 0 0 0 11px #E5E7EB, 0 0 0 13px #D1D5DB, 0 40px 110px rgba(17, 24, 39, 0.20);
  --glow-cyan:   0 10px 36px rgba(95, 166, 232, 0.14);
  --glow-cyan-s: 0 0 4px rgba(75, 141, 168, 0.45);
  --glow-green:  0 6px 20px rgba(46, 155, 116, 0.16);
  --glow-btn:    0 10px 26px rgba(95, 166, 232, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --inner-top:   inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --viz-base:   255, 255, 255;
  --viz-dim:    120, 135, 165;
  --viz-marker: 17, 24, 39;
  color-scheme: light;
}

/* Text variants retain the brand hue with readable contrast on each surface. */
:root { --faint:#9CA3AF; }
:root[data-theme="light"] { --faint:#606975; --text-accent:#326D85; --green:#247452; --amber:#856207; }

x-dc{display:none}:focus-visible{outline:2px solid var(--text-accent);outline-offset:4px} [hidden]{display:none!important} button:disabled{opacity:.6;cursor:wait} @media(max-width:760px){header>div{height:auto!important;min-height:68px;flex-wrap:wrap;gap:12px!important;padding-top:12px!important;padding-bottom:12px!important}header nav{order:3;width:100%;margin-left:0!important}header>div>div:last-child{margin-left:auto}header nav a{padding:8px 10px!important}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}