@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800&display=swap";:root{--void-true: #050505;--void-off: #0a0a0a;--void-elevated: #141414;--acid-lime: #B8E600;--acid-dim: #8FB300;--rust: #FF3300;--rust-dim: #cc2900;--text-primary: #E0E0E0;--text-secondary: #888888;--text-dim: #555555;--border-color: #1f1f1f;--border-strong: #333333;--font-display: "Syne", sans-serif;--font-mono: "Space Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--space-4xl: 96px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-mono);font-size:14px;line-height:1.6;color:var(--text-primary);background-color:var(--void-true);min-height:100vh}.text-acid,span.text-acid,h1 .text-acid,h1 span.text-acid{color:var(--acid-lime)!important}.text-rust,span.text-rust,h1 .text-rust,h1 span.text-rust{color:var(--rust)!important}.text-dim{color:var(--text-dim)!important}.text-secondary{color:var(--text-secondary)!important}.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat}.app{min-height:100vh;display:flex;flex-direction:column}header{border-bottom:1px solid var(--border-color);padding:var(--space-2xl) var(--space-xl);background:var(--void-off);text-align:center}main{flex:1;padding:var(--space-xl);display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 0%,rgba(184,230,0,.03) 0%,transparent 50%),var(--void-true)}footer{border-top:1px solid var(--border-color);padding:var(--space-md) var(--space-xl);background:var(--void-off);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;display:flex;justify-content:space-between;align-items:center}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{color:var(--acid-lime)}h1,h2,h3,.headline{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1}h1{font-size:clamp(2rem,8vw,4rem);color:var(--text-primary)}h2{font-size:clamp(1.25rem,4vw,1.75rem);color:var(--text-primary);margin-bottom:var(--space-lg)}p,span,button,input,label,a{font-family:var(--font-mono)}.subtitle{font-size:11px;color:var(--rust);text-transform:uppercase;letter-spacing:.2em;margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--rust);display:inline-block}.hero-section{max-width:800px;width:100%;margin:0 auto;padding:var(--space-4xl) var(--space-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hero-section h1{margin-bottom:var(--space-xl);text-align:center;width:100%}.hero-tagline{font-size:15px;color:var(--text-secondary);max-width:580px;margin:0 auto var(--space-2xl) auto;line-height:1.9;text-align:center}.hero-tagline strong{color:var(--text-primary)}.btn{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:var(--space-md) var(--space-lg);border:1px solid;cursor:pointer;position:relative;text-decoration:none;display:inline-block;border-radius:0;z-index:1}.btn:before{content:"";position:absolute;top:4px;left:4px;width:100%;height:100%;z-index:-1;transition:all .15s ease}.btn-primary{background:#b8e600!important;color:#e0e0e0!important;border-color:#b8e600!important;transition:transform .15s ease}.btn-primary:before{background:#f30!important}.btn-primary:hover{transform:translate(-4px,-4px)}.btn-primary:hover:before{top:8px;left:8px}.btn-primary:active{transform:translate(0)}.btn-primary:active:before{top:4px;left:4px}.btn-secondary{background:transparent;color:var(--text-secondary);border-color:var(--border-strong);transition:transform .15s ease,border-color .15s ease,color .15s ease}.btn-secondary:before{background:var(--border-strong)}.btn-secondary:hover{transform:translate(-4px,-4px);border-color:var(--text-primary);color:var(--text-primary)}.btn-secondary:hover:before{top:8px;left:8px}.btn-rust{background:#b8e600!important;color:#e0e0e0!important;border-color:#b8e600!important;transition:transform .15s ease}.btn-rust:before{background:#f30!important}.btn-rust:hover{transform:translate(-4px,-4px)}.btn-rust:hover:before{top:8px;left:8px}.btn-success{background:var(--void-elevated);color:var(--acid-lime);border-color:var(--acid-lime);transition:transform .15s ease}.btn-success:before{background:var(--acid-dim)}.btn-success:hover{transform:translate(-4px,-4px)}.btn-success:hover:before{top:8px;left:8px}.btn-large{padding:var(--space-lg) var(--space-2xl);font-size:14px}.btn-small{padding:var(--space-sm) var(--space-md);font-size:10px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn:disabled:before{display:none}.user-info{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--void-off);border:1px solid var(--border-color);margin-bottom:var(--space-xl);font-size:12px}.user-info strong{color:var(--acid-lime)}.main-section{max-width:800px;width:100%;margin:0 auto;padding:var(--space-xl) 0}.genre-section{margin-bottom:var(--space-xl)}.genre-toggle{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);font-family:var(--font-mono);font-size:12px;padding:var(--space-sm) var(--space-md);cursor:pointer;display:flex;align-items:center;gap:var(--space-md);width:100%;text-align:left;transition:border-color .15s ease,color .15s ease}.genre-toggle:hover{border-color:var(--text-primary);color:var(--text-primary)}.genre-count{color:var(--acid-lime);margin-left:auto}.genre-picker{border:1px solid var(--border-color);border-top:none;background:var(--void-off);padding:var(--space-md)}.genre-hint{font-size:12px;color:var(--text-dim);margin-bottom:var(--space-md)}.genre-grid{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-md)}.genre-chip{background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;padding:var(--space-xs) var(--space-sm);cursor:pointer;transition:all .15s ease}.genre-chip:hover{border-color:var(--text-primary);color:var(--text-primary)}.genre-chip.selected{background:var(--acid-lime);border-color:var(--acid-lime);color:var(--void-true)}.genre-clear{background:transparent;border:none;color:var(--rust);font-family:var(--font-mono);font-size:11px;cursor:pointer;padding:0;text-decoration:underline}.genre-clear:hover{color:var(--text-primary)}.actions{margin-bottom:var(--space-xl);text-align:center}.status{font-size:12px;color:var(--text-secondary);padding:var(--space-md);border-left:2px solid var(--acid-lime);background:var(--void-off);margin-bottom:var(--space-lg);margin-top:var(--space-lg)}.discovery-log{background:var(--void-off);border:1px solid var(--border-color);padding:var(--space-md);margin-bottom:var(--space-xl);max-height:300px;overflow-y:auto;font-size:12px}.log-entry{padding:var(--space-xs) 0;color:var(--text-secondary);border-bottom:1px solid var(--border-color);font-size:12px}.log-entry:last-child{border-bottom:none}.track-list{border:1px solid var(--border-color);background:var(--void-off);margin-bottom:var(--space-xl)}.track-list h2{padding:var(--space-md);border-bottom:1px solid var(--border-color);margin-bottom:0;font-size:14px;letter-spacing:.1em}.track{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--border-color);transition:background .15s ease}.track:last-child{border-bottom:none}.track:hover{background:var(--void-elevated)}.track-number{font-size:10px;color:var(--text-dim);width:24px;flex-shrink:0}.track-art{width:48px;height:48px;flex-shrink:0;filter:grayscale(100%) contrast(1.2);opacity:.7;transition:all .3s ease;border-radius:0}.track:hover .track-art{filter:grayscale(0%) contrast(1);opacity:1}.track-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.track-name{font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-section{display:flex;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.start-over{display:flex;justify-content:center;margin-top:var(--space-xl)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--void-true)}::-webkit-scrollbar-thumb{background:var(--border-strong)}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}::selection{background:var(--acid-lime);color:var(--void-true)}@media (max-width: 768px){header,footer{padding-left:var(--space-md);padding-right:var(--space-md)}main{padding:var(--space-md)}.hero-section{padding:var(--space-2xl) var(--space-md)}h1{font-size:1.75rem}.hero-tagline{font-size:14px}.btn-large{padding:var(--space-md) var(--space-lg);font-size:12px;width:100%;text-align:center}.save-section{flex-direction:column}.user-info{flex-direction:column;gap:var(--space-md);text-align:center}.track{padding:var(--space-sm) var(--space-md)}.track-art{width:40px;height:40px}footer{flex-direction:column;gap:var(--space-sm);text-align:center}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.glitch:hover{animation:glitch .3s ease infinite}