:root{--primary-color:#ff007a;--secondary-color:#7928ca;--bg-color:#0d0d0d;--text-color:#fff;--glass-bg:#19192366;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}:focus{outline:none!important}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;overflow:hidden}.aspect-canvas{object-fit:contain;z-index:10;pointer-events:none;width:100vw;height:100vh;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#visualizer-canvas{z-index:10}.control-panel{z-index:30;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:15px;width:auto;min-width:350px;max-width:600px;max-height:calc(100vh - 20px);padding:8px 15px 15px;transition:opacity .3s,transform .3s;position:absolute;top:10px;left:20px;overflow-y:auto;box-shadow:0 8px 32px #00000080}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}.control-panel::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.control-panel::-webkit-scrollbar-thumb:hover{background:#fff6}.control-panel:hover{background:#19192399}.header h1{background:linear-gradient(45deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:5px;font-size:1.3rem;font-weight:800}.header p{color:#aaa;margin-bottom:10px;font-size:.85rem}.upload-section{flex-direction:column;gap:10px;margin-bottom:10px;display:flex}input[type=file]{display:none}.custom-file-upload{cursor:pointer;border:1px solid var(--glass-border);text-align:center;background:#ffffff0d;border-radius:10px;padding:8px 15px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-block}.custom-file-upload:hover{border-color:var(--primary-color);background:#ffffff1a;transform:translateY(-2px);box-shadow:0 5px 15px #ff007a4d}.custom-select{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;border-radius:10px;outline:none;width:50%;padding:8px;font-size:.85rem}.custom-select option{background:var(--bg-color);color:#fff}.action-btn{cursor:pointer;color:gold;text-align:center;background:#ffd7001a;border:1px solid gold;border-radius:10px;padding:8px 15px;font-size:.9rem;font-weight:600;transition:all .2s}.action-btn:hover{background:#ffd70033;transform:translateY(-2px);box-shadow:0 5px 15px #ffd7004d}.playback-controls{width:100%}audio{border-radius:20px;outline:none;width:100%;height:35px}.export-btn{background:linear-gradient(45deg, var(--primary-color), var(--secondary-color));color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:10px;font-size:1rem;font-weight:700;transition:all .3s}.export-btn:disabled{color:#777;cursor:not-allowed;background:#333}.export-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 15px #ff007a66}.toggle-ui-btn{z-index:50;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);color:#fff;cursor:pointer;border-radius:20px;padding:8px 15px;font-weight:600;transition:all .3s;display:none;position:absolute;top:10px;right:10px;box-shadow:0 4px 15px #00000080}.toggle-ui-btn:hover{background:#fff3}@media (width<=768px){.toggle-ui-btn{display:block}.control-panel{width:auto;min-width:unset;max-width:unset;opacity:0;pointer-events:none;max-height:calc(100vh - 70px);top:50px;left:10px;right:10px;transform:translateY(-20px)}.control-panel.show-mobile{opacity:1;pointer-events:auto;transform:translateY(0)}.preset-section>div,.preset-section{flex-direction:column!important}.preset-section label{text-align:left!important}}