html,body,#root{background-color:#12100e;justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex;overflow:hidden}#root{box-sizing:border-box;overflow-y:auto}*{box-sizing:border-box}:root{--bg-color:#12100e;--panel-bg:#1f1d1b;--text-main:#f4f1ea;--text-dim:#9e9a95;--accent-orange:#ff6a00;--accent-orange-dim:#c50;--border-color:#3b3834;--mpc-pad-off:#32302e;--mpc-pad-on:#ff6a00}html,body{height:auto;min-height:100dvh;margin:0;padding:0;overflow:hidden auto}body{background-color:var(--bg-color);color:var(--text-main);background-image:radial-gradient(circle at center, #ff6a0008 0%, var(--bg-color) 80%);font-family:Inter,-apple-system,sans-serif}.app-container{background-color:var(--panel-bg);border:1px solid #ff6a001a;border-radius:12px;flex-direction:column;gap:30px;width:95%;max-width:1000px;min-height:100dvh;margin:20px auto;padding:20px;display:flex;overflow:visible;box-shadow:0 30px 60px #000c,inset 0 2px #ffffff08}@media (width>=768px){.app-container{margin:40px auto;padding:40px}}.header{z-index:100;-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--border-color);background:#1f1d1bf2;justify-content:space-between;align-items:center;padding-bottom:20px;display:flex;position:sticky;top:0}@media (width>=768px){.header{top:0}}.logo{letter-spacing:-1px;text-transform:uppercase;color:var(--text-main);align-items:center;gap:10px;font-size:24px;font-weight:900;display:flex}@media (width>=768px){.logo{gap:12px;font-size:28px}}.logo span{color:var(--accent-orange)}.header-actions{align-items:center;gap:12px;display:flex}.desktop-nav{display:none}.hamburger{color:var(--text-main);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex}@media (width>=768px){.desktop-nav{gap:20px;display:flex}.desktop-nav button{color:var(--text-dim);cursor:pointer;text-transform:uppercase;background:0 0;border:none;font-size:14px;font-weight:700;transition:color .2s,text-shadow .2s}.desktop-nav button:hover,.desktop-nav button.active{color:var(--accent-orange);text-shadow:0 0 10px #ff6a0066}.hamburger{display:none}}.mobile-menu{flex-direction:column;gap:10px;margin-top:-15px;display:flex;overflow:hidden}.mobile-menu button{background:var(--mpc-pad-off);border:1px solid var(--border-color);color:var(--text-main);text-transform:uppercase;cursor:pointer;border-radius:6px;padding:16px;font-weight:700}.timeline{justify-content:space-between;align-items:center;display:flex}.timeline-step{color:var(--text-dim);text-transform:uppercase;font-size:13px;font-weight:700;transition:color .3s}@media (width>=768px){.timeline-step{font-size:15px}}.timeline-step.active{color:var(--accent-orange);text-shadow:0 0 10px #ff6a004d}.timeline-line{background-color:var(--border-color);flex-grow:1;height:2px;margin:0 10px}@media (width>=768px){.timeline-line{margin:0 20px}}.timeline-line.active{background-color:var(--accent-orange);box-shadow:0 0 8px #ff6a0080}.pad-grid{flex-direction:column;gap:20px;width:100%;max-width:900px;margin:0 auto;display:flex}@media (width>=768px){.pad-grid{flex-direction:row;justify-content:center;gap:30px}}.mpc-pad{aspect-ratio:1;background-color:var(--mpc-pad-off);border:2px solid var(--border-color);width:100%;max-width:280px;color:var(--text-main);cursor:pointer;box-shadow:0 8px 0 var(--border-color), 0 15px 20px #0000004d;text-align:center;border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;margin:0 auto;padding:20px 16px;font-size:16px;font-weight:700;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}@media (width>=768px){.mpc-pad{padding:30px 16px}}.glow-hover:hover{border-color:#ff6a0080;box-shadow:0 8px #ff6a004d,0 15px 30px #ff6a001a}.mpc-pad:active{box-shadow:0 0 0 var(--border-color);background-color:var(--mpc-pad-on);border-color:var(--mpc-pad-on);color:#000;transform:translateY(8px)}.mpc-pad.secondary{padding:20px 16px;font-size:15px}.upload-zone{border:2px dashed var(--border-color);text-align:center;cursor:pointer;background-color:#0000004d;border-radius:12px;padding:30px 10px;transition:all .3s cubic-bezier(.4,0,.2,1)}@media (width>=768px){.upload-zone{padding:50px 20px}}.upload-zone:hover{border-color:var(--accent-orange);background-color:#ff6a000d}.upload-zone.dragging{border-color:var(--accent-orange);background-color:#ff6a0026;transform:scale(1.02);box-shadow:0 0 30px #ff6a0033}.upload-icon{color:var(--accent-orange);margin-bottom:15px}.pulse-icon-slow{animation:3s infinite pulse}.glass{-webkit-backdrop-filter:blur(10px);background:#28262466!important;border:1px solid #ffffff08!important}.glass-modal{-webkit-backdrop-filter:blur(15px);box-shadow:0 20px 50px #000000e6,0 0 20px #ff6a001a;background:#0a0a0ad9!important;border:1px solid #ff6a0066!important}.elegant-box{border:1px solid var(--border-color);background-color:#1a1a1a;border-radius:10px;margin-top:20px;padding:15px}@media (width>=768px){.elegant-box{padding:20px}}.box-title{color:var(--text-dim);text-transform:uppercase;margin-bottom:15px;font-size:14px;font-weight:700}.file-list{flex-direction:column;gap:15px;display:flex}.file-item{background-color:var(--mpc-pad-off);border-radius:6px;flex-direction:column;gap:10px;padding:12px 16px;font-size:14px;display:flex}@media (width>=768px){.file-item{font-size:15px}}.file-name{white-space:nowrap;text-overflow:ellipsis;flex-grow:1;font-weight:700;overflow:hidden}.file-meta{color:var(--text-dim)}.track-controls{align-items:center;gap:10px;display:flex}.track-select{border:1px solid var(--border-color);color:var(--text-main);background:#111;border-radius:4px;outline:none;padding:6px 10px;font-size:13px}.track-select:focus{border-color:var(--accent-orange)}.remove-btn{color:#f44;cursor:pointer;background:0 0;border:none;padding:4px;transition:transform .2s;display:flex}.remove-btn:hover{transform:scale(1.2)}.slider-box{margin-top:20px}.custom-slider{-webkit-appearance:none;border:1px solid var(--border-color);background:#111;border-radius:4px;outline:none;width:100%;height:8px;margin:15px 0}.custom-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-orange);cursor:pointer;border:2px solid #fff;border-radius:50%;width:24px;height:24px;transition:transform .1s;box-shadow:0 0 15px #ff6a0099}.custom-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.slider-labels{color:var(--text-dim);justify-content:space-between;font-size:13px;font-weight:700;display:flex}.global-vibe-select{border:1px solid var(--border-color);width:100%;color:var(--text-main);background:#111;border-radius:6px;outline:none;margin-bottom:10px;padding:10px;font-size:15px}.global-vibe-select:focus{border-color:var(--accent-orange)}.audio-player-container{background:#0006;border:1px solid #ff6a0033;border-radius:8px;align-items:center;gap:15px;margin-bottom:15px;padding:10px 15px;display:flex}.play-btn{background:var(--accent-orange);color:#000;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .1s;display:flex;box-shadow:0 0 10px #ff6a0066}.play-btn:active{transform:scale(.95)}.timeline-scrubber{flex-grow:1;align-items:center;gap:10px;display:flex}.volume-control{align-items:center;gap:5px;display:flex}.action-btn{background-color:var(--accent-orange);color:#000;text-transform:uppercase;cursor:pointer;width:100%;box-shadow:0 6px 0 var(--accent-orange-dim);border:none;border-radius:8px;padding:16px;font-size:16px;font-weight:900;transition:all .1s}@media (width>=768px){.action-btn{padding:18px;font-size:18px}}.action-btn:active:not(:disabled){box-shadow:0 0 0 var(--accent-orange-dim);transform:translateY(6px)}.action-btn:disabled{background-color:var(--border-color);color:var(--text-dim);cursor:not-allowed;box-shadow:0 6px #111}.wow-btn{background:linear-gradient(135deg, var(--accent-orange), #ff8c33);box-shadow:0 6px 0 var(--accent-orange-dim), 0 0 20px #ff6a0066}.wow-btn:hover:not(:disabled){box-shadow:0 6px 0 var(--accent-orange-dim), 0 0 30px #ff6a0099}.debug-btn{color:#fff;border:1px dashed var(--border-color);cursor:pointer;background:#2a2a2a;border-radius:4px;margin-top:10px;padding:8px 12px;font-size:12px}.debug-btn:hover{border-color:#aaa}.log-modal{border:1px solid var(--accent-orange);background-color:#0a0a0a;border-radius:12px;margin-top:25px;overflow:hidden}.log-header{background-color:#ff6a0026;border-bottom:1px solid #ff6a004d;align-items:center;gap:12px;padding:16px 20px;font-size:16px;font-weight:700;display:flex}.pulse-icon{animation:1s infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.log-content{flex-direction:column;gap:10px;max-height:250px;padding:20px;font-family:monospace;font-size:14px;display:flex;overflow-y:auto}.log-line{color:var(--text-dim);padding:4px 0}.log-line.info{color:#88c0d0}.log-line.success{color:#a3be8c;text-shadow:0 0 5px #a3be8c4d}.log-line.error{color:#bf616a}.done-actions{border-top:1px solid var(--border-color);text-align:left;background-color:#0009;padding:20px}.download-btn{color:#000;background:linear-gradient(135deg,#a3be8c,#8fbc6b);justify-content:center;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex;box-shadow:0 6px #728c5a,0 0 20px #a3be8c66}.share-btn{color:#111;background:linear-gradient(135deg,#eebb4d,#d49a26);border:none;justify-content:center;align-items:center;width:45px;padding:0;transition:all .2s;display:flex;box-shadow:0 4px #111}.share-btn:hover{transform:translateY(-2px);box-shadow:0 4px #111,0 0 15px #fff3}.share-btn:active{transform:translateY(2px);box-shadow:0 0 #111}.download-btn:hover{box-shadow:0 6px #728c5a,0 0 30px #a3be8c99}.timer-text{color:var(--text-dim);text-align:center;margin-top:15px;font-size:15px;font-weight:700}.timer-red{color:#bf616a;text-shadow:0 0 8px #bf616a80;font-family:monospace;font-size:18px}.progress-container{border:1px solid var(--border-color);background-color:#000;border-radius:6px;width:100%;height:28px;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.progress-fill{background:linear-gradient(90deg, var(--accent-orange-dim), var(--accent-orange));width:0%;height:100%;box-shadow:0 0 15px var(--accent-orange);transition:width .3s cubic-bezier(.4,0,.2,1)}.warning-overlay{z-index:9999;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.warning-modal{text-align:center;background:#111;border:2px solid #f33;border-radius:16px;width:90%;max-width:450px;padding:40px;box-shadow:0 0 40px #f333}button,.action-btn,.mpc-pad,.download-btn,select,.desktop-nav button,.mobile-menu button{min-height:48px}.audio-player-container{gap:15px}.player-main-controls .custom-slider,.player-secondary-controls .custom-slider{height:6px}.player-main-controls .custom-slider::-webkit-slider-thumb{width:16px;height:16px}.player-secondary-controls .custom-slider::-webkit-slider-thumb{width:16px;height:16px}.audio-player-classic{border:1px solid var(--border-color);background:#00000080;border-radius:8px;flex-direction:row;align-items:center;gap:15px;margin-top:10px;padding:12px 15px;display:flex}.player-seek-container{flex-direction:column;flex:1;gap:4px;display:flex}.player-controls-right{align-items:center;gap:12px;display:flex}.volume-slider-wrapper{align-items:center;gap:8px;width:100px;display:flex}.vibe-box-active{border-color:#ffcc004d;box-shadow:0 0 25px #ffcc0026}.vibe-box-disabled{opacity:.5;cursor:pointer}.vibe-box-disabled select,.vibe-box-disabled input{pointer-events:none}.upload-zone-empty-pulse{animation:2s infinite borderPulse}@keyframes borderPulse{0%{box-shadow:0 0 #ff6a0000}50%{box-shadow:0 0 20px #ff6a0066}to{box-shadow:0 0 #ff6a0000}}.custom-slider{height:6px!important;min-height:0!important;padding:0!important}.seek-slider::-webkit-slider-thumb{width:16px;height:16px}.volume-slider::-webkit-slider-thumb{width:16px;height:16px}.sticky-header{z-index:100;-webkit-backdrop-filter:blur(12px);background:#0a0a0ab3;border-bottom:1px solid #ff6a0033;position:sticky;top:0}.landing-background{position:relative;overflow:hidden}.landing-background:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle,#ff6a000d 0%,#0000 60%);width:200%;height:200%;animation:20s linear infinite rotateGlow;position:absolute;top:-50%;left:-50%}@keyframes rotateGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-action-section{gap:10px;margin-top:20px;display:flex}@media (width<=768px){.main-action-section{width:100%;padding:12px 15px calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#0a0a0ae6;border-top:1px solid #ff6a0033;margin-top:0;position:fixed;bottom:0;left:0}.studio-container{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.desktop-nav{display:none!important}.hamburger{display:block!important}.sticky-header .logo{font-size:clamp(1.2rem,5vw,1.5rem)!important}.mobile-active-mode{display:none!important}}.hamburger{display:none}.pad-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px;display:grid}.mpc-pad.active-pad{color:var(--accent-orange);transform:translateY(-2px);box-shadow:0 0 20px #ff6a0066,inset 0 0 10px #ff6a0033;border:2px solid var(--accent-orange)!important;background:#ff6a0026!important}.upload-zone-pulse{animation:2.5s infinite gentlePulse}@keyframes gentlePulse{0%{box-shadow:0 0 #ff6a0033}50%{box-shadow:0 0 15px 5px #ff6a001a}to{box-shadow:0 0 #ff6a0000}}