:root{--night:oklch(17% .045 278);--night-2:oklch(21.5% .05 280);--night-3:oklch(27% .055 282);--line:oklch(34% .05 282);--ink:oklch(97% .012 90);--ink-2:oklch(82% .025 280);--ink-3:oklch(66% .035 280);--on-color:oklch(19% .04 278);--spot:oklch(88% .17 95);--good:oklch(84% .17 150);--bad:oklch(70% .2 25);--p0:oklch(88% .17 95);--p1:oklch(74% .2 355);--p2:oklch(85% .15 165);--p3:oklch(80% .13 228);--p4:oklch(78% .17 58);--p5:oklch(77% .14 302);--p6:oklch(89% .19 128);--p7:oklch(73% .18 28);--p8:oklch(80% .12 195);--p9:oklch(86% .08 60);--display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;--ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:36px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-quart:cubic-bezier(.25, 1, .5, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--night);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-size:1rem;line-height:1.5;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--spot);outline-offset:3px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stage{isolation:isolate;background:radial-gradient(120% 70% at 50% 120%, oklch(26% .07 300/.55), transparent 60%), var(--night);min-height:100dvh;position:relative;overflow:hidden}.beams{z-index:-1;pointer-events:none;position:fixed;inset:0}.beam{transform-origin:50% 0;background:linear-gradient(to bottom, var(--beam,var(--spot)) 0%, transparent 78%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:.11;filter:blur(18px);width:46vmax;height:140vh;animation:sway 11s var(--ease-quart) infinite alternate;position:absolute;top:-20vh}.beam:first-child{--beam:var(--p1);left:-14vmax;rotate:-24deg}.beam:nth-child(2){--beam:var(--spot);animation-duration:14s;animation-delay:-4s;left:30%;rotate:4deg}.beam:nth-child(3){--beam:var(--p3);animation-duration:9s;animation-delay:-2s;right:-14vmax;rotate:24deg}@keyframes sway{to{transform:rotate(9deg)}}.stage[data-flood] .beam{--beam:var(--flood);opacity:.32}.stage[data-flood]:before{content:"";z-index:-1;background:radial-gradient(90% 70% at 50% 40%, color-mix(in oklch, var(--flood) 34%, transparent), transparent 70%);animation:flood-in .42s var(--ease-out);position:fixed;inset:0}@keyframes flood-in{0%{opacity:0}}.display{font-family:var(--display);letter-spacing:-.02em;font-variation-settings:"opsz" 96;font-weight:800;line-height:.95}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-size:.8rem;font-weight:700}.num{font-variant-numeric:tabular-nums}.logo{font-family:var(--display);letter-spacing:-.03em;font-variation-settings:"opsz" 96;align-items:center;gap:.35em;font-weight:800;line-height:1;display:inline-flex}.logo-disc{flex:none;width:1.05em;height:1.05em}.logo b{color:var(--spot);font-weight:inherit}.btn{--c:var(--spot);background:var(--c);min-height:52px;color:var(--on-color);box-shadow:0 5px 0 color-mix(in oklch, var(--c) 55%, black);transition:transform .14s var(--ease-out), box-shadow .14s var(--ease-out), filter .14s;border:0;border-radius:999px;justify-content:center;align-items:center;gap:.5em;padding:0 1.4em;font-size:1.05rem;font-weight:700;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:active:not(:disabled){box-shadow:0 1px 0 color-mix(in oklch, var(--c) 55%, black);transform:translateY(4px)}.btn:disabled{opacity:.4;box-shadow:none}.btn-lg{min-height:64px;padding:0 2em;font-size:1.25rem}.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);background:0 0}.btn-ghost:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--ink-3);filter:none}.btn-ghost:active:not(:disabled){box-shadow:inset 0 0 0 2px var(--ink-3);transform:scale(.97)}.btn-good{--c:var(--good)}.btn-bad{--c:var(--bad)}.icon-btn{width:44px;height:44px;color:var(--ink-2);background:0 0;border:0;border-radius:999px;place-items:center;transition:background .15s,color .15s;display:inline-grid}.icon-btn:hover{background:var(--night-3);color:var(--ink)}.field{gap:.4rem;display:grid}.field label{color:var(--ink-2);font-weight:600}.input{border:2px solid var(--line);border-radius:var(--r-md);background:var(--night-2);width:100%;min-height:56px;padding:0 1rem;font-size:1.15rem;transition:border-color .15s}.input:focus{border-color:var(--spot);outline:none}.input-code{font-family:var(--display);letter-spacing:.3em;text-transform:uppercase;text-align:center;padding-left:.3em;font-size:2rem;font-weight:800}.hint{color:var(--ink-3);font-size:.95rem}.error{color:var(--bad);font-weight:600}.seg{flex-wrap:wrap;gap:8px;display:flex}.seg button{background:var(--night-3);min-height:48px;color:var(--ink-2);transition:background .16s, color .16s, transform .12s var(--ease-out);border:0;border-radius:999px;align-items:center;gap:.5em;padding:0 1.1rem;font-weight:600;display:inline-flex}.seg button:hover:not([aria-pressed=true]):not(:disabled){color:var(--ink);background:color-mix(in oklch, var(--night-3) 70%, var(--ink-3))}.seg button:active:not(:disabled){transform:scale(.96)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--on-color)}.seg button:disabled{opacity:.45}.themes{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;display:grid}.theme{--c:var(--p0);border-radius:var(--r-md);background:var(--night-3);text-align:left;min-height:112px;color:var(--ink);transition:background .2s var(--ease-out), color .2s, transform .14s var(--ease-out);border:0;align-content:space-between;gap:1.2rem;padding:14px 16px;display:grid;position:relative}.theme svg{color:var(--c);transition:color .2s}.theme span{font-family:var(--display);font-size:1.15rem;font-weight:700;line-height:1.1}.theme:hover:not([aria-pressed=true]):not(:disabled){background:color-mix(in oklch, var(--night-3) 82%, var(--c))}.theme:active:not(:disabled){transform:scale(.97)}.theme[aria-pressed=true]{background:var(--c);color:var(--on-color)}.theme[aria-pressed=true] svg{color:var(--on-color)}.theme:disabled{opacity:.5}.year{border-radius:var(--r-md);background:var(--night-2);gap:10px;padding:14px;display:grid}.year-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.year-value{font-family:var(--display);color:var(--p4);font-size:2.6rem;font-weight:800;line-height:1}.year input[type=range]{width:100%;accent-color:var(--p4);height:32px}.switch{text-align:left;background:0 0;border:0;align-items:center;gap:12px;min-height:48px;padding:0;display:flex}.switch-track{background:var(--night-3);width:52px;height:30px;box-shadow:inset 0 0 0 2px var(--line);border-radius:999px;flex:none;transition:background .18s;position:relative}.switch-track:after{content:"";background:var(--ink-2);width:22px;height:22px;transition:transform .22s var(--ease-out), background .18s;border-radius:50%;position:absolute;top:4px;left:4px}.switch[aria-checked=true] .switch-track{background:var(--bad);box-shadow:none}.switch[aria-checked=true] .switch-track:after{background:var(--ink);transform:translate(22px)}.switch strong{display:block}.switch small{color:var(--ink-3);font-size:.9rem}.avatar{--c:var(--p0);width:var(--size,40px);height:var(--size,40px);background:var(--c);color:var(--on-color);font-family:var(--display);font-weight:800;font-size:calc(var(--size,40px) * .45);border-radius:50%;flex:none;place-items:center;line-height:1;display:inline-grid}.avatar[data-off]{opacity:.35}.chip{--c:var(--p0);background:color-mix(in oklch, var(--c) 16%, var(--night-2));border-radius:999px;align-items:center;gap:8px;padding:4px 14px 4px 4px;font-weight:600;display:inline-flex}[data-color="0"]{--c:var(--p0)}[data-color="1"]{--c:var(--p1)}[data-color="2"]{--c:var(--p2)}[data-color="3"]{--c:var(--p3)}[data-color="4"]{--c:var(--p4)}[data-color="5"]{--c:var(--p5)}[data-color="6"]{--c:var(--p6)}[data-color="7"]{--c:var(--p7)}[data-color="8"]{--c:var(--p8)}[data-color="9"]{--c:var(--p9)}.vinyl{width:var(--vinyl,320px);aspect-ratio:1;position:relative}.vinyl-ring{position:absolute;inset:0;transform:rotate(-90deg)}.vinyl-ring circle{fill:none;stroke-width:6px}.vinyl-ring .track{stroke:var(--night-3)}.vinyl-ring .progress{stroke:var(--spot);stroke-linecap:round;transition:stroke .3s}.vinyl-disc{background:radial-gradient(circle, var(--label,var(--spot)) 0 26%, oklch(13% .02 280) 26.5% 28%, transparent 28.5%), repeating-radial-gradient(circle, oklch(16% .02 280) 0 2px, oklch(20% .025 280) 2px 3.5px), oklch(15% .02 280);border-radius:50%;animation:2.4s linear infinite paused spin;position:absolute;inset:7%;box-shadow:0 30px 60px -20px oklch(0% 0 0/.7),inset 0 0 0 2px oklch(30% .03 280)}.vinyl-disc:after{content:"";background:conic-gradient(from 30deg, transparent 0 8%, oklch(100% 0 0/.08) 12%, transparent 18% 58%, oklch(100% 0 0/.06) 62%, transparent 68%);border-radius:50%;position:absolute;inset:0}.vinyl[data-spinning] .vinyl-disc{animation-play-state:running}.vinyl-label{font-family:var(--display);font-weight:800;font-size:calc(var(--vinyl,320px) * .16);color:var(--on-color);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}@keyframes spin{to{transform:rotate(360deg)}}.rise{animation:rise .52s var(--ease-out) both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}}.pop{animation:pop .38s var(--ease-out) both}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.shake{animation:shake .36s var(--ease-out)}@keyframes shake{20%{transform:translate(-10px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(3px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.beam,.vinyl-disc{animation:none}}.seg button{flex:auto;justify-content:center}@media (width<=560px){.themes{grid-template-columns:repeat(3,1fr);gap:8px}.theme{gap:.6rem;min-height:92px;padding:12px}.theme span{font-size:.98rem}.seg button{padding:0 .8rem}}.split{grid-template-columns:auto minmax(0, var(--side,360px));justify-content:center;align-items:center;gap:clamp(24px,5vw,72px);display:grid}.qcm-grid{grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none;display:grid}@media (width<=760px){.split{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px}.split>*{justify-items:center}.qcm-grid{text-align:left;grid-template-columns:1fr}}.stage[data-alarm]:after{content:"";z-index:30;pointer-events:none;background:oklch(60% .24 25/.16);animation:.56s ease-in-out infinite alternate alarm;position:fixed;inset:0;box-shadow:inset 0 0 0 10px oklch(64% .24 25),inset 0 0 120px 20px oklch(60% .24 25/.55)}@keyframes alarm{0%{opacity:.25}to{opacity:1}}@media (prefers-reduced-motion:reduce){.stage[data-alarm]:after{opacity:.8;animation:none}}.hit-flash{z-index:35;pointer-events:none;opacity:0;background:oklch(60% .24 25/.14);animation:.9s ease-out hit;position:fixed;inset:0;box-shadow:inset 0 0 0 10px oklch(64% .24 25),inset 0 0 120px 24px oklch(60% .24 25/.6)}@keyframes hit{0%,40%{opacity:1}20%,60%{opacity:.35}to{opacity:0}}.snooze-bar{background:var(--bad);transform-origin:0;height:6px;animation:snooze var(--snooze,1.5s) linear forwards;border-radius:6px}@keyframes snooze{to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.hit-flash{animation:.9s linear hit-static}@keyframes hit-static{0%,99%{opacity:.8}to{opacity:0}}}.spots{flex-wrap:wrap;justify-content:center;gap:4px 6px;display:flex}.spot{--spot-h:64px;width:var(--spot-w,88px);padding-top:var(--spot-h);justify-items:center;gap:6px;display:grid;position:relative}.spot-lamp{background:var(--night-3);z-index:1;border-radius:7px 7px 3px 3px;width:28px;height:14px;transition:background .26s,box-shadow .26s;position:absolute;top:0;box-shadow:inset 0 -3px oklch(0% 0 0/.35)}.spot-beam{clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);opacity:0;transform-origin:50% 0;transition:opacity .32s var(--ease-out), transform .32s var(--ease-out);background:linear-gradient(oklch(93% .14 95/.9),oklch(93% .14 95/.04));position:absolute;inset:10px 0 18px;transform:scaleY(.6)}.spot .avatar{filter:grayscale()brightness(.45);transition:filter .32s var(--ease-out), transform .32s var(--ease-out);position:relative}.spot-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--ink-3);font-size:.95rem;font-weight:600;transition:color .32s;position:relative;overflow:hidden}.spot[data-on] .spot-lamp{background:var(--spot);box-shadow:0 0 18px 4px oklch(93% .14 95/.55)}.spot[data-on] .spot-beam{opacity:1;transform:none}.spot[data-on] .avatar{filter:none;transform:scale(1.06)}.spot[data-on] .spot-name{color:var(--ink);font-weight:800}@media (width<=420px){.spot{--spot-w:74px;--spot-h:54px}}.theme-wide{grid-column:1/-1;grid-auto-flow:column;justify-content:start;align-items:center;gap:12px;min-height:0;padding:16px 18px}.ember-frame{z-index:25;pointer-events:none;animation:1.6s ease-in-out infinite alternate ember-glow;position:fixed;inset:0}@keyframes ember-glow{0%{box-shadow:inset 0 0 0 3px oklch(66% .21 35),inset 0 0 40px 2px oklch(60% .23 28/.4)}to{box-shadow:inset 0 0 0 5px oklch(78% .18 60),inset 0 0 90px 10px oklch(64% .23 35/.6)}}.ember{bottom:-12px;left:var(--x);z-index:25;pointer-events:none;opacity:0;width:6px;height:6px;animation:ember-rise var(--d) linear infinite;animation-delay:var(--delay);background:oklch(84% .16 70);border-radius:50%;position:fixed;box-shadow:0 0 8px 2px oklch(70% .2 45/.7)}@keyframes ember-rise{0%{opacity:0;transform:translate(0)scale(1)}10%{opacity:1}to{transform:translate(var(--drift), -55vh) scale(.3);opacity:0}}.burst{z-index:60;pointer-events:none;animation:burst-bg 1.5s var(--ease-out) forwards;background:radial-gradient(circle,oklch(55% .22 30/.85),oklch(20% .08 25/.92) 70%);align-content:center;place-items:center;gap:8px;display:grid;position:fixed;inset:0}@keyframes burst-bg{0%{opacity:0}12%{opacity:1}70%{opacity:1}to{opacity:0}}.burst-text{font-family:var(--display);letter-spacing:-.02em;color:oklch(90% .15 85);text-shadow:0 6px oklch(45% .18 30),0 0 40px oklch(70% .22 40/.8);animation:burst-pop .9s var(--ease-out) both;font-size:clamp(3.2rem,17vw,7.5rem);font-weight:800;line-height:.9}.burst-sub{color:oklch(95% .03 80);animation:burst-pop .9s .12s var(--ease-out) both;font-size:1.2rem;font-weight:700}.burst svg{color:oklch(82% .18 60);animation:burst-pop .7s var(--ease-out) both}@keyframes burst-pop{0%{opacity:0;transform:scale(.3)rotate(-8deg)}55%{opacity:1;transform:scale(1.15)rotate(3deg)}75%{transform:scale(.96)rotate(-1deg)}to{opacity:1;transform:scale(1)rotate(-2deg)}}
