:root{--marker-font-size:10px;--ui-font-size:calc(var(--marker-font-size)*1.4);font-size:var(--ui-font-size);color:#f1f1f1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;font-weight:400;line-height:1.5}body{background-color:#000;min-height:100vh;margin:0;display:block}a{color:#f1f1f1;text-decoration:none;transition:opacity .25s}a:hover{opacity:.7}button,select,input{font-family:inherit}*,:before,:after{box-sizing:border-box}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ui-font:clamp(.85rem,.95vw,1rem);--ui-label-font:clamp(.78rem,.85vw,1rem);--ui-select-padding-y:clamp(6px,.7vw,7px);--ui-select-padding-x:clamp(8px,.9vw,9px);--ui-select-radius:clamp(10px,1vw,12px);--ui-toggle-height:clamp(32px,3.2vw,36px);--ui-toggle-radius:var(--ui-select-radius);--ui-toggle-btn-height:calc(var(--ui-toggle-height) - 6px);--ui-toggle-btn-radius:calc(var(--ui-toggle-btn-height)/2);--ui-toggle-btn-icon-width:clamp(36px,3.6vw,42px);--ui-toggle-icon-size:clamp(14px,1.2vw,16px);--ui-toggle-text-minw:clamp(44px,4.4vw,52px);--ui-toggle-text-padding-x:var(--ui-select-padding-x);--ui-toggle-text-font:var(--ui-font);--ui-gap:clamp(6px,1vw,8px)}#root{width:100%;min-height:100vh}.app{color:#e8eaed;gap:16px;width:min(1400px,100%);margin:0 auto;padding:48px 32px 64px;display:grid}.app__header{text-align:left;gap:8px;display:grid}.app__header h1{letter-spacing:.08em;text-transform:uppercase;color:#f7f7f7;margin:0;font-size:clamp(2.5rem,5vw,3.75rem)}.app__subtitle{color:#ffffffa6;max-width:52ch;margin:0;font-size:.95rem}.panel{scrollbar-width:thin;background:#121212e0;border:1px solid #ffffff1a;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;width:100%;padding:14px 18px;display:flex;overflow-x:auto;box-shadow:0 24px 48px #00000059}.panel::-webkit-scrollbar{height:6px}.panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:999px}.control{font-size:var(--ui-font);color:#f1f1f1e6;grid-template-columns:auto auto;align-items:center;gap:6px 10px;min-width:0;display:grid}.control__label{letter-spacing:.04em;font-family:Segoe UI,system-ui,sans-serif;font-size:var(--ui-font);color:#ffffff9e}.control select{appearance:none;width:auto;min-width:0;padding:var(--ui-select-padding-y)var(--ui-select-padding-x);padding-right:calc(var(--ui-select-padding-x) + 10px);border-radius:var(--ui-select-radius);background:#212121f0 radial-gradient(circle,#ffffff73 2px,#0000 2px) 0 0/4px 4px no-repeat;background-position:right calc(var(--ui-select-padding-x) - 2px)center;color:#f5f7fa;font-size:var(--ui-font);letter-spacing:.02em;cursor:pointer;border:1px solid #ffffff2e;transition:border-color .25s,box-shadow .25s}.control select:focus{border-color:#fff6;outline:none;box-shadow:0 0 0 3px #ffffff1f}.stage{display:grid}.stage__frame{background:#121212eb;border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;gap:8px;padding:24px;display:flex;box-shadow:0 32px 72px #00000073}.stage__visualization{width:100%}.stage__visualization svg{filter:drop-shadow(0 0 18px #ffffff1a);width:100%;height:auto;display:block}.panel--footer{gap:var(--ui-gap)}.fretboard-container{flex-direction:column;width:100%;display:flex}.progression-legend{background:#1e1e1ecc;border:1px solid #ffffff1a;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:16px;padding:12px 16px;display:flex}.legend-chords{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.legend-chord{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;transition:all .2s;display:flex}.legend-chord:hover{background:#ffffff1a}.legend-chord--active{background:#ffffff26;border-color:#ffffff4d}.legend-chord--dimmed{opacity:.4}.legend-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.legend-numeral{color:#f5f7fa;font-size:.95rem;font-weight:600}.legend-name{color:#fff9;font-size:.85rem}.legend-arrow{color:#fff6;margin-left:4px;font-size:.9rem}.step-controls{align-items:center;gap:4px;display:flex}.step-btn{color:#f5f7fa;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:6px;padding:6px 12px;font-size:.85rem;transition:all .15s}.step-btn:hover{background:#ffffff26;border-color:#ffffff4d}.step-btn:active{background:#fff3}.step-btn--all{font-weight:500}.visual-toggle{border-radius:var(--ui-toggle-radius);height:var(--ui-toggle-height);background:#212121f0;border:1px solid #ffffff2e;gap:0;padding:2px;display:inline-flex}.visual-toggle__btn{width:var(--ui-toggle-btn-icon-width);height:var(--ui-toggle-btn-height);border-radius:var(--ui-toggle-btn-radius);cursor:pointer;color:#ffffff80;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:background .15s;display:flex}.visual-toggle__btn svg{width:var(--ui-toggle-icon-size);height:var(--ui-toggle-icon-size)}.visual-toggle__btn:hover{background:#ffffff14}.visual-toggle__btn:disabled{opacity:.45;cursor:not-allowed}.visual-toggle__btn:disabled:hover{background:0 0}.visual-toggle__btn--active{color:#ffffffd9;background:#ffffff26}.visual-toggle--text .visual-toggle__btn{width:auto;min-width:var(--ui-toggle-text-minw);padding:0 var(--ui-toggle-text-padding-x);font-size:var(--ui-toggle-text-font);letter-spacing:.02em;font-weight:600}.visual-toggle__btn:focus-visible{outline-offset:1px;outline:2px solid #fff6}@media (max-width:720px){.app{padding:32px 20px 48px}.panel{border-radius:14px;gap:10px 12px;padding:14px 16px}.control{grid-template-columns:1fr;gap:4px}.progression-legend{flex-direction:column;gap:12px}.legend-chords{gap:6px}.legend-chord{padding:4px 8px}.stage__frame{gap:6px;padding:16px}}.piano-container{flex-direction:column;width:100%;display:flex}.piano-keyboard{justify-content:center;width:100%;display:flex}.piano-keys{width:100%;height:var(--instrument-height,180px);box-sizing:border-box;border-top:1px solid #ffffff1f;display:flex;position:relative}.piano-white-keys{gap:2px;width:100%;height:100%;display:flex}.piano-black-keys{pointer-events:none;height:58%;position:absolute;top:0;left:0;right:0}.piano-key--white{z-index:0;background:linear-gradient(#dcdad5f2 0%,#c3c0bbe6 100%);border:1px solid #00000026;border-top-color:#ffffff4d;border-radius:0 0 6px 6px;flex:1 1 0;justify-content:center;align-items:flex-end;min-width:0;height:100%;padding-bottom:10px;transition:all .1s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff80,inset 0 -2px 4px #0000000a,0 2px 4px #00000026}.piano-key--white:hover{background:linear-gradient(#e6e4dff2 0%,#cdcac5e6 100%)}.piano-key--white.piano-key--active{border:2px solid var(--key-color,#64646466);box-shadow:inset 0 2px 0 #ffffffb3,inset 0 0 0 1px var(--key-color,#fff3),inset 0 0 18px color-mix(in srgb,var(--key-color,#888)45%,transparent),inset 0 0 40px color-mix(in srgb,var(--key-color,#888)22%,transparent),0 0 8px color-mix(in srgb,var(--key-color,#888)30%,transparent),0 2px 6px #00000026;background:linear-gradient(#f5f3eefa 0%,#e1ded9f2 100%)}.piano-key--white.piano-key--root{border:2px solid var(--key-color,#fffc);box-shadow:inset 0 2px 0 #fffc,inset 0 0 0 2px var(--key-color,#ffffff4d),inset 0 0 20px color-mix(in srgb,var(--key-color,#888)50%,transparent),inset 0 0 44px color-mix(in srgb,var(--key-color,#888)28%,transparent),0 0 14px color-mix(in srgb,var(--key-color,#fff)30%,transparent),0 2px 6px #0000001f;background:linear-gradient(#fffdfa 0%,#f0eee9fa 100%)}.piano-key--black{pointer-events:auto;z-index:2;background:linear-gradient(#2a2a2a 0%,#1a1a1a 40%,#111 100%);border:1px solid #ffffff0f;border-top:none;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;width:4.5%;height:100%;padding-bottom:8px;transition:all .1s;display:flex;position:absolute;box-shadow:inset 0 1px #ffffff14,inset -1px 0 #ffffff0a,inset 1px 0 #ffffff0a,0 3px 6px #0006}.piano-key--black:hover{background:linear-gradient(#333 0%,#222 40%,#181818 100%)}.piano-key--black.piano-key--active{border:2px solid var(--key-color,#ffffff80);box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 14px color-mix(in srgb,var(--key-color,#666)55%,transparent),inset 0 0 32px color-mix(in srgb,var(--key-color,#666)30%,transparent),0 0 6px color-mix(in srgb,var(--key-color,#666)25%,transparent),0 3px 6px #00000080;background:linear-gradient(#121212fa 0%,#080808fa 40%,#000000fa 100%)}.piano-key--black.piano-key--root{border:2px solid var(--key-color,#ffffffb3);box-shadow:inset 0 1px 0 #ffffff1a,inset 0 0 16px color-mix(in srgb,var(--key-color,#666)60%,transparent),inset 0 0 36px color-mix(in srgb,var(--key-color,#666)35%,transparent),0 0 10px color-mix(in srgb,var(--key-color,#fff)25%,transparent),0 3px 6px #00000080;background:linear-gradient(#0e0e0e 0%,#040404 40%,#000 100%)}[data-color-mode=mono] .piano-key--white{background:linear-gradient(#9a9a9a 0%,#757575 100%);border:1px solid #0000008c;border-top-color:#ffffff29;box-shadow:inset 0 1px #ffffff29,inset 0 -2px 4px #00000038,0 2px 5px #0000006b}[data-color-mode=mono] .piano-key--white.piano-key--active{background:linear-gradient(#d2d2d2 0%,#b8b8b8 100%);box-shadow:inset 0 0 0 2px #ffffffeb,0 6px 14px #ffffff42,inset 0 1px #ffffff38,inset 0 -2px 4px #0000002e,0 2px 6px #00000061}[data-color-mode=mono] .piano-key--white.piano-key--root{background:linear-gradient(#e1e1e1 0%,#c9c9c9 100%);box-shadow:inset 0 0 0 3px #fffffffa,0 6px 18px #ffffff52,0 10px 30px #ffffff1f,inset 0 1px #ffffff3d,inset 0 -2px 4px #00000029,0 2px 6px #00000061}[data-color-mode=mono] .piano-key--black.piano-key--active{background:linear-gradient(#3a3a3a 0%,#222 40%,#151515 100%);border:1px solid #0000;border-top:none;box-shadow:inset 0 0 0 2px #ffffffeb,0 6px 14px #ffffff38,inset 0 1px #ffffff1a,inset -1px 0 #ffffff0d,inset 1px 0 #ffffff0d,0 3px 6px #00000073}[data-color-mode=mono] .piano-key--black.piano-key--root{background:linear-gradient(#464646 0%,#2a2a2a 40%,#1b1b1b 100%);border:1px solid #0000;border-top:none;box-shadow:inset 0 0 0 3px #fffffffa,0 6px 18px #ffffff47,0 10px 30px #ffffff1a,inset 0 1px #ffffff1a,inset -1px 0 #ffffff0d,inset 1px 0 #ffffff0d,0 3px 6px #00000073}[data-color-mode=mono] .piano-key--active .piano-key__label{font-weight:600}[data-color-mode=mono] .piano-key--black.piano-key--active .piano-key__label{color:#ffffffe6}.piano-key--black[data-note=C\#][data-octave="3"]{left:4.417%}.piano-key--black[data-note=D\#][data-octave="3"]{left:11.084%}.piano-key--black[data-note=F\#][data-octave="3"]{left:24.418%}.piano-key--black[data-note=G\#][data-octave="3"]{left:31.085%}.piano-key--black[data-note=A\#][data-octave="3"]{left:37.752%}.piano-key--black[data-note=C\#][data-octave="4"]{left:51.086%}.piano-key--black[data-note=D\#][data-octave="4"]{left:57.753%}.piano-key--black[data-note=F\#][data-octave="4"]{left:71.087%}.piano-key--black[data-note=G\#][data-octave="4"]{left:77.754%}.piano-key--black[data-note=A\#][data-octave="4"]{left:84.421%}.piano-key__label{letter-spacing:.02em;color:#1e1e1eb3;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px #ffffff4d;font-size:9px;font-weight:500;position:relative}.piano-key--active .piano-key__label{color:#141414d9;font-weight:600}.piano-key--black .piano-key__label{color:#ffffff73;text-shadow:none;font-size:8px}.piano-key--black.piano-key--active .piano-key__label{color:#fffc}.piano-key--faded{pointer-events:none}.piano-key--faded .piano-key__label{opacity:0}.piano-key--black.piano-key--faded{opacity:.16}.piano-key--white.piano-key--faded{opacity:1;background:linear-gradient(#ffffff24 0%,#ffffff05 100%);border:1px solid #ffffff0f;box-shadow:inset 0 1px #ffffff1f}@media (max-width:720px){.piano-key__label{font-size:7px}.piano-key--black .piano-key__label{font-size:6px}.piano-key--white{border-radius:0 0 5px 5px;padding-bottom:8px}.piano-key--black{border-radius:0 0 3px 3px;padding-bottom:6px}}.metronome{height:var(--ui-toggle-height);border-radius:var(--ui-toggle-radius);background:#212121f0;border:1px solid #ffffff2e;align-items:center;padding:0;display:inline-flex;overflow:hidden}.metronome__play{width:var(--ui-toggle-btn-icon-width);color:#fff9;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;height:100%;padding:0;transition:background .15s,color .15s;display:flex}.metronome__play:hover{color:#ffffffe6;background:#ffffff14}.metronome__play--active{color:#fff;background:#ffffff26}.metronome__play svg{width:var(--ui-toggle-icon-size);height:var(--ui-toggle-icon-size)}.metronome__divider{background:#ffffff26;flex-shrink:0;width:1px;height:60%}.metronome__bpm-input{appearance:textfield;color:#f5f7fa;width:3.4em;height:100%;font-size:var(--ui-font);letter-spacing:.02em;text-align:center;background:0 0;border:none;padding:0 2px;font-weight:600}.metronome__bpm-input::-webkit-inner-spin-button{display:none}.metronome__bpm-input::-webkit-outer-spin-button{display:none}.metronome__bpm-input:focus{background:#ffffff0f;outline:none}.metronome__arrows{border-left:1px solid #ffffff1f;flex-direction:column;height:100%;display:flex}.metronome__arrow{color:#ffffff73;cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;width:22px;padding:0;transition:background .12s,color .12s;display:flex}.metronome__arrow:hover{color:#ffffffd9;background:#ffffff1a}.metronome__arrow:active{background:#ffffff2e}.metronome__arrow+.metronome__arrow{border-top:1px solid #ffffff1a}.metronome__arrow svg{width:8px;height:5px}