.lab{--th: 72px}.lab-head{padding:92px var(--gutter) 18px;text-align:center}.lab-head h1{font-size:clamp(40px,10vw,64px)}.lab-head p{margin:10px auto 0;font-size:16px;max-width:40ch}.view{padding:0 var(--gutter)}.stage{--card: min(40svh, 400px);display:grid;grid-template-columns:minmax(0,var(--card)) auto minmax(0,var(--card));justify-content:center;align-items:center;gap:clamp(8px,2vw,28px)}.stage.solo{grid-template-columns:minmax(0,min(52svh,480px))}.stage.solo .arrow,.stage.solo .next{display:none}.card{margin:0;aspect-ratio:1;border-radius:6%;overflow:hidden;background:#fff;position:relative;box-shadow:0 30px 60px -28px #11111152,0 2px 8px #1111110f,inset 0 0 0 1px #1111110a;transition:transform .8s var(--spring),opacity .5s var(--soft),filter .5s var(--soft)}.card canvas{width:100%;height:100%}.card.dim{opacity:.55}.card:after{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);translate:-70% 0}.card.sweep:after{animation:sweep 1.1s var(--soft)}@keyframes sweep{0%{opacity:1;translate:-70% 0}to{opacity:1;translate:70% 0}}.arrow{color:#11111159}.arrow svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ladder{list-style:none;margin:20px auto 0;padding:0;display:flex;justify-content:center;gap:clamp(6px,1vw,10px)}.ladder li{width:clamp(28px,3vw,40px);aspect-ratio:1;border-radius:22%;overflow:hidden;background:#fff;box-shadow:0 6px 14px -8px #1111114d,inset 0 0 0 1px #1111110d;opacity:.35;transition:opacity .5s,transform .6s var(--spring),box-shadow .4s}.ladder li canvas{width:100%;height:100%}.ladder li.done{opacity:.7}.ladder li.at{opacity:1;transform:scale(1.12);box-shadow:0 0 0 2px var(--ink),0 10px 20px -10px #1116}.ladder li.to{opacity:1;box-shadow:0 0 0 2px #00e,0 10px 20px -10px #1111114d}.side{max-width:560px;margin:0 auto;padding:0 var(--gutter)}.act[hidden],.pickers[hidden]{display:none}.act{display:grid;justify-items:center;gap:10px;padding:24px 0 0;text-align:center}.act .btn:disabled{opacity:.35;cursor:default;transform:none}.small{font-size:14px;margin:0;max-width:44ch}.status{text-align:center;min-height:1.4em;margin:10px 0 40px;font-size:14.5px}.pickers{padding-top:22px}.pickers .who{justify-content:center;margin-bottom:4px;font-size:15px}.pickers h2{margin:14px 0 6px;font-size:17px;letter-spacing:-.02em}.row{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}.pick{flex:none;display:grid;justify-items:center;width:var(--th);border:0;padding:0;background:none;cursor:pointer;scroll-snap-align:start;text-align:center;font-size:12.5px;font-weight:600;color:var(--mut)}.pick .t{display:block;width:var(--th);aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff;margin-bottom:5px;box-shadow:0 8px 18px -10px #1111114d,inset 0 0 0 1px #1111110d;transition:transform .45s var(--spring),box-shadow .3s}.pick .t>*{width:100%;height:100%}.pick:hover .t{transform:scale(1.04)}.pick[hidden]{display:none}.pick[aria-checked=true]{color:var(--ink)}.pick[aria-checked=true] .t{box-shadow:0 0 0 2.5px var(--ink),0 12px 24px -12px #11111173}.pick:disabled{opacity:.3;cursor:default}.pick:disabled .t{transform:none}.row .empty{color:var(--mut);font-size:14px;padding:8px 0}.card.burn{transform:scale(.82) translateY(10px);opacity:0;filter:blur(8px) brightness(1.6)}@media(min-width:1000px){.lab{max-width:var(--wide);min-height:100svh;margin:0 auto;padding:84px var(--gutter) 28px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"view ." "view head" "view side" "view .";column-gap:clamp(40px,5vw,80px);align-content:center}.lab-head{grid-area:head;align-self:end;padding:0;text-align:left}.lab-head h1{font-size:clamp(48px,4.6vw,72px)}.lab-head p{margin:12px 0 0}.view{grid-area:view;align-self:center;padding:0}.stage{--card: min( calc(100svh - 250px) , 470px)}.stage.solo{grid-template-columns:minmax(0,min(calc(100svh - 230px),540px))}.side{grid-area:side;margin:0;padding:0;max-width:none}.act{justify-items:start;text-align:left}.status{text-align:left;margin:12px 0 0}.pickers .who{justify-content:flex-start}.row{margin:0 -4px}}@media(min-width:1000px)and (max-height:760px){.lab{--th: 62px}}@media(max-width:720px){.lab-head{padding-top:78px;padding-bottom:14px}.lab-head h1{font-size:42px}.lab-head p{font-size:14.5px;margin-top:6px}.ladder{margin-top:14px}.pickers{padding-top:14px}.pickers h2{margin-top:8px}.stage{--card: min(42vw, 36svh)}.stage.solo{grid-template-columns:minmax(0,min(78vw,46svh))}.arrow svg{width:18px;height:18px}.lab{--th: 60px}}
