@font-face{font-family:FlMono;src:url('../fonts/ibm-plex-mono-latin.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}:root{color-scheme:dark;--surface:#252d32;--line:#ffffff12;--muted:#94a0a5;--note:#9dcba2;--orange:#e3ad72}body{margin:0;background:#1a2227;color:#d5dde0;font:11px system-ui,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.studio{padding:18px 22px 13px;max-width:1300px;margin:auto}.top{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px}.brand{display:flex;align-items:center;gap:9px}.brand strong{font-size:20px;font-weight:600;letter-spacing:-.05em}.logo{color:var(--orange);font:bold italic 30px Georgia,serif;line-height:.7}.subtitle{font:8px FlMono,monospace;color:var(--muted);letter-spacing:.08em;margin-left:6px}.badge{font-size:8px;border:1px solid #66757b;padding:5px 8px;border-radius:4px;color:#b1bdc2}.session{display:flex;gap:18px;align-items:center;padding:16px 0}.pattern{display:flex;gap:8px;align-items:center;flex:1}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--note)}.pattern>span:last-child{font-size:10px;color:var(--muted)}.pattern b{display:block;font-size:14px;font-weight:500;margin-top:3px;color:#e0e5e7}.meter{display:flex;gap:5px;align-items:baseline;font-family:FlMono,monospace}.meter strong{font-size:21px;color:var(--orange);font-weight:400}.meter span{font-size:8px;color:var(--muted)}.session label{display:grid;gap:4px;color:var(--muted);font-size:8px}.session select{font-size:10px;min-height:28px;border:1px solid #516068;background:#293238;color:#e1e8eb;border-radius:4px;padding:4px 7px;max-width:100%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px}.editor{min-width:0;border:1px solid #56616b;border-radius:5px;overflow:hidden;background:#242c31}.editor-label{display:flex;align-items:center;justify-content:space-between;background:#333e44;padding:8px 11px;font:8px FlMono,monospace;color:#c1cbd0;letter-spacing:.08em}.editor-label span:last-child{color:var(--note)}.piano svg{width:100%;height:clamp(150px,27vw,270px);display:block}.piano .note{fill:var(--note);stroke:#d2ecd4;stroke-width:.4}.piano .note-alt{fill:#8fb6c5;stroke:#b8d2dc}.velocity{position:relative;border-top:1px solid #576069;background:#1f282d}.velocity>span{position:absolute;top:8px;left:9px;font:6px FlMono,monospace;color:var(--muted);letter-spacing:.06em}.velocity svg{display:block;width:100%;height:45px}.trace{min-width:0;background:#141d22;border:1px solid #ffffff10;border-radius:5px;padding:12px;overflow:hidden;font-family:FlMono,monospace}.trace-heading{display:flex;justify-content:space-between;gap:10px;font-size:7px;color:#7b909b;letter-spacing:.09em;margin-bottom:14px}.trace>code{font-size:9px;color:var(--orange);display:block;overflow-wrap:anywhere}.trace pre{font:9px/1.9 FlMono,monospace;color:#b4ccd4;white-space:pre-wrap;overflow-wrap:anywhere;height:158px;overflow:auto}.bridge{display:flex;gap:8px;border-top:1px solid #ffffff10;padding-top:12px;font-size:9px;color:#97b9a0}.bridge>span{font-size:17px}.bridge div>span{display:block;font-size:7px;color:#7c919b;margin-top:4px}.actions{display:flex;gap:7px;align-items:center;padding:13px 0 11px;flex-wrap:wrap}.actions button{border:1px solid #53616a;background:#303c42;color:#d5e0e5;border-radius:5px;font-size:10px;min-height:31px;padding:6px 12px;transition:background .16s,border-color .16s}.actions button:hover{background:#3b4b52;border-color:#81949d}.actions button:active{transform:translateY(1px)}.actions button[aria-pressed=true]{color:#15201a;background:var(--note);border-color:var(--note)}.actions .reset{margin-left:auto;background:transparent;color:#97a6ae;border-color:transparent}.actions button:disabled{opacity:.35;cursor:default}footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:9px;color:#90a2ab;font-size:8px}footer p{margin:0;color:#b5cabc}footer>span{text-align:right;font-size:7px;color:#8998a0}.compact .studio{padding:12px 15px 9px}.compact .top{padding-bottom:8px}.compact .brand strong{font-size:17px}.compact .session{padding:10px 0;gap:12px}.compact .workspace{grid-template-columns:minmax(0,1fr)}.compact .trace{display:none}.compact .piano svg{height:110px}.compact .velocity{display:none}.compact .actions{padding:8px 0}.compact .actions button{min-height:27px;font-size:9px;padding:4px 7px}.compact .editor-label{padding:6px 9px}.compact footer{padding-top:6px}.compact footer>span{display:none}.compact .meter strong{font-size:17px}.compact .pattern b{font-size:12px}
@media(max-width:650px){.workspace{grid-template-columns:minmax(0,1fr)}.trace{display:none}.subtitle{font-size:7px}.session{gap:10px}.studio{padding:15px}.piano svg{height:235px}.actions button{font-size:9px;padding:6px 9px}.badge{font-size:7px}.session select{font-size:9px}.pattern{min-width:55px}.pattern b{font-size:12px}.meter strong{font-size:17px}footer{flex-wrap:wrap}footer>span{text-align:left}.compact .piano svg{height:110px}}
@media(max-width:380px){.studio{padding:12px}.subtitle{display:none}.session{gap:8px}.meter{display:none}.actions{gap:5px}.actions button{font-size:8px;padding:6px}.actions .reset{margin-left:0}.session label{font-size:7px}.session select{font-size:8px;padding:4px}.compact .session{gap:8px}.compact .actions button{font-size:8px;padding:4px 6px}.compact .piano svg{height:110px}}
@media(prefers-reduced-motion:reduce){.actions button{transition:none}}