@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url('fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url('fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg-dark:#0f1115;--text-main:#e2e8f0;--text-muted:#94a3b8;--accent-purple:#c084fc;--accent-pink:#f472b6;--accent-blue:#38bdf8;--accent-danger:#f87171;--glass-bg:rgba(20,25,33,0.6);--glass-border:rgba(255,255,255,0.08);--glass-shadow:0 8px 32px 0 rgba(0,0,0,0.37);--font-family:'Outfit',sans-serif;--transition-speed:0.3s;--sp-xs:clamp(4px,0.5vw,8px);--sp-sm:clamp(8px,1vw,12px);--sp-md:clamp(12px,1.5vw,16px);--sp-lg:clamp(16px,2vw,24px);--sp-xl:clamp(20px,3vw,40px);--fs-hero:clamp(1.4rem,4vw,2.5rem);--fs-subtitle:clamp(0.65rem,1.2vw,0.9rem);--fs-heading:clamp(0.65rem,0.9vw,0.75rem);--fs-body:clamp(0.8rem,1.1vw,0.9rem);--fs-small:clamp(0.7rem,0.9vw,0.8rem);--radius-sm:clamp(6px,1vw,8px);--radius-md:clamp(10px,1.5vw,16px);--radius-lg:clamp(14px,2vw,20px);--canvas-top:clamp(80px,12vh,110px);--canvas-bottom:clamp(120px,22vh,190px);--canvas-side:clamp(10px,2vw,20px)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);overflow:hidden;height:100vh;height:100dvh;width:100vw}#app-container{position:relative;width:100%;height:100%}#canvas-wrapper{position:absolute;top:var(--canvas-top);bottom:var(--canvas-bottom);left:var(--canvas-side);right:var(--canvas-side);z-index:1;border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-lg);overflow:hidden;background:rgba(0,0,0,0.2);transition:top 0.4s ease,bottom 0.4s ease,left 0.4s ease,right 0.4s ease}#spectrogram-canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" stroke="white" stroke-width="2" fill="transparent"/></svg>') 12 12,crosshair}#grid-background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:50px 50px;background-position:center bottom;z-index:-1;pointer-events:none}#playhead{position:absolute;top:0;bottom:0;width:3px;background:var(--accent-blue);box-shadow:0 0 10px var(--accent-blue),0 0 20px var(--accent-blue);left:0%;z-index:10;pointer-events:none;transform:translateX(-50%);display:none}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-lg);transition:padding 0.4s ease}header{pointer-events:auto}h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px;text-shadow:0 0 30px rgba(192,132,252,0.3);line-height:1.1}header p{color:var(--text-muted);font-size:var(--fs-subtitle);text-transform:uppercase;letter-spacing:2px}h2{font-size:var(--fs-heading);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:var(--sp-sm)}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--sp-md);box-shadow:var(--glass-shadow);pointer-events:auto;transition:padding 0.3s ease,border-radius 0.3s ease}.bottom-area{display:flex;gap:var(--sp-md);justify-content:center;align-items:flex-end;margin-bottom:0;padding-bottom:var(--sp-sm);flex-wrap:wrap;pointer-events:none}.bottom-area>*{pointer-events:auto}#controls-panel{display:contents}.button-row{display:flex;gap:var(--sp-xs)}button{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--text-main);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-speed);display:flex;align-items:center;justify-content:center}button:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}.icon-btn{width:clamp(36px,5vw,44px);height:clamp(36px,5vw,44px);padding:clamp(6px,1vw,10px)}.icon-btn.active-state{background:rgba(56,189,248,0.2);border-color:var(--accent-blue);color:var(--accent-blue);box-shadow:0 0 15px rgba(56,189,248,0.3)}.icon-btn.danger:hover{background:rgba(248,113,113,0.2);border-color:var(--accent-danger);color:var(--accent-danger)}.tool-btn{width:clamp(36px,5vw,44px);height:clamp(36px,5vw,44px);position:relative;overflow:hidden}.tool-btn.active{background:rgba(192,132,252,0.2);border-color:var(--accent-purple);box-shadow:0 0 15px rgba(192,132,252,0.3)}.tool-icon{width:20px;height:20px;border-radius:50%}.tool-btn.active .pen-icon{background:var(--accent-purple);border-radius:2px;height:2px;width:24px;transform:rotate(-45deg)}.tool-btn .pen-icon{background:var(--text-muted);border-radius:2px;height:2px;width:24px;transform:rotate(-45deg);transition:0.3s}.tool-btn.active .brush-icon{background:var(--accent-purple);filter:blur(2px)}.tool-btn .brush-icon{background:var(--text-muted);filter:blur(2px);transition:0.3s}.tool-btn.active .spatter-icon{background:radial-gradient(circle,var(--accent-purple) 20%,transparent 20%),radial-gradient(circle,var(--accent-purple) 20%,transparent 20%);background-size:8px 8px;background-position:0 0,4px 4px}.tool-btn .spatter-icon{background:radial-gradient(circle,var(--text-muted) 20%,transparent 20%),radial-gradient(circle,var(--text-muted) 20%,transparent 20%);background-size:8px 8px;background-position:0 0,4px 4px}.tool-btn.active .liquify-icon{background:linear-gradient(45deg,transparent,var(--accent-purple),transparent);border-radius:50% 0 50% 50%;transform:rotate(45deg)}.tool-btn .liquify-icon{background:linear-gradient(45deg,transparent,var(--text-muted),transparent);border-radius:50% 0 50% 50%;transform:rotate(45deg);transition:0.3s}.dropdown{appearance:none;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);color:var(--text-main);padding:clamp(8px,1vw,10px) 36px clamp(8px,1vw,10px) var(--sp-md);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:var(--fs-body);cursor:pointer;outline:none;width:100%;margin-bottom:var(--sp-xs);background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' 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;background-size:16px;transition:all var(--transition-speed)}.dropdown:focus,.dropdown:hover{border-color:var(--accent-purple);background-color:rgba(192,132,252,0.05)}.dropdown option{background:var(--bg-dark);color:var(--text-main)}.toggle-switch{display:flex;align-items:center;gap:var(--sp-sm);cursor:pointer;font-size:var(--fs-small);color:var(--text-muted)}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:relative;width:40px;height:24px;background-color:rgba(255,255,255,0.1);border-radius:24px;transition:.4s;flex-shrink:0}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;border-radius:50%;transition:.4s}input:checked+.slider{background-color:var(--accent-purple);box-shadow:0 0 10px rgba(192,132,252,0.5)}input:checked+.slider:before{transform:translateX(16px)}input:checked~.label-text{color:var(--text-main)}.glass-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{text-align:center;max-width:min(400px,90vw);padding:var(--sp-xl)}.modal-content h2{font-size:clamp(1.2rem,2.5vw,1.8rem);margin-bottom:var(--sp-md);color:var(--text-main)}.modal-content p{color:var(--text-muted);margin-bottom:var(--sp-xl);line-height:1.5;font-size:var(--fs-body)}.primary-btn{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));border:none;padding:clamp(10px,1.5vw,14px) clamp(20px,3vw,32px);font-size:clamp(0.9rem,1.5vw,1.1rem);font-weight:600;border-radius:30px;color:white;letter-spacing:1px;box-shadow:0 8px 20px rgba(192,132,252,0.4);transform:translateY(0)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(192,132,252,0.6)}#social-sidebar{position:fixed;right:var(--sp-lg);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--sp-md);padding:var(--sp-sm);z-index:100;pointer-events:auto;transition:all 0.4s ease}.social-link{color:var(--text-muted);transition:all var(--transition-speed);display:flex;align-items:center;justify-content:center;width:clamp(32px,4vw,40px);height:clamp(32px,4vw,40px);border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)}.social-link:hover{color:var(--accent-blue);background:rgba(56,189,248,0.1);border-color:var(--accent-blue);transform:translateX(-4px);box-shadow:0 0 15px rgba(56,189,248,0.2)}.social-link svg{width:clamp(16px,2.5vw,24px);height:clamp(16px,2.5vw,24px)}.mobile-only,.mobile-social-group{display:none}.desktop-only{display:block}@media (max-width:900px){:root{--canvas-bottom:clamp(160px,28vh,200px)}.bottom-area{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:stretch}.bottom-area .glass-panel{width:auto;flex:1 1 auto;min-width:140px}#social-sidebar{flex-direction:row;right:50% !important;bottom:calc(var(--canvas-bottom)+10px) !important;top:auto !important;transform:translateX(50%) !important}.social-link:hover{transform:translateY(-4px)}}@media (max-width:600px){.mobile-only{display:flex}.desktop-only{display:none !important}body.is-mobile #canvas-wrapper{top:clamp(70px,15vw,100px);bottom:80px;left:var(--sp-sm);right:var(--sp-sm)}body.is-mobile #playhead{width:100%;height:2px;left:0;bottom:0%;top:auto;transform:translateY(50%);box-shadow:0 0 10px var(--accent-blue),0 0 20px var(--accent-blue)}body.is-mobile #controls-panel{display:none;position:fixed;bottom:85px;left:var(--sp-sm);right:var(--sp-sm);flex-direction:column;align-items:stretch;max-height:60vh;overflow-y:auto;z-index:1050;transform:translateY(130%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s ease;padding:var(--sp-lg);background:rgba(15,17,21,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto;border-radius:var(--radius-lg)}body.is-mobile #controls-panel.show-tools{display:flex;transform:translateY(0)}body.is-mobile #controls-panel .glass-panel{width:100%;margin-bottom:var(--sp-sm)}body.is-mobile .mobile-social-group{display:block}body.is-mobile h1{font-size:clamp(1.2rem,6vw,1.6rem)}body.is-mobile header p{font-size:var(--fs-small)}body.is-mobile #social-sidebar{display:none}body.is-mobile #btn-toggle-tools{width:48px;height:48px;padding:8px}body.is-mobile #transport-bar{position:fixed;bottom:0;left:0;right:0;margin:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1100;background:rgba(15,17,21,0.9);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:var(--sp-sm) var(--sp-lg) 25px;border-top:1px solid rgba(255,255,255,0.1)}body.is-mobile #transport-bar h2{display:none}body.is-mobile #transport-bar .button-row{justify-content:center;gap:var(--sp-lg)}}@media (max-height:500px) and (orientation:landscape){body.is-mobile #canvas-wrapper,body.is-landscape #canvas-wrapper{top:50px;bottom:60px;left:var(--sp-sm);right:var(--sp-sm)}body.is-mobile h1,body.is-landscape h1{font-size:1.1rem;margin-bottom:0}body.is-mobile header p,body.is-landscape header p{display:none}#ui-layer{padding:var(--sp-xs) var(--sp-sm)}body.is-mobile #transport-bar,body.is-landscape #transport-bar{padding:var(--sp-xs) var(--sp-md) var(--sp-sm)}body.is-mobile #transport-bar .icon-btn,body.is-landscape #transport-bar .icon-btn{width:36px;height:36px;padding:6px}body.is-mobile .controls-panel,body.is-landscape .controls-panel{bottom:60px;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px)}#social-sidebar{gap:var(--sp-xs);padding:var(--sp-xs)}.social-link{width:28px;height:28px}.social-link svg{width:14px;height:14px}}@media (min-width:1400px){:root{--canvas-side:40px;--canvas-top:120px}.bottom-panel{gap:var(--sp-lg);max-width:1200px;margin:0 auto}}input[type="range"]{-webkit-appearance:none;appearance:none;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;outline:none;transition:background 0.3s ease}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-purple);cursor:pointer;box-shadow:0 0 8px rgba(192,132,252,0.4);transition:transform 0.2s ease}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-purple);cursor:pointer;border:none;box-shadow:0 0 8px rgba(192,132,252,0.4)}@keyframes recordPulse{0%,100%{box-shadow:0 0 10px rgba(248,113,113,0.3)}50%{box-shadow:0 0 25px rgba(248,113,113,0.6),0 0 40px rgba(248,113,113,0.2)}}.icon-btn.active-state.danger,.icon-btn.active-state[title="Record Audio"]{animation:recordPulse 1.5s ease-in-out infinite}#notification-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification{background:var(--glass-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--accent-blue);color:var(--text-main);padding:12px 20px;border-radius:var(--radius-md);box-shadow:0 8px 32px 0 rgba(0,0,0,0.3);pointer-events:auto;animation:slideIn 0.4s cubic-bezier(0.4,0,0.2,1);font-size:var(--fs-body);display:flex;align-items:center;gap:12px;min-width:250px;max-width:400px}.notification.fade-out{animation:fadeOut 0.5s ease forwards}@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}.controls-panel-inner::-webkit-scrollbar{width:4px}.controls-panel-inner::-webkit-scrollbar-track{background:transparent}.controls-panel-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px}