:root{--paper:#e7edb4;--ink:#18284d;--accent:#a34251;--line:#18284d35}.stage{height:clamp(470px,55vw,730px);align-self:center}.stage canvas{touch-action:none;cursor:crosshair}.stage-note,.transport{position:absolute;left:5.5%;right:5.5%;display:flex;justify-content:space-between;gap:20px;font:8px/1.5 monospace;letter-spacing:1px;pointer-events:none}.stage-note{top:25px}.stage-note>span:last-child{text-align:right}.transport{bottom:45px;border-top:1px solid var(--line);padding-top:12px}.presets{display:flex;flex-wrap:wrap;gap:5px}.presets button{border:0;border-bottom:1px solid var(--line);padding:8px 5px;background:none;min-height:35px;font-size:10px}.presets-label{margin-top:25px;margin-bottom:9px;font-size:9px}.pill-row button{border-left:4px solid #2145b4}.pill-row button:nth-child(2){border-left-color:#a34251}.pill-row button:nth-child(3){border-left-color:#3b674f}.pill-row button[aria-pressed=true]{background:#18284d;color:var(--paper)}.controls .button-row{gap:6px}.controls .btn{padding:10px 11px}.embedded .stage{height:min(68vw,650px)}@media(max-width:700px){.split{display:block}.stage,.embedded .stage{height:330px;position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}.stage-note{top:14px;font-size:7px;letter-spacing:.5px}.stage-note>span:last-child{max-width:130px}.transport{bottom:27px;font-size:7px}.controls h1 br{display:none}.controls h1 em{margin-left:10px}}

@media(max-width:700px){.stage{height:min(330px,42svh)}.embedded .stage{height:min(330px,42svh)}}