@font-face{font-family:Manrope;src:url('../assets/editorial/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('../assets/editorial/manrope-bold.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{color-scheme:dark;--bg:#10141a;--surface:#191f29;--raised:#202837;--ink:#f2f4f7;--muted:#bbc5d4;--line:#354154;--blue:#243ac2;--green:#a8e65b;--danger:#ff9b94;--ease:cubic-bezier(.22,.61,.36,1);font-family:Manrope,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button,input,select{max-width:100%}button{color:inherit}p,h1,h2,h3{margin:0}p{max-width:65ch;text-wrap:pretty}h1,h2,h3{text-wrap:balance;line-height:1.13;letter-spacing:-.035em}h1{font-size:3.5rem}h2{font-size:1.6rem}h3{font-size:1.3rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:4px}::selection{color:var(--bg);background:var(--green)}.skip{position:absolute;left:20px;top:-100px;background:var(--green);color:var(--bg);padding:12px;z-index:3}.skip:focus{top:15px}header,main,footer{width:min(1160px,calc(100% - 64px));margin:auto}header{height:92px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{font-weight:700;font-size:1.4rem;letter-spacing:-.04em}.brand span{color:var(--green)}.back{font-size:.78rem;color:var(--muted);padding:12px 0}.intro{padding:55px 0 35px;display:grid;grid-template-columns:1fr 1fr;gap:10px 45px;align-items:end}.intro>p:first-child{font-size:.85rem;color:var(--green);grid-column:1/-1}.intro h1{max-width:17ch}.intro-copy{font-size:.94rem;color:var(--muted);padding-bottom:5px;max-width:43ch}.tool-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:28px}.tool-tabs a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 24px;border:1px solid transparent;border-radius:4px;color:var(--muted);font-size:.86rem;font-weight:700}.tool-tabs a:hover{background:var(--surface);color:var(--ink)}.tool-tabs a[aria-selected=true]{background:var(--green);color:var(--bg)}.tool-panel{padding:30px 34px 38px;background:var(--surface);border:1px solid var(--line);border-radius:5px;margin-bottom:30px;scroll-margin-top:20px}.tool-panel[hidden]{display:none}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:30px}.panel-heading p{font-size:.8rem;color:var(--muted);margin-top:9px}.utility-label{color:var(--muted);font-size:.75rem;padding-top:6px}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:20px;min-height:48px;padding:12px 22px;font-size:.83rem;font-weight:700;border-radius:3px;border:1px solid transparent;text-align:center;transition:background .2s var(--ease)}.primary{background:var(--green);color:var(--bg)}.primary:hover{background:#baf47a}.secondary{background:transparent;border-color:#75839a;color:var(--ink)}.secondary:hover{background:var(--raised)}.hint,.privacy{color:var(--muted);font-size:.76rem;line-height:1.65}.privacy{padding-top:15px;border-top:1px solid var(--line);font-size:.7rem}.notice{padding:18px;border:1px solid var(--line);margin-top:24px}.tuner-layout,.metro-layout,.chord-layout{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.tuner-display{text-align:center;min-width:0}.tuner-note{font-size:6rem;font-weight:700;line-height:1.05;color:var(--green);letter-spacing:-.04em}.tuner-note>span{font-size:2rem;color:var(--muted);vertical-align:top;display:inline-block;margin-top:10px;margin-left:3px}.frequency{color:var(--muted);margin-top:8px;font-size:.8rem}.tuning-meter{display:flex;align-items:center;gap:12px;margin:27px auto 15px;width:100%;max-width:350px;font-size:.65rem;color:var(--muted)}.meter-track{position:relative;flex:1;height:36px;border-block:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),var(--line) 10%)}.meter-center{position:absolute;left:50%;height:100%;width:2px;background:var(--green)}.meter-needle{position:absolute;height:44px;top:-4px;left:50%;width:4px;background:var(--ink);transform:translateX(-50%);transition:left .15s}.tuning-state{font-size:.8rem;min-height:48px;color:var(--muted);margin:auto;max-width:38ch}.tuner-controls>*+*{margin-top:16px}.control-label{font-size:.75rem;color:var(--muted)}.string-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.string-buttons button{background:var(--bg);border:1px solid var(--line);border-radius:3px;min-height:67px;font-size:.68rem;color:var(--muted)}.string-buttons button span{display:block;font-size:.94rem;color:var(--ink);font-weight:700;margin-top:4px}.string-buttons button[aria-pressed=true]{border-color:var(--green);background:#293723}.string-buttons button[aria-pressed=true] span{color:var(--green)}.tuner-controls>.primary,.tuner-controls>.secondary{width:100%}.tuner-controls>.secondary[aria-pressed=true]{border-color:var(--green);color:var(--green)}label:not(.sr-only){font-size:.8rem;font-weight:700;display:block;margin-bottom:9px}select,input[type=number]{background:var(--bg);border:1px solid var(--line);border-radius:3px;color:var(--ink);min-height:46px;padding:10px 12px}select{width:100%;padding-right:25px}input[type=range]{width:100%;accent-color:var(--green);min-height:34px;cursor:pointer}.bpm-readout{text-align:center}.bpm-readout>label{font-size:.75rem;color:var(--muted)}.bpm-readout>div{display:flex;align-items:baseline;justify-content:center;gap:8px}.bpm-readout input{width:145px;font-size:4.6rem;text-align:center;border:0;padding:0;background:none;line-height:1.2;font-weight:700;appearance:textfield;-moz-appearance:textfield}.bpm-readout input::-webkit-inner-spin-button{appearance:none}.bpm-readout span{font-size:.75rem;color:var(--muted)}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem}.beats{display:flex;justify-content:center;gap:12px;margin:28px 0}.beats i{display:block;width:18px;height:18px;border:1px solid #8390a4;border-radius:50%}.beats i.active{background:var(--green);border-color:var(--green)}.metro-main>.primary{width:100%}.metro-state{text-align:center;margin-top:15px;min-height:22px}.metro-options>label:not(:first-child){margin-top:25px}.metro-options>.secondary{width:100%;margin:24px 0 12px}.check{display:flex!important;align-items:center;gap:11px;line-height:1.5}.check input{accent-color:var(--green);width:18px;height:18px;flex:0 0 18px}.check span{font-size:.78rem;font-weight:400}.chord-select>select{margin-bottom:23px}.diagram-key{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}.diagram-key span{font-size:.68rem;color:var(--muted);white-space:nowrap}.diagram-key b{color:var(--green);margin-right:6px;font-size:.85rem}.chord-view{min-width:0;text-align:center}.chord-caption h3{font-size:1.8rem}.chord-caption p{font-size:.77rem;color:var(--muted);margin-top:10px}.chord-view svg{max-width:285px;width:100%;height:auto;display:block;margin:16px auto}.chord-view>.hint{margin:auto;max-width:35ch}.scale-options{display:flex;align-items:flex-end;gap:22px;margin-bottom:26px;flex-wrap:wrap}.scale-options>div{flex:1;min-width:170px}.scale-options .check{margin:0 0 10px;min-height:28px}.scale-caption{margin-bottom:20px}.scale-caption p{font-size:.83rem;color:var(--muted);margin-top:9px}.fretboard-scroll{max-width:100%;overflow-x:auto;padding:8px 0;border:1px solid var(--line);border-radius:3px;background:var(--bg);scrollbar-color:var(--green) var(--bg);scrollbar-width:thin}.fretboard-scroll svg{display:block;width:100%;min-width:720px;height:auto}.fretboard-hint{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:18px;margin-bottom:12px}.root-dot,.note-dot{width:11px;height:11px;border-radius:50%;background:var(--green);display:inline-block}.note-dot{background:#596fe4;margin-left:10px}.mobile-scroll-hint{margin-left:auto;font-size:.7rem}.next-step{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px 0 55px}.next-step h2{font-size:1.5rem}.next-step p{font-size:.85rem;color:var(--muted);margin-top:10px}.link-button{flex-shrink:0}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0 35px;color:var(--muted);font-size:.73rem}.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(max-width:900px){.intro{gap:20px 30px}.intro h1{font-size:2.8rem}.tool-panel{padding:27px}.tuner-layout,.metro-layout,.chord-layout{gap:30px}.utility-label{display:none}.tuner-note{font-size:5rem}.bpm-readout input{font-size:4rem}.scale-options>div{min-width:150px}.degree-toggle{width:100%}.mobile-scroll-hint{margin-left:0;width:100%}}
@media(max-width:599px){header,main,footer{width:calc(100% - 32px)}header{height:76px;gap:10px}.brand{font-size:1.2rem}.back{font-size:.7rem}.intro{display:block;padding:35px 0 27px}.intro h1{font-size:2.5rem;margin:13px 0 19px;max-width:15ch}.intro-copy{font-size:.85rem}.tool-tabs{gap:4px;display:grid;grid-template-columns:1fr 1fr}.tool-tabs a{padding:10px 12px;font-size:.78rem}.tool-panel{padding:23px 18px 28px}.panel-heading{padding-bottom:20px;margin-bottom:25px}.panel-heading h2{font-size:1.45rem}.panel-heading p{font-size:.74rem}.tuner-layout,.metro-layout,.chord-layout{grid-template-columns:minmax(0,1fr);gap:30px}.tuner-note{font-size:5.5rem}.tuner-display{padding:7px 0}.tuning-state{min-height:27px}.tuning-meter{margin-top:20px}.tuner-controls>*+*{margin-top:15px}.privacy{font-size:.68rem}.string-buttons button{min-height:60px}.metro-options{padding-top:25px;border-top:1px solid var(--line)}.chord-layout{display:flex;flex-direction:column-reverse;gap:27px;align-items:stretch}.chord-view svg{max-width:220px;margin-block:6px}.chord-caption h3{font-size:1.6rem}.chord-select{padding-top:25px;border-top:1px solid var(--line)}.scale-options{gap:16px}.scale-options>div{min-width:100%;flex-basis:100%}.scale-caption h3{font-size:1.3rem}.scale-caption p{font-size:.77rem}.next-step{display:block;padding:10px 0 35px}.next-step h2{font-size:1.4rem}.next-step .link-button{width:100%;margin-top:20px}footer{display:block;font-size:.7rem}footer a{display:inline-block;padding:12px 0}.intro-copy{max-width:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}