:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f4f1ea;color:#161a1d;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,select{font:inherit}button{min-height:2.5rem;border:1px solid #aeb7c0;border-radius:8px;background:#fff;color:#161a1d;padding:0 1rem;cursor:pointer}button:hover,button:focus-visible,select:hover,select:focus-visible{border-color:#126d76;outline:2px solid transparent}button:focus-visible,select:focus-visible{box-shadow:0 0 0 3px #126d763d}button.primary{border-color:#126d76;background:#126d76;color:#fff;font-weight:700}button[aria-pressed=true]{border-color:#8f2d56;background:#8f2d56;color:#fff}select{min-height:2.5rem;border:1px solid #aeb7c0;border-radius:8px;background:#fff;color:#161a1d;padding:0 2rem 0 .75rem}.shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:32px 0}.instrument{display:grid;gap:20px}.header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}h1{margin:0;font-size:clamp(2.2rem,3rem,3.5rem);line-height:1}p{max-width:64ch;margin:12px 0 0;color:#4a5158;line-height:1.5}.status{width:min(100%,340px);border-left:4px solid #126d76;background:#fff;padding:12px 14px;color:#354047;line-height:1.4}.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end}label{display:grid;gap:6px;color:#354047;font-size:.9rem;font-weight:700}.performance{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:16px;align-items:stretch}.play-area{--marker-x: 0%;--marker-y: 100%;position:relative;min-height:clamp(320px,58vh,620px);overflow:hidden;border:2px solid #263238;border-radius:8px;background:linear-gradient(90deg,#126d761f,#8f2d5624),#101820;touch-action:none;-webkit-user-select:none;user-select:none}body[data-input-mode=camera] .play-area{border-color:#126d76}.play-area:before,.play-area:after{content:"";position:absolute;pointer-events:none}.play-area:before{inset:0;background:linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.22) 50%,transparent 50.2%)}.play-area:after{top:0;bottom:0;left:var(--marker-x);width:1px;background:#ffffff6b;transform:translate(-50%)}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:10% 20%;opacity:.65}.marker{position:absolute;left:var(--marker-x);top:var(--marker-y);width:28px;height:28px;border:2px solid #ffffff;border-radius:50%;background:#ffcf56;box-shadow:0 0 0 8px #ffcf562e,0 0 36px #ffcf56b8;transform:translate(-50%,-50%);transition:opacity .12s ease}.play-area[data-inside=false] .marker{opacity:.55}.play-area[data-active=true] .marker{background:#74d680;box-shadow:0 0 0 8px #74d68033,0 0 40px #74d680c7}.axis-label{position:absolute;z-index:2;color:#ffffffc7;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase;pointer-events:none}.pitch-low{left:14px;bottom:14px}.pitch-high{right:14px;bottom:14px}.volume-low{left:14px;bottom:42px}.volume-high{left:14px;top:14px}.camera-panel{display:grid;align-content:start;gap:10px}.camera-preview{position:relative;overflow:hidden;aspect-ratio:16 / 9;border:2px solid #263238;border-radius:8px;background:#101820}.camera-preview video,.camera-preview canvas{position:absolute;inset:0;width:100%;height:100%}.camera-preview video{object-fit:cover}.camera-preview canvas{pointer-events:none}.camera-status{min-height:3rem;margin:0;border-left:4px solid #8f2d56;background:#fff;padding:10px 12px;color:#354047;font-size:.92rem;line-height:1.35}.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}.readouts div{border:1px solid #d1d7dc;border-radius:8px;background:#fff;padding:14px}dt{color:#5a6269;font-size:.86rem;font-weight:700}dd{margin:6px 0 0;font-size:1.35rem;font-weight:800}@media(max-width:760px){.shell{width:min(100% - 20px,1120px);padding:20px 0}.header{grid-template-columns:1fr}.status{width:100%}.toolbar{align-items:stretch}.toolbar>*,label,select{width:100%}.play-area{min-height:420px}.performance,.readouts{grid-template-columns:1fr}}