.creature-page{width:min(100% - 2rem,92rem);margin:0 auto;padding:7.5rem 0 8rem}.creature-page__nav,.creature-workbench__meta,.creature-intro,.creature-underneath,.creature-system{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,7rem);display:grid}.creature-page__nav{color:#f4efe47a;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid #f4efe426;align-items:center;padding-bottom:3.5rem;font-size:.67rem}.creature-page__nav>span{justify-self:end}.creature-intro{align-items:end;padding:clamp(4rem,8vw,8rem) 0 clamp(4.5rem,9vw,9rem)}.creature-intro h1{letter-spacing:-.075em;margin:1.1rem 0 0;font-size:clamp(3.2rem,9vw,8.5rem);font-weight:200;line-height:.82}.creature-intro h1 span{display:block}.creature-intro__copy{color:#f4efe4a6;max-width:40rem;font-size:clamp(.95rem,1.35vw,1.14rem);line-height:1.65}.creature-intro__copy p{margin:0}.creature-intro__copy p+p{margin-top:1.5rem}.creature-intro__lead{color:#f4efe4;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:300;line-height:1.35}.creature-workbench{border-top:1px solid #f4efe426;padding-top:1.2rem}.creature-workbench__meta{align-items:start;margin-bottom:1.25rem}.creature-label,.creature-subtle,.creature-runtime,.creature-stage__instruction,.creature-stage__status,.creature-note,.creature-readouts span,.creature-system dt{letter-spacing:.16em;text-transform:uppercase;font-size:.67rem}.creature-label{color:#f4efe4c7;margin:0}.creature-subtle{color:#f4efe457;margin:.35rem 0 0}.creature-runtime{color:#f4efe473;text-align:right;justify-self:end;margin:0}.creature-stage{touch-action:none;background:radial-gradient(circle at 50% 52%,#826eff0e,#0000 31%),#050505;border-top:1px solid #f4efe41a;border-bottom:1px solid #f4efe41a;outline:none;min-height:clamp(31rem,62vw,48rem);position:relative;overflow:hidden}.creature-stage:focus-visible{box-shadow:inset 0 0 0 1px #76e7ffb8}.creature-canvas{width:100%;height:100%;position:absolute;inset:0}.creature-stage__axis{color:#f4efe438;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;justify-content:space-between;font-size:.62rem;display:flex;position:absolute;inset:1rem 1.2rem auto}.creature-stage__instruction,.creature-stage__status{pointer-events:none;margin:0;position:absolute;left:1.2rem;right:1.2rem}.creature-stage__instruction{color:#f4efe44d;bottom:3.4rem}.creature-stage__status{color:#f4efe4a8;letter-spacing:.1em;bottom:1.35rem}.creature-readouts{border-bottom:1px solid #f4efe41f;grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.creature-readouts>div{border-right:1px solid #f4efe414;min-width:0;padding:1.1rem .85rem 1.15rem}.creature-readouts>div:first-child{padding-left:0}.creature-readouts>div:last-child{border-right:0}.creature-readouts span{color:#f4efe452;display:block}.creature-readouts strong{color:#f4efe4;letter-spacing:.06em;margin-top:.5rem;font-size:1rem;font-weight:300;display:block}.creature-controls{flex-wrap:wrap;gap:.7rem;padding:1.4rem 0 0;display:flex}.creature-control{appearance:none;color:#f4efe4b8;min-height:2.85rem;font:inherit;letter-spacing:.1em;text-transform:lowercase;cursor:pointer;background:0 0;border:1px solid #f4efe42e;border-radius:0;padding:.75rem 1rem;font-size:.72rem;transition:border-color .18s,color .18s,background-color .18s}@media (hover:hover) and (pointer:fine){:where(html[data-hover-input=fine]) .creature-control:hover{color:#f4efe4;border-color:#f4efe473}}.creature-control:focus-visible{outline-offset:3px;outline:1px solid #76e7ff}.creature-control--primary{color:#f4efe4;border-color:#76e7ff73}.creature-note{color:#f4efe457;letter-spacing:.08em;max-width:52rem;margin:1rem 0 0;line-height:1.65}.creature-underneath,.creature-system{border-bottom:1px solid #f4efe41f;padding:clamp(5rem,10vw,10rem) 0}.creature-underneath__heading h2,.creature-system h2{color:#f4efe4;letter-spacing:-.035em;max-width:22rem;margin:.85rem 0 0;font-size:clamp(1.7rem,3vw,2.7rem);font-weight:250;line-height:1.12}.creature-underneath__grid{border-top:1px solid #f4efe41f;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.creature-underneath__grid article{border-bottom:1px solid #f4efe417;min-height:11rem;padding:1.2rem 1.1rem 1.7rem 0}.creature-underneath__grid article:nth-child(odd){border-right:1px solid #f4efe417}.creature-underneath__grid article:nth-child(2n){padding-left:1.1rem}.creature-underneath__grid p:last-child,.creature-system__details>p{color:#f4efe494;margin:1.3rem 0 0;line-height:1.65}.creature-system__details dl{border-top:1px solid #f4efe41f;margin:0}.creature-system__details dl>div{border-bottom:1px solid #f4efe417;grid-template-columns:minmax(7rem,.42fr) minmax(0,1fr);gap:1rem;padding:.9rem 0;display:grid}.creature-system dt{color:#f4efe457}.creature-system dd{color:#f4efe4b3;margin:0;font-size:.82rem;line-height:1.45}@media (width<=760px){.creature-page{width:min(100% - 1.25rem,92rem);padding-top:6.5rem}.creature-page__nav,.creature-workbench__meta,.creature-intro,.creature-underneath,.creature-system{grid-template-columns:1fr;gap:1.5rem}.creature-page__nav{grid-template-columns:1fr auto;padding-bottom:2rem}.creature-intro{padding:3.8rem 0 4.5rem}.creature-intro h1{font-size:clamp(3.2rem,19vw,6rem)}.creature-runtime{text-align:left;justify-self:start}.creature-stage{min-height:34rem}.creature-stage__instruction{max-width:80%;line-height:1.55;bottom:4.8rem}.creature-stage__status{line-height:1.45;bottom:1.25rem}.creature-readouts{grid-template-columns:repeat(3,minmax(0,1fr))}.creature-readouts>div{border-bottom:1px solid #f4efe414}.creature-readouts>div:nth-child(3){border-right:0}.creature-readouts>div:nth-child(4){padding-left:0}.creature-readouts>div:nth-child(n+4){border-bottom:0}.creature-controls{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.creature-control{width:100%}.creature-underneath__grid{grid-template-columns:1fr}.creature-underneath__grid article,.creature-underneath__grid article:nth-child(odd),.creature-underneath__grid article:nth-child(2n){border-right:0;padding-left:0}}@media (width<=420px){.creature-stage{min-height:31rem}.creature-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}.creature-readouts>div:nth-child(2n){border-right:0}.creature-readouts>div:nth-child(3){border-right:1px solid #f4efe414}.creature-readouts>div:nth-child(4){padding-left:.85rem}.creature-readouts>div:nth-child(5){padding-left:0}.creature-readouts>div:nth-child(n+5){border-bottom:0}}@media (prefers-reduced-motion:reduce){.creature-control{transition:none}}