@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-700.woff2)format("woff2");font-weight:700;font-display:swap}.hatch{--choice:72px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));background:radial-gradient(46% 30% at 50% 46%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 72%), radial-gradient(40% 28% at 12% 8%, var(--sky-glow-fuchsia), transparent 70%), radial-gradient(40% 30% at 92% 96%, var(--sky-glow-olo), transparent 70%), var(--sky-ground);-webkit-tap-highlight-color:transparent;grid-template:"tools""stage"minmax(300px,1fr)"tray""go"/minmax(0,1fr);gap:12px;transition:background .6s;display:grid;position:relative;overflow:hidden}.hatch:before{content:"";pointer-events:none;background:radial-gradient(1.5px 1.5px at 12% 22%,#ffffffb3,#0000),radial-gradient(1.5px 1.5px at 78% 14%,#fff9,#0000),radial-gradient(2px 2px at 88% 52%,#00ffccb3,#0000),radial-gradient(1.5px 1.5px at 30% 64%,#ffffff80,#0000),radial-gradient(2px 2px at 6% 78%,#ff00bf99,#0000),radial-gradient(1.5px 1.5px at 58% 8%,#ffffff8c,#0000),radial-gradient(1.5px 1.5px at 66% 88%,#ffffff80,#0000);animation:7s ease-in-out infinite hatch-twinkle;position:absolute;inset:0}@keyframes hatch-twinkle{50%{opacity:.45}}.hatch button{background:var(--sky-glass);color:var(--sky-ink);cursor:pointer;touch-action:manipulation;border:0;place-items:center;padding:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,opacity .3s;display:grid;position:relative;box-shadow:inset 0 0 0 1px #ffffff29}.hatch button:active{transform:scale(var(--sky-press))}.hatch button:focus-visible{outline:3px solid var(--sky-ink);outline-offset:3px}.hatch button[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--sky-go), 0 0 26px var(--sky-glow-olo)}.hatch-tools{z-index:1;grid-area:tools;justify-content:center;gap:8px;display:flex}.hatch-tool{width:var(--sky-control);height:var(--sky-control);border-radius:50%}.hatch-tool[aria-pressed=true]{transform:scale(1.08)}.hatch-tool-svg{width:40px;height:40px;color:var(--hue);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--hue) 60%, transparent))}.hatch-tool-svg .ink{fill:var(--sky-ground)}.hatch-tool-svg .ink-line{stroke:var(--sky-ground)}.hatch-tool .hatch-drop{width:40px;height:40px}.hatch-tool .hatch-pic{width:56px;height:56px}.hatch-stage{grid-area:stage;grid-template-columns:var(--sky-control) minmax(0, 1fr) var(--sky-control);z-index:1;place-items:end center;gap:8px;min-height:0;display:grid}.hatch .hatch-squishy{aspect-ratio:1;width:100%;max-width:min(560px,62vh);box-shadow:none;touch-action:none;cursor:grab;background:0 0;border-radius:40%;align-self:center}.hatch .hatch-squishy:active{cursor:grabbing;transform:none}.hatch-maker{pointer-events:none;display:block;position:absolute;inset:-9%}.hatch-maker>.w-rive,.hatch-pic>.w-rive{width:100%;height:100%;position:absolute;inset:0}.hatch-maker:before,.hatch-pic:before{content:"";background:radial-gradient(40% 34% at 36% 30%, #ffffff80, transparent 70%), var(--pic-hue,var(--hue));box-shadow:0 0 40px color-mix(in srgb, var(--pic-hue,var(--hue)) 50%, transparent);border-radius:46% 54% 44% 44%/55% 52% 40% 40%;transition:opacity .3s;position:absolute;inset:26% 24% 12%}.hatch-pic:before{box-shadow:none;inset:24% 20% 14%}.hatch-maker.w-rive-ready:before,.hatch-pic.w-rive-ready:before{opacity:0}.hatch .hatch-size{width:var(--sky-control);height:var(--sky-control);color:var(--hue);border-radius:50%;margin-bottom:12%}.hatch-size svg{width:46px;height:46px;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--hue) 60%, transparent))}.hatch-size:disabled{opacity:.35;cursor:default}@media (max-width:899px),(max-aspect-ratio:1){.hatch-stage{grid-template-columns:minmax(0,1fr);position:relative}.hatch .hatch-squishy{grid-area:1/1;max-width:min(100%,52vh)}.hatch .hatch-size{z-index:2;margin:0;position:absolute;bottom:0}.hatch .hatch-size.is-small{left:0}.hatch .hatch-size.is-big{right:0}}.hatch-tray{max-width:calc(4 * var(--choice) + 3 * 10px);z-index:1;flex-wrap:wrap;grid-area:tray;place-content:flex-start center;justify-self:center;gap:10px;animation:.35s cubic-bezier(.34,1.56,.64,1) hatch-bloom;display:flex}.hatch-choice{width:var(--choice);height:var(--choice);border-radius:26px;overflow:visible}.hatch-pic{display:block;position:absolute;inset:4px}.hatch-tool .hatch-pic{position:relative;inset:auto}.hatch-choice.is-drop svg{width:52px;height:52px}.hatch-choice.is-face .hatch-pic{inset:-6px}.hatch-num{color:var(--sky-ink);text-shadow:0 0 8px var(--sky-ground);font:700 20px/1 Fredoka,ui-rounded,system-ui,sans-serif;position:absolute;bottom:2px;right:4px}@keyframes hatch-bloom{0%{opacity:0;transform:scale(.9)}}.hatch .hatch-go{width:92px;height:92px;box-shadow:inset 0 0 0 2px #ffffff40, 0 0 34px var(--sky-glow-olo), 0 0 60px var(--sky-glow-fuchsia);z-index:1;border-radius:50%;grid-area:go;justify-self:end}.hatch-egg{transform-origin:50% 90%;width:70px;height:70px;animation:3.2s ease-in-out infinite hatch-rock}@keyframes hatch-rock{0%,to{rotate:-5deg}50%{rotate:5deg}}.hatch-no-room{right:120px;bottom:max(26px, env(safe-area-inset-bottom));z-index:1;width:72px;height:72px;animation:1.2s ease-in-out 2 hatch-nudge;position:absolute}@keyframes hatch-nudge{25%{rotate:-8deg}75%{rotate:8deg}}.hatch-heard{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hatch-drop-fly{background:radial-gradient(40% 32% at 36% 34%, #ffffffd9, transparent 70%), var(--drop);width:28px;height:36px;box-shadow:0 0 18px var(--drop);pointer-events:none;z-index:60;border-radius:50%/62% 62% 40% 40%;position:fixed;top:0;left:0}.hatch.is-hatching .hatch-tools,.hatch.is-hatching .hatch-tray,.hatch.is-hatching .hatch-size,.hatch.is-away .hatch-tools,.hatch.is-away .hatch-tray{opacity:.35;pointer-events:none}.hatch.is-hatching .hatch-go{box-shadow:inset 0 0 0 3px var(--sky-go), 0 0 50px var(--sky-glow-olo);transform:scale(.9)}.hatch.is-away .hatch-maker{animation:1.4s cubic-bezier(.5,0,.75,0) forwards hatch-away}.hatch.is-back .hatch-maker{animation:.7s cubic-bezier(.34,1.56,.64,1) hatch-back}@keyframes hatch-away{20%{transform:translateY(4%)scale(1.04,.96)}to{opacity:0;transform:translateY(-120%)scale(.4)}}@keyframes hatch-back{0%{opacity:0;transform:scale(.3)}}@media (min-width:900px) and (min-aspect-ratio:1){.hatch{--choice:88px;grid-template-columns:var(--sky-control) minmax(0, 1fr) calc(3 * 88px + 2 * 12px);-moz-column-gap:clamp(24px, 4vw, 72px);grid-template-rows:1fr auto;grid-template-areas:"tools stage tray""tools stage go";column-gap:clamp(24px,4vw,72px);padding:32px clamp(24px,5vw,96px)}.hatch-tools{flex-direction:column;justify-content:center;gap:14px}.hatch-tool{width:76px;height:76px}.hatch-tools{margin-left:-6px}.hatch-tray{align-self:center;gap:12px;max-width:none}.hatch-stage{grid-template-columns:var(--sky-control) minmax(0, min(600px, 74vh)) var(--sky-control);justify-content:center}.hatch .hatch-squishy{max-width:none}.hatch-maker{inset:-12%}.hatch .hatch-go{justify-self:center;width:112px;height:112px}.hatch-egg{width:84px;height:84px}.hatch-no-room{left:calc(100% - 384px - clamp(24px,5vw,96px));right:auto}}@media (prefers-reduced-motion:reduce){.hatch:before,.hatch-egg,.hatch-tray,.hatch-no-room{animation:none}.hatch.is-hatching .hatch-maker{animation:1.2s ease-in-out hatch-calm}.hatch.is-away .hatch-maker{animation:.6s forwards hatch-fade}.hatch.is-back .hatch-maker{animation:.6s reverse hatch-fade}.hatch button{transition:none}}@keyframes hatch-calm{50%{opacity:.4;filter:brightness(1.6)}}@keyframes hatch-fade{to{opacity:0}}