:root {
      color-scheme: light;
      --bg: #f5f7f8;
      --panel: #ffffff;
      --ink: #172126;
      --muted: #5f6c74;
      --line: #d9e0e3;
      --accent: #006d77;
      --accent-dark: #004e56;
      --danger: #a23b3b;
      --positive: #0f7b55;
      --shadow: 0 10px 30px rgba(23, 33, 38, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .shell {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 24px 0 32px;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    h1 {
      margin: 0;
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .status {
      min-width: 112px;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 12px;
      background: var(--panel);
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    main {
      display: grid;
      grid-template-columns: minmax(280px, 360px) 1fr;
      gap: 16px;
      align-items: start;
    }

    .panel {
      min-width: 0;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .controls {
      padding: 16px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 9px 10px;
      color: var(--ink);
      background: #ffffff;
      font: inherit;
      font-size: 14px;
    }

    input[type="range"] { accent-color: var(--accent); }

    textarea {
      min-height: 120px;
      resize: vertical;
      line-height: 1.45;
    }

    .wide {
      grid-column: 1 / -1;
    }

    button {
      width: 100%;
      border: 0;
      border-radius: 6px;
      margin-top: 14px;
      padding: 11px 12px;
      background: var(--accent);
      color: #ffffff;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background: var(--accent-dark);
    }

    button:disabled {
      cursor: wait;
      opacity: 0.72;
    }

    .results {
      display: grid;
      min-width: 0;
      gap: 16px;
    }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
    }

    .metric {
      min-height: 94px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: #fbfcfc;
    }

    .metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .metric strong {
      display: block;
      overflow-wrap: anywhere;
      font-size: 24px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .metric.negative strong {
      color: var(--danger);
    }

    .metric.positive strong {
      color: var(--positive);
    }

    .table-wrap {
      overflow-x: auto;
      padding: 0 16px 16px;
    }

    .table-wrap:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
      font-size: 14px;
    }

    th,
    td {
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: right;
      white-space: nowrap;
    }

    th:first-child,
    td:first-child {
      text-align: left;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .log {
      margin: 0;
      padding: 0 16px 16px;
      color: var(--danger);
      min-height: 20px;
      font-size: 13px;
    }

    .intro { color: var(--muted); line-height: 1.5; }
    .curve { padding: 16px; }
    .curve h2 { margin: 0 0 8px; font-size: 18px; }
    .curve svg { display: block; width: 100%; height: auto; }
    .curve path { fill: none; stroke: var(--accent); stroke-width: 3; }
    .curve line { stroke: var(--line); }
    .curve text { fill: var(--muted); font-size: 12px; }
    .curve circle { fill: var(--accent); }
    .curve table { min-width: 0; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    @media (max-width: 860px) {
      main,
      .metrics {
        grid-template-columns: minmax(0, 1fr);
      }

      header {
        align-items: flex-start;
        flex-direction: column;
      }

      .status {
        width: 100%;
      }
    }
  /* Keep the original teal, light panels and system font. */
header {gap:16px;flex-wrap:wrap} nav {line-height:1.8} a {color:#006872}
.eyebrow {font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#526471}
.question {font-size:28px;margin:24px 0 8px}.workspace {display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr);gap:18px;margin:18px 0}
.metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.metric strong {overflow-wrap:anywhere;font-size:26px}.controls {padding:20px}.controls h2 {margin-top:0}
.presets {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} button {cursor:pointer}
.presets button {width:auto;margin:0;padding:10px 12px} #reset {margin:12px 0}
summary {cursor:pointer;font-weight:600;padding:14px 0}details {margin-top:8px}
.explanation,.supporting,.evidence {padding:20px;margin:18px 0}.error {color:#a72532}
.contributions {display:grid;gap:10px;margin:20px 0}.contribution {display:grid;grid-template-columns:115px minmax(0,1fr) 95px;gap:10px;align-items:center}
.track {background:#e3eaee;border-radius:4px;height:14px;overflow:hidden}.fill {height:100%;background:#007782}.fill.loss {background:#b23745}
#status {color:#526471}#greeks {line-height:1.8}.curve {min-width:0}.curve svg {min-width:0}.metrics .panel {padding:16px}
@media(max-width:860px){.workspace {grid-template-columns:1fr}.metrics {grid-template-columns:repeat(2,minmax(0,1fr))}.question {font-size:24px}.metric strong{font-size:23px}.shell {padding:16px}.contribution {grid-template-columns:95px minmax(0,1fr) 80px}.curve text{font-size:11px}}
@media(max-width:860px){.metric strong{font-size:18px}}
@media(max-width:360px){.metrics{grid-template-columns:1fr}}
@media(max-width:860px){.metrics{padding:0}}