:root{--bg:#0a0a0f;--bg-deep:#07070b;--bg-raised:#11111a;--bg-cell:#14141e;--bg-cell-beat:#181826;--line:#232331;--line-soft:#1b1b27;--ink:#e9e9f2;--ink-dim:#82829a;--ink-faint:#4c4c62;--accent:#00e5ff;--accent-dim:#00e5ff52;--accent-soft:#00e5ff1f;--accent-ink:#002227;--accent2:#ff3df0;--accent2-soft:#ff3df024;--radius:8px;--radius-sm:4px;--font:"Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;--mono:ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;--touch:40px}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%}body{background:radial-gradient(1100px 600px at 70% -10%, #00e5ff0f, transparent 60%), radial-gradient(900px 700px at -10% 110%, #ff3df00d, transparent 55%), var(--bg);color:var(--ink);font-family:var(--font);overscroll-behavior:none;min-height:100dvh;font-size:14px;line-height:1.35}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;padding-top:max(10px, env(safe-area-inset-top));padding-right:max(10px, env(safe-area-inset-right));padding-bottom:max(12px, env(safe-area-inset-bottom));padding-left:max(10px, env(safe-area-inset-left));flex-direction:column;gap:12px;width:100%;max-width:1400px;margin:0 auto;display:flex}.stage{grid-template-columns:minmax(0,1fr);align-items:start;gap:12px;display:grid}.stage-cam,.stage-seq{flex-direction:column;gap:12px;min-width:0;display:flex}@media (width>=900px){.stage{grid-template-columns:minmax(320px,460px) minmax(0,1fr);gap:16px}}.topbar{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 12px;display:flex}.brand{font-family:var(--mono);letter-spacing:.32em;-webkit-user-select:none;user-select:none;white-space:nowrap;text-shadow:0 0 18px var(--accent-dim);font-size:18px;font-weight:700}.brand em{color:var(--accent);font-style:normal}.transport{flex-wrap:wrap;flex:auto;align-items:center;gap:8px 14px;display:flex}.btn{min-height:var(--touch);min-width:var(--touch);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-cell);color:var(--ink);font-family:var(--mono);letter-spacing:.08em;padding:0 14px;font-size:13px;transition:border-color .12s,box-shadow .12s,background .12s}.btn:hover{border-color:var(--accent-dim)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px var(--accent-soft), inset 0 0 10px var(--accent-soft)}.btn.play{font-size:16px}.btn.play.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 22px var(--accent-dim)}.btn.clear{color:var(--ink-dim)}.btn.clear:hover{color:var(--ink)}.ctl{min-height:var(--touch);align-items:center;gap:7px;display:flex}.ctl-name{font-family:var(--mono);letter-spacing:.18em;color:var(--ink-dim);font-size:10px}.ctl-value{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent);text-align:right;min-width:4ch;font-size:13px}.ctl input[type=range]{accent-color:var(--accent);width:110px;min-height:var(--touch);background:0 0;margin:0}.ctl .num{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-deep);width:5ch;min-height:34px;color:var(--accent);font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;padding:2px 6px;font-size:15px}.ctl .num::-webkit-inner-spin-button{-webkit-appearance:none}.ctl .num::-webkit-outer-spin-button{-webkit-appearance:none}.ctl select{min-height:var(--touch);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--ink);font-family:var(--mono);padding:0 8px;font-size:13px}.mode-switch,.theremin-targets,.seg-group{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-deep);display:flex;overflow:hidden}.sound-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px 10px;display:flex}.sound-panel select{text-transform:uppercase;letter-spacing:.08em;font-size:12px}.solo-select{min-height:var(--touch);border:none;border-left:1px solid var(--line-soft);color:var(--ink-dim);font-family:var(--mono);letter-spacing:.14em;background:0 0;flex:1 0 auto;padding:0 10px;font-size:12px}.solo-select.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}.solo-select option{background:var(--bg-deep);color:var(--ink)}.camera-actions{gap:8px;display:flex}.camera-actions .btn{flex:auto}.btn.cal.calibrated{color:var(--accent);border-color:var(--accent-dim)}.btn.cal:disabled{opacity:.45}.cal-overlay{border-top:1px solid var(--accent-dim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:3;background:#07070be0;flex-direction:column;gap:8px;padding:12px;display:flex;position:absolute;inset:auto 0 0}.cal-title{font-family:var(--mono);letter-spacing:.2em;color:var(--accent);margin:0;font-size:11px}.cal-text{color:var(--ink);margin:0;font-size:13px}.cal-hands{flex-wrap:wrap;gap:8px 18px;display:flex}.cal-hand{font-family:var(--mono);align-items:center;gap:5px;display:flex}.cal-hand-name{color:var(--ink-dim);letter-spacing:.1em;font-size:11px}.cal-finger{border:1px solid var(--line);border-radius:var(--radius-sm);letter-spacing:.12em;color:var(--ink-dim);padding:3px 7px;font-size:10px}.cal-finger.done{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.cal-actions{gap:8px;display:flex}.seg{min-height:var(--touch);color:var(--ink-dim);font-family:var(--mono);letter-spacing:.14em;background:0 0;border:none;flex:1 0 auto;padding:0 14px;font-size:12px;transition:background .12s,color .12s,box-shadow .12s}.seg+.seg{border-left:1px solid var(--line-soft)}.seg.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent), 0 0 14px var(--accent-soft)}.step-grid,.drum-pads,.theremin-panel,.camera-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:10px}.step-grid{flex-direction:column;gap:10px;display:flex}.grid-group{flex-direction:column;gap:2px;display:flex}.grid-group[data-group=melodic]{border-top:1px dashed var(--line);padding-top:9px}.grid-row{grid-template-columns:32px repeat(16,minmax(0,1fr));align-items:stretch;gap:2px;display:grid}.row-label{font-family:var(--mono);letter-spacing:.06em;color:var(--ink-dim);-webkit-user-select:none;user-select:none;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;padding:0;font-size:9px;display:flex}.grid-row.muted .row-label{color:var(--accent);text-decoration:line-through}.grid-row.muted .cell{opacity:.3}.grid-group[data-group=melodic] .row-label{color:var(--accent2);opacity:.75}.cell{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--bg-cell);touch-action:manipulation;min-height:24px;padding:0;transition:background 80ms linear,border-color 80ms linear;position:relative}.cell.beat{background:var(--bg-cell-beat)}.cell.on:after{content:"";background:var(--accent);opacity:calc(.3 + var(--vel,.85) * .7);box-shadow:0 0 7px var(--accent-dim);border-radius:2px;position:absolute;inset:2px}.grid-group[data-group=melodic] .cell.on:after{background:var(--accent2);box-shadow:0 0 7px var(--accent2-soft)}.cell.play{background:var(--accent-soft);border-color:var(--accent-dim)}.cell.play.on:after{opacity:1;box-shadow:0 0 12px var(--accent)}.grid-group[data-group=melodic] .cell.play.on:after{box-shadow:0 0 12px var(--accent2)}.cell.hover{outline:2px solid var(--accent);outline-offset:1px;z-index:1}@media (width<=600px){.grid-row{grid-template-columns:repeat(16,minmax(0,1fr))}.row-label{grid-column:1/-1;padding:3px 1px 1px}.cell{min-height:40px}.cell:before{content:"";position:absolute;inset:-1px}}.drum-pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:none}.app[data-mode=drums] .drum-pads,.app[data-mode=blend] .drum-pads{display:grid}@media (width<=899px){.drum-pads{display:grid}}.pad{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg, var(--bg-cell-beat), var(--bg-cell));min-height:64px;color:var(--ink-dim);font-family:var(--mono);letter-spacing:.1em;touch-action:none;-webkit-user-select:none;user-select:none;font-size:11px;transition:border-color .12s,color .12s}.pad[data-row="0"]{min-height:52px}.pad-finger{letter-spacing:.16em;color:var(--accent-dim);margin-top:3px;font-size:9px;display:block}.pad:hover{border-color:var(--accent-dim);color:var(--ink)}.pad.flash{animation:.24s ease-out pad-flash}@keyframes pad-flash{0%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 26px var(--accent-dim)}to{box-shadow:0 0 #00e5ff00}}.theremin-panel{flex-direction:column;gap:10px;display:flex}.xy-pad{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg, var(--accent-soft), transparent 35%), repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--line-soft) calc(10% - 1px), var(--line-soft) 10%), var(--bg-deep);touch-action:none;cursor:crosshair;height:190px;position:relative;overflow:hidden}.xy-pad.live{border-color:var(--accent);box-shadow:0 0 18px var(--accent-soft), inset 0 0 24px var(--accent-soft)}.xy-ruler{pointer-events:none;display:flex;position:absolute;inset:auto 0 4px}.xy-ruler span{text-align:center;font-family:var(--mono);color:var(--ink-faint);flex:1;font-size:9px}.xy-cursor{border:2px solid var(--accent);width:22px;height:22px;box-shadow:0 0 14px var(--accent-dim);opacity:0;pointer-events:none;border-radius:50%;margin:-11px 0 0 -11px;transition:opacity .15s;position:absolute;top:50%;left:50%}.xy-pad.live .xy-cursor{opacity:1}.xy-hint{font-family:var(--mono);letter-spacing:.08em;color:var(--ink-faint);pointer-events:none;font-size:9px;position:absolute;top:6px;right:8px}.macro-panel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px}.macro-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;display:grid}@media (width>=900px){.macro-panel .macro-controls{grid-template-columns:repeat(4,minmax(0,1fr))}}.ctl.macro .ctl-name{min-width:5ch}.ctl.macro input[type=range]{flex:auto;width:auto;min-width:0}.camera-panel{flex-direction:column;gap:10px;display:flex}.camera-frame{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-deep);position:relative;overflow:hidden}.camera-frame[data-status=on]{border-color:var(--accent-dim)}.camera-video{object-fit:cover;filter:saturate(.8)contrast(1.05);width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.camera-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.camera-msg{text-align:center;font-family:var(--mono);letter-spacing:.06em;color:var(--ink-dim);pointer-events:none;background:#07070b8c;justify-content:center;align-items:center;margin:0;padding:16px;font-size:11px;display:flex;position:absolute;inset:0}.camera-fps{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--accent);opacity:.7;text-shadow:0 0 6px var(--bg-deep);pointer-events:none;font-size:10px;position:absolute;bottom:6px;right:8px}.btn.cam{align-self:flex-start}.start-overlay{z-index:100;background:radial-gradient(700px 460px at 50% 38%, #00e5ff1a, transparent 65%), radial-gradient(900px 700px at 80% 100%, #ff3df012, transparent 60%), var(--bg-deep);color:var(--ink);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0}.start-brand{font-family:var(--mono);letter-spacing:.3em;text-shadow:0 0 34px var(--accent-dim);margin-right:-.3em;font-size:clamp(44px,12vw,88px);font-weight:700;animation:3.2s ease-in-out infinite brand-breathe}.start-brand em{color:var(--accent);font-style:normal}@keyframes brand-breathe{0%,to{text-shadow:0 0 22px var(--accent-soft)}50%{text-shadow:0 0 44px var(--accent-dim)}}.start-sub{font-family:var(--mono);letter-spacing:.34em;color:var(--ink-dim);text-transform:uppercase;margin-right:-.34em;font-size:12px}.start-cta{border:1px solid var(--accent);font-family:var(--mono);letter-spacing:.18em;color:var(--accent);box-shadow:0 0 22px var(--accent-soft), inset 0 0 14px var(--accent-soft);border-radius:999px;margin-top:26px;padding:14px 30px;font-size:13px;animation:2s ease-in-out infinite cta-pulse}.start-cta[data-phase=error]{border-color:var(--accent2);color:var(--accent2);box-shadow:none;animation:none}@keyframes cta-pulse{0%,to{box-shadow:0 0 14px var(--accent-soft), inset 0 0 10px var(--accent-soft)}50%{box-shadow:0 0 34px var(--accent-dim), inset 0 0 18px var(--accent-soft)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}