@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e2e8f0;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0b0c10;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{background:radial-gradient(circle at 50% 0,#151828 0%,#0b0c10 100%);place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100vw;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0d0f17}::-webkit-scrollbar-thumb{background:#25283c;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#393d5c}.app-container{box-sizing:border-box;flex-direction:column;flex:1;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;padding:32px 24px;display:flex;position:relative}.glow-bg{pointer-events:none;filter:blur(80px);z-index:0;border-radius:50%;width:500px;height:500px;animation:10s ease-in-out infinite alternate pulseGlow;position:absolute}.glow-purple{background:radial-gradient(circle,#8b5cf61f 0%,#0000 70%);top:-150px;left:5%}.glow-pink{background:radial-gradient(circle,#ff336614 0%,#0000 70%);bottom:50px;right:5%}@keyframes pulseGlow{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.app-header{z-index:10;flex-direction:column;justify-content:space-between;gap:20px;margin-bottom:32px;display:flex}@media (width>=768px){.app-header{flex-direction:row;align-items:center}}.brand-section{align-items:center;gap:14px;display:flex}.logo-container{background:linear-gradient(135deg,#7c3aed 0%,#c084fc 100%);border-radius:12px;justify-content:center;align-items:center;padding:10px;display:flex;box-shadow:0 4px 20px #7c3aed4d}.logo-icon{color:#fff;width:24px;height:24px}.title-text{background:linear-gradient(90deg,#fff,#a5b4fc);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;margin:0;font-family:Outfit,sans-serif;font-size:28px;font-weight:800}.subtitle-text{color:#94a3b8;max-width:480px;margin:4px 0 0;font-size:13px}.tabs-container{-webkit-backdrop-filter:blur(12px);white-space:nowrap;scrollbar-width:none;background:#0f111ccc;border:1px solid #ffffff0d;border-radius:16px;align-self:flex-start;max-width:100%;padding:6px;display:flex;overflow-x:auto}.tabs-container::-webkit-scrollbar{display:none}.tab-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;flex-shrink:0;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.tab-btn:hover{color:#fff}.tab-btn-active-marker{color:#ff2e63;background:#ff2e631a;border-color:#ff2e6340;box-shadow:0 4px 12px #ff2e630d}.tab-btn-active-parallax{color:#a78bfa;background:#8b5cf61a;border-color:#8b5cf640;box-shadow:0 4px 12px #8b5cf60d}.tab-btn-active-counter{color:#34d399;background:#34d39926;border-color:#34d39940;box-shadow:0 4px 12px #34d3990d}.workspace-grid{z-index:10;grid-template-columns:1fr;gap:24px;margin-bottom:32px;display:grid}@media (width>=1024px){.workspace-grid{grid-template-columns:7fr 5fr}}.panel-title-bar{justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 4px;display:flex}.panel-title{text-transform:uppercase;letter-spacing:1px;color:#94a3b8;align-items:center;gap:8px;font-size:11px;font-weight:700;display:flex}.panel-subtitle{color:#64748b;font-size:11px}.live-indicator{background-color:#ef4444;border-radius:50%;width:8px;height:8px;animation:1.5s infinite blink;box-shadow:0 0 8px #ef4444}@keyframes blink{0%,to{opacity:.4}50%{opacity:1}}.glass-card{-webkit-backdrop-filter:blur(12px);background:#11131f99;border:1px solid #ffffff0d;border-radius:18px;box-shadow:0 10px 30px #0000004d}.player-card{aspect-ratio:16/9;background:#000;justify-content:center;align-items:center;padding:8px;display:flex;overflow:hidden}.controls-card{padding:24px}.controls-form{flex-direction:column;gap:18px;display:flex}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:#94a3b8;font-size:11px;font-weight:600}.text-input,.select-input{color:#f1f5f9;background:#06070a;border:1px solid #1e293b;border-radius:10px;outline:none;padding:10px 14px;font-size:13px;transition:all .2s}.text-input:focus,.select-input:focus{background:#0a0b10}.row-grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.color-picker-wrapper{background:#06070a;border:1px solid #1e293b;border-radius:10px;align-items:center;gap:10px;padding:6px 12px;display:flex}.color-input{cursor:pointer;background:0 0;border:0;border-radius:6px;width:32px;height:32px}.color-value{text-transform:uppercase;color:#94a3b8;font-family:JetBrains Mono,monospace;font-size:12px}.range-slider{cursor:pointer;-webkit-appearance:none;background:#1e293b;border-radius:2px;outline:none;width:100%;height:4px}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;width:14px;height:14px;transition:transform .1s}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-marker::-webkit-slider-thumb{background:#ff2e63}.slider-parallax::-webkit-slider-thumb{background:#a78bfa}.slider-counter::-webkit-slider-thumb{background:#34d399}.reset-btn{color:#64748b;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-size:11px;transition:color .2s;display:flex}.reset-btn:hover{color:#f1f5f9}.code-section{z-index:10;flex-direction:column;gap:10px;display:flex}.code-card{background:#05060b;flex-direction:column;display:flex;overflow:hidden}.code-header{background:#0a0b14b3;border-bottom:1px solid #ffffff0a;align-items:center;padding:10px 16px;display:flex}.window-dot{background:#25283c;border-radius:50%;width:10px;height:10px;margin-right:6px}.code-title{color:#64748b;margin-left:8px;font-family:JetBrains Mono,monospace;font-size:11px}.copy-btn{color:#94a3b8;cursor:pointer;background:#0f111ce6;border:1px solid #ffffff0d;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;transition:all .2s;display:flex}.copy-btn:hover{color:#fff;background:#191c30e6;border-color:#ffffff1a}.code-block{background:#05060b66;max-height:380px;margin:0;padding:20px;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.6;overflow-x:auto}.code-text{color:#cbd5e1}.app-footer{text-align:center;color:#475569;border-top:1px solid #ffffff05;margin-top:48px;padding-top:24px;font-size:11px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sidebar-category-group{margin-bottom:20px}.sidebar-category-group:last-child{margin-bottom:0}.sidebar-category-title{text-transform:uppercase;letter-spacing:1.2px;color:#475569;border-bottom:1px solid #ffffff05;align-items:center;gap:6px;margin-bottom:8px;padding-bottom:4px;font-size:10px;font-weight:800;display:flex}.sidebar-buttons-list{flex-direction:column;gap:4px;display:flex}.sidebar-btn{color:#94a3b8;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:12.5px;font-weight:600;transition:all .15s;display:flex}.sidebar-btn:hover{color:#fff;background:#ffffff05}.sidebar-btn-active-marker{color:#ff2e63;background:#ff2e6314;border-color:#ff2e6333}.sidebar-btn-active-parallax{color:#a78bfa;background:#8b5cf614;border-color:#8b5cf633}.sidebar-btn-active-counter{color:#34d399;background:#34d3991a;border-color:#34d39933}.studio-grid{z-index:10;grid-template-columns:1fr;gap:24px;margin-bottom:32px;display:grid}@media (width>=1024px){.studio-grid{grid-template-columns:3fr 5fr 4fr}}