.app-shell{max-width:1180px;margin:auto;padding:34px 28px 46px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:30px;align-items:end;margin:20px 0 24px}
.eyebrow,.overline{margin:0 0 8px;color:var(--teal);font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.intro h1{max-width:790px;margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1.06;letter-spacing:-.04em}
.lede{max-width:740px;margin:15px 0 0;color:var(--muted);font-size:1rem}
.formula{padding:16px 18px;border:1px solid #c8d9f1;border-radius:16px;background:#edf4ff;box-shadow:var(--shadow)}
.formula span,.formula small{display:block;color:var(--muted);font-size:.72rem;font-weight:750}
.formula strong{display:block;margin:6px 0;font-size:.92rem;color:var(--blue);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.card{padding:23px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
.card-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.card h2{margin:0;font-size:1.2rem}
.card-heading p{margin:6px 0 0;color:var(--muted);font-size:.85rem}
.tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:4px 9px;font-size:.69rem;font-weight:800;letter-spacing:.03em}
.tag-teal{background:#e3f5f3;color:#137674}

.dataset-card{margin-bottom:20px}
.dataset-picker{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.dataset-button{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:center}
.dataset-button:hover{border-color:var(--blue)}
.dataset-button.active{border-color:var(--teal);background:#eff9f8;box-shadow:0 4px 10px rgba(20,138,136,.12)}
.dataset-preview{width:100%;height:auto;aspect-ratio:1;border-radius:8px;background:#f7f5ef;border:1px solid var(--line)}
.dataset-name{font-size:.82rem;font-weight:850;color:var(--ink)}
.dataset-blurb{font-size:.68rem;color:var(--muted);line-height:1.35}

.toolbar{position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding:12px 20px}
.control-step{color:var(--blue);font-size:.78rem;font-weight:900}
.param-row{display:flex;align-items:center;gap:9px}
.param-row label{color:var(--muted);font-size:.78rem;font-weight:800}
.param-row input[type=range]{width:170px}
.param-value{min-width:34px;color:var(--ink);font-size:.8rem;font-weight:850;font-family:ui-monospace,SFMono-Regular,monospace}
.param-hint{flex-basis:100%;margin:2px 0 0;color:var(--muted);font-size:.72rem}

.controls-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding:14px 20px}
.status-text{color:var(--muted);font-size:.78rem;font-weight:800;font-family:ui-monospace,SFMono-Regular,monospace}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.controls button{border:0;border-radius:10px;padding:9px 13px;background:var(--blue);color:#fff;cursor:pointer;font-size:.8rem;font-weight:850}
.controls button.secondary{background:#edf1f3;color:var(--ink)}
.controls button:disabled{opacity:.46;cursor:default}
#speed-toggle{min-width:38px;font-family:ui-monospace,SFMono-Regular,monospace}
.epoch-run-group{display:flex;align-items:center;gap:6px;padding:3px;border-radius:10px;background:#edf1f3}
.epoch-run-group label{padding-left:8px;color:var(--muted);font-size:.78rem;font-weight:800}
.epoch-run-group input{width:44px;border:1px solid var(--line);border-radius:7px;padding:6px 5px;text-align:center;font:800 .78rem inherit}
.epoch-run-group button{background:transparent;color:var(--ink);padding:7px 10px}

.main-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,.85fr);gap:20px}
.chart-card svg.chart{display:block;width:100%;height:auto;max-height:365px;margin-top:10px}
.plot-axis{stroke:#8b9aa3;stroke-width:1.2}
.plot-grid{stroke:#e2e8ea;stroke-width:1}
.tick-mark{stroke:#8b9aa3;stroke-width:1}
.tick-label{fill:#7c8991;font-size:10px;font-weight:700;font-family:ui-monospace,SFMono-Regular,monospace}
.axis-label{fill:#64747e;font-size:12px;font-weight:800}
.decision-region{opacity:.16}
.point{transition:r .15s}
.point-current{filter:drop-shadow(0 0 5px rgba(213,139,22,.55))}
.sv-ring{fill:none;stroke:#17212b;stroke-width:1.6;stroke-dasharray:3 3;opacity:.55}
.boundary-line{stroke-width:2.6}
.boundary-svm{stroke:var(--blue)}
.boundary-margin{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:5 4;opacity:.55}
.boundary-lda{stroke:#17212b;stroke-dasharray:7 5;opacity:.85}
.callout-leader{stroke:#d58b16;stroke-width:1.3;stroke-dasharray:2 3;opacity:.75}
.callout-dot{fill:#d58b16}
.callout-box{fill:#17212b;fill-opacity:.92;stroke:#d58b16;stroke-width:1}
.callout-text{fill:#fdf6e8;font-size:10.5px;font-weight:700;font-family:ui-monospace,SFMono-Regular,monospace}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:17px;margin-top:12px;color:var(--muted);font-size:.78rem}
.legend span{display:flex;align-items:center;gap:6px}
.legend b{color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.line-swatch{width:18px;height:0;border-top:3px solid;display:inline-block}
.line-swatch.boundary-svm{border-top-color:var(--blue)}
.line-swatch.boundary-margin{border-top-color:var(--blue);border-top-style:dashed;opacity:.65}
.line-swatch.boundary-lda{border-top-color:#17212b;border-top-style:dashed}

.chart-row{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
.scatter-wrap{flex:1.7;min-width:0}
.error-wrap{flex:1;min-width:190px;max-width:250px;padding-left:18px;border-left:1px solid var(--line)}
.error-wrap h3{margin:0 0 6px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.error-chart{display:block;width:100%;height:auto}
.err-area{fill:rgba(43,103,197,.12);stroke:none}
.err-line{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linejoin:round}
.err-lda-line{stroke:#17212b;stroke-width:1.4;stroke-dasharray:6 4;opacity:.8}
.err-current-dot{fill:var(--blue);stroke:#fff;stroke-width:2}
.axis-label.err-y{font-size:9px}
.legend-compact{gap:9px 14px;justify-content:flex-start;margin-top:8px;font-size:.72rem}
.metric-row-svm{grid-template-columns:1fr 1fr;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

.story-card{display:flex;flex-direction:column}
.story-card h2{font-size:1.1rem;line-height:1.2;margin:4px 0 10px}
.sample-context{display:flex;align-items:center;gap:10px;margin:2px 0 14px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fafcfc;font-size:.78rem;font-weight:800}
.sample-value{color:var(--blue)}
.target-value{color:var(--red)}
.arrow{color:var(--muted)}
.state-box{padding:13px 14px;border-left:4px solid var(--teal);border-radius:10px;background:#f4fbfa;margin-bottom:14px}
.state-kicker{margin-bottom:6px;color:var(--teal);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.state-equation{color:#244d72;font:800 .8rem ui-monospace,SFMono-Regular,Menlo,monospace}
.state-box dl{display:grid;grid-template-columns:76px 1fr;gap:5px 9px;margin:11px 0 0;font-size:.73rem}
.state-box dt{color:var(--muted);font-weight:800}
.state-box dd{margin:0;color:#384d58;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.state-meaning{display:grid;gap:3px;margin-top:13px;padding-top:10px;border-top:1px solid #cfe9e5;font-size:.72rem}
.state-meaning span{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.state-meaning strong{color:#31525b;font-size:.76rem}

.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.metric-row div{padding:10px;border-radius:11px;background:#f3f6f7}
.metric-row span{display:block;color:var(--muted);font-size:.68rem;font-weight:750}
.metric-row strong{font-size:1.05rem;color:var(--teal)}
.stage-note{margin:0;color:var(--muted);font-size:.78rem;font-weight:650}
.stage-note span{color:var(--ink);font-family:ui-monospace,SFMono-Regular,monospace}

.trace-card{margin-top:20px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.77rem}
th{background:#f2f5f5;color:#53636e;text-align:left;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
th,td{padding:10px 9px;border-bottom:1px solid #e5eaec;vertical-align:top;white-space:nowrap}
tbody tr.active-row{background:#eff8f7;box-shadow:inset 3px 0 var(--teal)}
td:nth-child(4),td:nth-child(5),td:nth-child(6),td:nth-child(7){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#273943}
.round-empty{padding:10px 2px;color:var(--muted);font-size:.82rem;white-space:normal}

.note{margin-top:18px;padding:15px 18px;border-left:4px solid var(--amber);border-radius:8px;background:#fff7e8;color:#66532d;font-size:.84rem}
.note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}
.note a{color:#8a6a1f;font-weight:800}

@media(max-width:820px){
  .intro,.main-grid{grid-template-columns:1fr}
  .formula{max-width:400px}
}
@media(max-width:700px){
  .chart-row{flex-direction:column}
  .error-wrap{max-width:none;padding-left:0;padding-top:14px;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .app-shell{padding:25px 16px 35px}
  .card{padding:16px}
  .card-heading{display:block}
  .tag{display:inline-block;margin-top:10px}
  .toolbar,.controls-bar{position:static}
  .controls{width:100%}
  .controls button,.epoch-run-group{flex:1}
  .metric-row{grid-template-columns:1fr}
}