:root{color:#f4f0e7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0b0d10;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#0b0d10;min-width:320px;min-height:100%}body{min-width:320px;min-height:100dvh;margin:0}button,input,select{font:inherit}button:not(:disabled),a{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:2px solid #ffb454}::selection{color:#0b0d10;background:#ffb454}:root{--bg:#0b0d10;--surface:#12161c;--surface-raised:#171c24;--surface-soft:#1d232d;--line:#ffffff1a;--line-strong:#ffffff2e;--text:#f4f0e7;--muted:#8d97a6;--muted-bright:#b8c0ca;--accent:#ffb454;--accent-soft:#ffb45424;--cyan:#66d7d1;--cyan-soft:#66d7d121;--green:#7ddf9a}#root{min-height:100dvh}.app-shell{box-sizing:border-box;min-height:100dvh;padding:max(14px, env(safe-area-inset-top)) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left);background:radial-gradient(circle at 12% -4%, #ffb4541a, transparent 28rem), radial-gradient(circle at 94% 16%, #66d7d114, transparent 26rem), var(--bg);overflow:hidden}.site-header,main,footer{width:min(1480px,100% - 64px);margin-inline:auto}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:56px;display:flex}.brand{color:var(--text);align-items:center;gap:13px;text-decoration:none;display:inline-flex}.brand-mark{border:1px solid var(--line-strong);background:linear-gradient(145deg,#242a33,#12161c);border-radius:13px;place-content:center;width:42px;height:42px;display:grid;position:relative;overflow:hidden}.brand-mark:after{content:"";background:var(--accent);width:2px;position:absolute;top:7px;bottom:7px;left:21px;box-shadow:0 0 12px #ffb454cc}.brand-mark i{background:#788392;width:30px;height:1px;margin:3px;display:block}.brand strong,.brand small{display:block}.brand strong{letter-spacing:.12em;font-size:15px}.brand small{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:3px;font-size:10px}.privacy-chip{color:var(--muted-bright);align-items:center;gap:8px;font-size:12px;display:inline-flex}.header-actions{align-items:center;gap:14px;display:flex}.technical-settings{z-index:10;position:relative}.technical-settings summary{border:1px solid var(--line);width:34px;height:34px;color:var(--muted-bright);cursor:pointer;background:#12161cb8;border-radius:10px;place-items:center;padding:0;list-style:none;display:grid}.technical-settings summary svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:16px;height:16px}.technical-settings summary::-webkit-details-marker{display:none}.technical-settings[open] summary{color:var(--accent);border-color:#ffb45466}.technical-settings-panel{box-sizing:border-box;border:1px solid var(--line-strong);scrollbar-color:#414a57 transparent;scrollbar-width:thin;background:#151a21;border-radius:14px;width:420px;max-height:calc(100vh - 82px);padding:16px;position:absolute;top:calc(100% + 10px);right:0;overflow-y:auto;box-shadow:0 24px 70px #0000007a}.settings-panel-heading{justify-content:space-between;align-items:center;display:flex}.settings-panel-heading strong{font-size:13px;font-weight:560}.settings-saved{color:var(--green);font-size:9px}.settings-section{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.settings-section h3{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 9px;font-size:9px;font-weight:700}.settings-range{margin-top:8px;display:block}.settings-range>span{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.settings-range strong,.settings-select span{color:var(--muted-bright);font-size:10px;font-weight:500}.settings-range output{color:var(--accent);white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}.settings-range input[type=range]{width:100%;height:16px;accent-color:var(--accent);cursor:pointer;margin:3px 0 0}.settings-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.settings-inline-note{color:var(--muted);margin:5px 0 0;font-size:9px;line-height:1.5}.settings-select-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.settings-select{gap:5px;display:grid}.settings-select select{border:1px solid var(--line);width:100%;min-height:30px;color:var(--text);background:var(--surface-soft);cursor:pointer;border-radius:8px;padding:0 7px;font-size:9px}.settings-toggle-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.settings-toggle{border:1px solid var(--line);min-height:30px;color:var(--muted-bright);background:var(--surface-soft);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:0 7px;font-size:10px;display:flex}.settings-toggle input{accent-color:var(--cyan);cursor:pointer;margin:0}.settings-reported{background:#ffffff06;border-radius:8px;gap:3px;margin-top:8px;padding:8px 9px;display:grid}.settings-reported span{color:var(--muted);font-size:8px}.settings-reported strong{color:var(--muted-bright);font-size:9px;font-weight:500;line-height:1.5}.settings-footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;display:flex}.settings-footer>span{max-width:250px;color:var(--muted);font-size:8px;line-height:1.45}.settings-reset{border:1px solid var(--line);min-height:28px;color:var(--muted-bright);background:var(--surface-soft);border-radius:8px;padding:0 10px;font-size:10px}.privacy-dot{background:var(--green);border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px #7ddf9a8c}main{padding:24px 0 18px}.top-grid{grid-template-columns:minmax(300px,.68fr) minmax(700px,1.32fr);align-items:stretch;gap:32px;margin-bottom:0;display:grid}.intro{flex-direction:column;justify-content:center;min-width:0;padding:10px 8px 10px 2px;display:flex}.eyebrow,.card-kicker{color:var(--accent);letter-spacing:.24em;text-transform:uppercase;margin:0 0 13px;font-size:11px;font-weight:700}.intro h1{letter-spacing:-.045em;white-space:nowrap;max-width:560px;margin:0;font-size:clamp(28px,2.15vw,32px);font-weight:540;line-height:1.06}.intro-copy{max-width:530px;color:var(--muted-bright);margin:14px 0 0;font-size:12px;line-height:1.65}.pitch-meter{border:1px solid var(--line);background:linear-gradient(120deg, #ffb4540e, transparent 34%), var(--surface);border-radius:18px;grid-template-rows:auto auto;grid-template-columns:minmax(180px,.56fr) minmax(240px,.82fr) auto;align-items:center;gap:7px 20px;min-height:108px;padding:12px 20px;display:grid;box-shadow:0 28px 90px #00000042}.pitch-reading{grid-area:1/1;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr;align-items:center;column-gap:26px;display:grid}.pitch-reading-control{grid-area:2/1;min-width:0}.pitch-source{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;grid-column:1/-1;margin-bottom:2px;font-size:9px;font-weight:700}.pitch-note{min-width:62px;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 35px #ffb4543d;grid-row:2/4;line-height:1}.pitch-note span{letter-spacing:-.07em;font-size:48px;font-weight:620}.pitch-note sup{color:var(--muted-bright);margin-left:5px;font-size:14px;font-weight:500;position:relative;top:-20px}.pitch-note .pitch-empty{color:var(--muted)}.pitch-frequency{color:var(--muted-bright);font-variant-numeric:tabular-nums;align-self:end;margin-bottom:7px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.tuning-panel{grid-area:1/2/3;min-width:0}.tuning-copy,.tuning-ticks{justify-content:space-between;align-items:center;display:flex}.tuning-copy{color:var(--muted);margin-bottom:11px;font-size:12px}.tuning-copy strong{color:var(--accent);font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}.tuning-copy strong.is-centered{color:var(--green)}.tuning-track{background:linear-gradient(90deg,#66d7d159,#ffffff3b 50%,#ffb45459);border-radius:99px;height:3px;position:relative}.tuning-center{background:#ffffff61;width:1px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tuning-indicator{border:2px solid var(--surface);background:var(--accent);border-radius:99px;width:15px;height:24px;transition:left .1s ease-out,background-color .16s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px #ffb4548c}.tuning-indicator.is-centered{background:var(--green);box-shadow:0 0 22px #7ddf9a7a}.tuning-ticks{color:#596372;margin-top:15px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}.pitch-controls{border-left:1px solid var(--line);flex-direction:column;grid-area:1/3/3;justify-content:center;align-self:stretch;align-items:stretch;gap:10px;min-height:109px;padding-left:18px;display:flex}.pitch-control-group{flex-direction:column;justify-content:center;min-width:0;min-height:45px;display:flex}.pitch-demo-heading{margin-bottom:3px}.pitch-demo-heading .control-label{margin-bottom:0}.pitch-demo-control{width:100%;max-width:100%}.pitch-demo-row{align-items:center;gap:6px;display:flex}.pitch-demo-row .stepper{flex:auto;min-width:0}.play-note-output{box-sizing:border-box;min-height:30px;color:var(--cyan);background:var(--cyan-soft);border:1px solid #66d7d147;border-radius:10px;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;display:grid}.error-banner{color:#ffc0b4;background:#ff7e6714;border:1px solid #ff7e6759;border-radius:10px;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;margin-bottom:10px;padding:12px 18px;font-size:13px;display:flex}.error-banner button{color:#ffc0b4;width:28px;height:28px;font:inherit;cursor:pointer;background:#ffffff0a;border:1px solid #ffc0b459;border-radius:8px;flex:0 0 28px;place-items:center;padding:0;font-size:18px;line-height:1;display:grid}.error-banner button:hover{background:#ffffff14;border-color:#ffc0b4a6}.control-label{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;font-size:8px;font-weight:700;display:block}.mic-button,.input-mode-switch button,.settings-reset,.sticky-mode-button,.toggle-button,.string-button,.stepper button,.segmented-control button{color:var(--text);border:0}.input-mode-control{flex-direction:row;align-items:center;gap:8px;min-height:28px}.input-mode-control .control-label{white-space:nowrap;margin:0}.input-mode-switch{border:1px solid var(--line);background:#0e1115;border-radius:9px;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));padding:2px;display:grid}.input-mode-switch button{min-height:24px;color:var(--muted);cursor:pointer;background:0 0;border-radius:6px;padding:0 8px;font-size:9px}.input-mode-switch button.is-selected{color:var(--text);background:var(--surface-soft);box-shadow:0 0 0 1px #ffffff0a}.input-mode-switch button:last-child.is-selected{color:var(--cyan);background:var(--cyan-soft)}.play-surface-hint>span:last-child{min-height:30px;color:var(--muted-bright);white-space:nowrap;align-items:center;font-size:9px;display:flex}.mic-button{border:1px solid var(--line-strong);background:var(--surface-soft);white-space:nowrap;border-radius:11px;align-items:center;gap:10px;min-height:30px;padding:0 10px;font-size:11px;transition:border-color .16s,background-color .16s;display:inline-flex}.mic-button:hover:not(:disabled){border-color:#ffb45480}.mic-button.is-live{background:#ff7e671a;border-color:#ff7e6761}.mic-button:disabled{color:var(--muted);opacity:.7}.mic-icon{color:#ff7e67;font-size:10px}.mic-button.is-live .mic-icon{font-size:8px}.settings-reset:disabled{color:var(--muted);opacity:.55}.sticky-mode-button{border:1px solid var(--line);min-height:18px;color:var(--muted);white-space:nowrap;cursor:pointer;background:0 0;border-radius:99px;flex:none;align-items:center;gap:5px;padding:1px 6px;font-size:8px;display:inline-flex}.sticky-mode-button span{background:#596372;border-radius:50%;width:5px;height:5px}.sticky-mode-button.is-selected{color:var(--cyan);background:var(--cyan-soft);border-color:#66d7d16b}.sticky-mode-button.is-selected span{background:var(--cyan);box-shadow:0 0 6px #66d7d199}.string-buttons{grid-template-columns:repeat(6,minmax(50px,1fr));gap:4px;display:grid}.string-button{background:var(--surface-soft);border:1px solid #0000;border-radius:10px;justify-content:center;align-items:baseline;gap:7px;min-height:29px;padding:3px 6px;transition:border-color .16s,background-color .16s,color .16s;display:flex}.string-button:hover{border-color:var(--line-strong)}.string-button strong{font-size:13px}.string-button small{color:var(--muted);font-size:10px}.string-button.is-selected{color:var(--accent);background:var(--accent-soft);border-color:#ffb45473}.string-button.is-selected small{color:#e8c99e}.stepper{border:1px solid var(--line);background:var(--surface-soft);border-radius:10px;grid-template-columns:28px minmax(46px,1fr) 28px;align-items:center;min-height:30px;display:grid}.stepper button{background:0 0;height:28px;padding:0;font-size:20px}.stepper button:hover:not(:disabled){color:var(--accent)}.stepper button:disabled{color:#4d5560}.stepper output{text-align:center;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}.toggle-button{min-height:30px;color:var(--muted-bright);white-space:nowrap;background:0 0;align-items:center;gap:10px;padding:0;font-size:10px;display:flex}.toggle-indicator{background:#333b47;border-radius:99px;width:30px;height:17px;transition:background-color .16s;position:relative}.toggle-indicator:after{content:"";background:#8d97a6;border-radius:50%;width:11px;height:11px;transition:left .16s,background-color .16s;position:absolute;top:3px;left:3px}.toggle-button.is-selected .toggle-indicator{background:#66d7d13d}.toggle-button.is-selected .toggle-indicator:after{background:var(--cyan);left:16px}.toggle-label-short{display:none}.visual-card{border:1px solid var(--line);background:linear-gradient(150deg, #ffffff06, transparent 42%), var(--surface);border-radius:16px;margin-top:14px;overflow:hidden}.card-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:52px;padding:8px 18px;display:flex}.fretboard-heading{gap:22px;min-height:68px}.fretboard-title{flex:none}.fretboard-controls{grid-template-columns:minmax(360px,1fr) auto auto;align-items:end;gap:18px;width:100%;min-width:0;display:grid}.fretboard-string-control{min-width:360px}.fretboard-display-control{min-width:300px}.fretboard-toggle-list{gap:12px;display:flex}.fretboard-heading .legend{flex-wrap:wrap;align-self:center;gap:7px 18px}.card-kicker{margin-bottom:3px;font-size:9px}.card-heading h2{letter-spacing:-.02em;margin:0;font-size:16px;font-weight:560}.card-note{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.legend{color:var(--muted);gap:22px;font-size:11px;display:flex}.legend>span{align-items:center;gap:8px;display:inline-flex}.legend-label-short{display:none}.legend i{border-radius:50%;width:9px;height:9px}.legend-primary{background:var(--accent);box-shadow:0 0 9px #ffb4548c}.legend-equal{border:2px solid var(--accent);background:#ffb4543d}.legend-secondary{border:2px solid var(--cyan);background:#182e32}.legend-octave{background:#66d7d12e;border:1px solid #66d7d1b3}.fretboard-scroll,.piano-scroll{scrollbar-color:#414a57 transparent;scrollbar-width:thin;overflow-x:auto}.fretboard-scroll{padding:0 12px 4px}.fretboard-svg{width:100%;min-width:980px;height:auto;max-height:280px;display:block}.fretboard-board{stroke:#ffffff1a;stroke-width:1px}.fret-marker{fill:#e9dec86b}.fret-line{stroke:#dce1e680;stroke-width:1.2px}.nut-line{stroke:#ece9df;stroke-width:5px}.fret-number{fill:#727c89;letter-spacing:.05em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:600}.fretboard-string-row.is-interactive{cursor:pointer}.string-hit-area{fill:#0000}.guitar-string{stroke:#9199a3;transition:stroke .16s,filter .16s}.fretboard-string-row.is-interactive:hover .guitar-string{stroke:#ccd1d6}.fretboard-string-row.is-selected .guitar-string{stroke:#e7bd82;filter:drop-shadow(0 0 3px #ffb4548c)}.string-number{fill:#d5d9dd;font-size:12px;font-weight:700}.string-open-note{fill:#788390;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px}.fretboard-string-row.is-selected .string-number,.fretboard-string-row.is-selected .string-open-note{fill:var(--accent)}.pitch-class-note{fill:#66d7d12e;stroke:#66d7d1b3;stroke-width:1.4px}.note-circle{stroke-width:2px}.note-primary .note-circle{fill:var(--accent);stroke:#ffe0b3}.note-secondary .note-circle{fill:#182e32;stroke:var(--cyan)}.note-equal .note-circle{fill:#ffb4543d;stroke:var(--accent)}.note-label{font-size:9px;font-weight:800}.note-primary .note-label{fill:#1d140a}.note-secondary .note-label{fill:#c8fffb}.note-equal .note-label{fill:#ffe0b3}.secondary-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,.45fr);gap:14px;display:grid}.piano-card,.staff-card{min-width:0}.piano-scroll{padding:8px 14px 5px}.piano-svg{width:100%;min-width:820px;max-height:205px;display:block}.piano-key{stroke:#0b0d10;stroke-width:1px;transition:fill .14s,filter .14s}.piano-key.is-white{fill:#d9d9d3}.piano-key.is-black{fill:#171a1f}.piano-key.is-related.is-white{fill:#9fc7c3}.piano-key.is-related.is-black{fill:#275f60}.piano-key.is-active{fill:var(--accent);filter:drop-shadow(0 0 7px #ffb45499)}.piano-octave-label{fill:#767b7c;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:7px}.piano-current-label{fill:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.segmented-control{border:1px solid var(--line);background:#0e1115;border-radius:9px;padding:3px;display:inline-flex}.segmented-control button{min-height:30px;color:var(--muted);background:0 0;border-radius:6px;padding:0 10px;font-size:10px}.segmented-control button.is-selected{color:var(--text);background:var(--surface-soft)}.staff-svg{width:100%;max-height:158px;padding:0 18px;display:block}.staff-visual{min-width:0}.staff-line,.staff-ledger-line{stroke:#707985;stroke-width:1.4px}.staff-ledger-line{stroke:#a4adb8}.treble-clef{fill:#d3d7da;font-family:Noto Music,Bravura Text,Segoe UI Symbol,serif;font-size:98px}.clef-octave{fill:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}.note-head{fill:var(--accent);stroke:#ffe0b3;stroke-width:1.5px;filter:drop-shadow(0 0 8px #ffb4548c)}.note-stem{stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.accidental{fill:#d6d9dc;font-family:Noto Music,Bravura Text,Segoe UI Symbol,serif;font-size:28px}.staff-caption-text{color:var(--muted-bright);margin:-5px 18px 12px;font-size:11px;line-height:1.4}@media (width<=1280px){.top-grid{grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);gap:24px}.intro{padding-block:12px}.pitch-meter{grid-template-columns:minmax(165px,.52fr) minmax(230px,.86fr) auto}}@media (width<=1120px){.top-grid,.secondary-grid{grid-template-columns:1fr}.staff-svg{max-height:200px}}@media (width>=1130px) and (orientation:landscape){.app-shell{min-height:100dvh;padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom));grid-template-rows:auto auto;align-content:center;display:grid;overflow:hidden auto}.site-header{min-height:52px}main{box-sizing:border-box;min-height:0;max-height:840px;padding-block:18px;display:block}.visual-card{margin-top:22px}}@media (width>=1281px) and (height>=880px) and (orientation:landscape){main{padding-block:20px}.visual-card{margin-top:26px}}@media (width<=760px){html{scroll-snap-type:y proximity;scroll-padding-top:14px}.pitch-meter,.visual-card{scroll-snap-align:start;scroll-margin-top:14px}.site-header,main,footer{width:min(100% - 32px,1480px)}.site-header{min-height:56px}.privacy-chip{font-size:0}.header-actions{gap:8px}.technical-settings-panel{box-sizing:border-box;width:min(380px,100vw - 32px)}main{padding:24px 0 18px}.intro h1{white-space:normal;font-size:clamp(28px,2.15vw,32px)}.intro-copy{font-size:14px}.pitch-meter{grid-template-columns:minmax(132px,1fr) minmax(110px,1fr);align-items:start;gap:16px 12px;padding:16px}.pitch-reading{grid-area:1/1;grid-template-columns:auto minmax(0,1fr);column-gap:8px}.pitch-reading-control{border-top:1px solid var(--line);grid-area:2/1;align-self:start;padding-top:16px}.tuning-panel{grid-area:1/2;align-self:center}.pitch-note{min-width:44px}.pitch-note span{font-size:48px}.pitch-frequency{font-size:9px}.pitch-controls{box-sizing:border-box;border-top:1px solid var(--line);border-left:0;grid-area:2/2;min-height:0;padding-top:16px;padding-left:0;display:flex}.pitch-control-group{flex:1}.pitch-controls{gap:7px}.pitch-controls .input-mode-control{flex:none;min-height:28px}.pitch-controls .microphone-control,.pitch-controls .play-surface-hint{min-height:38px}.pitch-controls .mic-button,.pitch-reading-control .stepper{box-sizing:border-box;width:100%}.pitch-reading-control .stepper{grid-template-columns:24px minmax(38px,1fr) 24px}.toggle-indicator{flex:0 0 30px}.card-heading{align-items:flex-start;min-height:76px;padding:18px}.fretboard-heading{flex-flow:wrap;align-items:center;gap:8px 10px;min-height:56px;padding:10px 12px}.fretboard-controls{display:contents}.fretboard-string-control{flex:1 0 100%;order:2;min-width:0}.fretboard-display-control{order:1;min-width:0;margin-left:auto}.fretboard-display-control>.control-label{display:none}.fretboard-toggle-list{align-items:center;gap:8px;display:flex}.fretboard-heading .toggle-button{gap:5px;min-height:28px;font-size:9px}.fretboard-heading .toggle-indicator{flex:0 0 26px;width:26px;height:15px}.fretboard-heading .toggle-indicator:after{width:9px;height:9px}.fretboard-heading .toggle-button.is-selected .toggle-indicator:after{left:14px}.toggle-label-long{display:none}.toggle-label-short{display:inline}.fretboard-heading .legend{flex-flow:wrap;flex:1 0 100%;order:3;align-items:center;gap:6px 14px;padding-top:2px;display:flex}.legend-label-long{display:none}.legend-label-short{display:inline}.staff-svg{max-height:170px}.legend{flex-direction:column;align-items:flex-start;gap:7px}}@media (width<=460px){.settings-pair,.settings-select-grid{grid-template-columns:1fr}.string-buttons{grid-template-columns:repeat(3,1fr)}.mic-button{justify-content:center;width:100%;padding-inline:10px}.pitch-controls .input-mode-control>.control-label{display:none}.pitch-controls .input-mode-switch{width:100%}.pitch-reading-control .stepper{grid-template-columns:20px minmax(34px,1fr) 20px}.fretboard-controls{grid-template-columns:1fr}.fretboard-heading .legend{gap:5px 12px}.segmented-control{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}.fret-play-target{fill:#0000;stroke:#0000;cursor:pointer;outline:none;transition:fill .1s}.fret-play-target:hover{fill:#66d7d114}.fret-play-target:focus-visible{fill:#66d7d11a;stroke:var(--cyan);stroke-width:2px}.piano-key.is-playable{cursor:pointer;outline:none}.piano-key.is-playable:hover{filter:brightness(1.12)}.piano-key.is-playable:focus-visible{stroke:var(--cyan);stroke-width:3px}