body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg:#f4f4f8;--card:#fff;--text:#333;--muted:#666;--brand:#007bff;--brand-600:#0056b3;--success-bg:#d4edda;--warn-bg:#fff3cd;--error-bg:#f8d7da;--border:#e5e7eb;--shadow:0 4px 12px #00000014;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--font-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--card:#171923;--text:#e5e7eb;--muted:#a1a1aa;--brand:#4ea8ff;--brand-600:#2e7bd6;--success-bg:#13301c;--warn-bg:#3a2f18;--error-bg:#3a1619;--border:#262a35;--shadow:0 6px 18px #00000059}}*{box-sizing:border-box}body,html{height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f4f4f8;background:var(--bg);color:#333;color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;font-family:var(--font-sans);font-size:clamp(16px,1.2vw,18px);line-height:1.45}img{display:block;max-width:100%}.visually-hidden{clip:rect(0,0,1px,1px);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;white-space:nowrap;width:1px}.App{margin:0 auto;max-width:860px;padding:32px 20px 48px}.App,.quiz-card{text-align:center}.quiz-card{background:#fff;background:var(--card);border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius-md);box-shadow:0 4px 12px #00000014;box-shadow:var(--shadow);margin-top:28px;padding:28px}.cover{aspect-ratio:1/1;border-radius:6px;border-radius:var(--radius-sm);display:block;height:auto;margin:0 auto 16px;max-height:40vh;max-width:320px;object-fit:cover;width:100%}@media (max-width:600px){.cover{max-height:35vh;max-width:85%}}h1{font-size:clamp(24px,3.5vw,34px);letter-spacing:.2px;margin:0}.song-title{color:#333;color:var(--text);font-size:clamp(18px,2.4vw,20px);font-weight:600;margin:16px 0 8px}.year-thumb{color:#007bff;color:var(--brand);font-size:clamp(16px,2.2vw,18px);font-weight:700;margin-top:10px}button{background-color:#007bff;background-color:var(--brand);border:1px solid #0000;border-radius:6px;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:16px;margin:12px 6px 0;padding:10px 20px;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}button:hover{background-color:#0056b3;background-color:var(--brand-600)}button:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;filter:grayscale(.2);opacity:.65}:focus-visible{border-radius:6px;outline:2px solid color-mix(in srgb,#007bff 65%,#fff);outline:2px solid color-mix(in srgb,var(--brand) 65%,#fff);outline-offset:2px}.range-shell{--thumb:26px;margin-top:10px;position:relative;width:100%}.range-shell input[type=range]{appearance:none;background:#d3d3d3;border-radius:4px;height:8px;margin:0 calc(var(--thumb)/2);outline:none;position:relative;touch-action:pan-y;width:calc(100% - var(--thumb));z-index:2}.range-shell input[type=range]::-webkit-slider-runnable-track{background:#d3d3d3;border-radius:4px;height:8px}.range-shell input[type=range]::-webkit-slider-thumb{appearance:none;background:#007bff;background:var(--brand);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #00000040;cursor:pointer;height:var(--thumb);margin-top:calc((8px - var(--thumb))/2);position:relative;width:var(--thumb);z-index:3}.range-shell input[type=range]::-moz-range-thumb{background:#007bff;background:var(--brand);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #00000040;cursor:pointer;height:var(--thumb);width:var(--thumb)}.range-shell input[type=range]::-moz-range-track{background:#d3d3d3;border-radius:4px;height:8px}.range-track-overlay{background:repeating-linear-gradient(90deg,#0000 0,#0000 calc(1.92308% - 1px),#0000000f calc(1.92308% - 1px),#0000000f 1.92308%);border-radius:4px;height:8px;left:calc(var(--thumb)/2);mix-blend-mode:multiply;pointer-events:none;position:absolute;right:calc(var(--thumb)/2);top:0;z-index:1}.year-labels{font-feature-settings:"tnum";color:#555;display:flex;font-size:11px;font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:6px;padding:0 calc(var(--thumb)/2);pointer-events:none;-webkit-user-select:none;user-select:none}.year-label{color:#444;flex:0 0 auto;font-weight:600;text-align:center;white-space:nowrap;width:1px}.year-label:last-child{font-weight:500;opacity:.85}@media (max-width:520px){.range-shell{--thumb:30px}}.controls{background:linear-gradient(180deg,color-mix(in srgb,#fff 94%,#0000),#fff);background:linear-gradient(to bottom,color-mix(in srgb,var(--card) 94%,#0000),var(--card));border-top:1px solid #e5e7eb;border-top:1px solid var(--border);bottom:0;margin-top:8px;padding-bottom:8px;position:sticky;z-index:5}.answer-feedback{background:color-mix(in srgb,#007bff 14%,#fff);background:color-mix(in srgb,var(--brand) 14%,var(--card));border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;border-radius:var(--radius-sm);color:#333;color:var(--text);display:inline-block;margin-top:14px;padding:10px 12px}.results-container{margin-top:10px;max-width:100%;overflow-x:auto}.results-table{border:1px solid #e5e7eb;border:1px solid var(--border);border-collapse:collapse;border-radius:6px;border-radius:var(--radius-sm);font-size:14px;min-width:420px;overflow:hidden;width:100%}.results-table thead th{background:#fff;background:var(--card);padding:10px;position:sticky;top:0}.results-table td,.results-table thead th{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);text-align:left}.results-table td{padding:8px 10px}.results-table tbody tr:nth-child(odd){background:color-mix(in srgb,#fff 90%,#000 10%);background:color-mix(in srgb,var(--card) 90%,#000 10%)}.results-table td.score-good{background-color:#d4edda;background-color:var(--success-bg)}.results-table td.score-okay{background-color:#fff3cd;background-color:var(--warn-bg)}.results-table td.score-poor{background-color:#f8d7da;background-color:var(--error-bg)}.preview-audio{width:100%}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media (max-width:520px){.quiz-card{padding:20px}input[type=range]::-moz-range-thumb,input[type=range]::-webkit-slider-thumb{height:30px;width:30px}}
/*# sourceMappingURL=main.3bb25f0a.css.map*/