@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fraunces-latin-400-normal-6IfK1voy.woff2)format("woff2"),url(/assets/fraunces-latin-400-normal-NUPT2cO8.woff)format("woff")}@font-face{font-family:Fraunces;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fraunces-latin-500-normal-DnGCNyPD.woff2)format("woff2"),url(/assets/fraunces-latin-500-normal-BTR4KCeb.woff)format("woff")}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-mono-latin-400-normal-Rg4St2Dn.woff2)format("woff2"),url(/assets/space-mono-latin-400-normal-_3DlpgIW.woff)format("woff")}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/space-mono-latin-700-normal-mWgeinG7.woff2)format("woff2"),url(/assets/space-mono-latin-700-normal-D7A851RN.woff)format("woff")}@font-face{font-family:Space Mono;font-style:italic;font-display:swap;font-weight:400;src:url(/assets/space-mono-latin-400-italic-YylcN9Ay.woff2)format("woff2"),url(/assets/space-mono-latin-400-italic-zmx7Qf09.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:300;src:url(/assets/inter-latin-300-normal-BVlfKGgI.woff2)format("woff2"),url(/assets/inter-latin-300-normal-i8F0SvXL.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-500-normal-Cerq10X2.woff2)format("woff2"),url(/assets/inter-latin-500-normal-BL9OpVg8.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2)format("woff2"),url(/assets/inter-latin-700-normal-BLAVimhd.woff)format("woff")}:root{--neon-green:#0f8;--cyan:#0cf;--dark-bg:#050505;--panel-bg:#0a0a0c99;--border:#0f83;--font-mono:"Space Mono", monospace;--font-sans:"Inter", sans-serif;--font-display:"Fraunces", serif;--suoh:#9e3d3f;--suoh-dim:#9e3d3f33;--nav-accent:var(--suoh)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--dark-bg);color:#fff;font-family:var(--font-sans);overflow:hidden}.app-container{width:100%;height:100%;position:relative}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.overlay-hud{z-index:10;pointer-events:none;flex-direction:column;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}.hud-header{pointer-events:auto;justify-content:space-between;align-items:flex-start;display:flex}.logo-container{align-items:center;gap:1rem;display:flex}.logo-pulse{background-color:var(--neon-green);width:12px;height:12px;box-shadow:0 0 10px var(--neon-green);border-radius:50%;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #00ff88b3}70%{transform:scale(1);box-shadow:0 0 0 10px #0f80}to{transform:scale(.95);box-shadow:0 0 #0f80}}h1{font-family:var(--font-mono);letter-spacing:.2em;color:#fff;text-shadow:0 0 10px #00ff8880;margin:0;font-size:1.5rem;font-weight:700}.status-badge{font-family:var(--font-mono);border:1px solid var(--border);background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--neon-green);border-radius:4px;padding:.4rem 1rem;font-size:.8rem}.concept{text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:max-content;max-width:min(36rem,100% + -600px - 6rem);position:absolute;top:1.5rem;left:50%;transform:translate(-50%)}.concept-text{font-family:var(--font-sans);color:#a6a6a6;font-size:.95rem;font-weight:300;line-height:1.5}.concept-note{font-family:var(--font-mono);letter-spacing:.08em;color:#8f8f8f;margin-top:.35rem;font-size:.7rem}.hud-controls{pointer-events:none;flex-direction:column;align-items:stretch;gap:.75rem;width:220px;display:flex;position:absolute;bottom:2rem;left:2rem}.dropzone{border:1px dashed var(--neon-green);background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;height:110px;color:var(--neon-green);cursor:pointer;pointer-events:auto;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;transition:all .3s;display:flex}.dropzone:hover{background:#00ff881a;box-shadow:0 0 20px #0f83}.dropzone p{font-family:var(--font-mono);text-align:center;margin-top:.6rem;margin-bottom:.2rem;padding:0 .5rem;font-size:.7rem}.dropzone .sub-text{opacity:.7;font-size:.7rem}.sample-btn{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--neon-green);width:100%;color:var(--neon-green);font-family:var(--font-mono);cursor:pointer;pointer-events:auto;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8rem;transition:all .3s;display:flex}.sample-btn:hover:not(:disabled){background:#00ff881a;box-shadow:0 0 15px #0f86}.sample-btn:disabled{opacity:.5;cursor:not-allowed}.player-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);pointer-events:auto;border-radius:8px;flex-direction:column;align-items:stretch;gap:.6rem;width:100%;min-width:0;padding:.75rem;display:flex}.track-row{align-items:center;gap:.6rem;min-width:0;display:flex}.track-name{min-width:0;font-family:var(--font-mono);color:#fff;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.9rem;overflow:hidden}.play-btn{border:1px solid var(--neon-green);color:var(--neon-green);cursor:pointer;background:0 0;border-radius:50%;flex:none;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.play-btn:disabled{opacity:.5;cursor:not-allowed}.play-btn:hover:not(:disabled){background:var(--neon-green);color:var(--dark-bg);box-shadow:0 0 15px var(--neon-green)}.render-btn{text-align:center;color:#f36;width:100%;min-width:0;line-height:1.4;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #f36;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.8rem;transition:all .3s;display:flex}.render-btn:hover:not(:disabled){background:#ff33661a;box-shadow:0 0 15px #f366}.render-btn.recording{color:#fff;pointer-events:none;background:#e00038;border-color:#e00038;animation:1.5s infinite rec-pulse}@keyframes rec-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.cancel-btn{color:#f36c;width:100%;font-family:var(--font-mono);cursor:pointer;background:0 0;border:1px solid #ff336680;border-radius:4px;justify-content:center;align-items:center;gap:.4rem;padding:.3rem .75rem;font-size:.7rem;transition:all .2s;display:flex}.cancel-btn:hover{color:#f36;background:#ff336626;border-color:#f36}.render-btn .nowrap{white-space:nowrap}.render-btn svg,.cancel-btn svg{flex:none}.export-complete{border-top:1px solid var(--border);font-family:var(--font-mono);color:#e6e6e6;overflow-wrap:anywhere;flex-direction:column;gap:.5rem;padding-top:.6rem;font-size:.7rem;line-height:1.5;display:flex}.buy-btn{text-align:center;border:1px solid var(--neon-green);color:var(--neon-green);border-radius:4px;padding:.5rem .75rem;font-size:.75rem;text-decoration:none;transition:all .3s;display:block}.buy-btn:hover{background:#00ff881a;box-shadow:0 0 15px #0f86}.buy-btn:focus-visible{outline:2px solid var(--neon-green);outline-offset:2px}.export-complete .buy-note{color:#b3b3b3;text-align:center;font-size:.62rem}.parameter-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);pointer-events:auto;border-radius:8px;width:300px;max-height:calc(100vh - 4rem);padding:1.5rem;position:absolute;top:50%;right:2rem;overflow-y:auto;transform:translateY(-50%)}.param-header{color:var(--neon-green);font-family:var(--font-mono);border-bottom:1px solid var(--border);align-items:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:.5rem;font-size:.9rem;display:flex}.slider-group{flex-direction:column;gap:.5rem;display:flex}.slider-group label{font-family:var(--font-mono);color:#aaa;font-size:.8rem}.slider-group input[type=range]{-webkit-appearance:none;background:0 0;width:100%}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--neon-green);cursor:pointer;width:8px;height:16px;box-shadow:0 0 10px var(--neon-green);border-radius:2px;margin-top:-6px}.slider-group input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#fff3;border-radius:2px;width:100%;height:4px}.slider-value{font-family:var(--font-mono);color:var(--cyan);align-self:flex-end;font-size:.8rem}.looks{flex-direction:column;gap:.6rem;margin-bottom:1.5rem;display:flex}.looks-label{font-family:var(--font-mono);color:#aaa;font-size:.8rem}.looks-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.look-btn{border:1px solid var(--border);color:#ccc;min-width:0;font-family:var(--font-mono);text-align:left;cursor:pointer;background:#0006;border-radius:6px;flex-direction:column;gap:.3rem;padding:.3rem .3rem .4rem;font-size:.65rem;transition:border-color .2s,color .2s;display:flex}.look-btn img{aspect-ratio:16/9;background:#050505;border-radius:3px;width:100%;height:auto;display:block}.look-btn span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.look-btn:hover{color:#fff;border-color:#0f89}.look-btn.active{border-color:var(--neon-green);color:var(--neon-green);box-shadow:0 0 10px #00ff884d}.random-btn{border:1px solid var(--border);width:100%;color:var(--neon-green);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;gap:.4rem;padding:.4rem;font-size:.7rem;transition:all .2s;display:flex}.random-btn:hover{background:#00ff881a}.shape-selector{flex-direction:column;gap:.8rem;margin-bottom:1.5rem;display:flex}.shape-selector label{font-family:var(--font-mono);color:#aaa;font-size:.8rem}.shape-buttons{border:1px solid var(--border);background:#0006;border-radius:6px;justify-content:space-between;padding:.3rem;display:flex}.shape-btn{color:#fff;cursor:pointer;opacity:.4;background:0 0;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.shape-btn:hover{opacity:1;color:var(--neon-green);background:#00ff880d}.shape-btn.active{opacity:1;color:var(--dark-bg);background:var(--neon-green);box-shadow:0 0 10px #00ff884d}.switch-row{text-align:left;width:100%;font-family:var(--font-mono);font-size:.8rem;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:#aaa;background:0 0;border:none;padding:0}button:focus-visible,input:focus-visible,.dropzone:focus-visible,[role=switch]:focus-visible{outline:2px solid var(--neon-green);outline-offset:2px}