*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{min-height:100svh;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{background:none;border:none;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}ul,ol{list-style:none;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--font-display: "Italiana", Georgia, serif;--font-serif: "IBM Plex Serif", Georgia, serif;--font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--fs-display: 3rem;--fs-h1: 1.75rem;--fs-h2: 1.375rem;--fs-h3: 1.125rem;--fs-body: 1rem;--fs-sm: .875rem;--fs-label: .9375rem;--fs-caption: .75rem;--lh-tight: 1.1;--lh-snug: 1.3;--lh-normal: 1.5;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--radius-pill: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);--shadow-md: 0 6px 20px rgba(0, 0, 0, .12);--dur-fast: .12s;--dur: .2s;--ease: cubic-bezier(.2, 0, 0, 1);--app-max: 645px;--content-max: 640px;--content-max-wide: 1120px;--tap: 48px}@media(min-width:646px){:root{--fs-display: 3.5rem;--fs-h1: 2.25rem;--fs-h2: 1.625rem;--app-max: var(--content-max-wide)}}:root,[data-theme=light]{color-scheme:light;--color-bg: #f5eddc;--color-surface: #fbf6ea;--color-surface-2: #efe6d2;--color-text: #0c2b29;--color-text-muted: #51635f;--color-border: rgba(12, 43, 41, .12);--color-accent: #066764;--color-accent-hover: #05524f;--color-accent-active: #033f3d;--color-on-accent: #f5eddc;--color-gold: #8a7647;--color-correct: #1e8e5a;--color-wrong: #c0392b;--color-overlay: rgba(0, 0, 0, .3)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--color-bg: #0c2b29;--color-surface: #123a36;--color-surface-2: #18443f;--color-text: #f2ead7;--color-text-muted: #9db0aa;--color-border: rgba(242, 234, 215, .12);--color-accent: #066764;--color-accent-hover: #07827c;--color-accent-active: #055450;--color-on-accent: #f2ead7;--color-gold: #cbb68b;--color-correct: #2bb673;--color-wrong: #e05a4a;--color-overlay: rgba(0, 0, 0, .35)}}[data-theme=dark]{color-scheme:dark;--color-bg: #0c2b29;--color-surface: #123a36;--color-surface-2: #18443f;--color-text: #f2ead7;--color-text-muted: #9db0aa;--color-border: rgba(242, 234, 215, .12);--color-accent: #066764;--color-accent-hover: #07827c;--color-accent-active: #055450;--color-on-accent: #f2ead7;--color-gold: #cbb68b;--color-correct: #2bb673;--color-wrong: #e05a4a;--color-overlay: rgba(0, 0, 0, .35)}.text-display{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:var(--fw-regular);letter-spacing:.01em}.text-h1{font-family:var(--font-serif);font-size:var(--fs-h1);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.text-h2{font-family:var(--font-serif);font-size:var(--fs-h2);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.text-h3{font-family:var(--font-serif);font-size:var(--fs-h3);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.text-body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);font-weight:var(--fw-regular)}.text-body-sm{font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-normal);font-weight:var(--fw-regular)}.text-label{font-family:var(--font-sans);font-size:var(--fs-label);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.text-caption{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-snug);font-weight:var(--fw-medium);letter-spacing:.02em}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.text-gold{color:var(--color-gold)}.text-center{text-align:center}.text-uppercase{text-transform:uppercase}body{font-family:var(--font-sans);font-size:var(--fs-body);background:var(--color-bg);color:var(--color-text);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}#root{min-height:100svh}#root{min-height:100svh;display:flex;flex-direction:column}.app{width:100%;max-width:var(--app-max);margin-inline:auto;padding:var(--space-5) var(--space-4);padding-top:calc(var(--space-16) + var(--space-6) + env(safe-area-inset-top));flex:1;min-height:0;display:flex;flex-direction:column}@media(min-width:646px){.app{padding:var(--space-8)}}body:has(.page.home){overflow:hidden}.page{display:flex;flex-direction:column;gap:var(--space-5);min-height:calc(100svh - var(--space-10))}.page--narrow{width:100%;max-width:var(--content-max);margin-inline:auto}.page--center{align-items:center;justify-content:center;text-align:center;gap:var(--space-4)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap);padding-inline:var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:1;white-space:nowrap;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur) var(--ease)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn__icon{display:inline-flex;width:1.25em;height:1.25em}.btn__icon svg{width:100%;height:100%}.btn--primary{background:var(--color-accent);color:var(--color-on-accent)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn--primary:active:not(:disabled){background:var(--color-accent-active)}.btn--secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.btn--secondary:hover:not(:disabled){background:var(--color-surface-2)}.btn--ghost{background:transparent;color:var(--color-text)}.btn--ghost:hover:not(:disabled){background:var(--color-surface)}.btn--sm{min-height:40px;padding-inline:var(--space-4);font-size:var(--fs-sm)}.btn--lg{min-height:56px;padding-inline:var(--space-6);font-size:var(--fs-body)}.btn--block{width:100%}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}.icon-btn:hover:not(:disabled){background:var(--color-surface-2)}.icon-btn:active:not(:disabled){transform:translateY(1px)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn--ghost{background:transparent;border-color:transparent}.icon-btn--ghost:hover:not(:disabled){background:var(--color-surface)}.icon-btn svg{width:24px;height:24px}.genre-card{position:relative;display:flex;align-items:flex-end;width:100%;min-height:120px;padding:var(--space-4);border-radius:var(--radius-md);overflow:hidden;text-align:left;color:#fff;background:linear-gradient(150deg,var(--card-color, var(--color-accent)),color-mix(in srgb,var(--card-color, var(--color-accent)) 55%,#000));transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.genre-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.genre-card:active{transform:translateY(0)}.genre-card__photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.genre-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-overlay)}.genre-card__title{position:relative;color:#fff}.genre-card--featured{min-height:168px}.home__hero{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4)}.genre-wheel{display:block;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;pointer-events:none}.home__hero{position:relative;z-index:1}@media(min-width:646px){.home__hero{max-width:40%}}@media(max-width:645px){.home__hero{text-align:center;align-items:center}}.genre-wheel__disc{position:absolute;width:200vh;height:200vh;left:calc(66% - 100vh);top:calc(125% - 100vh);will-change:transform}@media(max-width:645px){.genre-wheel{--fan-size: min(103.7vw, 120vh);--fan-anchor: env(safe-area-inset-bottom, 0px)}.genre-wheel__disc{width:var(--fan-size);height:var(--fan-size);left:calc(50% - var(--fan-size) / 2);top:calc(100% - var(--fan-anchor) - var(--fan-size) / 2)}}.genre-wheel__disc svg{display:block}.genre-wheel__wedge{cursor:pointer;pointer-events:auto;touch-action:none}.genre-wheel__card{translate:0 0;transition:translate .45s var(--ease)}.genre-wheel__wedge:hover .genre-wheel__card{translate:var(--pop-x) var(--pop-y)}.genre-wheel__shade{fill:#000;opacity:.3;transition:opacity var(--dur) var(--ease);pointer-events:none}.genre-wheel__wedge:hover .genre-wheel__shade{opacity:0}.genre-wheel__label{font-family:var(--font-display);font-size:34px;letter-spacing:.05em;fill:#fff;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 2px 10px rgba(0,0,0,.55))}.genre-wheel__hub-content{position:absolute;left:calc(66% - 12vh);top:79%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;pointer-events:auto;z-index:1}.home__random-btn{display:none;border-radius:var(--radius-pill)}@media(max-width:645px){.genre-wheel__hub-content{display:none}.home__hero{margin-top:clamp(40px,14vh,170px)}.home__random-btn{display:inline-flex;margin-top:clamp(28px,10vh,120px)}.genre-wheel__label{font-size:64px}}.top-nav{display:none}@media(min-width:646px){.top-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;max-width:var(--content-max-wide);margin-inline:auto;padding:var(--space-5) var(--space-8) 0;position:relative;z-index:2}}.top-nav__brand{font-family:var(--font-display);font-size:1.5rem;color:var(--color-text);text-decoration:none}.top-nav__items{display:flex;align-items:center;gap:var(--space-2)}.top-nav__item{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text-muted)}.top-nav__item:disabled{opacity:.7}.soon-badge{font-size:.625rem;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--color-gold)}.bottom-nav{position:fixed;left:50%;transform:translate(-50%);top:calc(var(--space-2) + env(safe-area-inset-top));z-index:10;display:flex;gap:var(--space-1);padding:var(--space-1);width:calc(100% - var(--space-4));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill)}.bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;min-height:56px;justify-content:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);color:var(--color-text-muted);text-decoration:none;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}.bottom-nav__item svg{width:24px;height:24px}.bottom-nav__item .text-caption{font-size:.8125rem}.bottom-nav__item .text-caption{white-space:nowrap}.bottom-nav__item.is-active{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,transparent)}.bottom-nav__item:disabled{opacity:.55}@media(min-width:646px){.bottom-nav{display:none}}.quiz-page__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.quiz-page__bar-spacer{width:var(--tap)}.quiz-page__title{font-family:var(--font-display);font-size:2.25rem;line-height:var(--lh-tight);letter-spacing:.01em;color:var(--color-text)}@media(max-width:645px){.quiz-page__title{font-size:1.75rem}.quiz-page__bar .icon-btn{width:40px;height:40px;min-width:40px}.quiz-page__bar-spacer{width:40px}}.quiz-page{flex:1;min-height:0}.quiz-screen{display:flex;flex-direction:column;gap:var(--space-5);flex:1}@media(max-width:645px){.quiz-page,.quiz-screen{gap:var(--space-3)}.answer-card__name{padding:0 var(--space-1) var(--space-1)}.clip-player{margin:0}.quiz-score{margin-top:var(--space-1)}.quiz-score__value{font-size:3rem}}.quiz-hud{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-muted)}.quiz-progress{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--color-surface-2);overflow:hidden}.quiz-progress__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-accent),var(--color-gold));transition:width .6s var(--ease)}.quiz-score{margin-top:var(--space-2);display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.quiz-score__value{font-family:var(--font-display);font-size:3.5rem;line-height:var(--lh-tight);color:var(--color-text)}.clip-player{display:flex;justify-content:center;margin:var(--space-2) 0}.clip-player__deck{display:flex;align-items:center;justify-content:center;gap:var(--space-4);width:100%}.clip-player__deck-side{flex:1;display:flex;align-items:center;gap:var(--space-3)}.clip-player__deck-side--left{justify-content:flex-end}.clip-player__deck-side--right{justify-content:flex-start}@media(max-width:645px){.clip-player__deck{gap:var(--space-2)}.clip-player__deck-side{gap:var(--space-1)}.clip-player__deck .icon-btn{width:40px;height:40px;min-width:40px}}.clip-player__satellite{border-radius:50%}.clip-player__heart.is-loved{color:var(--color-wrong)}.clip-player__heart.is-loved svg{fill:currentColor}.vinyl{position:relative;flex-shrink:0;width:168px;height:168px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}@media(max-width:645px){.vinyl{width:96px;height:96px}.vinyl__cap svg{width:18px;height:18px}.vinyl__secs{font-size:.625rem}}.vinyl__ring{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.vinyl__ring-track{fill:none;stroke:var(--color-surface-2);stroke-width:5}.vinyl__ring-fill{fill:none;stroke:url(#ring-grad);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .15s linear}.vinyl__disc{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;background:conic-gradient(rgba(255,255,255,.06) 0deg,transparent 70deg,rgba(255,255,255,.05) 160deg,transparent 250deg,rgba(255,255,255,.06) 360deg),repeating-radial-gradient(circle at 50%,#17191a 0,#17191a 2.5px,#22262a 2.5px,#22262a 4px);box-shadow:inset 0 0 0 1px #ffffff0d;animation:vinyl-spin 2.2s linear infinite;animation-play-state:paused}.vinyl.is-playing .vinyl__disc{animation-play-state:running}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.vinyl__cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44%;height:44%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#fff;box-shadow:0 0 0 1px #0000002e;transition:transform var(--dur-fast) var(--ease)}.vinyl__cap svg{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.vinyl__secs{font-family:var(--font-sans);font-size:.75rem;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35)}.vinyl:hover .vinyl__cap{transform:translate(-50%,-50%) scale(1.06)}.vinyl:active .vinyl__cap{transform:translate(-50%,-50%) scale(.98)}.clip-player__volume{position:relative}.volume-pop{position:absolute;bottom:calc(100% + var(--space-2));left:50%;transform:translate(-50%);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease)}.clip-player__volume.is-open .volume-pop{opacity:1;visibility:visible;pointer-events:auto}.volume-slider{display:block;width:120px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--radius-pill);background:var(--color-surface-2);accent-color:var(--color-accent);cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:none}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:none}.expand-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;overflow:hidden}.expand-overlay__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.quiz-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1}.quiz-bg__img{width:100%;height:100%;object-fit:cover}.quiz-bg__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--color-bg) 88%,transparent)}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}@media(min-width:646px){.answer-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}}.answer-card{display:flex;flex-direction:column;width:100%;padding:var(--space-2);gap:var(--space-2);border-radius:var(--radius-md);border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-medium);text-align:center;cursor:pointer;transition:border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur) var(--ease),background var(--dur) var(--ease)}.answer-card__photo{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:calc(var(--radius-md) - 4px);background:var(--color-surface-2);display:block}.answer-card__name{padding:var(--space-1) var(--space-1) var(--space-2);line-height:var(--lh-snug)}.answer-card:hover:not(:disabled){border-color:var(--color-accent);transform:translateY(-2px)}.answer-card:active:not(:disabled){transform:translateY(0)}.answer-card.is-correct{border-color:var(--color-correct);background:color-mix(in srgb,var(--color-correct) 14%,var(--color-surface))}.answer-card.is-wrong{border-color:var(--color-wrong);background:color-mix(in srgb,var(--color-wrong) 14%,var(--color-surface))}.answer-card.is-muted{opacity:.45}.answer-card.is-removed{opacity:.18;filter:grayscale(1);pointer-events:none}.fifty-btn{padding:var(--space-2) var(--space-4);white-space:nowrap;border-radius:var(--radius-pill);border:1.5px solid var(--color-accent);background:transparent;color:var(--color-accent);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.06em;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease)}.fifty-btn:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-on-accent)}.fifty-btn:disabled{opacity:.35;cursor:default}@media(max-width:645px){.fifty-btn{padding:var(--space-2);font-size:.8125rem;letter-spacing:.02em}}.reveal-title{text-align:center;color:var(--color-text-muted)}.quiz-next{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.results{align-items:center;text-align:center}.results__score{font-family:var(--font-display);font-size:var(--fs-display);color:var(--color-accent);line-height:1}.recap{display:flex;flex-direction:column;gap:var(--space-2);width:100%;text-align:left}.recap li{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);justify-content:space-between;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface);border-left:3px solid var(--color-border)}.recap li.is-correct{border-left-color:var(--color-correct)}.recap li.is-wrong{border-left-color:var(--color-wrong)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0006}.modal{width:100%;max-width:400px;max-height:calc(100svh - var(--space-8));overflow-y:auto;padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg, 16px);box-shadow:var(--shadow-md)}.auth-modal{display:flex;flex-direction:column;gap:var(--space-4)}.auth-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.auth-modal__divider{display:flex;align-items:center;gap:var(--space-3);text-align:center}.auth-modal__divider:before,.auth-modal__divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.auth-modal__form{display:flex;flex-direction:column;gap:var(--space-3)}.auth-modal__error{color:var(--color-wrong)}.auth-modal__switch{background:none;border:none;color:var(--color-accent);cursor:pointer;padding:0;text-align:center}.text-input{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--fs-body)}.text-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.profile-menu{position:relative}.profile-menu__chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:background var(--dur) var(--ease)}.profile-menu__chip:hover{background:var(--color-surface-2)}.profile-menu__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.profile-menu__avatar--initial{display:inline-flex;align-items:center;justify-content:center;background:var(--color-accent);color:var(--color-on-accent);font-weight:var(--fw-semibold)}.profile-menu__pop{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:30;min-width:max-content;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.profile-menu__signout{align-self:flex-start;background:none;border:none;padding:0;color:var(--color-wrong);cursor:pointer}.fav-page{gap:var(--space-6)}.fav-page__deck{display:flex;flex-direction:column;align-items:center;align-self:center}.fav-page__now{margin-top:var(--space-3);text-align:center}.fav-page__now a{color:var(--color-accent)}.fav-page__empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-top:var(--space-10);text-align:center}.fav-tracks{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0 0 var(--space-8);list-style:none}.fav-track{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.fav-track:hover{background:var(--color-surface-2)}.fav-track.is-active{border-color:var(--color-accent)}.fav-track__main{display:flex;flex:1;align-items:center;gap:var(--space-3);min-width:0;padding:0;background:none;border:none;text-align:left;color:inherit;cursor:pointer}.fav-track__main:disabled{opacity:.5;cursor:default}.fav-track__coverwrap{position:relative;flex-shrink:0;width:56px;height:56px}.fav-track__cover{width:100%;height:100%;border-radius:var(--radius-md);object-fit:cover}.fav-track__playmark{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--color-overlay);color:#fff;opacity:0;transition:opacity var(--dur) var(--ease)}.fav-track__playmark svg{width:22px;height:22px}.fav-track__main:hover:not(:disabled) .fav-track__playmark,.fav-track.is-active .fav-track__playmark{opacity:1}.fav-track__meta{display:flex;flex-direction:column;min-width:0}.fav-track__meta>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fav-track__heart{border-radius:50%;color:var(--color-wrong)}.fav-track__heart svg{fill:currentColor}.profile-menu__item{display:flex;align-items:center;gap:var(--space-2);padding:0;background:none;border:none;color:var(--color-text);cursor:pointer;transition:color var(--dur) var(--ease)}.profile-menu__item:hover{color:var(--color-accent)}.profile-menu__item svg{width:18px;height:18px}@media(max-width:645px){.fav-track__coverwrap{width:48px;height:48px}.fav-tracks{padding-bottom:var(--space-6)}}.bottom-nav__profile{position:relative;display:flex;flex:1;min-width:0}.bottom-nav__profile .bottom-nav__item{width:100%}.bottom-nav__menu{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:30;min-width:max-content;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.bottom-nav__menu .profile-menu__item,.bottom-nav__menu .profile-menu__signout{font-size:var(--fs-body);min-height:var(--tap);display:flex;align-items:center}.bottom-nav__menu .profile-menu__item svg{width:22px;height:22px}.bottom-nav__avatar-ring{display:flex;padding:2px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-gold))}.bottom-nav__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--color-surface)}.bands-page{gap:var(--space-4)}.bands-page__hint{margin:0}.bands-page__genres{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-1);-webkit-overflow-scrolling:touch;scrollbar-width:none}.bands-page__genres::-webkit-scrollbar{display:none}.bands-page__genre{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-text);font-size:var(--fs-sm);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}.bands-page__genre img{width:28px;height:28px;border-radius:50%;object-fit:cover}.bands-page__genre.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.bands-page__genre-count{min-width:20px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--color-gold);color:var(--color-bg);font-size:var(--fs-caption);text-align:center}.bands-page__search{display:flex;align-items:center;gap:var(--space-2)}.bands-page__search .text-input{flex:1}.bands-page__status{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:24px}.bands-page__clear{background:none;border:none;padding:0;color:var(--color-accent);cursor:pointer;font-size:var(--fs-sm)}.bands-page__clear:hover{text-decoration:underline}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-4) var(--space-2);margin:0;padding:0 0 var(--space-8);list-style:none}.artist-chip{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;padding:0;background:none;border:none;color:var(--color-text-muted);cursor:pointer}.artist-chip__ring{display:flex;padding:3px;border-radius:50%;background:transparent;transition:background var(--dur) var(--ease)}.artist-chip.is-picked .artist-chip__ring{background:linear-gradient(135deg,var(--color-accent),var(--color-gold))}.artist-chip__photo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--color-bg);filter:grayscale(.85);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}.artist-chip__photo--empty{display:flex;align-items:center;justify-content:center;background:var(--color-surface-2);font-family:var(--font-display);font-size:var(--fs-h2);color:var(--color-text)}.artist-chip:hover .artist-chip__photo{filter:grayscale(.3);transform:scale(1.04)}.artist-chip.is-picked{color:var(--color-text)}.artist-chip.is-picked .artist-chip__photo{filter:none}.artist-chip__name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bands-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.bands-banner p{margin:0}.bands-banner a{color:var(--color-accent)}.picked-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.picked-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1);padding-right:var(--space-1);background:var(--color-accent);color:var(--color-on-accent);border-radius:var(--radius-pill);font-size:var(--fs-sm)}.picked-chip__photo{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.picked-chip__photo--empty{display:flex;align-items:center;justify-content:center;background:var(--color-accent-active);font-family:var(--font-display)}.picked-chip__name{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picked-chip__remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:#00000026;border:none;border-radius:50%;color:inherit;cursor:pointer;transition:background var(--dur) var(--ease)}.picked-chip__remove:hover{background:#0000004d}.picked-chip__remove svg{width:14px;height:14px}