*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100vh;height:-webkit-fill-available}#visualizer{position:absolute;top:0;left:0;width:100%;height:100%}#app-title{position:absolute;top:20px;left:20px;margin:0;font-size:32px;font-weight:700;letter-spacing:2px;color:#ffffffe6;text-shadow:0 2px 10px rgba(0,0,0,.5);z-index:10;background:#0000004d;padding:10px 20px;border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}#controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);text-align:center;z-index:10}.control-button{background:#ffffff1a;border:2px solid rgba(255,255,255,.3);color:#fff;padding:15px 30px;font-size:16px;border-radius:30px;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.control-button:active{transform:scale(.95)}.control-button:hover{background:#fff3;border-color:#ffffff80}.control-button.active{background:#ff64644d;border-color:#ff646499}#status{margin-top:10px;font-size:14px;opacity:.7}.settings-toggle{position:absolute;top:20px;right:20px;width:40px;height:40px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;z-index:11;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.settings-panel{position:absolute;top:80px;right:20px;background:#000000e6;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:20px;z-index:10;min-width:250px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:opacity .3s ease,transform .3s ease}.settings-panel.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.settings-panel h2{margin-bottom:20px;font-size:18px}.setting-group{margin-bottom:15px}.setting-group label{display:block;margin-bottom:5px;font-size:14px;opacity:.8}.setting-group input[type=range]{width:100%;margin-bottom:5px}.setting-group span{font-size:12px;opacity:.6}.setting-group[data-preset]{display:none}.setting-group[data-preset].active{display:block}.setting-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.setting-section:last-child{border-bottom:none;margin-bottom:0}.setting-section h3{margin-bottom:15px;font-size:16px;color:#ffffffe6}.setting-group select{width:100%;padding:8px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px}.setting-group select option{background:#1a1a1a;color:#fff}.setting-group input[type=color]{width:100%;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:transparent;cursor:pointer}.setting-group input[type=range]{-webkit-appearance:none;height:6px;border-radius:3px;background:#fff3;outline:none}.setting-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0000004d}.setting-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 6px #0000004d}@media (max-width: 768px){#app-title{font-size:24px;top:10px;left:10px;padding:8px 16px;letter-spacing:1px}.settings-panel{right:10px;left:10px;min-width:auto}#controls{bottom:env(safe-area-inset-bottom,20px)}}