@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root{font-family:'DM Sans',sans-serif;color-scheme:light;--bg:#f5f6f2;--side:#fcfdfa;--surface:#fff;--surface-raised:#f7f8f5;--surface-hover:#eef1e9;--text:#242922;--muted:#737b70;--line:#e3e8de;--lime:#c4ef83;--accent:#4d7028;--purple:#d2b9fb;--blue:#a6cdf4;--peach:#f4c19a;--pink:#efafd2;--aqua:#91dccc;--yellow:#ead88a;--active:#e9f2df;--shadow:0 5px 20px #25311603;--diagram-line:#c6cec0;--diagram-text:#596150;--white-key:#fafbf7;--black-key:#202421;--radius:17px}
:root[data-theme=dark]{color-scheme:dark;--bg:#111315;--side:#151719;--surface:#191c1e;--surface-raised:#1f2325;--surface-hover:#272c2e;--text:#f1f3eb;--muted:#90978f;--line:#2c3132;--lime:#c8f578;--accent:#c8f578;--purple:#c3a3ee;--blue:#94bdea;--peach:#efb690;--pink:#e6a6c9;--aqua:#7ecfbb;--yellow:#e2d28a;--active:#283020;--shadow:0 5px 20px #00000005;--diagram-line:#4a504e;--diagram-text:#a7afa2;--white-key:#dce0d5;--black-key:#151916}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,select,a,input{touch-action:manipulation}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}button,select{transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}button:hover{background:var(--surface-hover)}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:focus:not(:focus-visible){outline:0}select{border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);padding:7px 28px 7px 11px;color:var(--text);cursor:pointer;max-width:100%;font-size:.875rem}select:hover{border-color:var(--muted)}.icon{height:20px;width:20px;flex-shrink:0;vertical-align:middle}.muted{color:var(--muted)}.tiny-label{font-size:.75rem;letter-spacing:.09em;color:var(--muted);font-weight:600}.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:600;color:var(--muted);display:flex;gap:9px;align-items:center}.eyebrow>span:empty{width:6px;height:6px;background:var(--accent);border-radius:100%}h1,h2,h3,p{margin:0}h1,h2,h3,.chord-name,.brand{font-family:'Manrope',sans-serif}h3{font-size:.94rem;font-weight:650}.panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}[hidden]{display:none!important}
.sidebar{width:222px;position:fixed;inset:0 auto 0 0;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:34px 20px;z-index:10}.brand{display:flex;gap:11px;align-items:center;font-size:2rem;font-weight:800;letter-spacing:-1.6px;padding-left:12px;line-height:1.1}.brand>.icon{background:var(--lime);color:#1f2a14;width:35px;height:35px;padding:5px;border-radius:10px}.brand-dot{color:var(--accent)}.workspace-label{font-size:.65rem;letter-spacing:.12em;color:var(--muted);margin:54px 0 17px 14px;font-weight:600}.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;text-align:left;font-size:.9rem;font-weight:500;min-height:47px;padding:10px 14px;border-radius:9px;color:var(--muted);position:relative}.nav-item>.icon{width:19px;height:19px}.nav-item.active{background:var(--active);color:var(--accent)}.nav-active{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto}.beta{font-size:.625rem;letter-spacing:.06em;border:1px solid var(--line);padding:2px 5px;border-radius:4px;color:var(--muted);line-height:1.4}.nav-item .beta{margin-left:auto}.sidebar-bottom{margin-top:auto}.practice-note{padding:28px 13px 30px;color:var(--muted);display:flex;flex-direction:column;gap:15px}.practice-note>.icon{width:24px;height:24px;color:var(--accent)}.practice-note p{font-size:.82rem;color:var(--text)}.practice-note p span{font-size:.75rem;color:var(--muted);display:block;line-height:1.7;margin-top:6px}.theme-control{display:flex;background:var(--bg);border:1px solid var(--line);padding:4px;border-radius:10px;margin:0 8px}.theme-control>.choice{flex:1;padding:7px;border-radius:6px;color:var(--muted)}.theme-control>.selected{background:var(--surface-hover);color:var(--text);box-shadow:0 2px 5px #00000008}.theme-control .icon{width:17px;height:17px}.sidebar-foot{font-size:.65rem;color:var(--muted);display:block;text-align:center;margin-top:19px}.app-body{margin-left:222px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:20px}.breadcrumb{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.82rem}.breadcrumb>.icon{height:12px;width:12px;opacity:.6}.breadcrumb strong{font-weight:450;color:var(--text)}.global-settings{display:flex;align-items:center;gap:21px}.global-settings label{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--muted)}.global-settings select{font-size:.8rem;padding:5px 7px;background:none;border:0}.global-settings .notation-setting select{border:1px solid var(--line);background:var(--surface);padding-left:10px}.setting-divider{height:19px;width:1px;background:var(--line)}.language-setting>.icon{width:17px;height:17px}.global-settings .language-setting{gap:4px}main{width:100%;max-width:1530px;padding:36px 42px 20px;margin:0 auto;flex:1}.page-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:29px;align-items:center}.page-heading h1{font-size:clamp(1.6rem,2.25vw,2.4rem);font-weight:650;letter-spacing:-1.15px;line-height:1.35;margin:11px 0 9px}.page-heading h1 em{font-style:normal;color:var(--accent)}.page-heading p{font-size:.9rem;color:var(--muted)}.heading-mark{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid var(--line);border-radius:17px;transform:rotate(-7deg);color:var(--accent);background:var(--surface);margin:0 8px}.heading-mark .icon{width:29px;height:29px}.builder{padding:0 23px;margin-bottom:24px}.root-row,.quality-row{display:flex;align-items:center;gap:18px;padding:21px 0}.root-row{border-bottom:1px solid var(--line)}.field-name{width:131px;flex-shrink:0;display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:500}.step{font-size:.65rem;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 4px}.root-choices{display:flex;gap:6px;flex:1}.root-choices>.choice{font-family:'Manrope',sans-serif;font-weight:650;min-width:36px;flex:1;min-height:39px;border:1px solid var(--line);background:var(--surface-raised);border-radius:7px;font-size:.875rem;padding:6px 3px;white-space:nowrap}.root-choices>.choice:hover{border-color:var(--muted);transform:translateY(-2px)}.root-choices>.choice.selected{background:var(--lime);color:#263319;border-color:var(--lime);box-shadow:0 2px 12px #bdea5b12}.transpose{display:flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line);color:var(--muted);font-size:.78rem}.transpose button{padding:5px;border-radius:5px}.transpose .icon{height:14px;width:14px}.quality-content{flex:1;min-width:0}.quality-choices{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.quality-choices>.choice{border:1px solid var(--line);border-radius:6px;padding:6px 11px;font-size:.78rem;font-weight:500;color:var(--muted);white-space:nowrap}.quality-choices>.choice.selected{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--active)}.more-select{max-width:180px}.more-select select{font-size:.75rem;background:none;border-color:transparent;padding-left:5px;width:100%;color:var(--muted)}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:22px;align-items:stretch}.instrument-panel{overflow:hidden;min-width:0;display:flex;flex-direction:column}.instrument-top{display:flex;justify-content:space-between;align-items:center;padding:19px 23px 0;gap:12px}.instrument-tabs{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--bg)}.instrument-tabs>.choice{display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:7px;color:var(--muted);font-size:.8rem;font-weight:500}.instrument-tabs>.selected{background:var(--surface-hover);color:var(--text);box-shadow:0 2px 5px #00000008}.instrument-tabs .icon{width:16px;height:16px}.live-label{font-size:.625rem;letter-spacing:.15em;color:var(--muted)}.instrument-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 24px 0;color:var(--muted);font-size:.75rem;min-height:32px}.instrument-options label{display:flex;align-items:center;gap:8px;white-space:nowrap}.instrument-options select{font-size:.75rem;padding:5px 8px}.visual-stage{flex:1;min-height:275px;padding:10px 15px;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(var(--line) .6px,transparent .6px);background-size:19px 19px;margin-top:10px}.guitar-main{display:flex;align-items:center;justify-content:space-around;gap:15px;width:100%;max-width:640px}.chord-diagram{width:240px;max-width:47%;overflow:visible}.fret-line{stroke:var(--diagram-line);stroke-width:1}.fret-line.nut{stroke:var(--diagram-text);stroke-width:4}.string-line{stroke:var(--diagram-line)}.open-note{font-size:19px;fill:var(--diagram-text);text-anchor:middle}.dot-label{text-anchor:middle;fill:#263020;font-size:10px;font-weight:650}.fret-label{fill:var(--muted);font-size:12px;text-anchor:middle}.string-label{text-anchor:middle;fill:var(--muted);font-size:10px}.diagram-meta{display:flex;flex-direction:column;gap:8px;padding-left:12px;max-width:115px}.diagram-meta strong{font-size:.8rem;font-weight:500;line-height:1.6}.diagram-meta>span:last-child{display:flex;align-items:center;gap:7px;font-size:.675rem;color:var(--muted);margin-top:8px}.diagram-meta .icon{height:13px;width:13px}.tablature{display:flex;flex-direction:column;gap:8px;width:100px;padding-right:12px;font-size:.7rem;color:var(--muted)}.tablature>.tiny-label{margin-bottom:8px}.tablature>div{display:flex;align-items:center;gap:5px;line-height:1}.tablature>div span{width:16px;flex-shrink:0}.tablature i{height:1px;background:var(--line);flex:1}.tablature b{font-weight:500;color:var(--text);font-family:monospace}.tab-caption{font-size:.625rem;line-height:1.5;margin-top:8px}.legend{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;padding:8px 22px 24px;font-size:.69rem;color:var(--muted)}.legend>span{display:flex;gap:5px;align-items:center}.legend i{width:6px;height:6px;background:var(--note);border-radius:50%}.legend b{color:var(--text);font-weight:500}.voicing-strip{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);margin:0 23px;padding:17px 0}.voicing-strip>span{font-size:.75rem;flex-shrink:0}.voicing-strip>span small{display:block;color:var(--muted);font-size:.625rem;margin-top:4px}.voicing-buttons{display:flex;gap:7px;overflow:auto;padding:3px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.voicing-chip{display:flex;flex-direction:column;gap:3px;align-items:center;min-width:72px;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:.78rem}.voicing-chip small{font-family:monospace;color:var(--muted);font-size:.65rem;white-space:nowrap}.voicing-chip.selected{background:var(--active);border-color:var(--accent);color:var(--accent)}.playback{padding:17px 23px;border-top:1px solid var(--line);background:var(--surface-raised);display:flex;gap:17px;align-items:center;justify-content:space-between;margin-top:auto}.play-button{background:var(--lime);color:#26331a;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;border-radius:9px;font-size:.82rem;font-weight:650;white-space:nowrap;box-shadow:0 3px 10px #00000005}.play-button:hover{background:#b4e961;box-shadow:0 4px 17px #bdeb5920;transform:translateY(-1px)}.play-button .icon{width:18px;height:18px}.arpeggio{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted);padding:8px 0;white-space:nowrap}.arpeggio:hover{background:none}.switch{height:17px;width:29px;border-radius:10px;background:var(--line);padding:3px;transition:background .2s}.switch>i{display:block;height:11px;width:11px;background:var(--muted);border-radius:50%;transition:transform .2s}.arpeggio.on .switch{background:var(--accent)}.arpeggio.on .switch>i{transform:translateX(12px);background:var(--bg)}.volume{display:flex;align-items:center;gap:7px;color:var(--muted)}.volume .icon{width:15px;height:15px}.volume input{width:61px;height:3px;accent-color:var(--accent)}.theory-panel{padding:25px;display:flex;flex-direction:column;position:relative;overflow:hidden}.theory-panel .eyebrow{font-size:.65rem;letter-spacing:.15em}.chord-name{font-size:4.3rem;font-weight:550;letter-spacing:-3.5px;line-height:1.4;margin-top:7px;animation:note-in .25s ease both;overflow-wrap:anywhere}.chord-name sup{font-size:2rem;vertical-align:super;letter-spacing:-1.5px;margin-left:4px}.theory-panel h2{font-family:'DM Sans',sans-serif;font-size:.875rem;color:var(--muted);font-weight:450;margin-top:-2px}.note-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:21px}.note-pills button{background:color-mix(in srgb,var(--note) 12%,var(--surface));color:var(--text);border:1px solid color-mix(in srgb,var(--note) 25%,transparent);border-radius:6px;padding:5px 10px;font-size:.8rem;min-width:34px}.note-pills button:hover{background:var(--note);color:#243019;transform:translateY(-3px)}.theory-divider{height:1px;background:var(--line);margin:24px 0 19px}.theory-panel h3{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500}.intervals{display:flex;flex-direction:column;gap:13px;margin:17px 0 21px}.intervals>div{display:flex;align-items:center;gap:9px;font-size:.725rem;color:var(--muted)}.intervals strong{margin-left:auto;color:var(--text);font-weight:500;font-size:.8rem}.interval-badge{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--note) 16%,var(--surface));color:var(--text);font-size:.65rem;flex-shrink:0;border:1px solid color-mix(in srgb,var(--note) 25%,transparent)}.formula{border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}.formula span{font-size:.575rem;letter-spacing:.13em;color:var(--muted)}.formula b{font-weight:500;font-size:.75rem;letter-spacing:.02em;text-align:right}.chord-mood{display:flex;gap:9px;align-items:flex-start;color:var(--muted);margin-top:auto;padding-top:23px}.chord-mood>.icon{color:var(--accent);height:14px;width:14px;margin-top:3px}.chord-mood p{font-size:.72rem;line-height:1.85}.capo-result{display:flex;gap:9px;margin-top:18px;font-size:.7rem;color:var(--muted)}.capo-result strong{font-size:1.2rem;color:var(--accent);display:block;margin-top:3px}.capo-result small{font-weight:400;font-size:.65rem;color:var(--muted);margin-left:3px}.explore-banner{display:flex;align-items:center;gap:18px;margin:24px 0 5px;padding:20px 23px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(105deg,var(--surface),var(--surface-raised))}.banner-icon{border:1px solid var(--line);border-radius:11px;background:var(--bg);padding:10px;color:var(--accent)}.banner-icon>.icon{height:23px;width:23px}.explore-banner h3{font-size:.825rem;margin-bottom:4px}.explore-banner p{font-size:.75rem;color:var(--muted)}.explore-banner button{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:.75rem;white-space:nowrap;border:1px solid var(--line);border-radius:7px;padding:8px 13px}.explore-banner button>.icon{width:16px;height:16px}.instrument-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.7rem;color:var(--muted);padding:17px 23px;border-top:1px solid var(--line);margin:0 23px;text-align:center}.instrument-hint .icon{height:14px;width:14px}.piano-scroll{width:100%;overflow:auto;padding:15px 6px 16px}.piano-keyboard{min-width:490px;width:100%;height:185px;position:relative;filter:drop-shadow(0 8px 6px #00000012)}.visual-stage.piano{flex-direction:column;padding-left:25px;padding-right:25px}.piano-key{position:absolute;border-radius:0 0 5px 5px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding:10px 0;transition:background .15s,transform .15s}.piano-key.white{left:calc(var(--key-index)*100%/var(--white-count));width:calc(100%/var(--white-count) - 2px);height:100%;background:var(--white-key);border:1px solid #a9b09f;border-top-width:5px;color:#48513c;box-shadow:inset 0 -5px 0 #0000000d}.piano-key.black{left:calc(var(--key-index)*100%/var(--white-count) - 100%/var(--white-count)*.3);width:calc(100%/var(--white-count)*.6);height:62%;background:linear-gradient(#111511,var(--black-key));z-index:1;border:1px solid #0f120e;box-shadow:inset 0 -5px 0 #00000066,0 5px 3px #00000033;color:#eee}.piano-key.lit.white{background:var(--note);border-color:color-mix(in srgb,var(--note) 70%,#172810)}.piano-key.lit.black{background:var(--note);color:#202b19}.piano-key:hover,.piano-key:active{filter:brightness(.93);transform:translateY(2px)}.piano-key span{font-size:.75rem;font-weight:600;writing-mode:horizontal-tb}.piano-key small{font-size:.6rem;color:#6e7763}.piano-caption{font-size:.7rem;color:var(--muted);margin-bottom:12px}.staff{width:100%;max-height:350px;overflow:visible}.staff-line{stroke:var(--diagram-line);stroke-width:1}.clef-symbol{font-family:'Segoe UI Symbol','Noto Music',serif;font-size:66px;fill:var(--text)}.accidental{font-family:'Segoe UI Symbol',serif;font-size:20px;fill:var(--text)}.staff-note{cursor:pointer;transition:opacity .2s}.staff-note:hover{opacity:.6}.fretboard-scroll{overflow:auto;width:100%;padding:15px 4px 20px}.fretboard{min-width:650px}.fret-numbers,.fret-string{display:grid;grid-template-columns:25px repeat(13,1fr);align-items:center;text-align:center;font-size:.65rem;color:var(--muted)}.fret-numbers{height:25px}.fret-string{height:32px}.fret-cell{height:32px;border-right:2px solid var(--diagram-line);display:flex;align-items:center;justify-content:center;position:relative}.fret-cell:before{content:'';position:absolute;inset:50% 0 auto;height:1px;background:var(--diagram-line)}.fret-cell.open{border-right:4px solid var(--diagram-text)}.fret-cell button{position:relative;z-index:1;background:var(--note);color:#25331a;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.6rem;padding:0;font-weight:600}.fret-cell button:hover{transform:scale(1.15);box-shadow:0 0 13px color-mix(in srgb,var(--note) 40%,transparent)}.harmony{padding:22px 25px;margin-top:24px;display:flex;align-items:center;gap:24px}.harmony .eyebrow{font-size:.65rem}.harmony h3{margin-top:7px;font-size:.9rem}.harmony-chords{display:flex;gap:10px;margin-left:auto;flex:1}.harmony-chords button{display:flex;flex-direction:column;gap:7px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:9px;flex:1}.harmony-chords small{font-size:.65rem;color:var(--muted)}.harmony-chords strong{font-size:.85rem;font-weight:550}.harmony-chords button:hover{border-color:var(--accent);color:var(--accent)}.empty-state{text-align:center;padding:25px;max-width:370px}.empty-state h3{margin:15px 0 9px}.empty-state p{font-size:.85rem;color:var(--muted)}footer{padding:22px 42px 27px;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;max-width:1530px;width:100%;margin:0 auto;color:var(--muted)}footer>span:first-child{font-weight:650;color:var(--text)}.footer-tag{margin-left:13px;font-weight:400;font-size:.65rem;color:var(--muted)}footer>span:last-child{display:flex;align-items:center;gap:8px;font-size:.65rem}footer .icon{height:12px;width:12px;color:var(--accent)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--text);color:var(--bg);border-radius:12px;padding:13px 20px;font-size:.875rem;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 30px);box-shadow:0 8px 30px #0002}#toast.visible{opacity:1;transform:translate(-50%,0)}
.micro-panel{max-width:1100px;margin:0 auto}.micro-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:18px 25px;font-size:.85rem}.micro-toolbar>span,.micro-toolbar>div{display:flex;align-items:center;gap:12px}.micro-toolbar>div{gap:20px;font-size:.75rem;color:var(--muted)}.micro-toolbar select{font-size:.75rem;margin-left:5px}.micro-stage{display:flex;align-items:center;flex-direction:column;padding:38px 25px 28px}.listening-ring{width:170px;height:170px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,var(--active),transparent 70%);margin-bottom:20px;box-shadow:0 0 0 12px color-mix(in srgb,var(--line) 18%,transparent),0 0 0 24px color-mix(in srgb,var(--line) 10%,transparent)}.listening-ring.listening{border-color:var(--accent);animation:breathe 2.2s ease-in-out infinite}.micro-note>.icon{height:43px;width:43px;color:var(--accent)}.micro-note>span{font-family:'Manrope',sans-serif;font-size:4.4rem;font-weight:550;letter-spacing:-3px}.micro-note sub{font-size:1.4rem;letter-spacing:0}.micro-note sup{font-size:1.4rem;letter-spacing:-1px}.micro-note .detected-chord{font-size:3rem}.in-tune{color:var(--accent)}.micro-reading{font-size:1.15rem;font-weight:500;margin-top:17px}.micro-detail{font-size:.8rem;color:var(--muted);margin-top:7px;text-align:center;min-height:24px}.tuner-meter{width:100%;max-width:440px;margin:24px 0}.meter-ticks{display:flex;justify-content:space-between;align-items:center;position:relative;height:40px}.meter-ticks i{width:1px;height:12px;background:var(--line)}.meter-ticks i:nth-child(5n+1){height:24px;background:var(--muted)}.meter-ticks i.center{height:35px;background:var(--accent)}.tuner-needle{position:absolute;left:50%;top:0;width:3px;height:39px;background:var(--accent);border-radius:3px;transition:left .16s;transform:translateX(-50%);box-shadow:0 0 10px color-mix(in srgb,var(--lime) 35%,transparent)}.meter-labels{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.75rem;margin-top:8px}.meter-labels span:nth-child(2){color:var(--accent)}.meter-labels small{font-size:.65rem}.mic-start{margin-top:10px;padding:13px 22px}.privacy-note{display:flex;gap:7px;align-items:center;font-size:.7rem;color:var(--muted);text-align:center;margin-top:16px}.privacy-note .icon{height:14px;width:14px}.mic-error{font-size:.85rem;color:#da806e;max-width:480px;text-align:center}.mic-error:not(:empty){margin-top:18px}.tuning-strings{display:flex;justify-content:center;gap:12px;border-top:1px solid var(--line);width:100%;margin-top:30px;padding-top:25px;align-items:flex-start;flex-wrap:wrap}.tuning-strings>div{display:flex;flex-direction:column;align-items:center}.tuning-strings .choice{border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:1.1rem;min-width:57px;height:51px;display:flex;gap:3px;align-items:baseline;justify-content:center}.tuning-strings .choice.selected{border-color:var(--accent);background:var(--active);color:var(--accent)}.tuning-strings .choice small{font-size:.6rem;color:var(--muted);margin-right:3px}.tuning-strings .choice sub{font-size:.6rem}.tuning-strings>.choice{font-size:.8rem;align-items:center}.reference-tone{padding:6px;color:var(--muted);border-radius:4px;margin-top:3px}.reference-tone>.icon{height:14px;width:14px}.micro-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1050px;margin:32px auto 5px}.micro-tips>div{padding:5px 12px}.micro-tips .icon{color:var(--accent);height:20px;width:20px;margin-bottom:10px}.micro-tips h3{font-size:.85rem;margin-bottom:6px}.micro-tips p{font-size:.78rem;line-height:1.8;color:var(--muted)}.signal-bars{display:flex;align-items:center;justify-content:center;gap:4px;height:70px;margin:14px 0;width:100%;max-width:350px}.signal-bars i{width:4px;height:var(--h);background:var(--line);border-radius:3px}.micro-stage:has(.listening) .signal-bars i{background:var(--accent);animation:wave 1s ease-in-out infinite;animation-delay:calc(var(--i)*-.06s)}.detected-open{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-size:.85rem;margin-top:24px}.detected-open .icon{width:15px;height:15px}
@keyframes note-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes breathe{50%{box-shadow:0 0 0 15px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 29px color-mix(in srgb,var(--accent) 3%,transparent)}}@keyframes wave{50%{height:calc(var(--h)*.3);opacity:.6}}main>.page-heading,main>.builder,main>.workspace-grid,main>.micro-panel{animation:note-in .32s ease both}.choice.selected{transition:background .2s,color .2s}.nav-item:hover .icon{transform:rotate(-5deg)}.nav-item .icon{transition:transform .2s}
@media(min-width:1550px){main{padding-top:46px}.page-heading{margin-bottom:35px}.page-heading h1{font-size:2.5rem}.workspace-grid{grid-template-columns:minmax(0,1fr) 326px}.visual-stage{min-height:335px}.chord-diagram{width:280px}.instrument-options{margin-top:25px}.theory-panel{padding:29px}.theory-panel .chord-name{font-size:5rem}.intervals{gap:17px}.guitar-main{max-width:750px}.diagram-meta{max-width:140px}.diagram-meta strong{font-size:.9rem}.tablature{width:120px}.playback{padding-top:21px;padding-bottom:21px}.root-row,.quality-row{padding-top:24px;padding-bottom:24px}}
@media(max-width:1200px){.sidebar{width:188px;padding:30px 12px}.app-body{margin-left:188px}.brand{font-size:1.8rem}.workspace-label{font-size:.575rem}.topbar{padding:0 28px}main{padding:30px 28px 20px}.page-heading h1{font-size:1.9rem}.heading-mark{display:none}.workspace-grid{grid-template-columns:minmax(0,1fr) 260px;gap:17px}.theory-panel{padding:22px}.builder{padding:0 18px}.root-row,.quality-row{gap:12px}.field-name{width:111px;font-size:.75rem}.root-choices{gap:4px}.root-choices>.choice{min-width:29px;font-size:.75rem}.transpose{gap:2px;padding-left:7px}.instrument-top{padding:17px 18px 0}.instrument-tabs>.choice{padding:7px 9px}.live-label{display:none}.diagram-meta{display:none}.guitar-main{gap:20px;justify-content:center}.chord-diagram{max-width:62%}.playback{padding:16px 18px;gap:12px;flex-wrap:wrap}.volume{margin-left:auto}.play-button{padding:10px 13px;font-size:.78rem}.voicing-strip{margin:0 18px;gap:10px}.voicing-strip>span{font-size:.7rem}.instrument-options{margin-left:18px;margin-right:18px;font-size:.68rem}.instrument-options label{gap:5px}.instrument-options select{font-size:.68rem;max-width:140px}.instrument-options>span:first-child{max-width:130px}.explore-banner{padding:18px;gap:13px}.explore-banner button{font-size:.7rem;padding:8px}.explore-banner p{font-size:.7rem}.banner-icon{padding:8px}.harmony{flex-direction:column;align-items:flex-start;gap:16px}.harmony-chords{width:100%}footer{padding:20px 28px}}
@media(max-width:980px){.sidebar{width:76px;padding:27px 10px}.brand{padding:0;justify-content:center}.brand>span,.workspace-label,.nav-item>span,.practice-note,.sidebar-foot{display:none}.sidebar nav{margin-top:48px}.nav-item{justify-content:center;padding:14px}.nav-item>.icon{width:21px;height:21px}.nav-item.active:after{content:'';position:absolute;left:-10px;width:3px;height:20px;background:var(--accent);border-radius:0 3px 3px 0}.sidebar-bottom{margin-top:auto}.theme-control{flex-direction:column;margin:0 3px}.theme-control>.choice{padding:9px 4px}.app-body{margin-left:76px}.page-heading h1{font-size:1.8rem}.page-heading .eyebrow{font-size:.65rem}.workspace-grid{grid-template-columns:minmax(0,1fr) 245px}.theory-panel{padding:21px}.chord-name{font-size:3.8rem}.root-row{flex-wrap:wrap}.root-row>.field-name{width:100%;margin-bottom:1px}.root-choices>.choice{min-width:33px}.quality-row>.field-name{align-self:flex-start;padding-top:6px}.visual-stage{min-height:270px}.legend{gap:9px;padding:8px 12px 20px}.legend>span{font-size:.625rem}.volume{display:none}.playback{justify-content:center;gap:13px}.micro-toolbar{padding:16px;flex-wrap:wrap;gap:12px}.micro-toolbar>div{flex-wrap:wrap;gap:10px}}
@media(max-width:760px){main{padding:25px 22px 15px}.topbar{height:65px;padding:0 22px}.breadcrumb{font-size:.75rem;gap:9px}.breadcrumb>strong{display:none}.global-settings{gap:12px}.global-settings label{font-size:.75rem;gap:7px}.setting-divider{display:none}.page-heading h1{font-size:1.7rem;letter-spacing:-.7px;max-width:480px}.page-heading p{font-size:.85rem;line-height:1.7}.page-heading .eyebrow{font-size:.6rem}.workspace-grid{grid-template-columns:minmax(0,1fr)}.theory-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;padding:24px}.theory-panel>.eyebrow{grid-column:1}.chord-name{grid-column:1;grid-row:2;font-size:4rem}.theory-panel h2{grid-column:1;grid-row:3}.note-pills{grid-column:1;grid-row:4;align-self:start;margin-top:15px}.theory-divider{display:none}.theory-panel h3{grid-column:2;grid-row:1}.intervals{grid-column:2;grid-row:2 / span 3;margin:17px 0}.formula{grid-column:1 / -1;margin-top:14px}.chord-mood{grid-column:1 / -1;padding-top:17px}.capo-result{grid-column:1 / -1}.diagram-meta{display:flex}.chord-diagram{width:250px;max-width:50%}.visual-stage{min-height:280px}.guitar-main{justify-content:space-around;gap:10px}.playback{justify-content:space-between}.volume{display:flex}.instrument-top{padding:18px 22px 0}.instrument-options{margin-left:22px;margin-right:22px}.live-label{display:inline}.instrument-tabs>.choice{padding:8px 12px}.instrument-options>span:first-child{max-width:none}.legend{font-size:.75rem;gap:14px;padding-bottom:24px}.legend>span{font-size:.7rem}.voicing-strip{margin:0 22px}.root-row>.field-name{width:auto;flex:1}.root-row>.transpose{order:1;margin-left:auto;border:0}.root-choices{order:2;flex-basis:100%;margin-top:6px;gap:5px}.root-choices>.choice{min-width:0;min-height:36px;font-size:.75rem}.quality-row{flex-direction:column;align-items:flex-start}.quality-row>.field-name{padding:0;width:auto}.quality-content{width:100%}.quality-choices>.choice{font-size:.75rem}.explore-banner{flex-wrap:wrap}.explore-banner>div:nth-child(2){flex:1}.explore-banner button{margin-left:53px}.micro-tips{grid-template-columns:1fr;gap:15px}.micro-tips>div{position:relative;padding:5px 5px 5px 35px}.micro-tips .icon{position:absolute;left:0;top:9px}.micro-toolbar>div{width:100%;justify-content:space-between}.micro-stage{padding:35px 20px 20px}.micro-reading{font-size:1.05rem;text-align:center}.privacy-note{font-size:.65rem}.tuning-strings{gap:7px}.tuning-strings .choice{min-width:45px;padding:8px;height:47px}.micro-tips p{font-size:.8rem}.harmony-chords{gap:6px}.harmony-chords button{padding:7px 3px}footer{padding:22px;font-size:.7rem}footer>span:last-child{display:none}}
@media(max-width:520px){.sidebar{position:sticky;top:0;width:100%;height:63px;padding:0 15px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line);gap:12px;background:color-mix(in srgb,var(--side) 95%,transparent);backdrop-filter:blur(18px)}.brand>.icon{width:31px;height:31px;padding:4px;border-radius:9px}.sidebar nav{flex-direction:row;gap:3px;margin:0}.nav-item{padding:10px 13px;min-height:39px;border-radius:8px}.nav-item>.icon{width:19px;height:19px}.nav-item.active:after{display:none}.sidebar-bottom{margin:0}.theme-control{border:0;background:none;padding:0;margin:0;flex-direction:row;gap:0}.theme-control .choice{padding:8px 5px}.theme-control .choice:not(.selected){display:none}.theme-control:focus-within .choice,.theme-control:hover .choice{display:block}.theme-control .icon{height:15px;width:15px}.app-body{margin-left:0}.topbar{height:54px;padding:0 18px}.breadcrumb{font-size:.72rem}.breadcrumb .icon{display:none}.global-settings .notation-setting>span{display:none}.global-settings .notation-setting select{font-size:.7rem;padding:4px 8px}.global-settings{gap:7px}.language-setting .icon{display:none}.global-settings .language-setting select{font-size:.7rem}main{padding:25px 17px 12px}.page-heading{margin-bottom:23px}.page-heading h1{font-size:1.75rem;letter-spacing:-.8px;max-width:330px;line-height:1.4}.page-heading .eyebrow{font-size:.54rem;letter-spacing:.115em}.page-heading p{font-size:.8rem;max-width:330px}.builder{padding:0 15px;margin-bottom:18px}.root-row,.quality-row{padding:16px 0;gap:12px}.root-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.root-choices>.choice{font-size:.9rem;min-height:37px}.field-name{font-size:.8rem}.quality-choices{gap:6px}.quality-choices>.choice{font-size:.75rem;padding:6px 10px}.more-select{max-width:150px}.quality-row{gap:15px}.instrument-top{padding:15px 14px 0}.instrument-tabs{gap:2px;padding:3px}.instrument-tabs>.choice{padding:8px 10px;gap:5px;font-size:.75rem}.instrument-tabs .icon{width:15px;height:15px}.live-label{display:none}.instrument-options{margin:15px 15px 0;font-size:.65rem;gap:8px}.instrument-options select{font-size:.65rem}.diagram-meta{display:none}.guitar-main{justify-content:center;gap:20px}.chord-diagram{max-width:66%;width:230px}.tablature{width:86px}.visual-stage{min-height:263px;padding:5px 12px}.legend{font-size:.65rem;gap:11px;padding:4px 10px 20px}.legend>span{font-size:.64rem}.voicing-strip{margin:0 15px;gap:12px;padding:13px 0}.voicing-strip>span{font-size:.65rem;max-width:80px}.voicing-chip{min-width:66px}.playback{padding:15px;gap:10px}.play-button{padding:10px 13px;font-size:.75rem}.arpeggio{font-size:.7rem;gap:6px}.volume{display:none}.theory-panel{padding:21px;column-gap:20px}.chord-name{font-size:3.6rem;letter-spacing:-2px}.chord-name sup{font-size:1.5rem;letter-spacing:-.5px}.theory-panel h2{font-size:.8rem}.theory-panel h3{font-size:.75rem}.theory-panel .eyebrow{font-size:.55rem}.intervals>div{font-size:.63rem;gap:6px}.interval-badge{width:22px;height:22px;font-size:.6rem}.intervals strong{font-size:.7rem}.note-pills{gap:5px}.note-pills button{font-size:.75rem;padding:4px 7px;min-width:29px}.explore-banner{padding:16px 14px;gap:12px;margin-top:18px}.explore-banner h3{font-size:.78rem}.explore-banner p{font-size:.7rem;line-height:1.7}.explore-banner button{margin-left:0;width:100%;justify-content:center;margin-top:2px}.banner-icon{padding:8px}.banner-icon>.icon{width:19px;height:19px}.visual-stage.piano{padding:10px 12px;min-height:280px}.piano-keyboard{min-width:520px;height:190px}.instrument-hint{padding:14px 0;margin:0 15px;font-size:.65rem}.staff{min-height:245px}.harmony{padding:20px 16px;gap:18px}.harmony-chords{flex-wrap:wrap;justify-content:center}.harmony-chords button{min-width:50px;flex:1}.harmony-chords strong{font-size:.75rem}.micro-toolbar{font-size:.75rem}.micro-toolbar>div{font-size:.65rem}.micro-toolbar select{font-size:.7rem;padding:5px}.micro-stage{padding:35px 17px 22px}.listening-ring{width:145px;height:145px}.micro-reading{font-size:.95rem}.micro-detail{font-size:.7rem;min-height:43px;max-width:270px}.tuner-meter{margin:12px 0 22px}.mic-start{font-size:.75rem}.privacy-note{line-height:1.7;font-size:.65rem;max-width:270px}.privacy-note .icon{flex-shrink:0}.tuning-strings{gap:6px}.tuning-strings .choice{min-width:39px;padding:7px 6px;font-size:.95rem;gap:1px}.tuning-strings>.choice{font-size:.68rem}.tuning-strings .choice small{font-size:.55rem;margin-right:1px}.micro-tips{margin-top:25px}.signal-bars{gap:3px}footer{padding:18px}.footer-tag{font-size:.625rem}#toast{font-size:.8rem;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
main>.page-heading,main>.builder,main>.workspace-grid,main>.micro-panel{animation:none}
.voicing-chip{flex:0 0 auto;min-width:96px}.voicing-chip small{font-size:.75rem}
.nav-item>span:not(.nav-active){min-width:0;line-height:1.45}.nav-item .nav-active{flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.detection-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.detection-layout .micro-panel{width:100%;min-width:0;margin:0}.detection-layout .micro-toolbar{padding:18px 21px}.detection-layout .micro-toolbar>span{flex-wrap:wrap;font-size:.875rem}.detection-layout .micro-stage{padding:55px 24px 35px}.detection-layout .micro-detail{max-width:390px;line-height:1.7;min-height:48px}.detection-layout .privacy-note{max-width:390px;line-height:1.8}
.detection-result{min-width:0;padding:25px;overflow:hidden}.detection-result-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.detection-result-heading .eyebrow{font-size:.75rem;letter-spacing:.08em}.result-saved{display:inline-flex;gap:4px;align-items:center;font-size:.75rem;color:var(--accent);border:1px solid var(--line);padding:3px 7px;border-radius:6px}.result-saved .icon{width:12px;height:12px}.detection-result .chord-name{font-size:4rem;margin-top:9px;line-height:1.35}.detection-result .chord-name sup{font-size:1.8rem}.detection-quality{font-size:.95rem;font-weight:500;line-height:1.6}.detection-caveat{font-size:.8rem;color:var(--muted);line-height:1.8;margin-top:9px}.detection-notes{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}.detection-notes>div{border:1px solid color-mix(in srgb,var(--note) 30%,var(--line));background:color-mix(in srgb,var(--note) 8%,var(--surface));border-radius:10px;padding:9px 13px;min-width:53px;display:flex;flex-direction:column;align-items:center;gap:4px}.detection-notes strong{font-size:1rem;font-weight:550}.detection-notes span{font-size:.75rem;color:var(--muted)}.detection-formula{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);font-size:.8rem;color:var(--muted)}.detection-formula b{color:var(--text);font-weight:500}.detection-explanation{font-size:.875rem;line-height:1.8;color:var(--muted);margin:14px 0 20px}.detected-actions{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}.detected-actions .play-button{flex:1;min-width:100px;padding:10px 12px;font-size:.875rem}.detected-actions .detected-open{margin:0;font-size:.8rem;flex:1;justify-content:center;padding:10px;white-space:nowrap}.detected-actions .icon{width:15px;height:15px}.detection-section{border-top:1px solid var(--line);padding-top:20px;margin-top:23px}.detection-section h3{font-size:.9rem;line-height:1.6}.detection-section>p{font-size:.8rem;line-height:1.8;color:var(--muted);margin-top:6px}.detection-inversions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.detection-inversions button{border:1px solid var(--line);padding:7px 10px;border-radius:7px;font-size:.875rem}.detection-inversions button:hover{border-color:var(--accent);color:var(--accent)}.detection-variations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.detection-variations button{display:flex;flex-direction:column;gap:5px;position:relative;align-items:flex-start;min-width:0;text-align:left;border:1px solid var(--line);background:var(--surface-raised);padding:11px;border-radius:10px}.detection-variations button:hover{border-color:var(--accent);background:var(--active);transform:translateY(-2px)}.detection-variations strong{font-size:1rem;font-weight:550;padding-right:14px;overflow-wrap:anywhere}.detection-variations span{font-size:.75rem;color:var(--muted);line-height:1.65}.detection-variations .icon{width:13px;height:13px;position:absolute;right:10px;top:15px;color:var(--muted)}.detection-hold-note{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.75rem;line-height:1.8;padding-top:19px;margin-top:21px;border-top:1px solid var(--line)}.detection-hold-note .icon{height:14px;width:14px;margin-top:4px;color:var(--accent)}.detection-empty{min-height:430px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.detection-empty-icon{display:flex;padding:13px;color:var(--accent);border:1px solid var(--line);background:var(--active);border-radius:12px;margin-bottom:22px}.detection-empty-icon .icon{width:27px;height:27px}.detection-empty h2{font-size:1.5rem;line-height:1.5;font-weight:600;letter-spacing:-.5px}.detection-empty>p{color:var(--muted);font-size:.875rem;line-height:1.9;margin-top:13px}.detection-empty .detection-hold-note{margin-top:30px}
@media(max-width:1200px){.detection-layout{grid-template-columns:minmax(0,1fr) 320px;gap:18px}.detection-result{padding:21px}.detection-layout .micro-stage{padding-left:20px;padding-right:20px}.detection-layout .micro-reading{font-size:1.05rem}.detection-layout .micro-toolbar{padding:16px}.detection-layout .privacy-note{font-size:.75rem}.detection-result-heading .eyebrow{font-size:.7rem}.detection-variations{gap:7px}.detected-actions .detected-open{font-size:.75rem}}
@media(max-width:900px){.detection-layout{grid-template-columns:minmax(0,1fr)}.detection-layout .micro-stage{padding-top:35px;padding-bottom:26px}.detection-result{padding:25px}.detection-empty{min-height:260px}.detection-result-heading .eyebrow{font-size:.75rem}.detection-layout .micro-detail{min-height:24px}.detection-section h3{font-size:1rem}.detection-section>p{font-size:.875rem}.detection-variations{gap:12px}.detection-variations button{padding:14px}.detection-variations span{font-size:.8rem}.detected-actions .detected-open{font-size:.875rem}}
@media(max-width:520px){.detection-result{padding:21px}.detection-layout .micro-stage{padding:30px 18px 24px}.detection-layout .listening-ring{width:120px;height:120px;margin-bottom:14px}.detection-layout .micro-reading{margin-top:10px}.detection-layout .signal-bars{height:40px;margin:9px 0}.detection-layout .micro-detail{min-height:40px;font-size:.8rem}.detection-layout .micro-toolbar{padding:14px}.detection-layout .micro-toolbar>span{font-size:.8rem;gap:8px}.detection-layout .privacy-note{margin-top:14px}.detection-result .chord-name{font-size:3.7rem}.detection-result-heading .eyebrow{font-size:.7rem}.result-saved{font-size:.7rem}.detection-variations{gap:8px}.detection-variations button{padding:11px}.detection-variations span{font-size:.75rem}.detected-actions .detected-open{font-size:.75rem}.detection-section>p{font-size:.8rem}.detection-empty{min-height:290px}.detection-empty h2{font-size:1.35rem}}

/* Keep musical labels readable on every screen, including browser zoom. */
.workspace-label,.sidebar-foot,.beta,.tiny-label,.eyebrow,.step,.live-label,.tab-caption,.voicing-strip>span small,.voicing-chip small,.formula span,.footer-tag,footer>span:last-child,.meter-labels small,.tuning-strings .choice small{font-size:.75rem}
.field-name,.quality-choices>.choice,.more-select select,.instrument-tabs>.choice,.instrument-options,.instrument-options select,.legend>span,.voicing-strip>span,.arpeggio,.intervals>div,.intervals strong,.formula b,.chord-mood p,.instrument-hint,.piano-caption,.explore-banner h3,.explore-banner p,.explore-banner button,.micro-detail,.privacy-note,.micro-tips p,.micro-toolbar,.micro-toolbar select,.note-pills button{font-size:.875rem}
.page-heading p{font-size:1rem}.instrument-options>span:first-child{max-width:none}.diagram-meta>span:last-child,.tablature,.chord-mood>.icon,.piano-key small,.fret-numbers,.fret-string,.fret-cell button,.harmony-chords small,.capo-result,.capo-result small{font-size:.75rem}
.theory-panel .eyebrow,.theory-panel h3{font-size:.75rem}.intervals>div{line-height:1.5}.intervals strong{flex-shrink:0}.chord-name sup{overflow-wrap:anywhere}.root-row,.quality-row{align-items:flex-start}.root-row{align-items:center}.quality-row .field-name{padding-top:7px}.root-choices>.choice{font-size:.875rem}.theory-panel{min-width:0}.instrument-options{flex-wrap:wrap}.legend{row-gap:9px}.quality-choices{row-gap:9px}.quality-row{min-height:83px}.playback{gap:12px}.volume{flex-shrink:0}.play-button{font-size:.875rem}.voicing-strip>span{max-width:125px}.sidebar nav .beta{font-size:.625rem}.field-name{width:135px}.instrument-tabs>.choice{padding-left:10px;padding-right:10px}.piano-key span{font-size:.875rem}.piano-keyboard{min-width:600px}.footer-tag,footer>span:last-child{font-size:.75rem}.micro-tips h3{font-size:1rem}.practice-note p{font-size:.875rem}.practice-note p span{font-size:.8rem}
@media(max-width:1200px){.field-name{width:122px}.instrument-options{gap:8px}.instrument-options>span:first-child{font-size:.75rem}.instrument-options label{font-size:.75rem}.playback{justify-content:flex-start;gap:12px}.volume{margin-left:auto}.play-button{font-size:.8rem}.instrument-tabs>.choice{font-size:.8rem;padding-left:8px;padding-right:8px}.voicing-strip>span{max-width:93px;font-size:.8rem}.intervals>div{font-size:.8rem}.workspace-label{font-size:.625rem}.sidebar-foot{font-size:.7rem}.quality-choices>.choice,.more-select select{font-size:.8rem}}
@media(max-width:980px){.root-row>.field-name{width:100%}.quality-row>.field-name{width:116px}.playback{justify-content:center}.page-heading .eyebrow{font-size:.7rem}.root-choices>.choice{font-size:.875rem}.theory-panel{padding:20px}.intervals>div{font-size:.78rem}.instrument-options select{font-size:.75rem}}
@media(max-width:760px){.root-row>.field-name{width:auto}.quality-row>.field-name{width:auto;padding:0}.theory-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.playback{justify-content:space-between}.instrument-tabs>.choice{font-size:.875rem}.voicing-strip>span{font-size:.875rem}.intervals>div{font-size:.8rem}.legend>span{font-size:.8rem}.explore-banner button{font-size:.875rem}.instrument-options>span:first-child{font-size:.8rem}}
@media(max-width:520px){.sidebar{gap:6px;padding:0 12px}.sidebar nav{gap:1px}.nav-item{padding:10px}.theme-control .choice:not(.selected){display:block}.theme-control .choice{padding:7px 4px}.theme-control .icon{width:14px;height:14px}.page-heading .eyebrow{font-size:.65rem;line-height:1.6;letter-spacing:.08em}.page-heading p{font-size:.875rem}.instrument-tabs>.choice{font-size:.8rem;padding:8px}.instrument-options>span:first-child{font-size:.75rem}.legend>span{font-size:.75rem}.theory-panel .eyebrow,.theory-panel h3{font-size:.75rem}.theory-panel{padding:19px;column-gap:15px}.intervals>div{font-size:.75rem;gap:5px}.intervals strong{font-size:.8rem}.interval-badge{width:22px;flex-shrink:0}.note-pills button{font-size:.8rem}.chord-mood p{font-size:.8rem}.formula span{font-size:.75rem}.formula b{font-size:.8rem}.voicing-strip>span{font-size:.75rem;max-width:86px}.tab-caption{font-size:.65rem}.play-button{font-size:.8rem}.arpeggio{font-size:.8rem}.instrument-hint{font-size:.75rem}.instrument-options select{max-width:150px}.tuning-strings .choice small{font-size:.65rem}.tuning-strings{gap:5px}.tuning-strings .choice{min-width:36px}.micro-toolbar>div{font-size:.75rem}.micro-toolbar select{font-size:.75rem}.privacy-note{font-size:.75rem}.micro-detail{font-size:.8rem}.tuning-strings>.choice{font-size:.75rem}}