@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";:root{--fs-2xs:.75rem;--fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.0625rem;--fs-md:1.25rem;--fs-lg:1.5rem;--fs-xl:1.875rem;--fs-2xl:2.5rem;--fs-3xl:3.25rem;--fs-4xl:4.5rem;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--ease:cubic-bezier(.22, 1, .36, 1);--dur-fast:.15s;--dur:.2s;--dur-slow:.26s;--tap:44px;--bg:oklch(17% .035 235);--surface:oklch(22% .042 235);--surface-raised:oklch(27% .05 235);--surface-sunken:oklch(13% .03 235);--text:oklch(98% .008 90);--text-muted:oklch(79% .02 235);--text-faint:oklch(66% .025 235);--border:oklch(36% .055 235);--border-strong:oklch(99% .005 90);--step-passed:oklch(48% .07 235);--step-upcoming:oklch(31% .05 235);--accent:oklch(68% .21 15);--accent-hover:oklch(62% .2 15);--accent-ink:oklch(20% .05 15);--accent-soft:oklch(68% .21 15/.2);--accent-shadow:oklch(40% .16 15);--correct:oklch(85% .19 125);--correct-ink:oklch(22% .06 125);--correct-soft:oklch(85% .19 125/.18);--wrong:oklch(56% .2 18);--wrong-ink:oklch(99% .005 18);--wrong-soft:oklch(64% .2 18/.2);--focus-ring:oklch(90% .17 100);--font:"Inter", system-ui, sans-serif;--font-display:"Archivo Black", "Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--display-tracking:-.02em;--radius:14px;--radius-lg:22px;--radius-pill:999px;--border-width:2px;--shadow:0 3px 0 oklch(10% .03 235);--shadow-lg:0 8px 0 oklch(10% .03 235);--press:translateY(3px)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{min-width:320px;margin:0}.app{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-base);flex-direction:column;min-height:100dvh;line-height:1.5;display:flex}h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;margin:0;font-weight:700}p{margin:0}button,input{font:inherit;letter-spacing:inherit}a,button{color:inherit;-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}:disabled{cursor:not-allowed}.btn:disabled,.play-btn:disabled{background:var(--surface-raised);border-color:var(--border);box-shadow:none;color:var(--text-faint)}.play-btn:disabled kbd{background:var(--surface-sunken);border-color:var(--border);color:var(--text-faint)}input:disabled{opacity:.5}img{display:block}.tnum{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}.label{color:var(--text-muted);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:block}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.display{font-family:var(--font-display);letter-spacing:var(--display-tracking);text-transform:uppercase;font-weight:400;line-height:.95}kbd{border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-2xs);white-space:nowrap;border-radius:4px;padding:.25em .45em;line-height:1}.btn,kbd{background:var(--surface-raised)}.btn{border:var(--border-width) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;font-size:var(--fs-sm);align-items:center;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-3) var(--sp-5);text-transform:uppercase;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);justify-content:center;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:color-mix(in oklch,var(--surface-raised) 82%,var(--text));border-color:var(--border-strong)}.btn--pressed:not(:disabled),.btn:active:not(:disabled){box-shadow:none;transform:var(--press)}.btn--pressed:not(:disabled){background:color-mix(in oklch,var(--surface-raised) 82%,var(--text));border-color:var(--border-strong)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:var(--fs-base);font-weight:700}.btn--primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn--block{width:100%}.btn--quiet{border-color:var(--border);box-shadow:none;color:var(--text-muted);background:0 0}.btn--quiet:hover:not(:disabled){background:var(--surface-raised);border-color:var(--border-strong);color:var(--text)}.header{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6);flex-wrap:wrap;display:flex}.wordmark{font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:var(--display-tracking);text-transform:uppercase;align-items:baseline;gap:.35em;margin-right:auto;font-weight:400;text-decoration:none;display:flex}.wordmark em{color:var(--accent);font-style:normal}.header__stats{gap:var(--sp-6);display:flex}.stat{flex-direction:column;gap:2px;display:flex}.stat__value{font-size:var(--fs-lg);font-weight:700;line-height:1.1}.stat__value small{color:var(--text-faint);font-size:var(--fs-sm);font-weight:500}.footer{border-top:1px solid var(--border);color:var(--text-faint);font-size:var(--fs-xs);padding:var(--sp-4) var(--sp-6);text-align:center;margin-top:auto}.footer a{color:var(--text-muted)}.landing{align-content:center;gap:var(--sp-12);max-width:72rem;padding:var(--sp-16) var(--sp-10);flex:1;grid-template-columns:minmax(0,1fr) minmax(300px,25rem);width:100%;margin:0 auto;display:grid}.landing__lede{max-width:34rem}.landing__lede h1{font-size:var(--fs-4xl);margin:var(--sp-4) 0 var(--sp-6)}.landing__lede h1 em{color:var(--accent);font-style:normal}.landing__lede p{color:var(--text-muted);font-size:var(--fs-md);max-width:46ch}.rules{background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);gap:var(--sp-5);padding:var(--sp-6)}.rules,.rules ol{flex-direction:column;display:flex}.rules ol{gap:var(--sp-4);margin:0;padding:0;list-style:none}.rules li{font-size:var(--fs-sm);align-items:baseline;gap:var(--sp-3);display:flex}.rules li b{color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-xs)}.rules small{color:var(--text-faint);font-size:var(--fs-xs)}.stage{align-items:start;gap:var(--sp-6);flex:1;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);display:grid}.panel,.stage{padding:var(--sp-6)}.panel{background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg)}.deck,.rail{gap:var(--sp-6);flex-direction:column;display:flex}.deck{text-align:center}.deck__heading{font-size:var(--fs-xl)}.deck__sub{color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--sp-2)}.deck__play-row{align-items:center;gap:var(--sp-4);margin:var(--sp-2) 0;grid-template-columns:1fr auto 1fr;display:grid}.deck__play-row .play-btn{grid-column:2;justify-self:center}.deck__play-row .btn{grid-column:3;justify-self:start}.deck__play-row-spacer{grid-column:1}.play-btn{aspect-ratio:1;background:var(--accent);border:var(--border-width) solid var(--accent);border-radius:var(--radius-pill);box-shadow:0 8px 0 var(--accent-shadow);color:var(--accent-ink);cursor:pointer;align-items:center;gap:var(--sp-2);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);flex-direction:column;justify-content:center;width:min(15rem,60vw);display:flex;position:relative}.play-btn:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.03)}.play-btn:active:not(:disabled){box-shadow:0 2px 0 var(--accent-shadow);transform:translateY(4px)}.play-btn__icon{font-size:var(--fs-3xl);line-height:1}.play-btn__text{font-size:var(--fs-md);text-transform:uppercase;font-weight:700}.play-btn kbd{background:color-mix(in oklch,var(--accent-ink) 12%,transparent);border-color:color-mix(in oklch,var(--accent-ink) 28%,transparent);color:var(--accent-ink)}.play-btn--playing:after{animation:pulse 1.6s var(--ease) infinite;border:2px solid var(--accent);border-radius:var(--radius-pill);content:"";pointer-events:none;position:absolute;inset:0}.clip-steps{gap:var(--sp-1);margin:var(--sp-3) 0 0;padding:0;list-style:none;display:flex}.clip-steps li{gap:var(--sp-2);flex-direction:column;flex:1;display:flex}.clip-steps i{background:var(--step-upcoming);border-radius:2px;height:6px}.clip-steps span{color:var(--text-faint);font-family:var(--font-mono);font-size:var(--fs-2xs)}.clip-steps li[data-state=passed] i{background:var(--accent);opacity:.6}.clip-steps li[data-state=active] i{background:var(--accent)}.clip-steps li[data-state=active] span,.clip-steps li[data-state=passed] span{color:var(--accent);font-weight:500}.deck__controls{gap:var(--sp-4);flex-wrap:wrap;justify-content:center}.deck__controls,.volume{align-items:center;display:flex}.volume{gap:var(--sp-3)}.volume input{accent-color:var(--accent);width:7rem}.volume output{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-xs);min-width:3ch}.score-readout{position:relative}.score-readout__value{font-size:var(--fs-3xl);margin:var(--sp-2) 0 var(--sp-3);font-weight:800;line-height:1;display:block}.score-readout__rules{color:var(--text-muted);font-size:var(--fs-xs);gap:var(--sp-1) var(--sp-3);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.score-readout__rules li{font-family:var(--font-mono)}.point-loss{animation:point-loss 1.9s var(--ease) forwards;background:var(--wrong);border-radius:var(--radius);color:var(--wrong-ink);align-items:baseline;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);right:var(--sp-4);top:var(--sp-4);font-weight:700;display:flex;position:absolute}.point-loss span{font-size:var(--fs-xs);text-transform:uppercase;font-weight:500}.guess__head{align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5);justify-content:space-between;display:flex}.guess__head h2{font-size:var(--fs-md)}.attempts{gap:var(--sp-1);display:flex}.attempts i{border:2px solid var(--border-strong);border-radius:var(--radius-pill);background:0 0;width:11px;height:11px}.attempts i[data-used=true]{background:var(--wrong);border-color:var(--wrong)}.search{position:relative}.search input{background:var(--surface-sunken);border:var(--border-width) solid var(--border);border-radius:var(--radius);color:var(--text);min-height:var(--tap);padding:var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-4);transition:border-color var(--dur-fast) var(--ease);width:100%}.search input:hover:not(:disabled){border-color:var(--border-strong)}.search input::placeholder{color:var(--text-faint)}.search__hint,.search__status{right:var(--sp-3);position:absolute;top:50%;transform:translateY(-50%)}.search__status{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-xs)}.results{background:var(--surface-raised);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius);bottom:calc(100% + var(--sp-2));box-shadow:var(--shadow-lg);max-height:19rem;padding:var(--sp-1);z-index:5;margin:0;list-style:none;position:absolute;left:0;right:0;overflow-y:auto}.results button{border-radius:calc(var(--radius) - 2px);cursor:pointer;align-items:center;gap:var(--sp-3);padding:var(--sp-2);text-align:left;background:0 0;border:0;width:100%;display:flex}.results button:hover,.results button[data-active=true]{background:var(--accent-soft)}.results img{border-radius:4px;width:40px;height:40px}.results span{flex-direction:column;min-width:0;display:flex}.results strong{font-size:var(--fs-sm);font-weight:600}.results small{color:var(--text-muted);font-size:var(--fs-xs)}.results small,.results strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.guess__error,.guess__submit{margin-top:var(--sp-4)}.guess__error{background:var(--wrong-soft);border-radius:var(--radius);color:var(--text);font-size:var(--fs-sm);align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);display:flex}.guess--wrong{animation:shake .26s var(--ease)}.guess__giveup{border-top:1px solid var(--border);align-items:center;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-4);flex-wrap:wrap;display:flex}.guess__giveup small{color:var(--text-faint);font-size:var(--fs-xs)}.reveal__player{align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap;display:flex}.reveal{align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-6);flex:1;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.reveal__art{border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);justify-self:end;width:100%;max-width:24rem}.reveal__copy{gap:var(--sp-4);flex-direction:column;max-width:34rem;display:flex}.verdict{border-radius:var(--radius-pill);font-size:var(--fs-sm);align-self:start;align-items:center;gap:var(--sp-2);letter-spacing:.04em;padding:var(--sp-2) var(--sp-4);text-transform:uppercase;font-weight:700;display:flex}.verdict[data-outcome=correct]{background:var(--correct);color:var(--correct-ink)}.verdict[data-outcome=wrong]{background:var(--wrong);color:var(--wrong-ink)}.verdict[data-outcome=skipped]{background:var(--surface-raised);border:var(--border-width) solid var(--border);color:var(--text-muted)}.reveal__title{font-size:var(--fs-3xl)}.reveal__artist{color:var(--text-muted);font-size:var(--fs-lg)}.reveal__points{font-size:var(--fs-xl);font-weight:800}.reveal__points[data-earned=true]{color:var(--correct)}.reveal__points[data-earned=false]{color:var(--text-faint)}.reveal__link{color:var(--text-muted);font-size:var(--fs-sm);justify-self:start}.reveal__actions{margin-top:var(--sp-2)}.final{align-items:center;gap:var(--sp-4);padding:var(--sp-16) var(--sp-6);text-align:center;flex-direction:column;flex:1;justify-content:center;display:flex}.final__value{font-size:var(--fs-4xl);font-weight:800;line-height:1}.final__max{color:var(--text-muted);font-size:var(--fs-md)}.final__bar{background:var(--surface-raised);height:10px;margin:var(--sp-4) 0;width:100%;max-width:28rem;overflow:hidden}.final__bar,.final__bar i{border-radius:var(--radius-pill)}.final__bar i{background:var(--accent);height:100%;transition:width var(--dur-slow) var(--ease);display:block}.final__note{color:var(--text-faint);font-size:var(--fs-xs)}.share-card{border-top:var(--border-width) solid var(--border);gap:var(--sp-4);margin-top:var(--sp-4);max-width:30rem;padding-top:var(--sp-6);text-align:left;flex-direction:column;width:100%;display:flex}.share-card__row{align-items:center;gap:var(--sp-4);justify-content:space-between;display:flex}.share-card__copy p{color:var(--text-muted);font-size:var(--fs-sm)}.share-card__fallback{gap:var(--sp-2);margin-top:calc(var(--sp-4)*-1);flex-direction:column;display:flex}.share-card__fallback small{color:var(--text-faint);font-size:var(--fs-xs)}.share-card__link{background:var(--surface-raised);border:var(--border-width) solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);width:100%}.round-summary{gap:var(--sp-2);max-width:34rem;padding:0 var(--sp-6) var(--sp-6);flex-direction:column;width:100%;margin:0 auto;list-style:none;display:flex}.round-summary__item{background:var(--surface);border:var(--border-width) solid var(--border);border-radius:var(--radius);align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);grid-template-columns:auto 1fr auto auto auto;display:grid}.round-summary__number{color:var(--text-faint);font-size:var(--fs-sm)}.round-summary__outcome{font-size:var(--fs-sm);align-items:center;gap:var(--sp-2);font-weight:600;display:flex}.round-summary__outcome[data-outcome=correct]{color:var(--correct-ink)}.round-summary__outcome[data-outcome=wrong]{color:var(--wrong-ink)}.round-summary__outcome[data-outcome=skipped],.round-summary__stat{color:var(--text-muted)}.round-summary__stat{font-size:var(--fs-sm)}.round-summary__points{font-weight:600}.toast{background:var(--surface-raised);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius);bottom:var(--sp-6);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);max-width:min(34rem,100vw - 2rem);padding:var(--sp-4) var(--sp-5);z-index:20;width:max-content;position:fixed;left:50%;transform:translate(-50%)}.toast--error{border-color:var(--wrong)}.focus-warning{align-items:center;gap:var(--sp-2) var(--sp-4);z-index:30;grid-template-columns:auto 1fr auto;display:grid}.focus-warning__icon{background:var(--wrong);border-radius:var(--radius-pill);color:var(--wrong-ink);justify-content:center;align-items:center;width:2rem;height:2rem;font-weight:800;display:flex}.focus-warning strong{font-size:var(--fs-sm);display:block}.focus-warning p{color:var(--text-muted);font-size:var(--fs-xs)}.toggle{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:var(--fs-xs);align-items:center;gap:var(--sp-2);min-height:32px;padding:var(--sp-1) var(--sp-3);background:0 0;font-weight:600;display:flex}.toggle[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.menu{position:relative}.menu__trigger{background:var(--surface-raised);border:var(--border-width) solid var(--border);border-radius:var(--radius);cursor:pointer;height:36px;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);justify-content:center;align-items:center;width:36px;display:flex}.menu__trigger:hover{background:color-mix(in oklch,var(--surface-raised) 82%,var(--text));border-color:var(--border-strong)}.menu__trigger--open{background:var(--accent-soft);border-color:var(--accent)}.menu__trigger-bars{flex-direction:column;gap:4px;display:flex}.menu__trigger-bars i{background:var(--text);height:2px;transition:transform var(--dur-fast) var(--ease);border-radius:2px;width:16px;display:block}.menu__trigger--open .menu__trigger-bars i{background:var(--accent)}.menu__trigger--open .menu__trigger-bars i:first-child{transform:translateY(6px)rotate(45deg)}.menu__trigger--open .menu__trigger-bars i:nth-child(2){opacity:0}.menu__trigger--open .menu__trigger-bars i:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.menu__panel{background:var(--surface-raised);border:var(--border-width) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);gap:var(--sp-3);min-width:13rem;padding:var(--sp-4);right:0;top:calc(100% + var(--sp-3));transform-origin:100% 0;z-index:20;flex-direction:column;display:flex;position:absolute}.menu__panel-heading{padding:0 var(--sp-1)}.menu__panel .toggle{justify-content:flex-start;width:100%}.menu-panel-enter-active,.menu-panel-leave-active{transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.menu-panel-enter-from,.menu-panel-leave-to{opacity:0;transform:scale(.95)translateY(-4px)}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes pulse{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.28)}}@keyframes point-loss{0%{opacity:0;transform:translateY(8px)}10%,70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (width<=60rem){.landing,.reveal,.stage{grid-template-columns:minmax(0,1fr)}.landing{gap:var(--sp-8);padding:var(--sp-10) var(--sp-5)}.reveal{gap:var(--sp-6);padding:var(--sp-6) var(--sp-5);justify-items:start}.reveal__art{justify-self:start;max-width:16rem}}@media (width<=40rem){:root{--fs-3xl:2.5rem;--fs-4xl:3.25rem}.header{padding:var(--sp-3) var(--sp-4)}.header__stats{gap:var(--sp-5)}.stage{gap:var(--sp-4);padding:var(--sp-4)}.panel{padding:var(--sp-5)}.deck__controls{justify-content:center}.deck__play-row{grid-template-columns:1fr;justify-items:center}.deck__play-row .btn,.deck__play-row .play-btn{grid-column:1;justify-self:center}.deck__play-row-spacer{display:none}.results{bottom:auto;top:calc(100% + var(--sp-2))}.focus-warning{grid-template-columns:auto 1fr}.focus-warning .btn{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){*,:after,:before{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.play-btn:hover:not(:disabled){transform:none}}