/* Nine-slice ornament: corners retain their size; only straight edges stretch. */
.header-canopy{position:absolute;top:-8px;width:clamp(65px,7.5vw,112px);height:clamp(165px,15vw,210px);overflow:clip;contain:paint;pointer-events:none;z-index:2}
/* Overscan keeps source edges outside the fixed lateral window during wind.
   The artwork is enlarged, never the reserved navigation footprint. */
.header-canopy:before{content:'';position:absolute;inset:-24px;background-position:top left;background-size:auto 160%;background-repeat:no-repeat;filter:blur(.8px);transform:rotate(-1.5deg);transform-origin:top left;animation:canopy-breeze-left 6.2s ease-in-out -1s infinite}
.header-canopy.header-canopy-left{mask-image:linear-gradient(to right,#000 60%,transparent 100%),linear-gradient(to bottom,#000 65%,transparent 100%);mask-composite:intersect}
.header-canopy.header-canopy-right{mask-image:linear-gradient(to left,#000 60%,transparent 100%),linear-gradient(to bottom,#000 65%,transparent 100%);mask-composite:intersect}
.header-canopy-left{left:0;mask-image:linear-gradient(to right,#000 60%,transparent 100%)}
.header-canopy-left:before{background-image:url('./canopy-left.webp')}
.header-canopy-right{right:0;mask-image:linear-gradient(to right,transparent 30%,#000 44%)}
.header-canopy-right:before{background-image:url('./canopy-right.webp?v=2');background-position:top right;transform-origin:top right;animation:canopy-breeze-right 7.4s ease-in-out -3.7s infinite}
@keyframes canopy-breeze-left{0%,100%{transform:translate(0,0) rotate(-1.5deg)}45%{transform:translate(4px,3px) rotate(2.2deg)}75%{transform:translate(1px,1px) rotate(.2deg)}}
@keyframes canopy-breeze-right{0%,100%{transform:translate(0,0) rotate(1.5deg)}50%{transform:translate(-4px,3px) rotate(-2.2deg)}80%{transform:translate(-1px,.5px) rotate(-.2deg)}}
.site-header{isolation:isolate;background:color-mix(in oklch,var(--color-deep) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* The banner starts below this non-sticky header, so give its glass a scenic
   underlay too; otherwise backdrop-filter would sample an empty page. */
.site-header:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in oklch,var(--color-deep) 78%,transparent),color-mix(in oklch,var(--color-deep) 82%,transparent)),url('./hero.webp') center 18%/cover no-repeat;filter:blur(10px);clip-path:inset(0)}
.nav-inner{position:relative;z-index:3}
.info-menu>summary .nav-chevron{width:12px;height:12px;flex:none;transition:transform var(--dur-fast) var(--ease-out)}
.info-menu[open]>summary .nav-chevron{transform:rotate(180deg)}
@media(min-width:901px){.nav-inner>nav{align-self:stretch;align-items:stretch}.nav-inner>nav>a{display:flex;align-items:center}.info-menu>summary{height:100%}}
.nav-inner>nav>a[aria-current]:after{inset:auto -12px -1px;background:linear-gradient(90deg,transparent,var(--color-gold-bright) 25%,var(--color-gold-bright) 75%,transparent);box-shadow:0 2px 7px color-mix(in oklch,var(--color-gold) 80%,transparent);height:2px}
.nav-inner>nav>a[aria-current]:before{content:'';position:absolute;left:-24px;right:-24px;top:100%;height:26px;pointer-events:none;background:radial-gradient(ellipse at center top,color-mix(in oklch,var(--color-gold) 38%,transparent),transparent 72%)}
.nav-active-motes{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:58px;height:max(0px,calc(50% - 12px));overflow:hidden;pointer-events:none;mask-image:linear-gradient(to top,#000 35%,transparent 100%)}
.nav-active-motes i{position:absolute;bottom:0;left:12%;width:2px;height:2px;border-radius:50%;background:var(--color-gold-bright);box-shadow:0 0 4px var(--color-gold);opacity:0;animation:nav-mote-rise 3.6s linear -.4s infinite}
.nav-active-motes i:nth-child(2){left:40%;width:1.5px;height:1.5px;animation-delay:-2.2s;animation-duration:4.2s}
.nav-active-motes i:nth-child(3){left:68%;animation-delay:-1.4s;animation-duration:3.9s}
.nav-active-motes i:nth-child(4){left:86%;width:1.5px;height:1.5px;animation-delay:-3s;animation-duration:4.5s}
@keyframes nav-mote-rise{0%{opacity:0;transform:translate(0,2px)}15%{opacity:.8}60%{opacity:.45}85%,100%{opacity:0;transform:translate(3px,-24px)}}
@media(max-width:900px){.nav-active-motes{left:12px;transform:none;height:10px}}
@media(prefers-reduced-motion:reduce){.nav-active-motes{display:none}}
body.motion-paused .nav-active-motes{display:none}
@media(max-width:900px){.nav-inner>nav>a[aria-current]:before{display:none}.nav-inner>nav.is-open>a[aria-current]:after{display:block;inset:auto 12px 0}}
:root{--facts-half-height:48px;--color-collection:#fff;--color-item-title:oklch(32% .055 164)}
.button.primary{position:relative;isolation:isolate;background-color:var(--color-gold);background-image:linear-gradient(110deg,var(--color-gold-bright),transparent);box-shadow:0 4px 14px var(--color-shadow),0 0 10px color-mix(in oklch,var(--color-gold) 20%,transparent);transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.button.primary:before{content:'';position:absolute;inset:-6px;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--color-gold);filter:blur(10px);opacity:.12;transition:opacity var(--dur-fast) var(--ease-out)}
.button.primary:after{content:'';position:absolute;inset:-10px -8px;pointer-events:none;opacity:.5;background:radial-gradient(circle,var(--color-gold-bright) 0 1px,transparent 2px) 6% 44%/4px 4px no-repeat,radial-gradient(circle,var(--color-gold) 0 1px,transparent 2px) 32% 5%/4px 4px no-repeat,radial-gradient(circle,var(--color-gold-bright) 0 .8px,transparent 2px) 72% 96%/4px 4px no-repeat,radial-gradient(circle,var(--color-gold) 0 1px,transparent 2px) 98% 52%/4px 4px no-repeat;filter:drop-shadow(0 0 3px var(--color-gold));animation:button-fireflies 4.6s var(--ease-in-out) infinite alternate;transition:opacity var(--dur-fast) var(--ease-out)}
.button.primary:is(:hover,:focus-visible){background-color:var(--color-gold-bright);background-image:linear-gradient(110deg,var(--color-gold-bright),transparent);box-shadow:0 5px 16px var(--color-shadow),0 0 19px color-mix(in oklch,var(--color-gold) 48%,transparent)}
.button.primary:is(:hover,:focus-visible):before{opacity:.28}
.button.primary:is(:hover,:focus-visible):after{opacity:1}
@keyframes button-fireflies{0%{transform:translateY(3px)}50%{transform:translate(2px,-3px)}100%{transform:translate(-1px,-6px)}}
@media(prefers-reduced-motion:reduce){.button.primary:after{display:none}}
body.motion-paused .button.primary:after{display:none}
/* More life at the canopy; the ambient light dissipates with document depth. */
.fireflies{overflow:clip}
.fireflies>i:nth-child(n){--fly-row:15%;--fly-offset:0%;--fly-x:5%;left:var(--fly-x);top:calc(var(--fly-row) + var(--fly-offset));width:4px;height:4px;opacity:.6;box-shadow:0 0 6px 2px color-mix(in oklch,var(--color-gold) 80%,transparent),0 0 18px 5px color-mix(in oklch,var(--color-gold) 35%,transparent);animation:forest-firefly 8s var(--ease-in-out) -2s infinite}
.fireflies>i:nth-child(n+9){--fly-row:36%}
.fireflies>i:nth-child(n+17){--fly-row:60%}
.fireflies>i:nth-child(n+25){--fly-row:85%}
.fireflies>i:nth-child(8n+1){--fly-x:4%;--fly-offset:4%;animation-delay:-1.8s}
.fireflies>i:nth-child(8n+2){--fly-x:17%;--fly-offset:-7%;animation-delay:-5.7s}
.fireflies>i:nth-child(8n+3){--fly-x:29%;--fly-offset:9%;animation-delay:-3.2s}
.fireflies>i:nth-child(8n+4){--fly-x:43%;--fly-offset:-4%;animation-delay:-7.4s}
.fireflies>i:nth-child(8n+5){--fly-x:56%;--fly-offset:5%;animation-delay:-.6s}
.fireflies>i:nth-child(8n+6){--fly-x:69%;--fly-offset:-9%;animation-delay:-4.5s}
.fireflies>i:nth-child(8n+7){--fly-x:83%;--fly-offset:7%;animation-delay:-6.4s}
.fireflies>i:nth-child(8n){--fly-x:95%;--fly-offset:-2%;animation-delay:-2.8s}
.fireflies>i:nth-child(3n){width:3px;height:3px;animation-duration:10.5s}
.fireflies>i:nth-child(5n){width:5px;height:5px;animation-duration:7.3s}
.fireflies>i:nth-child(2n){--fly-drift:-16px}
.forest-fireflies{inset:0;z-index:-1;opacity:.72;mask-image:linear-gradient(to bottom,#000 0%,rgb(0 0 0 / .72) 30%,rgb(0 0 0 / .3) 65%,transparent 100%)}
.forest-fireflies>i:nth-child(n){--fly-row:7%}
.forest-fireflies>i:nth-child(n+9){--fly-row:28%}
.forest-fireflies>i:nth-child(n+17){--fly-row:53%}
.forest-fireflies>i:nth-child(n+25){--fly-row:81%}
@keyframes forest-firefly{0%,100%{opacity:.3;transform:translate(0,8px) scale(.8)}30%{opacity:1;transform:translate(var(--fly-drift,18px),-15px) scale(1.1)}65%{opacity:.5;transform:translate(calc(var(--fly-drift,18px) * -.4),-28px) scale(.9)}}
@media(max-width:600px){.fireflies>i:nth-child(4n){display:none}.fireflies>i:nth-child(n){box-shadow:0 0 5px 2px color-mix(in oklch,var(--color-gold) 75%,transparent),0 0 13px 3px color-mix(in oklch,var(--color-gold) 30%,transparent)}}
.hero{border-bottom:1px solid var(--color-rule)}
/* A feathered reading shadow affects only the backdrop, never the foreground. */
.hero:before{background:linear-gradient(0deg,var(--color-ground),var(--color-transparent) 20%)}
.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,color-mix(in oklch,var(--color-ground) 72%,transparent) 0%,color-mix(in oklch,var(--color-panel) 46%,transparent) 38%,color-mix(in oklch,var(--color-ground) 8%,transparent) 62%,transparent 78%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:url('./hero-reading-mask.svg?v=3');mask-size:100% 100%;mask-repeat:no-repeat}
@media(max-width:600px){.hero:after{background:linear-gradient(180deg,color-mix(in oklch,var(--color-ground) 45%,transparent),color-mix(in oklch,var(--color-panel) 30%,transparent) 30%,transparent 58%);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 49%)}}
.facts{--scroll-width:clamp(16px,5vw,76px);border:0;border-radius:15px;background:none;box-shadow:none;padding:18px 24px;margin-top:calc(-1 * var(--facts-half-height))}
.forest-content:before{top:calc(-1 * var(--facts-half-height))}
.facts:before,.starter:before{content:'';position:absolute;inset:-2px;z-index:2;border:22px solid transparent;border-image:url('./frame-gold.svg') 32 / 22px / 0 stretch;pointer-events:none;border-radius:0}
.facts:before{z-index:0;border-image-source:url('./frame-facts-filled.svg');border-image-slice:32 fill;filter:drop-shadow(0 16px 28px var(--color-shadow))}
.facts>div{position:relative;z-index:1}
/* Equal breathing room around intrinsic content, not unequal text in equal cells. */
@media(min-width:601px){.facts{display:flex}.facts>div{flex:1 1 auto;min-width:0;padding-inline:16px}}
@media(max-width:600px){.facts>div>span{min-width:0}.facts .server-heading{display:block;font-size:17px}.facts .server-heading>.status-dot{margin-right:6px}}
.facts:after{content:'';position:absolute;top:50%;left:calc(3px - var(--scroll-width));right:calc(3px - var(--scroll-width));height:34px;transform:translateY(-50%);background:url('./leaf-scroll.svg') left center/var(--scroll-width) auto no-repeat,url('./leaf-scroll.svg') right center/var(--scroll-width) auto no-repeat;pointer-events:none;opacity:.6;z-index:-1}
.starter{border:0;border-radius:15px;overflow:visible;background:none;margin-top:30px}
.discovery-head{margin-bottom:0}
.discovery-head+.starter{margin-top:30px}
.starter+.systems{margin-top:48px}
@media(max-width:600px){.starter+.systems{margin-top:32px}}
.starter:before{inset:0;z-index:0;border-image-source:url('./frame-facts-filled.svg');border-image-slice:32 fill;border-image-width:24px}
/* The scenic layer follows the same nine-slice silhouette as the frame.
   Do not clip the parent: its character, foliage and motes extend outside. */
.starter:after{inset:0;z-index:1;border-radius:0;opacity:.12;-webkit-mask-box-image:url('./frame-facts-filled.svg') 32 fill / 24px / 0 stretch}
.starter-content{position:relative;z-index:3}.starter-art{z-index:3}
/* Reference anchor: size follows panel height, not the free column width.
   Native 1536×1024 canvas has 15px top / 20px bottom transparent padding. */
@media(min-width:1151px){.starter{grid-template-columns:39% minmax(0,1fr)}.starter-art{width:auto;max-width:calc(39% + 16px);aspect-ratio:3/2;height:calc(100% + 36px);left:-28px;bottom:-18px}}
/* Keep the content-side anchor fixed while the illustration breaks the frame. */
@media(min-width:1151px){.starter-art{bottom:-44px;transform:scale(1.08);transform-origin:right bottom}}
@media(min-width:601px) and (max-width:1150px){.starter-art{bottom:-28px;transform:scale(1.06);transform-origin:right bottom}}
.starter-leaves{position:absolute;inset:0;z-index:-1;pointer-events:none}
.starter-leaves i{position:absolute;left:8%;top:48%;width:28px;height:16px;background:url('./wind-leaf.svg') center/contain no-repeat;opacity:0;animation:starter-leaf-flight 11s var(--ease-in-out) -1.2s infinite;--leaf-flight:clamp(48px,7vw,130px);--leaf-rise:-34px}
.starter-leaves i:nth-child(2){top:77%;width:22px;height:13px;animation-delay:-4.1s;--leaf-rise:22px}
.starter-leaves i:nth-child(3){top:29%;width:19px;height:12px;animation-delay:-7.7s;--leaf-rise:-52px}
.starter-leaves i:nth-child(4){top:88%;width:24px;height:14px;animation-delay:-8.5s;--leaf-rise:8px}
@keyframes starter-leaf-flight{0%{opacity:0;transform:translate(18px,0) rotate(-25deg) scale(.7)}7%{opacity:.85}18%{opacity:.8;transform:translate(calc(var(--leaf-flight) * -.45),calc(var(--leaf-rise) * .4)) rotate(15deg) scale(1)}32%,100%{opacity:0;transform:translate(calc(var(--leaf-flight) * -1),var(--leaf-rise)) rotate(70deg) scale(.7)}}
@media(prefers-reduced-motion:reduce){.starter-leaves{display:none}}
body.motion-paused .starter-leaves{display:none}
.inventory-item{border-color:var(--color-gold);box-shadow:0 0 7px color-mix(in oklch,var(--color-gold) 30%,transparent),inset 0 0 7px color-mix(in oklch,var(--color-gold-dim) 14%,transparent);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.inventory-item:is(:hover,:focus-visible,[aria-expanded=true]){border-color:var(--color-gold-bright);box-shadow:0 0 10px color-mix(in oklch,var(--color-gold) 55%,transparent),0 0 20px color-mix(in oklch,var(--color-gold-dim) 24%,transparent),inset 0 0 9px color-mix(in oklch,var(--color-gold) 18%,transparent)}
.starter .inventory-caption{font-size:11px;color:var(--color-muted);margin-top:14px}
.starter-bottom{display:grid;grid-template-columns:repeat(6,minmax(0,70px)) auto;justify-content:start;gap:8px;margin-top:8px}
.inventory{display:contents;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:min(100%,532px)}
.inventory-item{position:relative;width:100%;max-width:70px;height:64px;padding-bottom:8px}
.inventory-item{isolation:isolate;z-index:0}
.inventory-item:before{content:'';position:absolute;inset:-14px -8px;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle,var(--color-gold-bright) 0 1px,transparent 2px) 2% 80%/5px 5px no-repeat,radial-gradient(circle,var(--color-gold) 0 1px,transparent 2.5px) 98% 58%/6px 6px no-repeat,radial-gradient(circle,var(--color-gold-bright) 0 .7px,transparent 1.8px) 36% 96%/4px 4px no-repeat;filter:drop-shadow(0 0 3px var(--color-gold));animation:item-radiance 4.2s ease-out -1.2s infinite}
.inventory-item:nth-child(3n+1):before{animation-duration:4.8s;animation-delay:-3.3s}
.inventory-item:nth-child(3n+2):before{animation-duration:3.9s;animation-delay:-.6s}
@keyframes item-radiance{0%{opacity:0;transform:translate(0,8px) scale(.85)}24%{opacity:.9}65%{opacity:.65}100%{opacity:0;transform:translate(4px,-30px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.inventory-item:before{display:none}}
body.motion-paused .inventory-item:before{display:none}
/* Four-second loops: authored motion in 0–50%, resting pose in 50–100%. */
.facts-icon{overflow:visible;flex:none;stroke:none}
.system-icon{overflow:visible;stroke:none}
.system-icon path[class]{transform-box:fill-box;transform-origin:center;animation-duration:4s;animation-timing-function:var(--ease-in-out);animation-iteration-count:infinite}
.system-cloak{transform-origin:center top!important;animation-name:system-cloak-sway}
.system-eyes{animation-name:system-watch}
.system-dagger{animation-name:system-dagger-ready}
.system-hammer{transform-origin:left center!important;animation-name:system-hammer-strike}
.system-impact{animation-name:system-impact-sparks}
.system-anvil{transform-origin:center bottom!important;animation-name:system-anvil-hit}
.system-vortex{animation-name:system-portal-turn}
@keyframes system-cloak-sway{0%,50%,100%{transform:none}18%{transform:rotate(-2deg)}34%{transform:rotate(1deg)}}
@keyframes system-watch{0%,12%,30%,50%,100%{transform:none}20%{transform:scaleY(.12)}}
@keyframes system-dagger-ready{0%,50%,100%{transform:none}18%{transform:translateY(-14px) rotate(-5deg)}32%{transform:translateY(-5px) rotate(2deg)}}
@keyframes system-hammer-strike{0%,50%,100%{transform:none}12%{transform:translateY(-10px) rotate(-18deg)}24%{transform:translateY(12px) rotate(6deg)}34%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes system-impact-sparks{0%,50%,100%{transform:none;opacity:1}18%{transform:scale(.7);opacity:.2}25%{transform:scale(1.14);opacity:1}36%{transform:scale(.9);opacity:.65}}
@keyframes system-anvil-hit{0%,18%,38%,50%,100%{transform:none}24%{transform:scaleY(.97)}}
@keyframes system-portal-turn{0%{transform:rotate(0)}50%,100%{transform:rotate(360deg)}}
.system-card{position:relative;isolation:isolate;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.system-card-link{position:relative;z-index:1;display:block;height:100%}
.system-card:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center bottom,color-mix(in oklch,var(--color-gold) 12%,transparent),transparent 65%);opacity:0;transition:opacity var(--dur-medium) var(--ease-out)}
.system-card:after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--color-gold-bright),transparent);box-shadow:0 -2px 10px color-mix(in oklch,var(--color-gold) 75%,transparent);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.system-card:is(:hover,:focus-within){border-color:var(--color-gold-bright);box-shadow:0 7px 24px color-mix(in oklch,var(--color-gold) 12%,transparent)}
.system-card:is(:hover,:focus-within):before,.system-card:is(:hover,:focus-within):after{opacity:1}
.system-card:focus-within{outline:2px solid var(--color-gold-bright);outline-offset:4px}
.system-card-link:focus-visible{outline:none}
.system-card-motes{position:absolute;bottom:1px;left:18px;right:18px;height:20px;z-index:2;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to top,#000 35%,transparent 100%);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.system-card-motes i{position:absolute;bottom:0;left:8%;width:2px;height:2px;background:var(--color-gold-bright);border-radius:50%;box-shadow:0 0 5px var(--color-gold);opacity:0;animation:nav-mote-rise 3.8s linear -.4s infinite;animation-play-state:paused}
.system-card-motes i:nth-child(2){left:23%;animation-delay:-2.2s}.system-card-motes i:nth-child(3){left:41%;animation-delay:-1.1s}.system-card-motes i:nth-child(4){left:62%;animation-delay:-3.2s}.system-card-motes i:nth-child(5){left:78%;animation-delay:-1.7s}.system-card-motes i:nth-child(6){left:94%;animation-delay:-2.7s}
.system-card:is(:hover,:focus-within) .system-card-motes{opacity:1}
.system-card:is(:hover,:focus-within) .system-card-motes i{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.system-icon path[class]{animation:none!important}.system-card-motes{display:none}}
body.motion-paused .system-card-motes{display:none}
.facts-icon :is(g,path){animation-duration:4s;animation-timing-function:var(--ease-in-out);animation-iteration-count:infinite;transform-box:fill-box;transform-origin:center}
.facts-sword{transform-origin:25% 85%!important;animation-name:facts-brandish}
.facts-knob-a{--knob-travel:60px;animation-name:facts-adjust}
.facts-knob-b{--knob-travel:-70px;animation-name:facts-adjust}
.facts-knob-c{--knob-travel:45px;animation-name:facts-adjust}
.facts-spark-a{animation-name:facts-spark-first}
.facts-spark-b{animation-name:facts-spark-second}
.facts-spark-c{animation-name:facts-spark-third}
.facts-bar{transform-origin:center bottom!important}
.facts-bar-a{animation-name:facts-signal-a}.facts-bar-b{animation-name:facts-signal-b}.facts-bar-c{animation-name:facts-signal-c}.facts-bar-d{animation-name:facts-signal-d}.facts-bar-e{animation-name:facts-signal-e}
@keyframes facts-brandish{0%,50%,100%{transform:none}12%{transform:rotate(-12deg)}27%{transform:rotate(9deg)}39%{transform:rotate(-3deg)}}
@keyframes facts-adjust{0%,50%,100%{transform:none}20%{transform:translateY(var(--knob-travel))}35%{transform:translateY(calc(var(--knob-travel) * -.2))}}
@keyframes facts-spark-first{0%,50%,100%{transform:none;opacity:1}10%{transform:scale(.65);opacity:.4}22%{transform:scale(1.15);opacity:1}}
@keyframes facts-spark-second{0%,50%,100%{transform:none;opacity:1}20%{transform:scale(.75);opacity:.4}34%{transform:scale(1.12);opacity:1}}
@keyframes facts-spark-third{0%,50%,100%{transform:none;opacity:1}29%{transform:scale(.65);opacity:.4}41%{transform:scale(1.12);opacity:1}}
@keyframes facts-signal-a{0%,50%,100%{transform:none;opacity:1}8%{transform:scaleY(.45);opacity:.4}24%{transform:none;opacity:1}}
@keyframes facts-signal-b{0%,50%,100%{transform:none;opacity:1}13%{transform:scaleY(.45);opacity:.4}29%{transform:none;opacity:1}}
@keyframes facts-signal-c{0%,50%,100%{transform:none;opacity:1}18%{transform:scaleY(.45);opacity:.4}34%{transform:none;opacity:1}}
@keyframes facts-signal-d{0%,50%,100%{transform:none;opacity:1}23%{transform:scaleY(.45);opacity:.4}39%{transform:none;opacity:1}}
@keyframes facts-signal-e{0%,50%,100%{transform:none;opacity:1}28%{transform:scaleY(.45);opacity:.4}50%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.facts-icon :is(g,path){animation:none!important}}
.item-popup{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:auto;max-height:min(420px,calc(100dvh - 24px));overflow:hidden}
.item-popup-head>img{padding:4px;border:1px solid var(--color-paper-rule);border-radius:8px;background:var(--color-collection);box-shadow:0 4px 10px color-mix(in oklch,var(--color-paper-ink) 24%,transparent)}
.item-popup-head strong{color:var(--color-item-title)}
.item-popup>p{min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding-right:8px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--color-gold-dim) var(--color-paper-rule)}
.item-popup>p::-webkit-scrollbar{width:6px}
.item-popup>p::-webkit-scrollbar-track{background:var(--color-paper-rule);border-radius:6px}
.item-popup>p::-webkit-scrollbar-thumb{background:var(--color-gold-dim);border-radius:6px}
.item-popup>p::-webkit-scrollbar-thumb:hover{background:var(--color-paper-ink)}
.item-popup>p:focus-visible{outline:2px solid var(--color-item-name);outline-offset:2px}
.item-popup{interpolate-size:allow-keywords;transition:height 220ms var(--ease-out)}
.item-popup[data-load=loading]{height:min(300px,calc(100dvh - 24px))}
.item-popup .item-description{white-space:pre-line}
.item-load-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.item-skeleton{position:absolute;inset:16px;z-index:1;display:grid;grid-template-rows:100px minmax(0,1fr) 14px;gap:16px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.item-popup[data-load=loading] .item-skeleton{opacity:1;visibility:visible;transition-delay:0s}
.item-skeleton i{display:block;border-radius:4px;background:linear-gradient(100deg,color-mix(in oklch,var(--color-paper-rule) 40%,var(--color-paper)) 20%,var(--color-collection) 48%,color-mix(in oklch,var(--color-paper-rule) 40%,var(--color-paper)) 76%);background-size:240% 100%;animation:item-skeleton-shimmer 1.5s linear infinite}
.skeleton-head{display:grid;grid-template-columns:76px 1fr;gap:12px;border-bottom:1px solid var(--color-paper-rule);padding-bottom:12px}
.skeleton-head>i{height:88px;border-radius:8px}.skeleton-head>span{padding-top:6px}.skeleton-head>span>i{height:14px;margin-bottom:10px}.skeleton-head>span>i+i{height:9px;width:75%}
.skeleton-lines{display:grid;align-content:start;gap:9px}.skeleton-lines>i{height:10px}.skeleton-lines>i:nth-child(2n){width:87%}.skeleton-lines>i:last-child{width:60%}.skeleton-link{width:42%;height:12px}
.item-popup[data-load=loading] :is(.item-popup-head,.item-description,.item-retry),.item-popup[data-load=loading]>a{visibility:hidden;animation:none}
.item-popup[data-load]:not([data-load=loading]) .item-skeleton i{animation:none}
.item-popup[data-image-error] .item-popup-head>img{visibility:hidden}
.item-retry{justify-self:start;background:var(--color-paper-rule);color:var(--color-item-title);padding:8px 12px;border-radius:4px;min-height:36px;font-size:12px}
.item-retry[hidden]{display:none!important}
@keyframes item-skeleton-shimmer{to{background-position:-140% 0}}
/* Each reveal is replayed only after hidden→visible, not on repeated focus/click. */
.item-popup:not([hidden]){transform-origin:center center;animation:item-popup-open 280ms var(--ease-out) both}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden]) :is(.item-popup-head>img,.item-popup-head strong,.item-popup-head small),.item-popup:is([data-load=ready],[data-load=error]):not([hidden])>p,.item-popup:is([data-load=ready],[data-load=error]):not([hidden])>a{animation:item-popup-detail 240ms var(--ease-out) both}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden]) .item-popup-head>img{animation-delay:40ms}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden]) .item-popup-head strong{animation-delay:90ms}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden]) .item-popup-head small{animation-delay:130ms}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden])>p{animation-delay:170ms}
.item-popup:is([data-load=ready],[data-load=error]):not([hidden])>a{animation-delay:210ms}
@keyframes item-popup-open{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes item-popup-detail{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.inventory-quantity{position:absolute;right:4px;bottom:2px;font-size:10px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-gold-bright);background:var(--color-deep);padding:1px 3px;border-radius:2px;pointer-events:none}
.starter-bottom>.button{grid-column:7;grid-row:2;justify-self:start;align-self:end;margin:0 0 8px}
@media(max-width:1150px){.starter-bottom{grid-template-columns:1fr;gap:14px}.inventory{display:grid}.starter-bottom>.button{grid-column:auto;grid-row:auto;justify-self:end;margin:0}}
@media(max-width:900px){.inventory{grid-template-columns:repeat(5,minmax(0,1fr))}.inventory-item{width:100%;height:58px}.starter-bottom>.button{justify-self:start}}
@media(max-width:600px){.starter-bottom{display:grid;margin-top:8px}.inventory-item{width:100%}.starter-bottom>.button{margin:0;justify-self:stretch}}
.pack-garden{position:absolute;inset:0;pointer-events:none;z-index:1}
.pack-motes{position:absolute;inset:-40px -26px;pointer-events:none;overflow:visible}
.pack-motes i{position:absolute;left:var(--x);bottom:var(--y);width:3px;height:3px;background:var(--color-gold-bright);border-radius:50%;box-shadow:0 0 7px 2px var(--color-gold-dim);animation:pack-escape 6s var(--ease-in-out) infinite;animation-delay:var(--delay);opacity:.2}
.pack-motes i:nth-child(3n){width:2px;height:7px;box-shadow:0 0 8px var(--color-gold)}
@keyframes pack-escape{0%{opacity:0;transform:translate(0,12px) scale(.5)}30%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),-70px) scale(.4)}}
.goal-track{left:12.5%;right:12.5%;top:28px}
.goals{--goal-radius:25px;--goal-ornament-width:clamp(22px,6.8vw,86px)}
.goals:before,.goals:after{content:'';position:absolute;top:10px;width:var(--goal-ornament-width);height:36px;background:url('./leaf-scroll.svg') center/100% auto no-repeat;pointer-events:none;opacity:.85}.goals:before{left:calc(12.5% - var(--goal-radius) - var(--goal-ornament-width) + 2px);transform:scaleX(-1)}.goals:after{right:calc(12.5% - var(--goal-radius) - var(--goal-ornament-width) + 2px)}
.goal-medal{position:relative}.goal.is-reached .goal-medal{background:var(--color-panel);border:2px solid var(--color-gold-bright);box-shadow:0 0 8px var(--color-gold),0 0 25px var(--color-gold-dim)}
.goal.is-reached .goal-medal:before{content:'';position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,var(--color-gold-dim),transparent 68%);opacity:.4;z-index:-1;animation:achievement-light 3.6s ease-in-out infinite alternate}
.goal-medal .icon{width:28px;height:28px;filter:none}
.goal-box{stroke:none;overflow:visible}
.goal-box-open{display:none}.goal.is-reached .goal-box-open{display:inline}.goal.is-reached .goal-box-closed{display:none}
.goal-box-flaps,.goal-box-closed{transform-box:fill-box;transform-origin:center bottom;animation-duration:4s;animation-timing-function:var(--ease-in-out);animation-iteration-count:infinite}
.goal-box-flaps{animation-name:goal-box-unfold}.goal-box-closed{animation-name:goal-box-wiggle}
@keyframes goal-box-unfold{0%,50%,100%{transform:none}16%{transform:scaleY(.82) translateY(-6px)}32%{transform:scaleY(1.04) translateY(2px)}}
@keyframes goal-box-wiggle{0%,50%,100%{transform:none}6%{transform:translate(-1px,-1px) rotate(-10deg)}12%{transform:translate(1.5px,-1px) rotate(11deg)}18%{transform:translate(-1.8px,-1px) rotate(-12deg)}24%{transform:translate(1.8px,-1px) rotate(12deg)}30%{transform:translate(-1.2px,0) rotate(-9deg)}36%{transform:translate(1px,0) rotate(8deg)}42%{transform:translate(-.5px,0) rotate(-4deg)}48%{transform:none}}
@media(prefers-reduced-motion:reduce){.goal-box-flaps,.goal-box-closed{animation:none!important}}
.goal-motes{position:absolute;inset:-10px;pointer-events:none}
.goal-motes i{position:absolute;left:0;top:30%;width:2px;height:2px;border-radius:50%;background:var(--color-gold-bright);box-shadow:0 0 4px var(--color-gold);opacity:.45;animation:goal-firefly 4.2s var(--ease-in-out) -.7s infinite}
.goal-motes i:nth-child(2){left:auto;right:0;top:64%;animation-delay:-2.2s}.goal-motes i:nth-child(3){left:33%;top:0;animation-delay:-3.1s}.goal-motes i:nth-child(4){left:72%;top:auto;bottom:0;animation-delay:-1.5s}
@keyframes goal-firefly{0%,100%{opacity:.15;transform:translate(-2px,3px)}40%{opacity:.85;transform:translate(3px,-3px)}75%{opacity:.35;transform:translate(1px,-5px)}}
@media(max-width:600px){.goals{--goal-radius:21.5px}}
@media(prefers-reduced-motion:reduce){.goal-motes{display:none}}
body.motion-paused .goal-motes{display:none}
@keyframes achievement-light{from{opacity:.25;transform:scale(.85)}to{opacity:.7;transform:scale(1.16)}}
body.page-hidden *,body.page-hidden *:before,body.page-hidden *:after,.motion-offscreen *,.motion-offscreen *:before,.motion-offscreen *:after{animation-play-state:paused!important}
body.motion-paused *:before,body.motion-paused *:after{animation:none!important}
@media(max-width:900px){.header-canopy{width:56px;height:82px;opacity:.9}.header-canopy-right{mask-image:linear-gradient(to right,transparent 50%,#000 65%)}.nav-inner{width:86%}}
@media(max-width:600px){.header-canopy{top:-5px;width:34px;height:65px;opacity:.85}.header-canopy-left{mask-image:linear-gradient(to right,#000 45%,transparent 75%)}.nav-inner{width:86%}.facts{padding:18px 10px;border-radius:12px}.facts:before{border-image-width:19px}.facts:after{inset:-24px -9px auto;background-size:52px 29px}.starter{overflow:visible;padding-bottom:0}.starter-art{width:100%;margin:0;left:0;bottom:0}.starter-art img{border-radius:0 0 15px 15px}.pack-motes{inset:-24px -10px}.goal-track{top:24px}.goals:before,.goals:after{top:9px;height:29px}}
@media(prefers-reduced-motion:reduce){.pack-motes{display:none}.goal.is-reached .goal-medal:before{animation:none}}body.motion-paused .pack-motes{display:none}
@media(max-width:900px){.facts{--scroll-width:clamp(12px,3vw,28px)}}
@media(max-width:600px){:root{--facts-half-height:72.5px}.facts:after{inset:auto calc(3px - var(--scroll-width));top:50%;height:29px;background-size:var(--scroll-width) auto}}
/* Small screens retain their safe gutters. Wide screens reveal the full
   inward silhouette in the empty space outside the 1260px navigation. */
.header-canopy-right{--canopy-width-base:clamp(90px,9vw,122px);width:calc(var(--canopy-width-base) * 1.5)}
@media(min-width:1500px){.header-canopy{width:clamp(96px,calc((100% - 1260px)/2 - 24px),280px);mask-image:none}}
@media(max-width:900px){.header-canopy{height:135px}.header-canopy-right{--canopy-width-base:82px}}
@media(max-width:600px){.header-canopy{height:110px}.header-canopy-right{--canopy-width-base:65px}}
@media(max-width:600px){.starter-art{width:calc(100% + 24px);margin:0 -12px -20px}.starter-art img{border-radius:0}.starter-leaves i{--leaf-flight:54px;width:20px;height:12px}.starter+.systems{margin-top:44px}}
.community h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15}
.community .section-head{margin-bottom:24px}
.goal-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:calc(100% - 24px);max-width:270px;padding-top:16px}
.goal-reward{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.goal-reward-icon{width:100%;max-width:70px;height:64px;padding:0}
.goal-reward-icon img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.goal-reward-name{font-size:12px;line-height:1.4;color:var(--color-muted);text-wrap:balance}
.community-state{margin-top:20px}
@media(max-width:900px){.goals{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.goal-track,.goals:before,.goals:after{display:none}.goal-rewards{width:100%;padding-top:12px;gap:8px}.goal-reward-icon{height:58px}.goal-reward-icon img{width:34px;height:34px}.goal-reward-name{text-wrap:balance;font-size:11px}}
.hero-scene{object-position:top}