:root{font-family:system-ui,sans-serif;color:#e9edf4;background:#10151e;color-scheme:dark}body{margin:0}header{display:flex;align-items:center;gap:20px;padding:24px;max-width:1100px;margin:auto}header img{width:100px;height:70px;object-fit:contain}h1{font-size:24px;margin:4px 0}small{color:#99aec7}main{max-width:1100px;margin:auto;padding:0 20px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}section{background:#1b2431;border:1px solid #334055;border-radius:16px;padding:20px}h2{font-size:18px;margin-top:0}p{line-height:1.7;color:#b6c4d6;font-size:14px}.notice,.wide{grid-column:1/-1}.notice{margin:0;color:#ffd394}label{display:block;margin:12px 0;font-size:14px}input,select{display:block;box-sizing:border-box;width:100%;padding:12px;margin-top:6px;border:1px solid #52627a;border-radius:8px;background:#101824;font-size:16px}button{padding:12px 16px;margin:5px 4px 5px 0;background:#e6b454;border:0;border-radius:8px;color:#15191f;font-weight:700;cursor:pointer}button:disabled{opacity:.35;cursor:default}.readings{display:flex;justify-content:space-around;text-align:center;font-size:13px}.readings strong{display:block;font-size:32px;margin:8px 0}canvas{width:100%;height:300px;display:block}.legend{text-align:center}.legend span:nth-child(1){color:#62b7ff}.legend span:nth-child(2){color:#ffb65e}.legend span:nth-child(3){color:#89dbb0}@media(max-width:760px){main{grid-template-columns:1fr}header{padding:20px}h1{font-size:21px}.readings strong{font-size:25px}}
.levelGuide{text-align:center;margin:16px 0}.levelTarget{position:relative;width:160px;height:160px;margin:0 auto;border:1px solid #6a7d98;border-radius:50%;background:linear-gradient(transparent 49.5%,#52627a 49.5%,#52627a 50.5%,transparent 50.5%),linear-gradient(90deg,transparent 49.5%,#52627a 49.5%,#52627a 50.5%,transparent 50.5%)}.levelRing{position:absolute;width:30px;height:30px;border:2px solid #e6b454;border-radius:50%;left:63px;top:63px}.levelDot{position:absolute;width:16px;height:16px;background:#ffb65e;border:2px solid #fff;border-radius:50%;left:70px;top:70px;transition:transform .08s linear}.levelGuide.ready .levelDot{background:#89dbb0}.levelGuide.ready .levelRing{border-color:#89dbb0}.levelGuide.ready p{color:#89dbb0}
.replay{background:linear-gradient(135deg,#17232e,#090e16);border:1px solid #45556d;border-top:3px solid #f5cc45;border-radius:10px;padding:16px;margin-bottom:20px}.replayHead{display:flex;justify-content:space-between;letter-spacing:2px;font-style:italic;color:#f5cc45}.replayHead span{font-size:11px;color:#8494ab}.replay svg{display:block;width:100%;max-height:300px;cursor:ew-resize}.replay input[type=range]{padding:0;accent-color:#f5cc45;width:100%;height:36px}.replayButtons{display:flex;justify-content:space-between}.replayButtons button{font-size:12px;padding:10px}.replay p{text-align:center;font-variant-numeric:tabular-nums}.replay small{display:block;color:#8796ab;font-size:11px}.readings strong{font-style:italic;font-variant-numeric:tabular-nums}.readings div:first-child strong{color:#56c5ff}.readings div:nth-child(2) strong{color:#ff9b45}
.replay .readings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:center;margin:4px 0 12px}.replay .readings strong{font-size:clamp(22px,5vw,32px)}.replay .readings #passenger{color:#ff9b45}.replay .readings #difference{color:#e9edf4}.replay .readings #driver{color:#56c5ff}.replay #replayTime{font-size:12px;color:#8796ab;margin:4px 0 8px}
.levelBand{position:absolute;left:10px;right:10px;top:73px;height:14px;background:#e6b45433;border-top:1px solid #e6b454;border-bottom:1px solid #e6b454}.levelGuide.ready .levelBand{background:#89dbb033;border-color:#89dbb0}
.measureSteps{margin:16px 0}.measureSteps div{border-left:3px solid #f5cc45;background:#111b27;padding:10px 12px;border-radius:6px}.measureSteps b{display:block;color:#f5cc45;font-size:16px}.measureSteps span{display:block;color:#b6c4d6;font-size:13px;margin-top:5px;line-height:1.6}.measureSteps i{display:block;text-align:center;color:#f5cc45;font-size:22px;font-style:normal;line-height:1.4}
.measureSteps b{display:flex;align-items:center;gap:10px}.measureSteps .turnArrow{display:inline-block;font-size:48px;line-height:1;margin:0;color:#f5cc45;font-weight:400}
.holdPanel{border:1px solid #445268;border-radius:8px;padding:12px;margin:14px 0}.holdPanel h3,.holdResults h3{font-size:16px;color:#f5cc45}.holdResults{margin-top:20px;padding-top:12px;border-top:1px solid #445268}.holdResult{display:block;width:100%;background:#111b27;color:#e9edf4;border:1px solid #f5cc45;text-align:left;line-height:1.7;font-variant-numeric:tabular-nums}
main,section,.replay{min-width:0}p,small{overflow-wrap:anywhere}#wheelHealth{font-size:13px;color:#ffd394;line-height:1.6}
#sensorDiagnostics{font-variant-numeric:tabular-nums;line-height:1.6;min-height:4.8em}#sensorDiagnostics>span{display:block;white-space:nowrap;overflow-wrap:normal}
#levelHint{font-size:13px;line-height:1.6;font-variant-numeric:tabular-nums}#levelAngles{display:block;white-space:nowrap;height:1.6em}#levelInstruction{display:flex;align-items:center;justify-content:center;min-height:3.2em}
