.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{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,2.7rem);line-height:1.1;letter-spacing:-.03em}
.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);margin-bottom:20px}
.card-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.card h2{margin:0;font-size:1.2rem}
.card-heading p{margin:6px 0 0;color:var(--muted);font-size:.85rem}

.mode-picker{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.manual-preset{border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:#fff;color:var(--ink);font:800 .76rem inherit;cursor:pointer}
.manual-preset.active{border-color:var(--blue);background:#eaf3ff;color:var(--blue)}

.manual-row{display:flex;gap:24px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.manual-grid-wrap{flex:1.1;min-width:280px}
.grid-host{width:100%}
.grid-host svg.heatmap{display:block;width:100%;height:auto;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.grid-host.mini{max-width:108px}
.hm-cell{stroke:#dfe6ea;stroke-width:1;cursor:default}
.manual-grid-wrap .hm-cell{cursor:pointer}
.hm-hi{stroke:#17212b;stroke-width:2.5}
.manual-nav{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}
.manual-nav div{display:flex;gap:38px}
.manual-nav button{width:36px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:900;cursor:pointer}
.manual-nav button:hover{border-color:var(--blue)}
.manual-position{margin:10px 0 0;color:var(--muted);font-size:.78rem;font-weight:800;text-align:center;font-family:ui-monospace,SFMono-Regular,monospace}

.manual-compute{flex:1;min-width:280px}
.mini-grids{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.mini-grids span{display:block;margin-bottom:6px;color:var(--muted);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.guess-row{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.guess-row label{color:var(--muted);font-size:.78rem;font-weight:800}
.guess-row input{width:110px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit}
.guess-row button{border:0;border-radius:9px;padding:8px 14px;background:var(--blue);color:#fff;font-weight:850;cursor:pointer}
.guess-row button:disabled{opacity:.45;cursor:default}
.reveal-box{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px 13px;border-radius:10px;background:#f4fbfa;border-left:4px solid var(--teal)}
.reveal-box span{color:var(--muted);font-size:.78rem;font-weight:800}
.reveal-box strong{font-size:1.15rem;color:var(--teal);font-family:ui-monospace,SFMono-Regular,monospace}
.manual-feedback{margin:9px 0 0;color:#31505e;font-size:.78rem;font-weight:700}
.manual-tally{margin:4px 0 0;color:var(--muted);font-size:.72rem;font-weight:800}

.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.control-step{color:var(--blue);font-size:.78rem;font-weight:900}
.toolbar button.secondary{border:1px solid var(--line);border-radius:9px;padding:8px 13px;background:#edf1f3;color:var(--ink);font:800 .78rem inherit;cursor:pointer}
.checkbox-label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.8rem;font-weight:800}
.stride-readout{color:var(--muted);font-size:.76rem;font-weight:750;font-family:ui-monospace,SFMono-Regular,monospace}

.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.main-grid .card{margin-bottom:0}
.filter-pair{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.filter-pair>div:first-child{flex:0 0 90px}
.filter-pair>div span{display:block;margin-bottom:6px;color:var(--muted);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.feature-map-wrap{flex:1;min-width:0}

.learned-controls{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.param-row{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.param-row label{color:var(--muted);font-size:.78rem;font-weight:800}
.param-row input[type=range]{width:140px}
.param-value{min-width:34px;color:var(--ink);font-size:.8rem;font-weight:850;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 12px;background:var(--blue);color:#fff;cursor:pointer;font-size:.78rem;font-weight:850}
.controls button.secondary{background:#edf1f3;color:var(--ink)}
.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:.76rem;font-weight:800}
.epoch-run-group input{width:40px;border:1px solid var(--line);border-radius:7px;padding:6px 5px;text-align:center;font:800 .76rem inherit}
.epoch-run-group button{background:transparent;color:var(--ink);padding:7px 9px}
.learned-status{margin:10px 0 0;color:var(--muted);font-size:.76rem;font-weight:800;font-family:ui-monospace,SFMono-Regular,monospace}
.last-sample{margin:4px 0 0;color:#31505e;font-size:.74rem;font-family:ui-monospace,SFMono-Regular,monospace}

.accuracy-block{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.accuracy-chart{width:220px;height:auto;flex:0 0 220px}
.accuracy-block span{color:var(--muted);font-size:.8rem;font-weight:800}
.accuracy-block b{color:var(--teal)}
.plot-axis{stroke:#8b9aa3;stroke-width:1.2}
.plot-grid{stroke:#e2e8ea;stroke-width:1}
.axis-label{fill:#64747e;font-size:11px;font-weight:800}
.axis-label.acc-y{font-size:9px}
.acc-line{fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linejoin:round}
.acc-current-dot{fill:var(--teal);stroke:#fff;stroke-width:2}

.note{margin-top:4px;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){
  .manual-row{flex-direction:column}
}
@media(max-width:560px){
  .app-shell{padding:25px 16px 35px}
  .card{padding:16px}
  .card-heading{display:block}
  .mini-grids{grid-template-columns:1fr}
  .filter-pair{flex-direction:column}
  .filter-pair>div:first-child{flex:0 0 auto;max-width:90px}
  .accuracy-block{flex-direction:column;align-items:flex-start}
}