:root{--room:#e9e3d8;--oak:#d5bd94;--oak-deep:#c3a778;--oak-edge:#e8d8b8;--felt:#7b2a2a;--ivory:#f6f0dd;--ivory-shade:#dccfb1;--ebony:#1c1a17;--ebony-face:#2b2825;--brass:#b8905a;--brass-ink:#75521f;--ink:#2a1c13;--text:var(--ink);--text-dim:#5e5145;--line:#75521f73;--panel:#f3ecdc;--panel-deep:#eadfc9;--paper:#faf6ee;--shadow:#3c281459;--cap-brown:#6e4a2e;--cap-black:#1f1d1a;--cap-white:#f7f2e6;--font:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;--music-font:"Bravura Notation"}@font-face{font-family:Bravura Notation;src:url(/assets/bravura-notation-BIruSJf2.woff2)format("woff2");font-display:block}*{box-sizing:border-box}html,body{background:var(--room);min-height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.45}body{background:radial-gradient(ellipse at 50% 0%, #f6f2ea 0%, var(--room) 60%);place-items:center;min-height:100vh;padding:24px 16px;display:grid}.console{background:linear-gradient(180deg, var(--oak-edge) 0, var(--oak) 6px, var(--oak-deep) 100%);width:min(1200px,100%);box-shadow:0 40px 80px -30px var(--shadow), inset 0 1px 0 #ffffff80;border-radius:10px 10px 4px 4px;padding:20px 20px 16px}.rail{grid-template-columns:auto 1fr auto;align-items:end;gap:24px;padding:4px 8px 18px;display:grid}.rail__title{letter-spacing:.02em;color:var(--brass-ink);align-self:start;margin:0 0 6px;font-size:15px;font-weight:500}.drawbars{background:linear-gradient(#e9dec8,#ddcfb0);border-radius:4px;justify-content:center;gap:10px;padding:6px 12px 0;display:flex;box-shadow:inset 0 2px 6px #3c281440}.drawbar{--travel:96px;--cap-h:34px;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;width:36px;padding-bottom:20px;position:relative}.drawbar:focus-visible{box-shadow:0 0 0 2px var(--brass)}.drawbar__track{height:calc(var(--travel) + var(--cap-h));position:relative}.drawbar__shaft{width:10px;height:calc(var(--level) / 8 * var(--travel) + var(--cap-h) / 2);background:linear-gradient(90deg,#6b655e,#b5ada1 45%,#6b655e);border-radius:0 0 2px 2px;transition:height 60ms ease-out;position:absolute;top:0;left:50%;transform:translate(-50%)}.drawbar__cap{left:0;right:0;top:calc(var(--level) / 8 * var(--travel));height:var(--cap-h);box-shadow:0 3px 6px var(--shadow), inset 0 1px 0 #ffffff40;border-radius:3px;place-items:center;transition:top 60ms ease-out;display:grid;position:absolute}.drawbar--brown .drawbar__cap{background:var(--cap-brown);color:var(--ivory)}.drawbar--black .drawbar__cap{background:var(--cap-black);color:var(--ivory)}.drawbar--white .drawbar__cap{background:var(--cap-white);color:var(--ebony)}.drawbar__footage{letter-spacing:.01em;white-space:nowrap;font-size:10.5px;font-weight:600}.drawbar__level{text-align:center;font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px;position:absolute;bottom:0;left:0;right:0}.rail__controls{justify-items:end;gap:12px;display:grid}.presets{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:260px;display:flex}.preset{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:4px 10px;font-size:12.5px}.preset:hover{border-color:var(--brass)}.preset:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.tabs{flex-wrap:wrap;justify-content:flex-end;gap:18px;display:flex}.tab{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:13px;display:inline-flex}.tab:focus-visible .tab__rocker{outline:2px solid var(--brass);outline-offset:3px}.tab__lamp{background:#b9a887;border-radius:50%;width:8px;height:8px;transition:background .12s,box-shadow .12s;box-shadow:inset 0 1px 1px #3c281480}.tab--on .tab__lamp{background:#ffb347;box-shadow:0 0 6px 2px #ffb3478c,inset 0 0 2px #fffc}.tab__rocker{perspective:120px;width:28px;height:44px;box-shadow:0 2px 4px var(--shadow);background:#7a6a52;border-radius:3px;grid-template-rows:1fr 1fr;display:grid;overflow:hidden}.tab__face{transition:background .12s,transform .12s;display:block}.tab__face--top{background:linear-gradient(180deg, #fbf6e8, var(--ivory));transform-origin:bottom;transform:rotateX(18deg)}.tab__face--bottom{transform-origin:top;background:linear-gradient(#a89c82,#8f8369);transform:rotateX(-18deg)}.tab--on .tab__face--top{background:linear-gradient(#8f8369,#a89c82)}.tab--on .tab__face--bottom{background:linear-gradient(180deg, var(--ivory), #fbf6e8)}.tab__text{text-align:left;line-height:1.2;display:grid}.tab__state{color:var(--text-dim);font-size:12px}.tab--on .tab__state{color:#b8741a}.volume{align-items:center;gap:10px;font-size:13px;display:flex}.volume input{width:120px;accent-color:var(--brass-ink)}.midi{align-items:center;gap:10px;margin:0;font-size:13px;display:flex}.midi__note{color:var(--text-dim);text-align:right;max-width:260px}.midi select{font:inherit;border:1px solid var(--line);color:var(--text);background:0 0;border-radius:6px;max-width:180px;padding:3px 8px;font-size:12.5px}.midi select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.fallboard{background:linear-gradient(180deg, var(--oak-edge), var(--oak-deep) 70%, var(--felt) 70%);height:14px;box-shadow:0 2px 4px var(--shadow);border-radius:3px 3px 0 0;margin:0 -4px}.manual{--white-w:calc(100% / var(--white-count));background:var(--ebony);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:0 0 4px 4px;height:clamp(120px,22vw,190px);position:relative;overflow:hidden}.key{top:0;left:calc(var(--offset) * var(--white-w));cursor:pointer;position:absolute}.key--white{width:var(--white-w);background:linear-gradient(180deg, var(--ivory) 0 85%, var(--ivory-shade));border-right:1px solid #b3a88f;border-bottom:5px solid var(--ivory-shade);border-radius:0 0 3px 3px;height:100%;box-shadow:inset 0 -1px #0003}.key--white.key--down{background:linear-gradient(180deg, var(--ivory-shade), #cbbf9f);border-bottom-width:2px;box-shadow:inset 0 6px 8px -4px #00000073}.key--black{width:calc(.62 * var(--white-w));z-index:1;background:linear-gradient(180deg, var(--ebony-face) 0 88%, #0e0d0b);border-radius:0 0 3px 3px;height:62%;box-shadow:0 4px 6px #0009,inset 1px 0 #ffffff14,inset -1px 0 #0009}.key--black.key--down{background:#14120f;height:60%;box-shadow:0 1px 2px #0009}.key__name,.key__hint{text-align:center;pointer-events:none;font-size:11px;position:absolute;left:0;right:0}.key__name{color:#8a7f68;bottom:8px}.key__hint{color:#b0a58a;bottom:24px}.key--black .key__hint{color:#8e8778;bottom:8px}.hint{color:var(--text-dim);margin:14px 4px 0;font-size:13px}.hint kbd{font:inherit;border:1px solid var(--line);color:var(--text);border-radius:4px;padding:0 5px}.hint strong{color:var(--brass-ink);font-weight:600}.recorder{background:linear-gradient(180deg, var(--panel), var(--panel-deep));border-radius:6px;margin:14px 4px 0;padding:10px 12px;box-shadow:inset 0 2px 6px #3c281440}.transport{flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;display:flex}.transport__button{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:8px;padding:5px 12px;font-size:12.5px;display:inline-flex}.transport__button:hover{border-color:var(--brass)}.transport__button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.transport__button--active{border-color:#c4463a}.transport__button--on{border-color:var(--brass-ink);color:var(--brass-ink)}.transport__button:disabled{opacity:.4;cursor:default}.transport__button:disabled:hover{border-color:var(--line)}.transport__rate{color:var(--text-dim);align-items:center;gap:8px;display:inline-flex}.transport__rate span{font-variant-numeric:tabular-nums;min-width:9ch}.transport__rate input{width:110px;accent-color:var(--brass-ink)}.transport__count{color:var(--text-dim);margin-left:auto}.transport__dot{background:#d4b2ab;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 1px 1px #3c281466}.transport__button--active .transport__dot{background:#e2483a;animation:1s steps(2,jump-none) infinite transport-blink;box-shadow:0 0 8px 2px #e2483a8c}@keyframes transport-blink{to{opacity:.35}}.transport__time{font-variant-numeric:tabular-nums;color:var(--text);min-width:5ch}.roll{margin-top:10px}.roll__toolbar{color:var(--text-dim);flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px;font-size:12.5px;display:flex}.roll__field{align-items:center;gap:6px;display:inline-flex}.roll__field select{font:inherit;border:1px solid var(--line);color:var(--text);background:0 0;border-radius:6px;padding:2px 6px}.roll__field input{width:90px;accent-color:var(--brass-ink)}.roll__button{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:3px 10px;font-size:12px}.roll__button:hover{border-color:var(--brass)}.roll__button:disabled{opacity:.4;cursor:default}.roll__button:disabled:hover{border-color:var(--line)}.roll__button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.roll__scroll{background:var(--paper);border-radius:4px;outline:none;max-height:260px;overflow:auto;box-shadow:inset 0 0 0 1px #2a1c131f}.roll__scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--brass)}.roll__canvas{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;display:block}.roll__row{fill:var(--paper)}.roll__row--black{fill:#efe7d6}.roll__key{fill:var(--text-dim);font-size:9px;font-family:var(--font)}.roll__grid{stroke:#2a1c1314}.roll__grid--beat{stroke:#2a1c132e}.roll__ruler{fill:var(--text-dim);font-size:9px;font-family:var(--font);font-variant-numeric:tabular-nums}.roll__note{fill:var(--brass);stroke:var(--ink);stroke-width:1px;cursor:grab}.roll__note:hover{fill:#a67d45}.roll__note--selected{fill:var(--ink);stroke:var(--brass)}.roll__playhead{stroke:#e2483a;stroke-width:1.5px;pointer-events:none}.roll__views{display:inline-flex}.roll__view{border-radius:0;margin-right:-1px}.roll__view:first-child{border-radius:999px 0 0 999px}.roll__view:last-child{border-radius:0 999px 999px 0}.roll__view--on{background:var(--brass);border-color:var(--brass);color:var(--ivory)}.roll__view--on:hover{border-color:var(--brass)}.score{cursor:default}.score__glyph{font-family:var(--music-font);fill:var(--ink);pointer-events:none}.score__line,.score__barline{stroke:#2a1c1366;stroke-width:1px}.score__barline{stroke:#2a1c13a6}.score__ledger{stroke:var(--ink);stroke-width:1.3px}.score__stem{stroke:var(--ink);stroke-width:1px}.score__tie{fill:none;stroke:var(--ink);stroke-width:1.4px}.score__chord--playing .score__glyph{fill:var(--brass-ink)}.score__chord--playing .score__stem,.score__chord--playing .score__ledger{stroke:var(--brass-ink)}.score__rest .score__glyph{fill:var(--text-dim)}.library{gap:8px;margin-top:10px;font-size:12.5px;display:grid}.library__row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.library__name,.library select{font:inherit;border:1px solid var(--line);color:var(--text);background:0 0;border-radius:6px;padding:3px 8px;font-size:12.5px}.library__name{width:180px}.library__name::placeholder{color:var(--text-dim)}.library select{max-width:240px}.library__name:focus-visible,.library select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.library__button{font:inherit;border:1px solid var(--line);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:3px 10px;font-size:12px}.library__button:hover{border-color:var(--brass)}.library__button:disabled{opacity:.4;cursor:default}.library__button:disabled:hover{border-color:var(--line)}.library__button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.library__file{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.library__file:focus-visible+*,.library__file:focus-visible{outline:2px solid var(--brass)}.library__error{color:#b8352a;margin:0}@media (width<=720px){.rail{grid-template-columns:1fr;justify-items:stretch}.rail__controls{justify-items:start}.presets{justify-content:flex-start;max-width:none}.tabs{justify-content:flex-start}.drawbars{justify-content:flex-start;overflow-x:auto}.key__hint{display:none}}@media (prefers-reduced-motion:reduce){.drawbar__cap,.drawbar__shaft,.tab__face,.tab__lamp{transition:none}.transport__button--active .transport__dot{animation:none}}