@font-face {
      font-family: "Newsreader";
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url("fonts/newsreader-latin.woff2") format("woff2");
    }
    @font-face {
      font-family: "Public Sans";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("fonts/public-sans-latin.woff2") format("woff2");
    }

    :root {
      --paper: #f4f0e7;
      --ink: #28304f;
      --muted: #5c6479;
      --line: rgba(40,48,79,.17);
      --organism: #e4ece9;
      --organism-deep: #cbded9;
      --science: #598da8;
      --science-soft: #9ab8c6;
      --problem: #b9664e;
      --success: #cb7b57;
      --control: #334b68;
      --departure: #73749c;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      color: var(--ink);
      background: var(--paper);
      font-family: "Newsreader", Georgia, serif;
    }

    main { width: 100%; margin: 0; padding: 20px 31px 34px; }
    .model-header {
      width: min(980px, 100%);
      margin-inline: auto;
      padding: 0 0 16px;
      border-bottom: 1px solid var(--line);
    }
    .eyebrow, .legend, label, button, output {
      font-family: "Public Sans", system-ui, sans-serif;
    }
    .eyebrow {
      display: inline-block;
      margin: 0 0 18px;
      color: #40576c;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .12em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .eyebrow:hover { color: var(--problem); }
    h1 {
      margin: 0;
      max-width: 850px;
      color: #20231f;
      font-size: clamp(29px, 5vw, 48px);
      line-height: 1;
      font-weight: 500;
      letter-spacing: -.035em;
    }
    .workbench {
      display: grid;
      grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
      gap: 34px;
      width: min(980px, 100%);
      margin-inline: auto;
      padding-top: 18px;
      align-items: stretch;
    }
    .controls {
      padding: 8px 2px 4px;
      display: flex;
      flex-direction: column;
      min-height: 650px;
    }
    .controls h2 {
      margin: 0 0 5px;
      font-size: 1.405rem;
      font-weight: 500;
    }
    .control { padding: 13px 0 14px; border-top: 1px solid var(--line); }
    .control-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    label { font-size: .905rem; line-height: 1.3; letter-spacing: .02em; }
    output { color: var(--muted); font-size: .805rem; text-transform: uppercase; letter-spacing: .08em; }
    input[type="range"] {
      width: 100%; height: 24px; margin: 8px 0 0; padding: 0;
      appearance: none; background: transparent; cursor: pointer;
    }
    input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: rgba(40,48,79,.35); }
    input[type="range"]::-moz-range-track { height: 1px; background: rgba(40,48,79,.35); }
    input[type="range"]::-webkit-slider-thumb {
      appearance: none; width: 13px; height: 13px; margin-top: -6px;
      background: var(--paper); border: 1.5px solid var(--control); border-radius: 50%;
    }
    input[type="range"]::-moz-range-thumb {
      width: 12px; height: 12px; background: var(--paper);
      border: 1.5px solid var(--control); border-radius: 50%;
    }
    input[type="range"]:focus-visible { outline: 2px solid var(--problem); outline-offset: 4px; }
    .actions { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
    .primary-actions { display: flex; justify-content: center; gap: 9px; }
    button {
      appearance: none; border: 1px solid rgba(40,48,79,.34); color: var(--ink);
      background: transparent; min-height: 40px; padding: 8px 14px; font-size: .885rem;
      letter-spacing: .035em; cursor: pointer; border-radius: 999px;
    }
    button:hover { background: rgba(40,48,79,.055); }
    button:focus-visible { outline: 2px solid var(--problem); outline-offset: 2px; }

    .stage {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(560px, 1fr) auto;
      min-height: 650px;
      overflow: hidden;
      background: transparent;
    }
    canvas { display: block; grid-column: 1; grid-row: 1; min-width: 0; width: 100%; height: 100%; min-height: 560px; }
    .legend {
      position: static; grid-column: 1; grid-row: 2; z-index: 2;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; color: var(--muted);
      padding: 12px 0 4px; font-size: .84rem; letter-spacing: .015em; pointer-events: none;
    }
    .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .dot { display:inline-block; width: 9px; height:9px; border-radius:50%; background:var(--science); }
    .dot.capability { background: var(--ink); }
    .dot.problem { width:10px; height:10px; background:transparent; border:1.7px solid var(--problem); }
    .dot.departure { width: 10px; height: 10px; background: var(--departure); box-shadow: 0 0 0 3px rgba(115,116,156,.13); }

    .modal {
      position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
      padding: 24px; background: rgba(32,35,31,.22); backdrop-filter: blur(2px);
    }
    .modal[hidden] { display: none; }
    .modal-card {
      position: relative; width: min(680px, 100%); max-height: min(82vh, 760px); overflow: auto;
      padding: 34px 38px 32px; color: var(--ink); background: var(--paper);
      border: 1px solid rgba(40,48,79,.22); box-shadow: 0 18px 70px rgba(40,48,79,.16);
    }
    .modal-card h2 { margin: 0 44px 18px 0; font-size: 2rem; line-height: 1.05; font-weight: 500; }
    .modal-card p { margin: 0 0 15px; font-size: 1.08rem; line-height: 1.52; }
    .modal-card .parameter-notes { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
    .modal-card .parameter-notes h3 { margin: 0 0 15px; font-size: 1.35rem; line-height: 1.2; font-weight: 500; }
    .modal-card .parameter-notes p { margin-bottom: 11px; font-size: 1rem; }
    .modal-card .parameter-notes strong { font-weight: 600; }
    .modal-card .sources-heading { margin-top: 24px; font-weight: 600; }
    .modal-card .source { margin-bottom: 9px; padding-left: 18px; text-indent: -18px; font-size: .98rem; }
    .modal-close { position: absolute; top: 16px; right: 16px; min-width: 38px; padding: 6px 10px; font-size: 1.15rem; line-height: 1; }

    @media (max-width: 1100px) {
      main { padding: 20px 20px 32px; }
      .workbench { grid-template-columns: 1fr; gap: 17px; }
      .controls { min-height: auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 18px; }
      .controls h2, .actions { grid-column: 1 / -1; }
      .actions { margin-top: 14px; }
      .stage { min-height: 540px; }
      canvas { min-height: 540px; }
    }
    @media (max-width: 560px) {
      .controls { display: block; }
      .stage { grid-template-columns: 1fr; min-height: 0; overflow: visible; }
      canvas { height: 490px; min-height: 490px; }
      .legend {
        grid-column: 1; grid-row: auto; position: static; transform: none; margin-top: -4px; padding: 0 4px 20px;
        display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 14px;
        font-size: .88rem;
      }
      .modal-card { padding: 30px 24px 26px; }
    }
    @media (prefers-reduced-motion: reduce) { canvas { opacity: .98; } }