:root{--sky:#2F8FE0;--sky-dark:#1C5FA0;--sun:#FFC21A;--ink:#1B1F2A;--ground:#EAF0F5;--paper:#FFFFFF;--gut:clamp(1rem,0.6rem + 2vw,3rem);--t-big:clamp(3.2rem,1.9rem + 6vw,6.5rem);--t-mid:clamp(1.45rem,1rem + 1.9vw,2.4rem);--t-body:1rem;color-scheme:light;}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--ground);color:var(--ink);font-family:"Rubik",system-ui,sans-serif;font-size:var(--t-body);line-height:1.55;overflow-x:clip}::selection{background:var(--sun);color:var(--ink)}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}h1,h2{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}.wrap{max-width:1200px;margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-left)) 0 max(var(--gut),env(safe-area-inset-right))}.mast{display:flex;align-items:center;gap:.75rem;padding-top:max(1rem,env(safe-area-inset-top))}.mast img{width:56px;height:56px;border:3px solid var(--ink);border-radius:8px;display:block;flex:none}.mast span{font-weight:700;font-size:var(--t-body)}.story{display:grid;grid-template-columns:1fr;column-gap:clamp(1.5rem,4vw,4rem);align-items:start}.hero{padding:1rem 0 1.25rem}h1{font-weight:900;line-height:.95;letter-spacing:-.03em}h1 .act{display:block;font-size:var(--t-big)}h1 .calm{display:block;font-size:var(--t-mid);line-height:1.15;letter-spacing:-.01em;margin-top:.5rem;font-weight:700}.turn{display:flex;align-items:center;gap:1rem;margin-top:1.25rem}.turn p{flex:1;max-width:34ch}.sticker{flex:none;display:flex;align-items:center;justify-content:center;text-align:center;width:132px;height:132px;border-radius:50%;background:var(--sun);color:var(--ink);border:4px solid var(--ink);font-weight:900;font-size:1.05rem;line-height:1.1;text-decoration:none;padding:1rem;transform:rotate(-6deg);transition:transform .18s cubic-bezier(.16,1,.3,1)}.sticker:active{transform:rotate(-6deg) scale(.93)}@media (hover: hover) and (pointer: fine){.sticker:hover{transform:rotate(-2deg) scale(1.04)}}.stage{position:sticky;top:0;z-index:2;background:var(--ground);padding:.5rem 0 .75rem;grid-row:2}.stage svg{display:block;width:100%;max-width:300px;height:auto;view-transition-name:egg}.stepper{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.stepper button{width:44px;height:44px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0;transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .15s}.stepper button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.stepper svg{width:20px;height:20px}.stepper output{min-width:9.5rem;font-weight:700;view-transition-name:eggname}.steps{grid-row:3}.g{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease-out}.slip,.eggname,.user,.cracks,.griffin,.finale{opacity:0}.stage[data-step="1"] .slip{opacity:1}.stage[data-step="1"] .egg{opacity:.3}.stage:not([data-step="1"]) .slip{transform:translate(-60px,180px) rotate(-24deg)}.stage[data-step="2"] .eggname,.stage[data-step="3"] .eggname{opacity:1}.stage[data-step="3"] .user,.stage[data-step="4"] .user{opacity:1}.user{transform:translateY(-16px)}.stage[data-step="3"] .user,.stage[data-step="4"] .user{transform:none}.stage[data-step="3"] .cracks{opacity:1}.stage[data-step="3"] .egg{transform:rotate(-5deg)}.stage[data-step="4"] .top{transform:translate(112px,-48px) rotate(28deg) scale(.7)}.griffin{transform:translateY(64px) scale(.5)}.stage[data-step="4"] .griffin{opacity:1;transform:none}.stage[data-step="4"] .finale{opacity:1}.shell{fill:var(--sun)}.band{fill:var(--ink)}.stage[data-egg="cherub"] .shell{fill:var(--paper)}.stage[data-egg="cherub"] .band{fill:var(--sky)}.stage[data-egg="solaris"] .shell{fill:var(--sun)}.stage[data-egg="solaris"] .band{fill:var(--paper)}.stage[data-egg="blackhole"] .shell{fill:var(--ink)}.stage[data-egg="blackhole"] .band{fill:var(--sky)}.lbl{font-family:"Rubik",system-ui,sans-serif;font-weight:700;font-size:16px;fill:var(--ink)}.lbl.w{fill:var(--paper)}.lbl.big{font-weight:900;font-size:24px}.steps h2,.where h2{font-size:var(--t-mid);font-weight:900;line-height:1.15;letter-spacing:-.01em}.steps h2{padding-top:1.5rem;border-top:1px solid var(--ink)}.steps ol{list-style:none;margin:0;padding:0}.steps li{min-height:70dvh;display:flex;align-items:center;gap:.75rem}.steps li svg{flex:none;width:28px;height:28px;color:var(--ink)}.steps li p{font-size:var(--t-mid);font-weight:700;line-height:1.3;max-width:22ch}.where{padding:1.5rem 0 0;border-top:1px solid var(--ink);max-width:40rem}.hatnote{font-style:italic;margin-bottom:.75rem}.where p+p{margin-top:.75rem}.close{display:flex;align-items:center;gap:1.25rem;padding:3rem 0 0}.close img{width:72px;height:72px;border:3px solid var(--ink);border-radius:8px;display:block}.close p{max-width:16ch;font-weight:700}footer{margin-top:3.5rem;background:var(--sun);color:var(--ink);padding:2rem 0 calc(2rem + 72px + env(safe-area-inset-bottom))}footer p{max-width:40rem}footer p+p{margin-top:.5rem}footer a{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:.6rem 0}.bar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--ink);padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));display:flex;justify-content:flex-start;transform:translateY(110%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s}.bar.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s}.bar a{display:inline-flex;align-items:center;min-height:48px;padding:0 1.5rem;border-radius:999px;background:var(--sun);color:var(--ink);font-weight:900;text-decoration:none;border:3px solid var(--sun)}.bar a:active{transform:scale(.96)}.bar a:focus-visible{outline-color:var(--sun)}@media (min-width: 900px){.story{grid-template-columns:1.618fr 1fr}.hero{grid-column:1;grid-row:1;padding:2rem 0 3rem}.stage{grid-column:2;grid-row:1 / span 2;top:6vh;padding-top:2rem}.stage svg{max-width:400px}.steps{grid-column:1;grid-row:2}.turn{gap:2rem}.sticker{width:148px;height:148px;font-size:1.15rem}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.g,.sticker,.bar,.stepper button{transition:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 400;font-display: swap;src: url(../fonts/rubik.e73b2eed0a2b.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 400;font-display: swap;src: url(../fonts/rubik.d07e641d9574.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 700;font-display: swap;src: url(../fonts/rubik.e73b2eed0a2b.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 700;font-display: swap;src: url(../fonts/rubik.d07e641d9574.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 900;font-display: swap;src: url(../fonts/rubik.e73b2eed0a2b.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 900;font-display: swap;src: url(../fonts/rubik.d07e641d9574.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}