*{box-sizing:border-box}html,body,#root{height:100%}body{color:#f5f5f5;background:#121212;margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button,input{font-family:inherit}a{color:inherit}.app-shell{justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex}.screen{text-align:center;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;display:flex}.start-screen,.result-screen{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;padding:36px 28px;box-shadow:0 20px 60px #00000073}h1{margin:0;font-size:32px}.subtitle{color:#b3b3b3;margin:0;font-size:15px;line-height:1.5}.loading-note{margin-top:-8px;font-size:13px}.error{color:#f15e6c;font-size:14px}.divider{background:#2a2a2a;width:100%;height:1px;margin:4px 0}.auth-block{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.logo-badge{background:linear-gradient(135deg,#1db954,#14833b);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;display:flex;box-shadow:0 8px 24px #1db95459}.logo-badge .eq span{background:#05140a}.primary-button,.secondary-button{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 20px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .1s,background .15s;display:inline-flex}.btn-spinner{opacity:.9;border:2px solid;border-top-color:#0000;border-radius:50%;flex-shrink:0;width:15px;height:15px;animation:.7s linear infinite spin}.primary-button{color:#05140a;background:#1db954}.primary-button:hover:not(:disabled){background:#1ed760;transform:scale(1.02)}.secondary-button{color:#f5f5f5;background:0 0;border:1px solid #535353}.secondary-button:hover:not(:disabled){border-color:#f5f5f5;transform:scale(1.02)}.primary-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.link-button{color:#b3b3b3;cursor:pointer;background:0 0;border:none;font-size:13px;text-decoration:underline}.daily-card{background:linear-gradient(135deg,#1db95424,#1db9540a);border:1px solid #1db95459;border-radius:16px;flex-direction:column;align-items:center;gap:10px;width:100%;padding:18px 16px;display:flex}.daily-card-heading{color:#b3b3b3;text-align:center;align-items:center;gap:8px;font-size:13px;display:flex}.daily-badge{color:#05140a;letter-spacing:.04em;background:#1db954;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}.daily-done{color:#1ed760;margin:0;font-size:16px;font-weight:700}.streak-badge{color:#e0b23c;margin:-4px 0 0;font-size:15px;font-weight:700}.duration-badge{color:#b3b3b3;margin:-8px 0 0;font-size:13px}.challenge-card{background:linear-gradient(135deg,#e0b23c29,#e0b23c0d);border:1px solid #e0b23c66;border-radius:16px;flex-direction:column;align-items:center;gap:8px;width:100%;padding:18px 16px;display:flex}.challenge-badge{color:#05140a;letter-spacing:.04em;background:#e0b23c;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}.challenge-score{color:#f5f5f5;margin:0;font-size:16px;font-weight:600}.challenge-context{color:#b3b3b3;text-align:center;margin:-4px 0 4px;font-size:13px}.challenge-result{background:#e0b23c14;border:1px solid #e0b23c4d;border-radius:14px;flex-direction:column;align-items:center;gap:4px;width:100%;padding:14px 16px;display:flex}.challenge-result-line{color:#f5f5f5;margin:0;font-size:14px}.challenge-result-verdict{color:#e0b23c;margin:0;font-size:15px;font-weight:700}.share-block{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.share-grid{flex-wrap:wrap;justify-content:center;gap:6px;max-width:260px;display:flex}.share-cell{border-radius:5px;width:22px;height:22px}.share-cell.correct{background:#1db954}.share-cell.incorrect{background:#f15e6c}.share-actions{gap:10px;width:100%;display:flex}.share-actions .secondary-button{flex:1}.field-group{text-align:left;flex-direction:column;gap:6px;width:100%;display:flex}.field-label{color:#b3b3b3;text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:700}.language-select{color:#f5f5f5;cursor:pointer;appearance:none;background:#181818 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b3b3b3'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") right 12px center/16px no-repeat;border:1px solid #2a2a2a;border-radius:10px;width:100%;padding:12px 14px;font-size:15px;font-weight:600;transition:border-color .15s}.language-select:hover:not(:disabled){border-color:#535353}.language-select:focus{border-color:#1db954;outline:none}.language-select:disabled{cursor:not-allowed;opacity:.6}.customize-toggle{color:#f5f5f5;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:0 -10px;padding:10px;font-size:14px;font-weight:700;animation:2.2s ease-in-out customizeAttention;display:flex}.customize-toggle:disabled{cursor:not-allowed;opacity:.6}@keyframes customizeAttention{0%,to{background:0 0}20%,55%{background:#1db95424}}@media (prefers-reduced-motion:reduce){.customize-toggle{animation:none}}.customize-summary{text-overflow:ellipsis;white-space:nowrap;color:#b3b3b3;text-align:right;flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden}.customize-chevron{color:#b3b3b3;flex-shrink:0;transition:transform .15s}.customize-chevron.open{transform:rotate(180deg)}.customize-panel{flex-direction:column;gap:16px;width:100%;margin-top:-6px;animation:.15s both customizeIn;display:flex}@keyframes customizeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mode-toggle{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;gap:8px;width:100%;padding:4px;display:flex}.mode-option{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 8px;font-size:14px;font-weight:700;transition:background .15s,color .15s;display:flex}.mode-option:hover:not(:disabled):not(.active){background:#ffffff0d}.mode-option.active{color:#05140a;background:#1db954}.mode-option-sub{color:inherit;opacity:.75;font-size:11px;font-weight:500}.mode-option:disabled{cursor:not-allowed;opacity:.6}.mode-tag{color:#05140a;text-transform:uppercase;background:#e0b23c;border-radius:999px;margin-right:6px;padding:2px 6px;font-size:11px;font-weight:800}.quiz-screen{width:100%;position:relative}.quiz-backdrop{z-index:0;filter:blur(50px)brightness(.35)saturate(1.3);background-position:50%;background-size:cover;animation:.8s both backdropIn;position:fixed;inset:0;transform:scale(1.2)}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}.quiz-content{z-index:1;flex-direction:column;align-items:center;gap:16px;width:100%;display:flex;position:relative}.progress-track{background:#ffffff1a;border-radius:999px;width:100%;height:6px;overflow:hidden}.progress-fill{background:#1db954;border-radius:999px;height:100%;transition:width .4s}.progress{color:#b3b3b3;justify-content:space-between;align-items:center;width:100%;font-size:14px;display:flex}.score-pill{color:#f5f5f5;background:#2a2a2a;border-radius:999px;padding:4px 12px;font-weight:600}.question-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;align-items:center;gap:16px;width:100%;padding:24px 20px;animation:.35s both cardIn;display:flex;box-shadow:0 16px 48px #0006}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.audio-clip{flex-direction:column;align-items:center;gap:12px;display:flex}.album-frame{background:#282828;border-radius:16px;justify-content:center;align-items:center;width:110px;height:110px;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000080}.album-frame img{object-fit:cover;filter:blur(18px)saturate(.8);width:100%;height:100%;transition:filter .6s;transform:scale(1.15)}.album-frame.revealed img{filter:blur()saturate()}.album-placeholder{color:#535353;font-size:32px}.play-wrap{justify-content:center;align-items:center;width:96px;height:96px;display:flex;position:relative}.ring{pointer-events:none;width:96px;height:96px;position:absolute;inset:0;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#ffffff1a;stroke-width:4px}.ring-fill{fill:none;stroke:#1db954;stroke-width:4px;stroke-linecap:round}.play-button{color:#05140a;cursor:pointer;background:#1db954;border:none;border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;transition:transform .15s;display:flex}.play-button:hover{transform:scale(1.05)}.play-button.playing{box-shadow:0 0 #1db95480}.spinner{border:3px solid #05140a4d;border-top-color:#05140a;border-radius:50%;width:22px;height:22px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.audio-hint{color:#b3b3b3;align-items:center;gap:8px;font-size:13px;display:inline-flex}.eq{align-items:flex-end;gap:2px;height:14px;display:inline-flex}.eq span{background:#1db954;border-radius:1px;width:3px;animation:.9s ease-in-out infinite eqBounce}.eq span:first-child{animation-delay:0s}.eq span:nth-child(2){animation-delay:.2s}.eq span:nth-child(3){animation-delay:.4s}@keyframes eqBounce{0%,to{height:4px}50%{height:14px}}.options{flex-direction:column;gap:10px;width:100%;display:flex}.option{color:#f5f5f5;cursor:pointer;text-align:left;background:#181818;border:1px solid #2a2a2a;border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;transition:border-color .15s,background .15s,transform .25s cubic-bezier(.34,1.56,.64,1);display:flex}.option:active:not(:disabled){transition:transform 80ms;transform:scale(.96)}.option:hover:not(:disabled){background:#202020;border-color:#535353;transform:scale(1.01)}.option-text{flex-direction:column;align-items:flex-start;display:flex}.option-title{font-size:15px;font-weight:600}.option-artist{color:#b3b3b3;font-size:13px}.option-icon{flex-shrink:0;animation:.25s both popIn}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.option.correct{color:#1ed760;background:#1db95426;border-color:#1db954}.option.correct .option-artist{color:#8fe0ac}.option.incorrect{color:#f15e6c;background:#f15e6c26;border-color:#f15e6c}.option.incorrect .option-artist{color:#f5a3ab}.option.disabled{opacity:.6}.confetti-layer{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;border-radius:2px;width:8px;height:14px;animation-name:confettiFall;animation-timing-function:ease-in;animation-fill-mode:forwards;position:absolute;top:-12px}@keyframes confettiFall{0%{opacity:1;transform:translate(0)rotate(0)}to{transform:translate(var(--drift), 100vh) rotate(var(--rotate));opacity:0}}@media (prefers-reduced-motion:reduce){.confetti-layer{display:none}}.score-ring-wrap{justify-content:center;align-items:center;width:140px;height:140px;display:flex;position:relative}.score-ring{pointer-events:none;width:140px;height:140px;position:absolute;inset:0;transform:rotate(-90deg)}.score-ring-track{fill:none;stroke:#ffffff1a;stroke-width:8px}.score-ring-fill{fill:none;stroke-width:8px;stroke-linecap:round;transition:stroke-dashoffset 1s}.score-ring-fill.tier-perfect,.score-ring-fill.tier-great{stroke:#1db954}.score-ring-fill.tier-ok{stroke:#e0b23c}.score-ring-fill.tier-low{stroke:#f15e6c}.score-ring-label{flex-direction:column;align-items:center;display:flex}.score-display{font-size:40px;font-weight:800;line-height:1}.score-total{color:#b3b3b3;font-size:15px}