:root{font-family:Arial,Helvetica,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7fbff;background:#06122c;--green:#5be2a0;--red:#f47b79;--yellow:#e9bf71}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 45%,#15779b30,transparent 65%),linear-gradient(160deg,#0a1c3c,#06122c 65%,#050a15)}button,select{font:inherit;color:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #e9bf71;outline-offset:3px}main{position:relative;width:100%;max-width:620px;margin:auto;height:100dvh;min-height:520px;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}.controls{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;margin:0 17px}.instruments{display:flex;gap:20px}.instruments button{padding:8px 0;border:0;background:none;font-size:12px;color:#8da3bd;position:relative}.instruments button.selected{color:#f7fbff}.instruments button.selected:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;border-radius:2px;background:#35b8ee}.settings-button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#b9c7d9;display:grid;place-items:center}.settings-button:hover{background:#ffffff08}#settings{position:absolute;top:43px;right:16px;z-index:2;border:1px solid #31415e;border-radius:12px;background:#0a1c3c;padding:14px;box-shadow:0 8px 30px #0007;font-size:12px;color:#b9c7d9}#settings label{display:block;margin-bottom:8px}#settings select{background:#06122c;border:1px solid #394b6d;border-radius:7px;padding:8px;width:170px}#settings>span{display:block;margin-top:10px;font-size:10px;color:#7f91b2}.stage{flex:1;min-height:0;width:100%;display:flex;justify-content:center}#headstock{width:100%;height:100%}#headstock>svg{display:block;width:100%;height:100%;overflow:visible}.bottom-controls{height:58px;flex:none;display:flex;gap:15px;align-items:center;justify-content:space-between;padding:0 18px}#hint{font-size:10px;color:#8799ba;letter-spacing:.2px}#start{display:flex;align-items:center;gap:8px;border:1px solid #35b8ee;border-radius:24px;background:#15779b;padding:11px 19px;font-size:12px;min-width:90px;justify-content:center}#start.listening{background:#16372e;border-color:#3d8065;color:#75e6b1}#start:disabled{opacity:.6;cursor:wait}.string-hit{cursor:pointer;outline:none}.key-glow{opacity:0;transition:opacity .15s;stroke:#35b8ee;stroke-width:3;fill:none}.string-hit.active .key-glow,.string-hit:focus-visible .key-glow{opacity:1;filter:url(#glow)}.string-hit:focus-visible .key-glow{stroke:#e9bf71}.key-letter{fill:#253141;font-size:23px;font-weight:800;text-anchor:middle;dominant-baseline:middle}.string-hit.active .key-letter{fill:#15779b}.wire{stroke:#a7b7c5;opacity:.63;transition:stroke .15s,opacity .15s}.wire.active{stroke:#35b8ee;opacity:1;filter:url(#glow)}.in-tune .wire.active{stroke:#5be2a0}.in-tune .string-hit.active .key-glow{stroke:#5be2a0}.in-tune .string-hit.active .key-letter{fill:#166446}.tune-tick{opacity:.33;stroke-linecap:round;transition:opacity .1s,stroke-width .1s}.tune-tick.active{opacity:1;stroke-width:3;filter:url(#glow)}.tick-scale.muted .tune-tick{opacity:.18}.instruction{fill:#a8b5cb}.instruction.tuned{fill:var(--green)}.instruction.far{fill:var(--red)}.instruction.adjust{fill:var(--yellow)}#direction-text{font-size:14px;font-weight:650;letter-spacing:.2px}#deviation{font-size:9px;fill:#8fa5a6;font-variant-numeric:tabular-nums}#target-note{font-size:31px;font-weight:600;fill:#d9eee3;text-anchor:middle}#error{position:absolute;bottom:66px;left:18px;right:18px;margin:0;padding:12px 14px;background:#301c2e;border:1px solid #784756;border-radius:12px;color:#ffc4ca;font-size:12px;line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:701px){main{max-width:580px}.controls{height:52px}#headstock>svg{max-height:900px}.bottom-controls{height:65px}}@media(max-height:620px){main{min-height:490px}.controls{height:38px}.bottom-controls{height:50px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}