:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#10151a;color:#f4f1e8;--bg: #10151a;--panel: #151b20;--panel-2: #1b2228;--panel-3: #222b32;--border: #35404a;--text: #f4f1e8;--muted: #9ea8ad;--subtle: #6f7b82;--blue: #1688e8;--cyan: #39bdf8;--amber: #f5a623;--coral: #ff6b3d;--seafoam: #53d6b3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(145deg,#10151af5,#121c22fa),radial-gradient(circle at 88% 12%,rgb(22 136 232 / 14%),transparent 26%),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.app-shell{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:20px}.topbar,.control-surface,.instrument-panel,.related-panel,.details-strip,.caged-section,.triad-section{border:1px solid rgb(53 64 74 / 78%);background:linear-gradient(180deg,rgb(255 255 255 / 4%),transparent),var(--panel);box-shadow:0 20px 60px #00000038}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;border-radius:8px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;width:40px;height:40px;place-items:center;color:var(--amber);border:1px solid rgb(245 166 35 / 42%);border-radius:8px;background:#1d252b}.brand strong,.brand span{display:block}.brand strong{font-size:1.05rem;letter-spacing:0}.brand span,.eyebrow,.pill span,.stepper span{color:var(--muted);font-size:.76rem}.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 13px;color:var(--text);border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.control-surface{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:14px;margin-top:14px;padding:14px;border-radius:8px}.chord-field{position:relative;display:grid;gap:7px}.chord-field span{color:var(--muted);font-size:.8rem}.chord-field input{width:100%;min-height:52px;padding:0 92px 0 16px;color:var(--text);border:1px solid rgb(57 189 248 / 45%);border-radius:8px;outline:none;background:#0f171d;font-size:clamp(1.25rem,3vw,2rem);font-weight:750}.chord-input-wrap{position:relative}.search-status{position:absolute;top:50%;right:12px;display:inline-flex;align-items:center;gap:5px;color:var(--cyan)!important;transform:translateY(-50%)}.suggestions{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border:1px solid rgb(57 189 248 / 28%);border-radius:8px;background:#0d1419fa;box-shadow:0 18px 42px #00000061}.suggestions button{min-height:34px;color:var(--text);border:1px solid var(--border);border-radius:6px;background:var(--panel-2);font-weight:800}.suggestions button:hover,.suggestions button:focus-visible{color:#fff;border-color:#39bdf88a;outline:none;background:#1688e847}.control-row{display:flex;align-items:end;gap:10px;overflow-x:auto;padding-bottom:1px}.pill,.stepper{display:grid;min-width:112px;gap:5px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.pill select,.stepper input{min-width:0;color:var(--text);border:0;outline:none;background:transparent;font-weight:700}.stepper{min-width:82px}.static-pill{color:var(--text);font-weight:700}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;margin-top:14px}.instrument-panel,.related-panel,.details-strip,.caged-section,.triad-section{min-width:0;border-radius:8px}.instrument-panel{min-height:500px;padding:18px}.related-panel{padding:16px;background:linear-gradient(180deg,rgb(57 189 248 / 5%),transparent),var(--panel)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-heading.compact{margin-bottom:12px}h1,h2{margin:0;line-height:1.05;letter-spacing:0}h1{margin-top:3px;font-size:clamp(2rem,5vw,4.8rem)}h2{font-size:1.3rem}.segmented{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--border);border-radius:8px;background:#10171c}.segmented button{min-height:34px;padding:0 12px;color:var(--muted);border:0;border-radius:6px;background:transparent;white-space:nowrap}.segmented button.active{color:#fff;background:linear-gradient(180deg,var(--blue),#0f65b3);box-shadow:0 0 0 1px #39bdf840 inset}.related-panel .segmented{width:100%;overflow-x:auto}.related-panel .segmented button{flex:1;min-width:max-content;padding:0 10px}.fretboard{display:grid;width:100%;max-width:100%;min-width:0;gap:10px;padding:22px 18px 24px;border:1px solid rgb(245 166 35 / 20%);border-radius:8px;background:linear-gradient(90deg,rgb(0 0 0 / 22%) 0 1px,transparent 1px 12.5%),linear-gradient(180deg,#2a211b,#191f23 46%,#1f2529);overflow-x:auto}.fret-numbers,.string-row{display:grid;grid-template-columns:42px 58px minmax(620px,1fr);align-items:center}.fret-numbers{color:var(--subtle);font-size:.78rem}.fret-number-track,.string-track{display:grid;grid-template-columns:repeat(8,minmax(58px,1fr))}.fret-number-track span,.open-column-label{text-align:center}.string-label{color:var(--muted);font-weight:800}.string-track{position:relative;min-height:48px;align-items:center}.open-string-cell{position:relative;display:grid;min-height:48px;justify-items:start;align-items:center;padding-left:11px}.open-string-cell:after{position:absolute;right:0;width:3px;height:34px;content:"";border-radius:999px;background:#f4f1e86b}.string-track:before{position:absolute;right:0;left:0;height:2px;content:"";background:linear-gradient(90deg,#76838b,#d1d6d5,#6e7a7f);box-shadow:0 1px #0006}.fret-cell{position:relative;display:grid;min-height:48px;place-items:center;border-left:2px solid rgb(244 241 232 / 28%)}.fret-cell:last-child{border-right:2px solid rgb(244 241 232 / 18%)}.note-dot{position:relative;z-index:2;display:grid;width:34px;height:34px;place-items:center;color:#1b1303;border:1px solid rgb(255 255 255 / 28%);border-radius:999px;background:radial-gradient(circle at 30% 25%,#ffe2a7,var(--amber) 54%,#c8750a);box-shadow:0 0 18px #f5a62347;font-weight:900}.note-dot.open{color:var(--cyan);background:#121b22;box-shadow:0 0 0 1px #39bdf88c inset}.mute{z-index:2;color:var(--coral);font-weight:900}.tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;width:max-content;max-width:150px;padding:6px 8px;color:var(--text);border:1px solid rgb(57 189 248 / 45%);border-radius:6px;background:#0d1419;box-shadow:0 10px 28px #0000005c;font-size:.78rem;opacity:0;pointer-events:none;transform:translate(-50%,6px);transition:.16s ease}.note-dot:hover .tooltip,.note-dot:focus-visible .tooltip{opacity:1;transform:translate(-50%)}.ascii-panel{margin:0;min-height:320px;padding:22px;color:var(--seafoam);border:1px solid rgb(83 214 179 / 24%);border-radius:8px;background:#0d1419;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.1rem,3vw,2rem);line-height:1.9}.empty-state{display:grid;min-height:320px;place-items:center;color:var(--muted);border:1px dashed var(--border);border-radius:8px}.related-list{display:grid;gap:10px;margin-top:14px}.cycle-tools{display:grid;gap:12px;margin-top:12px}.cycle-tools .pill{width:100%}.cycle-wheel{position:relative;width:min(240px,100%);aspect-ratio:1;margin:2px auto 4px;border:1px solid rgb(57 189 248 / 20%);border-radius:999px;background:radial-gradient(circle,rgb(57 189 248 / 10%) 0 2px,transparent 3px),radial-gradient(circle,transparent 48%,rgb(57 189 248 / 8%) 49%,transparent 51%),#10171c}.cycle-wheel:before,.cycle-wheel:after{position:absolute;inset:18%;content:"";border:1px solid rgb(244 241 232 / 8%);border-radius:inherit}.cycle-wheel:after{inset:34%}.cycle-wheel button{position:absolute;z-index:1;display:grid;width:42px;height:34px;place-items:center;color:var(--text);border:1px solid var(--border);border-radius:8px;background:var(--panel-2);box-shadow:0 10px 18px #0000002e;font-size:.86rem;font-weight:850;transform:translate(-50%,-50%)}.cycle-wheel button:hover,.cycle-wheel button:focus-visible{color:#fff;border-color:#39bdf88f;outline:none;background:#1688e84d}.cycle-wheel button.active{color:#1b1303;border-color:#ffffff4d;background:radial-gradient(circle at 30% 25%,#ffe2a7,var(--amber) 54%,#c8750a)}.cycle-wheel-core{position:absolute;top:50%;left:50%;display:grid;width:40px;height:40px;place-items:center;color:var(--cyan);border:1px solid rgb(57 189 248 / 24%);border-radius:999px;background:#39bdf814;font-size:.8rem;font-weight:900;transform:translate(-50%,-50%)}.related-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;width:100%;padding:13px;color:var(--text);text-align:left;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.caged-card{display:grid;grid-template-columns:minmax(88px,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:12px;color:var(--text);text-align:left;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.caged-card.active{border-color:#1688e8db;box-shadow:0 0 0 1px #39bdf82e inset}.caged-card>div>strong,.caged-card>div>span{display:block}.caged-card>div>strong{font-size:1rem}.caged-card>div>span{margin-top:2px;color:var(--muted);font-size:.78rem}.caged-card .compact-fretboard{width:142px}.related-card strong,.related-card span{display:block}.related-card strong{font-size:1.05rem}.related-card>div>span{margin-top:2px;color:var(--muted);font-size:.78rem}.note-cluster{display:flex;flex-wrap:wrap;justify-content:end;gap:4px}.note-cluster span{display:inline-flex;min-width:28px;min-height:24px;align-items:center;justify-content:center;color:var(--cyan);border:1px solid rgb(57 189 248 / 26%);border-radius:6px;background:#39bdf814;font-size:.78rem;font-weight:800}.caged-section,.triad-section{margin-top:14px;padding:16px;background:linear-gradient(180deg,rgb(83 214 179 / 4%),transparent),var(--panel)}.section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;color:inherit;text-align:left;border:0;background:transparent;gap:12px}.section-title{display:inline-flex;align-items:center;gap:7px}.section-title svg{color:var(--muted);transition:transform .16s ease;transform:rotate(90deg)}.section-toggle.collapsed .section-title svg{transform:rotate(0)}.section-context{padding:7px 9px;color:var(--muted);border:1px solid var(--border);border-radius:6px;background:var(--panel-2);font-size:.78rem}.caged-grid{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:12px;margin-top:10px}.caged-grid .caged-card{grid-template-columns:minmax(0,1fr);align-content:start}.caged-grid .caged-card .compact-fretboard{width:100%;margin-top:10px}.triad-grid{display:grid;grid-template-columns:repeat(3,172px);justify-content:start;gap:12px;margin-top:10px}.triad-card{width:172px;min-width:0;padding:9px;color:inherit;font:inherit;text-align:left;cursor:pointer;align-self:start;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.triad-card.active{border-color:#1688e8db;box-shadow:0 0 0 1px #39bdf82e inset}.triad-card-heading strong,.triad-card-heading span{display:block}.triad-card-heading strong{color:var(--text);font-size:.78rem;line-height:1.2}.triad-card-heading>div>span{margin-top:3px;color:var(--muted);font-size:.68rem;line-height:1.2}.triad-card-heading .triad-card-notes{color:var(--seafoam);font-weight:850}.triad-ascii{margin:14px 0 0;color:var(--text);font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;line-height:1.65}.details-strip{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center;margin-top:14px;padding:14px}.voicing-bank{display:flex;gap:10px}.voicing-bank{overflow-x:auto}.voicing-chip{min-width:148px;padding:10px;color:var(--text);border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}.voicing-chip.barre-chip{min-width:190px}.voicing-chip.active{border-color:#1688e8db;box-shadow:0 0 0 1px #39bdf82e inset}.voicing-chip>span:first-child{display:block;margin-bottom:8px;color:var(--muted);text-align:left;font-size:.78rem}.voicing-chip .chip-meta{display:block;margin:-3px 0 8px;color:var(--subtle);text-align:left;font-size:.66rem}.compact-fretboard{display:grid;width:100%;min-width:142px;gap:2px;padding:5px 4px;overflow:hidden;border:1px solid rgb(245 166 35 / 22%);border-radius:6px;background:linear-gradient(180deg,#272019,#171d20)}.compact-fret-labels,.compact-fret-row{display:grid;grid-template-columns:14px 20px minmax(0,1fr);align-items:center}.compact-fret-labels{min-height:13px;color:var(--subtle);font-size:.54rem;text-align:center;grid-template-columns:14px 20px repeat(5,minmax(0,1fr))}.compact-string-label{color:var(--muted);font-size:.62rem;font-weight:850;text-align:center}.compact-open-lane{position:relative;display:grid;min-height:20px;place-items:center;border-right:2px solid rgb(244 241 232 / 38%)}.compact-fret-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-height:20px;align-items:center}.compact-fret-track:before{position:absolute;right:0;left:0;height:1px;content:"";background:#dce3e2b8}.compact-fret-cell{position:relative;z-index:1;display:grid;min-height:20px;place-items:center;border-left:1px solid rgb(244 241 232 / 28%)}.compact-fret-cell:last-child{border-right:1px solid rgb(244 241 232 / 18%)}.compact-note{position:relative;z-index:2;display:grid;width:16px;height:16px;place-items:center;color:#1b1303;border:1px solid rgb(255 255 255 / 24%);border-radius:999px;background:radial-gradient(circle at 30% 25%,#ffe2a7,var(--amber) 54%,#c8750a);box-shadow:0 0 9px #f5a6236b;font-size:.58rem;font-weight:900}.compact-note.open{color:var(--cyan);background:#121b22;box-shadow:0 0 0 1px #39bdf87a inset}.compact-mute{position:relative;z-index:2;color:var(--coral);font-size:.68rem;font-weight:900}.mini-ascii,.triad-ascii{margin:0;color:var(--seafoam);font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;line-height:1.48;white-space:pre}.triad-card .compact-fretboard,.triad-card .triad-ascii{margin-top:9px}.triad-card .compact-fretboard{width:152px;min-width:0;height:auto;grid-template-rows:12px repeat(3,24px);gap:1px;padding:4px 3px;overflow:hidden}.triad-card .compact-fret-labels{min-height:12px;font-size:.5rem}.triad-card .compact-fret-row,.triad-card .compact-open-lane,.triad-card .compact-fret-track,.triad-card .compact-fret-cell{min-height:24px;height:24px}.triad-card .compact-note{width:14px;height:14px;font-size:.5rem}@media(max-width:980px){.app-shell{padding:12px}.control-surface,.workbench,.details-strip{grid-template-columns:1fr}.instrument-panel{min-height:auto;overflow:hidden}.panel-heading{align-items:start;flex-direction:column}.fret-numbers,.string-row{grid-template-columns:30px 48px minmax(520px,1fr);width:max-content;min-width:100%}.details-strip{padding-bottom:14px}.caged-grid{grid-template-columns:repeat(5,190px);overflow-x:auto;padding-bottom:2px}.triad-grid{grid-template-columns:repeat(3,160px);overflow-x:auto;padding-bottom:2px}}@media(max-width:560px){.top-actions{display:none}.control-surface{padding:10px}h1{font-size:2.5rem}.segmented{width:100%}.segmented button{flex:1;padding:0 8px}.instrument-panel,.related-panel,.triad-section{padding:12px}.related-card{grid-template-columns:1fr auto}.related-card .note-cluster{grid-column:1 / -1;justify-content:start}}