:root{--bg:#1b1d22;--body-top:#4a4e57;--body-bottom:#33363d;--panel:#2a2c32;--panel-deep:#222428;--line:#15161a;--text:#c9ccd3;--text-dim:#8a8f99;--accent:#ff7a3d;--lamp-on:#ff5a36;--solo:#f5c542;--lcd-bg:#9fd3a2;--lcd-text:#1f3a24;--pad-top:#5b5f69;--pad-bottom:#44474f;--mono:"SF Mono", ui-monospace, Menlo, monospace;color:var(--text);background:var(--bg);font-family:SF Pro Display,Helvetica Neue,Hiragino Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% 20%, #2b2e35, var(--bg) 70%);min-height:100vh;margin:0}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{place-items:center;min-height:100vh;padding:32px;display:grid}.machine{background:linear-gradient(180deg, var(--body-top), var(--body-bottom));border:1px solid var(--line);border-radius:18px;flex-direction:column;gap:22px;width:min(1280px,100%);padding:26px 28px 30px;display:flex;box-shadow:inset 0 1px #ffffff2e,inset 0 -2px #00000059,0 24px 48px #0000008c,0 4px 10px #0006}.machine-header{grid-template-columns:auto minmax(320px,1fr) auto auto;align-items:center;gap:22px;display:grid}.brand{flex-direction:column;gap:2px;display:flex}.brand-name{letter-spacing:.08em;color:#eef0f4;text-shadow:0 1px #00000080;font-size:28px;font-weight:800}.brand-sub{letter-spacing:.3em;color:var(--text-dim);font-size:10px}.brand-warning{color:var(--accent);margin-top:4px;font-size:11px}.lcd{background:linear-gradient(180deg, #b4e2b6, var(--lcd-bg));font-family:var(--mono);color:var(--lcd-text);border:3px solid #1d1f24;border-radius:8px;justify-content:space-around;padding:10px 18px;display:flex;box-shadow:inset 0 3px 8px #00000059,0 1px #ffffff1f}.lcd-cell{flex-direction:column;align-items:center;display:flex}.lcd-caption{letter-spacing:.15em;opacity:.7;font-size:10px}.lcd-value{font-size:24px;font-weight:700}.globals{align-items:flex-start;gap:14px;display:flex}.transport{gap:12px;display:flex}.hw-button{border:1px solid var(--line);color:#2a2c32;cursor:pointer;background:linear-gradient(#e9eaee,#b9bcc4);border-radius:8px;width:56px;height:44px;font-size:16px;box-shadow:inset 0 1px #fffc,0 3px #6f727a,0 5px 8px #0006}.hw-button:active{transform:translateY(2px);box-shadow:inset 0 1px #fff9,0 1px #6f727a,0 2px 4px #0006}.hw-button.is-play{color:var(--accent)}.hw-button.is-play.is-active{color:#fff;background:linear-gradient(180deg, #ff9a66, var(--accent))}.machine-body{--upper-height:430px;height:var(--upper-height);grid-template-columns:1fr 1fr;gap:24px;display:grid}.knob{flex-direction:column;align-items:center;gap:4px;min-width:56px;display:flex}.knob-dial{--size:52px;width:var(--size);height:var(--size);cursor:ns-resize;touch-action:none;border-radius:50%;position:relative}.knob-small .knob-dial{--size:38px}.knob-ring{background:conic-gradient(from 225deg, var(--accent) calc(var(--knob-ratio) * 270deg), #00000059 0 270deg, transparent 0);opacity:.85;border-radius:50%;position:absolute;inset:-5px;-webkit-mask:radial-gradient(circle,#0000 calc(50% - 3px),#000 calc(50% - 2px));mask:radial-gradient(circle,#0000 calc(50% - 3px),#000 calc(50% - 2px))}.knob-cap{border:1px solid var(--line);background:radial-gradient(circle at 35% 30%,#6d717b,#2c2e34 70%);border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 1px 1px #ffffff40,0 4px 8px #0000008c}.knob-indicator{background:#f2f3f5;border-radius:2px;width:3px;height:26%;margin-left:-1.5px;position:absolute;top:12%;left:50%}.knob-value{font-family:var(--mono);color:#e4e6ea;font-size:11px}.knob-label{letter-spacing:.15em;color:var(--text-dim);font-size:9px}.mini-button{border:1px solid var(--line);min-width:24px;height:22px;color:var(--text);cursor:pointer;background:linear-gradient(#5d616b,#42454d);border-radius:5px;padding:0 6px;font-size:11px;font-weight:700;box-shadow:inset 0 1px #ffffff26,0 2px #1f2125}.mini-button:active{transform:translateY(1px);box-shadow:0 1px #1f2125}.mini-button:disabled{opacity:.4;cursor:default}.mini-button.is-mute.is-active{background:linear-gradient(180deg, #ff9a66, var(--accent));color:#fff}.mini-button.is-solo.is-active{background:linear-gradient(180deg, #ffe08a, var(--solo));color:#2a2c32}.stepper{flex-direction:column;align-items:center;gap:6px;padding-top:4px;display:flex}.stepper-label{letter-spacing:.15em;color:var(--text-dim);font-size:9px}.stepper-buttons{gap:4px;display:flex}.choice{flex-wrap:wrap;gap:4px;max-width:260px;display:flex}.choice-option{border:1px solid var(--line);background:var(--panel-deep);color:var(--text-dim);letter-spacing:.08em;cursor:pointer;border-radius:5px;padding:4px 7px;font-size:10px}.choice-option.is-active{color:#fff;background:linear-gradient(180deg, #ff9a66, var(--accent))}fieldset.choice{border:0;min-width:0;margin:0;padding:0}.panel{height:var(--upper-height);background:var(--panel);border-radius:12px;flex-direction:column;gap:14px;padding:16px 18px 18px;display:flex;overflow:auto;box-shadow:inset 0 2px 6px #00000080}.panel-title{align-items:baseline;gap:10px;display:flex}.panel-name{letter-spacing:.1em;color:#eef0f4;font-size:18px;font-weight:800}.panel-engine{letter-spacing:.2em;color:var(--accent);font-size:10px}.panel-groups{flex-wrap:wrap;gap:12px;display:flex}.panel-group{background:var(--panel-deep);border:1px solid #ffffff0f;border-radius:8px;margin:0;padding:8px 10px 10px}.panel-group-title{letter-spacing:.2em;color:var(--text-dim);margin:0 0 8px;font-size:9px;font-weight:700}.panel-group-body{align-items:flex-start;gap:10px;display:flex}.panel-title{justify-content:space-between;align-items:center}.panel-heading{align-items:baseline;gap:10px;display:flex}.panel-track{gap:8px;display:flex}.panel-tabs{border-bottom:1px solid #ffffff14;gap:4px;padding-bottom:6px;display:flex}.panel-tab{border:1px solid var(--line);background:var(--panel-deep);color:var(--text-dim);letter-spacing:.18em;cursor:pointer;border-radius:6px;padding:5px 12px;font-size:10px;font-weight:700}.panel-tab.is-active{color:#fff;box-shadow:inset 0 -2px 0 var(--accent);background:linear-gradient(#6a6e78,#4b4e56)}.sequencer{background:var(--panel);border-radius:12px;flex-direction:column;gap:4px;padding:12px 14px 14px;display:flex;box-shadow:inset 0 2px 6px #00000080}.bar-tabs{gap:6px;margin-bottom:6px;display:flex}.bar-tab{border:1px solid var(--line);background:var(--panel-deep);min-width:34px;height:24px;color:var(--text-dim);font-family:var(--mono);cursor:pointer;border-radius:5px;font-size:11px}.bar-tab.is-playing{color:var(--lamp-on)}.bar-tab.is-active{color:#fff;background:linear-gradient(#6a6e78,#4b4e56)}.bar-tab.is-follow{letter-spacing:.15em;margin-left:auto;padding:0 10px;font-size:10px}.bar-tab.is-follow.is-active{background:linear-gradient(180deg, #ff9a66, var(--accent))}.grid-row{grid-template-columns:170px repeat(16,1fr);align-items:center;gap:4px;display:grid}.grid-track-head{align-items:center;gap:4px;display:flex}.track-name{height:24px;color:var(--text-dim);letter-spacing:.1em;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;flex:1;padding:0 8px;font-size:11px}.grid-row.is-selected .track-name{color:#fff;border-color:var(--accent)}.step{flex-direction:column;align-items:center;gap:4px;padding-bottom:4px;display:flex}.step-lamp{background:radial-gradient(circle at 35% 30%,#6a3a33,#3a1f1b);border-radius:50%;width:12px;height:12px;box-shadow:inset 0 1px 2px #0009}.step.is-on .step-lamp{background:radial-gradient(circle at 35% 30%, #ffb199, var(--lamp-on));box-shadow:0 0 8px #ff5a36e6,0 0 16px #ff5a3680}.step-number{color:var(--text-dim);font-size:9px}.step.is-beat .step-number{color:var(--text);font-weight:700}.cell{border:1px solid var(--line);cursor:pointer;background:#383b42;border-radius:4px;height:26px;padding:0;position:relative;box-shadow:inset 0 1px #ffffff0f}.cell.is-beat{background:#42454d}.cell.is-on{background:linear-gradient(180deg, #ffa070, var(--accent));opacity:calc(.45 + var(--velocity,1) * .55);box-shadow:0 0 8px #ff7a3d59}.cell[data-probability=partial]{background:repeating-linear-gradient(135deg, var(--accent) 0 4px, #c25a2a 4px 8px)}.cell.is-playhead{outline-offset:-2px;outline:2px solid #ffffffb3}.cell-note{font-family:var(--mono);color:#2a1408;font-size:9px;font-weight:700}.grid-row.is-muted .cell.is-on{opacity:.35}.track-name.is-hit{color:#fff;text-shadow:0 0 8px #ff7a3de6}.piano-roll{height:var(--upper-height);background:var(--panel);border-radius:12px;flex-direction:column;gap:8px;padding:12px 14px 14px;display:flex;box-shadow:inset 0 2px 6px #00000080}.piano-roll-head{justify-content:space-between;align-items:center;min-height:24px;display:flex}.piano-roll-title{letter-spacing:.1em;color:#eef0f4;font-size:13px;font-weight:800}.piano-roll-sub{letter-spacing:.2em;color:var(--text-dim);margin-left:10px;font-size:9px;font-weight:400}.piano-roll-shift{gap:4px;display:flex}.piano-roll-body{flex-direction:column;flex:1;gap:2px;min-height:0;display:flex}.roll-row{flex:1;grid-template-columns:40px repeat(16,1fr);column-gap:3px;min-height:0;display:grid}.roll-key{color:#3a3d44;font-family:var(--mono);background:linear-gradient(90deg,#d9dbe0,#c3c6cd);border-radius:2px;align-items:center;padding-left:5px;font-size:8px;display:flex}.roll-row.is-black .roll-key{color:#9a9ea8;background:linear-gradient(90deg,#2a2c31,#1d1f23)}.roll-key.is-c{font-weight:700}.roll-cell{cursor:pointer;background:#3a3d44;border:0;border-radius:2px;padding:0;position:relative}.roll-row.is-black .roll-cell{background:#31343a}.roll-cell.is-beat{box-shadow:inset 1px 0 #ffffff24}.roll-cell.is-playhead{background:#50535c}.roll-note{z-index:1;background:linear-gradient(180deg, #ffa070, var(--accent));opacity:calc(.5 + var(--velocity,1) * .5);pointer-events:none;border-radius:3px;position:absolute;top:1px;bottom:1px;left:0;box-shadow:0 0 6px #ff7a3d66}.velocity-lane{cursor:crosshair;touch-action:none;flex:1;grid-template-columns:repeat(16,1fr);gap:3px;min-height:0;padding-left:43px;display:grid}.velocity-column{background:#3a3d44;border-radius:3px;align-items:flex-end;display:flex;position:relative}.velocity-column.is-beat{background:#42454d}.velocity-column.is-playhead{background:#50535c}.velocity-bar{background:linear-gradient(180deg, #ffa070, var(--accent));pointer-events:none;border-radius:3px;width:100%;box-shadow:0 0 8px #ff7a3d59}