:root{--font:"DM Sans", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--accent:#d4a017;--accent-2:#f0c14b;--accent-glow:#d4a01759;--radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-xl:32px;--ease:cubic-bezier(.22, 1, .36, 1);--ease-snap:cubic-bezier(.16, 1, .3, 1);--header-h:64px;--safe-b:env(safe-area-inset-bottom,0px)}:root,[data-theme=dark]{--bg-0:#06060c;--bg-1:#0c0c16;--bg-2:#12121f;--bg-elevated:#161624b8;--glass:#ffffff0f;--glass-2:#ffffff1a;--glass-border:#ffffff1f;--glass-border-strong:#fff3;--text:#f4f4f8;--text-2:#a1a1b5;--text-3:#6b6b82;--danger:#f43f5e;--success:#22c55e;--warn:#eab308;--shadow:0 8px 40px #00000073;--noise-opacity:.04}[data-theme=light]{--bg-0:#f3f1ec;--bg-1:#ebe7df;--bg-2:#e2ddd3;--bg-elevated:#ffffffb8;--glass:#ffffff8c;--glass-2:#ffffffbf;--glass-border:#14142814;--glass-border-strong:#14142824;--text:#12121a;--text-2:#4a4a5c;--text-3:#7a7a8e;--danger:#e11d48;--success:#16a34a;--warn:#ca8a04;--shadow:0 8px 32px #1410281a;--noise-opacity:.03}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{font-family:var(--font);background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.app-bg{z-index:0;pointer-events:none;background:var(--bg-0);position:fixed;inset:0;overflow:hidden}.app-bg:before{content:"";background:radial-gradient(circle, var(--accent-glow), transparent 65%);filter:blur(40px);width:60vmax;height:60vmax;animation:drift 22s var(--ease) infinite alternate;border-radius:50%;position:absolute;top:-20%;left:-10%}.app-bg:after{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%);filter:blur(50px);width:50vmax;height:50vmax;animation:drift 28s var(--ease) infinite alternate-reverse;border-radius:50%;position:absolute;bottom:-15%;right:-10%}.orb{filter:blur(60px);opacity:.45;border-radius:50%;position:absolute}.orb-a{background:color-mix(in srgb, var(--accent) 25%, transparent);width:40vmax;height:40vmax;animation:drift 18s var(--ease) infinite alternate;top:40%;left:40%}@keyframes drift{0%{transform:translate(0)scale(1)}to{transform:translate(8%,6%)scale(1.08)}}.noise{z-index:1;pointer-events:none;opacity:var(--noise-opacity);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.app-shell{z-index:2;flex-direction:column;height:100%;min-height:0;display:flex;position:relative}.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px)saturate(1.4);border:1px solid var(--glass-border);box-shadow:var(--shadow), inset 0 1px 0 #ffffff14}.glass-strong{background:var(--glass-2);-webkit-backdrop-filter:blur(32px)saturate(1.5);border:1px solid var(--glass-border-strong);box-shadow:var(--shadow), inset 0 1px 0 #ffffff1f}.glass-pane{border-radius:var(--radius-xl);padding:2rem;position:relative;overflow:hidden}.glass-pane:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff1f 0%,#0000 40% 60%,#ffffff0a 100%);position:absolute;inset:0}h1,h2,h3{letter-spacing:-.02em;margin:0;font-weight:600}.subtitle{color:var(--text-2);letter-spacing:.02em;font-size:.875rem;font-weight:500}.mono{font-family:var(--mono);letter-spacing:.04em;font-size:.8rem}.header{height:var(--header-h);border-bottom:1px solid var(--glass-border);background:color-mix(in srgb, var(--bg-elevated) 80%, transparent);-webkit-backdrop-filter:blur(20px);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:0 1.25rem;display:flex}.brand{flex-direction:column;gap:.1rem;min-width:0;display:flex}.brand-title{letter-spacing:-.03em;background:linear-gradient(120deg, var(--text) 0%, var(--accent-2) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.15rem;font-weight:700;line-height:1.2}.brand-sub{color:var(--text-2);letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;font-weight:500;overflow:hidden}.header-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.btn{appearance:none;border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font-family:var(--font);cursor:pointer;transition:transform .15s var(--ease-snap), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);white-space:nowrap;border-radius:999px;align-items:center;gap:.4rem;padding:.55rem 1rem;font-size:.875rem;font-weight:600;display:inline-flex}.btn:hover{background:var(--glass-2);border-color:var(--glass-border-strong)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#0a0a12;box-shadow:0 4px 20px var(--accent-glow);border-color:#0000}.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(135deg, var(--accent), var(--accent-2))}.btn-danger{background:color-mix(in srgb, var(--danger) 20%, var(--glass));border-color:color-mix(in srgb, var(--danger) 40%, transparent);color:var(--danger)}.btn-ghost{background:0 0}.btn-icon{border-radius:12px;justify-content:center;width:40px;height:40px;padding:0}.btn-rec{background:color-mix(in srgb, var(--danger) 85%, #000);color:#fff;border-color:#0000;min-width:110px}.btn-rec.is-recording{animation:1.2s infinite pulse-rec}@keyframes pulse-rec{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent)}50%{box-shadow:0 0 0 10px #0000}}.icon-btn{border:1px solid var(--glass-border);background:var(--glass);width:36px;height:36px;color:var(--text-2);cursor:pointer;transition:all .15s var(--ease);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{color:var(--text);border-color:var(--glass-border-strong);background:var(--glass-2)}.icon-btn.active{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 50%, transparent);box-shadow:0 0 16px var(--accent-glow)}.studio-layout{min-height:0;padding:.75rem;padding-bottom:calc(.75rem + var(--safe-b));flex:1;grid-template-columns:280px 1fr 300px;gap:.75rem;display:grid}@media (max-width:1100px){.studio-layout{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;overflow-y:auto}}.panel{border-radius:var(--radius-lg);flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-header{border-bottom:1px solid var(--glass-border);flex-shrink:0;justify-content:space-between;align-items:center;gap:.5rem;padding:.85rem 1rem;display:flex}.panel-header h2{text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-size:.8rem;font-weight:600}.panel-body{flex:1;min-height:0;padding:.75rem;overflow:auto}.chain-list{flex-direction:column;gap:.5rem;display:flex}.module-card{border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass);cursor:grab;transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease-snap);-webkit-user-select:none;user-select:none;touch-action:none;padding:.75rem}.module-card:hover{border-color:var(--glass-border-strong)}.module-card.selected{border-color:color-mix(in srgb, var(--mod-color,var(--accent)) 70%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--mod-color,var(--accent)) 40%, transparent), 0 8px 24px color-mix(in srgb, var(--mod-color,var(--accent)) 15%, transparent)}.module-card.disabled{opacity:.5}.module-card.dragging{opacity:.9;box-shadow:var(--shadow);cursor:grabbing}.module-top{align-items:center;gap:.5rem;display:flex}.module-swatch{background:var(--mod-color);border-radius:4px;flex-shrink:0;width:8px;height:28px}.module-name{flex:1;min-width:0;font-size:.9rem;font-weight:600}.module-drag{color:var(--text-3);letter-spacing:.1em;font-size:.75rem}.transport{flex-direction:column;gap:1rem;padding:1rem;display:flex}.meters{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.meter{flex-direction:column;gap:.35rem;display:flex}.meter-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);justify-content:space-between;font-size:.7rem;display:flex}.meter-track{background:color-mix(in srgb, var(--text) 8%, transparent);border-radius:999px;height:8px;position:relative;overflow:hidden}.meter-fill{border-radius:inherit;background:linear-gradient(90deg, var(--success), var(--accent-2), var(--danger));width:0%;height:100%;transition:width 50ms linear}.meter-fill.gr{background:linear-gradient(90deg, var(--accent), var(--warn))}.transport-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.status-pill{text-transform:uppercase;letter-spacing:.06em;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-2);border-radius:999px;padding:.3rem .65rem;font-size:.7rem;font-weight:600}.status-pill.live{color:var(--success);border-color:color-mix(in srgb, var(--success) 40%, transparent)}.status-pill.rec{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent)}.param-grid{flex-direction:column;gap:.85rem;display:flex}.param{flex-direction:column;gap:.35rem;display:flex}.param-label{color:var(--text-2);justify-content:space-between;font-size:.78rem;font-weight:500;display:flex}.param-value{font-family:var(--mono);color:var(--accent-2);font-size:.72rem}input[type=range]{appearance:none;background:color-mix(in srgb, var(--text) 10%, transparent);border-radius:999px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg, var(--accent), var(--accent-2));width:16px;height:16px;box-shadow:0 0 12px var(--accent-glow);cursor:pointer;border:2px solid var(--bg-0);border-radius:50%}input[type=range]::-moz-range-thumb{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:16px;height:16px;box-shadow:0 0 12px var(--accent-glow);cursor:pointer;border:2px solid var(--bg-0);border-radius:50%}.field{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.field label{color:var(--text-2);letter-spacing:.02em;font-size:.78rem;font-weight:600}.field input{font-family:var(--font);border:1px solid var(--glass-border);background:color-mix(in srgb, var(--bg-0) 40%, transparent);color:var(--text);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);border-radius:14px;outline:none;padding:.75rem 1rem;font-size:.95rem}.field input:focus{border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 0 3px var(--accent-glow)}.auth-screen{flex:1;justify-content:center;align-items:center;min-height:0;padding:1.5rem;display:flex;overflow:auto}.auth-card{width:min(420px,100%);position:relative}.auth-tabs{background:color-mix(in srgb, var(--bg-0) 40%, transparent);border-radius:999px;gap:.35rem;margin-bottom:1.5rem;padding:.3rem;display:flex}.auth-tab{color:var(--text-2);font-family:var(--font);cursor:pointer;transition:all .2s var(--ease);background:0 0;border:none;border-radius:999px;flex:1;padding:.55rem;font-size:.875rem;font-weight:600}.auth-tab.active{background:var(--glass-2);color:var(--text);box-shadow:0 2px 12px #00000026}.auth-error{background:color-mix(in srgb, var(--danger) 15%, transparent);border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);color:var(--danger);border-radius:12px;margin-bottom:1rem;padding:.65rem .85rem;font-size:.85rem}.turnstile-wrap{justify-content:center;min-height:65px;margin:1rem 0;display:flex}.license-reveal{border-radius:var(--radius);border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);background:color-mix(in srgb, var(--accent) 8%, transparent);text-align:center;margin-top:1rem;padding:1rem}.license-key{font-family:var(--mono);color:var(--accent-2);letter-spacing:.08em;word-break:break-all;margin:.5rem 0;font-size:.95rem;font-weight:600}.recording-item{border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass);cursor:pointer;transition:border-color .15s var(--ease);margin-bottom:.5rem;padding:.75rem}.recording-item:hover,.recording-item.active{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}.recording-title{margin-bottom:.2rem;font-size:.9rem;font-weight:600}.recording-meta{color:var(--text-3);flex-wrap:wrap;gap:.5rem;font-size:.72rem;display:flex}.recording-actions{flex-wrap:wrap;gap:.35rem;margin-top:.5rem;display:flex}.accent-menu{border-radius:var(--radius);z-index:50;min-width:180px;padding:.5rem;position:absolute;top:calc(100% + 8px);right:0}.accent-option{width:100%;color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.5rem .6rem;font-size:.85rem;display:flex}.accent-option:hover{background:var(--glass)}.accent-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.hero-strip{text-align:center;padding:.5rem 1rem 1rem}.hero-strip p{color:var(--text-2);margin:.35rem 0 0;max-width:42ch;margin-inline:auto;font-size:.85rem;line-height:1.45}.empty{text-align:center;color:var(--text-3);padding:1.5rem .5rem;font-size:.85rem}.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-thumb{background:var(--glass-border-strong);border-radius:999px}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.flex-1{flex:1}.gap-sm{gap:.5rem}.row{align-items:center;display:flex}.muted{color:var(--text-3);font-size:.8rem}.chip{text-transform:uppercase;letter-spacing:.06em;background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--accent-2);border-radius:6px;padding:.15rem .45rem;font-size:.65rem;font-weight:700}.error-banner{background:color-mix(in srgb, var(--danger) 12%, transparent);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);color:var(--danger);border-radius:12px;margin:.5rem .75rem 0;padding:.65rem .85rem;font-size:.85rem}
