:root{--bg: #14161c;--panel: #1d212b;--panel-2: #242a36;--ink: #e9ecf2;--muted: #9aa3b2;--line: #323a49;--accent: #6ea8fe;--accent-2: #f0a35e;--good: #5fd0a0;--radius: 10px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.app-header h1{margin:0;font-size:26px;letter-spacing:-.01em}.tagline{margin:4px 0 18px;color:var(--muted)}.app-title-row{display:flex;align-items:center;gap:10px}.reset-all{margin-left:auto;font-size:.8rem}.help{position:relative;display:inline-flex}.help-toggle{width:26px;height:26px;border-radius:999px;line-height:1;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:15px;font-weight:700;cursor:pointer}.help-toggle:hover,.help-toggle.is-open{border-color:var(--accent);color:var(--ink)}.help-panel{position:absolute;top:34px;left:0;z-index:50;width:min(400px,92vw);max-height:72vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 12px 32px #00000073}.help-panel h3{margin:12px 0 6px;font-size:14px}.help-panel h3:first-child{margin-top:0}.help-list{margin:0;padding-left:20px}.help-list li{font-size:13px;color:var(--muted);margin:4px 0;line-height:1.4}.help-list b{color:var(--ink)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}.box{border-color:color-mix(in srgb,var(--box-accent) 30%,var(--line));border-left:3px solid var(--box-accent)}.box--piece{--box-accent: #6ea8fe}.box--melody{--box-accent: #f0a35e}.box--play{--box-accent: #5fd0a0}.box--prog{--box-accent: #b48cf0}.box--export{--box-accent: #57c7c7}.box--tv{--box-accent: #e07ba0}.box-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--muted);margin-bottom:12px}.box .box-label,.box--prog .panel-head h2,.box--export .export-label{color:var(--box-accent)}.tv-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.tv-head .box-label{margin-bottom:0}.tv-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}.box--tv .controls-bar{margin-top:12px}.box--tv .chips{margin-top:10px}.controls-bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}.field{display:flex;flex-direction:column;gap:4px}.field-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.control{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:14px;min-width:70px}input.control{width:84px}.control:disabled,.control.is-inert{opacity:.4;cursor:not-allowed}.controls-actions{display:flex;gap:8px;margin-left:auto;align-items:flex-end}.method-mode-toggle{align-self:flex-end;padding:7px 12px}.btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;transition:background .12s,border-color .12s}.btn:hover{background:#2c3340}.btn-primary{background:var(--accent);border-color:var(--accent);color:#0c1220;font-weight:600}.btn-primary:hover{filter:brightness(1.07)}.btn-accent{background:transparent;border-color:var(--accent-2);color:var(--accent-2)}.btn-accent:hover{background:#f0a35e1f}.playback-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.playback-right{display:flex;align-items:center;gap:16px;margin-left:auto}.backing-control{display:flex;align-items:center;gap:8px}.playback-right .field{gap:4px}.backing-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.backing-slider{width:130px;accent-color:var(--accent)}.backing-readout{font-size:12px;color:var(--muted);width:48px;text-align:right;font-variant-numeric:tabular-nums}.staff-panel{overflow-x:auto}.staff svg{background:#fbfbf8;border-radius:8px}.staff-locks{display:flex;align-items:center;gap:10px;margin:0 0 6px;min-height:24px}.staff-locks-hint{font-size:12px;color:#8a93a6}.staff-locks-clear{font-size:12px;padding:2px 10px}.staff-lock-hit{cursor:pointer}.staff-lock-hit:hover{fill:#3b6ef01a}.export-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.export-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:4px}.export-status{color:var(--muted);font-size:13px;margin-left:4px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head h2{margin:0;font-size:16px}.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px}.tab{background:none;border:none;color:var(--muted);padding:8px 14px;cursor:pointer;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}.tab:hover{color:var(--ink)}.tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}.chip:hover{border-color:var(--accent)}.chip.is-active{background:var(--accent);border-color:var(--accent);color:#0c1220;font-weight:600}.chip-chord{cursor:default;font-variant-numeric:tabular-nums}.chip-chord:hover{border-color:var(--line)}.chips-readout{margin-top:6px}.mood-chip{border-left-width:3px}.mood-prog-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}.mood-prog{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;cursor:pointer;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px}.mood-prog:hover{border-color:var(--accent)}.mood-prog-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}.mood-prog-name{font-weight:600;font-size:14px}.mood-prog-ex{color:var(--muted);font-size:12px}.mood-prog-chords{gap:6px}.mood-prog-chords .chip-chord{padding:3px 9px;font-size:12px}.hint{color:var(--muted);font-size:13px;margin:14px 0 6px}.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.build-cell{display:flex;flex-direction:column;gap:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px;align-items:center}.build-measure{font-size:11px;color:var(--muted)}.build-symbol{font-size:13px;font-weight:600}.chord-entry{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}.chord-input{flex:1;min-width:240px}.chord-error{color:#e88;font-size:13px}.timeline{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.tl-chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 12px;cursor:grab}.tl-chip:hover{border-color:var(--accent)}.tl-chip--pinned{border-style:dashed}.tl-symbol{font-weight:600;font-size:14px}.tl-numeral{color:var(--muted);font-size:12px}.tl-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}.tl-remove:hover{color:#e88}.palette{display:flex;flex-direction:column;gap:10px}.sugg-row{display:flex;align-items:flex-start;gap:12px}.sugg-label{flex:0 0 72px;text-align:right;padding-top:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.sugg-chip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}.sugg-symbol{font-weight:600}.sugg-numeral{font-size:11px;color:var(--muted);font-style:italic}@media (max-width: 720px){.controls-actions{margin-left:0;width:100%}.sugg-row{flex-direction:column;gap:4px}.sugg-label{text-align:left;flex-basis:auto;padding-top:0}}@media (max-width: 560px){#app{padding:16px 12px 56px}.app-header h1{font-size:22px}.controls-bar{gap:10px 12px}.field{flex:1 1 calc(50% - 12px);min-width:0}.control,input.control{width:100%;min-width:0}.controls-actions{flex-wrap:wrap}.controls-actions .field{flex-basis:100%}.btn{padding:10px 14px}.btn-primary,.controls-actions>.btn{flex:1 1 auto}.playback-right{width:100%;margin-left:0;flex-wrap:wrap;gap:10px}.backing-control{flex:1 1 100%;margin-left:0}.backing-slider{flex:1;width:auto}.panel-head{flex-direction:column;align-items:flex-start}.chord-input{min-width:0}.help-panel{position:fixed;left:12px;right:12px;top:56px;width:auto;max-width:none}}