@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,900&display=swap";:root{color:#dedede;color-scheme:dark;font-synthesis:none;--accent:#12de78;background:#060806;font-family:DM Sans,sans-serif}@property --accent{syntax:"<color>";inherits:true;initial-value:#12de78}.theme-root{--ink:color-mix(in srgb, var(--accent) 5%, #dedede);--muted:color-mix(in srgb, var(--accent) 8%, #979797);--page-bg:color-mix(in srgb, var(--accent) 2%, #060606);--line:color-mix(in srgb, var(--accent) 9%, #222);--surface:color-mix(in srgb, var(--accent) 5%, #151515);--surface-raised:color-mix(in srgb, var(--accent) 8%, #1b1b1b);--accent-soft:color-mix(in srgb, var(--accent) 12%, #080808);--accent-light:color-mix(in srgb, var(--accent) 35%, white);--accent-hover:color-mix(in srgb, var(--accent) 80%, white);--on-accent:color-mix(in srgb, var(--accent) 10%, #080808);color:var(--ink);isolation:isolate;min-height:100svh;transition:--accent .45s}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:0 0;border:0;transition:background .2s,color .2s,transform .25s,box-shadow .3s}button:disabled{cursor:not-allowed;opacity:.5}button:active:not(:disabled){transform:translateY(1px)}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.app-shell{grid-template-columns:180px minmax(0,540px) 196px;justify-content:space-between;align-items:start;gap:48px;width:min(1520px,100%);min-height:100svh;margin:auto;padding:clamp(100px,31vh,355px) 22px 80px;display:grid}main{width:100%;min-width:0;animation:.5s ease-out both enter}h1{text-align:center;margin:0 0 50px;line-height:1.2}.wordmark{letter-spacing:-2px;color:color-mix(in srgb, var(--accent) 14%, #303030);font-size:clamp(38px,4vw,58px);font-style:italic;font-weight:900;text-decoration:none;display:inline-block}.round-era{color:var(--muted);text-align:center;margin-bottom:18px;font-size:12px;font-weight:700}.side-panel{flex-direction:column;align-self:stretch;margin-top:46px;display:flex}.era-list{margin-bottom:20px}.side-panel .reroll-button,.side-panel .utility-links{margin-top:auto}.panel-heading{color:var(--muted);letter-spacing:1.8px;text-transform:uppercase;margin:0 0 12px;font-size:10px;font-weight:800;line-height:1.5}.era-list{flex-direction:column;gap:8px;display:flex}.era-list button{text-align:left;min-height:43px;color:var(--muted);background:#ffffff04;border-radius:14px;padding:12px 18px;font-size:13px;font-weight:700}.era-list button:hover{color:var(--ink);background:#ffffff0a}.era-list button.active{color:var(--accent);background:var(--accent-soft)}.reroll-button{border-top:1px solid var(--line);width:100%;color:var(--muted);align-items:center;gap:12px;margin-top:20px;padding:23px 14px;font-size:12px;font-weight:700;display:flex}.reroll-button span{font-size:20px}.reroll-button:hover{color:var(--accent)}.attempt-steps{gap:6px;margin-bottom:22px;display:flex}.attempt-steps>div{text-align:center;color:var(--step-color);background:color-mix(in srgb, var(--step-color) 11%, transparent);border-radius:24px;flex:1;padding:9px 4px;font-size:12px;font-weight:800;transition:background .3s,color .3s,box-shadow .3s}.attempt-steps>div.current{color:var(--on-accent);background:var(--step-color);box-shadow:0 0 24px color-mix(in srgb, var(--step-color) 20%, transparent)}.attempt-steps>div.past{opacity:.55}.timeline{position:relative}.playback-progress{background:var(--line);border-radius:20px;height:25px;position:relative;overflow:hidden}.playback-progress>span{height:100%;position:absolute;inset:0 auto 0 0}.unlocked-progress{background:var(--accent-light);transition:width .35s}.played-progress{background:var(--accent)}.playback-progress i{background:var(--page-bg);width:1px;position:absolute;top:0;bottom:0}.timeline-label{color:var(--accent);font:700 11px ui-monospace,monospace;position:absolute;top:31px;left:0}.timeline-label:before{content:"";border-inline:3px solid #0000;border-bottom:4px solid var(--accent);position:absolute;top:-7px;left:3px}.listen-stage{isolation:isolate;justify-content:center;align-items:center;height:198px;display:flex;position:relative}.listen-stage:before{content:"";z-index:-1;background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 5%, transparent), transparent 65%);opacity:.5;pointer-events:none;transition:opacity .6s;position:absolute;inset:-15px -30px}.play-button{width:120px;height:120px;color:var(--on-accent);background:var(--accent);border-radius:50%;place-items:center;display:grid}.play-button:hover{background:var(--accent-hover);box-shadow:0 0 45px color-mix(in srgb, var(--accent) 10%, transparent);transform:scale(1.04)}.play-button svg{width:46px;height:46px}.is-playing .play-button{box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 3%, transparent), 0 0 65px color-mix(in srgb, var(--accent) 11%, transparent)}.is-playing.listen-stage:before{opacity:1}.clip-time{color:var(--accent);font-variant-numeric:tabular-nums;font:700 19px ui-monospace,monospace;position:absolute;left:calc(50% + 78px)}.loading-dots{font-size:32px;animation:1s ease-in-out infinite alternate breathe}form{align-items:start;gap:8px;display:flex}.search-wrap{flex:1;min-width:0;position:relative}.search-icon{width:16px;height:16px;color:var(--muted);pointer-events:none;position:absolute;top:14px;left:14px}.search-wrap input{background:color-mix(in srgb, var(--surface) 70%, transparent);border:1px solid var(--line);width:100%;height:44px;color:var(--ink);border-radius:15px;padding:12px 12px 12px 39px;font-size:14px;transition:border-color .25s,box-shadow .25s}.search-wrap input::placeholder{color:var(--muted)}.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 5%, transparent)}.search-results{z-index:5;background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;max-height:285px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 16px 40px #0008}.search-results p{color:var(--muted);padding:0 14px;font-size:13px}.search-results button{text-align:left;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 12px;display:flex}.search-results button:hover,.search-results button:focus-visible{background:var(--accent-soft)}.search-result-text{overflow-wrap:anywhere;flex:1;min-width:0}.search-results strong,.search-results small{font-size:13px;font-weight:600;display:block}.search-results small{color:var(--muted);margin-top:4px;font-size:11px}.guess-actions{gap:8px;display:flex}.skip-button{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 50%, transparent);border-radius:15px;justify-content:center;align-items:center;gap:7px;min-width:100px;height:44px;padding:0 15px;font-size:13px;font-weight:800;display:flex}.skip-button span{color:var(--muted);font-size:10px;font-weight:500}.skip-button:hover{background:#ffffff0a}.primary{background:var(--accent);color:var(--on-accent);border-radius:14px;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:12px 16px;font-size:13px;font-weight:800;display:flex}.primary:hover{background:var(--accent-hover)}.settings-section{border-bottom:1px solid var(--line);margin-bottom:22px;padding-bottom:22px}#game-volume{appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0;display:block}#game-volume::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--volume), var(--line) var(--volume));border-radius:8px;height:6px}#game-volume::-moz-range-track{background:linear-gradient(to right, var(--accent) var(--volume), var(--line) var(--volume));border-radius:8px;height:6px}#game-volume::-webkit-slider-thumb{appearance:none;background:var(--accent);border-radius:50%;width:12px;height:12px;margin-top:-3px}#game-volume::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:12px;height:12px}.utility-links{flex-direction:column;gap:7px;display:flex}.utility-links button{color:var(--muted);background:#ffffff04;border-radius:12px;justify-content:space-between;align-items:center;padding:13px;font-size:12px;font-weight:700;display:flex}.utility-links button:hover{color:var(--ink);background:#ffffff0a}.guess-list{flex-direction:column;gap:6px;margin:16px 0 0;padding:0;list-style:none;display:flex}.guess-list:empty{display:none}.guess-list li{min-height:40px;color:var(--muted);background:color-mix(in srgb, var(--surface) 70%, transparent);border-radius:10px;align-items:center;gap:12px;padding:10px 14px;font-size:12px;display:flex}.guess-list li>span:last-child{overflow-wrap:anywhere;min-width:0}.guess-icon{flex-shrink:0;font-size:17px}.reveal{--result-color:var(--accent);text-align:center;flex-direction:column;align-items:center;gap:0;padding:0 0 24px;display:flex}.reveal-details{min-width:0;max-width:100%;margin-top:24px}.reveal h2{letter-spacing:-.7px;color:var(--ink);overflow-wrap:anywhere;margin:0 0 8px;font-size:28px;font-weight:900;line-height:1.2}.reveal p{color:var(--muted);margin:0 0 14px;font-size:13px;line-height:1.5}.reveal a{background:var(--accent-soft);color:var(--muted);border-radius:24px;align-items:center;gap:8px;padding:8px 13px;font-size:11px;font-weight:800;text-decoration:none;transition:background .2s,color .2s;display:inline-flex}.reveal a:hover{color:var(--ink);background:#ffffff12}.reveal-eyebrow{color:var(--result-color);text-transform:uppercase;letter-spacing:4px;margin:0 0 10px;font-size:10px;font-weight:800;display:block}.result-status{border:2px solid var(--result-color);color:var(--result-color);background:color-mix(in srgb, var(--result-color) 5%, transparent);box-shadow:0 0 30px color-mix(in srgb, var(--result-color) 12%, transparent);text-transform:uppercase;border-radius:30px;margin-top:20px;padding:7px 15px;font-size:14px;font-weight:900;display:inline-block}.success .result-status{transform:rotate(-6deg)}.result-actions{justify-content:center;gap:10px;width:100%;margin-top:24px;display:flex}.result-actions button{min-height:36px;color:var(--result-color);background:var(--accent-soft);border-radius:24px;justify-content:center;align-items:center;gap:9px;padding:10px 18px;font-size:12px;font-weight:800;display:inline-flex}.result-actions button:hover{background:color-mix(in srgb, var(--result-color) 12%, transparent)}.result-actions .next-button{width:116px}.copy-result svg{width:14px;height:14px}.share-status{color:var(--muted);margin-top:14px;font-size:11px}.audio-error{color:var(--accent-light);font-size:13px;line-height:1.5}.audio-error button{padding:0;text-decoration:underline}dialog{background:var(--surface-raised);border:1px solid var(--line);width:calc(100% - 32px);max-width:420px;color:var(--ink);border-radius:16px;padding:0}dialog::backdrop{background:color-mix(in srgb, var(--page-bg) 75%, transparent);backdrop-filter:blur(6px)}.modal-content{padding:32px;position:relative}.icon-button{border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.icon-button:hover{background:#ffffff0a}.modal-close{font-size:24px;position:absolute;top:12px;right:12px}.modal-content h2{margin:4px 0 25px;font-size:25px;font-weight:600}.modal-content p{color:var(--muted);font-size:15px;line-height:1.6}.modal-content small{color:var(--muted);font-size:12px;line-height:1.6;display:block}.stats-grid{grid-template-columns:1fr 1fr;gap:24px;margin:28px 0;display:grid}.stats-grid>div{flex-direction:column;gap:5px;display:flex}.stats-grid strong{color:var(--accent);font-size:34px;font-weight:500}.stats-grid span{color:var(--muted);font-size:14px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}dialog[open]{animation:.22s ease-out enter}@keyframes enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{to{opacity:.3}}@media (width<=1100px){.app-shell{grid-template-columns:150px minmax(0,500px) 160px;gap:28px;padding-inline:28px}}@media (width<=850px){.listen-stage:before{inset-inline:0}.app-shell{grid-template-columns:minmax(0,1fr);gap:26px;max-width:580px;padding:48px 24px}main{grid-row:1}h1{margin-bottom:28px}.wordmark{font-size:44px}.round-era{display:none}.side-panel,.side-panel .utility-links{margin-top:0}.era-list{flex-direction:row;gap:4px;margin-bottom:0}.era-list button{text-align:center;flex:1;padding:10px 4px;font-size:11px}.reroll-button{justify-content:center;margin-top:12px;padding:12px}.settings-panel{grid-template-columns:1fr 1fr;gap:20px;display:grid}.settings-section{margin:0;padding-bottom:16px}.utility-links{justify-content:center}}@media (width<=480px){.app-shell{padding:36px 20px}.wordmark{font-size:38px}.listen-stage{height:188px}.play-button{width:108px;height:108px}.clip-time{font-size:17px;left:calc(50% + 68px)}.search-wrap input{font-size:16px}.skip-button{min-width:76px;padding-inline:10px}.skip-button span{display:none}form:has(.primary){flex-wrap:wrap}form:has(.primary) .search-wrap{flex-basis:100%}form:has(.primary) .guess-actions{width:100%}.guess-actions .primary{flex:1}.reveal h2{font-size:23px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.album-cover.svelte-8kfgx6{background:var(--surface-raised);color:var(--muted);border-radius:8px;flex-shrink:0;place-items:center;display:inline-grid;overflow:hidden}img.svelte-8kfgx6{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .25s;display:block}img.loaded.svelte-8kfgx6{opacity:1}svg.svelte-8kfgx6{width:45%;height:45%}@media (prefers-reduced-motion:reduce){img.svelte-8kfgx6{transition:none}}select.svelte-182y78p{border:1px solid var(--line);background:var(--surface);width:100%;color:var(--accent);font:inherit;cursor:pointer;color-scheme:dark;border-radius:10px;padding:10px 8px;font-size:12px}@media (width<=850px){.utility-links.svelte-182y78p{grid-column:1/-1}}@property --beam-width{syntax:"<number>";inherits:true;initial-value:.88}@property --clip-energy{syntax:"<number>";inherits:true;initial-value:0}.spotlight{pointer-events:none;z-index:-1;background:var(--page-bg);--beam-width:.88;--clip-energy:0;transition:--beam-width 1s cubic-bezier(.22,.68,.24,1),--clip-energy .9s ease-out;position:fixed;inset:0;overflow:hidden}.spotlight[data-step="1"]{--beam-width:.97}.spotlight[data-step="2"]{--beam-width:1.06}.spotlight[data-step="3"]{--beam-width:1.15}.spotlight[data-step="4"]{--beam-width:1.24}.spotlight[data-phase=loading]{--clip-energy:.12;transition:--beam-width 1s cubic-bezier(.22,.68,.24,1),--clip-energy .5s ease-out}.spotlight[data-phase=playing]{--clip-energy:max(.18, var(--clip-heard,0));transition:--beam-width 1s cubic-bezier(.22,.68,.24,1),--clip-energy .2s linear}.spotlight[data-phase=success]{--clip-energy:1;transition:--beam-width 1s cubic-bezier(.22,.68,.24,1),--clip-energy 1.2s ease-out}.spotlight[data-phase=failure]{--clip-energy:.12;transition:--beam-width 1s cubic-bezier(.22,.68,.24,1),--clip-energy 1.6s ease-in-out}.spotlight-source{background:var(--accent-light);filter:blur(6px);opacity:.24;width:130px;height:44px;transition:opacity 1s;position:absolute;top:-24px;left:calc(50% - 65px)}.spotlight[data-phase=loading] .spotlight-source{animation:1.5s ease-in-out infinite spotlight-warmup}.spotlight[data-phase=playing] .spotlight-source{opacity:.38}.spotlight[data-phase=success] .spotlight-source{opacity:.42}.spotlight[data-phase=failure] .spotlight-source{opacity:.16}.spotlight-aim{transform-origin:50% 0;width:min(920px,125vw);height:110vh;margin-left:max(-460px,-62.5vw);animation:1.2s cubic-bezier(.2,.7,.2,1) both spotlight-settle;position:absolute;top:-30px;left:50%}.spotlight-beam{transform-origin:50% 0;filter:blur(3px);animation:18s ease-in-out infinite alternate spotlight-drift;position:absolute;inset:0}.spotlight-spread{transform-origin:50% 0;transform:scaleX(var(--beam-width));opacity:.9;transition:opacity 1.2s;position:absolute;inset:0}.spotlight[data-phase=playing] .spotlight-spread,.spotlight[data-phase=success] .spotlight-spread{opacity:1}.spotlight[data-phase=failure] .spotlight-spread{opacity:.6}.spotlight-beam span{width:100%;height:100%;opacity:calc(.62 + .28 * var(--clip-energy));clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(to bottom, color-mix(in srgb, var(--accent-light) 20%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) 35%, color-mix(in srgb, var(--accent) 7%, transparent) 65%, transparent 94%);display:block}.spotlight[data-phase=success] .spotlight-beam span{animation:1.8s cubic-bezier(.16,.84,.28,1) both spotlight-bloom}.spotlight-pool{width:min(800px,100vw);height:24vh;transform:translateX(-50%) scale(calc(.9 + .12 * var(--clip-energy)));filter:blur(10px);background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);opacity:calc(.46 + .42 * var(--clip-energy));border-radius:50%;position:absolute;top:68%;left:50%}@keyframes spotlight-settle{0%{transform:rotate(-.8deg)scaleX(.97)}to{transform:rotate(0)scaleX(1)}}@keyframes spotlight-drift{0%{transform:rotate(-.45deg)}to{transform:rotate(.45deg)}}@keyframes spotlight-warmup{0%,to{opacity:.22}50%{opacity:.36}}@keyframes spotlight-bloom{0%{filter:brightness()}45%{filter:brightness(1.4)}to{filter:brightness(1.12)}}@media (prefers-reduced-motion:reduce){.spotlight-aim,.spotlight-beam,.spotlight-source,.spotlight-beam span{animation:none}.spotlight-spread{transform:none}}