.steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 16px}
.steps li{font-size:.78rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;background:#eee;color:#999}
.steps li.active{background:#2b241c;color:#f6f1e7}

.stage{display:grid;gap:16px}
.canvas-wrap{border:1px solid #e4d9c4;border-radius:8px;overflow:hidden;background:#111;display:flex;justify-content:center}
canvas{max-width:100%;display:block;cursor:crosshair}

.panel{display:grid;gap:10px}
.calibration-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.calibration-options legend{grid-column:1/-1;font-weight:800;margin-bottom:2px}
.method-card{display:grid;grid-template-columns:auto 1fr;align-items:flex-start;gap:8px;border:1px solid #cbbfa2;border-radius:8px;padding:10px;background:#fff}
.method-card:has(input:checked){border-color:#2b241c;box-shadow:0 0 0 1px #2b241c inset}
.method-card input{margin-top:4px}
.method-card span{display:grid;gap:2px}
.method-card small{color:#6b6153;font-weight:400}
.known-controls,.front-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border:1px solid #e4d9c4;border-radius:8px;background:#f6f1e7}
.front-controls{border-color:#aed0cc;background:#eff8f6}
.measure-row{display:grid;grid-template-columns:1fr auto;gap:6px}
.known-controls select,.front-controls select{padding:.5rem;border:1px solid #cbbfa2;border-radius:6px;background:#fff}
.accuracy-warning{grid-column:1/-1;margin:0;color:#795b18;font-size:.8rem}
.front-controls .accuracy-warning{color:#245e5e}
.instruction{font-size:.95rem}
.readout{font-size:.85rem;color:#8a7f6d;font-weight:700}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
button{border:1px solid #2b241c;background:#fffdf9;color:#2b241c;padding:.55rem 1rem;border-radius:6px;font-weight:700;cursor:pointer}
button[data-finish-trace],button[data-export]{background:#2b241c;color:#f6f1e7}

.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.dims div{background:#f6f1e7;border:1px solid #e4d9c4;border-radius:6px;padding:10px;text-align:center}
.dims dt{font-size:.7rem;text-transform:uppercase;color:#8a7f6d;margin:0}
.dims dd{margin:4px 0 0;font-weight:800;font-size:1.1rem}

label{display:grid;gap:4px;font-size:.85rem;font-weight:700}
label input{font-weight:400;padding:.5rem;border:1px solid #cbbfa2;border-radius:6px}
.hint{font-size:.8rem;color:#8a7f6d}

@media(max-width:760px){
  .calibration-options{grid-template-columns:1fr}
}

@media(max-width:640px){
  .dims{grid-template-columns:1fr}
  .steps li{flex:1 1 42%;text-align:center}
  .known-controls,.front-controls{grid-template-columns:1fr}
}

.catalog{border:1px solid #e4d9c4;border-radius:6px;padding:12px;background:#fffdf8;display:grid;gap:8px}
.catalog h3{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:#8a7f6d}
.catalog ol{margin:0;padding-left:18px;display:grid;gap:8px}
.catalog li{line-height:1.35}
.catalog .code{font-weight:800}
.catalog .score{color:#6b6151;font-size:.85rem}
.catalog .grade{font-size:.75rem;color:#8a7f6d}