:root{color-scheme:dark;--bg: #101114;--panel: #181a1f;--panel-2: #20232a;--line: #343844;--text: #f2f4f8;--muted: #9aa3b2;--accent: #4bd4a6;--accent-2: #6aa8ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,select,input{font:inherit}.app{width:min(1120px,100%);margin:0 auto;padding:24px}.topbar{display:grid;grid-template-columns:minmax(0,auto) minmax(280px,1fr);align-items:end;gap:18px;margin-bottom:24px}h1,h2,p{margin:0}h1{font-size:28px}.titleLine{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.buildBadge{color:var(--muted);font-size:12px;font-weight:700}.creditLink{color:#ffd866;font-size:13px;font-weight:800;text-decoration:none}.creditLink:hover,.creditLink:focus-visible{color:#ffe89a;text-decoration:underline}.gestureSummary{display:grid;gap:4px;justify-self:start;border-left:2px solid var(--accent);padding-left:14px}.gestureSummary p{color:var(--text);font-size:14px;font-weight:700}h2{font-size:16px}p,.padHeader span,.readout span{color:var(--muted)}#startAllButton,#startButton,#holdButton,#cameraButton{border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:700;padding:11px 16px}#startAllButton{background:var(--accent);color:#07110d;font-size:clamp(24px,5vw,42px);min-width:min(360px,calc(100vw - 64px));padding:22px 36px}#startButton{background:var(--accent);color:#07110d}#startButton.isReady{background:transparent;color:var(--accent)}.actions{display:flex;gap:10px}#startAllButton.isReady{box-shadow:inset 0 0 0 2px #07110d33}#holdButton{border-color:var(--line);background:var(--panel-2);color:var(--text)}#cameraButton{border-color:var(--accent-2);background:transparent;color:var(--accent-2)}#cameraButton.isReady{background:var(--accent-2);color:#07101c}#holdButton.isActive{border-color:var(--accent-2);background:var(--accent-2);color:#07101c}#holdButton:disabled{cursor:not-allowed;opacity:.45}.performanceArea{display:grid;grid-template-columns:1fr;gap:18px}.pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.padBlock,.controls,.pitchGuide,.readout,.gesturePanel{border:1px solid var(--line);border-radius:8px;background:var(--panel)}.padBlock{padding:14px}.padHeader{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.xyPad{position:relative;width:100%;aspect-ratio:1 / 1;border:1px solid var(--line);border-radius:6px;background:linear-gradient(to right,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%),linear-gradient(to bottom,transparent 49.5%,rgba(255,255,255,.08) 50%,transparent 50.5%),var(--panel-2);cursor:crosshair;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.cursor{position:absolute;left:50%;top:50%;width:18px;height:18px;border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}#filterCursor{border-color:var(--accent-2)}.filterResponseCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.85;pointer-events:none;z-index:1}.controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:18px;padding:16px}label{display:grid;gap:8px;color:var(--muted);font-size:14px}select,input[type=range]{width:100%}select{border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);padding:8px}input[type=range]{accent-color:var(--accent)}.gesturePanel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;margin-top:18px;padding:16px}.debugActions{display:grid;grid-template-columns:1fr;gap:8px}.debugActions #startButton,.debugActions #holdButton,.debugActions #cameraButton{padding:8px 10px;font-size:13px}.cameraPreview{position:relative;aspect-ratio:16 / 9;max-height:68vh;min-height:340px;border:1px solid var(--line);border-radius:6px;background:#000;overflow:hidden}#gestureCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.trackingBadge{position:absolute;left:8px;top:8px;border:1px solid var(--line);border-radius:999px;background:#101114c7;color:var(--muted);font-size:12px;font-weight:700;padding:4px 8px}.trackingBadge.isReady{border-color:var(--accent);color:var(--accent)}.trackingBadge.isTracking{border-color:var(--accent-2);color:var(--accent-2)}.trackingBadge.isError{border-color:#ff7070;color:#ff9090}.startOverlay{position:absolute;left:50%;top:50%;display:grid;gap:16px;justify-items:center;width:min(620px,calc(100% - 32px));transform:translate(-50%,-50%);z-index:3}.startOverlay.isHidden{display:none}.previewHint{color:var(--text);font-size:clamp(16px,2.5vw,24px);font-weight:800;line-height:1.35;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.95)}#cameraVideo{display:block;width:100%;height:100%;min-height:340px;background:#000;object-fit:contain;transform:scaleX(-1)}.sourcePanel,.debugPanel{display:grid;gap:12px;align-content:start}.sourceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}fieldset{display:grid;gap:8px;margin:0;border:1px solid var(--line);border-radius:6px;padding:10px}legend{color:var(--text);font-weight:700;padding:0 4px}fieldset label{display:flex;align-items:center;gap:8px}input[type=checkbox]{accent-color:var(--accent-2)}.debugGrid{display:grid;grid-template-columns:1fr auto;gap:8px 12px;color:var(--muted)}.debugGrid strong{color:var(--text);font-variant-numeric:tabular-nums}.readout{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:18px;overflow:hidden}.pitchMeter{display:grid;align-items:center;grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.pitchGuide{margin-top:18px;padding:14px}.pitchTrack{position:relative;height:38px;border:1px solid var(--line);border-radius:6px;background:repeating-linear-gradient(to right,rgba(255,255,255,.12) 0,rgba(255,255,255,.12) 1px,transparent 1px,transparent calc(100% / 24)),#111319;overflow:hidden}.pianoKeys{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.pianoKey{position:absolute;bottom:0}.pianoKey.white{display:grid;align-items:end;justify-items:center;top:0;border-right:1px solid rgba(242,244,248,.18);background:#f2f4f81f;color:#f2f4f875;font-size:10px;font-weight:700;line-height:1;overflow:hidden;padding-bottom:4px}.pianoKey.black{top:0;height:60%;border:1px solid rgba(242,244,248,.12);border-top:0;border-radius:0 0 3px 3px;background:#050608eb;transform:translate(-50%);z-index:2}.pitchMarker{position:absolute;top:0;bottom:0;left:50%;width:2px;border:0;border-radius:0;background:var(--accent);box-shadow:0 0 0 1px #4bd4a647;transform:translate(-50%);z-index:3}.pitchMarker:after{position:absolute;left:50%;top:50%;width:10px;height:10px;border:2px solid var(--accent);border-radius:50%;background:var(--panel);content:"";transform:translate(-50%,-50%)}.readout div{display:grid;gap:5px;background:var(--panel-2);padding:12px}.readout strong{font-size:18px}@media(max-width:780px){.app{padding:16px}.pads,.topbar{grid-template-columns:1fr}.controls,.readout,.gesturePanel{grid-template-columns:repeat(2,minmax(0,1fr))}.cameraPreview{grid-column:1 / -1;min-height:240px}#cameraVideo{min-height:240px}}@media(max-width:440px){.controls,.readout,.gesturePanel,.sourceGrid{grid-template-columns:1fr}.actions{flex-wrap:wrap}}