*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:#000;overflow:hidden;font-family:SF Mono,ui-monospace,Menlo,monospace;user-select:none;-webkit-user-select:none;overscroll-behavior:none}@supports (height: 100dvh){html,body{height:100dvh}}canvas.viz{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1s ease;touch-action:none}#ui{position:absolute;inset:0;pointer-events:none;z-index:10}#hud{position:absolute;top:14px;left:16px;color:#9f9;font-size:12px;line-height:1.7;text-shadow:0 0 6px rgba(0,255,128,.6),0 1px 2px #000;letter-spacing:.04em}#hud.hidden{display:none}#hud .preset-name{font-size:15px;color:#cfc}.overlay-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#000000d1;color:#9f9;font-size:15px;cursor:pointer;pointer-events:auto;z-index:50;text-shadow:0 0 8px rgba(0,255,128,.5)}.overlay-gate .big{font-size:26px;letter-spacing:.12em}#toast{position:absolute;bottom:36px;left:50%;transform:translate(-50%);background:#0a140ad9;border:1px solid rgba(0,255,128,.35);color:#cfc;font-size:13px;padding:8px 18px;border-radius:4px;opacity:0;transition:opacity .25s ease;pointer-events:none}#toast.show{opacity:1}.browser-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000073;pointer-events:auto;z-index:40}.browser-overlay.hidden{display:none}.browser-panel{width:min(620px,86vw);max-height:72vh;display:flex;flex-direction:column;background:#080e0aeb;border:1px solid rgba(0,255,128,.3);border-radius:6px;box-shadow:0 0 40px #000c;padding:14px;gap:8px}.browser-filter{background:#0009;border:1px solid rgba(0,255,128,.25);border-radius:3px;color:#cfc;font:inherit;font-size:14px;padding:8px 10px;outline:none}.browser-filter:focus{border-color:#00ff8099}.browser-count,.browser-help{color:#586;font-size:11px;letter-spacing:.05em}.browser-list{list-style:none;overflow-y:auto;flex:1}.browser-list li{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;color:#aca;font-size:13px;cursor:pointer;white-space:nowrap}.browser-list li:hover{background:#00ff8014}.browser-list li.selected{background:#00ff8029;color:#efe}.browser-list .star{color:#575;width:16px;flex:none}.browser-list .star.fav{color:#fd5}.browser-list .badge{flex:none;font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:2px;border:1px solid}.browser-list .badge.butterchurn{color:#8cf;border-color:#78beff66}.browser-list .badge.glsl{color:#9f9;border-color:#00ff8066}.browser-list .name{overflow:hidden;text-overflow:ellipsis}.browser-toprow{display:flex;gap:8px}.browser-toprow .browser-filter{flex:1}.browser-clear{background:#0009;border:1px solid rgba(0,255,128,.25);border-radius:3px;color:#9f9;font:inherit;padding:0 12px;cursor:pointer}.browser-clear:hover{border-color:#00ff8099}.browser-chips{display:flex;gap:6px}.chip{background:#00000080;border:1px solid rgba(0,255,128,.25);border-radius:999px;color:#7a7;font:inherit;font-size:10px;letter-spacing:.1em;padding:3px 12px;cursor:pointer}.chip:hover{border-color:#00ff808c;color:#aca}.chip.active{background:#00ff802e;border-color:#00ff80b3;color:#efe}.browser-list .note{color:#687;font-size:11px;font-style:italic;overflow:hidden;text-overflow:ellipsis;max-width:180px;flex:none}.browser-rotate{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid rgba(0,255,128,.12)}.rotate-label{color:#586;font-size:10px;letter-spacing:.08em;text-transform:uppercase;flex:none}.rotate-chips{display:flex;gap:4px}.chip.small{font-size:9px;padding:2px 9px}.browser-list .note-btn{flex:none;margin-left:auto;color:#464;cursor:pointer;padding:0 4px;visibility:hidden}.browser-list li:hover .note-btn,.browser-list li.selected .note-btn{visibility:visible}.browser-list .note-btn:hover{color:#9f9}.note-input{flex:1;background:#000000b3;border:1px solid rgba(0,255,128,.4);border-radius:3px;color:#cfc;font:inherit;font-size:12px;padding:2px 6px;outline:none}#controlbar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:6px 10px;background:#060c08b8;border:1px solid rgba(0,255,128,.22);border-radius:999px;backdrop-filter:blur(8px);pointer-events:auto;z-index:30;transition:opacity .5s ease}#controlbar.idle{opacity:0;pointer-events:none}#controlbar .ctl{position:relative;background:none;border:none;color:#8c9;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}#controlbar .ctl:hover{background:#00ff801f;color:#efe}#controlbar .ctl.active{color:#fd5}#controlbar .ctl svg{pointer-events:none}#controlbar .ctl-hint{position:absolute;bottom:42px;left:50%;transform:translate(-50%);background:#080e0af2;border:1px solid rgba(0,255,128,.3);border-radius:3px;color:#cfc;font-size:10px;letter-spacing:.06em;padding:3px 8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}#controlbar .ctl:hover .ctl-hint{opacity:1}.shortcuts-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000008c;pointer-events:auto;z-index:45}.shortcuts-overlay.hidden{display:none}.shortcuts-panel{background:#080e0af2;border:1px solid rgba(0,255,128,.3);border-radius:6px;padding:20px 26px;box-shadow:0 0 40px #000c}.shortcuts-title{color:#9f9;font-size:13px;letter-spacing:.14em;margin-bottom:12px;text-shadow:0 0 8px rgba(0,255,128,.5)}.shortcuts-panel table{border-collapse:collapse}.shortcuts-panel td{color:#aca;font-size:12px;padding:3px 10px 3px 0}.shortcuts-panel td.key{color:#fd5;text-align:right;padding-right:16px;white-space:nowrap}.browser-wizard{background:#0009;border:1px solid rgba(255,221,85,.35);border-radius:3px;font:inherit;padding:0 12px;cursor:pointer}.browser-wizard:hover{border-color:#fd5c}.wizard-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;pointer-events:auto;z-index:46}.wizard-overlay.hidden{display:none}.wizard-panel{width:min(520px,86vw);display:flex;flex-direction:column;gap:14px;background:#0c0a04f5;border:1px solid rgba(255,221,85,.4);border-radius:6px;box-shadow:0 0 50px #000000d9,inset 0 0 60px #ffdd550a;padding:22px 26px}.wizard-title{color:#fd5;font-size:15px;letter-spacing:.1em;text-shadow:0 0 10px rgba(255,221,85,.4)}.wizard-step{color:#875;font-size:10px;letter-spacing:.1em}.wizard-text{color:#ba6;font-size:13px;line-height:1.7}.wizard-text a{color:#8cf}.wizard-pulse{animation:wizardPulse 1.6s ease-in-out infinite}@keyframes wizardPulse{0%,to{opacity:.65}50%{opacity:1}}.wizard-options{display:flex;flex-wrap:wrap;gap:8px}.wizard-option{background:#00000080;border:1px solid rgba(255,221,85,.3);border-radius:999px;color:#db9;font:inherit;font-size:13px;padding:8px 18px;cursor:pointer;transition:all .15s ease}.wizard-option:hover{background:#ffdd5524;border-color:#ffdd55b3;color:#fec}.wizard-other,.wizard-key{background:#0009;border:1px solid rgba(255,221,85,.25);border-radius:3px;color:#fec;font:inherit;font-size:13px;padding:9px 12px;outline:none}.wizard-other:focus,.wizard-key:focus{border-color:#fd59}.wizard-actions{display:flex;justify-content:flex-end;gap:8px}.wizard-actions button{background:#00000080;border:1px solid rgba(255,221,85,.3);border-radius:3px;color:#db9;font:inherit;font-size:12px;padding:7px 16px;cursor:pointer}.wizard-actions button:hover{border-color:#ffdd55b3;color:#fec}.wizard-actions .wizard-generate{background:#ffdd5526;border-color:#fd59;color:#fd5}#fm-badge{position:absolute;bottom:18px;right:18px;background:#060c08b8;border:1px solid rgba(0,255,128,.25);border-radius:4px;color:#8c9;font:inherit;font-size:11px;letter-spacing:.18em;padding:7px 12px;cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);z-index:30;transition:color .2s ease,border-color .2s ease}#fm-badge:hover{color:#efe;border-color:#00ff8099}#fm-badge .fm-waves{color:#fd5;letter-spacing:0}.fm-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;pointer-events:auto;z-index:44}.fm-overlay.hidden{display:none}.fm-panel{width:min(640px,88vw);max-height:76vh;display:flex;flex-direction:column;background:#080e0af5;border:1px solid rgba(0,255,128,.35);border-radius:6px;box-shadow:0 0 50px #000000d9,inset 0 0 60px #00ff800a;padding:18px 22px;gap:12px}.fm-tabs{display:flex;gap:6px}.fm-tab{background:#00000080;border:1px solid rgba(0,255,128,.25);border-radius:3px;color:#7a7;font:inherit;font-size:10px;letter-spacing:.14em;padding:5px 14px;cursor:pointer}.fm-tab:hover{color:#aca;border-color:#00ff8080}.fm-tab.active{background:#00ff8029;border-color:#00ff80b3;color:#efe}.fm-content{overflow-y:auto;color:#aca;font-size:13px;line-height:1.75}.fm-content p{margin-bottom:10px}.fm-content ul{list-style:none;margin-bottom:10px}.fm-content li{margin-bottom:10px;padding-left:14px;border-left:2px solid rgba(0,255,128,.25)}.fm-content b{color:#cfc}.fm-content i{color:#bdb}.fm-content a{color:#8cf;text-decoration:none}.fm-content a:hover{text-decoration:underline}.fm-content code{background:#00ff8014;border-radius:2px;padding:1px 5px;font-size:12px;color:#cfc}.fm-footer{color:#586;font-size:10px;letter-spacing:.1em;text-align:right}.editor-panel{position:absolute;top:0;right:0;bottom:0;width:min(46%,700px);display:flex;flex-direction:column;background:#080c0aed;border-left:1px solid rgba(0,255,128,.3);backdrop-filter:blur(6px);pointer-events:auto;z-index:38;transition:transform .25s ease}.editor-panel.hidden{transform:translate(105%);pointer-events:none}.editor-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid rgba(0,255,128,.15)}.editor-title{color:#9f9;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.editor-status{color:#7c8;font-size:12px;flex:1}.editor-status.error{color:#f76}.editor-keys{color:#586;font-size:10px;letter-spacing:.05em}.editor-host{flex:1;overflow:hidden}.editor-host .cm-editor{height:100%;font-size:13px;background:transparent}.editor-host .cm-editor .cm-scroller{font-family:SF Mono,ui-monospace,Menlo,monospace}#webamp{position:absolute!important;inset:0;z-index:32!important;pointer-events:none!important}#webamp .window,#webamp #main-window{pointer-events:auto}#webamp #equalizer-window,#webamp #playlist-window{display:none!important}#mini-vis{position:absolute;left:24px;top:43px;width:76px;height:16px;pointer-events:none;z-index:5}@media(pointer:coarse){.browser-list .note-btn{visibility:visible}}@media(max-width:700px){.browser-overlay{align-items:flex-end}.browser-panel{width:100%;max-height:80dvh;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;padding-bottom:calc(14px + env(safe-area-inset-bottom))}.browser-panel:before{content:"";align-self:center;width:42px;height:4px;border-radius:2px;background:#00ff804d;margin-bottom:2px}.browser-list li{padding:11px 8px;font-size:14px}.browser-list .star{width:24px;font-size:16px}.browser-filter{font-size:16px}.chip{padding:6px 14px;font-size:11px}#controlbar{gap:6px;padding:8px 12px;bottom:calc(16px + env(safe-area-inset-bottom))}#controlbar .ctl{width:44px;height:44px}#controlbar .ctl-hint{display:none}#fm-badge{bottom:auto;top:calc(12px + env(safe-area-inset-top));right:12px}#hud{top:calc(12px + env(safe-area-inset-top))}.fm-panel,.wizard-panel{width:94vw;max-height:82dvh;padding:16px 18px}.editor-panel{width:100%}.shortcuts-panel{max-height:82dvh;overflow-y:auto}}#swipe-flash{position:absolute;top:44%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none;z-index:36;opacity:0}#swipe-flash .sf-chev{color:#fd5;font-size:38px;line-height:1;flex:none;text-shadow:0 0 20px rgba(255,221,85,.6)}#swipe-flash .sf-name{color:#efe;font-size:14px;line-height:1.45;letter-spacing:.04em;text-align:center;text-shadow:0 0 12px rgba(0,255,128,.7),0 1px 3px #000;max-width:min(64vw,340px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#swipe-flash.animate.next{animation:sfNext .95s ease-out forwards}#swipe-flash.animate.back{animation:sfBack .95s ease-out forwards}@keyframes sfNext{0%{opacity:0;transform:translate(36px)}15%{opacity:1;transform:translate(0)}70%{opacity:1}to{opacity:0;transform:translate(-14px)}}@keyframes sfBack{0%{opacity:0;transform:translate(-36px)}15%{opacity:1;transform:translate(0)}70%{opacity:1}to{opacity:0;transform:translate(14px)}}.settings-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000008c;pointer-events:auto;z-index:43}.settings-overlay.hidden{display:none}.settings-panel{width:min(440px,90vw);display:flex;flex-direction:column;gap:14px;background:#080e0af5;border:1px solid rgba(0,255,128,.32);border-radius:6px;box-shadow:0 0 50px #000000d9;padding:20px 24px}.settings-title{color:#9f9;font-size:13px;letter-spacing:.14em;text-shadow:0 0 8px rgba(0,255,128,.5)}.settings-rows{display:flex;flex-direction:column;gap:4px}.settings-row{display:flex;align-items:center;justify-content:space-between;color:#aca;font-size:13px;padding:7px 0;border-bottom:1px solid rgba(0,255,128,.08)}.settings-toggle{background:#00000080;border:1px solid rgba(0,255,128,.3);border-radius:999px;color:#7a7;font:inherit;font-size:11px;letter-spacing:.1em;padding:6px 18px;min-width:64px;cursor:pointer}.settings-toggle.on{background:#00ff8029;border-color:#00ff80b3;color:#efe}.settings-rotate{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.settings-label{color:#586;font-size:10px;letter-spacing:.08em;text-transform:uppercase;flex:none}.settings-pool-chips{display:flex;gap:4px;flex-wrap:wrap}.settings-links{display:flex;gap:8px}.settings-links button{flex:1;background:#00000080;border:1px solid rgba(0,255,128,.25);border-radius:3px;color:#9f9;font:inherit;font-size:11px;letter-spacing:.06em;padding:9px 10px;cursor:pointer}.settings-links button:hover{border-color:#00ff8099;color:#efe}.settings-info{color:#586;font-size:10px;letter-spacing:.08em;text-align:center}.wizard-prompt,.wizard-paste{background:#0009;border:1px solid rgba(255,221,85,.25);border-radius:3px;color:#db9;font-family:inherit;font-size:11px;line-height:1.5;padding:10px;height:180px;resize:none;outline:none;white-space:pre}.wizard-paste{white-space:pre-wrap;color:#fec;font-size:12px}.wizard-paste:focus,.wizard-prompt:focus{border-color:#fd59}.wizard-errors{background:#3c0c0899;border:1px solid rgba(255,102,80,.4);border-radius:3px;color:#f98;font-size:11px;line-height:1.6;padding:8px 10px;max-height:90px;overflow-y:auto;white-space:pre-wrap}.wizard-errors.hidden,.wizard-copy-errors.hidden{display:none}@media(max-width:700px){.settings-overlay{align-items:flex-start}.settings-panel{width:100%;border-radius:0 0 16px 16px;border-top:none;padding-top:calc(16px + env(safe-area-inset-top))}.settings-toggle{padding:9px 20px}.wizard-prompt,.wizard-paste{height:140px;font-size:12px}}