/* ============================================================================
     SHELL CSS  (reusable across projects — copy this block into a shared shell.css)
     ----------------------------------------------------------------------------
     The portable site shell: design tokens (:root), reset, the hero header
     (project title / subtitle / description), the sticky topbar + navbar, and the
     base page layout / generic components. Nothing here is specific to a single
     page, so it can be lifted wholesale into other projects that share this shell.
     Page-specific styles live in their own labelled blocks:
       • SIMULATION CSS  → the ".exp" Error Rate Explorer block further below
       • GAME CSS        → the #sec-game block inside the Game overlay markup
     (Kept inline here so the page stays a single self-contained, served file; each
     labelled block can be extracted into shell.css / simulation.css / game.css
     once the build serves linked stylesheets.)
     ============================================================================ */

  :root {
    --ink:#1d2433; --ink-soft:#4a5468; --muted:#8a93a6;
    --line:#e6e9f0; --line-soft:#eef1f6; --bg:#f4f6fb; --card:#ffffff;
    --accent:#4f46e5; --accent-2:#7c5cff;
    --shadow:0 1px 2px rgba(18,28,53,0.04), 0 8px 24px rgba(18,28,53,0.06);
    --shadow-sm:0 1px 2px rgba(18,28,53,0.05);
    --radius:14px; --maxw:1160px;
    /* chart group palette (semantic, used inline by JS too) */
    --A:#6A3D9A; --B:#1F78B4;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body {
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  code { font-family:'Inter', ui-monospace, monospace; background:#eef0f7; color:#3a4256;
    padding:1px 5px; border-radius:5px; font-size:.85em; font-weight:500; }

  /* ---------- HERO (scrolls away) ---------- */
  .hero {
    position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(120% 150% at 0% 0%, rgba(124,92,255,0.55) 0%, rgba(124,92,255,0) 45%),
      radial-gradient(120% 150% at 100% 0%, rgba(14,159,110,0.40) 0%, rgba(14,159,110,0) 50%),
      linear-gradient(135deg, #2a2363 0%, #1b1840 60%, #161433 100%);
  }
  .hero::after {
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size:22px 22px; opacity:.5; pointer-events:none;
  }
  .hero-inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:34px 28px 38px; }
  .eyebrow {
    display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; color:rgba(255,255,255,0.72);
    padding:5px 12px; border:1px solid rgba(255,255,255,0.22); border-radius:999px; margin-bottom:16px;
  }
  /* a row of two (or more) eyebrow pills sitting side by side */
  .eyebrows { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .eyebrows .eyebrow { margin-bottom:0; }
  .hero-title {
    font-family:'Source Serif 4', Georgia, serif; font-weight:700;
    font-size:clamp(1.9rem, 6vw, 3.2rem); line-height:1.05; letter-spacing:-0.02em;
    white-space:nowrap;
  }
  .hero-sub {
    font-size:clamp(1rem, 2.4vw, 1.45rem); font-weight:600;
    color:rgba(255,255,255,0.84); margin-top:6px;
  }
  .hero-context { margin-top:16px; font-size:0.95rem; color:rgba(255,255,255,0.78); max-width:64ch; }

  /* ---------- STICKY COLLAPSING TOPBAR ---------- */
  /* The bar transitions between two states as the page scrolls. At the very top
     it is transparent / hero-toned and reads as the bottom of the hero header;
     once the hero scrolls away the IntersectionObserver on #hdr-sentinel adds
     .is-stuck and it detaches into the glass/solid bar (the liked scrolled look,
     preserved verbatim below). */
  .topbar {
    position:sticky; top:0; z-index:30;
    background:transparent; border-bottom:1px solid transparent;
    transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  /* AT THE TOP — blends into the bottom of the hero: carries the hero's dark
     diagonal tone (and light nav text, set below) so it looks like part of it. */
  .topbar:not(.is-stuck) {
    background:linear-gradient(135deg, #1b1840 0%, #161433 100%);
  }
  /* SCROLLED PAST THE HERO — the existing glass/solid bar, unchanged. */
  .topbar.is-stuck {
    background:rgba(244,246,251,0.86); backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner {
    max-width:var(--maxw); margin:0 auto; padding:10px 28px;
    display:flex; align-items:center; gap:18px;
  }
  .topbar-title {
    font-family:'Source Serif 4', Georgia, serif; font-weight:700; font-size:1.05rem;
    white-space:nowrap; letter-spacing:-0.01em; color:var(--ink);
    opacity:0; transform:translateY(5px); transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .topbar.is-stuck .topbar-title { opacity:1; transform:none; }
  .topbar nav { margin-left:auto; display:flex; gap:6px; }
  .topbar nav a {
    font-size:.86rem; font-weight:600; text-decoration:none; color:rgba(255,255,255,0.86);
    padding:8px 16px; border-radius:9px; transition:background .15s, color .15s, box-shadow .15s;
  }
  /* TOP / merged-with-hero state: UNSELECTED items get a faint translucent grey
     pill (plus a hairline) so they read as clickable buttons against the hero,
     while the SELECTED item keeps its solid accent fill and stays clearly
     distinct. Hover keeps the existing white-pill feel (shared rule below). */
  .topbar:not(.is-stuck) nav a { background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
  .topbar:not(.is-stuck) nav a.active { background:var(--accent); box-shadow:0 4px 12px rgba(79,70,229,0.30); }
  /* once detached, links return to the original ink colour of the glass bar */
  .topbar.is-stuck nav a { color:var(--ink-soft); }
  .topbar nav a:hover { background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
  .topbar nav a.active { background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(79,70,229,0.30); }

  /* ---------- LAYOUT ---------- */
  .wrap { max-width:var(--maxw); margin:0 auto; padding:26px 28px 80px; }

  .panelcard {
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px 26px; margin:20px 0;
  }
  .card-title {
    font-family:'Source Serif 4', Georgia, serif; font-size:1.4rem; font-weight:700;
    letter-spacing:-0.01em; margin-bottom:2px;
  }
  .card-note { font-size:.88rem; color:var(--muted); margin-bottom:6px; }
  .card-head-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

  .note {
    background:#f3f1ff; border:1px solid #e0dbff; color:#4a3fb0;
    padding:10px 14px; border-radius:10px; font-size:.86rem; margin:4px 0 18px;
  }

  .subsection { margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
  .subsection:first-of-type { border-top:0; padding-top:6px; margin-top:14px; }
  .sub-title {
    font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); margin-bottom:12px;
  }
  .sub-title .muted-note { color:var(--muted); font-weight:500; letter-spacing:0; text-transform:none; }

  .field { margin-bottom:14px; }
  .field-label { display:block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:7px; }

  /* segmented controls */
  .segmented { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
  .segmented button {
    border:0; background:transparent; padding:8px 16px; cursor:pointer;
    font-size:.85rem; font-weight:600; color:var(--ink-soft); border-left:1px solid var(--line);
    transition:background .15s, color .15s;
  }
  .segmented button:first-child { border-left:0; }
  .segmented button:hover { background:#f6f7fb; }
  .segmented button.on { background:var(--accent); color:#fff; }
  .segmented.full { display:flex; width:100%; max-width:480px; }
  .segmented.full button { flex:1; }
  .presets-seg button { padding:11px 10px; font-size:.92rem; }
  .presets-seg button.on { background:var(--accent); color:#fff; box-shadow:inset 0 0 0 999px rgba(255,255,255,0.04); }

  /* inputs */
  .inputgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
  .inp { display:flex; flex-direction:column; gap:6px; }
  .inp-label { font-size:.82rem; font-weight:600; color:var(--ink-soft); }
  .inp input[type=number] {
    width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:9px;
    font-size:.95rem; font-variant-numeric:tabular-nums; color:var(--ink); background:#fff;
  }
  .inp input[type=number]:focus { outline:2px solid var(--accent-2); outline-offset:0; border-color:var(--accent-2); }
  .inp.readout { justify-content:center; }
  .inp.readout .ro { font-size:.9rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .inp.readout b { color:var(--ink); }
  .derived {
    margin-top:14px; font-size:.84rem; color:var(--muted); font-variant-numeric:tabular-nums;
    background:#fafbff; border:1px dashed var(--line); border-radius:9px; padding:9px 12px;
  }
  .derived b { color:var(--ink); }

  /* sliders */
  .sliders2 { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
  .slider-field label { display:block; font-size:.86rem; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
  .slideval { float:right; font-variant-numeric:tabular-nums; color:var(--accent); font-weight:700; }
  .slider-field input[type=range] {
    width:100%; height:6px; -webkit-appearance:none; appearance:none;
    background:#e2e6ef; border-radius:3px; outline:none;
  }
  .slider-field input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer;
    box-shadow:0 1px 3px rgba(79,70,229,0.45);
  }
  .slider-field input[type=range]::-moz-range-thumb {
    width:16px; height:16px; border:none; border-radius:50%; background:var(--accent); cursor:pointer;
  }
  .hint { display:block; font-size:.76rem; color:var(--muted); margin-top:6px; }

  /* extensions */
  .ext .cb { display:flex; align-items:center; gap:9px; font-weight:600; font-size:.9rem; cursor:pointer; margin:6px 0; }
  .ext .cb input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .ext .panel {
    display:none; margin:6px 0 10px 26px; padding:12px 16px;
    border-left:2px solid var(--line); background:#fafbff; border-radius:0 9px 9px 0;
  }
  .ext .panel.on { display:block; }
  .ext .panel .small { font-size:.82rem; color:var(--muted); margin-bottom:10px; }

  /* GO */
  .go {
    margin-top:22px; background:var(--accent); color:#fff; border:0; border-radius:11px;
    padding:13px 30px; font-size:1rem; font-weight:700; cursor:pointer;
    box-shadow:0 6px 16px rgba(79,70,229,0.30); transition:background .15s, transform .05s;
  }
  .go:hover { background:#4338ca; }
  .go:active { transform:translateY(1px); }

  /* outputs */
  .chartwrap { overflow-x:auto; text-align:center; margin-top:8px; }
  .chartwrap svg { max-width:100%; height:auto; }
  .legend { font-size:.78rem; color:var(--muted); margin-top:8px; text-align:center; }
  .legend span { display:inline-block; margin:0 9px; }
  .sw { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; }

  .kpis { display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 18px; }
  .kpi { flex:1 1 150px; background:#f6f7fb; border:1px solid var(--line-soft); border-radius:11px; padding:11px 14px; }
  .kpi .v { font-size:1.2rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
  .kpi .k { font-size:.74rem; color:var(--muted); margin-top:2px; }
  .kpi .k b { color:var(--ink-soft); }

  .twocol { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .tbl-cap { font-size:.82rem; color:var(--ink-soft); margin:0 0 7px; }
  .tbl-cap:not(:first-child) { margin-top:16px; }
  .eqtables table { border-collapse:collapse; width:100%; font-size:.85rem; font-variant-numeric:tabular-nums; }
  .eqtables th, .eqtables td { border:1px solid var(--line); padding:7px 9px; text-align:center; }
  .eqtables th { background:#f3f4f8; font-weight:600; color:var(--ink-soft); }
  .eqtables td.lab, .eqtables th.lab { background:#f3f4f8; font-weight:600; text-align:left; }

  .hidden { display:none !important; }
  .small { font-size:.82rem; color:var(--muted); }

  @media (max-width:760px) {
    .sliders2 { grid-template-columns:1fr; }
    .twocol { grid-template-columns:1fr; }
    .hero-inner, .topbar-inner, .wrap { padding-left:18px; padding-right:18px; }
    .panelcard { padding:18px; }
  }