:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-controls: #0f3460;--bg-surface: #1e2a4a;--text-primary: #e0e0e0;--text-secondary: #8090a8;--text-dim: #506070;--accent: #3b82f6;--accent-hover: #60a5fa;--accent-glow: rgba(59, 130, 246, .4);--accent-bg: rgba(59, 130, 246, .1);--border: #2a3550;--white: #ffffff}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary)}#app{display:flex;flex-direction:column;height:100vh}#audio-overlay{position:fixed;inset:0;background:#0a0a14eb;display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .3s}#audio-overlay.hidden{opacity:0;pointer-events:none}.overlay-content{text-align:center}.overlay-content h2{font-size:2rem;margin-bottom:.5rem;font-weight:300;letter-spacing:.05em}.overlay-content p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.95rem}.overlay-loading{color:var(--text-dim);font-size:.9rem}.overlay-part-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:500px;margin:0 auto}.overlay-part-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.95rem;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}.overlay-part-btn:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.overlay-part-btn kbd{font-family:inherit;font-size:.7rem;color:var(--text-dim);background:var(--bg-primary);padding:.1rem .35rem;border-radius:3px;border:1px solid var(--border)}.overlay-part-btn:hover kbd{color:#fff9;border-color:#fff3}.overlay-listen-btn{font-size:.8rem;color:var(--text-secondary);width:100%;justify-content:center;margin-top:.25rem;background:transparent;border-color:var(--border)}.overlay-listen-btn:hover{background:var(--bg-controls);border-color:var(--text-secondary);box-shadow:none}#app-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.title-group{display:flex;align-items:baseline}#score-title{font-size:1rem;font-weight:600;letter-spacing:.01em}.key-display{font-size:.8rem;color:var(--text-secondary);margin-left:.75rem}#file-input{display:none}.header-right{display:flex;align-items:center;gap:.5rem}.settings-wrapper{position:relative}.settings-gear-btn{font-size:1rem;padding:.25rem .5rem;line-height:1}.settings-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:.3rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:.5rem .75rem;z-index:100;min-width:220px;box-shadow:0 4px 16px #0006}.settings-dropdown.open{display:block}.settings-option{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-primary);cursor:pointer;padding:.25rem 0;white-space:nowrap}.settings-option input[type=checkbox]{accent-color:var(--accent);margin:0}.color-swatch-row{cursor:default}.color-swatches{display:flex;gap:.35rem;margin-left:auto}.color-swatch{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:border-color .15s,box-shadow .15s}.color-swatch:hover{border-color:var(--text-secondary)}.color-swatch.active{border-color:var(--white);box-shadow:0 0 0 1px var(--bg-surface)}.mixer-toggle-btn{display:flex;align-items:center;gap:.3rem}.mixer-toggle-arrow{font-size:.65rem;line-height:1}.file-label{padding:.35rem .9rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.8rem;color:var(--text-secondary);transition:background .2s,color .2s}.file-label:hover{background:var(--accent);color:var(--white)}#score-container{flex:1;overflow-y:auto;background:var(--white);position:relative;min-height:200px}#score-container.scroll-mode{overflow-x:auto;overflow-y:auto}#controls-panel{background:var(--bg-secondary);border-top:1px solid var(--border);padding:0;flex-shrink:0;max-height:45vh;overflow-y:auto}.toolbar{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;background:var(--bg-secondary);flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:.35rem}.toolbar-divider{width:1px;height:24px;background:var(--border);margin:0 .25rem;flex-shrink:0}.control-btn{padding:.3rem .65rem;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:.8rem;transition:background .15s,border-color .15s;white-space:nowrap}.control-btn:hover{background:var(--bg-controls);border-color:var(--text-secondary)}.btn-play{background:var(--accent);border-color:var(--accent);color:var(--white);font-weight:600;min-width:52px}.btn-play:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.shortcut-hint{font-family:inherit;font-size:.6rem;color:var(--text-dim);background:#00000040;padding:.05rem .3rem;border-radius:2px;margin-left:.3rem;vertical-align:baseline;border:1px solid rgba(255,255,255,.08)}.btn-play .shortcut-hint{background:#0003;color:#ffffff80;border-color:#ffffff1a}@media(hover:none){.shortcut-hint{display:none}}.metro-dot{width:18px;height:18px;border-radius:50%;background:var(--border);flex-shrink:0}.metro-dot.beat{animation:metro-flash .4s ease-out}.metro-dot.downbeat{animation:metro-flash-strong .45s ease-out}@keyframes metro-flash{0%{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}to{background:var(--border);box-shadow:none}}@keyframes metro-flash-strong{0%{background:var(--accent);box-shadow:0 0 14px var(--accent),0 0 4px var(--accent)}30%{background:var(--accent-hover);box-shadow:0 0 8px var(--accent-glow)}to{background:var(--border);box-shadow:none}}.beat-display{font-size:.85rem;font-weight:700;min-width:14px;text-align:center;color:var(--text-dim);font-variant-numeric:tabular-nums;transition:color .12s;line-height:1}.beat-display.active{color:var(--text-secondary)}.beat-display.downbeat{color:var(--accent)}.tempo-group{display:flex;align-items:center;gap:.3rem}.tempo-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.tempo-slider{width:100px;accent-color:var(--accent);height:4px}.tempo-display{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:60px;text-align:right}.loop-group{display:flex;align-items:center;gap:.3rem}.loop-group label{font-size:.75rem;color:var(--text-dim);cursor:pointer;text-transform:uppercase;letter-spacing:.05em}.loop-input{width:42px;padding:.15rem .3rem;background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:3px;font-size:.8rem;text-align:center;font-variant-numeric:tabular-nums}.loop-input:focus{border-color:var(--accent);outline:none}.loop-dash{color:var(--text-dim);font-size:.75rem}.loop-group input[type=checkbox]{accent-color:var(--accent);margin:0}#mixer-panel{border-top:1px solid var(--border);padding:0}.mixer-rows{padding:0 .75rem .5rem}#mixer-panel.collapsed .mixer-rows{display:none}.mixer-row{display:flex;align-items:center;gap:.4rem;padding:.2rem .4rem;border-left:3px solid transparent;border-radius:3px;transition:background .15s,border-color .15s}.mixer-row+.mixer-row{margin-top:1px}.mixer-row.active{border-left-color:var(--accent);background:var(--accent-bg)}.part-name-btn{flex:1;display:flex;align-items:center;gap:.3rem;text-align:left;padding:.2rem .4rem;background:none;color:var(--text-primary);border:none;cursor:pointer;font-size:.8rem;border-radius:3px;transition:background .15s;white-space:nowrap;overflow:hidden}.part-name-btn span{overflow:hidden;text-overflow:ellipsis}.part-name-btn:hover{background:#ffffff12}.mixer-btn{width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);color:var(--text-dim);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-size:.7rem;font-weight:700;transition:background .15s,color .15s,border-color .15s}.mixer-btn:hover{background:var(--bg-controls);color:var(--text-secondary)}.mixer-btn.engaged{background:var(--accent);color:var(--white);border-color:var(--accent)}.vol-slider{width:70px;accent-color:var(--accent);height:3px}@media(max-width:700px){.toolbar{gap:.3rem;padding:.4rem .5rem}.toolbar-divider{display:none}.tempo-slider{width:70px}.vol-slider{width:50px}.mixer-row{gap:.2rem}.control-btn{padding:.25rem .5rem;font-size:.75rem}}.score-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.interval-label{position:absolute;font-size:.6rem;font-weight:600;padding:1px 3px;border-radius:3px;white-space:nowrap;transform:translate(-50%,-100%)}.interval-up{color:#fff;background:#2980b9d1}.interval-down{color:#fff;background:#c0392bd1}.interval-label.interval-between{transform:translate(-50%,-50%)}#section-bar{display:none;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:.3rem .75rem;flex-shrink:0;gap:.5rem}#section-bar.visible{display:flex}.section-pills{display:flex;gap:.35rem;overflow-x:auto;flex:1;scrollbar-width:thin}.section-pill{display:flex;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);flex-shrink:0;transition:border-color .15s,box-shadow .15s,opacity .15s}.section-pill.playing{box-shadow:0 0 6px var(--accent-glow);border-color:var(--accent)}.section-pill.looping{border-color:var(--accent)}.section-pill.hidden-section .hide-icon{color:var(--accent);background:var(--accent-bg)}.section-pill-label{background:none;border:none;color:var(--text-primary);font-size:.72rem;padding:.2rem .5rem;cursor:pointer;white-space:nowrap;border-radius:14px 0 0 14px;transition:background .12s}.section-pill-label:hover{background:#ffffff14}.section-pill-icon{background:none;border:none;border-left:1px solid var(--border);color:var(--text-dim);font-size:.7rem;padding:.2rem .35rem;cursor:pointer;line-height:1;transition:color .12s,background .12s}.section-pill-icon:last-child{border-radius:0 14px 14px 0}.section-pill-icon:hover{color:var(--text-primary);background:#ffffff14}.section-pill.looping .loop-icon{color:var(--accent);background:var(--accent-bg)}.phrase-length-control{display:flex;align-items:center;gap:.3rem;border-left:1px solid var(--border);padding-left:.5rem;flex-shrink:0}.phrase-length-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.phrase-length-select{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:3px;font-size:.75rem;padding:.15rem .3rem}.mask-overlay{z-index:9}.measure-mask{position:absolute;background:#fff;pointer-events:none;border-radius:2px;display:flex;align-items:center;justify-content:center}.measure-mask-label{color:#aaa;font-size:16px;font-style:italic;white-space:nowrap;-webkit-user-select:none;user-select:none}.loop-overlay{z-index:1}.loop-highlight{position:absolute;background:#6366f114;border-left:2px solid rgba(99,102,241,.35);border-right:2px solid rgba(99,102,241,.35);pointer-events:none;border-radius:2px}