@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=IBM+Plex+Mono:ital,wght@0,400;1,400&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #07080d;--surface: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .08);--border-cyan: rgba(0, 210, 255, .35);--text: #e4eef5;--text-dim: rgba(228, 238, 245, .45);--text-muted: rgba(228, 238, 245, .22);--cyan: #00d2ff;--cyan-bright: #5ee8ff;--cyan-dim: rgba(0, 210, 255, .1);--cyan-glow: rgba(0, 210, 255, .2);--error: #ff4d6d;--accent: #00d2ff;--accent-glow: rgba(0, 210, 255, .2);--gold: #00d2ff;--gold-bright: #5ee8ff;--gold-dim: rgba(0, 210, 255, .1);--gold-glow: rgba(0, 210, 255, .2);--border-gold: rgba(0, 210, 255, .35);--font-display: "Syne", system-ui, -apple-system, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--font-ui: "Syne", system-ui, -apple-system, sans-serif}html,body,#root{height:100%}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow:hidden}.app{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.header h1{font-family:var(--font-display);font-size:1.1rem;font-weight:800;letter-spacing:.15em;color:var(--cyan);text-transform:uppercase}.nav{display:flex;gap:.25rem}.nav-link{padding:.4rem .9rem;border-radius:6px;color:var(--text-dim);text-decoration:none;font-size:.8rem;font-weight:500;transition:all .15s}.nav-link:hover{color:var(--text);background:var(--surface)}.nav-link.active{color:var(--text);background:var(--surface);border:1px solid var(--border)}.resonance-landing{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;background:var(--bg);overflow-y:auto;overflow-x:hidden}.resonance-landing:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 70% 50% at 50% 30%,rgba(0,210,255,.03) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(0,210,255,.015) 0%,transparent 60%);pointer-events:none;z-index:0}.fq-flow{position:relative;z-index:1;width:100%;max-width:680px;margin:0 auto;padding:3rem 1.5rem 5rem;display:flex;flex-direction:column;gap:2.75rem}.fq-wordmark{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1rem 0 .5rem}.fq-wordmark-name{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.4em;color:var(--text);text-transform:uppercase;line-height:1}.fq-wordmark-tag{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase}.fq-step{display:flex;flex-direction:column;gap:1.1rem}.fq-step-head{display:flex;align-items:baseline;gap:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}.fq-step-n{font-family:var(--font-mono);font-size:.58rem;color:var(--cyan);letter-spacing:.15em}.fq-step-label{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}.fq-pal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}.fq-pal-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.65rem .5rem;cursor:pointer;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:all .15s}.fq-pal-card:hover{background:var(--surface-2);border-color:#ffffff24}.fq-pal-card.active{border-color:var(--cyan);background:var(--cyan-dim);box-shadow:0 0 16px #00d2ff1f}.fq-pal-swatches{display:flex;gap:3px}.fq-pal-swatch{display:block;width:10px;height:22px;border-radius:3px}.fq-pal-name{font-family:var(--font-mono);font-size:.44rem;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.4;transition:color .15s}.fq-pal-card.active .fq-pal-name{color:var(--cyan)}.fq-int-row{display:flex;gap:.75rem}.fq-int-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:.65rem;padding:1.15rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .15s}.fq-int-card:hover{border-color:#ffffff24;background:var(--surface-2)}.fq-int-card.active{border-color:var(--cyan);background:var(--cyan-dim);box-shadow:0 0 20px #00d2ff14}.fq-int-bars{display:flex;align-items:flex-end;gap:3px;height:40px}.fq-int-bar{width:5px;border-radius:2px;background:#ffffff1a;transition:background .15s}.fq-int-bar.lit{background:#00d2ff73}.fq-int-card.active .fq-int-bar.lit{background:var(--cyan)}.fq-int-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);transition:color .15s}.fq-int-card.active .fq-int-label{color:var(--text)}.fq-int-desc{font-family:var(--font-mono);font-size:.55rem;color:var(--text-muted);letter-spacing:.04em;text-align:center;line-height:1.6;white-space:pre-line}.fq-upload-section{display:flex;flex-direction:column;gap:1.25rem;align-items:center}.fq-pills-row{display:flex;flex-direction:column;align-items:center;gap:.65rem;width:100%}.fq-pills-or{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.fq-pills{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}.fq-pill{position:relative;display:flex;align-items:center;gap:.4rem;padding:.38rem .85rem;border-radius:100px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;cursor:pointer;transition:all .15s}.fq-pill:hover:not(:disabled){background:#ffffff14;border-color:#fff3}.fq-pill.failed{opacity:.3;cursor:default}.fq-pill.loading{opacity:.7}.fq-pill-dots{display:flex;gap:2px}.fq-pill-dot{width:5px;height:5px;border-radius:50%;opacity:.9}.fq-pill-title{font-size:.68rem;color:#ffffffb3;font-family:var(--font-display);white-space:nowrap;letter-spacing:.02em}.fq-example-spinner{position:absolute;top:50%;right:.7rem;transform:translateY(-50%);width:10px;height:10px;border:1.5px solid rgba(255,255,255,.15);border-top-color:#00d2ff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dropzone{width:min(540px,90vw);border:1px solid var(--border-gold);border-radius:20px;padding:3.5rem 2.5rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--gold-dim);position:relative;overflow:hidden}.dropzone:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 80% at 50% 0%,rgba(0,210,255,.08) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s}.dropzone:hover:before,.dropzone.dragging:before{opacity:1}.dropzone:hover,.dropzone.dragging{border-color:var(--gold);background:#00d2ff17;box-shadow:0 0 40px #00d2ff1f,0 0 80px #00d2ff0d}.dropzone.disabled{opacity:.4;pointer-events:none}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.dropzone-icon{color:var(--gold);opacity:.6;margin-bottom:.75rem}.dropzone-text{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.02em;color:var(--text)}.dropzone-sub{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);letter-spacing:.06em;margin-bottom:1.5rem}.dropzone-button{display:inline-block;padding:.65rem 2rem;border-radius:50px;background:var(--gold);color:var(--bg);font-family:var(--font-mono);font-size:.75rem;font-weight:400;letter-spacing:.1em;cursor:pointer;transition:all .2s;border:none;text-transform:uppercase}.dropzone-button:hover{background:var(--gold-bright);box-shadow:0 0 20px #00d2ff4d;transform:translateY(-1px)}.dropzone-error{font-family:var(--font-mono);font-size:.75rem;color:var(--error);margin-top:.75rem;letter-spacing:.04em}.resonance-canvas-wrap{position:fixed;top:0;right:0;bottom:0;left:0}.resonance-canvas-wrap canvas{width:100%!important;height:100%!important;display:block}.resonance-baking-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;background:#080a0ed1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.resonance-baking-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.35em;color:var(--text-dim);text-transform:uppercase}.resonance-baking-track{width:260px;height:2px;background:#ffffff14;border-radius:1px;overflow:hidden}.resonance-baking-fill{height:100%;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-bright) 100%);border-radius:1px;transition:width .2s ease;box-shadow:0 0 8px var(--gold-glow)}.resonance-baking-pct{font-family:var(--font-mono);font-size:2rem;font-weight:400;color:var(--gold);letter-spacing:.08em;opacity:.8}.resonance-transport{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);width:min(640px,calc(100vw - 3rem));background:#080a0ebf;-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:.85rem 1.25rem;display:flex;flex-direction:column;gap:.65rem;box-shadow:0 8px 40px #00000080,0 0 0 1px #00d2ff0f inset,0 1px #ffffff0f inset}.resonance-transport-row{display:flex;align-items:center;gap:.75rem}.resonance-song-name{flex:1;font-family:var(--font-display);font-size:1rem;font-style:italic;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}.resonance-controls{display:flex;align-items:center;gap:.5rem}.resonance-btn-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:#ffffff12;color:#ffffffa6;cursor:pointer;transition:all .15s;padding:0;flex-shrink:0}.resonance-btn-icon:hover{background:#ffffff1f;color:var(--text)}.resonance-btn-play{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:50%;background:var(--gold);color:var(--bg);cursor:pointer;transition:all .2s;padding:0;flex-shrink:0;box-shadow:0 0 20px #00d2ff4d}.resonance-btn-play:hover{background:var(--gold-bright);box-shadow:0 0 28px #00d2ff73;transform:scale(1.04)}.resonance-divider{width:1px;height:22px;background:#ffffff1a;flex-shrink:0;margin:0 .1rem}.resonance-btn-text{padding:0 .85rem;height:32px;border:1px solid rgba(255,255,255,.1);border-radius:50px;background:transparent;color:#ffffff73;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}.resonance-btn-text:hover{border-color:#fff3;color:#ffffffb3}.resonance-btn-text.gold{border-color:var(--border-gold);color:var(--gold)}.resonance-btn-text.gold:hover{background:var(--gold-dim);border-color:var(--gold);box-shadow:0 0 12px #00d2ff26}.resonance-progress-track{width:100%;height:2px;background:#ffffff12;border-radius:1px;overflow:hidden}.resonance-progress-fill{height:100%;background:var(--gold);border-radius:1px;transition:width .25s linear;box-shadow:0 0 6px var(--gold-glow)}.fq-panel-anchor{position:relative;flex-shrink:0}.fq-panel-trigger{display:flex;align-items:center;height:32px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:#ffffff0d;cursor:pointer;transition:all .15s;gap:3px}.fq-panel-trigger:hover{border-color:#ffffff1f;background:#ffffff14}.fq-panel-trigger.open{border-color:var(--cyan);background:#00d2ff14}.fq-trigger-swatches{display:flex;gap:2px}.fq-trigger-dot{display:block;width:6px;height:18px;border-radius:2px}.fq-trigger-mode{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#ffffff8c}.fq-panel-trigger.open .fq-trigger-mode{color:var(--cyan)}.fq-panel{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#080a10f7;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:100;box-shadow:0 -4px 30px #00000080,0 0 0 1px #00d2ff0f inset;animation:panelUp .18s cubic-bezier(.16,1,.3,1);white-space:nowrap}@keyframes panelUp{0%{opacity:0;transform:translate(-50%) translateY(6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.fq-panel-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}.fq-panel-modes{display:flex;gap:.4rem}.fq-panel-mode-btn{padding:.4rem .85rem;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;cursor:pointer;transition:all .15s}.fq-panel-mode-btn:hover{border-color:#fff3;color:var(--text)}.fq-panel-mode-btn.active{border-color:var(--cyan);color:var(--cyan);background:#00d2ff14}.fq-palette-groups{display:flex;flex-direction:column;gap:.5rem}.fq-palette-row{display:flex;align-items:center;gap:.5rem}.fq-palette-row-label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);min-width:2.5rem}.fq-palettes{display:flex;gap:.4rem}.fq-palette-btn{display:flex;gap:2px;padding:4px;border:1px solid transparent;border-radius:8px;background:#ffffff0a;cursor:pointer;transition:all .15s}.fq-palette-btn:hover{border-color:#ffffff26}.fq-palette-btn.active{border-color:var(--cyan);box-shadow:0 0 10px #00d2ff33}.fq-swatch{display:block;width:10px;height:20px;border-radius:3px}.resonance-export-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding-bottom:7rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.resonance-export-sheet{width:min(780px,calc(100vw - 3rem));background:#0a0b0ff5;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:2rem;box-shadow:0 -8px 60px #0009;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.resonance-export-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.75rem}.resonance-export-title{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.06em;color:var(--text)}.resonance-export-close{background:none;border:none;color:var(--text-dim);font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .25rem;transition:color .15s}.resonance-export-close:hover{color:var(--text)}.resonance-export-mockup-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);letter-spacing:.08em;background:#0006}.resonance-export-card-name{font-family:var(--font-display);font-size:1rem;font-weight:400;letter-spacing:.04em;color:var(--text)}.resonance-export-price{font-family:var(--font-mono);font-size:.85rem;color:var(--gold);letter-spacing:.04em}.resonance-export-download{padding:.45rem 1rem;border:1px solid var(--border-gold);border-radius:50px;background:transparent;color:var(--gold);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s}.resonance-export-download:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 16px #00d2ff40}.resonance-export-download:disabled{opacity:.35;cursor:not-allowed}.fq-export-wide{width:min(860px,calc(100vw - 3rem))}.fq-export-layout{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start}.fq-export-left{display:flex;flex-direction:column;gap:.75rem}.fq-export-field-group{display:flex;flex-direction:column;gap:.3rem}.fq-export-field-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.fq-export-input{width:100%;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;padding:.55rem .75rem;color:var(--text);font-family:var(--font-ui);font-size:.88rem;outline:none;transition:border-color .15s}.fq-export-input::placeholder{color:var(--text-muted)}.fq-export-input:focus{border-color:var(--cyan)}.fq-vinyl-card{display:flex;gap:.85rem;align-items:center;margin-top:.5rem;padding:.85rem;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.fq-export-thumb{border-radius:6px;overflow:hidden;flex-shrink:0;background:#0006;border:1px solid rgba(255,255,255,.05)}.fq-export-thumb.square{width:72px;height:72px}.fq-vinyl-info{display:flex;flex-direction:column;gap:.3rem;flex:1}.fq-export-dim{font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);letter-spacing:.04em}.fq-vinyl-footer{display:flex;align-items:center;gap:.6rem;margin-top:.25rem}.fq-export-right{display:flex;flex-direction:column;gap:.75rem}.fq-poster-preview{width:100%;aspect-ratio:3 / 4;border-radius:10px;overflow:hidden;background:#00000080;border:1px solid rgba(255,255,255,.07)}.fq-poster-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}@media(max-width:700px){.fq-export-layout{grid-template-columns:1fr}.fq-poster-preview{aspect-ratio:3 / 2}}@media(max-width:600px){.resonance-transport{bottom:1rem;border-radius:16px}}