@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Spectral:wght@500;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* color — surfaces (preserve current dark aesthetic) */
  --color-bg:#15130f; --color-surface:#191711; --color-surface-raised:#1f1c16;
  --color-border:#2c2820; --color-border-subtle:rgba(201,162,75,0.12);
  /* color — text */
  --color-text:#ece6d8; --color-text-bright:#f5efe2; --color-text-muted:#9a9284;
  --color-text-dim:#7d7565; --color-text-faint:#494132;
  /* color — brand / accent */
  --color-accent:#c9a24b; --color-blue:#6d93bd; --color-link:#d8b867; --color-purple:#9b7ebd;
  /* color — status + SEMANTIC TRUST (must match .confidence-* hues) */
  --color-observed:#66bb6a;  /* green   → confidence-high   */
  --color-estimated:#ffb300; /* amber   → confidence-medium */
  --color-unknown:#9e9e9e;   /* neutral → confidence-low    */
  --color-success:#4caf50; --color-warning:#ff9800; --color-danger:#f44336;
  /* type scale */
  --fs-2xs:6px; --fs-xs:8px; --fs-sm:9px; --fs-base:10px; --fs-md:11px; --fs-lg:14px; --fs-xl:18px; --fs-2xl:20px;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.05; --lh-base:1.2; --lh-relaxed:1.5;
  --font-mono:'IBM Plex Mono',monospace; --font-display:'Spectral',serif; --font-ui:'IBM Plex Sans',sans-serif;
  /* spacing */
  --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:10px; --space-6:12px; --space-7:16px; --space-8:24px;
  /* radii */
  --radius-xs:2px; --radius-sm:3px; --radius-md:4px; --radius-lg:6px; --radius-xl:8px; --radius-2xl:12px;
  /* elevation */
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3);
  --shadow-up:0 -4px 20px rgba(0,0,0,0.4);
  /* motion */
  --dur-fastest:50ms; --dur-fast:150ms; --dur-base:200ms; --dur-slow:400ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-emphasized:cubic-bezier(0.2,0,0,1);
  /* legacy aliases — keep existing rules resolving unchanged (zero visual change) */
  --bg:var(--color-bg); --text:var(--color-text); --dim:var(--color-text-dim);
  --acc:var(--color-accent); --blue:var(--color-blue); --green:var(--color-success); --purple:var(--color-purple);
}
html,body{background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow:hidden;height:100vh;width:100vw;animation:pageFadeIn 0.4s ease forwards}
button:focus-visible,select:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}