:root{color-scheme:dark;--bg: #080808;--text: #f5f5f5;--muted: #b9b9b9;--line: rgba(255, 255, 255, .16);--maple-1: #f7dda2;--maple-2: #d99c48;--maple-3: #f0c573;--pure-red: #ff0000;--pure-blue: #0057ff;--pure-green: #00c853;--pure-yellow: #ffd600;--pure-orange: #ff7a00;--pure-pink: #ff2bb5}*{box-sizing:border-box}body{position:relative;margin:0;min-width:320px;background:#000;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body:before{content:"";position:fixed;z-index:0;inset:0;background-image:linear-gradient(180deg,#00000014,#0000005c),url(/images/page-background.png);background-repeat:no-repeat;background-position:center top,center top;background-size:cover,cover;transform-origin:center center;pointer-events:none}button{font:inherit}.slide-cue{position:fixed;z-index:30;left:50%;top:50%;display:grid;place-items:center;width:min(18vw,148px);min-width:84px;aspect-ratio:1 / 1.28;opacity:.62;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .38s ease,transform .38s ease;animation:slideCueFloat 1.8s ease-in-out infinite}.slide-cue.is-hidden{animation:none;opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(.96)}.slide-arrow{position:relative;display:grid;place-items:center;width:100%;height:100%;padding-top:9%;color:#ffffffd1;font-family:Georgia,Times New Roman,serif;font-size:clamp(22px,4vw,42px);font-weight:900;line-height:.74;letter-spacing:-.12em;text-shadow:0 1px 0 rgba(255,255,255,.42),0 6px 14px rgba(0,0,0,.24),0 0 12px rgba(255,255,255,.18)}.slide-arrow:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(145deg,#ffffffd1,#ffffff57);clip-path:polygon(50% 0,96% 36%,78% 36%,69% 100%,31% 100%,22% 36%,4% 36%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.24));opacity:.34}@keyframes slideCueFloat{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}.app-shell{position:relative;z-index:1;min-height:100vh;padding:573px 10px 10px}.stage{width:min(1500px,100%);margin:0 auto;display:grid;gap:8px}.panel-kicker{display:inline-flex;color:#ffd36f;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}h1{margin:2px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:0}p{margin:0}.fretboard-card{position:relative;aspect-ratio:1717 / 840;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 46px),linear-gradient(135deg,#111,#070707 52%,#141414);box-shadow:0 24px 80px #00000080}.help-button{position:absolute;z-index:18;top:7px;right:7px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:#0808089e;color:#f5f5f5;cursor:pointer;font-size:14px;font-weight:900;line-height:1;backdrop-filter:blur(14px)}.help-button:hover,.help-button[aria-expanded=true]{background:#ffffff1f}.help-popover{position:absolute;z-index:17;top:38px;right:7px;width:min(280px,calc(100% - 24px));padding:10px 12px;border:1px solid rgba(255,255,255,.15);background:#0a0a0ad1;color:#ebebeb;backdrop-filter:blur(18px);box-shadow:0 18px 40px #00000057}.help-popover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.help-popover strong{display:block;color:#fff2bb;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.help-language-toggle{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#ffffff0f}.help-language-button{min-width:28px;height:20px;padding:0 7px;border:0;border-radius:999px;background:transparent;color:#ffffffa8;cursor:pointer;font-size:10px;font-weight:800;line-height:1}.help-language-button.is-active{background:#ffffff2e;color:#fff}.help-popover p+p{margin-top:7px}.help-popover p{color:#ffffffd1;font-size:12px;line-height:1.4}.guitar-stage{position:absolute;z-index:3;inset:0;transform-origin:50% 50%;transition:transform .26s ease}.sg-photo{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;filter:saturate(1.04) contrast(1.04) brightness(.86);pointer-events:none}.sg-photo{transform:rotate(180deg)}.fretboard-card:after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 28%,rgba(0,0,0,.18) 100%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%,rgba(0,0,0,.44));pointer-events:none}.fretboard-card.view-neck .guitar-stage{transform:translate(22%,16%) scale(2.08)}.display-panel{position:absolute;z-index:12;top:12px;right:12px;width:min(320px,calc(100% - 230px));padding:7px 42px 7px 7px;opacity:.68;border:1px solid rgba(255,255,255,.14);border-radius:0;background:#0a0a0a7a;backdrop-filter:blur(16px)}.display-panel h2{margin:2px 0 0;font-size:14px;line-height:1.1}.display-panel>p{display:none;color:#cfcfcf;font-size:13px;line-height:1.45}.control-grid{display:grid;gap:5px;margin-top:6px}.control{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:5px;color:#bdbdbd;font-size:10px;font-weight:800}.pill-row{display:flex;flex-wrap:wrap;gap:3px}.pill{min-height:19px;padding:2px 5px;border:1px solid rgba(255,255,255,.2);border-radius:0;background:#ffffff14;color:var(--text);cursor:pointer;font-size:10px;line-height:1}.pill.active{background:#f2f2f2;color:#111;border-color:#f2f2f2}.color-token{font-weight:900}.token-red{color:var(--pure-red)}.token-blue{color:var(--pure-blue)}.token-green{color:var(--pure-green)}.token-yellow{color:var(--pure-yellow)}.token-orange{color:var(--pure-orange)}.token-pink{color:var(--pure-pink)}.tone-root{background:var(--pure-red)}.tone-third{background:var(--pure-yellow)}.tone-fifth{background:var(--pure-blue)}.tone-seventh{background:var(--pure-green)}.tone-scale{background:var(--pure-yellow)}.tone-path,.tone.tone-chord-red{background:var(--pure-red)}.tone.tone-chord-blue{background:var(--pure-blue)}.tone.tone-chord-green{background:var(--pure-green)}.tone.tone-chord-yellow{background:var(--pure-yellow)}.tone.tone-chord-orange{background:var(--pure-orange)}.tone.tone-chord-pink{background:var(--pure-pink)}.tone.tone-root-only{background:var(--pure-red)}.tone.tone-scale-only{background:var(--pure-blue)}.fretboard-wrap{position:absolute;z-index:8;inset:32.4% auto auto 17.82%;width:47.12%;height:10.3%;overflow:visible}.fretboard{position:relative;height:100%;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}.fret-cells{position:absolute;z-index:5;inset:18% 0 16%;pointer-events:none}.fret-cell{position:absolute;border:0;opacity:0}.fret-cell i{display:block;width:100%;height:100%;font-size:0}.wood-grain{position:absolute;inset:0;background:transparent;pointer-events:none}.fret-lines{position:absolute;inset:0;z-index:2}.fret-lines span{position:absolute;top:0;bottom:0;width:4px;background:#ffffff14;box-shadow:none;transform:translate(-50%)}.fret-lines .nut{width:11px;background:#ffffff1a}.strings{position:absolute;z-index:3;inset:18% 0 16%;display:grid;grid-template-rows:repeat(6,1fr);opacity:0}.string{position:relative;align-self:center;height:2px;background:linear-gradient(90deg,#b8afa2,#fff 16%,#a69c8d 52%,#f9f7ef 82%,#a49b8d);box-shadow:0 2px 5px #24140a73}.string:nth-child(5),.string:nth-child(6){height:3px}.string b{position:absolute;left:8px;top:-14px;color:#ffffff8a;font-size:11px}.tone-layer{position:absolute;z-index:8;inset:18% 0 16%}.tone{position:absolute;display:grid;place-items:center;left:var(--x);top:var(--y);width:2.25px;height:2.25px;border:0;border-radius:50%;color:#161616;font-size:0;font-weight:800;transform:translate(-50%,-50%);transition:left .22s ease,top .22s ease,transform .22s ease,opacity .18s ease;filter:saturate(1.2) contrast(1.25);box-shadow:0 0 0 .75px #000000e6}.tone-scale{width:2.25px;height:2.25px;font-size:0;opacity:1}.tone-path{--tone-pad: 5px;width:3px;height:3px;padding:0;border-radius:50%;gap:0;font-size:0;line-height:1}.tone-split{width:3px;height:3px;filter:saturate(1.25) contrast(1.35);box-shadow:0 0 0 .75px #000000f2}.tone-split-3{width:3.25px;height:3.25px}.mode-switcher{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mode-button{min-height:58px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;opacity:.76;background:#12121285;color:var(--text);text-align:left;cursor:pointer}.mode-button strong,.mode-button span{display:block}.mode-button strong{font-size:14px}.mode-button span{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.2}.mode-button.active{border-color:#ffffffb8;background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff29}.result-strip{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;opacity:.76;background:#12121280;color:var(--muted);font-size:13px;line-height:1.35;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}.result-strip:before,.result-strip:after{content:"";position:sticky;top:0;bottom:0;width:22px;flex:0 0 22px;pointer-events:none;z-index:1}.result-strip:before{left:-18px;margin-right:-22px;background:linear-gradient(90deg,#121212eb,#12121200)}.result-strip:after{right:-18px;margin-left:-22px;background:linear-gradient(270deg,#121212eb,#12121200)}.form-breakdown{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%}.form-card{min-width:0;padding:6px;border:1px solid rgba(255,255,255,.13);background:#ffffff0d}.form-card strong{display:block;font-size:12px;font-weight:950}.form-card-red{border-color:#ff00007a}.form-card-blue{border-color:#0057ff7a}.form-card-green{border-color:#00c8537a}.form-card-yellow{border-color:#ffd6007a}.form-card-orange{border-color:#ff7a007a}.result-strip strong{color:var(--text);white-space:nowrap;flex:0 0 auto}.result-strip span{white-space:nowrap;flex:0 0 auto}@media(max-width:900px){.app-shell{padding:573px 10px 10px}.fretboard-card{aspect-ratio:auto;min-height:520px}.guitar-stage{inset:auto 0 16px;aspect-ratio:1717 / 840}.display-panel{left:10px;right:10px;top:88px;width:auto}.help-popover{width:min(260px,calc(100% - 20px));right:10px}.fretboard-card.view-neck .guitar-stage{transform:translate(22%,16%) scale(2.08)}.fretboard-wrap{left:17.82%;right:auto;top:32.4%;width:47.12%;height:10.3%}.fretboard{width:100%;min-width:0}.mode-switcher{grid-template-columns:repeat(2,1fr)}.form-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){h1{font-size:30px}.slide-cue{width:min(34vw,148px);min-width:92px}.display-panel>p,.mode-button span{display:none}.help-button{top:8px;right:8px}.help-popover{top:40px;right:8px;padding:9px 10px}.control{grid-template-columns:36px 1fr}.fretboard-card,.fretboard-card.view-neck{min-height:350px}.fretboard-card.view-neck .guitar-stage{bottom:16px;transform:translate(19%,13%) scale(2.1)}.display-panel{top:12px}.tone{width:1.5px;height:1.5px;box-shadow:0 0 0 .5px #000000e6}.tone-scale{width:1.125px;height:1.125px}.tone-path{width:1.5px;height:1.5px}.tone-split{width:2px;height:2px}.tone-split-3{width:2.25px;height:2.25px}.fretboard{width:100%;min-width:0;height:100%}.mode-button{min-height:46px;padding:8px}.mode-button strong{font-size:13px}}