:root{--bg: #ffffff;--fg: #1a1a1a;--bar-bg: #f4f4f5;--border: #d4d4d8;--accent: #2563eb;--note-active: #e0245e;--note-cursor: #2563eb;--bar-height: 3rem}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;overflow-x:hidden}.app{display:flex;flex-direction:column;height:100dvh}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-height:var(--bar-height);padding:.4rem .75rem;background:var(--bar-bg);border-bottom:1px solid var(--border);flex:none}.file{cursor:pointer;padding:.4rem .8rem;border:1px solid var(--border);border-radius:.375rem;background:var(--bg);white-space:nowrap}.file input{display:none}.title{font-weight:600;flex:1 1 4rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library{display:flex;align-items:center;gap:.375rem;min-width:0}.library select{max-width:10rem;padding:.35rem .4rem;border:1px solid var(--border);border-radius:.25rem;background:var(--bg);color:inherit}.library-remove{padding:.35rem .5rem;border:1px solid var(--border);border-radius:.25rem;background:var(--bg);color:inherit;cursor:pointer}.size{display:flex}.size button{min-width:2rem;padding:.2rem 0;border:1px solid var(--border);background:var(--bg);color:inherit;cursor:pointer}.size button:first-child{border-radius:.25rem 0 0 .25rem}.size button:last-child{border-radius:0 .25rem .25rem 0}.size button+button{border-left:none}.size button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}.tempo{display:flex;align-items:center;gap:.5rem}.tempo-bpm{display:flex;align-items:center;gap:.25rem;white-space:nowrap}.tempo-bpm input{width:4rem;padding:.2rem .25rem;border:1px solid var(--border);border-radius:.25rem;background:var(--bg);color:inherit}.tempo-presets{display:flex}.tempo-presets button{padding:.2rem .5rem;border:1px solid var(--border);background:var(--bg);color:inherit;cursor:pointer}.tempo-presets button:first-child{border-radius:.25rem 0 0 .25rem}.tempo-presets button:last-child{border-radius:0 .25rem .25rem 0}.tempo-presets button+button{border-left:none}.tempo-presets button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}.tempo-slider{width:6rem}.tempo-value{min-width:3rem;font-variant-numeric:tabular-nums}.play{margin-left:auto;padding:.4rem 1rem;border:none;border-radius:.375rem;background:var(--accent);color:#fff;font-size:1rem;cursor:pointer}.note{padding:1rem}.note.error{color:#b91c1c}.mixer{display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--bar-bg);flex:none;max-height:30dvh;overflow-y:auto}.mixer-row{display:flex;align-items:center;gap:.375rem}.mixer-row.is-excluded{opacity:.45}.mixer-name{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mixer-kind{padding:.2rem .25rem;border:1px solid var(--border);border-radius:.25rem;background:var(--bg);color:inherit}.mixer-levels{display:flex}.mixer-levels button{min-width:2rem;padding:.2rem 0;border:1px solid var(--border);background:var(--bg);color:inherit;cursor:pointer}.mixer-levels button:first-child{border-radius:.25rem 0 0 .25rem}.mixer-levels button:last-child{border-radius:0 .25rem .25rem 0}.mixer-levels button+button{border-left:none}.mixer-levels button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}.score-area{position:relative;flex:1;display:flex;min-height:0}.follow{position:absolute;right:.75rem;bottom:.75rem;padding:.5rem .9rem;border:none;border-radius:999px;background:var(--accent);color:#fff;font-size:.9rem;box-shadow:0 2px 8px #00000040;cursor:pointer}.score{flex:1;overflow-y:auto;scrollbar-gutter:stable;overflow-x:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}.score-page+.score-page{border-top:1px solid var(--border)}.score svg{display:block}.score .is-active,.score .is-active *{fill:var(--note-active);stroke:var(--note-active)}.score .is-cursor,.score .is-cursor *{fill:var(--note-cursor);stroke:var(--note-cursor)}