:root{--bg:#0d1117;--card:#161b22;--card2:#1c232d;--border:#2b333d;--text:#e6edf3;--muted:#8b98a5;--accent:#58a6ff;--accent2:#f0a35e;--good:#3fb950}[data-theme=light]{--bg:#eef1f5;--card:#fff;--card2:#e9edf3;--border:#ccd3dd;--text:#1d2733;--muted:#5d6876;--accent:#2f6fd0;--accent2:#c97b1e;--good:#1e9e4a}[data-theme=light] .dg-txt,[data-theme=light] .dg-stxt,[data-theme=light] .seg.sel+.seg-label,[data-theme=light] .seg-label.sel,[data-theme=light] .pk-lab{fill:#fff}[data-theme=light] .pb{fill:#2a2f36}[data-theme=light] .dg-line{stroke:#b6bfcb}[data-theme=light] .dg-str{stroke:#8b98a5}[data-theme=light] .pw{fill:#fdfdfd}[data-theme=light] .pw.on{fill:var(--accent)}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}header{text-align:center;padding:22px 16px 8px;position:relative}header h1{letter-spacing:.5px;margin:0;font-size:28px}.alpha-badge{vertical-align:middle;letter-spacing:.08em;text-transform:uppercase;color:#111;background:var(--accent);border-radius:999px;margin-left:10px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-block;transform:translateY(-4px)}header .sub{color:var(--muted);margin:4px 0 0;font-size:14px}.hdr-btns{gap:8px;display:flex;position:absolute;top:20px;right:16px}.theme-btn{padding:6px 11px;font-size:12.5px}.gear-btn{padding:6px 10px;font-size:15px;line-height:1}.settings-panel{z-index:60;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;width:250px;padding:14px 16px;display:flex;position:absolute;top:56px;right:16px;box-shadow:0 12px 32px #0006}.settings-panel[hidden]{display:none}.settings-panel h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-size:12px;font-weight:700}.set-row{color:var(--text);align-items:center;gap:8px;font-size:13px;display:flex}.set-btn{text-align:center;width:100%;font-size:13px}body{transition:background .18s,color .18s}.board-wrap{justify-content:center;max-width:1640px;margin:0 auto;display:flex}main#board{margin:14px 0 40px;padding:0 5px;position:relative}.tool{width:min(400px,100%);margin-bottom:10px}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:0;padding:16px}.card h2{margin:0 0 12px;font-size:16px;font-weight:600}.tool-head{align-items:center;gap:8px;display:flex}.tool-head h2{margin:0 0 12px}.tool-desc{color:var(--muted);margin:-6px 0 10px;font-size:12px}.tool-actions{flex:none;align-items:center;gap:2px;margin-bottom:8px;margin-left:auto;display:flex}.drag-handle{cursor:grab;color:var(--muted);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;flex:none;padding:4px 7px;font-size:17px;line-height:1}.tool-close{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 7px;font-size:18px;line-height:1}.drag-handle:hover,.tool-close:hover{color:var(--text);background:var(--card2)}.tool-close:hover{color:#f87171}.drag-handle:active{cursor:grabbing}.tool-off{display:none!important}.tool.dragging{z-index:1000;pointer-events:none;opacity:.92;position:fixed;box-shadow:0 12px 40px #00000073}.ph{pointer-events:none;border:2px dashed var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);box-shadow:0 0 20px 3px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);box-sizing:border-box;border-radius:12px;transition:left .13s,top .13s,width .13s,height .13s,opacity .15s;position:absolute}body.drag-active{-webkit-user-select:none;user-select:none;overflow:hidden}.circle-card{text-align:center}#circle{width:100%;max-width:460px;height:auto;margin:0 auto;display:block}.seg{fill:var(--card2);stroke:var(--bg);stroke-width:2px;cursor:pointer;transition:fill .12s}.seg:hover{fill:#26303c}.seg.sel{fill:var(--accent)}.seg.sel-min{fill:#3b6fa8}.seg.chord-sel{stroke:var(--accent2);stroke-width:4px}.seg-label{fill:var(--text);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:15px;font-weight:600}.seg-label.minor{fill:var(--muted);font-size:11.5px;font-weight:500}.seg.sel+.seg-label,.seg-label.sel{fill:#06121f}.inner-disc{fill:var(--card);stroke:var(--border)}.center-key{fill:var(--text);text-anchor:middle;font-size:44px;font-weight:700}.center-sub{fill:var(--muted);text-anchor:middle;font-size:13px}.center-rel{fill:var(--accent);text-anchor:middle;cursor:pointer;font-size:12.5px}.center-rel:hover{text-decoration:underline}.key-info{color:var(--muted);margin-top:8px;font-size:14px}.key-info b{color:var(--text)}.mode-row{color:var(--muted);justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:13px;display:flex}.mode-row select{padding:5px 10px;font-size:13px}.legend{color:var(--muted);align-items:center;margin-top:8px;font-size:12px;display:flex}.legend .dot{background:var(--accent);border-radius:50%;width:11px;height:11px;margin:0 5px 0 10px;display:inline-block}.legend .dot.root{background:var(--accent2);margin-left:0}.scale-notes{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;display:flex}.scale-notes span{background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:13px}.hint{color:var(--muted);margin-top:12px;font-size:12px}.circle-opts{justify-content:center;align-items:center;gap:10px;margin-top:10px;display:flex}.circle-opts .btn{padding:2px 10px;font-size:12px}.vibe-out{border:1px dashed var(--muted);border-radius:8px;min-height:64px;margin-bottom:8px;padding:10px 12px}.vibe-idle{color:var(--muted);font-size:12px;font-style:italic}.vibe-mood{text-transform:capitalize;font-size:22px;font-weight:700}.vibe-key{color:var(--accent);margin:2px 0;font-weight:600}.vibe-feel{color:var(--muted);font-size:12px;font-style:italic}.deg-badge{stroke:var(--bg);stroke-width:1.5px;pointer-events:none}.deg-badge.T{fill:var(--accent)}.deg-badge.S{fill:var(--good)}.deg-badge.D{fill:var(--accent2)}.deg-txt{fill:#06121f;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:8px;font-weight:700}.deg-legend{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:10px;font-size:11.5px;display:flex}.deg-legend .dot{vertical-align:-1px;border-radius:50%;width:10px;height:10px;margin-right:5px;display:inline-block}.deg-legend .dot.T{background:var(--accent)}.deg-legend .dot.S{background:var(--good)}.deg-legend .dot.D{background:var(--accent2)}.deg-legend b{color:var(--text);font-weight:600}.seg-cam{fill:var(--muted);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:9px}.seg-cam.sel{fill:#06121f;font-weight:700}[data-theme=light] .seg-cam.sel{fill:#fff}#circle.camelot-on .seg{transition:filter .1s}#circle.camelot-on .seg:hover{filter:brightness(1.14)}#circle.camelot-on .seg.sel,#circle.camelot-on .seg.sel-min{stroke:var(--text);stroke-width:3.5px}#circle.camelot-on .seg-label,#circle.camelot-on .seg-label.minor,#circle.camelot-on .seg-cam,#circle.camelot-on .seg-cam.sel{fill:#1c2330}#circle.camelot-on .seg-cam{font-weight:600}.id-note{fill:var(--muted);text-anchor:middle;font-size:9.5px}.id-note.sel{fill:var(--accent);font-weight:700}.controls{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}select,.btn{background:var(--card2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:7px 12px;font-size:14px}select:hover,.btn:hover{border-color:var(--accent)}.btn.accent{background:var(--accent);border-color:var(--accent);color:#06121f;font-weight:600}.btn.accent:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:default}#preset{min-width:200px}.chords{flex-wrap:wrap;gap:8px;display:flex}.chord-chip{background:var(--card2);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:8px;min-width:64px;padding:8px 10px;transition:border-color .12s,transform 80ms}.chord-chip:hover{border-color:var(--accent);transform:translateY(-1px)}.chord-chip.sel{border-color:var(--accent);background:#1d2f44}.chord-chip.playing{border-color:var(--accent2);background:#3a2a1a}.chord-chip .num{color:var(--muted);font-size:11px;display:block}.chord-chip .nm{margin-top:2px;font-size:15px;font-weight:600;display:block}.chord-chip.sel .nm{color:var(--accent)}.chord-chip.borrowed{border-style:dashed;border-color:var(--accent2)}#romanInput{flex:1;min-width:150px}.tag{color:var(--accent);border:1px solid var(--accent);vertical-align:middle;border-radius:20px;margin-left:6px;padding:2px 9px;font-size:11px;font-weight:500}.chord-head{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.chord-head h2{min-width:90px;margin:0;font-size:26px}.chord-head .drag-handle{margin:0 0 0 auto}.chord-head .btn+.drag-handle{margin-left:6px}.inst-tabs{border:1px solid var(--border);border-radius:8px;display:flex;overflow:hidden}.inst-tabs .tab{background:var(--card2);color:var(--muted);cursor:pointer;border:none;padding:7px 14px;font-size:13px}.inst-tabs .tab+.tab{border-left:1px solid var(--border)}.inst-tabs .tab.active{background:var(--accent);color:#06121f;font-weight:600}.chord-head .btn{margin-left:auto}.tones{flex-wrap:wrap;gap:6px;margin:10px 0 4px;display:flex}.tones span{background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:4px 9px;font-size:13px}.tones span b{color:var(--accent2);margin-left:4px;font-weight:600}.shape-name{color:var(--muted);min-height:16px;font-size:12px}.fing-hint{color:var(--muted);min-height:14px;margin-top:4px;font-size:11px}.voicings{gap:8px;margin-top:8px;padding-bottom:4px;display:flex;overflow-x:auto}.vo-cell{text-align:center;cursor:pointer;border:1px solid #0000;border-radius:8px;flex:none;padding:4px}.vo-cell:hover{background:var(--card2)}.vo-cell.sel{border-color:var(--accent)}.vo-nm{color:var(--muted);white-space:nowrap;margin-bottom:2px;font-size:10px}.caged-grid{flex-wrap:wrap;gap:10px 6px;margin-top:8px;display:flex}.caged-cell{text-align:center}.caged-l{color:var(--accent);margin-bottom:2px;font-size:13px;font-weight:700}.diagram{margin-top:8px;overflow-x:auto}.diagram svg{max-width:100%;height:auto;display:block}.custom{color:var(--muted);align-items:center;gap:8px;margin-top:14px;font-size:13px;display:flex}.dg-line{stroke:#3a4552;stroke-width:2px}.dg-nut{stroke:var(--text);stroke-width:5px}.dg-str{stroke:#57616e;stroke-width:1.4px}.dg-dot{fill:var(--accent)}.dg-dot.root{fill:var(--accent2)}.dg-txt{fill:#06121f;text-anchor:middle;dominant-baseline:central;font-size:11px;font-weight:700}.dg-open{fill:var(--text);text-anchor:middle;font-size:13px}.dg-mute{fill:var(--muted);text-anchor:middle;font-size:13px}.dg-pos{fill:var(--muted);text-anchor:middle;font-size:12px}.dg-tune{fill:var(--muted);text-anchor:middle;font-size:11px}.dg-barre{fill:none;stroke:var(--accent);stroke-width:7px;stroke-linecap:round}.dg-sdot{fill:var(--accent)}.dg-sdot.root{fill:var(--accent2)}.dg-stxt{fill:#06121f;text-anchor:middle;dominant-baseline:central;font-size:9.5px;font-weight:700}.struct-h{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 6px;font-size:11px;font-weight:700}.struct-list{flex-direction:column;gap:4px;display:flex}.struct-list .row{background:var(--card2);border:1px solid var(--border);border-radius:7px;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 10px;font-size:13px;display:flex}.struct-list .row>span:first-child{font-weight:500}.struct-list .bars{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.metro-face{background:var(--card2);border:1px solid var(--border);border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:14px;padding:14px 18px;display:flex}#beatDots{flex-wrap:wrap;gap:10px;display:flex}.beat-dot{background:var(--border);border-radius:50%;width:18px;height:18px;transition:background 50ms,transform 50ms}.beat-dot.acc{border:2px solid var(--accent2);width:14px;height:14px}.beat-dot.hit{background:var(--accent);transform:scale(1.35)}.beat-dot.hit.acc{background:var(--accent2)}#beatNum{text-align:center;min-width:56px;color:var(--muted);font-size:34px;font-weight:700}#beatNum.hit{color:var(--text)}input[type=number]{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:8px;width:72px;padding:7px 10px;font-size:14px}input[type=range]{accent-color:var(--accent);flex:1;min-width:120px}.bpm-lab{color:var(--muted);font-size:13px}.lab{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:flex}input[type=text]{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:8px;width:120px;padding:7px 10px;font-family:ui-monospace,monospace;font-size:14px}.id-cell{cursor:pointer}.id-hit{fill:#0000;cursor:pointer}.id-hit:hover{fill:#8080802e}.id-sel{fill:var(--accent)}.id-seltxt{fill:#06121f;text-anchor:middle;dominant-baseline:central;font-size:9.5px;font-weight:700}.id-xo{text-anchor:middle;cursor:pointer;fill:var(--muted);font-size:12px}.id-xo.on{fill:var(--text);font-weight:700}.guess{flex-direction:column;display:flex}.guess .sc{color:var(--muted);margin-top:2px;font-size:10px}.pw{fill:#eef2f6;stroke:#222;stroke-width:1px}.pw.on{fill:var(--accent)}.pb{fill:#11151a;stroke:#000;stroke-width:1px}.pb.on{fill:var(--accent2)}.pk-lab{text-anchor:middle;fill:#06121f;font-size:10px;font-weight:700}.pk-lab.off{fill:var(--muted);font-weight:500}@media (width<=640px){header{padding:16px 12px 6px}header h1{font-size:22px}header .sub{padding:0 44px;font-size:12px}.hdr-btns{top:14px;right:10px}.theme-btn{padding:5px 8px;font-size:11px}.settings-panel{width:min(250px,100vw - 20px);top:48px;right:10px}main#board{margin-top:10px;padding:0 5px}.card{padding:12px}.controls{gap:6px}select,.btn{padding:7px 10px;font-size:13px}#preset{flex:1;min-width:0;max-width:100%}.chord-head{gap:8px}.chord-head h2{min-width:0;font-size:20px}.inst-tabs .tab{padding:7px 10px;font-size:12px}.chord-chip{min-width:56px;padding:7px 8px}input[type=range]{min-width:90px}}