:root{--accent-color: #18c3ff;--accent-warm: #ff8a45;--surface: rgba(16, 23, 36, .86);--surface-edge: rgba(255, 255, 255, .1);--panel-bg: rgba(10, 15, 24, .78);--text-primary: #dde7f8;--text-secondary: #b8c5dc;--text-muted: #95a6c3;--motion-fast: .18s;--radius-lg: 16px;--radius-md: 12px;--focus-ring: 0 0 0 2px rgba(24, 195, 255, .95)}#root{min-height:100vh}.app-shell{position:relative;min-height:100vh;padding:clamp(.6rem,1.8vw,1.2rem);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(.6rem,1.5vw,1rem);background:radial-gradient(circle at 12% 0%,#24314a,#101826,#090d14);overflow:auto}.workspace-card{position:relative;z-index:1;width:min(1360px,calc(100vw - 2rem));height:min(920px,calc(100vh - 2rem));border-radius:22px;padding:1rem;background:linear-gradient(160deg,#1a2334b3,#0d131edb);border:1px solid var(--surface-edge);box-shadow:0 24px 60px #00000073;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:grid;grid-template-rows:auto 1fr;gap:.85rem}.seo-content{position:relative;z-index:1;width:min(1360px,calc(100vw - 2rem));border-radius:18px;padding:1rem 1.1rem;background:linear-gradient(160deg,#101826db,#0a101bdb);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 46px #00000047}.seo-content h2{margin:0;font-size:clamp(1.12rem,1.8vw,1.4rem);color:#eff6ff}.seo-content>p{margin:.42rem 0 0;color:#c4d4ec;font-size:.9rem;line-height:1.42}.seo-grid{margin-top:.86rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.seo-card{border-radius:12px;border:1px solid rgba(151,171,201,.22);background:#0c1421a8;padding:.66rem .74rem}.seo-card h3{margin:0;font-size:.88rem;color:#edf5ff}.seo-card p{margin:.36rem 0 0;color:#b7cae6;font-size:.8rem;line-height:1.38}.seo-faq{margin-top:.78rem;border-top:1px solid rgba(154,173,199,.2);padding-top:.7rem}.seo-faq h3{margin:0;font-size:.9rem;color:#ebf4ff}.seo-faq details{margin-top:.5rem;border-radius:10px;border:1px solid rgba(152,172,203,.24);background:#090f19b8;padding:.46rem .58rem}.seo-faq summary{cursor:pointer;font-size:.8rem;font-weight:600;color:#dbe8fb}.seo-faq p{margin:.36rem 0 0;color:#b5c8e3;font-size:.78rem;line-height:1.36}.state-summary{display:grid;grid-template-columns:1fr auto;gap:1rem;background:#090e17b3;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:.8rem 1rem}.state-summary-label{margin:0;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-color)}.state-summary h1{margin:.2rem 0 0;font-size:clamp(1.26rem,2vw,1.62rem);line-height:1.1}.state-summary-detail{margin:.36rem 0 0;color:var(--text-secondary);font-size:.84rem;line-height:1.3}.state-summary-status{margin:.38rem 0 0;color:#8cccf0;font-size:.75rem;letter-spacing:.02em}.state-summary-right{display:grid;align-content:center;justify-items:end;gap:.3rem}.state-summary-notes-label{margin:0;font-size:.72rem;color:var(--text-muted)}.state-summary-notes{display:flex;gap:.32rem;flex-wrap:wrap;justify-content:flex-end}.note-chip{border-radius:999px;background:#18c3ff24;border:1px solid rgba(24,195,255,.4);color:#dcf6ff;padding:.12rem .5rem;font-size:.75rem}.note-chip.note-chip-empty{background:#a0adc521;border-color:#a0adc557;color:#c8d3e7}.state-summary-inline{margin:0;color:#a3b0c7;font-size:.78rem}.reset-button{appearance:none;border:1px solid rgba(153,170,194,.56);background:#141f2eb8;color:#e1ebfb;border-radius:999px;padding:.22rem .72rem;font-size:.77rem;cursor:pointer;transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease}.reset-button:hover{border-color:#18c3ffe6;background:#18c3ff2b;transform:translateY(-1px)}.reset-button:active{transform:translateY(0)}.workspace-content{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:.9rem}.fretboard-stack{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.62rem}.fretboard-frame{min-height:0;width:100%;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,#0f1522f0,#090e18f7);border:1px solid rgba(255,255,255,.08)}.fretboard-canvas{width:100%;height:100%;display:block}.legend-panel{padding:.58rem .72rem;border-radius:var(--radius-md);background:linear-gradient(150deg,#0c1420db,#080d14d1);border:1px solid rgba(255,255,255,.08)}.legend-title{margin:0;font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}.legend-grid{margin-top:.42rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.36rem .5rem}.legend-item{display:inline-flex;align-items:center;gap:.32rem;font-size:.74rem;color:#cfdaee}.legend-swatch{width:.72rem;height:.72rem;border-radius:999px;border:1px solid transparent;flex-shrink:0}.legend-swatch.root{background:var(--accent-warm);border-color:#ffe3c8}.legend-swatch.chord{background:var(--accent-color);border-color:#bbf0ff}.legend-swatch.allowed{background:#6f9dff;border-color:#d6e3ff}.legend-swatch.muted{background:#646d808f;border-color:#aab4c861}.legend-swatch.open{background:#080c14d1;border:2px solid #86d8ff}.legend-swatch.octave{background:#56ceff8c;border-color:#62d1fff2}.filter-panel{min-height:0;overflow-y:auto;padding-right:.1rem;display:grid;gap:.62rem;scrollbar-width:thin;scrollbar-color:rgba(24,195,255,.35) rgba(13,21,34,.6)}.filter-panel::-webkit-scrollbar{width:8px}.filter-panel::-webkit-scrollbar-thumb{background:#18c3ff4d;border-radius:999px}.filter-panel::-webkit-scrollbar-track{background:#0d152280}.filter-section{background:linear-gradient(150deg,#0b111be6,#090e17c2);border:1px solid rgba(255,255,255,.08);border-radius:13px;transition:border-color var(--motion-fast) ease,transform var(--motion-fast) ease}.filter-section:hover{border-color:#18c3ff47}.filter-section>summary{cursor:pointer;list-style:none;padding:.56rem .82rem;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--text-primary)}.filter-section>summary::-webkit-details-marker{display:none}.filter-section>summary:after{content:"-";float:right;color:#95a6c3}.filter-section:not([open])>summary:after{content:"+"}.filter-body{padding:0 .82rem .82rem;display:grid;gap:.58rem}.section-inline-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.field-label{display:grid;gap:.24rem;font-size:.73rem;color:#9fb0cc}.field-label select{width:100%;border-radius:9px;border:1px solid rgba(156,173,198,.4);background:#121d2cb8;color:#e4ecfa;padding:.34rem .5rem;font-size:.78rem;transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease}.field-label select:hover{border-color:#18c3ff8f}.field-label select:disabled{opacity:.45}.checkbox-row{display:flex;align-items:center;gap:.46rem;font-size:.79rem;color:#d4deee}.checkbox-row input{accent-color:var(--accent-color)}.field-subtitle{margin:.1rem 0 0;font-size:.73rem;color:#9db0cf}.section-reset-button{appearance:none;border:1px solid rgba(153,170,194,.56);background:#141f2eb8;color:#e1ebfb;border-radius:999px;padding:.14rem .54rem;font-size:.68rem;cursor:pointer;transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease}.section-reset-button:hover{border-color:#18c3ffe6;background:#18c3ff2b}.section-reset-button:disabled{cursor:not-allowed;opacity:.42}.toggle-grid{display:flex;flex-wrap:wrap;gap:.32rem}.toggle-pill{appearance:none;border-radius:999px;border:1px solid rgba(145,162,190,.46);background:#141e2dbd;color:#d5dfef;padding:.18rem .54rem;font-size:.72rem;cursor:pointer;transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease}.toggle-pill:hover{border-color:#18c3ffc2;transform:translateY(-1px)}.toggle-pill.is-active{border-color:#18c3fff2;background:#18c3ff38;color:#e6f8ff}.toggle-pill:active{transform:translateY(0)}.toggle-pill:disabled{cursor:not-allowed;opacity:.4}.chip-group{display:grid;gap:.32rem}.chip-group-title{margin:0;font-size:.73rem;color:#9db0cf}.chip-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.24rem}.chip{appearance:none;border-radius:8px;border:1px solid rgba(145,162,190,.46);background:#141e2dbd;color:#d5dfef;padding:.16rem .2rem;font-size:.7rem;cursor:pointer;transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease}.chip:hover{border-color:#18c3ffc2;transform:translateY(-1px)}.chip.is-active{border-color:#18c3fff2;background:#18c3ff3d;color:#e6f8ff}.chip.is-disabled{opacity:.35;cursor:not-allowed;border-color:#8a96ab4d}.chip:active{transform:translateY(0)}button:focus-visible,select:focus-visible,input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--focus-ring)}.fret-range-row{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.tuning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.ambient-glow{position:absolute;width:490px;height:490px;right:-160px;top:-150px;border-radius:50%;background:radial-gradient(circle,#18c3ff4a,#18c3ff00 70%)}.fatal-error-shell{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(circle at 10% 5%,#25334c,#0d1422 45%,#090d14)}.fatal-error-card{width:min(620px,100%);border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#121a28eb,#0a101beb);box-shadow:0 24px 58px #0000006b;padding:1.2rem 1.3rem}.fatal-error-label{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-color)}.fatal-error-card h1{margin:.24rem 0 0;font-size:1.34rem;color:#ecf4ff}.fatal-error-card p{margin:.42rem 0 0;color:#c4d3eb}.fatal-error-actions{margin-top:.94rem}.fatal-error-actions button{appearance:none;border:1px solid rgba(24,195,255,.7);border-radius:999px;background:#18c3ff2e;color:#e7f9ff;font-size:.78rem;padding:.24rem .72rem;cursor:pointer}@media(max-width:1250px){.legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1150px){.workspace-card{height:auto;min-height:0}.workspace-content{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}.fretboard-frame{height:clamp(320px,46vh,560px)}.filter-panel{max-height:none;overflow-y:visible}.seo-grid{grid-template-columns:1fr}}@media(max-width:900px){.workspace-card{height:auto;min-height:0;max-height:none;width:calc(100vw - 1rem);padding:.68rem}.seo-content{width:calc(100vw - 1rem);padding:.78rem .84rem}.state-summary{grid-template-columns:1fr}.state-summary-right{justify-items:start}.state-summary-notes{justify-content:flex-start}.chip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tuning-grid,.legend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.workspace-content{gap:.62rem}.state-summary{padding:.68rem .76rem}.state-summary h1{font-size:1.14rem}.chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tuning-grid,.fret-range-row,.legend-grid{grid-template-columns:1fr}}@media(max-height:860px){.workspace-card{height:auto;min-height:0}.workspace-content{grid-template-columns:1fr;grid-template-rows:auto auto}.fretboard-frame{height:clamp(280px,44vh,500px)}.filter-panel{max-height:none;overflow-y:visible}}:root{color:#e7ebf5;background-color:#090d14;font-family:Segoe UI Variable,Aptos,Segoe UI,Inter,sans-serif;color-scheme:dark;line-height:1.45;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px}