:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#030711;--panel:#070e1bdb;--panel-soft:#0a1425b3;--border:#6fa6cd33;--cyan:#22d3ee;--purple:#a855f7;--orange:#f59e0b;--text:#eff9ff;--muted:#91a5ba;--green:#3ee58f;--red:#fb5a67}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;margin:0}body{color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.lab-shell{background:radial-gradient(circle at 50% 20%,#1b749d1c,#0000 40%),#030711;min-height:100vh;padding:14px;position:relative;overflow:hidden}.lab-shell:before{content:"";pointer-events:none;background-image:linear-gradient(#4591bc09 1px,#0000 1px),linear-gradient(90deg,#4591bc09 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle,#000 15%,#0000 80%);mask-image:radial-gradient(circle,#000 15%,#0000 80%)}.camera-source{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed}.glass-panel{border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(145deg,#0d192be8,#050b16e8);box-shadow:0 18px 55px #00000047,inset 0 1px #ffffff06}.topbar{z-index:10;border-radius:16px;justify-content:space-between;align-items:center;gap:18px;min-height:78px;padding:10px 16px;display:flex;position:relative}.brand-group{align-items:center;gap:13px;min-width:315px;display:flex}.brand-logo{filter:drop-shadow(0 0 15px #22d3ee4d);width:54px;height:54px}.brand-group h1{letter-spacing:.21em;white-space:nowrap;margin:0;font-size:clamp(16px,1.45vw,23px);font-weight:750}.brand-group p{color:var(--muted);margin:5px 0 0;font-size:13px}.brand-group strong{color:#dfeeff;font-weight:600}.top-status{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;display:flex}.status-chip{background:#03091285;border:1px solid #6aa2c62e;border-radius:10px;grid-template-rows:1fr 1fr;grid-template-columns:27px auto;align-items:center;column-gap:8px;min-width:112px;height:46px;padding:7px 10px;display:grid}.status-chip img{grid-row:1/3;width:25px;height:25px}.status-chip span{color:var(--muted);font-size:10px;line-height:1}.status-chip strong{color:var(--green);font-size:12px;line-height:1.1}.icon-button{cursor:pointer;background:#040b16a6;border:1px solid #4da7d847;border-radius:10px;place-items:center;width:46px;height:46px;transition:all .2s;display:inline-grid}.icon-button:hover{border-color:var(--cyan);transform:translateY(-1px)}.icon-button img{width:25px;height:25px}.menu-screen{grid-template-columns:minmax(310px,.9fr) minmax(380px,1.15fr);align-items:center;gap:clamp(24px,5vw,80px);max-width:1350px;min-height:calc(100vh - 112px);margin:0 auto;padding:50px 35px;display:grid;position:relative}.menu-copy,.instrument-grid{z-index:2;position:relative}.eyebrow{color:var(--cyan);letter-spacing:.18em;font-size:11px;font-weight:800}.menu-copy h2{letter-spacing:-.045em;max-width:770px;margin:16px 0 24px;font-size:clamp(42px,5vw,74px);line-height:.99}.menu-copy>p{color:#a2b4c7;max-width:650px;font-size:clamp(15px,1.35vw,18px);line-height:1.7}.menu-actions{align-items:center;gap:13px;margin-top:27px;display:flex}.primary-button,.secondary-button,.save-button,.record-button,.action-strip button{cursor:pointer;background:linear-gradient(135deg,#0b729dd9,#264590d1);border:1px solid #22d3ee73;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px 17px;font-weight:750;transition:all .2s;display:inline-flex}.primary-button:hover,.secondary-button:hover,.save-button:hover,.record-button:hover,.action-strip button:hover{filter:brightness(1.12);transform:translateY(-1px)}.primary-button:disabled{cursor:wait;opacity:.65}.primary-button img,.secondary-button img,.save-button img,.record-button img,.action-strip button img{width:20px;height:20px}.system-pill{letter-spacing:.14em;color:#9caec0;border:1px solid #90a6be3d;border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800}.system-pill.ready{color:var(--green);border-color:#3ee58f59}.system-pill.loading{color:var(--orange)}.system-pill.error{color:var(--red)}.error-box{background:#5c0f1b59;border:1px solid #fb5a6759;border-radius:9px;padding:12px 14px;color:#ffc0c6!important}.instrument-grid{gap:15px;display:grid}.instrument-card{text-align:left;cursor:pointer;min-height:136px;color:var(--text);border-radius:16px;grid-template-columns:54px 78px 1fr 42px;align-items:center;gap:15px;padding:18px 21px;transition:all .23s;display:grid;position:relative;overflow:hidden}.instrument-card:before{content:"";opacity:0;background:linear-gradient(90deg,#0000,#22d3ee0f,#a855f70e);transition:all .23s;position:absolute;inset:0}.instrument-card:hover:before{opacity:1}.instrument-card img{filter:drop-shadow(0 0 13px #22d3ee4d);width:68px;height:68px;position:relative}.card-number{color:#6091b28c;font-size:31px;font-weight:850;position:relative}.instrument-card h3{margin:0 0 7px;font-size:21px;position:relative}.instrument-card p{color:var(--muted);margin:0;line-height:1.4;position:relative}.card-arrow{color:var(--cyan);font-size:27px;position:relative}.menu-visual{pointer-events:none;opacity:.6;position:absolute;inset:0}.orb{filter:blur(1px);border:1px solid #22d3ee38;border-radius:50%;animation:8s ease-in-out infinite float;position:absolute;box-shadow:inset 0 0 50px #22d3ee12,0 0 70px #a855f70f}.orb-one{width:300px;height:300px;top:9%;right:32%}.orb-two{width:160px;height:160px;animation-delay:-2s;bottom:4%;left:4%}.orb-three{width:90px;height:90px;animation-delay:-5s;bottom:8%;right:4%}.wave-line{background:linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);transform-origin:50%;opacity:.23;width:43%;height:1px;position:absolute;top:50%;left:30%}.wave-a{transform:rotate(8deg)}.wave-b{transform:rotate(-7deg)translateY(45px)}.wave-c{transform:rotate(2deg)translateY(-65px)}@keyframes float{50%{transform:translateY(-15px)rotate(5deg)}}.instrument-screen{grid-template-columns:250px minmax(520px,1fr) 260px;gap:12px;min-height:calc(100vh - 104px);margin-top:12px;display:grid}.control-panel,.session-panel{border-radius:15px;align-self:stretch;min-width:0;padding:17px}.panel-title{border-bottom:1px solid #6d9dbe2b;align-items:center;gap:11px;margin-bottom:13px;padding-bottom:14px;display:flex}.panel-title img{width:36px;height:36px}.panel-title span{color:var(--cyan);letter-spacing:.13em;font-size:10px;font-weight:800;display:block}.panel-title strong{margin-top:3px;font-size:14px;display:block}.control-section{padding:7px 0}.control-section+.control-section{border-top:1px solid #6d9dbe26;margin-top:7px;padding-top:17px}.range-control,.select-control{margin-bottom:16px;display:block}.range-control>span{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.range-control strong,.select-control>span{color:#a7bad0;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-style:normal}.range-control em{color:#e9f8ff;font-size:11px;font-style:normal}input[type=range]{appearance:none;cursor:pointer;background:linear-gradient(90deg,#1e89ad,#8147ce);border-radius:99px;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--cyan);background:#dff8ff;border-radius:50%;width:14px;height:14px;box-shadow:0 0 10px #22d3ee99}.select-control>span{margin-bottom:7px;display:block}.select-control select{color:#e9f7ff;background:#050c17d1;border:1px solid #5c96b940;border-radius:8px;width:100%;height:40px;padding:0 10px}.control-hint{color:#8298ae;border:1px dashed #22d3ee33;border-radius:8px;padding:9px;font-size:11px;line-height:1.6}.stage-column{grid-template-rows:auto 1fr auto;gap:10px;min-width:0;display:grid}.stage-heading{border-radius:15px;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;display:flex}.stage-heading h2{background:linear-gradient(90deg,#22d3ee,#a855f7);color:#0000;-webkit-background-clip:text;margin:3px 0;font-size:24px}.stage-heading p{color:var(--muted);margin:0;font-size:12px}.stage-heading-actions{gap:8px;display:flex}.secondary-button{background:#050f1dbf;padding:10px 13px;font-size:12px}.stage-wrap{background:#050a14;border:1px solid #529ec74d;border-radius:16px;min-height:0;position:relative;overflow:hidden;box-shadow:0 16px 50px #00000059,0 0 30px #22d3ee09}.stage-wrap:before{content:"";pointer-events:none;z-index:2;border:1px solid #22d3ee29;border-radius:15px;position:absolute;inset:0}.stage-wrap canvas{object-fit:contain;cursor:crosshair;touch-action:none;width:100%;height:100%;min-height:430px;max-height:calc(100vh - 275px);display:block}.stage-activate{z-index:5;border:1px solid var(--cyan);cursor:pointer;background:#05101fed;border-radius:10px;padding:14px 20px;font-weight:800;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.help-overlay{z-index:6;background:#030a15f0;border:1px solid #22d3ee6b;border-radius:13px;width:min(330px,100% - 36px);padding:19px;position:absolute;top:18px;right:18px;box-shadow:0 20px 60px #00000073}.help-overlay>button{color:#8ca4b9;cursor:pointer;background:0 0;border:0;font-size:24px;position:absolute;top:7px;right:11px}.help-overlay>span{color:var(--cyan);letter-spacing:.17em;font-size:10px;font-weight:800}.help-overlay h3{margin:8px 0 14px}.help-overlay p{color:#bdcbd8;align-items:center;gap:10px;font-size:13px;display:flex}.help-overlay p strong{color:#04101b;background:var(--cyan);border-radius:50%;place-items:center;min-width:24px;height:24px;display:inline-grid}.help-overlay small{color:#71869c}.action-strip{border-radius:13px;grid-template-columns:minmax(230px,1fr) auto auto auto;align-items:center;gap:8px;padding:8px;display:grid}.live-action{min-width:0;padding:2px 9px}.live-action span{color:var(--cyan);letter-spacing:.13em;font-size:9px;font-weight:800;display:block}.live-action strong{white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:13px;display:block;overflow:hidden}.action-strip button{background:#040d19b8;padding:10px 12px;font-size:12px}.action-strip .back-button{color:#ffc358;border-color:#f59e0ba6}.session-panel{flex-direction:column;gap:9px;display:flex}.metric-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.metric{background:#040b1694;border:1px solid #5b94b829;border-radius:8px;padding:10px}.metric span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px;display:block}.metric strong{color:#eaf9ff;margin-top:4px;font-size:15px;display:block}.session-toggle{color:#b6c7d6;cursor:pointer;background:#040b168c;border:1px solid #5f97b929;border-radius:8px;justify-content:space-between;align-items:center;height:42px;padding:0 10px;font-size:12px;display:flex}.session-toggle input{display:none}.session-toggle i{background:#253649;border-radius:99px;width:34px;height:18px;transition:all .2s;position:relative}.session-toggle i:after{content:"";background:#95a9bb;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:2px;left:2px}.session-toggle input:checked+i{background:#086d8e}.session-toggle input:checked+i:after{box-shadow:0 0 8px var(--cyan);background:#dcfbff;left:18px}.loop-card{background:#040b1694;border:1px solid #5896ba38;border-radius:9px;margin-top:4px;padding:12px}.loop-card span{color:var(--muted);letter-spacing:.1em;font-size:9px}.loop-card strong{margin-top:4px;font-size:14px;display:block}.loop-card.recording{border-color:#fb5a6785}.loop-card.playing{border-color:#3ee58f66}.mini-wave{align-items:center;gap:3px;height:28px;margin-top:6px;display:flex}.mini-wave i{background:var(--cyan);border-radius:99px;width:4px;height:30%;animation:.9s ease-in-out infinite alternate wavePulse}.mini-wave i:nth-child(2n){background:var(--purple);animation-delay:-.3s}.mini-wave i:nth-child(3n){animation-delay:-.6s}.loop-card:not(.recording):not(.playing) .mini-wave i{opacity:.25;animation-play-state:paused}@keyframes wavePulse{to{height:100%}}.record-button,.save-button,.secondary-button.full{width:100%;min-height:43px}.record-button{color:#ff8d97;background:#3e0c1659;border-color:#fb5a678c}.record-button.active{animation:1s infinite alternate recordGlow}@keyframes recordGlow{to{box-shadow:0 0 20px #fb5a673d}}.save-button{background:#04394c75;margin-top:2px}.save-button.recording{border-color:var(--red);color:#ffaeb6;background:#4a0d1a8f}.performance-note{border:1px dashed #5691b438;border-radius:8px;margin-top:auto;padding:11px}.performance-note strong{color:var(--green);font-size:11px}.performance-note p{color:#758ba1;margin:5px 0 0;font-size:10px;line-height:1.5}@media (max-width:1180px){.instrument-screen{grid-template-columns:215px minmax(500px,1fr)}.session-panel{grid-column:1/-1;grid-template-columns:200px repeat(3,1fr);align-items:center;display:grid}.session-panel .panel-title,.session-panel .metric-grid,.session-panel .performance-note{grid-column:span 1}.session-panel .loop-card{margin:0}.stage-wrap canvas{max-height:none}}@media (max-width:850px){.topbar{flex-direction:column;align-items:stretch}.top-status{justify-content:flex-start}.status-chip{flex:1}.menu-screen{grid-template-columns:1fr;padding:35px 10px}.instrument-screen{grid-template-columns:1fr}.control-panel{grid-template-columns:1fr 1fr;gap:12px;display:grid}.panel-title{grid-column:1/-1}.control-section+.control-section{border-top:0;margin:0;padding-top:7px}.stage-wrap canvas{min-height:340px}.action-strip{grid-template-columns:1fr 1fr}.live-action{grid-column:1/-1}.session-panel{grid-template-columns:1fr 1fr;display:grid}.session-panel .panel-title,.session-panel .performance-note{grid-column:1/-1}}@media (max-width:560px){.lab-shell{padding:7px}.brand-group{min-width:0}.brand-group h1{white-space:normal}.top-status{grid-template-columns:1fr 1fr;display:grid}.instrument-card{grid-template-columns:40px 55px 1fr 25px;min-height:112px;padding:14px}.instrument-card img{width:50px;height:50px}.card-number{font-size:22px}.control-panel{grid-template-columns:1fr}.stage-heading{align-items:flex-start}.stage-heading-actions{flex-direction:column}.session-panel{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.session-panel .panel-title,.session-panel .performance-note{grid-column:auto}}:root{--bg:#070812;--panel:#121323c2;--panel-soft:#191b2f9e;--border:#ffffff1a;--cyan:#58e6ff;--purple:#b77cff;--orange:#ffb45c;--pink:#ff6fcf;--text:#f8f7ff;--muted:#aaa8bd}.lab-shell{background:radial-gradient(circle at 14% 8%,#5f5cff38,#0000 28%),radial-gradient(circle at 86% 12%,#ff4db829,#0000 26%),radial-gradient(circle at 55% 96%,#27d5ff1f,#0000 32%),#070812;padding:18px}.lab-shell:before{opacity:.45;background-size:64px 64px}.glass-panel{-webkit-backdrop-filter:blur(24px)saturate(135%);backdrop-filter:blur(24px)saturate(135%);background:linear-gradient(145deg,#1c1d32d1,#0d0e1bc7);border:1px solid #ffffff1c;box-shadow:0 24px 70px #00000057,inset 0 1px #ffffff12}.topbar{border-radius:24px;min-height:84px;padding:13px 18px}.brand-logo{width:58px;height:58px}.brand-group h1{letter-spacing:.13em;font-weight:850}.status-chip{background:#ffffff09;border-color:#ffffff17;border-radius:16px;min-width:120px}.icon-button,.primary-button,.secondary-button,.save-button,.record-button,.action-strip button{border-radius:14px}.instrument-screen{grid-template-columns:230px minmax(560px,1fr) 240px;gap:14px}.control-panel,.session-panel,.stage-heading,.action-strip{border-radius:22px}.stage-heading{padding:15px 20px}.stage-heading h2{letter-spacing:-.03em;background:linear-gradient(90deg,#74ebff,#c084fc,#ff77c8);color:#0000;-webkit-background-clip:text;font-size:28px}.stage-wrap{border-color:#ffffff1f;border-radius:25px;box-shadow:0 28px 80px #0000006b,0 0 55px #7059ff14}.stage-wrap:before{border-color:#ffffff17;border-radius:24px}.stage-wrap canvas{min-height:450px}.control-section select{background:#ffffff0d;border-color:#ffffff1a;border-radius:13px}.control-hint{color:#c4c2d2;background:linear-gradient(135deg,#58e6ff14,#b77cff14);border:0;border-radius:15px}.metric,.session-toggle,.loop-card{background:#ffffff09;border-color:#ffffff14;border-radius:15px}.primary-button{background:linear-gradient(135deg,#32c8ee,#7a63ff 58%,#f05ebd);border:0;box-shadow:0 10px 30px #675bff38}.instrument-card{background:linear-gradient(135deg,#ffffff0e,#ffffff05);border-radius:24px;min-height:144px}.instrument-card:hover{border-color:#74ebff73;transform:translateY(-4px)scale(1.01);box-shadow:0 24px 55px #00000045,0 0 38px #b77cff1f}.panel-title span,.eyebrow{color:#7de9ff}.action-strip{padding:10px}.live-action strong{font-size:14px}@media (max-width:1180px){.instrument-screen{grid-template-columns:205px minmax(500px,1fr)}}