:root{--backdrop:#adaba5;--body:#d8d6d1;--body-hi:#e8e6e1;--seam:#b5b3ad;--key:#f1f0ec;--key-shadow:#a9a7a1;--key-dark:#3a3a38;--text:#2c2c2a;--text-dim:#7a7873;--orange:#ff4d00;--lcd:#20241f;--lcd-ink:#f4f1e8;--font:"IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--text);background:var(--backdrop);background-image:radial-gradient(at 50% 30%,#bcbab4 0%,#a3a19b 75%,#92908a 100%)}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}kbd{font-family:inherit}.stage-bg{place-items:center;min-height:100vh;padding:24px;display:grid}.device{background:linear-gradient(180deg, var(--body-hi) 0%, var(--body) 12%, var(--body) 100%);border:1px solid var(--seam);border-radius:22px;flex-direction:column;gap:14px;width:min(960px,100%);padding:18px 22px 22px;display:flex;box-shadow:0 24px 48px #00000059,inset 0 2px #fff9,inset 0 -3px #00000014}.dev-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{letter-spacing:.08em;white-space:nowrap;align-items:center;gap:8px;font-size:13px;display:flex}.brand-name{font-weight:600}.brand-model{color:#fff;background:var(--key-dark);border-radius:4px;padding:1px 7px;font-size:11px}.led{background:#8f8d87;border-radius:50%;width:8px;height:8px;box-shadow:inset 0 1px 1px #0006}.led.is-on{background:var(--orange);box-shadow:0 0 8px var(--orange)}.key{letter-spacing:.05em;color:var(--text);background:linear-gradient(180deg, #fbfaf7 0%, var(--key) 100%);box-shadow:0 3px 0 var(--key-shadow), 0 1px 0 #ffffffe6 inset;-webkit-user-select:none;user-select:none;border:1px solid #0000002e;border-radius:7px;padding:8px 14px;font-size:12px;font-weight:500;transition:transform 40ms,box-shadow 40ms}.key:hover:not(:disabled):not(.is-on){background:#fff}.key:active:not(:disabled),.key.is-on{box-shadow:0 1px 0 var(--key-shadow), 0 1px 2px #0003 inset;transform:translateY(2px)}.key:disabled{opacity:.4;cursor:default}.key.is-on{background:var(--key-dark);color:#fff}.key-sm{padding:6px 10px;font-size:11px}.key-accent{background:var(--orange);color:#fff;border-color:#c93d00;box-shadow:0 3px #b83800,inset 0 1px #ffffff59}.key-accent:hover:not(:disabled){background:#ff6322}.key-play{min-width:96px;font-weight:600}.key-play.is-on{background:var(--orange);color:#fff;border-color:#c93d00}.transport{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.bpm{align-items:center;gap:6px;display:flex}.bpm-lcd{background:var(--lcd);color:var(--orange);border-radius:6px;justify-content:center;align-items:baseline;gap:5px;min-width:84px;padding:4px 10px;display:flex;box-shadow:inset 0 2px 3px #0006}.bpm-value{font-size:16px;font-weight:600}.bpm-unit{opacity:.7;font-size:9px}.transport-right{gap:8px;margin-left:auto;display:flex}.screen-bezel{background:#33332f;border-radius:14px;padding:12px 12px 8px;box-shadow:inset 0 2px 4px #00000073,0 1px #ffffff80}.screen{aspect-ratio:64/48;touch-action:none;cursor:crosshair;background:var(--lcd);border-radius:4px;position:relative;overflow:hidden;box-shadow:inset 0 0 24px #78dc820a}.screen-main{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.screen-grid{pointer-events:none;background-image:linear-gradient(#f4f1e80e 1px,#0000 1px),linear-gradient(90deg,#f4f1e80e 1px,#0000 1px);background-size:1.5625% 2.08333%;position:absolute;inset:0}.screen-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.screen-caption{letter-spacing:.14em;color:#8d8b85;justify-content:space-between;gap:12px;padding:7px 4px 2px;font-size:9px;display:flex}.dev-bottom{align-items:stretch;gap:20px;display:flex}.dev-left{flex-direction:column;flex:1;gap:14px;min-width:0;display:flex}.tool-strip{flex-direction:column;gap:10px;display:flex}.tool-keys{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.key-tool{flex-direction:column;align-items:center;gap:3px;padding:8px 4px;font-size:10px;display:flex}.tool-icon{font-size:15px;line-height:1}.size-keys{gap:8px;display:flex}.key-size{justify-content:center;align-items:center;width:40px;height:32px;padding:0;display:inline-flex}.size-dot{background:currentColor;border-radius:1px}.palette{grid-template-columns:repeat(8,1fr);gap:7px;display:grid}.swatch{aspect-ratio:1;border:1px solid #00000040;border-radius:6px;transition:transform 40ms;box-shadow:0 2px #0000002e,inset 0 1px #ffffff80}.swatch:active{transform:translateY(1px)}.swatch.is-active{outline:2px solid var(--orange);outline-offset:2px}.pad-grid{grid-template-columns:repeat(4,74px);grid-auto-rows:74px;gap:10px;display:grid}.pad{box-shadow:0 4px 0 var(--key-shadow), 0 1px 0 #ffffffe6 inset;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:linear-gradient(#f6f5f1 0%,#e9e7e2 100%);border:1px solid #0003;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px;transition:transform 40ms,box-shadow 40ms;display:flex}.pad:active{box-shadow:0 1px 0 var(--key-shadow), 0 2px 3px #0003 inset;transform:translateY(3px)}.pad.is-active{outline:2px solid var(--orange);outline-offset:2px}.pad.is-lit{box-shadow:0 0 14px #ff4d008c, 0 4px 0 var(--key-shadow), 0 1px 0 #ffffffe6 inset;background:linear-gradient(#ffe3d4 0%,#ffc9ad 100%)}.pad-icon{justify-content:center;align-items:center;height:26px;display:flex}.pad-label{letter-spacing:.1em;color:var(--text-dim);align-items:center;gap:4px;font-size:9px;display:flex}.pad-label kbd{background:var(--key-dark);color:#fff;border-radius:3px;padding:0 4px;font-size:8px}@media (width<=760px){.stage-bg{align-items:start;padding:10px}.device{gap:12px;padding:14px 14px 16px}.dev-top{gap:10px}.transport{gap:8px}.transport-right{margin-left:0}.dev-bottom{flex-direction:column;gap:14px}.pad-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:64px;width:100%}.tool-keys{gap:6px}}