:root{color-scheme:dark;color:#ece9f1;--bg:#121216;--panel:#19191f;--panel-deep:#15151b;--border:#303038;--border-soft:#25252d;--text:#ece9f1;--muted:#9c97a8;--faint:#8b8593;--lavender:#c2b5e6;--pink:#dda9cc;--cyan:#9ebfbc;--amber:#dfbf88;--mono:ui-monospace, SFMono-Regular, Consolas, monospace;background:#121216;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;min-width:320px}body{background:var(--bg);min-width:320px;min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-size:14px;line-height:1.5}button,input,select{font:inherit;color:inherit;touch-action:manipulation}button{cursor:pointer;background:0 0;border:0;transition:border-color .15s,background-color .15s,color .15s,transform .15s}button[aria-disabled=true],button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}h1,h2,h3,p{margin:0}svg{display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;background:var(--lavender);color:#211b29;border-radius:6px;padding:10px 14px;position:fixed;top:-60px;left:20px}.skip-link:focus{top:10px}.boot-screen{min-height:100vh;color:var(--muted);justify-content:center;align-items:center;gap:10px;display:flex}.app-header{border-bottom:1px solid var(--border-soft);justify-content:space-between;align-items:center;gap:20px;height:78px;padding:0 32px;display:flex}.brand{min-width:0;color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{fill:var(--bg);stroke:var(--lavender);stroke-width:1.5px;flex:none}.brand strong{letter-spacing:-.8px;white-space:nowrap;font-size:23px;font-weight:550;line-height:1.1;display:block}.brand small{color:var(--muted);font:8px/1.4 var(--mono);letter-spacing:.18em;margin-top:6px;display:block}.brand-dot{color:var(--pink)}.header-center{color:var(--muted);font:9px var(--mono);letter-spacing:.1em;align-items:center;gap:10px;display:flex}.header-actions,.project-tools,.inline-controls,.audio-actions,.audio-options{align-items:center;gap:6px;display:flex}.status-dot{background:var(--cyan);border-radius:50%;width:6px;height:6px;display:inline-block}.status-dot.amber{background:var(--amber)}.save-button{border:1px solid var(--border);min-height:38px;color:var(--muted);border-radius:7px;align-items:center;gap:9px;padding:8px 12px;font-size:11px;display:inline-flex;position:relative}.icon-button{width:36px;height:36px;color:var(--muted);border:1px solid #0000;border-radius:7px;flex:none;justify-content:center;align-items:center;display:inline-flex}.icon-button.small{width:30px;height:30px}.icon-button:hover,.icon-button:focus-visible{border-color:var(--border);color:var(--text);background:#26252f}.icon-button[aria-disabled=true]{opacity:.55}.icon-button.locked{color:var(--pink);background:#3a2837;border-color:#77556e}.tooltip-anchor{display:inline-flex;position:relative}.tooltip{z-index:80;width:max-content;max-width:min(250px,100vw - 24px);color:var(--text);background:#25222d;border:1px solid #51485e;border-radius:6px;padding:7px 9px;font-size:11px;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 10px 30px #0008}.project-bar{justify-content:space-between;align-items:center;gap:20px;max-width:1900px;margin:auto;padding:28px 32px 24px;display:flex}.project-heading{grid-template-columns:auto 1fr;align-items:baseline;gap:4px 16px;min-width:0;display:grid}.project-heading>.eyebrow{grid-column:1/-1}.project-title{letter-spacing:-.7px;background:0 0;border:0;min-width:0;padding:0;font-size:25px;font-weight:450}.project-meta{color:var(--muted);font-size:11px}.tool-divider{background:var(--border);width:1px;height:22px;margin:0 8px}.eyebrow{color:var(--muted);font:9px/1.5 var(--mono);letter-spacing:.1em}.microcopy{color:var(--muted);font-size:10px;line-height:1.6}.coming-soon{color:var(--lavender);font:7px var(--mono);letter-spacing:.08em;border:1px solid #554860;border-radius:3px;padding:2px 4px}.workspace{grid-template-rows:auto 1fr auto;grid-template-columns:274px minmax(0,1fr) 266px;gap:16px;max-width:1900px;margin:0 auto;padding:0 32px;display:grid}.panel{border:1px solid var(--border);background:var(--panel);border-radius:10px;min-width:0}.panel-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-heading h2{white-space:nowrap;align-items:center;gap:10px;font-size:14px;font-weight:600;display:flex}.step{color:var(--lavender);font:10px var(--mono);border:1px solid #443a52;border-radius:3px;padding:3px 5px}.button{white-space:nowrap;background:#24222b;border:1px solid #3d3946;border-radius:7px;justify-content:center;align-items:center;gap:8px;min-height:39px;padding:8px 13px;font-size:11px;font-weight:500;display:inline-flex}.button.quiet{border-color:var(--border-soft);color:#c0bbc9;background:0 0}.button.primary{border-color:var(--pink);background:var(--pink);color:#291d28;min-height:42px;font-weight:650}.button.lavender{color:var(--lavender);background:#2d2639;border-color:#5b4e70}.button.danger{color:#e2a8bf;background:#2d2027;border-color:#60404f}.button:hover:not(:disabled),.chord-card:hover:not(:disabled),.mode-button:hover{background-color:#2a2732;border-color:#675d72}.button.primary:hover:not(:disabled){background-color:#e7bad8;border-color:#e7bad8}.button:active:not(:disabled),.chord-card:active:not(:disabled),.mode-button:active{transform:translateY(1px)}.button.wide,.wide{width:100%}.text-button{color:var(--lavender);align-items:center;gap:6px;padding:4px 0;font-size:11px;display:inline-flex}.builder{flex-direction:column;grid-area:1/1/4;padding:22px 20px;display:flex}.notes-heading{justify-content:space-between;align-items:center;margin:28px 0 12px;display:flex}.notes-heading h2{color:#c1bbca;font-size:12px;font-weight:550}.notes-heading .text-button{color:var(--faint);font:10px var(--mono)}.note-selector{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 7px;display:grid}.note-chip{aspect-ratio:1;color:#b8b1c3;border:1px solid #45404e;border-radius:50%;place-items:center;font-size:11px;display:grid;opacity:1!important}.note-chip:hover{background:#24232b;border-color:#746a7d}.note-chip.selected{border-color:var(--lavender);background:var(--lavender);color:#2a2236;font-weight:700}.note-chip.is-root{border-color:var(--pink);background:var(--pink)}.root-row{color:var(--muted);justify-content:space-between;align-items:center;margin:20px 0;font-size:11px;display:flex}select{border:1px solid var(--border);max-width:100%;color:inherit;background:#202027;border-radius:6px;padding:6px 26px 6px 9px;font-size:11px}.chord-result{background:#25202d;border:1px solid #6e5470;border-radius:9px;padding:20px 17px 15px;position:relative;overflow:hidden}.chord-result:before{background:var(--pink);content:"";width:2px;position:absolute;inset:0 auto 0 0}.chord-result-name{flex-direction:column;align-items:flex-start;margin:7px 0 9px;display:flex}.chord-result-name strong{color:#e6c4dd;letter-spacing:-1.6px;font-size:38px;font-weight:450;line-height:1.2}.chord-result-name span{min-height:18px;color:var(--pink);font:11px var(--mono)}.chord-notes{color:#d0c3dc;min-height:23px;font:12px var(--mono);letter-spacing:.12em}.chord-result-rule{background:#4c3c53;height:1px;margin:15px 0 10px}.chord-result small{color:#b49ebd;font-size:9px}.interval-details{margin-top:24px}.interval-details summary{color:#c7c1d0;cursor:pointer;justify-content:space-between;font-size:11px;list-style:none;display:flex}.interval-list{margin-top:12px}.interval-row{border-bottom:1px solid var(--border-soft);grid-template-columns:30px 1fr auto;align-items:center;gap:8px;min-height:40px;font-size:11px;display:grid}.interval-row:last-child{border:0}.interval-symbol{width:28px;height:25px;color:var(--lavender);border:1px solid #4a4258;border-radius:5px;place-items:center;font-size:9px;display:grid}.interval-row.root .interval-symbol{color:var(--pink);border-color:#5e435c}.interval-row small{color:var(--muted);font:9px var(--mono)}.interval-details .microcopy{margin-top:12px}.builder-bottom{margin-top:auto;padding-top:22px}.builder-bottom .button{font-size:10px}.mobile-only{display:none}.progression-panel{grid-area:1/2;padding:20px 21px 14px}.progression{scrollbar-width:thin;scrollbar-color:#4b4257 transparent;gap:11px;padding:17px 1px 8px;display:flex;overflow-x:auto}.chord-card{text-align:left;background:#1e1d25;border:1px solid #3b3744;border-radius:8px;flex-direction:column;flex:1 0 118px;align-items:flex-start;min-width:118px;min-height:122px;padding:13px;display:flex;position:relative;opacity:1!important}.chord-card.active{background:#2e2334;border-color:#c28cb9}.chord-card.active:before{background:var(--pink);content:"";height:2px;position:absolute;top:-1px;left:16px;right:16px}.card-top{color:#8d8499;font:9px var(--mono);margin-bottom:10px}.chord-card strong{letter-spacing:-.7px;font-size:21px;font-weight:500}.chord-card small{min-height:17px;color:var(--muted);font:9px var(--mono)}.card-notes{color:#a59baf;font:9px var(--mono);margin-top:auto;padding-top:8px}.chord-card.add-card{min-width:42px;color:var(--muted);border-style:dashed;flex:0 0 42px;justify-content:center;align-items:center}.progression-caption{color:var(--faint);justify-content:space-between;margin-top:5px;font-size:9px;display:flex}.progression-caption span:last-child{font-family:var(--mono);letter-spacing:.08em}.fret-panel{flex-direction:column;grid-area:2/2;min-height:365px;padding:21px;display:flex}.fret-toolbar{justify-content:space-between;align-items:center;margin:22px 0 8px;display:flex}.segmented{border:1px solid var(--border);background:var(--panel-deep);border-radius:7px;padding:3px;display:inline-flex}.segmented button{color:var(--muted);opacity:1;border-radius:4px;padding:5px 11px;font-size:10px}.segmented button.active{color:var(--lavender);background:#332c40;box-shadow:0 0 0 1px #544661}.fretboard{align-items:center;width:100%;min-height:170px;display:flex}.fretboard svg{width:100%;height:auto;overflow:visible}.fret-surface{fill:#15121a;stroke:#302937}.string-line{stroke:#68606c}.fret-line{stroke:#3f3847;stroke-width:1.3px}.nut-line{stroke:#84728e;stroke-width:3px}.fret-text{fill:#867b92;font:11px var(--mono)}.string-name{fill:#c3b8d0;font:12px var(--mono)}.mute-marker{fill:#736979;font:12px var(--mono)}.inlay{fill:#302a38}.fret-dot{fill:var(--lavender);stroke:#e0d4f4;stroke-width:1.5px}.fret-dot.root{fill:var(--pink);stroke:#f4d1eb}.fret-dot.scale{fill:#31413e;stroke:var(--cyan)}.pitch-label{fill:#2a2333;font:700 11px sans-serif}.fret-legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:15px;margin:0 0 17px;font-size:9px;display:flex}.fret-legend span{align-items:center;gap:5px;display:flex}.legend-dot{border-radius:50%;width:5px;height:5px;display:inline-block}.root-dot{background:var(--pink)}.note-dot{background:var(--lavender)}.scale-dot{background:var(--cyan)}.legend-click{color:var(--faint);margin-left:auto}.position-control{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding-top:15px;display:flex}.shape-display{gap:6px;margin-top:5px;display:flex}.shape-display span{color:#d3bbda;width:24px;height:27px;font:11px var(--mono);background:#242029;border:1px solid #423848;border-radius:4px;place-items:center;display:grid}.shape-display span.mute{color:#6d6178;background:0 0;border-color:#302b34}.empty-position{color:var(--amber);margin-top:7px;font-size:10px}.position-navigation{align-items:center;gap:5px;display:flex}.position-navigation>span{min-width:43px;color:var(--muted);text-align:center;font:9px var(--mono)}.fret-footer{color:var(--muted);justify-content:space-between;gap:10px;margin-top:8px;font-size:9px;display:flex}.context-panel{flex-direction:column;grid-area:1/3/4;display:flex}.optimizer-section,.harmony-section{padding:22px 19px}.section-intro{color:var(--muted);margin-top:6px;font-size:10px}.optimization-modes{flex-direction:column;gap:7px;margin:20px 0 15px;display:flex}.mode-button{color:#9b8eae;text-align:left;background:#1e1c24;border:1px solid #38333f;border-radius:7px;align-items:center;gap:11px;min-height:60px;padding:12px 10px;display:flex;opacity:1!important}.mode-button.active{color:var(--lavender);background:#2b2436;border-color:#67557b}.mode-button span{flex:1}.mode-button strong{color:#cfc7d9;font-size:11px;font-weight:550;display:block}.mode-button small{color:#8f849d;margin-top:2px;font-size:9px;display:block}.mode-button i{border:1px solid #686070;border-radius:50%;width:9px;height:9px}.mode-button.active i{background:var(--lavender);box-shadow:0 0 0 1px var(--lavender);border:2px solid #51425f}.optimizer-note{min-height:32px;margin-top:10px}.harmony-section{border-top:1px solid var(--border);margin-top:auto}.harmony-section h2{font-size:12px}.harmony-section .segmented{margin:17px 0 15px}.field-label{color:var(--muted);margin-bottom:8px;font-size:9px;display:block}.scale-notes{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.scale-notes span{min-width:28px;color:var(--cyan);text-align:center;font:9px var(--mono);background:#202b29;border:1px solid #3c514d;border-radius:4px;padding:4px 5px}.scale-notes span.chord-tone{color:var(--lavender);background:#302a3a;border-color:#5a4a70}.scale-notes span.root{color:var(--pink);background:#3a2837;border-color:#77556e}.scale-overlay{color:var(--muted);align-items:center;gap:8px;margin-top:12px;font-size:10px;display:flex}.scale-overlay input{accent-color:var(--cyan)}.harmony-section .microcopy{margin-top:12px}.common-notes{border-top:1px solid var(--border-soft);flex-direction:column;gap:5px;margin-top:16px;padding-top:15px;display:flex}.common-notes strong{color:var(--cyan);font:11px var(--mono);font-weight:400}.audio-panel{grid-area:3/2;justify-content:space-between;align-items:center;gap:12px;min-height:78px;padding:14px 17px;display:flex}.audio-label{color:var(--lavender);align-items:center;gap:10px;display:flex}.audio-label span{color:var(--text)}.audio-label strong{font-size:11px;font-weight:500;display:block}.audio-label small{color:var(--muted);white-space:nowrap;font-size:9px;display:block}.audio-actions .button{font-size:10px}.audio-options{color:var(--muted)}.audio-options input{width:55px;accent-color:var(--lavender)}.desktop-footer{max-width:1900px;color:var(--faint);justify-content:space-between;margin:auto;padding:18px 32px 24px;font-size:9px;display:flex}.pwa-notice{z-index:70;max-width:min(420px,100vw - 32px);color:var(--text);background:#25222d;border:1px solid #5b4e70;border-radius:8px;align-items:center;gap:10px;padding:11px 12px;font-size:11px;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 12px 35px #000b}.pwa-notice span{flex:1}.pwa-notice button{color:var(--lavender);font-weight:600}.project-dialog{background:var(--panel);width:min(720px,100vw - 32px);max-height:min(760px,100dvh - 32px);color:var(--text);border:1px solid #494151;border-radius:12px;padding:22px;overflow:hidden auto;box-shadow:0 24px 80px #000b}.project-dialog::backdrop{backdrop-filter:blur(3px);background:#09080dbd}.dialog-heading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.dialog-heading h2{margin-top:3px;font-size:22px;font-weight:550}.dialog-intro{color:var(--muted);margin:8px 0 18px;font-size:11px}.project-list{flex-direction:column;gap:8px;margin:16px 0;display:flex}.project-row{border:1px solid var(--border);background:#17171d;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:13px;display:grid}.project-row.active{background:#241e2a;border-color:#725d79}.project-row.error{color:var(--amber)}.project-row.error p{color:var(--muted);margin-top:3px;font-size:10px}.project-row-main{min-width:0}.project-row-title{background:0 0;border:1px solid #0000;border-radius:5px;width:100%;padding:5px 7px;font-size:14px;font-weight:600}.project-row-title:hover,.project-row-title:focus{border-color:var(--border);background:#202027}.project-row-meta{color:var(--muted);margin:3px 7px 0;font-size:10px;display:block}.project-pill{color:var(--lavender);font:8px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid #5c4c66;border-radius:999px;padding:3px 6px}.project-row-actions{grid-column:1/-1;justify-content:flex-end;gap:7px;display:flex}.project-row-actions .button{min-height:34px;padding:6px 10px}.dialog-error{color:var(--amber);background:#2b241b;border:1px solid #695035;border-radius:6px;margin:12px 0;padding:9px 10px;font-size:11px}.mobile-nav{display:none}@media (width>=1650px){.workspace{grid-template-columns:292px minmax(0,1fr) 282px}}@media (width<=1150px) and (width>=901px){.workspace{grid-template-columns:240px minmax(0,1fr) 238px;gap:12px;padding:0 18px}.project-bar,.app-header{padding-left:18px;padding-right:18px}.audio-options{display:none}.builder,.fret-panel,.progression-panel{padding-left:16px;padding-right:16px}.note-selector{gap:8px 5px}.brand strong{font-size:20px}}@media (width<=900px){body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.app-header{height:68px;padding:0 16px}.brand-mark{width:26px}.brand strong{font-size:20px}.brand small,.header-center,.save-label{display:none}.save-button{justify-content:center;width:44px;min-height:44px;padding:0}.save-button .status-dot{box-shadow:0 0 0 2px var(--bg);position:absolute;bottom:5px;right:5px}.icon-button,.icon-button.small{width:44px;height:44px}.button,select,.text-button{min-height:44px}.segmented button{min-height:40px}.interval-details summary,.scale-overlay{align-items:center;min-height:44px}.project-bar{align-items:flex-end;padding:22px 16px 18px}.project-heading{display:block}.project-title{width:100%;font-size:23px}.project-meta{margin-top:3px;display:block}.tool-divider,.projects-button-label{display:none}.projects-button{width:44px;padding:0}.workspace{padding:0 16px;display:block}.workspace>[data-view]{display:none}.app-shell[data-mobile-view=build] [data-view=build],.app-shell[data-mobile-view=fret] [data-view=fret],.app-shell[data-mobile-view=suite] [data-view=suite]{display:flex}.panel{width:100%;margin-bottom:12px}.builder,.fret-panel,.progression-panel,.optimizer-section,.harmony-section{padding:18px 16px}.builder{min-height:calc(100dvh - 196px)}.builder-bottom{margin-top:12px}.mobile-only{display:inline-flex}.builder-bottom .mobile-only{margin-top:12px}.interval-details{margin-top:20px}.progression-panel{flex-direction:column}.progression{flex-wrap:wrap;overflow:visible}.chord-card{flex-basis:calc(50% - 6px);min-width:calc(50% - 6px)}.chord-card.add-card{flex-basis:100%;min-width:100%;min-height:48px}.context-panel{flex-direction:column}.fret-panel{min-height:0}.fretboard{min-height:210px}.fret-legend{margin-top:3px}.position-control,.fret-footer{flex-direction:column;align-items:flex-start}.position-navigation{justify-content:flex-end;width:100%}.audio-panel{flex-wrap:wrap;padding:14px}.audio-actions{width:100%}.audio-actions .button{flex:1}.audio-options{width:100%;display:flex}.audio-options input{flex:1;width:auto}.microcopy,.section-intro,.scale-overlay{font-size:11px}.card-top,.chord-card small,.card-notes,.progression-caption,.fret-legend,.fret-footer,.field-label,.mode-button small{font-size:10px}.desktop-footer{display:none}.project-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px 16px}.project-row{padding:12px}.project-row-actions{grid-template-columns:repeat(3,1fr);display:grid}.project-row-actions .button{min-width:0;min-height:44px;padding:7px}.mobile-nav{z-index:50;right:12px;bottom:max(12px, env(safe-area-inset-bottom));backdrop-filter:blur(14px);background:#1b1921ed;border:1px solid #423a4c;border-radius:13px;grid-template-columns:repeat(3,1fr);height:66px;padding:5px;display:grid;position:fixed;left:12px;box-shadow:0 12px 35px #000b}.pwa-notice{bottom:88px;left:12px;right:12px}.mobile-nav button{color:var(--muted);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:9px;display:flex}.mobile-nav button.active{color:var(--pink);background:#33293d}}@media (width<=390px){.app-header,.project-bar,.workspace{padding-left:12px;padding-right:12px}.brand strong{font-size:18px}.panel-heading>.eyebrow{display:none}.note-selector{gap:8px 6px}.chord-result-name strong{font-size:34px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}