*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#000;color:#fff;overflow:hidden}#app{position:relative;width:100vw;height:100vh}#canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;background:#000}#stars-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.settings-cog{position:absolute;top:20px;right:20px;width:48px;height:48px;background:#000c;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);transition:all .3s ease;z-index:100}.settings-cog:hover{background:#000000e6;border-color:#ffffff4d;transform:rotate(90deg)}.settings-cog svg{width:24px;height:24px}.settings-modal{position:absolute;top:20px;right:20px;background:#000000f2;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:12px;min-width:320px;max-width:400px;max-height:80vh;overflow-y:auto;z-index:200;transform:translateY(0);opacity:1;transition:all .3s ease}.settings-modal.hidden{transform:translateY(-20px);opacity:0;pointer-events:none}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}.settings-header h3{color:#fff;font-size:18px;font-weight:600}.close-btn{background:none;border:none;color:#ccc;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}#controls{padding:0 20px 20px}#controls>div{margin-bottom:20px}#controls>div:last-child{margin-bottom:0}label{display:block;margin-bottom:8px;font-size:14px;color:#ccc}select,input,button{width:100%;padding:8px;margin-top:4px;border:1px solid #444;border-radius:4px;background:#222;color:#fff;font-size:14px}button{cursor:pointer;background:#06c;border:none;transition:background .2s}button:hover{background:#0080ff}button:disabled{background:#444;cursor:not-allowed}input[type=range]{padding:0}#debug-controls button{width:48%;display:inline-block;margin-right:4%}#debug-controls button:last-child{margin-right:0}#status{font-family:Courier New,monospace;font-size:12px;color:#aaa}#status>div{margin-bottom:4px}#audio-bands>div{display:inline-block;width:33%;margin-bottom:4px}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000}#overlay.hidden{display:none}#overlay-content{background:#222;padding:40px;border-radius:8px;text-align:center;max-width:400px;border:1px solid #444}#overlay-content h2{margin-bottom:20px;color:#fff}#overlay-content p{margin-bottom:30px;color:#ccc;line-height:1.5}#overlay-content button{width:48%;margin:0 1%;display:inline-block}@media (max-width: 768px){.settings-cog{top:10px;right:10px}.settings-modal{top:10px;right:10px;left:10px;min-width:auto;max-width:none}#overlay-content{margin:20px;padding:30px}}