:root{--sans:"Trebuchet MS", "Segoe UI", sans-serif;--display:"Trebuchet MS", "Segoe UI", sans-serif;--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--text:#f3f7ff;--muted:#e2ebffb8;--bg-0:#07040b;--bg-1:#120718;--bg-2:#27111d;--accent:#ff6559;--accent-2:#ffd166;--spark:#b8ff78;--ghost:#c69dff;--surface:#ffffff0f;--surface-strong:#09080fbd;--grid:#ffffff14;--glow:#ff65596b;--pointer-x:50%;--pointer-y:42%;--tilt-x:0deg;--tilt-y:0deg;--energy:.5;font:18px/1.45 var(--sans);letter-spacing:.01em;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#03050a}*{box-sizing:border-box}html{background:#03050a;min-height:100%}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at 20% 0,#ffffff0a 0,#0000 28%),radial-gradient(circle at 80% 0,#ffffff0f 0,#0000 32%),linear-gradient(#090816 0,#05060b 52%,#010204 100%);margin:0;position:relative;overflow-x:hidden}body:before,body:after{content:"";pointer-events:none;position:fixed;inset:0}body:before{opacity:.28;mix-blend-mode:screen;background:radial-gradient(circle at 50% 0,#ffffff0d 0,#0000 26%),radial-gradient(circle at 10% 20%,#ffffff0a 0,#0000 18%),radial-gradient(circle at 90% 25%,#ffffff0d 0,#0000 16%),repeating-linear-gradient(#ffffff05 0 1px,#0000 1px 3px)}body:after{opacity:.8;background:radial-gradient(circle at 50% 16%,#0000 0,#0000002e 58%,#000000a3 100%),linear-gradient(#0000000f,#0000006b)}#root{isolation:isolate;min-height:100vh;position:relative}button,input{font:inherit}button{color:inherit}h1,h2,p{margin:0}::selection{color:#fff;background:#ff655952}.app-shell{background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), var(--glow) 0, transparent 30%), linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, var(--bg-2));gap:clamp(16px,2vw,24px);min-height:100vh;padding:clamp(16px,2.5vw,32px);display:grid;position:relative;overflow:hidden}.app-shell:before,.app-shell:after{content:"";pointer-events:none;position:absolute;inset:0}.app-shell:before{background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), #ffffff24 0, transparent 32%), radial-gradient(circle at 14% 18%, #ffffff14 0, transparent 18%), radial-gradient(circle at 84% 12%, #ffffff0f 0, transparent 22%);filter:blur(28px);opacity:.75}.app-shell:after{opacity:.32;background:linear-gradient(#ffffff08,#0000 14% 86%,#00000075),repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 72px)}.masthead{z-index:1;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start;gap:20px;display:grid;position:relative}.brand{gap:16px;display:grid}.eyebrow,.panel-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--muted);font-size:.72rem;line-height:1.2}.masthead h1{font-family:var(--display);letter-spacing:-.08em;text-wrap:balance;color:var(--text);text-shadow:0 0 24px #ffffff14, 0 0 60px var(--glow);font-size:clamp(3.2rem,8vw,6.8rem);line-height:.88}.lede{max-width:58ch;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem)}.transport-bar{flex-wrap:wrap;place-content:start flex-end;gap:10px;display:flex}.transport-button,.preset-card,.lane-label,.step-cell{-webkit-tap-highlight-color:transparent;border:0}.transport-button{color:var(--text);text-transform:uppercase;letter-spacing:.14em;font-family:var(--mono);cursor:pointer;background:linear-gradient(#ffffff2e,#ffffff14),#ffffff0a;border:1px solid #ffffff1f;border-radius:999px;padding:.9rem 1.1rem;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;box-shadow:0 12px 32px #00000047,inset 0 1px #ffffff1f}.transport-button:hover{box-shadow:0 16px 36px #0000004d, 0 0 24px var(--glow), inset 0 1px 0 #ffffff29;border-color:#ffffff3d;transform:translateY(-1px)}.transport-button--ghost{background:#ffffff0d}.transport-button:focus-visible,.preset-card:focus-visible,.lane-label:focus-visible,.step-cell:focus-visible,.core-button:focus-visible,.slider-row input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.status-chip{background:var(--surface);border:1px solid #ffffff14;border-radius:1.1rem;gap:.22rem;min-width:8.5rem;padding:.85rem 1rem;display:grid;box-shadow:inset 0 1px #ffffff14}.status-chip span{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;font-family:var(--mono)}.status-chip strong{letter-spacing:.02em;font-size:.98rem}.performance-grid{z-index:1;grid-template-columns:minmax(0,1.55fr) minmax(320px,.88fr);align-items:start;gap:20px;display:grid;position:relative}.stage{background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), #ffffff24 0, transparent 30%), linear-gradient(180deg, #ffffff1a, #ffffff08), linear-gradient(180deg, #00000024, #00000052);min-height:clamp(540px,66vh,800px);transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);isolation:isolate;border:1px solid #ffffff17;border-radius:2.2rem;transition:transform .14s,box-shadow .24s;position:relative;overflow:hidden;box-shadow:0 36px 90px #0000007a,inset 0 1px #ffffff14}.stage--live{box-shadow:0 42px 110px #0000008f, 0 0 42px var(--glow), inset 0 1px 0 #ffffff1f}.stage-grid,.stage-vignette,.stage-orbit,.stage-pulse,.waveform,.spark-layer{pointer-events:none;position:absolute;inset:0}.stage-grid{background:radial-gradient(circle at center, #ffffff0a, transparent 54%), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);opacity:.58;background-size:auto,72px 72px,72px 72px;-webkit-mask-image:radial-gradient(circle,#000 20%,#000c 56%,#0000 100%);mask-image:radial-gradient(circle,#000 20%,#000c 56%,#0000 100%)}.stage-vignette{mix-blend-mode:multiply;background:radial-gradient(circle at 50% 48%,#0000 0,#00000024 44%,#00000080 100%),linear-gradient(#0000,#00000038 78%,#0000006b)}.stage-orbit{box-shadow:inset 0 0 40px #ffffff0d, 0 0 90px var(--glow);opacity:.82;border:1px solid #ffffff14;border-radius:50%;inset:50%;transform:translate(-50%,-50%)}.stage-orbit--outer{width:min(82%,560px);height:min(82%,560px);animation:30s linear infinite orbit-spin}.stage-orbit--inner{width:min(54%,380px);height:min(54%,380px);animation:22s linear infinite orbit-spin-reverse}.stage-pulse{filter:blur(26px);opacity:.9;background:radial-gradient(circle,#fff3,#ffffff0a 42%,#0000 74%);border-radius:50%;width:min(20vw,220px);height:min(20vw,220px);animation:5.2s ease-in-out infinite pulse-breathe;inset:50%;transform:translate(-50%,-50%)}.core-stack{z-index:3;pointer-events:none;justify-items:center;gap:14px;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.core-button{pointer-events:auto;aspect-ratio:1;width:clamp(160px,20vw,260px);color:var(--text);cursor:pointer;text-transform:uppercase;letter-spacing:.16em;box-shadow:0 28px 70px #0000007a, 0 0 0 1px #ffffff0a inset, 0 0 70px var(--glow);isolation:isolate;background:radial-gradient(circle at 30% 24%,#ffffff57,#0000 22%),radial-gradient(circle,#ffffff1f,#0000 56%),linear-gradient(#ffffff24,#ffffff0d);border:1px solid #ffffff24;border-radius:50%;place-items:center;transition:transform .16s,box-shadow .22s,border-color .16s;display:grid;position:relative;overflow:hidden}.core-button:before,.core-button:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:10%}.core-button:before{border:1px solid #fff3;box-shadow:inset 0 0 50px #ffffff14}.core-button:after{filter:blur(2px);opacity:.95;background:radial-gradient(circle at 32% 24%,#ffffff57,#0000 24%),radial-gradient(circle,#0000 42%,#ffffff1f 44%,#0000 68%);inset:18%}.core-button:hover{box-shadow:0 34px 88px #00000085, 0 0 32px var(--glow), 0 0 100px #ffffff14;border-color:#ffffff3d;transform:scale(1.02)}.core-button span,.core-button strong,.core-button small{z-index:1;position:relative}.core-button span,.core-button small{font-family:var(--mono);color:var(--muted);font-size:.68rem}.core-button span{letter-spacing:.18em;margin-top:.6rem}.core-button strong{font-family:var(--display);letter-spacing:.2em;font-size:clamp(2.5rem,4vw,4rem);line-height:.86}.core-button small{letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem}.core-readout{pointer-events:none;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(88vw,460px);display:inline-flex}.core-readout span{color:var(--muted);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#00000057;border:1px solid #ffffff14;border-radius:999px;padding:.55rem .8rem;font-size:.72rem;box-shadow:inset 0 1px #ffffff0f}.waveform{z-index:1;opacity:.9;height:46%;inset:auto 4% 2.5%;overflow:visible}.wave{fill:none;stroke-linecap:round;stroke-linejoin:round}.wave--blur{stroke:var(--glow);stroke-width:12px;opacity:.18;filter:blur(10px)}.wave--line{stroke:var(--theme-root);stroke-width:3.25px;opacity:.96;filter:drop-shadow(0 0 18px var(--glow))}.spark-layer{z-index:2}.spark{opacity:0;width:1rem;height:1rem;transform:translate(-50%, -50%) scale(var(--spark-scale,1));filter:blur(.4px)drop-shadow(0 0 12px #ffffff47);border-radius:50%;animation-name:spark-float;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;position:absolute}.stage-corner{z-index:3;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);pointer-events:none;gap:.08rem;font-size:.68rem;display:grid;position:absolute;bottom:18px}.stage-corner strong{color:var(--text);letter-spacing:.08em;font-size:.92rem}.stage-corner--left{left:18px}.stage-corner--right{text-align:right;right:18px}.control-stack{gap:16px;display:grid}.panel{z-index:1;background:var(--surface-strong);-webkit-backdrop-filter:blur(22px)saturate(150%);backdrop-filter:blur(22px)saturate(150%);border:1px solid #ffffff14;border-radius:1.8rem;padding:1.1rem;position:relative;box-shadow:0 24px 70px #0000005c,inset 0 1px #ffffff0d}.panel-head{justify-content:space-between;align-items:start;gap:12px;margin-bottom:1rem;display:flex}.panel h2{font-family:var(--display);letter-spacing:-.05em;color:var(--text);font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1}.panel-badge{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-family:var(--mono);color:var(--text);background:#ffffff0f;border:1px solid #ffffff14;border-radius:999px;padding:.45rem .72rem}.control-panel,.preset-panel,.hints-panel{gap:1rem;display:grid}.slider-row{gap:.7rem;display:grid}.slider-copy{justify-content:space-between;align-items:center;gap:12px;display:flex}.slider-copy span{text-transform:uppercase;letter-spacing:.14em;font-family:var(--mono);color:var(--muted);font-size:.72rem}.slider-copy strong{font-family:var(--mono);color:var(--text);font-size:.86rem}.slider-row input[type=range]{appearance:none;background:linear-gradient(90deg,#ffffff29,#ffffff0d),#ffffff0a;border:1px solid #ffffff14;border-radius:999px;width:100%;height:.9rem;padding:0;box-shadow:inset 0 1px #ffffff14}.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;background:radial-gradient(circle at 32% 28%, #ffffffd6, #fff3 26%, #0000002e 58%), var(--theme-root);width:1.35rem;height:1.35rem;box-shadow:0 0 0 6px #ffffff0d, 0 0 20px var(--glow);cursor:pointer;border:1px solid #ffffff2e;border-radius:50%}.slider-row input[type=range]::-moz-range-thumb{background:radial-gradient(circle at 32% 28%, #ffffffd6, #fff3 26%, #0000002e 58%), var(--theme-root);width:1.35rem;height:1.35rem;box-shadow:0 0 0 6px #ffffff0d, 0 0 20px var(--glow);cursor:pointer;border:1px solid #ffffff2e;border-radius:50%}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.preset-card{text-align:left;cursor:pointer;background:radial-gradient(circle at 24% 20%,#ffffff24,#0000 24%),#ffffff0d;border:1px solid #ffffff14;border-radius:1.2rem;gap:.5rem;min-height:7.75rem;padding:.95rem;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:grid;position:relative;overflow:hidden}.preset-card:hover{box-shadow:0 14px 30px #00000042, 0 0 18px var(--glow);border-color:#ffffff2e;transform:translateY(-2px)}.preset-card--active{box-shadow:0 18px 38px #0000004d, 0 0 28px var(--glow), inset 0 1px 0 #ffffff1f;background:radial-gradient(circle at 24% 20%,#fff3,#0000 24%),linear-gradient(#ffffff21,#ffffff12);border-color:#ffffff38}.preset-card span,.preset-card small{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}.preset-card span{color:var(--muted);font-size:.7rem}.preset-card strong{font-size:1rem;line-height:1.1}.preset-card small{color:var(--muted);font-size:.68rem}.hints-panel ul{gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.hints-panel li{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:.95rem;justify-content:space-between;align-items:center;gap:12px;padding:.68rem .82rem;display:flex}.hints-panel li strong{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem}.hints-panel li span{color:var(--muted);text-align:right;font-size:.9rem}.sequencer-panel{gap:1rem;display:grid}.sequencer-head{margin-bottom:.4rem}.matrix-stats{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.matrix-stats span{color:var(--muted);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;background:#ffffff0a;border:1px solid #ffffff12;border-radius:999px;padding:.45rem .72rem;font-size:.68rem}.matrix-scroll{padding-bottom:.25rem;overflow-x:auto}.matrix-grid{gap:10px;min-width:900px;display:grid}.matrix-ruler,.matrix-row{grid-template-columns:9.6rem repeat(16,minmax(0,1fr));gap:8px;display:grid}.ruler-step{min-height:2.85rem;font-family:var(--mono);color:var(--muted);background:#ffffff08;border:1px solid #ffffff0f;border-radius:.9rem;place-items:center;font-size:.72rem;display:grid}.ruler-step--active{color:var(--text);box-shadow:0 0 18px var(--glow);border-color:#fff3}.lane-label{text-align:left;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:1rem;grid-template-columns:1fr auto;grid-template-areas:"name count""sub count";align-items:center;gap:.1rem .55rem;min-height:2.85rem;padding:.75rem .85rem;display:grid;box-shadow:inset 0 1px #ffffff0d}.lane-label span:first-child{font-family:var(--display);letter-spacing:-.04em;color:var(--text);grid-area:name;font-size:1rem}.lane-label small{color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;grid-area:sub;font-size:.64rem}.lane-count{font-family:var(--mono);letter-spacing:.08em;color:var(--muted);grid-area:count;place-self:start end;font-size:.68rem}.matrix-row--muted .lane-label{opacity:.72}.step-cell{cursor:pointer;background:radial-gradient(circle at 30% 26%,#ffffff14,#0000 20%),#ffffff09;border:1px solid #ffffff12;border-radius:.95rem;min-height:2.85rem;transition:transform .16s,border-color .16s,box-shadow .16s,background .16s;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}.step-cell:hover{border-color:#ffffff29;transform:translateY(-1px)}.step-cell__halo{border-radius:inherit;opacity:0;background:radial-gradient(circle at 50% 50%, #ffffff38, transparent 58%), radial-gradient(circle, var(--glow), transparent 72%);transition:opacity .16s;position:absolute;inset:0}.step-cell--on{box-shadow:0 0 0 1px #ffffff0a inset, 0 0 16px var(--glow);background:radial-gradient(circle at 30% 24%,#ffffff3d,#0000 22%),linear-gradient(#ffffff21,#ffffff0d);border-color:#ffffff29}.step-cell--on .step-cell__halo{opacity:1}.step-cell--playhead{border-color:var(--accent);box-shadow:0 0 0 1px #ffffff0d inset, 0 0 26px var(--glow);transform:translateY(-2px)}.matrix-row--muted .step-cell{opacity:.36}.matrix-row--muted .step-cell--on{opacity:.55}.footer-line{z-index:1;color:var(--muted);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:10px 18px;padding:.15rem .1rem .25rem;font-size:.72rem;display:flex;position:relative}@keyframes orbit-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes orbit-spin-reverse{0%{transform:translate(-50%,-50%)rotate(360deg)}to{transform:translate(-50%,-50%)rotate(0)}}@keyframes pulse-breathe{0%,to{opacity:.58;transform:translate(-50%,-50%)scale(.92)}50%{opacity:.98;transform:translate(-50%,-50%)scale(1.12)}}@keyframes spark-float{0%{opacity:0;transform:translate(-50%, -50%) scale(calc(var(--spark-scale,1) * .6));filter:blur(.6px)brightness(1.2)}14%{opacity:1}to{opacity:0;transform:translate(-50%, -50%) scale(calc(var(--spark-scale,1) * 1.85));filter:blur(2px)brightness(2)}}@media (width<=1180px){.masthead,.performance-grid{grid-template-columns:1fr}.transport-bar{justify-content:flex-start}.control-stack{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=900px){.control-stack{grid-template-columns:1fr}.panel{padding:1rem}.stage{min-height:520px}}@media (width<=720px){.app-shell{padding:14px}.masthead h1{letter-spacing:-.09em}.preset-grid{grid-template-columns:1fr}.footer-line{letter-spacing:.1em}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}