:root{--paper: #f6f2ea;--paper-deep: #ebe5d8;--panel: rgba(252, 249, 242, .92);--ink: #26231f;--ink-dim: #6b655b;--line: rgba(38, 35, 31, .16);--line-strong: rgba(38, 35, 31, .32);--grid: rgba(38, 35, 31, .07);--band: rgba(38, 35, 31, .04);--c0: #2f5fb3;--c1: #cf4f33;--c2: #23836a;--c3: #a97800;--focus: #26231f;--accent: var(--c0);--radius: 18px;--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root{--paper: #181b22;--paper-deep: #101217;--panel: rgba(28, 31, 39, .92);--ink: #ece6da;--ink-dim: #a39c8e;--line: rgba(236, 230, 218, .16);--line-strong: rgba(236, 230, 218, .34);--grid: rgba(236, 230, 218, .07);--band: rgba(236, 230, 218, .04);--c0: #8db3ff;--c1: #ff9d82;--c2: #6fd6b5;--c3: #f0c35e;--focus: #f0c35e;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}html{background:var(--paper-deep)}body{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% 0%,var(--paper) 0%,var(--paper-deep) 100%) fixed;color:var(--ink);font:16px/1.5 var(--font-body);-webkit-tap-highlight-color:transparent;overflow-x:hidden}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.top{display:flex;align-items:baseline;gap:.9rem;padding:.7rem 1.1rem .45rem;padding-top:max(.7rem,env(safe-area-inset-top))}.brand{display:flex;align-items:center;gap:.5rem;margin:0;font:400 1.5rem/1.2 var(--font-display);letter-spacing:.01em}.mark{width:1.6rem;height:1.6rem;color:var(--accent);transition:color .25s}.tagline{margin:0;color:var(--ink-dim);font-size:.9rem}.stage{flex:1;min-height:240px;display:flex;padding:0 12px}.canvas-wrap{position:relative;flex:1;border-radius:var(--radius);overflow:hidden;background:color-mix(in srgb,var(--paper) 80%,transparent);outline:1px solid var(--line);outline-offset:-1px;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--ink);opacity:0;pointer-events:none;will-change:transform;transition:opacity .3s}.playhead.on{opacity:.55}.playhead:before{content:"";position:absolute;top:0;bottom:0;right:100%;width:70px;background:linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 9%,transparent))}.hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1rem 1.5rem;text-align:center;pointer-events:none;transition:opacity .3s}.hint[hidden]{display:none}.hint.gone{opacity:0}.hint p{margin:0;text-wrap:balance}.hint-main{font:400 clamp(1.3rem,4vw,1.9rem)/1.3 var(--font-display)}.hint-sub{color:var(--ink-dim);max-width:26rem}.hint-keys{color:var(--ink-dim);font-size:.85rem;margin-top:.6rem!important}@media(hover:none){.hint-keys{display:none}}.dock{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.3rem;margin:10px 12px 6px;padding:.65rem .9rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(8px)}button{font:inherit;color:inherit;background:transparent;border:1.5px solid var(--line);border-radius:999px;min-height:44px;padding:0 1rem;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s,opacity .15s}button:hover{border-color:var(--ink-dim)}button:active{background:var(--band)}button[aria-disabled=true]{opacity:.4;cursor:default}button[aria-disabled=true]:hover{border-color:var(--line)}button.primary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:6.4rem;background:var(--ink);color:var(--paper);border-color:var(--ink)}button.primary:hover{border-color:var(--ink);opacity:.9}.icon{width:1rem;height:1rem}.icon[hidden]{display:none}:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}.transport{display:flex;gap:.5rem}.voices{display:flex;gap:.4rem;margin:0;padding:0;border:0;min-width:0}.voice{position:relative;display:block}.voice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.chip{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .9rem 0 .75rem;border:1.5px solid var(--line);border-radius:999px;transition:border-color .15s,background .15s}.voice:hover .chip{border-color:var(--ink-dim)}.dot{width:16px;height:16px;border-radius:50%;background:var(--c);flex:none}.voice input:checked+.chip{border-color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}.voice input:checked+.chip .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)}.voice input:focus-visible+.chip{outline:2.5px solid var(--focus);outline-offset:3px}.sliders{display:flex;gap:1.1rem}.slider{display:flex;flex-direction:column;width:9.5rem}.slider-name{display:flex;align-items:center;justify-content:space-between;color:var(--ink-dim);font-size:.82rem;line-height:1.2}.slider output{color:var(--ink);font-variant-numeric:tabular-nums}.slider-note{display:inline-flex;align-items:center;white-space:nowrap}.brush-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-left:.4rem;vertical-align:middle}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-strong)}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--accent);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong)}input[type=range]:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:6px}.toast{position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));top:max(3.4rem,calc(env(safe-area-inset-top) + 2.8rem));width:fit-content;margin-inline:auto;transform:translateY(-8px);padding:.5rem 1rem;background:var(--ink);color:var(--paper);border-radius:999px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}.toast.show{opacity:1;transform:none}.foot{padding:.2rem 1rem calc(.6rem + env(safe-area-inset-bottom));text-align:center}.foot p{margin:0;color:var(--ink-dim);font-size:.78rem}.foot a{color:inherit;text-underline-offset:2px}.foot a:hover{color:var(--ink)}@media(max-width:640px){.top{padding-left:.9rem;padding-right:.9rem}.tagline{display:none}.stage{padding:0 8px}.dock{margin:8px 8px 4px;padding:.55rem;gap:.5rem 1rem}.voices{width:100%;gap:.3rem}.voice{flex:1;min-width:0}.chip{justify-content:center;padding:0 .4rem;gap:.4rem}.transport{width:100%}.transport button{flex:1;padding:0 .5rem;min-width:0}.transport button.primary{flex:1.5;min-width:0}.sliders{width:100%;gap:.9rem}.slider{flex:1;width:auto;min-width:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}