*{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;width:100%;padding:14px 20px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .1s,background .15s;display:inline-flex}.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}.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 .1s;display:flex}.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}.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}