:root{--bg:#0f1115;--bg-elevated:#171a21;--bg-soft:#1e222b;--border:#2b303b;--text:#e7e9ee;--text-muted:#9aa2b1;--accent:#f0923b;--accent-soft:#f0923b24;--diagram-line:#cfd6e4;--diagram-text:#f4f6fa;--radius:12px;--radius-sm:8px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);margin:0}h1,h2{line-height:1.2}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.app{flex-direction:column;min-height:100%;display:flex}.site-header{border-bottom:1px solid var(--border);background:var(--bg-elevated);z-index:10;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex;position:sticky;top:0}.brand{letter-spacing:.2px;font-weight:700}.site-nav a{border-radius:var(--radius-sm);color:var(--text-muted);padding:.4rem .75rem;font-weight:600}.site-nav a.active{color:var(--text);background:var(--bg-soft)}.site-main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:1.5rem}.btn{border:1px solid var(--border);background:var(--bg-soft);color:var(--text);border-radius:var(--radius-sm);padding:.55rem 1rem;font-weight:600;transition:background .15s,border-color .15s;display:inline-block}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1206}.btn-primary:hover{filter:brightness(1.07)}.btn-ghost{color:var(--text-muted);background:0 0}.home-page{text-align:center;max-width:620px;margin:4rem auto}.home-page h1{margin-bottom:.5rem;font-size:2.4rem}.home-page .lead{color:var(--text-muted);margin-bottom:1.75rem;font-size:1.1rem}.muted{color:var(--text-muted)}.chords-toolbar{flex-direction:column;gap:.75rem;margin-bottom:1.25rem;display:flex}.search-input{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);width:100%;color:var(--text);padding:.7rem .9rem;font-size:1rem}.search-input:focus{outline:2px solid var(--accent);outline-offset:1px}.quality-chips{flex-wrap:wrap;gap:.4rem;display:flex}.chip{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);border-radius:999px;padding:.3rem .75rem;font-size:.85rem;font-weight:600}.chip:hover{color:var(--text)}.chip-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.chords-layout{grid-template-columns:minmax(240px,320px) 1fr;align-items:start;gap:1.25rem;display:grid}.chord-picker{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);position:sticky;top:84px;overflow:hidden}.chord-picker-header{border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:.6rem .9rem;font-size:.8rem}.chord-results{flex-direction:column;gap:.15rem;max-height:calc(100vh - 220px);margin:0;padding:.35rem;list-style:none;display:flex;overflow-y:auto}.chord-result{text-align:left;border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;grid-template-columns:1fr auto auto;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;display:grid}.chord-result:hover{background:var(--bg-soft)}.chord-result-selected{background:var(--accent-soft);border-color:var(--accent)}.chord-result-name{font-weight:700}.chord-result-meta{color:var(--text-muted);font-size:.75rem}.chord-result-add{border:1px solid var(--border);width:1.4rem;height:1.4rem;color:var(--text-muted);border-radius:50%;place-items:center;font-size:.85rem;display:grid}.chord-result-selected .chord-result-add{background:var(--accent);border-color:var(--accent);color:#1a1206}.chord-empty{color:var(--text-muted);padding:1rem .75rem;font-size:.9rem}.chord-board-header{justify-content:space-between;align-items:center;margin-bottom:.85rem;display:flex}.chord-board-header h2{margin:0;font-size:1.15rem}.chord-board-empty{border:1px dashed var(--border);border-radius:var(--radius);text-align:center;color:var(--text-muted);padding:2.5rem 1.5rem}.chord-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.chord-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);flex-direction:column;align-items:center;gap:.4rem;padding:1rem .75rem .85rem;display:flex;position:relative}.chord-card-name{font-size:1.05rem;font-weight:700}.chord-card-remove{width:1.5rem;height:1.5rem;color:var(--text-muted);background:0 0;border:none;border-radius:50%;place-items:center;font-size:1.15rem;line-height:1;display:grid;position:absolute;top:.4rem;right:.45rem}.chord-card-remove:hover{background:var(--bg-soft);color:var(--text)}.chord-diagram{max-width:100%;display:block}.cd-string,.cd-fret{stroke:var(--diagram-line);stroke-width:1px}.cd-nut{stroke:var(--diagram-line);stroke-width:5px;stroke-linecap:round}.cd-dot{fill:var(--accent)}.cd-open{fill:none;stroke:var(--diagram-text);stroke-width:1.5px}.cd-muted line{stroke:var(--diagram-text);stroke-width:1.5px;stroke-linecap:round}.cd-finger{fill:#1a1206;text-anchor:middle;dominant-baseline:central;font-size:10px;font-weight:700}.cd-fret-number{fill:var(--diagram-text);text-anchor:middle;font-size:11px;font-weight:600}.metronome-page{justify-content:center;padding-top:1rem;display:flex}.metronome-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elevated);flex-direction:column;align-items:center;gap:1.1rem;width:100%;max-width:460px;padding:1.75rem 1.5rem;display:flex}.beat-lights{flex-wrap:wrap;justify-content:center;gap:.6rem;min-height:1.25rem;display:flex}.beat-light{background:var(--bg-soft);border:1px solid var(--border);border-radius:50%;width:1rem;height:1rem;transition:transform 60ms,background 60ms,box-shadow 60ms}.beat-light-downbeat{border-color:var(--accent)}.beat-light-active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent);transform:scale(1.35)}.bpm-display{align-items:baseline;gap:.4rem;display:flex}.bpm-value{font-variant-numeric:tabular-nums;font-size:4rem;font-weight:800;line-height:1}.bpm-unit{color:var(--text-muted);letter-spacing:.08em;font-size:1rem;font-weight:600}.bpm-slider{width:100%;accent-color:var(--accent);cursor:pointer}.bpm-controls{gap:.5rem;display:flex}.bpm-controls .btn{text-align:center;min-width:3.2rem;padding:.45rem .6rem}.metronome-play{width:100%;padding:.85rem;font-size:1.1rem}.metronome-play-stop{color:#fff;background:#b0392b;border-color:#b0392b}.metronome-options{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;width:100%;display:flex}.field{color:var(--text-muted);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.field select{font:inherit;color:var(--text);background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .6rem}.field-check{cursor:pointer;flex-direction:row;align-items:center;gap:.5rem}.field-check input{accent-color:var(--accent);cursor:pointer;width:1.05rem;height:1.05rem}.metronome-extras{border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:.75rem;width:100%;padding-top:1rem;display:flex}.preset-row{flex-wrap:wrap;justify-content:center;gap:.4rem;display:flex}@media (width<=760px){.chords-layout{grid-template-columns:1fr}.chord-picker{position:static}.chord-results{max-height:300px}.site-main{padding:1rem}}