@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap";:root{font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-primary: #8B5CF6;--color-primary-bright: #A855F7;--color-primary-glow: #C084FC;--color-primary-dark: #7C3AED;--color-accent: #EC4899;--color-accent-bright: #F472B6;--color-bg-base: #0F0A1A;--color-bg-card: #1A1025;--color-bg-elevated: #251433;--color-bg-input: #1F1630;--color-text-primary: #F1E8FF;--color-text-secondary: #C4B5D8;--color-text-muted: #8B7DA0;--color-success: #22C55E;--color-warning: #FBBF24;--color-error: #F87171;--glow-primary: 0 0 20px rgba(139, 92, 246, .5);--glow-strong: 0 0 30px rgba(139, 92, 246, .7), 0 0 60px rgba(139, 92, 246, .3);--glow-accent: 0 0 20px rgba(236, 72, 153, .5);--glow-text: 0 0 10px rgba(192, 132, 252, .6);--border-subtle: rgba(139, 92, 246, .15);--border-medium: rgba(139, 92, 246, .3);--border-strong: rgba(139, 92, 246, .5);--gradient-primary: linear-gradient(120deg, #8B5CF6, #A855F7);--gradient-accent: linear-gradient(120deg, #EC4899, #F472B6);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--touch-target-min: 44px;color:var(--color-text-primary);background-color:var(--color-bg-base)}*{box-sizing:border-box}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(139,92,246,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 1px);background-size:50px 50px;z-index:-1}body{margin:0;min-height:100vh;background:radial-gradient(circle at 16% 24%,rgba(139,92,246,.12),transparent 30%),radial-gradient(circle at 84% 18%,rgba(236,72,153,.08),transparent 24%),radial-gradient(circle at 50% 80%,rgba(124,58,237,.06),transparent 40%),var(--color-bg-base);color:var(--color-text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#8b5cf60d;border-radius:4px}::-webkit-scrollbar-thumb{background:#8b5cf64d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#8b5cf680}*{scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.3) rgba(139,92,246,.05)}a{color:inherit;text-decoration:none}button{font-family:inherit}#root{min-height:100vh}.app-shell{max-width:1380px;margin:0 auto;padding:48px 28px 80px}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.02em}.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--gradient-primary);box-shadow:var(--glow-primary);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px #8b5cf699}50%{box-shadow:0 0 24px #8b5cf6e6,0 0 40px #a855f766}}.nav-links{display:flex;align-items:center;gap:8px}.nav-link{border:1px solid var(--border-subtle);background:var(--color-bg-elevated);color:var(--color-text-primary);padding:8px 12px;border-radius:10px;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.nav-link:hover:not(.active){border-color:var(--border-medium);background:#8b5cf61a;box-shadow:0 0 15px #8b5cf633}.nav-link.active{border-color:var(--color-primary);box-shadow:var(--glow-primary),inset 0 0 20px #8b5cf61a;background:linear-gradient(180deg,#8b5cf626,#8b5cf60d)}.hamburger{display:none;flex-direction:column;gap:4px;width:40px;height:40px;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:10px;border:1px solid var(--border-subtle);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.hamburger:hover{border-color:var(--border-medium);box-shadow:var(--glow-primary)}.hamburger span{display:block;width:18px;height:2px;background:var(--color-text-primary);transition:transform .14s ease,opacity .14s ease}.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.hamburger.is-open span:nth-child(2){opacity:0}.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media(max-width:900px){.app-shell{padding:32px 18px 64px}}@media(max-width:900px)and (max-height:500px){.app-shell{padding:16px 18px 32px}}.hero{display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:start;margin-bottom:32px}@media(max-width:860px){.hero{grid-template-columns:1fr}.nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:calc(100% + 8px);right:0;left:auto;background:var(--color-bg-card);padding:12px;border:1px solid var(--border-medium);border-radius:12px;flex-direction:column;z-index:100;min-width:160px;box-shadow:var(--glow-primary),0 20px 40px #0006}.hamburger{display:flex}}@media(max-width:900px)and (max-height:500px){.hero{grid-template-columns:1fr;margin-bottom:16px;gap:12px}}.hero-left h1{margin:6px 0 4px;font-size:40px;letter-spacing:-.02em}@media(max-width:900px)and (max-height:500px){.hero-left h1{font-size:28px;margin:4px 0 2px}}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--color-primary-glow);font-size:12px;text-shadow:var(--glow-text)}@media(max-width:900px)and (max-height:500px){.eyebrow{display:none}}.lede{color:var(--color-text-secondary);margin:8px 0 16px}.hero-actions{display:flex;flex-direction:column;gap:10px}.hero-card{background:linear-gradient(135deg,#8b5cf61f,#ec489914);border:1px solid var(--border-subtle);border-radius:16px;padding:20px 18px;box-shadow:0 12px 40px #00000040,var(--glow-primary)}.hero-card ul{padding-left:18px;margin:10px 0 0;color:var(--color-text-secondary)}.hero-card li{margin-bottom:6px}.card-title{font-weight:600;color:var(--color-text-primary);margin-bottom:8px;text-shadow:0 0 8px rgba(139,92,246,.3)}.hint{margin:0;color:var(--color-text-muted);font-size:14px}@media(max-width:900px)and (max-height:500px){.hint{font-size:12px}}.transport{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;background:var(--color-bg-card);border:1px solid var(--border-subtle);padding:12px 16px;border-radius:14px;box-shadow:0 12px 40px #00000040,var(--glow-primary)}.transport-primary{display:flex;align-items:center;gap:12px}.transport-tempo{display:flex;align-items:center;gap:10px;background:var(--color-bg-input);border:1px solid var(--border-subtle);padding:8px 12px;border-radius:10px;flex:1;min-width:200px;max-width:320px}.transport-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.play-button{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:12px;background:var(--gradient-primary);color:var(--color-bg-base);font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s ease,box-shadow .3s ease;box-shadow:var(--glow-primary);min-height:48px}.play-button:hover{transform:translateY(-2px);box-shadow:var(--glow-strong)}.play-button:active{transform:translateY(0)}.play-button.playing{background:var(--gradient-accent);box-shadow:var(--glow-accent)}.play-button svg{flex-shrink:0}.status-indicator{display:flex;flex-direction:column;align-items:center;gap:4px}.status-text{font-size:10px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.tempo-label{font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}.action-button{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--color-bg-elevated);color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease;min-height:36px}.action-button:hover{border-color:var(--color-primary);background:#8b5cf61a;color:var(--color-text-primary);box-shadow:0 0 12px #8b5cf633}.action-button.danger:hover{border-color:var(--color-error);background:#f871711a;color:var(--color-error);box-shadow:0 0 12px #f8717133}.action-button svg{flex-shrink:0;opacity:.8}.action-button:hover svg{opacity:1}@media(max-width:768px){.transport{gap:12px;padding:12px}.transport-tempo{order:3;width:100%;max-width:none}.transport-actions{margin-left:0}.action-button span{display:none}.action-button{padding:8px 10px}}@media(max-width:480px){.transport-primary{width:100%;justify-content:space-between}.play-button{flex:1;justify-content:center}.transport-actions{width:100%;justify-content:flex-end}}@media(min-width:1025px){.transport{flex-wrap:nowrap}}@media(max-width:900px)and (max-height:500px){.transport{padding:8px 10px;gap:8px}}.pill-button{border:none;border-radius:999px;padding:12px 22px;font-weight:600;color:var(--color-bg-base);cursor:pointer;transition:transform .12s ease,box-shadow .3s ease;min-height:44px;min-width:80px;box-shadow:var(--glow-primary)}@media(max-width:900px)and (max-height:500px){.pill-button{padding:10px 18px;font-size:14px}}.pill-button.primary{background:var(--gradient-primary);color:var(--color-bg-base)}.pill-button.secondary{background:var(--gradient-accent);box-shadow:var(--glow-accent)}.pill-button:hover{transform:translateY(-2px);box-shadow:var(--glow-strong)}.pill-button:active{transform:translateY(0);box-shadow:var(--glow-primary)}.pill-button:focus-visible{outline:2px solid var(--color-primary-glow);outline-offset:2px}.status-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 4px #8b5cf61a}.status-dot.ready{background:var(--color-success);box-shadow:0 0 8px #22c55e80}.status-dot.locked{background:var(--color-warning);box-shadow:0 0 8px #fbbf2480}.status-label{color:var(--color-text-muted);font-size:14px;white-space:nowrap;overflow:visible;flex-shrink:0}@media(max-width:900px)and (max-height:500px){.status-label{display:none}}.tempo-stepper{display:inline-flex;align-items:center;gap:4px;background:var(--color-bg-card);border:1px solid var(--border-subtle);border-radius:8px;padding:4px}.tempo-stepper input{width:68px;border:none;outline:none;background:transparent;color:var(--color-text-primary);font-weight:700;font-size:16px;text-align:center}.tempo-stepper input::-webkit-inner-spin-button{appearance:none}.tempo-stepper button{border:none;background:var(--color-bg-elevated);color:var(--color-text-primary);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:16px;display:grid;place-items:center;transition:background .15s ease,box-shadow .15s ease}.tempo-stepper button:hover{background:#8b5cf640;box-shadow:0 0 8px #8b5cf64d}.tempo-stepper button:active{background:#8b5cf659}.tempo-slider{flex:1;min-width:60px;accent-color:var(--color-primary)}@media(orientation:landscape){.app-shell{padding:32px 22px 56px}.hero{grid-template-columns:1.6fr 1fr;gap:16px;align-items:center}.hero-left h1{font-size:34px}.lede{font-size:15px}.transport{flex-wrap:nowrap}.transport-left{flex:1;gap:8px}.tempo-field{min-width:0;width:320px}.tempo-row{flex-wrap:wrap}.sequencer{grid-template-columns:280px 1fr;padding:12px}.stage-wrapper{min-height:360px}.track-label{min-height:56px}}.volume-slider{width:80px;accent-color:var(--color-primary);min-height:24px}@media(max-width:900px)and (max-height:500px){.volume-slider{width:60px}}.sequencer{margin-top:18px;background:var(--color-bg-card);border-radius:16px;border:1px solid var(--border-subtle);padding:14px;display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:12px;box-shadow:0 18px 44px #00000059,var(--glow-primary);align-items:start}@media(max-width:900px){.sequencer{grid-template-columns:1fr}}@media(max-width:900px)and (max-height:500px){.sequencer{margin-top:12px;padding:10px;gap:10px;grid-template-columns:180px 1fr}}.track-list{display:grid;gap:0}@media(max-width:900px)and (max-height:500px){.track-list{gap:0}}.track-label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;background:var(--color-bg-input);border:1px solid rgba(139,92,246,.08);border-bottom:none;padding:10px 12px;border-radius:0;height:68px;box-sizing:border-box;transition:background .15s ease}.track-label:hover{background:#8b5cf614}.track-label:first-child{border-top-left-radius:12px;border-top-right-radius:12px}.track-label:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom:1px solid rgba(139,92,246,.08)}@media(max-width:720px){.track-label{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:6px;padding:8px 10px;height:auto;min-height:52px}.track-label button{grid-column:1 / -1;justify-self:end}.mute-button{min-height:36px;min-width:36px;padding:4px 8px;font-size:12px}}@media(max-width:900px)and (max-height:500px){.track-label{padding:4px 6px;gap:4px;height:44px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto}.track-label button{grid-column:1 / -1;justify-self:stretch}.mute-button{min-height:36px;min-width:36px;padding:4px 8px;font-size:12px}}.track-chip{width:14px;height:14px;border-radius:3px;display:inline-block;flex-shrink:0}@media(max-width:900px)and (max-height:500px){.track-chip{width:12px;height:12px}}.track-meta{display:flex;flex-direction:column;gap:2px}.track-name{font-weight:600;font-size:14px;line-height:1.2}.track-sub{font-size:11px;color:var(--color-text-muted);line-height:1.2}@media(max-width:900px)and (max-height:500px){.track-name{font-size:12px}.track-sub{font-size:10px}}.mute-button{border:1px solid var(--border-subtle);border-radius:10px;background:var(--color-bg-elevated);color:var(--color-text-primary);padding:6px 10px;cursor:pointer;transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease;min-height:44px;min-width:44px}.mute-button:hover{border-color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--glow-primary)}.mute-button:focus-visible{outline:2px solid var(--color-primary-glow);outline-offset:2px}@media(min-width:901px){.mute-button{min-height:auto;min-width:auto}}.stage-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;background:var(--color-bg-input);border:1px solid rgba(139,92,246,.1);border-radius:12px;padding:0 8px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.3) rgba(139,92,246,.05);scroll-behavior:smooth;position:relative;cursor:grab;touch-action:pan-x;overscroll-behavior-x:contain}.stage-wrapper:active{cursor:grabbing}.stage-wrapper:after{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,rgba(139,92,246,.15));pointer-events:none;opacity:.5}.stage-wrapper::-webkit-scrollbar{height:8px}.stage-wrapper::-webkit-scrollbar-track{background:#8b5cf60d;border-radius:4px}.stage-wrapper::-webkit-scrollbar-thumb{background:#8b5cf64d;border-radius:4px}.stage-wrapper::-webkit-scrollbar-thumb:hover{background:#8b5cf680}@media(max-width:900px){.stage-wrapper::-webkit-scrollbar{height:12px}.stage-wrapper{scrollbar-width:auto}.stage-wrapper:after{width:60px;background:linear-gradient(to right,transparent,rgba(139,92,246,.2));opacity:.8}}@media(max-width:900px)and (max-height:500px){.stage-wrapper{padding:0 6px 16px}}.scroll-hint{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;display:none;flex-direction:column;align-items:center;gap:4px;z-index:10;animation:pulse-hint 2s ease-in-out infinite}@media(max-width:900px){.scroll-hint{display:flex}}.scroll-hint-icon{color:#8b5cf6cc;font-size:20px;font-weight:700;text-shadow:0 0 8px rgba(139,92,246,.5)}.scroll-hint-text{font-size:10px;color:#8b5cf699;text-transform:uppercase;letter-spacing:.1em}@keyframes pulse-hint{0%,to{opacity:.6;transform:translateY(-50%) translate(0)}50%{opacity:1;transform:translateY(-50%) translate(-4px)}}.callout{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#8b5cf614;border:1px dashed var(--border-medium);padding:12px 14px;border-radius:14px;color:var(--color-text-secondary);flex-wrap:wrap}@media(max-width:900px)and (max-height:500px){.callout{margin-top:10px;padding:8px 10px;font-size:12px}}.callout-title{font-weight:600;color:var(--color-text-primary)}.pill{padding:10px 14px;border-radius:999px;font-weight:600;border:1px solid var(--border-subtle);background:var(--gradient-primary);color:var(--color-bg-base);box-shadow:var(--glow-primary)}.pill.secondary{background:var(--gradient-accent);color:var(--color-bg-base);box-shadow:var(--glow-accent)}.pill.subtle{opacity:.9}.studio-panel{display:flex;flex-direction:column;gap:24px;height:100%}.panel-section{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--border-subtle)}.panel-section:last-child{border-bottom:none;padding-bottom:0}.section-header{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);font-weight:600;display:flex;align-items:center;gap:8px}.source-group{display:flex;flex-direction:column;gap:12px}.source-item{display:flex;flex-direction:column;gap:6px}.source-item label{font-size:13px;color:var(--color-text-secondary);font-weight:500}.studio-select{appearance:none;background-color:var(--color-bg-input);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 40px 10px 12px;font-size:14px;color:var(--color-text-primary);width:100%;cursor:pointer;transition:all .2s ease;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B7DA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.studio-select:hover{border-color:var(--border-medium);background-color:var(--color-bg-elevated)}.studio-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #8b5cf626}.transport-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.transport-main{grid-column:span 2;display:flex;gap:12px}.transport-btn-lg{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;font-size:15px;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:all .2s ease}.transport-btn-lg.play{background:var(--gradient-primary);color:#fff;box-shadow:var(--glow-primary)}.transport-btn-lg.play:hover{transform:translateY(-1px);box-shadow:var(--glow-strong)}.transport-btn-lg.stop{background:var(--color-bg-elevated);border:1px solid var(--border-subtle);color:var(--color-text-primary)}.transport-btn-lg.stop:hover{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.reset-btn{height:48px;width:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--color-bg-elevated);border:1px solid var(--border-subtle);color:var(--color-text-muted);cursor:pointer;transition:all .2s ease}.reset-btn:hover{border-color:var(--color-text-secondary);color:var(--color-text-primary)}.tempo-control{grid-column:span 2;background:var(--color-bg-input);padding:12px;border-radius:12px;border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:8px}.tempo-header{display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-muted)}.tempo-slider-track{width:100%;accent-color:var(--color-primary);height:4px;border-radius:2px}.master-row{display:flex;align-items:center;justify-content:space-between;background:var(--color-bg-input);padding:12px;border-radius:12px;border:1px solid var(--border-subtle)}.limiter-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch{width:36px;height:20px;background:var(--color-bg-elevated);border-radius:99px;position:relative;transition:background .2s;border:1px solid var(--border-subtle)}.toggle-switch.active{background:var(--color-primary);border-color:var(--color-primary)}.toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:1px;left:1px;transition:transform .2s cubic-bezier(.4,0,.2,1)}.toggle-switch.active .toggle-thumb{transform:translate(16px)}.meter-compact{display:flex;align-items:center;gap:10px}.meter-track{width:80px;height:6px;background:var(--color-bg-base);border-radius:3px;overflow:hidden}.meter-val{height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-warning));transition:width .1s linear}.perform-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.perform-btn{padding:10px;border-radius:10px;border:1px solid var(--border-subtle);background:var(--color-bg-elevated);color:var(--color-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px}.perform-btn:hover{border-color:var(--color-primary);color:var(--color-text-primary);background:#8b5cf61a}.perform-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 0 12px #8b5cf666}.stutter-row{grid-column:span 2;display:flex;gap:6px;background:var(--color-bg-input);padding:4px;border-radius:10px;border:1px solid var(--border-subtle);align-items:center}.stutter-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-weight:600;padding:0 4px 0 8px}.stutter-opt{flex:1;border:none;background:transparent;color:var(--color-text-muted);font-size:12px;font-weight:600;padding:6px;border-radius:6px;cursor:pointer;transition:all .15s}.stutter-opt:hover{color:var(--color-text-primary);background:#ffffff0d}.stutter-opt.active{background:var(--color-bg-elevated);color:var(--color-primary-bright);box-shadow:0 1px 3px #0003}.mixdown-btn{width:100%;padding:14px;border-radius:12px;border:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--color-bg-elevated) 0%,var(--color-bg-card) 100%);color:var(--color-text-primary);font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.mixdown-btn:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #0003;transform:translateY(-1px)}.mixdown-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.studio-panel{position:relative}.loading-overlay{position:absolute;inset:0;background:#0f0a1ab3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:16px;animation:fadeIn .2s ease-out}.spinner{width:32px;height:32px;border:3px solid rgba(139,92,246,.2);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-text{font-size:13px;color:var(--color-primary-bright);font-weight:500;letter-spacing:.05em;animation:pulse 1.5s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.analysis{display:flex;flex-direction:column;gap:16px;margin-top:8px;padding:10px 6px 18px}.analysis-header{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.analysis-card{display:grid;grid-template-columns:1fr;gap:12px;background:var(--color-bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:12px;box-shadow:0 12px 34px #0000004d,var(--glow-primary)}@media(min-width:960px){.analysis-card{grid-template-columns:1.2fr 1fr;padding:16px}}.analysis-upload{display:flex;flex-direction:column;gap:16px;background:var(--color-bg-input);border-radius:12px;padding:16px;border:1px solid rgba(139,92,246,.1)}.source-section,.process-section,.playback-section{display:flex;flex-direction:column;gap:12px}.section-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.section-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--gradient-primary);color:var(--color-bg-base);font-size:12px;font-weight:700;box-shadow:var(--glow-primary)}.section-title{font-size:13px;font-weight:600;color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.05em}.quick-load{display:flex;gap:8px;flex-wrap:wrap}.source-select{flex:1;min-width:120px;background:var(--color-bg-elevated);border:1px solid var(--border-subtle);border-radius:8px;color:var(--color-text-primary);padding:10px 12px;font-size:13px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.source-select:hover{border-color:var(--border-medium)}.source-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 2px #8b5cf633}.source-divider{display:flex;align-items:center;gap:12px;color:var(--color-text-muted);font-size:12px}.source-divider:before,.source-divider:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.upload-box{border:1px dashed var(--border-medium);border-radius:10px;padding:16px;background:#8b5cf608;text-align:center}.upload-box input[type=file]{display:none}.upload-box label{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:10px;background:var(--color-bg-elevated);color:var(--color-text-primary);cursor:pointer;border:1px solid var(--border-subtle);font-size:14px;font-weight:500;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.upload-box label:hover{border-color:var(--color-primary);box-shadow:var(--glow-primary);transform:translateY(-1px)}.upload-box label svg{opacity:.7}.record-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--color-bg-elevated);color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.record-button:hover{border-color:var(--color-accent);box-shadow:var(--glow-accent)}.record-button.recording{border-color:var(--color-accent);background:#ec48991a}.record-dot{width:10px;height:10px;border-radius:50%;background:var(--color-text-muted);transition:all .15s ease}.record-button:hover .record-dot,.record-button.recording .record-dot{background:var(--color-accent);box-shadow:0 0 8px #ec489999}.record-button.recording .record-dot{animation:pulse-glow 1s ease-in-out infinite}.selected-file{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#8b5cf614;border:1px solid var(--border-subtle);border-radius:8px;font-size:13px}.selected-file svg{color:var(--color-primary);flex-shrink:0}.file-name{color:var(--color-text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.file-duration{color:var(--color-text-muted);flex-shrink:0}.analyze-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border:none;border-radius:12px;background:var(--gradient-primary);color:var(--color-bg-base);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .3s ease;box-shadow:var(--glow-primary)}.analyze-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--glow-strong)}.analyze-button:disabled{opacity:.5;cursor:not-allowed}.analyze-button.processing{background:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--border-medium);box-shadow:none}.spinner{width:16px;height:16px;border:2px solid var(--border-subtle);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;text-align:center;background:var(--color-bg-elevated);color:var(--color-text-muted);border:1px solid var(--border-subtle)}.status-badge.ready{color:var(--color-success);border-color:#22c55e4d;background:#22c55e1a}.status-badge.playing{color:var(--color-primary);border-color:var(--border-medium);background:#8b5cf61a}.status-badge.processing{color:var(--color-warning);border-color:#fbbf244d;background:#fbbf241a}.status-badge.error{color:var(--color-error);border-color:#f871714d;background:#f871711a}.playback-controls{display:flex;align-items:center;gap:8px}.playback-section .play-button{flex:1}.original-audio{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--color-bg-card);border:1px solid var(--border-subtle);border-radius:8px}.audio-label{font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.inline-audio{width:100%;max-width:280px;min-width:150px}@media(max-width:480px){.inline-audio{max-width:100%;min-width:unset}}.progress-wrap{display:flex;flex-direction:column;gap:4px;min-width:150px;flex:1}.progress-label{font-size:12px;color:var(--color-text-secondary)}.progress-bar{width:100%;height:8px;border-radius:999px;background:#8b5cf626;overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);width:0%;transition:width .15s linear;box-shadow:0 0 10px #8b5cf680}.or-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;color:var(--color-text-muted);font-size:12px}.or-divider span:first-child,.or-divider span:last-child{display:block;height:1px;background:var(--border-subtle)}.link-box{display:grid;gap:6px}.link-box input{background:var(--color-bg-elevated);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 12px;color:var(--color-text-primary);transition:border-color .15s ease}.link-box input:focus{border-color:var(--color-primary);outline:none}.link-box button{justify-self:start;border:none;border-radius:10px;padding:10px 16px;background:var(--gradient-primary);color:var(--color-bg-base);font-weight:700;cursor:pointer;box-shadow:var(--glow-primary);transition:transform .12s ease,box-shadow .3s ease}.link-box button:hover{transform:translateY(-2px);box-shadow:var(--glow-strong)}.analysis-notes{background:var(--color-bg-input);border-radius:12px;padding:14px;border:1px solid rgba(139,92,246,.1)}.analysis-notes h3{margin:0;color:var(--color-text-primary)}.analysis-notes ul{margin:0;padding-left:16px;color:var(--color-text-secondary)}.error{color:var(--color-error);background:#f8717114;border:1px solid rgba(248,113,113,.2);padding:8px 10px;border-radius:10px}.stem-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}.stem-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border-radius:10px;background:var(--color-bg-elevated);border:1px solid rgba(139,92,246,.1);transition:background .15s ease}.stem-row:hover{background:#8b5cf61a}.stem-meta{display:inline-flex;align-items:center;gap:8px}.stem-chip{width:12px;height:12px;border-radius:4px;display:inline-block;box-shadow:0 0 6px currentColor}.stem-name{font-weight:600;color:var(--color-text-primary)}.stem-sub{font-size:12px;color:var(--color-text-muted)}.stem-controls{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.stem-controls input[type=range]{width:100%;min-width:80px;max-width:140px;accent-color:var(--color-primary)}@media(max-width:480px){.stem-controls input[type=range]{min-width:60px;max-width:100px}}.mute-button.muted{background:#8b5cf633;color:var(--color-text-secondary);border-color:var(--border-medium)}.control-block{display:flex;flex-direction:column;gap:var(--space-xs);min-width:100px}.control-block label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.control-block input[type=range]{width:100%;min-width:80px;accent-color:var(--color-primary)}@media(max-width:480px){.control-block{min-width:70px}}.tooltip-container{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative}.tooltip-trigger{width:18px;height:18px;border-radius:50%;background:var(--color-bg-elevated);border:1px solid var(--border-subtle);color:var(--color-text-muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:help;transition:all .15s ease}.tooltip-trigger:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.tooltip-content{position:absolute;top:100%;left:0;width:320px;background:var(--color-bg-base);border:1px solid var(--border-medium);border-radius:8px;padding:12px;box-shadow:0 4px 12px #0000004d;z-index:100;visibility:hidden;opacity:0;transition:opacity .15s ease,transform .15s ease;transform:translateY(-5px);pointer-events:none;margin-top:8px}.tooltip-container:hover .tooltip-content{visibility:visible;opacity:1;transform:translateY(0)}.tooltip-title{font-size:13px;font-weight:600;color:var(--color-text-primary);margin-bottom:8px;display:block}.tooltip-list{display:flex;flex-direction:column;gap:6px}.tooltip-item{display:flex;gap:8px;font-size:11px;line-height:1.4;color:var(--color-text-secondary);align-items:baseline}.tooltip-term{color:var(--color-primary);font-weight:600;min-width:45px;flex-shrink:0}.mute-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:var(--color-text-muted);transition:all .2s ease}.mute-toggle-btn:hover{background:var(--color-bg-elevated);color:var(--color-text-primary)}.stem-row.muted-row{background:#0003!important}.stem-row.muted-row .stem-controls,.stem-row.muted-row .stem-name,.stem-row.muted-row .stem-sub{opacity:.5;filter:blur(2px);pointer-events:none;transition:all .2s ease}.stem-row.muted-row .mute-toggle-btn{opacity:1;filter:none;pointer-events:auto;color:var(--color-text-secondary)}