@font-face{font-family:Silkscreen;src:url(/fonts/silkscreen-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Silkscreen;src:url(/fonts/silkscreen-latin-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/ibm-plex-mono-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--font-pixel: "Silkscreen", "Courier New", monospace;--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--bg: #c9d2dd;--bg-deep: #a9b5c5;--grid-line: rgba(34, 36, 42, .05);--grid-coarse: rgba(34, 36, 42, .09);--ink: #22242a;--ink-soft: #4a505c;--outline: #22242a;--seam: #22242a;--glyph: #22242a;--bevel-light: rgba(255, 255, 255, .62);--bevel-light-hot: rgba(255, 255, 255, .88);--bevel-dark: rgba(0, 0, 0, .28);--cell-sheen-top: rgba(255, 255, 255, .3);--cell-sheen-bottom: rgba(0, 0, 0, .1);--cell-scan: rgba(0, 0, 0, .055);--contact: rgba(34, 36, 42, .26);--piece-glow: transparent;--cast-off: drop-shadow(0 0 0 transparent);--cast-on: drop-shadow(0 2px 0 var(--contact));--cast-hover: drop-shadow(0 2px 0 var(--contact));--card-bg: #fbfcfe;--card-line: #22242a;--card-ink: #22242a;--card-shadow: rgba(34, 36, 42, .35);--tile-fill: #9dabbb;--tile-line: #22242a;--tile-glyph: #2b2f38;--filler-fill: #b3bdc9;--filler-fill-b: #aab5c2;--filler-fill-c: #bcc5d0;--filler-line: rgba(34, 36, 42, .3);--empty-line: rgba(34, 36, 42, .4);--ghost-line: rgba(34, 36, 42, .2);--flash: #ffffff;--scanline: rgba(34, 36, 42, .045);--focus: #1a4fd6;--logo-outline: #c8371f;--chassis-top: #1c2027;--chassis-bottom: #0e1015;--chassis-edge: #050608;--chassis-inlay: rgba(255, 255, 255, .07);--chassis-line: #39404d;--chassis-dot: rgba(228, 222, 206, .42);--chassis-ink: #e9e3d3;--chassis-ink-soft: #a9a292;--chassis-well: #06070a;--lcd: #a8f533;--lcd-off: rgba(168, 245, 51, .12);--key: #ffc93c;--gravity: cubic-bezier(.4, 0, .85, .42);--ambient-cell: 48px;--ambient-x: 0px;--ambient-y: 0px;--hud-height: 3.4rem;--field-height-budget: calc( 100dvh - var(--hud-height) - var(--panel-height) - 7rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) )}:root[data-theme=dark]{--bg: #141519;--bg-deep: #08090c;--grid-line: rgba(243, 236, 219, .03);--grid-coarse: rgba(243, 236, 219, .065);--ink: #f3ecdb;--ink-soft: #9c968a;--outline: #f3ecdb;--seam: rgba(243, 236, 219, .4);--glyph: #f3ecdb;--bevel-light: rgba(255, 255, 255, .14);--bevel-light-hot: rgba(255, 255, 255, .3);--bevel-dark: rgba(0, 0, 0, .45);--cell-sheen-top: rgba(255, 255, 255, .09);--cell-sheen-bottom: rgba(0, 0, 0, .3);--cell-scan: rgba(0, 0, 0, .22);--contact: rgba(0, 0, 0, .62);--cast-off: drop-shadow(0 0 0 transparent);--cast-on: drop-shadow(0 0 10px var(--piece-glow)) drop-shadow(0 2px 0 var(--contact));--cast-hover: drop-shadow(0 0 14px var(--piece-glow)) drop-shadow(0 2px 0 var(--contact));--card-bg: #16181d;--card-line: #f3ecdb;--card-ink: #f3ecdb;--card-shadow: rgba(0, 0, 0, .7);--tile-fill: #2b2f39;--tile-line: rgba(243, 236, 219, .34);--tile-glyph: #cfc8b8;--filler-fill: #22252d;--filler-fill-b: #1e212a;--filler-fill-c: #272a33;--filler-line: rgba(243, 236, 219, .14);--empty-line: rgba(243, 236, 219, .22);--ghost-line: rgba(243, 236, 219, .13);--flash: #fff8e6;--scanline: rgba(0, 0, 0, .1);--focus: #8ab4ff;--logo-outline: #8f3a22}*,*:before,*:after{box-sizing:border-box}html{height:100%;background:var(--bg);overscroll-behavior:none;-webkit-text-size-adjust:100%}body{position:relative;min-height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-mono);overflow-x:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.hud,.shell,.piece,.filler,.ghost,.egg,.cursor,.panel__hint,.panel__open{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.panel__readout{user-select:text;-webkit-user-select:text}img{-webkit-user-drag:none;user-select:none}a{color:inherit}a,button{touch-action:manipulation}:where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}.js .piece--product:focus-visible{outline:none}.hud__logo:focus-visible,.theme-toggle:focus-visible,.sound-toggle:focus-visible,.panel__hint:focus-visible{outline:1px solid var(--key);outline-offset:2px}.theme-toggle:focus-visible .icon,.sound-toggle:focus-visible .icon{opacity:1;transform:translateY(-1px)}.panel__hint:focus-visible{--lift: var(--keycap-travel);--crate-hi: rgba(255, 255, 255, .34)}.hud__logo:focus-visible{color:#fff;--logo-outline: #e8501f}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ambience{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(ellipse 76% 66% at 50% 42%,transparent 35%,var(--bg-deep) 100%),repeating-linear-gradient(to right,var(--grid-coarse) 0 1px,transparent 1px calc(var(--ambient-cell) * 4)),repeating-linear-gradient(to bottom,var(--grid-coarse) 0 1px,transparent 1px calc(var(--ambient-cell) * 4)),repeating-linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px var(--ambient-cell)),repeating-linear-gradient(to bottom,var(--grid-line) 0 1px,transparent 1px var(--ambient-cell));background-position:0 0,var(--ambient-x) var(--ambient-y),var(--ambient-x) var(--ambient-y),var(--ambient-x) var(--ambient-y),var(--ambient-x) var(--ambient-y)}.scanlines{position:fixed;inset:0;z-index:6;background:repeating-linear-gradient(to bottom,var(--scanline) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;pointer-events:none}:root[data-theme=dark] .scanlines{mix-blend-mode:normal;opacity:.45}.shell{--chassis-pad: max(clamp(.5rem, 2.4vw, 1.75rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));--chassis-max: 1160px;--chassis-avail: min(100vw - 2 * var(--chassis-pad), var(--chassis-max));--cell-fit-w: calc(var(--chassis-avail) / var(--cols));--cell-fit-h: calc(var(--field-height-budget) / var(--rows));--cell: clamp(16px, min(var(--cell-fit-w), var(--cell-fit-h)), 72px);--chassis-w: calc(var(--cols) * var(--cell));--cell-radius: clamp(2px, calc(var(--cell) * .055), 4px);--seam-w: clamp(2px, calc(var(--cell) * .065), 5px);--bevel-w: clamp(2px, calc(var(--cell) * .1), 7px);--bevel-hi-w: clamp(1px, calc(var(--cell) * .035), 3px);--bevel-lo-w: clamp(2px, calc(var(--cell) * .055), 4px);--keycap-lip: 1px;--keycap-travel: 1px;--keycap-lip-ink: rgba(0, 0, 0, .5);--crate-hi: rgba(255, 255, 255, .2);--crate-lo: rgba(0, 0, 0, .5);position:relative;z-index:1;display:flex;flex-direction:column;min-height:100dvh}.hud{position:relative;z-index:8;padding:calc(clamp(.5rem,1.4vw,1rem) + env(safe-area-inset-top,0px)) var(--chassis-pad) 0}.hud__chassis{width:var(--chassis-w);margin-inline:auto;display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.25rem);min-height:var(--hud-height);padding:.4rem clamp(.55rem,1.5vw,1.1rem);border:2px solid var(--chassis-edge);border-radius:12px;background:linear-gradient(to bottom,var(--chassis-top) 0%,var(--chassis-bottom) 100%);box-shadow:inset 0 0 0 2px var(--chassis-inlay),inset 0 3px 0 -1px #ffffff17,inset 0 -3px 0 -1px #0009,0 2px 0 var(--keycap-lip-ink);color:var(--chassis-ink);font-family:var(--font-pixel)}.hud__logo{flex:none;display:flex;align-items:center;color:#fdfbf4;font-size:clamp(1.1rem,2.5vw,1.85rem);letter-spacing:.08em;line-height:1;text-decoration:none;text-shadow:2px 0 0 var(--logo-outline),-2px 0 0 var(--logo-outline),0 2px 0 var(--logo-outline),0 -2px 0 var(--logo-outline),2px 2px 0 var(--logo-outline),-2px 2px 0 var(--logo-outline),2px -2px 0 var(--logo-outline),-2px -2px 0 var(--logo-outline),0 4px 0 rgba(0,0,0,.55)}.hud__logo>span{display:block;padding-bottom:4px}.hud__logo:hover{color:#fff;--logo-outline: #e8501f}.hud__divider{flex:none;align-self:stretch;width:2px;margin-block:.45rem;background-image:repeating-linear-gradient(to bottom,var(--chassis-dot) 0 3px,transparent 3px 7px)}.hud__counter,.hud__next{display:flex;margin:0;padding:.3rem .75rem;border-radius:6px;background:#00000052;box-shadow:inset 0 0 0 2px var(--chassis-line),inset 0 3px 6px #000000a6,0 1px #ffffff0f;color:var(--chassis-ink-soft)}.hud__counter{align-items:center;gap:.7em;margin-inline:auto;font-size:clamp(.6rem,1.05vw,.85rem);letter-spacing:.14em}.hud__digits{display:inline-grid;padding:.18em .4em;border-radius:3px;background:var(--chassis-well);box-shadow:inset 0 0 0 2px #000c,inset 0 2px 5px #000000e6;font-size:1.35em;font-weight:700;letter-spacing:.12em}.hud__digits-ghost,.hud__digits-value{grid-area:1 / 1}.hud__digits-ghost{color:var(--lcd-off)}.hud__digits-value{color:var(--lcd);text-shadow:0 0 7px rgba(168,245,51,.55)}.hud__next{flex:none;flex-direction:column;align-items:center;gap:.3em;padding:.25rem .6rem;font-size:clamp(.5rem,.85vw,.68rem);letter-spacing:.14em}.hud__next-mark{color:var(--chassis-ink);font-size:1.05em;text-shadow:0 2px 0 rgba(0,0,0,.5)}.hud__next-teaser{max-width:12ch;overflow:hidden;color:var(--chassis-ink);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap}.hud__keys{display:flex;flex:none;align-items:center;gap:clamp(.1rem,.6vw,.5rem)}.theme-toggle,.sound-toggle{display:flex;flex:none;align-items:center;justify-content:center;gap:.5rem;padding:.3rem .4rem;border:0;border-radius:6px;background:transparent;cursor:pointer}.theme-toggle .icon,.sound-toggle .icon{width:clamp(1rem,1.7vw,1.45rem);height:clamp(1rem,1.7vw,1.45rem);transition:opacity .13s steps(2,end),transform .13s steps(2,end)}.sound-toggle .icon{opacity:.55}.sound-toggle .spk-wave,.sound-toggle[aria-pressed=true] .spk-mute{opacity:0}.sound-toggle[aria-pressed=true] .icon,.sound-toggle[aria-pressed=true] .spk-wave{opacity:1}.theme-toggle .icon-moon,:root[data-theme=dark] .theme-toggle .icon-sun{opacity:.32}:root[data-theme=dark] .theme-toggle .icon-moon{opacity:1}.theme-toggle:hover .icon,.sound-toggle:hover .icon{opacity:1;transform:translateY(-1px)}.stage{display:grid;flex:1;place-items:center;padding:clamp(.5rem,2vh,1.5rem) var(--chassis-pad)}.playfield{position:relative;width:var(--chassis-w);height:calc(var(--rows) * var(--cell))}@media(max-width:699px){html,body{height:100svh;overflow:hidden}.shell{--chassis-pad: max(.4rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));--hud-height: 3rem;--panel-height: 3.05rem;--field-height-budget: calc( 100svh - var(--hud-height) - var(--panel-height) - 1.6rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) );--cell: clamp(34px, min(var(--cell-fit-w), var(--cell-fit-h)), 72px);height:100svh;min-height:0}.hud{padding-top:calc(.35rem + env(safe-area-inset-top,0px))}.stage{align-items:end;padding-block:.25rem}}.js .playfield{visibility:hidden;animation:reveal 1ms linear 1.2s forwards}.js .playfield.is-ready{visibility:visible;animation:none}@keyframes reveal{to{visibility:visible}}.piece,.filler,.ghost{position:absolute;left:calc(var(--gx) * var(--cell));top:calc(var(--gy) * var(--cell))}.piece.is-inert{pointer-events:none}.piece{--lift: 0px;width:calc(var(--pw) * var(--cell));height:calc(var(--ph) * var(--cell));color:inherit;text-decoration:none;z-index:3}.piece__drop,.piece__spin,.piece__bob,.piece__lift,.piece__body{display:block;width:100%;height:100%}.piece__spin{transform-origin:50% 50%}.piece__drop{position:relative}.piece__lift{transform:translate3d(0,calc(-1 * var(--lift)),0);transition:transform .13s steps(2,end)}.piece:hover,.piece:focus-visible{--lift: var(--keycap-travel)}.piece:hover .cell,.piece:focus-visible .cell{--bev-hi: var(--bevel-light-hot)}.piece:active{--lift: calc(-1 * var(--keycap-travel))}.piece:active .cell{--bev-hi: var(--bevel-dark);--bev-lo: var(--bevel-light);transition-duration:60ms}.piece:active .piece__lift{transition-duration:60ms}.piece__body{position:relative;transform-origin:50% 100%;filter:var(--cast-on);transition:filter .13s steps(2,end)}.piece:hover .piece__body,.piece:focus-visible .piece__body{filter:var(--cast-hover)}.piece__trail{position:absolute;bottom:100%;left:14%;width:72%;height:calc(var(--cell) * 1.2);background-image:repeating-linear-gradient(to bottom,var(--trail) 0 26%,transparent 26% 52%),repeating-linear-gradient(to bottom,var(--trail) 0 26%,transparent 26% 52%),repeating-linear-gradient(to bottom,var(--trail) 0 26%,transparent 26% 52%);background-repeat:no-repeat;background-position:6% 100%,50% 100%,94% 100%;background-size:2px 62%,2px 88%,2px 48%;opacity:0;pointer-events:none}.cell{--bev-hi: var(--bevel-light);--bev-lo: var(--bevel-dark);--lip: calc(var(--e-bottom, 1) * var(--keycap-lip));position:absolute;left:calc(var(--cx) * var(--cell));top:calc(var(--cy) * var(--cell));display:grid;place-items:center;width:var(--cell);height:var(--cell);border-radius:var(--cell-radius);background-color:var(--piece-fill);background-image:repeating-linear-gradient(to bottom,var(--cell-scan) 0 1px,transparent 1px 3px),linear-gradient(to bottom,var(--cell-sheen-top) 0%,transparent 38%,transparent 70%,var(--cell-sheen-bottom) 100%);box-shadow:0 var(--lip) 0 0 var(--keycap-lip-ink),inset 0 0 0 var(--seam-w) var(--seam),inset 0 var(--bevel-hi-w) 0 calc(-1 * var(--seam-w)) var(--bev-hi),inset var(--bevel-hi-w) 0 0 calc(-1 * var(--seam-w)) var(--bev-hi),inset 0 calc(-1 * var(--bevel-lo-w)) 0 calc(-1 * var(--seam-w)) var(--bev-lo),inset calc(-1 * var(--bevel-lo-w)) 0 0 calc(-1 * var(--seam-w)) var(--bev-lo);transition:box-shadow .13s steps(2,end)}.cell__mark{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:var(--glyph);pointer-events:none}.cell__glyph{font-family:var(--font-pixel);font-size:clamp(11px,calc(var(--cell) * .4),30px);font-weight:700;line-height:1;text-shadow:1px 1px 0 var(--bevel-light)}.cell__art,.cell__mark .pixel-logo{width:72%;height:72%;image-rendering:pixelated}:root[data-theme=dark] .cell__art,:root[data-theme=dark] .piece__badge img{filter:invert(1) hue-rotate(180deg) drop-shadow(0 0 3px var(--piece-glow))}.piece--product{--piece-fill: var(--accent);--piece-glow: var(--accent);--trail: var(--accent)}:root[data-theme=dark] .piece--product{--piece-fill: color-mix(in srgb, var(--accent-dark) 24%, #12141a);--piece-glow: color-mix(in srgb, var(--accent-dark) 72%, transparent);--trail: var(--accent-dark);--seam: var(--accent-dark);--glyph: var(--accent-dark);--cell-sheen-top: color-mix(in srgb, var(--accent-dark) 12%, transparent)}:root[data-theme=dark] .cell__glyph{text-shadow:0 0 6px var(--piece-glow)}.piece--link{--piece-fill: var(--tile-fill);--seam: var(--tile-line);--seam-w: 2px;--glyph: var(--tile-glyph);--trail: var(--ink-soft);z-index:2}:root[data-theme=dark] .piece--link{--cast-on: drop-shadow(0 2px 0 var(--contact));--cast-hover: drop-shadow(0 2px 0 var(--contact))}.piece--link .cell__glyph{font-size:clamp(18px,calc(var(--cell) * .75),44px);text-shadow:none}.piece--link .cell__art,.piece--link .cell__mark .pixel-logo{width:58%;height:58%}.piece--link[data-piece=github] .cell__art,.piece--link[data-piece=x] .cell__art{width:100%;height:100%}.piece--link[data-piece=kshift] .cell__art{width:60%;height:60%}.piece--link:hover,.piece--link:focus-visible{z-index:6}.piece--link:after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;z-index:1;padding:.35em .55em;border:2px solid var(--card-line);border-radius:3px;background:var(--card-bg);box-shadow:3px 3px 0 var(--card-shadow);color:var(--card-ink);font-family:var(--font-pixel);font-size:clamp(8px,calc(var(--cell) * .2),12px);white-space:nowrap;opacity:0;transform:translate(-50%) scale(.92);transition:opacity .11s steps(2,end),transform .11s steps(2,end);pointer-events:none}.piece--link:hover:after,.piece--link:focus-visible:after{opacity:1;transform:translate(-50%) scale(1)}.filler{width:var(--cell);height:var(--cell);border-radius:var(--cell-radius);background-color:var(--filler-fill);background-image:linear-gradient(to bottom,rgba(255,255,255,.14) 0%,transparent 45%,rgba(0,0,0,.14) 100%);box-shadow:inset 0 0 0 2px var(--filler-line),inset 0 var(--bevel-hi-w) 0 -2px var(--bevel-light),inset var(--bevel-hi-w) 0 0 -2px var(--bevel-light),inset 0 calc(-1 * var(--bevel-lo-w)) 0 -2px var(--bevel-dark),inset calc(-1 * var(--bevel-lo-w)) 0 0 -2px var(--bevel-dark);z-index:1}.filler[data-tone="1"]{background-color:var(--filler-fill-b)}.filler[data-tone="2"]{background-color:var(--filler-fill-c)}.filler.filler--empty{background-color:transparent;background-image:none;border:2px dashed var(--empty-line);box-shadow:none}.piece__skin{position:absolute;inset:0;background-image:var(--skin-light, none);background-position:center;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;pointer-events:none}:root[data-theme=dark] .piece__skin{background-image:var(--skin-dark, none)}.piece--skinned .cell{--bevel-light: rgba(255, 255, 255, .5);--bevel-light-hot: rgba(255, 255, 255, .78);--bevel-dark: rgba(0, 0, 0, .32);--seam-in: color-mix(in srgb, var(--seam) 40%, transparent);--seam-in-w: max(1px, calc(var(--cell) * .02));background-color:transparent;background-image:none;box-shadow:0 var(--lip) 0 0 var(--keycap-lip-ink),inset 0 calc(var(--e-top, 1) * var(--seam-w)) 0 0 var(--seam),inset 0 calc(-1 * var(--e-bottom, 1) * var(--seam-w)) 0 0 var(--seam),inset calc(var(--e-left, 1) * var(--seam-w)) 0 0 0 var(--seam),inset calc(-1 * var(--e-right, 1) * var(--seam-w)) 0 0 0 var(--seam),inset 0 calc((1 - var(--e-top, 1)) * var(--seam-in-w)) 0 0 var(--seam-in),inset 0 calc((1 - var(--e-bottom, 1)) * -1 * var(--seam-in-w)) 0 0 var(--seam-in),inset calc((1 - var(--e-left, 1)) * var(--seam-in-w)) 0 0 0 var(--seam-in),inset calc((1 - var(--e-right, 1)) * -1 * var(--seam-in-w)) 0 0 0 var(--seam-in),inset 0 calc(var(--e-top, 1) * var(--bevel-hi-w)) 0 calc(-1 * var(--e-top, 1) * var(--seam-w)) var(--bev-hi),inset calc(var(--e-left, 1) * var(--bevel-hi-w)) 0 0 calc(-1 * var(--e-left, 1) * var(--seam-w)) var(--bev-hi),inset 0 calc(-1 * var(--e-bottom, 1) * var(--bevel-lo-w)) 0 calc(-1 * var(--e-bottom, 1) * var(--seam-w)) var(--bev-lo),inset calc(-1 * var(--e-right, 1) * var(--bevel-lo-w)) 0 0 calc(-1 * var(--e-right, 1) * var(--seam-w)) var(--bev-lo)}.piece--skinned .cell{border-top-left-radius:calc(var(--e-top, 1) * var(--e-left, 1) * var(--cell-radius));border-top-right-radius:calc(var(--e-top, 1) * var(--e-right, 1) * var(--cell-radius));border-bottom-left-radius:calc(var(--e-bottom, 1) * var(--e-left, 1) * var(--cell-radius));border-bottom-right-radius:calc(var(--e-bottom, 1) * var(--e-right, 1) * var(--cell-radius))}:root[data-theme=dark] .piece--skinned .cell{--bevel-light: color-mix(in srgb, var(--accent-dark) 40%, rgba(255, 255, 255, .34));--bevel-light-hot: color-mix(in srgb, var(--accent-dark) 55%, rgba(255, 255, 255, .6));--bevel-dark: rgba(0, 0, 0, .55)}.piece__over{position:absolute;inset:0;z-index:4;pointer-events:none}.piece__badge{position:absolute;left:calc(var(--badge-x) * var(--cell));top:calc(var(--badge-y) * var(--cell));z-index:2;display:grid;place-items:center;width:calc(var(--cell) * .4);height:calc(var(--cell) * .4);transform:translate(-50%,-50%);pointer-events:none}.piece__badge img{width:100%;height:100%;image-rendering:pixelated}.eye{--pupil-x: 0;--pupil-y: 0;--eye-unit: calc(var(--eye-size, .3) * var(--cell));--eye-w: max(9px, calc(var(--eye-unit) * var(--eye-scale, 1)));--eye-step: calc(var(--eye-unit) * .07);--eye-ring: clamp(1px, calc(var(--eye-unit) * .075), 2px);--eye-stroke: clamp(2px, calc(var(--eye-unit) * .16), 3px);--eye-glint-w: clamp(1px, calc(var(--eye-unit) * .15), 3px);position:absolute;left:calc(var(--eye-x) * var(--cell));top:calc(var(--eye-y) * var(--cell));width:var(--eye-w);height:var(--eye-w);transform:translate(-50%,-50%);pointer-events:none}.eye__ball{position:absolute;inset:0;overflow:hidden;border-radius:46% 46% 50% 50%;background:var(--eye-white);box-shadow:0 0 0 var(--eye-ring) var(--eye-rim)}.eye__lid{position:absolute;top:0;left:0;z-index:4;width:100%;height:0;background:var(--eye-lid-ink);border-bottom-left-radius:var(--eye-stroke);border-bottom-right-radius:var(--eye-stroke)}.eye[data-lid=half] .eye__lid{height:40%}.eye__lash{position:absolute;left:-1%;right:-1%;top:24%;height:44%;border-bottom:var(--eye-stroke) solid var(--eye-lash);border-radius:0 0 46% 46% / 0 0 var(--lash-bow, 6%) var(--lash-bow, 6%);filter:drop-shadow(0 1px 0 var(--eye-white));opacity:0}.piece--product{--eye-white: #fbf9f2;--eye-rim: #1b1d22;--eye-pupil: #1b1d22;--eye-spark: #ffffff;--eye-lash: #1b1d22;--eye-lid-ink: #1b1d22;--mouth-lit: rgba(255, 255, 255, .6)}:root[data-theme=dark] .piece--product{--eye-white: color-mix(in srgb, var(--accent-dark) 14%, #fdf6e4);--eye-rim: #0a0b0e;--eye-pupil: #07080b;--eye-spark: #ffffff;--eye-lash: color-mix(in srgb, var(--accent-dark) 82%, #fdfaf0);--eye-lid-ink: #0a0b0e;--mouth-lit: rgba(255, 253, 240, .75)}:root[data-theme=dark] .eye__lash{filter:drop-shadow(0 0 3px var(--piece-glow))}.eye__track{position:absolute;inset:0;transform:translate(calc(var(--pupil-x) * var(--eye-step)),calc(var(--pupil-y) * var(--eye-step)));transition:transform 90ms steps(2,end)}.eye__pupil{position:absolute;left:50%;top:50%;z-index:2;width:46%;height:46%;border-radius:50%;background:var(--eye-pupil);transform:translate(-50%,-50%)}.eye__glint{position:absolute;z-index:3;top:28%;left:28%;width:var(--eye-glint-w);height:var(--eye-glint-w);background:var(--eye-spark)}.mouth{--mouth-w: max(7px, calc(var(--mouth-size, .16) * var(--cell)));--mouth-stroke: clamp(2px, calc(var(--mouth-w) * .22), 3px);--mouth-rim: clamp(1px, calc(var(--mouth-w) * .09), 2px);position:absolute;left:calc(var(--mouth-x) * var(--cell));top:calc(var(--mouth-y) * var(--cell));width:var(--mouth-w);height:calc(var(--mouth-w) * var(--mouth-open, 1));border:var(--mouth-stroke) solid var(--face-ink, currentColor);border-radius:calc(var(--mouth-open, 1) * 50%);box-shadow:0 0 0 var(--mouth-rim) var(--eye-rim),inset 0 calc(-1 * var(--mouth-rim)) 0 var(--mouth-lit);transform:translate(-50%,-50%);pointer-events:none}:root{--face-ink-1: var(--logo-outline);--face-ink-2: var(--key);--face-ink-3: var(--lcd)}:root[data-theme=dark]{--face-ink-1: #e8501f}:root[data-theme=dark] .mouth{filter:drop-shadow(0 0 4px var(--piece-glow))}.js .playfield.is-idle .eye:not([data-lid=squint]) .eye__ball{animation:eye-open var(--blink-period, 6s) steps(1,end) var(--blink-delay, 0s) infinite}.js .playfield.is-idle .eye:not([data-lid=squint]) .eye__lash{animation:eye-shut var(--blink-period, 6s) steps(1,end) var(--blink-delay, 0s) infinite}.js .playfield.is-idle .piece[data-face=keeper] .eye__pupil{animation:eye-glance 10s linear var(--blink-delay, 0s) infinite}.js .playfield.is-idle .piece[data-face=collector] .eye__pupil{animation:eye-peek 7.5s steps(1,end) var(--blink-delay, 0s) infinite}.js .playfield.is-idle .piece[data-face=watcher] .eye:not([data-lid=squint]) .eye__ball{animation-name:eye-open-double;animation-duration:calc(var(--blink-period, 6s) * 2.6)}.js .playfield.is-idle .piece[data-face=watcher] .eye:not([data-lid=squint]) .eye__lash{animation-name:eye-shut-double;animation-duration:calc(var(--blink-period, 6s) * 2.6)}.js .playfield.is-idle .piece[data-face=calm] .eye__ball,.js .playfield.is-idle .piece[data-face=calm] .eye__lash{animation-duration:var(--bob-period, 2.6s);animation-delay:var(--bob-delay, 0s)}.js .playfield.is-entering .piece[data-face=mascot] .mouth{animation:mouth-pop .3s steps(3,end) calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s)) both}.piece[data-face=mascot].is-squeezing .mouth{animation:mouth-pop .3s steps(3,end)}.js .playfield .piece--product:hover .eye__ball,.js .playfield .piece--product:focus-visible .eye__ball,.playfield .piece--product:hover .eye__ball,.playfield .piece--product:focus-visible .eye__ball{animation:none;opacity:0}.js .playfield .piece--product:hover .eye__lash,.js .playfield .piece--product:focus-visible .eye__lash,.playfield .piece--product:hover .eye__lash,.playfield .piece--product:focus-visible .eye__lash{animation:none;opacity:1}.piece--product:hover .eye,.piece--product:focus-visible .eye{--lash-bow: 96%}.js .playfield.is-asleep .eye__ball,.playfield.is-asleep .eye__ball{animation:none;opacity:0}.js .playfield.is-asleep .eye__lash,.playfield.is-asleep .eye__lash{animation:none;opacity:1}.js .playfield.is-asleep .mouth,.playfield.is-asleep .mouth{--mouth-open: 0;animation:none}.eye[data-lid=squint]{--lash-bow: 34%}.js .playfield .eye[data-lid=squint] .eye__ball,.playfield .eye[data-lid=squint] .eye__ball{animation:none;opacity:0}.js .playfield .eye[data-lid=squint] .eye__lash,.playfield .eye[data-lid=squint] .eye__lash{animation:none;opacity:1}.piece__sparks{position:absolute;bottom:calc(var(--cell) * -.1);left:50%;z-index:5;width:0;height:0;pointer-events:none}.spark{position:absolute;left:0;bottom:0;width:max(2px,calc(var(--cell) * .055));height:max(2px,calc(var(--cell) * .055));background:var(--spark);box-shadow:max(2px,calc(var(--cell) * .055)) 0 0 var(--spark),calc(-1*max(2px,calc(var(--cell) * .055))) 0 0 var(--spark),0 max(2px,calc(var(--cell) * .055)) 0 var(--spark),0 calc(-1*max(2px,calc(var(--cell) * .055))) 0 var(--spark);opacity:0}.piece--product{--spark: #fffaf0}:root[data-theme=dark] .piece--product{--spark: var(--accent-dark)}.spark:nth-child(1){--spark-dx: calc(var(--cell) * -.62);--spark-dy: calc(var(--cell) * -.34)}.spark:nth-child(2){--spark-dx: calc(var(--cell) * -.2);--spark-dy: calc(var(--cell) * -.5)}.spark:nth-child(3){--spark-dx: calc(var(--cell) * .26);--spark-dy: calc(var(--cell) * -.46)}.spark:nth-child(4){--spark-dx: calc(var(--cell) * .66);--spark-dy: calc(var(--cell) * -.28)}.cursor{--gap: calc(var(--cell) * .15);--arm: max(6px, calc(var(--cell) * .26));--thick: max(2px, calc(var(--cell) * .055));position:absolute;left:calc(var(--gx) * var(--cell) - var(--gap) - var(--thick));top:calc(var(--gy) * var(--cell) - var(--gap) - var(--thick));z-index:7;width:calc(var(--pw) * var(--cell) + 2 * (var(--gap) + var(--thick)));height:calc(var(--ph) * var(--cell) + 2 * (var(--gap) + var(--thick)));pointer-events:none}.cursor__corner{position:absolute;width:var(--arm);height:var(--arm);border:0 solid var(--cursor-ink);filter:drop-shadow(1px 1px 0 rgba(8,9,12,.85))}.cursor__corner:nth-child(1){top:0;left:0;border-top-width:var(--thick);border-left-width:var(--thick)}.cursor__corner:nth-child(2){top:0;right:0;border-top-width:var(--thick);border-right-width:var(--thick)}.cursor__corner:nth-child(3){bottom:0;left:0;border-bottom-width:var(--thick);border-left-width:var(--thick)}.cursor__corner:nth-child(4){bottom:0;right:0;border-bottom-width:var(--thick);border-right-width:var(--thick)}:root,:root[data-theme=dark]{--cursor-ink: var(--key)}.piece--egg.is-dropping .piece__drop{--fall-from: calc(-1 * (var(--gy) * var(--cell) + 6 * var(--cell)));animation:piece-fall .62s var(--gravity) both}.piece--egg.is-dropping .piece__body{animation:piece-impact .26s ease-out .62s both}.piece--egg.is-dropping .piece__trail{animation:trail-in .62s linear both,trail-out .2s linear .7s both}.playfield.is-attracting .cursor{transition:left .32s steps(6,end),top .32s steps(6,end),width .32s steps(6,end),height .32s steps(6,end);animation:attract-pulse 1.1s steps(2,end) infinite}@keyframes attract-pulse{0%,to{opacity:1}50%{opacity:.45}}.rain-layer{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.rain-piece{position:absolute;left:calc(var(--gx) * var(--cell));top:calc(var(--gy) * var(--cell));width:calc(var(--pw) * var(--cell));height:calc(var(--ph) * var(--cell));--fall-from: calc(-1 * (var(--gy) * var(--cell) + 5 * var(--cell)));animation:piece-fall var(--rain-dur, .42s) var(--gravity) var(--rain-delay, 0ms) both}.rain-piece .cell{--bev-hi: var(--bevel-light);--bev-lo: var(--bevel-dark);background-color:var(--rain-fill, var(--tile-fill));background-image:repeating-linear-gradient(to bottom,var(--cell-scan) 0 1px,transparent 1px 3px),linear-gradient(to bottom,var(--cell-sheen-top) 0%,transparent 38%,transparent 70%,var(--cell-sheen-bottom) 100%);border-radius:var(--cell-radius);box-shadow:inset 0 0 0 var(--seam-w) var(--seam),inset 0 var(--bevel-hi-w) 0 calc(-1 * var(--seam-w)) var(--bev-hi),inset 0 calc(-1 * var(--bevel-lo-w)) 0 calc(-1 * var(--seam-w)) var(--bev-lo)}.rain-spark{position:absolute;left:calc(var(--sx) * var(--cell));top:calc(var(--sy) * var(--cell));width:max(2px,calc(var(--cell) * .08));height:max(2px,calc(var(--cell) * .08));background:var(--rain-fill, var(--flash));animation:rain-spark .32s steps(4,end) forwards}@keyframes rain-spark{0%{opacity:1;box-shadow:0 0 0 0 var(--rain-fill, var(--flash)),0 0 0 0 var(--rain-fill, var(--flash)),0 0 0 0 var(--rain-fill, var(--flash)),0 0 0 0 var(--rain-fill, var(--flash));transform:translateZ(0)}to{opacity:0;box-shadow:calc(var(--cell) * -.42) calc(var(--cell) * -.3) 0 0 var(--rain-fill, var(--flash)),calc(var(--cell) * .42) calc(var(--cell) * -.3) 0 0 var(--rain-fill, var(--flash)),calc(var(--cell) * -.28) calc(var(--cell) * .22) 0 0 var(--rain-fill, var(--flash)),calc(var(--cell) * .28) calc(var(--cell) * .22) 0 0 var(--rain-fill, var(--flash));transform:translate3d(0,calc(var(--cell) * -.12),0)}}.js .playfield.is-ready.is-storming{animation:storm-tremble .13s steps(3,end) infinite}@keyframes storm-tremble{0%{transform:translateZ(0)}33%{transform:translate3d(1px,1px,0)}66%{transform:translate3d(-1px,0,0)}to{transform:translateZ(0)}}.rain-flash{position:absolute;inset:0;z-index:3;background:var(--flash);opacity:0;pointer-events:none;animation:rain-flash .42s steps(3,end) forwards}@keyframes rain-flash{0%{opacity:0}18%{opacity:.85}to{opacity:0}}.rain-layer.is-clearing .rain-piece{animation:rain-clear .26s steps(3,end) var(--clear-delay, 0ms) forwards}@keyframes rain-clear{0%{opacity:1;transform:scaleZ(1)}40%{opacity:1;transform:scale3d(1.06,1.06,1)}to{opacity:0;transform:scale3d(.9,.6,1)}}.ghost-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.ghost{top:0;width:calc(var(--gw, 4) * var(--cell));height:calc(2 * var(--cell))}.ghost .cell{background:transparent;border:max(2px,calc(var(--cell) * .045)) dotted var(--ghost-line);border-radius:var(--cell-radius);box-shadow:none}.scan{position:absolute;right:0;left:0;top:calc(var(--scan-row, 0) * var(--cell));z-index:5;height:var(--cell);background:linear-gradient(to bottom,transparent 0%,var(--flash) 22%,var(--flash) 78%,transparent 100%);opacity:0;pointer-events:none}.playfield.is-scanning .scan{opacity:.9}.panel{position:relative;z-index:8;padding:0 var(--chassis-pad) calc(clamp(.85rem,2vh,1.4rem) + env(safe-area-inset-bottom,0px))}.panel__screen{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.1rem);min-height:var(--panel-height);width:var(--chassis-w);margin-inline:auto;padding:.4rem clamp(.45rem,1.2vw,.7rem);border:2px solid var(--panel-edge);border-radius:6px;background-color:var(--panel-bg);background-image:repeating-linear-gradient(to bottom,var(--panel-scan) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 2px var(--panel-inlay),inset 0 3px 8px var(--panel-well),0 2px 0 var(--panel-drop)}.panel__readout{display:grid;flex:1;align-content:center;gap:.15rem;min-width:0;padding-inline:clamp(.2rem,.6vw,.45rem)}.panel__row{display:flex;align-items:center;gap:.4em;margin:0;min-width:0;color:var(--panel-ink);font-family:var(--font-mono);font-size:clamp(.62rem,1.15vw,.86rem);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel__row--head>*{flex:none}.panel__name{color:var(--panel-ink);font-family:var(--font-pixel);font-size:1.05em;letter-spacing:.04em}.panel__chip{padding:.05em .45em;border:1px solid var(--panel-chip-line);border-radius:3px;color:var(--panel-chip-ink);font-family:var(--font-pixel);font-size:.78em;letter-spacing:.06em}.panel[data-state=idle] .panel__row--head{display:none}.panel[data-state=idle] .panel__row--body{color:var(--panel-ink-soft)}.panel__caret{display:none;flex:none;width:.5em;height:1em;margin-left:.15em;background:var(--panel-caret)}.panel.is-typing .panel__caret{display:inline-block;animation:caret-blink .64s steps(1,end) infinite}.panel__open{flex:none;align-self:center;color:var(--panel-ink-soft);font-family:var(--font-pixel);font-size:clamp(.5rem,.92vw,.68rem);letter-spacing:.08em;white-space:nowrap}.panel__open-coarse{display:none}@media(pointer:coarse){.panel__open-fine{display:none}.panel__open-coarse{display:inline}}.panel__hint{--lift: 0px;flex:none;align-self:stretch;padding:.3em .9em;border:2px solid var(--chassis-edge);border-radius:4px;background:linear-gradient(to bottom,var(--chassis-top) 0%,var(--chassis-bottom) 100%);box-shadow:inset 0 0 0 2px var(--chassis-inlay),inset 0 var(--bevel-hi-w) 0 -1px var(--crate-hi),inset var(--bevel-hi-w) 0 0 -1px var(--crate-hi),inset 0 calc(-1 * var(--bevel-lo-w)) 0 -1px var(--crate-lo),inset calc(-1 * var(--bevel-lo-w)) 0 0 -1px var(--crate-lo),0 var(--keycap-lip) 0 var(--keycap-lip-ink);transform:translateY(calc(-1 * var(--lift)));color:var(--chassis-ink);font-family:var(--font-pixel);font-size:clamp(.55rem,1vw,.72rem);letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:transform 90ms steps(2,end),box-shadow 90ms steps(2,end)}.panel__hint:hover{--lift: var(--keycap-travel);--crate-hi: rgba(255, 255, 255, .34)}.panel__hint:active{--lift: calc(-1 * var(--keycap-travel));--crate-hi: rgba(0, 0, 0, .5);--crate-lo: rgba(255, 255, 255, .16);transition-duration:60ms}.panel__key{display:inline-block;padding:.05em .4em;border:2px solid var(--key);border-radius:3px;color:var(--key)}.panel__hint-coarse{display:none}@media(pointer:coarse){.panel__hint-fine{display:none}.panel__hint-coarse{display:inline}}:root{--panel-height: 3.85rem;--panel-bg: #0d0f13;--panel-edge: var(--chassis-edge);--panel-inlay: rgba(255, 255, 255, .06);--panel-well: rgba(0, 0, 0, .7);--panel-drop: rgba(0, 0, 0, .35);--panel-scan: rgba(255, 255, 255, .035);--panel-ink: #e9e3d3;--panel-ink-soft: #8d8878;--panel-caret: #a8f533;--panel-chip-line: rgba(233, 227, 211, .3);--panel-chip-ink: #c3bdac}@media(max-width:699px){.panel{padding-bottom:calc(.35rem + env(safe-area-inset-bottom,0px))}.panel__screen{gap:.35rem}.panel[data-state=piece] .panel__hint{display:none}.panel__hint{padding-inline:.5em;letter-spacing:.02em}}@media(max-width:699px){.hud__chassis{gap:.35rem;padding-inline:.45rem;overflow:hidden}.hud__divider,.hud__counter-word{display:none}.hud__counter,.hud__next{padding-inline:.4rem}.theme-toggle,.sound-toggle{padding-inline:.15rem}.hud__logo{font-size:clamp(.95rem,4.4vw,1.85rem)}.hud__counter{gap:.45em}.hud__next{flex-direction:row;gap:.45em}.hud__next-teaser{max-width:7ch}.theme-toggle .icon-moon{display:none}:root[data-theme=dark] .theme-toggle .icon-moon{display:block}:root[data-theme=dark] .theme-toggle .icon-sun{display:none}}@keyframes piece-fall{0%{transform:translate3d(0,var(--fall-from),0)}to{transform:translateZ(0)}}@keyframes piece-impact{0%{transform:scaleZ(1)}13%{transform:scale3d(calc(1 + (1 - var(--m-squash, .94)) * .6),var(--m-squash, .94),1)}36%{transform:scale3d(calc(1 - (1 - var(--m-squash, .94)) * .18),calc(1 + (1 - var(--m-squash, .94)) * .42),1)}64%{transform:scale3d(1.004,.992,1)}to{transform:scaleZ(1)}}@keyframes piece-tease{0%,56%{transform:rotate(var(--m-tease, 0deg))}to{transform:rotate(0)}}@keyframes piece-sway{0%,to{transform:translateZ(0)}25%{transform:translate3d(var(--m-sway, 0px),0,0)}75%{transform:translate3d(calc(-1 * var(--m-sway, 0px)),0,0)}}@keyframes prop-up{0%,to{transform:translateZ(0)}30%,62%{transform:translate3d(0,calc(-1 * var(--m-prop, 0px)),0)}}@keyframes eye-open{0%,95%{opacity:1}96%,99%{opacity:0}to{opacity:1}}@keyframes eye-shut{0%,95%{opacity:0}96%,99%{opacity:1}to{opacity:0}}@keyframes eye-open-double{0%,90%{opacity:1}90.5%,92%{opacity:0}92.5%,93.5%{opacity:1}94%,95.5%{opacity:0}96%,to{opacity:1}}@keyframes eye-shut-double{0%,90%{opacity:0}90.5%,92%{opacity:1}92.5%,93.5%{opacity:0}94%,95.5%{opacity:1}96%,to{opacity:0}}@keyframes eye-glance{0%,42%{transform:translate(-50%,-50%)}48%,56%{transform:translate(-50%,-50%) translate(calc(-1 * var(--eye-step)))}64%,72%{transform:translate(-50%,-50%) translate(var(--eye-step))}78%,to{transform:translate(-50%,-50%)}}@keyframes eye-peek{0%,66%{transform:translate(-50%,-50%)}70%,80%{transform:translate(-50%,-50%) translate(calc(-.5 * var(--eye-step)),var(--eye-step))}84%,to{transform:translate(-50%,-50%)}}@keyframes mouth-pop{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.5)}62%{transform:translate(-50%,-50%) scale(.88)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes spark-burst{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--spark-dx),var(--spark-dy),0)}}@keyframes caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes cast-snap{0%,99.9%{filter:var(--cast-off)}to{filter:var(--cast-on)}}@keyframes trail-in{0%{opacity:0}18%{opacity:.85}to{opacity:.85}}@keyframes trail-out{0%{opacity:.85}to{opacity:0}}@keyframes piece-bob{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,calc(-1 * var(--m-bob, 2px)),0)}}@keyframes ghost-fall{0%{transform:translateY(calc(-3 * var(--cell)))}to{transform:translateY(calc(var(--rows) * var(--cell)))}}@keyframes hard-drop{0%{transform:translateZ(0)}to{transform:translate3d(0,var(--hard-drop),0)}}@keyframes field-shake{0%{transform:translateZ(0)}22%{transform:translate3d(0,2px,0)}48%{transform:translate3d(-1px,0,0)}74%{transform:translate3d(0,1px,0)}to{transform:translateZ(0)}}@keyframes piece-knock{0%{transform:translateZ(0)}30%{transform:translate3d(0,2px,0)}65%{transform:translate3d(-1px,0,0)}to{transform:translateZ(0)}}@keyframes cell-crumble{0%{opacity:1;transform:scale(1)}45%{opacity:1;transform:scale(.84)}to{opacity:0;transform:scale(.46)}}@keyframes motes{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}.js .playfield.is-entering .piece__drop,.js .playfield.is-entering .filler{--fall-from: calc(-1 * (var(--gy) * var(--cell) + 5 * var(--cell)));animation:piece-fall var(--fall-duration, .56s) var(--gravity) var(--fall-delay, 0ms) both}.js .playfield.is-entering .piece__body{animation:piece-impact .26s ease-out calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s)) both,cast-snap calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s)) linear 0ms both}.js .playfield.is-entering .piece__trail{animation:trail-in var(--fall-duration, .56s) linear var(--fall-delay, 0ms) both,trail-out .2s linear calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s) + 60ms) both}.js .playfield.is-entering .piece[data-motion=tease-rotate] .piece__spin{animation:piece-tease var(--fall-duration, .56s) steps(6,end) var(--fall-delay, 0ms) both}.js .playfield.is-entering .piece[data-motion=sway] .piece__spin{animation:piece-sway var(--fall-duration, .56s) ease-in-out var(--fall-delay, 0ms) 1 both}.playfield.is-clearing .piece--floating[data-motion=sway] .piece__spin{animation:piece-sway .26s ease-in-out calc(var(--order, 0) * 40ms) 1 both}.js .playfield.is-entering .piece[data-motion=prop-up] .piece__spin{animation:prop-up .26s steps(2,end) calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s) + 60ms) both}.js .playfield.is-entering .piece--product .spark{animation:spark-burst .2s steps(4,end) calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s) + 20ms) both}.js .playfield.is-idle .piece--floating .piece__bob{animation-name:piece-bob;animation-duration:var(--bob-period, 6s);animation-timing-function:ease-in-out;animation-delay:calc(var(--fall-delay, 0ms) + var(--fall-duration, .56s) + var(--bob-delay, 0s));animation-iteration-count:infinite}.js .playfield.is-idle .piece--floating[data-beat=metronome] .piece__bob{animation-timing-function:steps(2,end)}.js .playfield.is-idle .ghost{animation:ghost-fall var(--ghost-duration, 20s) linear var(--ghost-delay, 0s) infinite backwards}.playfield.is-clearing .piece--floating .piece__drop{animation:hard-drop var(--hard-drop-dur, .4s) var(--gravity) 0ms forwards}.playfield.is-clearing .piece--floating .piece__trail{animation:trail-in var(--hard-drop-dur, .4s) linear 0ms both,trail-out .16s linear calc(var(--hard-drop-dur, .4s) + 40ms) both}.playfield.is-clearing .piece--floating .piece__body{animation:piece-impact .2s ease-out var(--hard-drop-dur, .4s) both}.playfield.is-clearing .piece--floating .piece__bob{animation:piece-knock .17s steps(3,end) var(--hard-drop-dur, .4s) both}.playfield.is-clearing .piece--landed .piece__bob{animation:none}.piece.is-squeezing .eye__ball{animation:none;opacity:0}.piece.is-squeezing .eye__lash{animation:none;opacity:1}.cell.is-motes{animation:cell-crumble .24s steps(4,end) forwards}.cell.is-motes:after{content:"";position:absolute;left:50%;top:50%;width:max(2px,calc(var(--cell) * .07));height:max(2px,calc(var(--cell) * .07));background:var(--mote);box-shadow:calc(var(--cell) * .2) calc(var(--cell) * -.12) 0 var(--mote),calc(var(--cell) * -.22) calc(var(--cell) * -.06) 0 var(--mote),calc(var(--cell) * .06) calc(var(--cell) * .22) 0 var(--mote),calc(var(--cell) * -.1) calc(var(--cell) * .18) 0 var(--mote);animation:motes .28s steps(4,end) forwards}.filler.is-motes{animation:cell-crumble .24s steps(4,end) forwards}.piece--product{--mote: #fffaf0}:root[data-theme=dark] .piece--product{--mote: var(--accent-dark)}.piece--link{--mote: var(--tile-glyph)}.piece__skin,.piece__over{clip-path:inset(0 0 calc(var(--swept, 0) * var(--cell)) 0)}.js .playfield.is-ready.is-shaking{animation:field-shake .18s steps(4,end) 1}.playfield.is-cleared .piece,.playfield.is-cleared .filler{opacity:0}@media(prefers-reduced-motion:reduce){.js .playfield.is-entering .piece__drop,.js .playfield.is-entering .piece__spin,.js .playfield.is-entering .piece__body,.js .playfield.is-entering .piece__trail,.js .playfield.is-entering .piece .spark,.js .playfield.is-entering .filler,.js .playfield.is-idle .piece--floating .piece__bob,.js .playfield.is-idle .ghost,.js .playfield.is-idle .eye__ball,.js .playfield.is-idle .eye__lash,.js .playfield.is-idle .piece[data-face=keeper] .eye__pupil,.js .playfield.is-idle .piece[data-face=collector] .eye__pupil,.js .playfield.is-entering .piece[data-face=mascot] .mouth,.piece[data-face=mascot].is-squeezing .mouth,.js .playfield.is-ready.is-shaking,.playfield.is-clearing .piece--floating .piece__drop,.playfield.is-clearing .piece--floating .piece__trail,.playfield.is-clearing .piece--floating .piece__body,.playfield.is-clearing .piece--floating .piece__bob,.playfield.is-clearing .piece .piece__spin,.cell.is-motes,.cell.is-motes:after,.filler.is-motes,.piece--egg.is-dropping .piece__drop,.piece--egg.is-dropping .piece__body,.piece--egg.is-dropping .piece__trail,.panel.is-typing .panel__caret{animation:none!important}.piece__lift,.piece__body,.cell,.piece--link:after,.eye__track,.panel__hint,.theme-toggle .icon,.sound-toggle .icon{transition:none!important}.js .playfield.is-ready.is-storming{animation:none!important}.eye__ball{opacity:1!important}.eye__lash{opacity:0!important}.eye__track,.eye__pupil{transform:translate(-50%,-50%)!important}.eye__track{transform:none!important}.mouth{transform:translate(-50%,-50%)!important}.playfield.is-cleared .piece,.playfield.is-cleared .filler{opacity:1}}