/* ============================================================================
   CURIO — Design Foundations: Color + Type
   ----------------------------------------------------------------------------
   Curio is a collection of interactive visualizations & simulations. The brand
   is an "observatory / cabinet of curiosities": a dark instrument surface where
   glowing data sings, framed by editorial serif typography and a single warm
   brass signature.

   RULES OF THUMB
   - Chrome (panels, buttons, text, lines) is built from INK + BRASS only.
   - The DATA SPECTRUM (azure/teal/emerald/amber/coral/violet/rose) is reserved
     for marks ON the stage — plotted curves, foci, sources, rays. Never use a
     data hue for a button or a border.
   - Brass = brand identity AND primary interactive state (active, focus, play).
   - Emphasized terms in prose are set in *italic serif*, not bold color.
   ========================================================================== */

/* @curio-fonts:start */
/* Vendored web fonts — regenerate with tools/vendor-fonts.py.
   woff2 in assets/fonts/ (latin + latin-ext). No external requests. */
/* Newsreader italic 400 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader italic 400 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader italic 500 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader italic 500 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader italic 600 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader italic 600 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-italic-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;
}

/* Newsreader normal 400 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Newsreader normal 400 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Newsreader normal 500 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Newsreader normal 500 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Newsreader normal 600 (latin-ext) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Newsreader normal 600 (latin) */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-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;
}

/* Spline Sans normal 300 (latin-ext) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/spline-sans-normal-300-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;
}

/* Spline Sans normal 300 (latin) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/spline-sans-normal-300-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;
}

/* Spline Sans normal 400 (latin-ext) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 400 (latin) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 500 (latin-ext) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 500 (latin) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 600 (latin-ext) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 600 (latin) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spline-sans-normal-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;
}

/* Spline Sans normal 700 (latin-ext) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spline-sans-normal-700-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;
}

/* Spline Sans normal 700 (latin) */
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/spline-sans-normal-700-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;
}

/* Spline Sans Mono normal 400 (latin-ext) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}

/* Spline Sans Mono normal 400 (latin) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}

/* Spline Sans Mono normal 500 (latin-ext) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}

/* Spline Sans Mono normal 500 (latin) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}

/* Spline Sans Mono normal 600 (latin-ext) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}

/* Spline Sans Mono normal 600 (latin) */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spline-sans-mono-normal-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;
}
/* @curio-fonts:end */

:root {
  /* ---- Type families ---------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;  /* titles, headings, prose */
  --font-ui:      'Spline Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* controls, labels, body UI */
  --font-mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* readouts, numbers, code */

  /* ===========================================================================
     COLOR — INK (surfaces & chrome). Dark-first. Warm-neutral, never pure black.
     ========================================================================= */
  --stage:      #0d1117;   /* deepest — the canvas / visualization field      */
  --bg:         #11161f;   /* app background behind panels                    */
  --surface:    #161c26;   /* control panel                                   */
  --surface-2:  #1c232e;   /* grouped cards, raised blocks                    */
  --surface-3:  #232c39;   /* inputs, hover fills, pressed cells              */
  --glass:      rgba(18, 24, 33, 0.72); /* floating overlays over the stage   */

  --line:        #29333f;  /* hairline borders, grid lines                    */
  --line-strong: #38444f;  /* emphasized dividers, hover borders              */
  --line-faint:  #1e2832;  /* the stage grid (barely there)                   */

  /* Text — warm bone whites cooling into slate */
  --fg-1: #e9edf3;   /* primary text, headings                               */
  --fg-2: #9faabb;   /* secondary text, control labels                       */
  --fg-3: #6b7689;   /* captions, dim labels, hints                          */
  --fg-4: #49525f;   /* faintest — disabled, watermark                       */

  /* ===========================================================================
     COLOR — BRASS (the signature). Brand + primary interactive.
     ========================================================================= */
  --brass:        #d9a441;  /* signature: logo, primary action, active state  */
  --brass-bright: #ecc06a;  /* hover / highlight                              */
  --brass-deep:   #b3832e;  /* pressed / borders on brass fills               */
  --brass-ink:    #1a1305;  /* text/icon sitting ON a brass fill              */
  --brass-wash:   rgba(217, 164, 65, 0.12); /* tint behind active items       */
  --brass-line:   rgba(217, 164, 65, 0.45); /* active borders, focus rings    */
  --glow-brass:   0 0 18px rgba(217, 164, 65, 0.35); /* active/play glow      */

  /* ===========================================================================
     COLOR — DATA SPECTRUM (stage marks ONLY). Tuned to glow on --stage.
     ========================================================================= */
  --data-azure:   #4c9bff;  /* primary plotted curve / interactive locus      */
  --data-teal:    #2dd4c4;  /* secondary curve, linkage                       */
  --data-emerald: #5fd08a;  /* "good" / converging                            */
  --data-amber:   #f5c451;  /* foci, points of interest (kin to brass)        */
  --data-coral:   #ff7d5c;  /* contrast curve, divergence                     */
  --data-violet:  #a78bfa;  /* tracks, auxiliary geometry                     */
  --data-rose:    #fb6f93;  /* pencil / active marker, alerts on stage        */

  /* ===========================================================================
     COLOR — SEMANTIC (verdicts, meters)
     ========================================================================= */
  --good: #5fd08a;
  --warn: #f0b54a;
  --bad:  #f26a60;

  /* ===========================================================================
     RADII
     ========================================================================= */
  --r-xs:   4px;   /* chips, tags                       */
  --r-sm:   7px;   /* buttons, inputs                   */
  --r-md:  10px;   /* grouped cards                     */
  --r-lg:  14px;   /* panels, HUD / glass overlays      */
  --r-full: 999px; /* pills, status dots, slider thumbs */

  /* ===========================================================================
     SPACING — 4px base
     ========================================================================= */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-12: 64px;

  /* ===========================================================================
     ELEVATION — on dark, depth = a touch lighter surface + soft shadow +
     a 1px inner top-highlight ("instrument glass").
     ========================================================================= */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.40);
  --shadow-3: 0 12px 34px rgba(0,0,0,0.50);
  --hairline-top: inset 0 1px 0 rgba(255,255,255,0.04); /* the glass highlight */
  --glow-data: 0 0 14px rgba(76,155,255,0.35);          /* generic stage glow  */

  /* ===========================================================================
     MOTION — precise, never bouncy. (Curiosity, not whimsy.)
     ========================================================================= */
  --ease:     cubic-bezier(0.20, 0.60, 0.20, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   260ms;

  /* ===========================================================================
     STAGE BACKGROUND — the signature observatory field.
     A hairline grid under a faint warm radial glow.
     ========================================================================= */
  --grid-size: 40px;
  --stage-grid:
    radial-gradient(1100px 680px at 72% -12%, rgba(217,164,65,0.06), transparent 60%),
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
}

/* ============================================================================
   TYPE SCALE — semantic element styles.
   Display & headings: Newsreader. Body/UI: Spline Sans. Numbers/code: mono.
   ========================================================================== */

.curio-type, body.curio {
  font-family: var(--font-ui);
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — the masthead / hero. Newsreader has gorgeous optical sizing. */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

/* Headings */
.h1, h1.curio {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
.h2, h2.curio {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}
.h3, h3.curio {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin: 0;
}

/* Body / prose */
.p, p.curio {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
/* Long-form explanatory prose uses the serif for an editorial, readable feel */
.prose {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #c6cfdc;
}
.prose em { font-style: italic; color: var(--fg-1); }            /* emphasized term */
.prose b, .prose strong { font-weight: 600; color: var(--fg-1); }
.prose .term { font-style: italic; color: var(--brass-bright); } /* keyword highlight */

/* Section eyebrow — the uppercase labels above control groups */
.eyebrow, .sec-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Control label */
.label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-2);
}

/* Caption / hint */
.caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg-3);
}

/* Readout / numeric — tabular mono, the instrument voice */
.readout, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.readout-lg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Inline code */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--brass-bright);
}