: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;--body-red: #151515}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 14% 16%,rgba(255,255,255,.06),transparent 34%),linear-gradient(180deg,#111,#050505);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}.app-shell{min-height:100vh;padding:16px}.stage{width:min(1420px,100%);margin:0 auto;display:grid;gap:10px}.stage-copy{max-width:760px;padding:2px 4px 0}.eyebrow,.panel-kicker{display:inline-flex;color:#ffd36f;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}h1{margin:4px 0 5px;font-size:clamp(30px,4.6vw,54px);line-height:.96;letter-spacing:0}p{margin:0}.stage-copy p{max-width:660px;color:var(--muted);font-size:14px;line-height:1.45}.fretboard-card{position:relative;min-height:520px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle at 13% 28%,rgba(255,255,255,.1),transparent 24%),radial-gradient(circle at 89% 70%,rgba(255,255,255,.08),transparent 26%),linear-gradient(135deg,#111,#070707 52%,#141414);box-shadow:0 32px 90px #0000006b}.guitar-body{position:absolute;background:linear-gradient(135deg,#5b0a0f,#b51e29 48%,#32070a);background:linear-gradient(135deg,#0b0b0b,#2b2b2b 48%,#050505);filter:saturate(1.14);box-shadow:inset -24px -18px 42px #00000047,0 22px 70px #00000059}.guitar-body-left{left:-120px;top:82px;width:350px;height:360px;border-radius:55% 18% 50%;transform:rotate(-12deg)}.guitar-body-right{right:-190px;bottom:-44px;width:360px;height:250px;border-radius:22% 60% 18% 54%;transform:rotate(9deg);opacity:.72}.display-panel{position:absolute;z-index:6;top:18px;right:18px;width:min(380px,calc(100% - 52px));padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#0a0a0ac7;backdrop-filter:blur(16px)}.display-panel h2{margin:4px 0 6px;font-size:20px}.display-panel p{color:#cfcfcf;font-size:13px;line-height:1.45}.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:10px;color:#d6d6d6;font-size:11px}.control-grid{display:grid;gap:8px;margin-top:10px}.control{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:8px;color:#bdbdbd;font-size:11px;font-weight:800}.pill-row{display:flex;flex-wrap:wrap;gap:4px}.pill{min-height:24px;padding:3px 7px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:#ffffff14;color:var(--text);cursor:pointer;font-size:11px;line-height:1}.pill.active{background:#f2f2f2;color:#111;border-color:#f2f2f2}.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:50%;vertical-align:-1px}.tone-root,.tone.tone-root{background:#f2d36b}.tone-third,.tone.tone-third{background:#70a7d8}.tone-fifth,.tone.tone-fifth{background:#8abf7a}.tone-seventh,.tone.tone-seventh{background:#c986ad}.tone-scale,.tone.tone-scale{background:#ead9af}.tone-path,.tone.tone-path{background:#c78a45}.fretboard-wrap{position:absolute;z-index:4;left:clamp(18px,4vw,70px);right:clamp(18px,4vw,70px);bottom:54px}.fretboard{position:relative;height:288px;overflow:hidden;border:4px solid #3f2716;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.4),transparent 12%,rgba(108,57,17,.22) 35%,transparent 52%,rgba(255,255,255,.24) 68%,rgba(111,58,17,.26)),linear-gradient(90deg,var(--maple-1),#f9e5b5 18%,var(--maple-2) 42%,var(--maple-3) 67%,#c68136 100%);box-shadow:inset 0 4px 8px #ffffff59,inset 0 -14px 30px #532b0e47,0 24px 52px #00000075}.fretboard-overlay{position:absolute;z-index:9;top:10px;left:auto;right:12px;transform:none;min-width:0;max-width:280px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:#ffffff8a;color:#111;text-align:right;backdrop-filter:blur(8px);box-shadow:0 12px 28px #4026102e}.fretboard-overlay strong,.fretboard-overlay span{display:block}.fretboard-overlay strong{font-size:16px}.fretboard-overlay span{margin-top:3px;font-size:11px;color:#000000ad}.wood-grain{position:absolute;inset:0;background:repeating-linear-gradient(101deg,rgba(111,63,20,.18) 0 2px,transparent 2px 18px),repeating-linear-gradient(86deg,rgba(255,255,255,.12) 0 1px,transparent 1px 28px);pointer-events:none}.fret-numbers{position:absolute;z-index:5;top:8px;left:0;right:0;display:grid;grid-template-columns:repeat(24,1fr);color:#341e0cb3;font-size:11px;font-weight:900;text-align:center}.fret-lines{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(25,1fr)}.fret-lines span{width:4px;background:linear-gradient(90deg,#80643f,#fff7df 46%,#7d5c36);box-shadow:2px 0 5px #41271273}.fret-lines .nut{width:11px;background:linear-gradient(90deg,#e7dcc3,#fff8e8,#b7aa8c)}.strings{position:absolute;z-index:3;inset:52px 0 38px;display:grid;grid-template-rows:repeat(6,1fr)}.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:#321b0bb8;font-size:11px}.markers{position:absolute;inset:0;z-index:1}.markers span{position:absolute;left:calc((var(--fret) - .5) / 24 * 100%);top:50%;width:17px;height:17px;border-radius:50%;background:#1e1712;transform:translate(-50%,-50%);box-shadow:inset 0 2px 3px #ffffff2e}.markers .double.one{top:38%}.markers .double.two{top:62%}.shape-bands{position:absolute;z-index:4;inset:38px 0 8px;pointer-events:none}.shape-band{position:absolute;top:0;bottom:28px;display:flex;align-items:end;justify-content:center;padding:8px 6px;border-radius:7px;color:#ffffffeb;font-weight:900;font-size:12px;text-align:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(1px)}.shape-band b{position:absolute;left:50%;bottom:-25px;transform:translate(-50%);display:inline-block;padding:2px 7px;border-radius:999px;background:#0000009e;color:#ffffffe6;white-space:nowrap;font-size:11px}.band-red{background:#b4b4b42e}.band-blue{background:#78787829}.band-green{background:#d2d2d229}.band-purple{background:#96969624}.band-gold{background:#ebebeb24}.tone-layer{position:absolute;z-index:8;inset:52px 0 38px}.tone{--tone-pad: 14px;position:absolute;display:grid;place-items:center;left:clamp(var(--tone-pad),var(--x),calc(100% - var(--tone-pad)));top:clamp(var(--tone-pad),var(--y),calc(100% - var(--tone-pad)));width:28px;height:28px;border:2px solid rgba(44,27,13,.72);border-radius:50%;color:#22150b;font-size:12px;font-weight:1000;transform:translate(-50%,-50%);transition:left .22s ease,top .22s ease,transform .22s ease,opacity .18s ease;box-shadow:0 3px 8px #25160947}.tone-scale{--tone-pad: 10px;width:20px;height:20px;font-size:10px;opacity:.8}.tone-path{--tone-pad: 19px;width:38px;height:38px;padding:0;border-radius:50%;font-size:10px}.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;background:#121212e6;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{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#121212d6;color:var(--muted);font-size:13px;line-height:1.35}.result-strip strong{color:var(--text);white-space:nowrap}@media(max-width:900px){.app-shell{padding:10px}.fretboard-card{min-height:640px}.display-panel{left:10px;right:10px;top:10px;width:auto}.fretboard-wrap{left:10px;right:10px;bottom:36px;overflow-x:auto}.fretboard{min-width:900px}.mode-switcher{grid-template-columns:repeat(2,1fr)}.result-strip{display:block}.result-strip span{display:block;margin-top:6px}}@media(max-width:560px){h1{font-size:30px}.stage-copy p,.display-panel p,.mode-button span{display:none}.legend{grid-template-columns:repeat(3,1fr)}.control{grid-template-columns:36px 1fr}.fretboard-card{min-height:570px}.fretboard{min-width:820px;height:240px}.mode-button{min-height:46px;padding:8px}.mode-button strong{font-size:13px}}