*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0d0d0f;--color-surface:#161618;--color-surface-2:#1e1e21;--color-surface-3:#27272b;--color-border:#2e2e32;--color-border-light:#38383d;--color-text-primary:#f0f0f0;--color-text-secondary:#888;--color-text-muted:#444;--color-accent:#ff4d00;--color-accent-glow:#ff4d0040;--color-accent-subtle:#ff4d0014;--color-vibe-aggressive:#ff2d2d;--color-vibe-party:#c8ff00;--color-vibe-chill:#00d4ff;--color-vibe-melancholic:#a78bfa;--color-vibe-sad:#60a5fa;--color-vibe-energetic:#facc15;--color-vibe-dark:#7c3aed;--color-vibe-euphoric:#f472b6;--color-vibe-romantic:#fb7185;--color-vibe-rebellious:#4ade80;--color-like:#22c55e;--color-pass:#ef4444;--font-display:"Bebas Neue", sans-serif;--font-body:"DM Sans", sans-serif;--font-mono:"Space Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:3rem;--text-hero:clamp(3.5rem, 15vw, 8rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--radius-full:9999px;--shadow-card:0 25px 60px #000000b3, 0 0 0 1px var(--color-border);--shadow-glow:0 0 40px var(--color-accent-glow);--shadow-sm:0 2px 8px #0006;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s cubic-bezier(.16, 1, .3, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1)}[data-theme=light]{--color-bg:#f2f1eb;--color-surface:#fafaf7;--color-surface-2:#eceae3;--color-surface-3:#e2e0d8;--color-border:#d4d2ca;--color-border-light:#c6c4bb;--color-text-primary:#111;--color-text-secondary:#555;--color-text-muted:#999;--color-accent:#e03e00;--color-accent-glow:#e03e0033;--color-accent-subtle:#e03e0014;--color-vibe-aggressive:#dc2626;--color-vibe-party:#84cc16;--color-vibe-chill:#0284c7;--color-vibe-melancholic:#7c3aed;--color-vibe-sad:#2563eb;--color-vibe-energetic:#ca8a04;--color-vibe-dark:#6d28d9;--color-vibe-euphoric:#db2777;--color-vibe-romantic:#e11d48;--color-vibe-rebellious:#16a34a;--color-like:#16a34a;--color-pass:#dc2626;--shadow-card:0 25px 60px #0000001f, 0 0 0 1px var(--color-border);--shadow-glow:0 0 40px var(--color-accent-glow);--shadow-sm:0 2px 8px #00000014}html{-webkit-text-size-adjust:100%;height:100%;font-size:16px}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text-primary);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)' opacity='0.03'/%3E%3C/svg%3E");min-height:100dvh;line-height:1.5;overflow-x:hidden}[data-theme=light] body{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)' opacity='0.015'/%3E%3C/svg%3E")}#root{flex-direction:column;min-height:100dvh;display:flex}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.02em;line-height:1.1}p{font-family:var(--font-body);font-weight:300}button{font-family:var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;outline:none}img{max-width:100%;display:block}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.vibe-badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;border:1px solid;font-weight:700;display:inline-flex}.vibe-badge[data-vibe=aggressive]{color:var(--color-vibe-aggressive);background:#ff2d2d1a}.vibe-badge[data-vibe=party]{color:var(--color-vibe-party);background:#c8ff001a}.vibe-badge[data-vibe=chill]{color:var(--color-vibe-chill);background:#00d4ff1a}.vibe-badge[data-vibe=melancholic]{color:var(--color-vibe-melancholic);background:#a78bfa1a}.vibe-badge[data-vibe=sad]{color:var(--color-vibe-sad);background:#60a5fa1a}.vibe-badge[data-vibe=energetic]{color:var(--color-vibe-energetic);background:#facc151a}.vibe-badge[data-vibe=dark]{color:var(--color-vibe-dark);background:#7c3aed1a}.vibe-badge[data-vibe=euphoric]{color:var(--color-vibe-euphoric);background:#f472b61a}.vibe-badge[data-vibe=romantic]{color:var(--color-vibe-romantic);background:#fb71851a}.vibe-badge[data-vibe=rebellious]{color:var(--color-vibe-rebellious);background:#4ade801a}.screen{padding:var(--space-6) var(--space-4);flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:100dvh;display:flex}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border-light);border-radius:2px}::selection{background:var(--color-accent);color:#fff}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.screen-wrapper{animation:.35s both screen-fade-in}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.theme-toggle-btn{top:var(--space-4);right:var(--space-4);z-index:1000;border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border-light);width:40px;height:40px;color:var(--color-text-primary);cursor:pointer;transition:background var(--transition-base), border-color var(--transition-base), transform var(--transition-spring);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;font-size:1.1rem;display:flex;position:fixed}.theme-toggle-btn:hover,.theme-toggle-btn:focus-visible{border-color:var(--color-accent);transform:scale(1.1)rotate(15deg)}.theme-toggle-btn:active{transform:scale(.95)}.start-screen{text-align:center;gap:0;position:relative;overflow:hidden}.start-bg-orb{top:var(--mouse-y,-20%);left:var(--mouse-x,50%);background:radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);pointer-events:none;will-change:top, left, transform;border-radius:50%;width:min(600px,150vw);height:min(600px,150vw);transition:top .6s cubic-bezier(.2,.8,.2,1),left .6s cubic-bezier(.2,.8,.2,1);animation:4s ease-in-out infinite orb-pulse;position:absolute;transform:translate(-50%,-50%)}@keyframes orb-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}}.start-content{align-items:center;gap:var(--space-6);z-index:1;width:100%;max-width:480px;animation:content-enter .8s var(--transition-slow) both;flex-direction:column;display:flex;position:relative}@keyframes content-enter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.start-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);animation:.6s .1s both fade-in}.start-title{font-family:var(--font-display);font-size:var(--text-hero);color:var(--color-text-primary);line-height:.9;animation:.6s .2s both fade-in}.start-title-accent{color:#0000;-webkit-text-stroke:2px var(--color-accent);text-shadow:0 0 30px var(--color-accent-glow)}.start-description{font-size:var(--text-base);color:var(--color-text-secondary);font-weight:300;line-height:1.6;animation:.6s .3s both fade-in}.start-ripple{background:var(--color-accent);pointer-events:none;z-index:0;opacity:.5;border-radius:50%;width:20px;height:20px;animation:.6s cubic-bezier(.25,1,.5,1) forwards ripple-anim;position:absolute;transform:translate(-50%,-50%)}@keyframes ripple-anim{0%{opacity:.5;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(15)}}.start-vibes-marquee{width:100vw;max-width:100%;margin:var(--space-4) 0;animation:.6s .4s both fade-in;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 15% 85%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 15% 85%,#0000 100%)}.start-vibes-marquee .vibe-badge{padding:2px 10px;font-size:.65rem}.start-vibes-track{will-change:transform;width:max-content;animation:20s linear infinite marquee;display:flex}.start-vibes-marquee:hover .start-vibes-track{animation-play-state:paused}.start-vibes-group{gap:var(--space-3);padding-right:var(--space-3);display:flex}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-33.3333%)}}.start-btn{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-10);background:var(--color-accent);color:#fff;font-family:var(--font-body);font-size:var(--text-lg);border-radius:var(--radius-full);letter-spacing:.02em;transition:transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);box-shadow:0 0 0 0 var(--color-accent-glow);-webkit-tap-highlight-color:transparent;font-weight:600;animation:.6s .5s both fade-in,2.5s ease-in-out 1s infinite btn-glow-pulse;display:inline-flex}@keyframes btn-glow-pulse{0%,to{box-shadow:0 4px 20px var(--color-accent-glow)}50%{box-shadow:0 4px 40px #ff4d0080}}.start-btn:hover,.start-btn:focus-visible{background:var(--color-accent);transform:translateY(-2px)scale(1.02)}.start-btn:active{transform:translateY(0)scale(.98)}.start-btn-arrow{font-size:var(--text-xl);transition:transform var(--transition-base)}.start-btn:hover .start-btn-arrow{transform:translate(4px)}.start-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.1em;animation:.6s .7s both fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width>=640px){.start-title{line-height:.85}.start-description{font-size:var(--text-lg)}}.swipe-screen{gap:var(--space-6);padding:var(--space-6) var(--space-4) var(--space-8);justify-content:space-between}.swipe-screen:before{content:"";pointer-events:none;z-index:0;background:linear-gradient(to right, rgba(239, 68, 68, calc(var(--drag-ratio,0) * .35 * max(0, -1 * sign(var(--drag-offset,0))))), transparent 60%);transition:background 50ms;position:fixed;inset:0}.swipe-screen:after{content:"";pointer-events:none;z-index:0;background:linear-gradient(to left, rgba(34, 197, 94, calc(var(--drag-ratio,0) * .35 * max(0, sign(var(--drag-offset,0))))), transparent 60%);transition:background 50ms;position:fixed;inset:0}.tiebreaker-banner{z-index:1;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;color:var(--color-accent);text-transform:uppercase;animation:2s ease-in-out infinite pulse-banner;position:relative}@keyframes pulse-banner{0%,to{opacity:.7}50%{opacity:1;text-shadow:0 0 8px var(--color-accent)}}.card-stack{z-index:1;flex:1;justify-content:center;align-items:center;width:100%;max-width:360px;display:flex;position:relative}.music-card{border-radius:var(--radius-xl);background:var(--color-surface);width:100%;max-width:340px;box-shadow:var(--shadow-card);-webkit-user-select:none;user-select:none;position:absolute;overflow:hidden}.music-card--next{opacity:.6;z-index:1;pointer-events:none;transform:scale(.95)translateY(12px)}.music-card--active{z-index:2;cursor:grab;will-change:transform;touch-action:pan-y}.music-card--active:active{cursor:grabbing}.music-card.exit-right{animation:.4s cubic-bezier(.25,1,.5,1) forwards exit-right}.music-card.exit-left{animation:.4s cubic-bezier(.25,1,.5,1) forwards exit-left}@keyframes exit-right{to{opacity:0;transform:translate(150%)rotate(25deg)}}@keyframes exit-left{to{opacity:0;transform:translate(-150%)rotate(-25deg)}}.card-cover{aspect-ratio:1;object-fit:cover;pointer-events:none;width:100%;display:block}.card-info{padding:var(--space-4) var(--space-5) var(--space-5);gap:var(--space-2);background:linear-gradient(to bottom, var(--color-surface), var(--color-surface-2));text-align:center;flex-direction:column;align-items:center;display:flex}.card-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-text-primary);letter-spacing:.03em;margin-top:var(--space-1)}.card-artist{font-size:var(--text-base);color:var(--color-text-primary);font-weight:500}.card-album{font-size:var(--text-sm);color:var(--color-text-secondary);font-family:var(--font-mono)}.card-audio{margin-top:var(--space-2);justify-content:center;display:flex}.audio-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface-3);border:1px solid var(--color-border-light);border-radius:var(--radius-full);color:var(--color-text-primary);font-size:var(--text-sm);font-family:var(--font-mono);transition:background var(--transition-fast), border-color var(--transition-fast);-webkit-tap-highlight-color:transparent;display:inline-flex}.audio-btn:hover,.audio-btn:focus-visible{background:var(--color-border);border-color:var(--color-accent)}.audio-btn--playing{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-subtle)}.audio-btn-icon{font-size:var(--text-xs);text-align:center;min-width:12px}.card-overlay{top:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-3xl);letter-spacing:.08em;pointer-events:none;z-index:10;border-style:solid;border-width:3px;transition:opacity 50ms;position:absolute}.card-overlay--like{left:var(--space-4);color:var(--color-like);border-color:var(--color-like);transform:rotate(-15deg)}.card-overlay--pass{right:var(--space-4);color:var(--color-pass);border-color:var(--color-pass);transform:rotate(15deg)}.swipe-actions{z-index:1;gap:var(--space-8);justify-content:center;align-items:center;display:flex;position:relative}.action-btn{width:64px;height:64px;font-size:var(--text-xl);transition:transform var(--transition-spring), box-shadow var(--transition-base);background:var(--color-surface-2);border:1px solid var(--color-border-light);color:var(--color-text-primary);-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;display:flex}.action-btn--pass{color:var(--color-pass);border-color:var(--color-pass)}.action-btn--like{color:var(--color-like);border-color:var(--color-like);width:72px;height:72px;font-size:var(--text-2xl)}.action-btn:hover:not(:disabled),.action-btn:focus-visible{box-shadow:var(--shadow-sm);transform:scale(1.1)}.action-btn:active:not(:disabled){transform:scale(.95)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.swipe-hint{z-index:1;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.1em;position:relative}.keyboard-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.1em;opacity:.6}.swipe-hint-overlay{justify-content:center;align-items:center;gap:var(--space-4);pointer-events:none;z-index:20;animation:.5s .8s both hint-appear,.4s 2.6s forwards hint-fade;display:flex;position:absolute;top:calc(50% + 260px);left:0;right:0}.swipe-hint-arrow{font-size:var(--text-2xl);color:#ffffffe6}.swipe-hint-arrow--left{animation:1.2s ease-in-out 1s infinite nudge-left}.swipe-hint-arrow--right{animation:1.2s ease-in-out 1s infinite nudge-right}.swipe-hint-text{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.2em;text-transform:uppercase;color:#ffffffe6;text-shadow:0 2px 4px #00000080}@keyframes hint-appear{0%{opacity:0}to{opacity:1}}@keyframes hint-fade{to{opacity:0}}@keyframes nudge-left{0%,to{transform:translate(0)}50%{transform:translate(-6px)}}@keyframes nudge-right{0%,to{transform:translate(0)}50%{transform:translate(6px)}}@media (width>=640px){.music-card{max-width:380px}.action-btn{width:72px;height:72px}.action-btn--like{width:80px;height:80px}}.result-screen{padding:var(--space-8) var(--space-4);justify-content:center;position:relative;overflow:hidden}.result-glow{background:radial-gradient(circle, color-mix(in srgb, var(--result-vibe-color) 20%, transparent), transparent 70%);pointer-events:none;border-radius:50%;width:400px;height:400px;animation:1s both result-glow-in;position:absolute;top:-10%;left:50%;transform:translate(-50%)}@keyframes result-glow-in{0%{opacity:0;transform:translate(-50%)scale(.5)}to{opacity:1;transform:translate(-50%)scale(1)}}.result-content{align-items:center;gap:var(--space-6);z-index:1;text-align:center;width:100%;max-width:420px;animation:result-enter .7s var(--transition-slow) both;flex-direction:column;display:flex;position:relative}@keyframes result-enter{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.result-eyebrow{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-secondary)}.result-vibe-reveal{align-items:center;gap:var(--space-2);animation:vibe-pop .5s .3s var(--transition-spring) both;flex-direction:column;display:flex}@keyframes vibe-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.result-emoji{font-size:3rem;line-height:1}.result-vibe-name{font-family:var(--font-display);color:var(--result-vibe-color,var(--color-accent));text-shadow:0 0 40px color-mix(in srgb, var(--result-vibe-color,var(--color-accent)) 40%, transparent);letter-spacing:.05em;font-size:clamp(3.5rem,18vw,7rem);line-height:1}.result-description{font-size:var(--text-base);color:var(--color-text-secondary);max-width:300px;font-weight:300;line-height:1.6}.result-recommendation{gap:var(--space-3);flex-direction:column;width:100%;animation:.5s .5s both fade-up;display:flex}.result-rec-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);text-align:left}.result-track-card{gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);text-align:left;align-items:center;display:flex}.result-track-cover{border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;width:72px;height:72px}.result-track-info{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.result-track-title{font-family:var(--font-display);font-size:var(--text-xl);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.result-track-artist{font-size:var(--text-sm);color:var(--color-text-secondary)}.result-scores{gap:var(--space-3);flex-direction:column;width:100%;animation:.5s .6s both fade-up;display:flex}.score-row{align-items:center;gap:var(--space-3);grid-template-columns:100px 1fr 24px;display:grid}.score-vibe{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-secondary);text-align:right}.score-bar-track{background:var(--color-border);border-radius:var(--radius-full);height:6px;overflow:hidden}.score-bar-fill{border-radius:var(--radius-full);height:100%;transition:width .8s var(--transition-slow);min-width:4px}.score-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);text-align:right}.result-share-btn{padding:var(--space-3) var(--space-8);background:var(--color-accent);border-radius:var(--radius-full);color:#fff;font-family:var(--font-body);font-size:var(--text-base);letter-spacing:.04em;cursor:pointer;transition:transform var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);-webkit-tap-highlight-color:transparent;border:none;font-weight:600;animation:.5s .7s both fade-up}.result-share-btn:hover,.result-share-btn:focus-visible{box-shadow:0 4px 20px var(--color-accent-glow);background:#ff6520;transform:translateY(-2px)}.result-share-btn:active{transform:scale(.97)}.result-restart-btn{padding:var(--space-3) var(--space-8);border:1px solid var(--color-border-light);border-radius:var(--radius-full);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--text-base);letter-spacing:.04em;transition:border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);-webkit-tap-highlight-color:transparent;background:0 0;font-weight:500;animation:.5s .8s both fade-up}.result-restart-btn:hover,.result-restart-btn:focus-visible{border-color:var(--color-accent);background:var(--color-accent-subtle);transform:translateY(-1px)}.result-calculating{align-items:center;gap:var(--space-4);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:var(--text-sm);flex-direction:column;display:flex}.result-spinner{border:2px solid var(--color-border-light);border-top-color:var(--color-accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}