:root{color-scheme:dark;--bg: #141414;--panel: #1f1f1f;--panel-edge: #2c2c2c;--text: #e8e8e8;--muted: #8a8a8a;--accent: #f5a623;font-family:Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}*,*:before,*:after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html{-webkit-tap-highlight-color:transparent}.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px}header{position:sticky;top:0;z-index:5;width:100%;max-width:960px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg);padding:4px 0 10px;margin-bottom:10px}h1{font-size:20px;letter-spacing:.18em;text-transform:uppercase;margin:0;font-weight:600}h1 small{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:400}.title-button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;letter-spacing:inherit;text-transform:inherit}.title-button:focus{outline:none}.title-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.title-name{display:inline-flex;align-items:center;gap:7px}.title-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--panel-edge);border-radius:50%;font-size:10px;font-weight:600;font-style:italic;letter-spacing:0;text-transform:none;color:var(--muted);transition:color .12s ease-out,border-color .12s ease-out}.title-button:hover .title-info,.title-button[aria-expanded=true] .title-info{color:var(--accent);border-color:var(--accent)}.sheet-backdrop{position:fixed;inset:0;z-index:19;background:#0000008c;opacity:0;visibility:hidden;transition:opacity .22s ease-out,visibility .22s}.sheet-backdrop.open{opacity:1;visibility:visible}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;max-height:82vh;max-height:82dvh;margin:0 auto;max-width:560px;padding:8px 20px calc(env(safe-area-inset-bottom,0px) + 22px);background:var(--panel);border:1px solid var(--panel-edge);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -14px 44px #0009;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(0);visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility .26s}.sheet:not(.open){transform:translateY(102%);visibility:hidden}.sheet-handle{width:40px;height:4px;border-radius:2px;background:#3a3a3a;margin:6px auto 14px}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.sheet-head h2{margin:0;font-size:16px;letter-spacing:.08em;text-transform:uppercase}.icon-btn{flex:none;width:32px;height:32px;border:1px solid var(--panel-edge);border-radius:50%;background:none;color:var(--muted);font-size:13px;cursor:pointer}.sheet-body p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text)}.sheet-body h3{margin:18px 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}.sheet-body ul{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.55}.sheet-body li{margin-bottom:6px}.sheet-body strong{color:#fff;font-weight:600}.info-links{display:flex;flex-direction:column;gap:8px;margin:20px 0 16px}.info-link{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--panel-edge);border-radius:10px;background:#191919;color:var(--text);text-decoration:none}.info-link:active{background:#222}.info-link-ico{flex:none;font-size:19px;line-height:1}.info-link-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.info-link-title{font-size:14px;font-weight:600}.info-link-desc{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-link-chevron{flex:none;font-size:20px;line-height:1;color:var(--muted)}.credit{margin:0;font-size:12px;color:var(--muted)}#start{background:var(--accent);color:#111;border:0;border-radius:4px;padding:10px 18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}#start:disabled{opacity:.6;cursor:default}.transport{display:flex;align-items:center;gap:12px}.beat-led{width:12px;height:12px;border-radius:50%;background:#2c2c2c;border:1px solid var(--panel-edge);transition:background 90ms ease-out,box-shadow 90ms ease-out}.beat-led.on{background:var(--accent);box-shadow:0 0 8px #f5a623b3}.beat-led.on.downbeat{background:#fff2d8;box-shadow:0 0 12px #f5a623f2}#status{width:100%;max-width:960px;font-size:12px;color:var(--muted);min-height:1.4em;margin-bottom:16px}#learn,#share{background:transparent;color:var(--muted);border:1px solid var(--panel-edge);border-radius:4px;padding:9px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}#learn:disabled{opacity:.4;cursor:default}#learn.active{background:var(--knob-pot, #6ba4ff);border-color:var(--knob-pot, #6ba4ff);color:#10202c}body.dragging{cursor:ns-resize}#panel{width:100%;max-width:960px;columns:300px;column-gap:10px;--control-width: 66px}.panel-group{break-inside:avoid;margin-bottom:10px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;padding:4px 10px 10px}.panel-group h2{margin:0;font-weight:600}.group-toggle{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;padding:8px 0;font:inherit;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);cursor:pointer}.group-chevron{margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s ease-out}.panel-group.collapsed{padding-bottom:0}.panel-group.collapsed .group-chevron{transform:rotate(-45deg) translate(-1px,1px)}.panel-group.collapsed .group-body{display:none}.group-dot{width:6px;height:6px;border-radius:50%;background:transparent}.panel-group.active .group-dot{background:var(--accent);box-shadow:0 0 6px #f5a62399}.group-body{display:flex;align-items:flex-start;gap:6px}.group-selects{display:flex;align-items:flex-start;gap:8px}.knob-row{flex:1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px}.row-break{flex-basis:100%;height:0}.screen-keyboard{width:100%;max-width:960px;height:140px;margin-top:20px;display:flex;position:relative;border-radius:6px;overflow:hidden;background:#000;touch-action:none}.screen-keyboard.sustaining{box-shadow:inset 0 0 0 2px var(--knob-arc, #f5a623)}.key{border:0;padding:0;margin:0;cursor:pointer;transition:background 60ms}.key.white{flex:1;height:100%;background:#f1efe8;border-right:1px solid #999}.key.black{position:relative;width:0;height:100%;z-index:2}.key.black:after{content:"";position:absolute;top:0;left:-18px;width:36px;height:62%;background:#1a1a1a;border-radius:0 0 3px 3px}.key.held.white{background:var(--accent)}.key.held.black:after{background:var(--accent)}.key.arp.white{background:#7fd4ff}.key.arp.black:after{background:#4aa9d8}.key.arp.held.white{background:#ffd27f}.key.arp.held.black:after{background:#d8a24a}body:not(.audio-on) #panel,body:not(.audio-on) .screen-keyboard{opacity:.5}@media(max-width:760px){body{padding:12px 10px 0}h1{font-size:15px;letter-spacing:.12em}h1 small{display:none}header{gap:8px;padding:2px 0 8px}.sheet{max-height:88dvh;padding-left:16px;padding-right:16px}#start,#learn,#share{padding:8px 12px;font-size:11px}#status{font-size:11px;margin-bottom:10px}.screen-keyboard{position:sticky;bottom:0;z-index:4;height:112px;margin-top:12px;border-radius:6px 6px 0 0}}