:root{
    --bg:#ffffff;
    --panel:#f6f7f9;
    --panel-edge:#e4e7ec;
    --ink:#1a1d23;
    --muted:#727a86;
    --faint:#aeb4bd;
    --grid-minor:#eef0f3;
    --grid-major:#dde1e7;
    --axis:#9aa1ab;
    --accent:#2f7d5b;
    --danger:#c0492f;
    --field:#ffffff;
    --field-edge:#d7dbe1;
    --hover:#eef0f3;
    --fnbg:#eceff3;
    --code-bg:#eaedf1;
    --glass:rgba(255,255,255,.92);
    --scroll-track:rgba(228,231,236,.5);
    --scroll-thumb:#c4cad3;
    --scroll-thumb-hover:#9aa3af;
    --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --side-width:340px;
  }
  body.dark{
    --bg:#0d1017;
    --panel:#12161d;
    --panel-edge:#222a34;
    --ink:#e8ebf0;
    --muted:#9aa4b2;
    --faint:#48515d;
    --grid-minor:#171c24;
    --grid-major:#222a34;
    --axis:#586273;
    --accent:#46b389;
    --danger:#e0735c;
    --field:#161b22;
    --field-edge:#2a323d;
    --hover:#1c222b;
    --fnbg:#1a2027;
    --code-bg:#1f262e;
    --glass:rgba(15,19,26,.94);
    --scroll-track:rgba(34,42,52,.42);
    --scroll-thumb:#3a4654;
    --scroll-thumb-hover:#526071;
  }
  *{box-sizing:border-box}
  html,
  body,
  #side,
  #rows,
  #analysis,
  #table-wrap{
    scrollbar-width:thin;
    scrollbar-color:var(--scroll-thumb) var(--scroll-track);
  }
  *::-webkit-scrollbar{
    width:10px;
    height:10px;
  }
  *::-webkit-scrollbar-track{
    background:var(--scroll-track);
  }
  *::-webkit-scrollbar-thumb{
    background:var(--scroll-thumb);
    border:3px solid transparent;
    border-radius:999px;
    background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover{
    background:var(--scroll-thumb-hover);
    background-clip:padding-box;
  }
  *::-webkit-scrollbar-corner{
    background:transparent;
  }
  html,body{height:100%;margin:0}
  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bg);
    display:flex;
    overflow:hidden;
  }
  /* ---------- Sidebar ---------- */
  #side{
    width:var(--side-width);
    min-width:260px;
    flex:0 0 auto;
    background:var(--panel);
    border-right:1px solid var(--panel-edge);
    display:flex;
    flex-direction:column;
    height:100%;
    overflow-y:auto;
  }
  #side-resizer{
    position:relative;
    z-index:9;
    flex:0 0 8px;
    width:8px;
    margin-left:-4px;
    margin-right:-4px;
    cursor:col-resize;
    touch-action:none;
    outline:none;
  }
  #side-resizer::after{
    content:"";
    position:absolute;
    inset:0 3px;
    background:transparent;
    transition:background .14s ease;
  }
  #side-resizer:hover::after,
  #side-resizer:focus-visible::after,
  body[data-resizing-side="1"] #side-resizer::after{
    background:var(--accent);
  }
  body[data-resizing-side="1"]{
    cursor:col-resize;
    user-select:none;
  }
  #brand{
    padding:16px 18px 12px;
    border-bottom:1px solid var(--panel-edge);
  }
  .brand-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
  }
  #brand h1{
    margin:0;
    font-size:15px;
    font-weight:650;
    letter-spacing:0;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  #brand .mark{
    width:18px;height:18px;flex:0 0 auto;
  }
  #brand p{
    margin:4px 0 0 26px;
    font-size:11.5px;
    color:var(--muted);
  }
  .top-clear{
    flex:0 0 auto;
    height:28px;
    width:30px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:7px;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .top-clear:hover{border-color:var(--danger);color:var(--danger)}
  .top-clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .clear-icon{
    width:16px;
    height:16px;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  #rows{
    flex:0 0 auto;
    min-height:140px;
    max-height:260px;
    overflow-y:auto;
    padding:8px 10px;
  }
  .row{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:7px;
    border:1px solid transparent;
    border-radius:8px;
  }
  .row:hover{
    background:var(--hover);
    border-color:var(--panel-edge);
  }
  .row[data-selected="1"]{
    background:var(--hover);
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(47,125,91,.10);
  }
  .row-head{
    display:grid;
    grid-template-columns:20px 18px minmax(0,1fr) auto 22px 22px;
    align-items:center;
    gap:6px;
    min-width:0;
  }
  .chip{
    width:18px;height:18px;
    border-radius:5px;
    border:none;
    cursor:pointer;
    padding:0;
    position:relative;
  }
  .chip[data-off="1"]{opacity:0.28}
  .chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .eye{
    width:20px;height:20px;
    border:none;background:none;cursor:pointer;
    color:var(--muted);font-size:13px;line-height:1;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
  }
  .eye:hover{background:var(--hover);color:var(--ink)}
  .eye[data-on="0"]{color:var(--faint)}
  .row-name{
    min-width:0;
    width:100%;
    height:26px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:var(--ink);
    font-family:var(--sans);
    font-size:12.5px;
    font-weight:650;
    padding:0 5px;
    outline:none;
  }
  .row-name:hover,
  .row-name:focus{
    background:var(--field);
    border-color:var(--field-edge);
  }
  .row-name:focus{box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  .row-type{
    max-width:92px;
    min-width:0;
    border:1px solid var(--field-edge);
    border-radius:999px;
    color:var(--muted);
    background:var(--field);
    font-family:var(--mono);
    font-size:9.5px;
    line-height:1;
    padding:4px 6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .row-toggle{
    width:22px;height:22px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    line-height:1;
  }
  .row-toggle:hover{background:var(--field);border-color:var(--field-edge);color:var(--accent)}
  .row-summary{
    display:none;
    width:100%;
    min-width:0;
    border:none;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.35;
    padding:0 0 0 44px;
    text-align:left;
    overflow-wrap:anywhere;
  }
  .row-summary-expr{
    display:block;
    min-width:0;
    color:var(--muted);
  }
  .row-summary-badges{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:4px;
  }
  .row-badge{
    border:1px solid var(--field-edge);
    border-radius:999px;
    background:var(--field);
    color:var(--muted);
    font-family:var(--mono);
    font-size:9.5px;
    line-height:1;
    padding:3px 6px;
    white-space:nowrap;
  }
  .row-badge[data-tone="error"]{
    border-color:var(--danger);
    color:var(--danger);
  }
  .row-badge[data-tone="muted"]{opacity:.7}
  .row[data-collapsed="1"] .row-body{display:none}
  .row[data-collapsed="1"] .row-summary{display:block}
  .row-body{
    display:grid;
    gap:6px;
    min-width:0;
    padding-left:28px;
  }
  .style-pop{
    position:fixed;z-index:50;
    width:188px;
    background:var(--panel);
    border:1px solid var(--panel-edge);
    border-radius:8px;
    box-shadow:0 8px 28px rgba(10,14,20,.22);
    padding:11px 12px;
  }
  .style-pop .sp-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 5px}
  .style-pop .sp-label:first-child{margin-top:0}
  .sp-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
  .sp-sw{width:100%;aspect-ratio:1;border-radius:5px;border:1px solid rgba(127,127,127,.25);cursor:pointer;padding:0;position:relative}
  .sp-sw[data-sel="1"]{outline:2px solid var(--ink);outline-offset:1px}
  .sp-custom{margin-top:6px;width:100%;height:26px;border:1px solid var(--field-edge);border-radius:6px;background:var(--field);cursor:pointer;padding:2px}
  .sp-row{display:flex;gap:5px}
  .sp-opt{
    flex:1 1 0;height:28px;
    border:1px solid var(--field-edge);background:var(--field);
    border-radius:6px;cursor:pointer;color:var(--muted);
    font-family:var(--mono);font-size:11px;
  }
  .sp-opt:hover{border-color:var(--accent)}
  .sp-opt[data-sel="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .sp-sw:focus-visible,.sp-opt:focus-visible,.sp-custom:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .prefix{
    font-family:var(--mono);
    font-size:13px;
    color:var(--faint);
    flex:0 0 auto;
    user-select:none;
  }
  .field-wrap{min-width:0}
  .math-visual{
    display:block;
    min-height:20px;
    padding:3px 8px 0;
    color:var(--muted);
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .math-visual:empty{display:none}
  .field{
    width:100%;
    font-family:var(--mono);
    font-size:13.5px;
    color:var(--ink);
    background:var(--field);
    border:1px solid var(--field-edge);
    border-radius:7px;
    padding:6px 8px;
    outline:none;
  }
  .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  .row[data-err="1"] .field{border-color:var(--danger)}
  .row-tools{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
  }
  .row-tools:empty{display:none}
  .calc{
    min-width:0;
    height:26px;padding:0 6px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:6px;cursor:pointer;
    font-family:var(--mono);font-size:11px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    white-space:nowrap;
  }
  .calc:hover{border-color:var(--accent);color:var(--accent)}
  .calc[data-on="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .calc:disabled{
    opacity:.42;
    cursor:default;
  }
  .calc:disabled:hover{
    border-color:var(--field-edge);
    color:var(--muted);
  }
  /* Calculus toggles only apply to y=f(x) curves; hide for other kinds. */
  .row[data-kind="parametric"] .row-tools,
  .row[data-kind="polar"] .row-tools,
  .row[data-kind="implicit"] .row-tools,
  .row[data-kind="implicit-ineq"] .row-tools,
  .row[data-kind="regression"] .row-tools,
  .row[data-kind="points"] .row-tools{display:none}
  .row[data-has-result-table="1"] .row-tools{display:grid}
  .row[data-kind="geometry"] .row-tools{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .row-context-actions{
    display:none;
    flex-wrap:wrap;
    gap:5px;
    min-width:0;
  }
  .row[data-selected="1"] .row-context-actions:not(:empty){
    display:flex;
  }
  .context-action{
    height:24px;
    min-width:0;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:6px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1;
    padding:0 7px;
    white-space:nowrap;
  }
  .context-action:hover{
    border-color:var(--accent);
    color:var(--accent);
  }
  .context-action:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:2px;
  }
  .row-info{
    min-width:0;
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.35;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .row-info:empty{display:none}
  .steps-zone:empty{display:none}
  .steps{
    margin:4px 0 2px;
    font-size:10.5px;
    line-height:1.4;
  }
  .steps summary{
    cursor:pointer;
    color:var(--accent);
    font-weight:600;
    user-select:none;
  }
  .steps summary:hover{text-decoration:underline}
  .steps-body{
    margin:4px 0 2px 10px;
    padding-left:8px;
    border-left:2px solid var(--panel-edge);
  }
  .step-line{margin:0 0 7px}
  .step-rule{color:var(--ink); font-weight:600}
  .step-formula{color:var(--muted); margin-left:6px}
  .step-note{color:var(--muted); font-style:italic; margin-left:6px}
  .step-expr{
    color:var(--muted);
    font-family:var(--mono);
    overflow-x:auto;
    overflow-wrap:anywhere;
  }
  .lesson-highlight-target{
    outline:2px solid var(--accent)!important;
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(47,125,91,.16)!important;
    animation:lessonTargetPulse 1.25s ease-in-out infinite;
  }
  .row.lesson-highlight-target,
  .param-control.lesson-highlight-target,
  .op-field.lesson-highlight-target{
    border-radius:8px;
  }
  .field.lesson-highlight-target{
    outline:none!important;
    box-shadow:none!important;
    animation:none;
  }
  .field.lesson-highlight-target:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(47,125,91,.12)!important;
  }
  @keyframes lessonTargetPulse{
    0%,100%{box-shadow:0 0 0 4px rgba(47,125,91,.14)}
    50%{box-shadow:0 0 0 7px rgba(47,125,91,.24)}
  }
  .param-tools{
    display:grid;
    gap:5px;
  }
  .param-tools:empty{display:none}
  .param-control{
    display:grid;
    grid-template-columns:14px minmax(0,1fr) 50px 26px;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
  }
  .param-control span{
    color:var(--accent);
    font-weight:650;
    text-align:center;
  }
  .param-control input[type="range"]{
    width:100%;
    accent-color:var(--accent);
  }
  .param-control input[type="number"]{
    width:50px;
    height:24px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--ink);
    border-radius:6px;
    padding:0 4px;
    font-family:var(--mono);
    font-size:10.5px;
  }
  .param-play{
    width:26px;
    height:24px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:6px;
    cursor:pointer;
    font-size:10px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .param-play:hover{border-color:var(--accent);color:var(--accent)}
  .op-tools{display:flex;flex-direction:column;gap:5px;margin-top:4px}
  .op-tools:empty{display:none}
  .op-tools:empty{display:none}
  .op-field{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .op-num{
    width:64px;padding:2px 5px;border:1px solid var(--field-edge);border-radius:5px;
    background:var(--field);color:var(--ink);font-family:var(--mono);font-size:11px;
  }
  .op-num:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  .op-num:disabled{opacity:.45}
  .op-inf{
    padding:2px 7px;border:1px solid var(--field-edge);border-radius:5px;
    background:var(--field);color:var(--muted);cursor:pointer;font-size:11px;
  }
  .op-inf:hover{border-color:var(--accent)}
  .op-inf[data-sel="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .op-dp{
    margin-left:auto;border:1px solid var(--field-edge);border-radius:5px;
    background:var(--field);color:var(--muted);
    font-family:var(--mono);font-size:10.5px;padding:1px 3px;cursor:pointer;
  }
  .del{
    width:22px;height:22px;
    border:none;background:none;color:var(--faint);
    cursor:pointer;border-radius:6px;font-size:15px;line-height:1;
    display:flex;align-items:center;justify-content:center;
  }
  .del:hover{background:var(--hover);color:var(--danger)}
  #add{
    margin:6px 10px 0;
    padding:9px;
    border:1px dashed var(--field-edge);
    background:none;
    color:var(--muted);
    border-radius:8px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:13px;
  }
  #add:hover{border-color:var(--accent);color:var(--accent)}
  #presets{
    margin:10px 10px 0;
    padding:9px;
    border:1px solid var(--panel-edge);
    border-radius:8px;
    background:var(--field);
    display:grid;
    gap:7px;
  }
  .preset-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }
  .preset-titlebar{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .preset-head strong{
    color:var(--ink);
    font-size:11.5px;
    font-weight:650;
    letter-spacing:0;
  }
  #preset-summary{
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .panel-toggle{
    width:28px;
    height:26px;
    border:1px solid var(--field-edge);
    background:var(--bg);
    color:var(--muted);
    border-radius:7px;
    cursor:pointer;
    padding:0;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .panel-toggle:hover{border-color:var(--accent);color:var(--accent)}
  .panel-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .toggle-icon{
    width:14px;
    height:14px;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .14s ease;
  }
  .panel-toggle[data-collapsed="0"] .toggle-icon{
    transform:rotate(180deg);
  }
  #presets[data-collapsed="1"]{
    padding:7px 9px;
  }
  #presets[data-collapsed="1"] #preset-summary,
  #presets[data-collapsed="1"] #preset-list,
  #presets[data-collapsed="1"] .preset-actions,
  #presets[data-collapsed="1"] #preset-preview{
    display:none;
  }
  #preset-list{
    width:100%;
    min-width:0;
    height:30px;
    border:1px solid var(--field-edge);
    background:var(--bg);
    color:var(--ink);
    border-radius:7px;
    padding:0 8px;
    font-family:var(--mono);
    font-size:12px;
    outline:none;
  }
  #preset-list:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  .preset-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .preset-actions button{
    height:28px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:7px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
    min-width:0;
  }
  .preset-actions button:hover{border-color:var(--accent);color:var(--accent)}
  #preset-preview{
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.35;
    display:grid;
    gap:2px;
    min-height:28px;
  }
  #preset-preview span,
  #preset-preview code{
    display:block;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  #preset-preview code{
    color:var(--ink);
    background:transparent;
    font-size:10.5px;
  }
  #lessons{
    margin:10px 10px 0;
    padding:9px;
    border:1px solid var(--panel-edge);
    border-radius:8px;
    background:var(--field);
    display:grid;
    gap:7px;
  }
  .lesson-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }
  .lesson-titlebar{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .lesson-head strong{
    color:var(--ink);
    font-size:11.5px;
    font-weight:650;
    letter-spacing:0;
  }
  #lesson-progress{
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
    white-space:nowrap;
  }
  #lessons[data-collapsed="1"]{
    padding:7px 9px;
  }
  #lessons[data-collapsed="1"] #lesson-progress,
  #lessons[data-collapsed="1"] #lesson-list,
  #lessons[data-collapsed="1"] #lesson-card{
    display:none;
  }
  #lesson-list{
    width:100%;
    min-width:0;
    height:30px;
    border:1px solid var(--field-edge);
    background:var(--bg);
    color:var(--ink);
    border-radius:7px;
    padding:0 8px;
    font-family:var(--mono);
    font-size:12px;
    outline:none;
  }
  #lesson-list:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  #lesson-card{
    display:grid;
    gap:6px;
    min-width:0;
  }
  #lesson-title{
    color:var(--ink);
    font-size:12.5px;
    font-weight:650;
    line-height:1.3;
  }
  #lesson-text{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  #lesson-focus{
    border-left:2px solid var(--accent);
    padding:3px 0 3px 7px;
    color:var(--ink);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  #lesson-focus[hidden]{display:none}
  #lesson-checkpoint{
    display:grid;
    gap:4px;
    border:1px solid var(--field-edge);
    border-radius:7px;
    padding:7px 8px;
    background:var(--bg);
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
  }
  #lesson-checkpoint[hidden]{display:none}
  #lesson-checkpoint span{
    color:var(--accent);
    font-family:var(--mono);
    font-size:9.5px;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  #lesson-checkpoint[data-done="1"]{
    border-color:var(--accent);
    color:var(--ink);
  }
  .lesson-checkpoint-action{
    justify-self:start;
    border:1px solid var(--accent);
    border-radius:6px;
    background:var(--accent);
    color:#fff;
    padding:5px 8px;
    font-size:11px;
    font-weight:650;
    cursor:pointer;
  }
  .lesson-checkpoint-action:hover{filter:brightness(1.05)}
  .lesson-checkpoint-action[hidden]{display:none}
  #lesson-toast{
    border:1px solid rgba(47,125,91,.35);
    border-radius:7px;
    background:rgba(47,125,91,.1);
    color:var(--accent);
    font-family:var(--mono);
    font-size:10.5px;
    line-height:1.35;
    padding:6px 8px;
  }
  #lesson-toast[hidden]{display:none}
  #lesson-next-instruction{
    border-left:2px solid var(--accent);
    padding:3px 0 3px 7px;
    color:var(--ink);
    font-size:11px;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  #lesson-next-instruction[hidden]{display:none}
  .lesson-actions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
  }
  .lesson-actions button{
    height:28px;
    border:1px solid var(--field-edge);
    background:var(--bg);
    color:var(--muted);
    border-radius:7px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
    min-width:0;
  }
  .lesson-actions button:hover{border-color:var(--accent);color:var(--accent)}
  .lesson-actions button:disabled{opacity:.45;cursor:default}
  .lesson-actions button:disabled:hover{border-color:var(--field-edge);color:var(--muted)}
  #spacer{flex:0 0 8px;min-height:8px}
  #pad{border-top:1px solid var(--panel-edge)}
  #tabs{display:flex;gap:4px;padding:8px 10px 0}
  .tab{
    flex:1 1 auto;height:28px;
    border:1px solid var(--field-edge);
    background:var(--field);
    border-radius:7px 7px 0 0;
    border-bottom:none;
    cursor:pointer;color:var(--muted);
    font-family:var(--mono);font-size:12px;
  }
  .tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
  .grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    padding:8px 10px 10px;
  }
  .grid.hidden{display:none}
  .grid button{
    height:36px;
    border:1px solid var(--field-edge);
    background:var(--field);
    border-radius:8px;cursor:pointer;
    font-family:var(--mono);font-size:13px;color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    user-select:none;overflow:hidden;
  }
  .grid button:hover{border-color:var(--accent)}
  .grid button:active{background:var(--hover)}
  .grid button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .grid .fn{background:var(--fnbg);font-size:11px;color:var(--muted)}
  .grid .op{color:var(--accent);font-weight:600}
  .grid .util{color:var(--danger);font-weight:600}
  .grid button[data-on="1"]{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .geo-builder{
    display:grid;
    gap:6px;
    margin:0 10px 10px;
    border-top:1px solid var(--panel-edge);
    padding-top:8px;
  }
  .geo-builder.hidden{display:none}
  .geo-builder-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
  }
  #geo-builder-status{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #geo-builder-clear{
    flex:0 0 auto;
    height:24px;
    padding:0 7px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:6px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
  }
  .geo-builder-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  .geo-builder-actions button{
    min-width:0;
    height:25px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--muted);
    border-radius:6px;
    cursor:pointer;
    font-family:var(--mono);
    font-size:10.5px;
    overflow:hidden;
  }
  .geo-builder button:hover{border-color:var(--accent);color:var(--accent)}
  .geo-builder button:disabled{
    opacity:.42;
    cursor:default;
  }
  .geo-builder button:disabled:hover{
    border-color:var(--field-edge);
    color:var(--muted);
  }
  #help{
    margin:10px 10px 14px;
    padding:9px;
    border-top:1px solid var(--panel-edge);
    border:1px solid var(--panel-edge);
    border-radius:8px;
    background:var(--field);
    display:grid;
    gap:7px;
    color:var(--muted);
  }
  .help-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }
  .help-titlebar{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .help-head strong{
    color:var(--ink);
    font-size:11.5px;
    font-weight:650;
    letter-spacing:0;
  }
  #help-summary{
    color:var(--muted);
    font-family:var(--mono);
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #help[data-collapsed="1"]{
    padding:7px 9px;
  }
  #help[data-collapsed="1"] #help-summary,
  #help[data-collapsed="1"] #help-card{
    display:none;
  }
  #help-card{
    display:grid;
    gap:7px;
    max-height:360px;
    overflow:auto;
    padding-right:2px;
  }
  .help-block{
    display:grid;
    gap:4px;
    border-top:1px solid var(--panel-edge);
    padding-top:7px;
    font-size:11px;
    line-height:1.55;
  }
  .help-block:first-child{
    border-top:none;
    padding-top:0;
  }
  .help-block strong{
    color:var(--ink);
    font-size:11px;
    font-weight:650;
  }
  .help-block p{
    margin:0;
    overflow-wrap:anywhere;
  }
  #help code{
    font-family:var(--mono);
    background:var(--code-bg);
    padding:1px 4px;border-radius:4px;font-size:10.5px;color:var(--ink);
  }
  /* ---------- Canvas area ---------- */
  #stage{position:relative;flex:1 1 auto;height:100%}
  canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
  .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;
  }
  #tools{
    position:absolute;top:12px;right:12px;
    display:flex;flex-direction:column;gap:6px;
  }
  #tools button{
    width:34px;height:34px;
    border:1px solid var(--panel-edge);
    background:var(--glass);
    backdrop-filter:blur(4px);
    border-radius:8px;
    cursor:pointer;color:var(--ink);
    font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 2px rgba(20,25,35,.06);
  }
  #tools button:hover{border-color:var(--accent);color:var(--accent)}
  #tools button[data-on="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
  #tools button.small{font-size:11px;font-weight:600}
  #tools button#undo,#tools button#redo{font-size:15px;font-weight:400}
  #tools button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #tools button:disabled{opacity:.4;cursor:default}
  #tools button:disabled:hover{border-color:var(--panel-edge);color:var(--ink)}
  #readout{
    position:absolute;top:12px;left:12px;
    font-family:var(--mono);
    font-size:12px;
    background:var(--glass);
    backdrop-filter:blur(4px);
    border:1px solid var(--panel-edge);
    border-radius:8px;
    padding:8px 10px;
    box-shadow:0 1px 2px rgba(20,25,35,.06);
    pointer-events:none;
    max-width:260px;
    display:none;
  }
  #readout .coord{color:var(--muted)}
  #readout .fx{display:flex;align-items:center;gap:6px;margin-top:3px}
  #readout .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
  #lesson-graph-toast{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:7;
    max-width:min(360px,calc(100% - 28px));
    border:1px solid rgba(255,255,255,.32);
    border-radius:8px;
    background:#1f6f50;
    color:#fff;
    box-shadow:0 12px 34px rgba(15,75,52,.32);
    padding:10px 13px;
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    line-height:1.45;
    pointer-events:none;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .18s ease,transform .18s ease;
    overflow-wrap:anywhere;
  }
  #lesson-graph-toast[data-show="1"]{
    opacity:1;
    transform:translateY(0);
  }
  #lesson-graph-toast[hidden]{display:none}
  #analysis{
    position:absolute;left:12px;bottom:12px;
    font-family:var(--mono);font-size:11.5px;
    background:var(--glass);backdrop-filter:blur(4px);
    border:1px solid var(--panel-edge);border-radius:8px;
    padding:9px 11px;box-shadow:0 1px 2px rgba(20,25,35,.06);
    max-width:min(430px,calc(100% - 24px));max-height:52%;overflow:auto;
    color:var(--ink);display:none;
  }
  #analysis .an-block{margin-bottom:9px}
  #analysis .an-block:last-child{margin-bottom:0}
  #analysis .an-head{
    display:flex;align-items:center;gap:6px;
    font-weight:650;margin-bottom:4px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #analysis .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  #analysis .an-line{color:var(--muted);margin-top:1px}
  #analysis .an-line b{color:var(--accent);font-weight:600;margin-right:4px}
  #value-table{
    position:absolute;
    top:12px;
    right:58px;
    width:min(520px,calc(100% - 82px));
    max-height:min(58%,520px);
    background:var(--glass);
    backdrop-filter:blur(4px);
    border:1px solid var(--panel-edge);
    border-radius:8px;
    box-shadow:0 1px 2px rgba(20,25,35,.06);
    color:var(--ink);
    font-family:var(--mono);
    font-size:11.5px;
    overflow:hidden;
    z-index:6;
  }
  #value-table[hidden]{display:none}
  .table-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-bottom:1px solid var(--panel-edge);
  }
  .table-head strong{
    font-size:11.5px;
    font-weight:650;
    color:var(--ink);
  }
  .table-head button{
    width:22px;
    height:22px;
    border:none;
    background:transparent;
    color:var(--muted);
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    line-height:1;
  }
  .table-head button:hover{background:var(--hover);color:var(--danger)}
  .table-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px 10px;
    border-bottom:1px solid var(--panel-edge);
  }
  .table-controls label{
    display:grid;
    grid-template-columns:26px minmax(0,1fr);
    align-items:center;
    gap:6px;
    color:var(--muted);
  }
  .table-controls input{
    width:100%;
    height:26px;
    border:1px solid var(--field-edge);
    background:var(--field);
    color:var(--ink);
    border-radius:6px;
    padding:0 6px;
    font:inherit;
    outline:none;
  }
  .table-controls input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,125,91,.12)}
  #table-wrap{
    max-height:calc(min(58vh,520px) - 88px);
    overflow:auto;
  }
  #table-wrap table{
    width:100%;
    border-collapse:collapse;
    min-width:380px;
  }
  #table-wrap th,
  #table-wrap td{
    padding:6px 8px;
    border-bottom:1px solid var(--panel-edge);
    text-align:right;
    white-space:nowrap;
  }
  #table-wrap th{
    position:sticky;
    top:0;
    z-index:1;
    background:var(--glass);
    color:var(--muted);
    font-weight:650;
  }
  #table-wrap th:first-child,
  #table-wrap td:first-child{
    text-align:left;
    color:var(--ink);
  }
  #table-wrap tr:last-child td{border-bottom:none}
  #table-wrap .dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-right:4px;
    vertical-align:middle;
  }
  #table-wrap .empty{
    padding:12px;
    color:var(--muted);
  }
  @media (max-width:720px){
    body{flex-direction:column}
    #side{width:100%;height:50%;border-right:none;border-bottom:1px solid var(--panel-edge)}
    #side-resizer{display:none}
    #stage{height:50%}
    #analysis{max-height:44%;font-size:11px}
    #value-table{
      top:52px;
      right:12px;
      width:calc(100% - 24px);
      max-height:calc(100% - 64px);
    }
  }
  @media (max-height:640px){
    #side{overflow-y:auto}
    #rows{flex:0 0 auto}
    #spacer{display:none}
    .grid{gap:5px}
    .grid button{height:34px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:6px;
  margin-top:4px;
}
.stats-cell{
  display:flex;
  flex-direction:column;
  padding:4px 6px;
  border-radius:6px;
  background:rgba(127,127,127,0.10);
}
.stats-cell .stats-k{ font-size:11px; opacity:0.7; }
.stats-cell .stats-v{ font-variant-numeric:tabular-nums; font-weight:600; }
.hist-summary{
  margin-top:4px;
  color:var(--muted);
}
.hist-table{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:5px;
  font-family:var(--mono);
  font-size:10.5px;
}
.hist-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:168px;
  overflow:auto;
  padding-right:2px;
}
.hist-row{
  display:grid;
  grid-template-columns:minmax(42px,.7fr) minmax(78px,1.45fr) repeat(4,minmax(0,1fr));
  gap:4px;
  align-items:center;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(127,127,127,0.08);
}
.hist-head{
  color:var(--muted);
  background:transparent;
  padding-top:0;
}
.hist-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.fit-param-summary{
  margin-top:4px;
  color:var(--muted);
}
.fit-param-table{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:5px;
  font-family:var(--mono);
  font-size:10.5px;
}
.fit-param-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:188px;
  overflow:auto;
  padding-right:2px;
}
.fit-param-row{
  display:grid;
  grid-template-columns:minmax(48px,.75fr) minmax(76px,1.15fr) minmax(88px,1.45fr);
  gap:4px;
  align-items:center;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(127,127,127,0.08);
}
.fit-param-head{
  color:var(--muted);
  background:transparent;
  padding-top:0;
}
.fit-param-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.fit-compare-table{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:4px;
  font-family:var(--mono);
  font-size:10.5px;
}
.fit-compare-row{
  display:grid;
  grid-template-columns:minmax(46px,.9fr) repeat(4,minmax(0,1fr));
  gap:4px;
  align-items:center;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(127,127,127,0.08);
}
.fit-compare-head{
  color:var(--muted);
  background:transparent;
  padding-top:0;
}
.fit-compare-row[data-best="1"]{
  background:rgba(47,125,91,0.14);
  color:var(--ink);
  font-weight:650;
}
.fit-compare-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.residual-summary{
  margin-top:4px;
  color:var(--muted);
}
.residual-table{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:5px;
  font-family:var(--mono);
  font-size:10.5px;
}
.residual-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:168px;
  overflow:auto;
  padding-right:2px;
}
.residual-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:4px;
  align-items:center;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(127,127,127,0.08);
}
.residual-head{
  color:var(--muted);
  background:transparent;
  padding-top:0;
}
.residual-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.data-table-zone{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.data-table-zone > .calc{ align-self:flex-start; }
.data-table-host{ margin-top:0; }
.data-table{ display:flex; flex-direction:column; gap:4px; }
.data-table .dt-row{ display:flex; gap:4px; align-items:center; }
.data-table .dt-cell{ width:72px; }
.data-table .dt-head .dt-h{ font-size:11px; opacity:0.7; }
.data-table input.dt-cell{ padding:2px 4px; }
.data-table .dt-del{ padding:0 6px; opacity:0.7; }
.data-table .dt-del:hover{ opacity:1; }
.data-table .dt-add{ align-self:flex-start; padding:2px 8px; font-size:12px; margin-top:2px; }