:root{
    --sheet:#D7DCD3; --sheet-2:#C8CFC4; --card:#DFE3DB; --ink:#0E1612; --soft:#354038;
    --rule:#6B7568; --hazard:#B83810; --amber:#C48612; --go:#1A3D28;
    --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
  body{
    background:var(--sheet-2); color:var(--ink);
    font-family:'Barlow',system-ui,sans-serif; font-size:17px;
    -webkit-font-smoothing:antialiased; height:100dvh; overflow:hidden;
  }
  .app{display:flex; flex-direction:column; height:100dvh; gap:10px; padding:10px}

  /* ---------- stage ---------- */
  .stage{
    position:relative; flex:0 0 42dvh; overflow:hidden;
    background:var(--sheet); border:1.5px solid var(--ink); border-radius:var(--r-lg);
  }
  canvas{display:block; width:100%; height:100%; touch-action:none}
  .turn-tabs{
    position:absolute; right:10px; top:10px; z-index:3;
    display:flex; gap:3px; padding:3px;
    background:var(--card); border:1.5px solid var(--ink); border-radius:var(--r-pill);
  }
  .turn-tab{
    padding:8px 13px; background:transparent; border:none; cursor:pointer;
    border-radius:var(--r-pill); color:var(--soft);
    font-family:'Barlow Condensed',sans-serif; font-size:12.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; transition:background .15s,color .15s;
  }
  .turn-tab[aria-selected="true"]{background:var(--ink); color:var(--sheet)}
  .turn-tab:focus-visible{outline:2px solid var(--hazard); outline-offset:-2px}
  .legend{
    position:absolute; left:12px; top:11px; z-index:2;
    font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
    display:flex; flex-direction:column; gap:6px;
  }
  .legend span{display:flex; align-items:center; gap:9px}
  .sw{width:24px; height:14px; border:1.5px solid var(--ink); border-radius:3px}

  /* ---------- transport ---------- */
  .transport{
    flex:none; display:flex; align-items:center; gap:13px; padding:9px 15px 9px 9px;
    background:var(--card); border:1.5px solid var(--ink); border-radius:var(--r-pill);
  }
  .play{
    width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%;
    background:var(--ink); border:none; cursor:pointer; transition:background .15s;
  }
  .play:hover{background:var(--hazard)}
  .play svg{fill:var(--sheet)}
  .play:focus-visible{outline:2px solid var(--hazard); outline-offset:3px}
  .scrub{flex:1; display:flex; flex-direction:column; gap:0}
  .scrub-top{display:flex; justify-content:space-between;
    font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
    letter-spacing:.15em; text-transform:uppercase; color:var(--soft); font-weight:600}
  .scrub-top b{font-family:'IBM Plex Mono',monospace; letter-spacing:0; color:var(--ink)}

  input[type=range]{-webkit-appearance:none; appearance:none; background:transparent;
    width:100%; height:32px; cursor:pointer; touch-action:pan-y}
  input[type=range]::-webkit-slider-runnable-track{height:7px; background:var(--sheet); border:1.3px solid var(--ink); border-radius:var(--r-pill)}
  input[type=range]::-moz-range-track{height:7px; background:var(--sheet); border:1.3px solid var(--ink); border-radius:var(--r-pill)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px;
    background:var(--hazard); border:2px solid var(--ink); border-radius:50%; margin-top:-10px}
  input[type=range]::-moz-range-thumb{width:22px; height:22px; background:var(--hazard);
    border:2px solid var(--ink); border-radius:50%}
  input[type=range]:focus-visible{outline:2px solid var(--hazard); outline-offset:2px}

  /* ---------- tabs ---------- */
  .tabs{flex:none; display:flex; gap:4px; padding:4px; background:var(--card);
    border:1.5px solid var(--ink); border-radius:var(--r-pill)}
  .tab{flex:1; padding:10px 6px; background:transparent; border:none; cursor:pointer;
    border-radius:var(--r-pill); color:var(--soft);
    font-family:'Barlow Condensed',sans-serif; font-size:14.5px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase; transition:background .15s,color .15s}
  .tab[aria-selected="true"]{background:var(--ink); color:var(--sheet)}
  .tab:focus-visible{outline:2px solid var(--hazard); outline-offset:-2px}

  /* ---------- rail ---------- */
  .rail{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; gap:10px; padding-bottom:4px}
  .panel{display:none; flex-direction:column; gap:10px}
  .panel.on{display:flex}
  .card{background:var(--card); border:1.5px solid var(--ink);
    border-radius:var(--r-lg); overflow:hidden}

  /* ---------- results ---------- */
  .big{padding:16px 18px 14px; background:var(--sheet)}
  .big .k{font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--soft); font-weight:700}
  .big .v{font-family:'IBM Plex Mono',monospace; font-size:44px; font-weight:600;
    color:var(--hazard); line-height:1.05; margin-top:3px}
  .big .hint{font-size:15px; color:var(--soft); line-height:1.45; margin-top:5px}
  .verdict{padding:12px 18px; font-family:'Barlow Condensed',sans-serif; font-size:15px;
    font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.35}
  .verdict.ok{background:#1F7A3A; color:#EAF6ED}
  .verdict.tight{background:#E0B01A; color:#1A1404}
  .verdict.bad{background:#C42A1A; color:#F8EAE3}
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule)}
  .stat{padding:12px 18px; background:var(--card)}
  .stat .k{font-size:14px; color:var(--soft); line-height:1.25}
  .stat .v{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; margin-top:1px}

  /* ---------- presets ---------- */
  .presets{padding:14px 16px 16px}
  .prow + .prow{margin-top:14px}
  .plabel{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; letter-spacing:.18em;
    text-transform:uppercase; font-weight:700; color:var(--soft); margin-bottom:8px}
  .chips{display:flex; gap:7px; flex-wrap:wrap}
  .chip{font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; padding:8px 14px; border-radius:var(--r-pill);
    background:var(--sheet); border:1.5px solid var(--ink); color:var(--ink); cursor:pointer;
    transition:background .15s,color .15s}
  .chip[aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
  .chip:focus-visible{outline:2px solid var(--hazard); outline-offset:2px}

  /* ---------- inputs ---------- */
  .group{padding:14px 18px 8px}
  .group + .group{border-top:1px dashed var(--rule)}
  .group-label{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; letter-spacing:.18em;
    text-transform:uppercase; font-weight:700; margin-bottom:6px;
    display:flex; align-items:center; gap:8px; color:var(--soft)}
  .group-label::after{content:""; flex:1; height:1px; background:var(--rule); border-radius:1px}
  .row{margin-bottom:6px}
  .row-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
  .row-top label{font-size:16px; line-height:1.25}
  .sym{font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--hazard); font-weight:600}
  .val-lock{display:flex; align-items:center; gap:6px; flex:none}
  .val{font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600;
    background:var(--sheet); border:1.3px solid var(--rule); border-radius:var(--r-pill);
    padding:2px 11px; white-space:nowrap}
  .lock{
    width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0;
    border:1.5px solid var(--ink); border-radius:50%; background:var(--sheet);
    color:var(--soft); cursor:pointer; transition:background .15s,color .15s}
  .lock[aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
  .lock:focus-visible{outline:2px solid var(--hazard); outline-offset:2px}
  .lock svg{width:14px; height:14px; display:block}
  .row.locked input[type=range]{opacity:.38; pointer-events:none}
  .tip{font-size:14px; color:var(--soft); line-height:1.4; margin-top:-2px}
  .calc-bar{padding:4px 18px 16px}
  .calc{
    width:100%; padding:12px 16px; border:1.5px solid var(--ink); border-radius:var(--r-pill);
    background:var(--hazard); color:#F8EAE3; cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase}
  .calc:hover{background:var(--ink); color:var(--sheet)}
  .calc:focus-visible{outline:2px solid var(--hazard); outline-offset:3px}

  /* ---------- figures ---------- */
  .fig{background:var(--sheet); padding:8px 10px 4px}
  .fig svg{display:block; width:100%; height:auto}
  .eq{padding:14px 18px}
  .eq + .eq{border-top:1px dashed var(--rule)}
  .eq-title{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--soft); font-weight:700; margin-bottom:7px}
  .eq-line{font-family:'IBM Plex Mono',monospace; font-size:15.5px; line-height:1.85}
  .eq-line .c{color:var(--soft)} .eq-line .h{color:var(--hazard); font-weight:600}
  .warn{background:var(--hazard); color:#F8EAE3; padding:12px 18px; font-size:15px; line-height:1.45}
  .note{padding:14px 18px; font-size:14.5px; line-height:1.55; color:var(--ink); opacity:.82}

  @media (min-width:900px){
    .app{display:grid; grid-template-columns:1fr 390px; grid-template-rows:1fr auto; gap:10px}
    .stage{grid-column:1; grid-row:1; flex:none}
    .transport{grid-column:1; grid-row:2}
    .tabs{display:none}
    .rail{grid-column:2; grid-row:1 / span 2}
    .panel{display:flex !important}
    body{font-size:16px}
    input[type=range]{height:26px}
    input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}
    input[type=range]::-moz-range-thumb{width:16px;height:16px}
  }