@font-face {
  font-family: "Zpix";
  src: url("https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font@master/dist/zpix.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Smiley Sans Oblique";
  src: url("../fonts/smiley-sans-oblique.woff2") format("woff2");
  font-style: oblique;
  font-weight: 400;
  font-display: swap;
}

/* ZIHY / Garden OS — typography-first, terminal-dark personal homepage. */

.folio {
  --void: #090b0a;
  --carbon: #101411;
  --panel: rgba(17, 22, 18, .7);
  --bone: #edf1eb;
  --dim: #858d86;
  --moss: #789d7f;
  --moss-bright: #a7c9ad;
  --rust: #b87550;
  --line: rgba(218, 229, 216, .14);
  --line-strong: rgba(218, 229, 216, .34);
  --page: min(1400px, calc(100vw - 96px));
  --sans: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --serif: "Playfair Display", "Noto Serif SC", "Songti SC", STSong, serif;
  --pixel: "DotGothic16", "Zpix", "Microsoft YaHei UI", sans-serif;
  --display: "Smiley Sans Oblique", "Noto Sans SC", sans-serif;
  --scrawl: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  --quote: "LXGW WenKai Screen", "LXGW WenKai", "KaiTi", "STKaiti", serif;
  --tech: "Unbounded", "Space Grotesk", sans-serif;
  --tall: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  color: var(--bone);
  background: var(--void);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  overflow: clip;
}

/* One continuous rain-soaked field anchors every home section. */
.folio-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050605;
}
.folio-world::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  opacity: .78;
  background: url("../images/garden-ruins-field.webp") center 52% / cover no-repeat;
  filter: grayscale(1) contrast(1.32) brightness(.43);
  transform: scale(1.025);
  animation: garden-world-drift 36s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}
.folio-world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 1;
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(5, 7, 6, .02) 0 18%, rgba(4, 6, 5, .28) 53%, rgba(2, 3, 2, .9) 108%),
    linear-gradient(90deg, rgba(0, 0, 0, .62), transparent 20% 80%, rgba(0, 0, 0, .66)),
    linear-gradient(rgba(214, 225, 213, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 225, 213, .022) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(221, 232, 220, .012) 7px 8px);
  background-size: auto, auto, 80px 80px, 80px 80px, 8px 8px;
}
.folio-world-etchings {
  position: absolute;
  inset: -2%;
  z-index: 1;
  width: 104%;
  height: 104%;
  color: rgba(198, 211, 198, .12);
  opacity: .68;
  mix-blend-mode: screen;
  transform: scale(1.02) translate3d(-4px, 0, 0);
  animation: garden-etching-drift 34s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.folio-world-etchings path { vector-effect: non-scaling-stroke; }
.folio-etching-fibres { opacity: .76; }
.folio-etching-fibres path:nth-child(even) { opacity: .7; stroke-dasharray: 3 11 38 7; }
.folio-etching-branches { opacity: .52; stroke-dasharray: 2 9 24 12; }
.folio-etching-spores { opacity: .84; }

.folio *, .folio *::before, .folio *::after { box-sizing: border-box; }
.folio a { color: inherit; }
.is-home .site-backdrop { display: none; }
.is-home main { padding: 0; }

.is-home .g-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  min-height: 58px;
  color: var(--bone);
  background: rgba(9, 11, 10, .72);
  border-bottom: 1px solid rgba(218, 229, 216, .1);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.is-home .g-nav::after { display: none; }
.is-home .g-nav-inner { width: var(--page); max-width: none; min-height: 58px; padding: 0; }
.is-home .g-nav-logo,
.is-home .g-nav-links a {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-shadow: none;
  text-transform: uppercase;
}
.is-home .g-nav-logo { color: var(--bone); font-weight: 700; }
.is-home .g-nav-logo::before { content: "■"; margin-right: 9px; color: var(--moss); font-size: 8px; }
.is-home .g-nav-links { gap: clamp(15px, 2.2vw, 34px); }
.is-home .g-nav-links a.active,
.is-home .g-nav-links a:hover { color: var(--bone); }
.is-home .g-nav-links a.active::before { content: ">"; margin-right: 5px; color: var(--moss-bright); }
.is-home .g-scroll-track { display: none; }

.is-home .g-footer {
  margin-top: 0;
  color: var(--dim);
  background: var(--void);
  border-top: 4px solid var(--bone);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.is-home .g-footer-inner { width: var(--page); max-width: none; padding: 14px 0; }
.is-home .g-footer-author, .is-home .g-footer a { color: var(--bone); }

/* Hero — an off-axis title suspended in the clearing after rain. */
.folio-cover {
  position: relative;
  min-height: max(720px, 92svh);
  color: var(--bone);
  background: linear-gradient(180deg, rgba(5, 7, 6, .12), rgba(5, 7, 6, .3) 66%, rgba(5, 7, 6, .58));
  isolation: isolate;
  overflow: hidden;
}

.folio-cover::after {
  content: "GARDEN / 00";
  position: absolute;
  right: -44px;
  top: 24%;
  z-index: 3;
  color: rgba(230, 239, 228, .2);
  font: 9px/1 var(--mono);
  letter-spacing: .5em;
  writing-mode: vertical-rl;
}

.folio-cover-photo,
.folio-cover-shade,
.folio-cover-lens { position: absolute; inset: 0; }

.folio-cover-photo > img,
.folio-cover-lens img { width: 100%; height: 100%; object-fit: cover; }

.folio-cover-photo > img {
  position: absolute;
  opacity: 0;
  filter: grayscale(1) contrast(1.25) brightness(.58);
  transform: scale(1.035);
  animation: garden-cover-drift 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.folio-photo-light { display: none; }
.folio-photo-dark { display: block; }

.folio-cover-shade {
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(9, 11, 10, 0) 0 22%, rgba(9, 11, 10, .14) 58%, rgba(5, 7, 6, .52) 100%),
    linear-gradient(180deg, rgba(5, 7, 6, .04), rgba(5, 7, 6, .08) 58%, rgba(5, 7, 6, .5));
}

.folio-cover-lens {
  z-index: 2;
  opacity: 0;
  clip-path: circle(150px at 50% 50%);
  filter: saturate(.72) contrast(1.08);
  transition: opacity 180ms ease;
}
.folio-cover-lens img { opacity: .48; }
.folio-cover.is-lens-active .folio-cover-lens { opacity: 1; }

.folio-masthead {
  position: absolute;
  top: 82px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
  width: var(--page);
  color: var(--dim);
  font: 9px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.folio-masthead a { color: var(--bone); font-weight: 700; }
.folio-masthead a i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--moss); box-shadow: 0 0 12px rgba(120, 157, 127, .9); animation: garden-pulse 1.8s ease-in-out infinite; }
.folio-masthead span { opacity: .54; }
.folio-masthead time { margin-left: auto; color: var(--moss-bright); }

.folio-wordmark {
  --wordmark-ink: var(--bone);
  --wordmark-ghost-ink: rgba(214, 228, 216, .25);
  --wordmark-omen: rgba(167, 201, 173, .82);
  --wordmark-void: rgba(4, 7, 5, .96);
  --wordmark-chip-rest: .64;
  --wordmark-chip-tight: .76;
  --wordmark-chip-peak: .94;
  --wordmark-chip-tail: .7;
  --wordmark-ghost-opacity: .82;
  --wordmark-ghost-peak: .98;
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 4;
  width: min(1220px, calc(100vw - 92px));
  height: clamp(94px, 13vw, 176px);
  margin: 0;
  color: var(--wordmark-ink);
  font-family: var(--serif);
  font-size: clamp(76px, 8.7vw, 132px);
  font-style: italic;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.047em;
  text-align: center;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  isolation: isolate;
}
.folio-wordmark-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transform-origin: 50% 54%;
}
.folio-wordmark.is-tracking .folio-wordmark-layer { will-change: transform; }
.folio-wordmark-main {
  z-index: 2;
  color: var(--wordmark-ink);
  text-shadow: 1px 2px 0 rgba(101, 139, 108, .1), 0 19px 58px rgba(0, 0, 0, .56);
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: linear-gradient(174deg, #000 0 28.7%, transparent 29.1% 32.1%, #000 32.5% 100%);
  mask-image: linear-gradient(174deg, #000 0 28.7%, transparent 29.1% 32.1%, #000 32.5% 100%);
}
.folio-wordmark-ghost {
  z-index: 1;
  color: transparent;
  opacity: var(--wordmark-ghost-opacity);
  -webkit-text-stroke: 1px var(--wordmark-ghost-ink);
  transform: translate3d(4px, 5px, 0);
}
.folio-wordmark-run { position: relative; z-index: 2; }
.folio-wordmark-run:first-child { margin-right: -.08em; }
.folio-wordmark-run:last-child { margin-left: -.12em; }
.folio-wordmark-eclipse {
  position: relative;
  display: inline-grid;
  z-index: 3;
  width: .72em;
  place-items: center;
  transform-origin: 50% 52%;
}
.folio-wordmark-ghost .folio-wordmark-eclipse { width: .72em; }
.folio-wordmark-disc {
  --eclipse-x: 4px;
  --eclipse-y: -2px;
  --eclipse-angle: -32deg;
  position: relative;
  z-index: 3;
  display: block;
  width: .64em;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--wordmark-omen) 68%, transparent);
  border-radius: 50%;
  background: var(--wordmark-omen);
  box-shadow: 0 0 0 1px rgba(223, 239, 226, .05), 0 0 24px rgba(132, 178, 141, .19);
}
.folio-wordmark-disc::before,
.folio-wordmark-disc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.folio-wordmark-disc::before {
  z-index: -1;
  width: 118%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--wordmark-omen) 34%, transparent);
  border-left-color: transparent;
  transform: translate(-50%, -50%) rotate(var(--eclipse-angle));
}
.folio-wordmark-disc::after {
  z-index: 1;
  width: 91%;
  aspect-ratio: 1;
  background: var(--wordmark-void);
  box-shadow: inset -2px 1px 4px rgba(223, 239, 226, .04);
  transform: translate(-50%, -50%) translate3d(var(--eclipse-x), var(--eclipse-y), 0);
}
.folio-wordmark-disc > b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wordmark-omen);
  box-shadow: 0 0 9px color-mix(in srgb, var(--wordmark-omen) 64%, transparent);
  transform: translate(-50%, -50%) rotate(var(--eclipse-angle)) translateX(.4em);
}
.folio-wordmark-ray {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wordmark-omen) 74%, transparent));
  box-shadow: 0 0 7px color-mix(in srgb, var(--wordmark-omen) 32%, transparent);
  mix-blend-mode: screen;
  transform: scaleX(0);
}
.folio-wordmark-ray-left { right: 50%; width: 4.7em; transform-origin: right center; }
.folio-wordmark-ray-right { left: 50%; width: 2.75em; background: linear-gradient(90deg, color-mix(in srgb, var(--wordmark-omen) 74%, transparent), transparent); transform-origin: left center; }
.folio-wordmark-chip {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--wordmark-ink) 88%, var(--wordmark-omen));
  opacity: var(--wordmark-chip-rest);
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(146, 188, 154, .12);
  pointer-events: none;
}
.folio-wordmark-chip-a {
  clip-path: polygon(0 27%, 43% 30%, 43% 35%, 0 32%);
  transform: translate3d(-8px, -5px, 0) rotate(-.38deg);
}
.folio-wordmark-chip-b {
  clip-path: polygon(67% 32%, 100% 35%, 100% 40%, 67% 37%);
  transform: translate3d(10px, -5px, 0) rotate(.42deg);
}
.folio-wordmark.is-signalled .folio-wordmark-ray-left { animation: garden-wordmark-ray 640ms var(--ease-out) both; }
.folio-wordmark.is-signalled .folio-wordmark-ray-right { animation: garden-wordmark-ray 640ms var(--ease-out) 38ms both; }
.folio-wordmark.is-signalled .folio-wordmark-ghost { animation: garden-wordmark-echo 640ms var(--ease-out) both; }
.folio-wordmark.is-signalled .folio-wordmark-disc { animation: garden-wordmark-eclipse 640ms var(--ease-out) both; }
.folio-wordmark.is-signalled .folio-wordmark-disc::after { animation: garden-wordmark-cover 640ms var(--ease-out) both; }
.folio-wordmark.is-signalled .folio-wordmark-chip-a { animation: garden-wordmark-chip-a 640ms var(--ease-out) both; }
.folio-wordmark.is-signalled .folio-wordmark-chip-b { animation: garden-wordmark-chip-b 640ms var(--ease-out) 28ms both; }

.folio-cover-copy {
  position: absolute;
  left: 50%;
  bottom: 46px;
  z-index: 5;
  width: var(--page);
  transform: translateX(-50%);
  pointer-events: none;
}
.folio-cover-role {
  margin: 0 0 24px;
  color: var(--dim);
  font: 400 clamp(16px, 1.35vw, 20px)/1.55 var(--mono);
  letter-spacing: .025em;
}
.folio-cover-role em { color: var(--bone); font-style: normal; border-bottom: 1px solid var(--moss); }
.folio-cover-terminal { color: rgba(213, 223, 212, .46); font: 9px/1.8 var(--mono); letter-spacing: .11em; }
.folio-cover-terminal b { color: var(--moss-bright); font-weight: 600; }
.folio-cover-terminal span { display: block; margin-top: 5px; opacity: .7; }

.folio-cover-fragment {
  position: absolute;
  right: max(128px, calc((100vw - 1400px) / 2 + 96px));
  bottom: 54px;
  z-index: 6;
  width: min(510px, 40vw);
  min-height: 210px;
  color: var(--bone);
  perspective: 900px;
  isolation: isolate;
}
.folio-cover-fragment::before {
  content: attr(data-quote-number);
  position: absolute;
  right: 3px;
  top: 29px;
  z-index: -3;
  color: color-mix(in srgb, var(--bone) 6%, transparent);
  font: 700 72px/.8 var(--tall);
  letter-spacing: -.06em;
}
.folio-cover-fragment::after {
  content: "";
  position: absolute;
  left: -88px;
  right: -24px;
  top: 53%;
  z-index: -4;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--moss-bright) 24%, transparent) 25%, color-mix(in srgb, var(--bone) 10%, transparent) 72%, transparent);
  transform: rotate(-2.2deg);
  transform-origin: right;
}
.folio-quote-film {
  position: relative;
  min-height: 200px;
  padding: 17px 15px 31px 39px;
  transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(-.25deg);
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.23, 1, .32, 1);
}
.folio-cover-fragment.is-tracking .folio-quote-film { transition: none; }
.folio-quote-film::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -13px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--moss-bright) 70%, transparent) 20% 71%, transparent);
  box-shadow: 3px 0 22px color-mix(in srgb, var(--moss-bright) 12%, transparent);
  transition: opacity 180ms ease;
}
.folio-quote-film::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 28px;
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--moss-bright) 62%, transparent);
  background: var(--void);
  transform: rotate(45deg);
  pointer-events: none;
}
.folio-quote-registration { position: absolute; right: 8px; top: -5px; color: color-mix(in srgb, var(--bone) 26%, transparent); font: 6px/1 var(--mono); letter-spacing: .18em; }
.folio-quote-registration b { color: var(--moss-bright); font-weight: 500; }
.folio-quote-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-right: 11px; color: var(--dim); font: 7px/1 var(--mono); letter-spacing: .14em; }
.folio-quote-head > span { display: flex; align-items: center; gap: 14px; }
.folio-quote-head b { color: var(--moss-bright); font-weight: 600; }
.folio-quote-head b::before { content: "// "; color: color-mix(in srgb, var(--bone) 30%, transparent); }
.folio-quote-head i { color: var(--dim); font-size: 6px; font-style: normal; }
.folio-quote-head i::before { content: "·"; margin-right: 7px; color: var(--moss-bright); }
.folio-quote-head output { color: color-mix(in srgb, var(--bone) 46%, transparent); font: inherit; }
.folio-cover-fragment blockquote { position: relative; z-index: 2; min-height: 82px; max-width: 450px; margin: 29px 0 19px; color: var(--bone); font: 400 clamp(20px, 1.42vw, 25px)/1.58 var(--quote); letter-spacing: .025em; text-shadow: 0 4px 22px rgba(0, 0, 0, .42); }
.folio-cover-fragment blockquote::before { content: ""; position: absolute; left: -40px; top: .82em; width: 19px; height: 1px; background: var(--moss-bright); opacity: .72; }
.folio-cover-fragment blockquote span { position: relative; display: block; font-optical-sizing: auto; transition: opacity 170ms ease, filter 190ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1), clip-path 220ms cubic-bezier(.23, 1, .32, 1); clip-path: inset(0); }
.folio-cover-fragment blockquote span::after { content: attr(data-quote-copy); position: absolute; inset: 0; color: color-mix(in srgb, var(--moss-bright) 62%, var(--bone)); opacity: .12; clip-path: inset(46% 0 42% 0); transform: translateX(2px); pointer-events: none; transition: opacity 180ms ease, transform 240ms cubic-bezier(.23, 1, .32, 1); }
.folio-quote-meta { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 12px; min-width: 0; margin: 0; transition: opacity 170ms ease, filter 190ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1), clip-path 220ms cubic-bezier(.23, 1, .32, 1); clip-path: inset(0); }
.folio-quote-meta strong { color: color-mix(in srgb, var(--bone) 88%, transparent); font: 600 11px/1.25 var(--quote); letter-spacing: .055em; white-space: nowrap; }
.folio-quote-meta strong::before { content: "— "; color: var(--moss-bright); font-family: var(--mono); }
.folio-quote-meta cite { min-width: 0; color: var(--dim); font: 7px/1.35 var(--mono); font-style: normal; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-quote-rail { position: absolute; right: 7px; bottom: 7px; z-index: 5; }
.folio-quote-next { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0; color: var(--dim); background: transparent; border: 0; font: 6px/1 var(--mono); letter-spacing: .13em; cursor: pointer; transition: transform 150ms cubic-bezier(.23, 1, .32, 1), color 180ms ease; }
.folio-quote-next b { color: var(--moss-bright); font: 13px/1 var(--mono); font-weight: 400; transition: transform 220ms cubic-bezier(.23, 1, .32, 1); }
.folio-quote-next:active { transform: scale(.95); }
.folio-quote-next:focus-visible { outline: 1px solid var(--moss-bright); outline-offset: 4px; }
.folio-quote-progress { position: absolute; left: 39px; right: 76px; bottom: 7px; z-index: 3; height: 12px; color: color-mix(in srgb, var(--bone) 24%, transparent); font: 5px/1 var(--mono); letter-spacing: .12em; }
.folio-quote-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--bone) 10%, transparent); }
.folio-quote-progress span { position: absolute; left: 0; bottom: 5px; }
.folio-quote-progress i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--moss-bright), transparent); transform: scaleX(0); transform-origin: left; }
.folio-quote-exposure { position: absolute; inset: 18px 0 25px 22px; z-index: 4; opacity: 0; background: linear-gradient(90deg, transparent 15%, rgba(145, 178, 148, .08) 35%, rgba(224, 234, 222, .34) 49%, rgba(103, 144, 108, .1) 58%, transparent 78%); mix-blend-mode: screen; transform: translateX(-115%) skewX(-8deg); pointer-events: none; }
.folio-cover-fragment.is-changing .folio-quote-exposure { animation: garden-quote-exposure 440ms cubic-bezier(.77, 0, .175, 1) both; }
.folio-cover-fragment.is-changing blockquote span,
.folio-cover-fragment.is-changing .folio-quote-meta { opacity: 0; filter: blur(3px); transform: translateX(12px); clip-path: inset(0 0 0 100%); }
.folio-cover-fragment.is-changing .folio-quote-film::before { opacity: .42; }

@media (hover: hover) and (pointer: fine) {
  .folio-quote-next:hover { color: var(--bone); }
  .folio-quote-next:hover b { transform: translateX(4px); }
  .folio-cover-fragment:hover blockquote span::after { opacity: .26; transform: translateX(4px); }
}

.folio-cover-side { position: absolute; left: 20px; top: 38%; z-index: 5; margin: 0; color: rgba(216, 226, 214, .36); font: 8px/1 var(--mono); letter-spacing: .35em; writing-mode: vertical-rl; }
.folio-cover-scroll { position: absolute; left: 50%; bottom: 32px; z-index: 7; display: grid; justify-items: center; gap: 9px; color: rgba(220, 230, 218, .4); font: 8px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; transform: translateX(-50%); }
.folio-cover-scroll i { width: 1px; height: 44px; background: linear-gradient(var(--moss), transparent); transform-origin: top; animation: garden-descend 2s ease-in-out infinite; }

/* Command panel — one quiet index over the garden's many coordinates. */
html.garden-command-open { overflow: hidden; }
.folio-command {
  inset: 0;
  width: min(720px, calc(100vw - 36px));
  max-height: min(720px, calc(100svh - 48px));
  margin: auto;
  padding: 0;
  color: var(--bone);
  background: color-mix(in srgb, var(--carbon) 94%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .035);
  font-family: var(--sans);
  overflow: hidden;
  opacity: 0;
  transform: translateY(7px) scale(.992);
  transition: opacity 150ms ease, transform 180ms var(--ease-out);
}
.folio-command[open] { display: block; }
.folio-command.is-visible { opacity: 1; transform: none; }
.folio-command::backdrop { background: rgba(2, 4, 3, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.folio-command-shell { display: flex; flex-direction: column; max-height: min(720px, calc(100svh - 48px)); background: linear-gradient(145deg, rgba(120, 157, 127, .035), transparent 38%); }
.folio-command-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.folio-command-head p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--dim); font: 7px/1 var(--mono); letter-spacing: .18em; }
.folio-command-head p i { width: 5px; height: 5px; background: var(--moss-bright); border-radius: 50%; box-shadow: 0 0 12px color-mix(in srgb, var(--moss-bright) 55%, transparent); }
.folio-command-head button { padding: 7px 0 7px 10px; color: var(--dim); background: transparent; border: 0; font: 7px/1 var(--mono); letter-spacing: .14em; cursor: pointer; }
.folio-command-head button:hover { color: var(--moss-bright); }
.folio-command-head button:focus-visible { outline: 1px solid var(--moss-bright); outline-offset: 3px; }
.folio-command-search { position: relative; display: flex; align-items: center; min-height: 76px; padding: 0 18px; border-bottom: 1px solid var(--line-strong); }
.folio-command-search svg { flex: 0 0 auto; width: 20px; height: 20px; margin-right: 14px; color: var(--moss-bright); fill: none; stroke: currentColor; stroke-width: 1.5; }
.folio-command-search input { min-width: 0; flex: 1; height: 74px; padding: 0; color: var(--bone); caret-color: var(--moss-bright); background: transparent; border: 0; outline: 0; font: 400 clamp(16px, 2.2vw, 20px)/1.2 var(--mono); }
.folio-command-search input::placeholder { color: color-mix(in srgb, var(--dim) 72%, transparent); }
.folio-command-search kbd { flex: 0 0 auto; margin-left: 12px; padding: 6px 8px; color: var(--dim); background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: 2px; font: 7px/1 var(--mono); letter-spacing: .08em; }
.folio-command-status { min-height: 34px; padding: 13px 18px 8px; color: var(--dim); font: 7px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.folio-command-results { min-height: 0; margin: 0; padding: 0 8px 8px; list-style: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.folio-command-results li[hidden] { display: none; }
.folio-command-results a { position: relative; display: grid; grid-template-columns: 120px minmax(145px, .8fr) minmax(0, 1.2fr) 20px; align-items: center; gap: 15px; min-height: 58px; padding: 0 12px; color: var(--bone); border-left: 2px solid transparent; text-decoration: none; }
.folio-command-results li + li a { border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent); }
.folio-command-results small { color: var(--dim); font: 6px/1.3 var(--mono); letter-spacing: .1em; }
.folio-command-results strong { min-width: 0; font: 500 15px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-command-results span { min-width: 0; color: var(--dim); font: 8px/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-command-results b { color: var(--dim); font: 400 12px/1 var(--mono); text-align: right; }
.folio-command-results li.is-active a { color: var(--bone); background: color-mix(in srgb, var(--moss) 12%, transparent); border-left-color: var(--moss-bright); }
.folio-command-results li.is-active small,
.folio-command-results li.is-active b { color: var(--moss-bright); }
.folio-command-results a:focus-visible { outline: 1px solid var(--moss-bright); outline-offset: -1px; }
.folio-command-empty { display: grid; place-items: center; align-content: center; min-height: 176px; margin: 0; padding: 24px; text-align: center; }
.folio-command-empty[hidden] { display: none; }
.folio-command-empty strong { color: var(--bone); font: 500 16px/1.4 var(--sans); }
.folio-command-empty span { margin-top: 7px; color: var(--dim); font: 8px/1.5 var(--mono); }
.folio-command-foot { display: flex; align-items: center; gap: 20px; min-height: 42px; padding: 0 18px; color: var(--dim); border-top: 1px solid var(--line); font: 6px/1 var(--mono); letter-spacing: .08em; }
.folio-command-foot span { display: flex; align-items: center; gap: 5px; }
.folio-command-foot kbd { min-width: 18px; padding: 4px 5px; color: color-mix(in srgb, var(--bone) 68%, transparent); background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: 2px; font: inherit; text-align: center; }

/* Explore — editorial fragments arranged around a quiet personal margin. */
.folio-explore { position: relative; min-height: clamp(790px, 88svh, 940px); padding: clamp(84px, 8vw, 118px) 0 54px; background: linear-gradient(180deg, rgba(6, 8, 7, .56), rgba(6, 8, 7, .7)); border-top: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.folio-explore::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .74; background: radial-gradient(ellipse at 18% 36%, rgba(110, 145, 116, .09), transparent 32%), radial-gradient(ellipse at 78% 68%, rgba(101, 132, 107, .065), transparent 30%), radial-gradient(circle, rgba(211, 225, 211, .036) 0 1px, transparent 1.4px); background-size: auto, auto, 11px 13px; }
.folio-explore-traces { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; color: rgba(188, 206, 190, .24); pointer-events: none; }
.folio-explore-traces path, .folio-articles-traces path { vector-effect: non-scaling-stroke; }
.folio-explore-traces, .folio-articles-traces { transform: translate3d(var(--field-x, 0), var(--field-y, 0), 0) scale(1.025); transform-origin: center; will-change: transform; }
.folio-explore-traces g, .folio-articles-traces g { transform-origin: center; animation: garden-trace-breathe 16s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-play-state: paused; }
.folio-trace-roots { opacity: .72; stroke-dasharray: 1 0; }
.folio-trace-cuts { opacity: .48; stroke-dasharray: 3 10 18 8; animation-delay: -6s !important; }
.folio-trace-seeds { opacity: .9; }
[data-field-motion].is-field-active .folio-explore-traces g, [data-field-motion].is-field-active .folio-articles-traces g { animation-play-state: running; }
.folio-field-motion { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.folio-field-sweep { position: absolute; top: 6%; left: -28vw; width: min(42vw, 620px); height: min(42vw, 620px); opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(155, 194, 162, .11), rgba(120, 157, 127, .025) 42%, transparent 70%); filter: blur(8px); transform: translate3d(0, 12vh, 0) scale(.82); animation: garden-field-mist 15s cubic-bezier(.45, 0, .35, 1) infinite; animation-play-state: paused; }
.folio-field-motion b { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(191, 220, 195, .66); border-radius: 50%; opacity: 0; transform: scale(.3); animation: garden-field-node 5.2s cubic-bezier(.4, 0, .2, 1) infinite; animation-play-state: paused; }
.folio-field-motion b::after { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(167, 201, 173, .14); border-radius: 50%; }
.folio-field-motion b:nth-of-type(1) { left: 31%; top: 66%; animation-delay: .3s; }
.folio-field-motion b:nth-of-type(2) { left: 59%; top: 43%; animation-delay: 1.8s; }
.folio-field-motion b:nth-of-type(3) { left: 84%; top: 31%; animation-delay: 3.2s; }
.folio-field-motion-articles b:nth-of-type(1) { left: 17%; top: 26%; }
.folio-field-motion-articles b:nth-of-type(2) { left: 48%; top: 68%; }
.folio-field-motion-articles b:nth-of-type(3) { left: 77%; top: 45%; }
[data-field-motion].is-field-active .folio-field-sweep, [data-field-motion].is-field-active .folio-field-motion b { animation-play-state: running; }
.folio-explore-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr); gap: clamp(56px, 7vw, 118px); width: var(--page); min-height: 700px; margin: 0 auto; }

.folio-profile { position: relative; align-self: stretch; max-width: 390px; padding: 86px 0 28px; }
.folio-profile::before { content: ""; position: absolute; left: 0; top: 74px; bottom: 158px; width: 1px; background: linear-gradient(transparent, var(--line-strong) 12%, var(--line-strong) 82%, transparent); box-shadow: 6px 0 14px rgba(167, 201, 173, .12); }
.folio-profile::after { content: ""; position: absolute; left: -5px; top: 98px; width: 11px; height: 44%; opacity: .4; border-left: 1px solid var(--moss-bright); }
.folio-profile-status { display: flex; justify-content: space-between; margin-left: 40px; padding: 0 0 14px; border-bottom: 1px solid var(--line); color: var(--dim); font: 600 9px/1 var(--pixel); letter-spacing: .14em; }
.folio-profile-status b { color: var(--moss-bright); font-weight: 400; }
.folio-profile-status b i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 12px rgba(120, 157, 127, .8); }
.folio-profile-id { display: flex; align-items: center; gap: 18px; margin: 34px 0 30px 40px; }
.folio-profile-id img { width: 50px; height: 50px; padding: 4px; object-fit: cover; filter: none; border: 1px solid rgba(236, 243, 233, .62); }
.folio-profile-id h2 { margin: 0 0 4px; color: var(--bone); font: 600 clamp(17px, 1.6vw, 23px)/1 var(--tech); letter-spacing: .015em; }
.folio-profile-id p { margin: 0; color: var(--dim); font: 8px/1.5 var(--pixel); letter-spacing: .12em; }
.folio-profile dl { margin: 0 0 24px 40px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.folio-profile dl > div { display: grid; grid-template-columns: 1fr auto; gap: 22px; padding: 7px 0; }
.folio-profile dt { color: rgba(200, 212, 200, .48); font: 8px/1.2 var(--pixel); letter-spacing: .12em; }
.folio-profile dd { margin: 0; color: var(--bone); font: 600 9px/1.2 var(--mono); letter-spacing: .04em; text-align: right; }
.folio-profile nav { display: grid; margin-left: 40px; border-top: 1px solid var(--line); }
.folio-profile nav a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--line); color: var(--bone); font: 600 9px/1 var(--pixel); letter-spacing: .11em; text-decoration: none; transition: padding 240ms var(--ease-out), color 180ms ease, background 180ms ease; }
.folio-profile nav a span { color: var(--moss-bright); }
.folio-profile-clock { position: absolute; left: 0; bottom: 0; display: grid; gap: 10px; }
.folio-profile-clock small { color: var(--dim); font: 8px/1 var(--pixel); letter-spacing: .14em; }
.folio-profile-clock time { color: var(--bone); font: 400 clamp(22px, 2.4vw, 32px)/1 var(--pixel); letter-spacing: .07em; }
.folio-profile-clock::after { content: ""; width: 86%; height: 2px; background: linear-gradient(90deg, var(--bone) 0 28%, var(--line) 28% 100%); transform: skewX(-28deg); }

.folio-directory { position: relative; padding: 0 0 22px; }
.folio-directory-ghost { position: absolute; right: 0; top: -52px; z-index: -1; color: rgba(229, 237, 227, .035); font: 700 clamp(74px, 11vw, 162px)/.8 var(--tall); letter-spacing: -.045em; white-space: nowrap; }
.folio-directory > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.folio-directory > header h2, .folio-directory > header span { margin: 0; color: var(--bone); font: 600 10px/1 var(--pixel); letter-spacing: .28em; }
.folio-directory > header h2 i { color: var(--moss-bright); font-style: normal; }
.folio-directory > header span { color: var(--dim); }
.folio-directory nav { display: grid; margin-top: 24px; }
.folio-directory-item { position: relative; display: grid; align-content: center; min-height: 142px; padding: 24px 110px 24px 34px; border-bottom: 1px solid rgba(218, 229, 216, .08); text-decoration: none; transition: background 260ms ease, transform 380ms var(--ease-out), border-color 260ms ease; }
.folio-directory-item-2 { width: 95%; margin-left: 5%; }
.folio-directory-item-3 { width: 90%; margin-left: 10%; }
.folio-directory-item-4 { width: 85%; margin-left: 15%; }
.folio-directory-item small { color: var(--dim); font: 400 8px/1 var(--pixel); letter-spacing: .13em; }
.folio-directory-item strong { margin: 7px 0 5px; color: var(--bone); font: 600 clamp(34px, 3.8vw, 54px)/.9 var(--serif); letter-spacing: -.025em; transition: color 220ms ease, transform 360ms var(--ease-out); }
.folio-directory-item strong i { color: var(--moss-bright); font: 400 .7em/1 var(--tech); font-style: normal; }
.folio-directory-item em { color: rgba(213, 224, 212, .54); font: 500 9px/1.3 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-directory-item code { position: absolute; right: 0; top: 50%; color: rgba(206, 217, 205, .25); font: 7px/1 var(--mono); letter-spacing: .08em; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .folio-profile nav a:hover { padding-left: 12px; color: var(--moss-bright); background: rgba(120, 157, 127, .06); }
  .folio-directory-item:hover { z-index: 2; background: linear-gradient(90deg, rgba(120, 157, 127, .09), transparent 82%); border-color: var(--line-strong); transform: translateX(12px); }
  .folio-directory-item:hover strong { color: var(--moss-bright); transform: translateX(5px); }
}

/* Recent log — three editorial columns followed by the garden's live traces. */
.folio-articles { position: relative; min-height: clamp(740px, 84svh, 860px); margin-top: -1px; padding: clamp(86px, 8vw, 116px) 0 clamp(82px, 8vw, 112px); background: linear-gradient(180deg, rgba(6, 8, 7, .7), rgba(6, 8, 7, .76)); border-top: 1px solid rgba(218, 229, 216, .09); isolation: isolate; overflow: hidden; }
.folio-articles::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .72; background: radial-gradient(ellipse at 74% 22%, rgba(112, 146, 118, .075), transparent 29%), radial-gradient(ellipse at 25% 78%, rgba(90, 119, 96, .06), transparent 33%), radial-gradient(circle, rgba(211, 225, 211, .032) 0 1px, transparent 1.4px); background-size: auto, auto, 13px 11px; }
.folio-articles::after { content: "FIELD_LOG"; position: absolute; right: -1.5vw; top: 1.5vw; z-index: -2; color: rgba(229, 237, 227, .027); font: 700 clamp(86px, 15vw, 220px)/.8 var(--tall); letter-spacing: -.045em; white-space: nowrap; }
.folio-articles-traces { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; color: rgba(188, 206, 190, .22); pointer-events: none; }
.folio-articles-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr); gap: clamp(64px, 8vw, 128px); width: var(--page); min-height: 650px; margin: 0 auto; }

.folio-article-console { position: relative; display: flex; flex-direction: column; min-height: 650px; padding: 22px 0 10px 40px; border-left: 1px solid var(--line-strong); }
.folio-article-console::before { content: ""; position: absolute; left: -6px; top: 94px; width: 12px; height: 34%; opacity: .44; border-left: 1px solid var(--moss-bright); }
.folio-article-console > header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px; border-bottom: 1px solid var(--line); color: var(--dim); font: 600 8px/1 var(--pixel); letter-spacing: .15em; }
.folio-article-console > header b { color: var(--moss-bright); font-weight: 400; }
.folio-article-console > header i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 10px rgba(120, 157, 127, .72); }

.folio-contribution { padding: 30px 0 28px; border-bottom: 1px solid var(--line); }
.folio-contribution-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.folio-contribution-heading small { color: var(--dim); font: 7px/1 var(--pixel); letter-spacing: .14em; }
.folio-contribution-heading h3 { margin: 8px 0 0; color: var(--bone); font: 400 clamp(18px, 1.8vw, 24px)/1.1 var(--scrawl); letter-spacing: .03em; }
.folio-contribution-heading > span { padding-bottom: 2px; color: var(--moss-bright); font: 7px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; transition: opacity 160ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); }
.folio-contribution.is-reading-date .folio-contribution-heading > span { opacity: 1; transform: translate3d(-3px, 0, 0); }
.folio-contribution[data-github-state="syncing"] .folio-contribution-heading > span { animation: garden-github-sync 1.4s steps(2, end) infinite; }
.folio-contribution[data-github-state="offline"] .folio-contribution-heading > span { color: var(--rust); }
.folio-contribution-months { position: relative; height: 18px; margin: 24px 0 3px 18px; color: rgba(207, 219, 205, .46); font: 6px/1 var(--mono); letter-spacing: .05em; }
.folio-contribution-months span { position: absolute; bottom: 0; transform: translateX(-2px); }
.folio-contribution-matrix { display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 7px; }
.folio-contribution-weekdays { display: grid; grid-template-rows: repeat(7, 1fr); height: 80px; color: rgba(207, 219, 205, .34); font: 6px/1 var(--mono); }
.folio-contribution-weekdays span { display: grid; place-items: center; }
.folio-contribution-grid { display: grid; grid-template-columns: repeat(28, minmax(3px, 1fr)); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; width: 100%; height: 80px; }
.folio-contribution[data-github-state="syncing"] .folio-contribution-grid { opacity: .42; }
.folio-contribution-grid span, .folio-contribution-foot i { display: block; background: rgba(220, 231, 218, .055); border: 1px solid rgba(220, 231, 218, .035); }
.folio-contribution-grid span { position: relative; z-index: 0; cursor: crosshair; transform-origin: center; transition: opacity 150ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1), background-color 150ms ease, border-color 150ms ease, box-shadow 180ms ease; }
.folio-contribution-grid span[data-level="1"], .folio-contribution-foot i[data-level="1"] { background: #233329; border-color: #2b4232; }
.folio-contribution-grid span[data-level="2"], .folio-contribution-foot i[data-level="2"] { background: #385542; border-color: #456c51; }
.folio-contribution-grid span[data-level="3"], .folio-contribution-foot i[data-level="3"] { background: #5f8568; border-color: #719d7b; box-shadow: 0 0 7px rgba(95, 133, 104, .18); }
.folio-contribution-grid span[data-level="4"], .folio-contribution-foot i[data-level="4"] { background: #a7c9ad; border-color: #c4dec8; box-shadow: 0 0 9px rgba(167, 201, 173, .26); }
.folio-contribution-grid span.is-future { opacity: .22; }
.folio-contribution-grid span.is-today { outline: 1px solid rgba(237, 241, 235, .82); outline-offset: 1px; }
.folio-contribution-grid span.is-near { z-index: 2; opacity: .9 !important; background: rgba(105, 148, 114, .76) !important; border-color: rgba(167, 201, 173, .7) !important; transform: scale(1.22) !important; }
.folio-contribution-grid span.is-pointed { z-index: 4; opacity: 1 !important; background: var(--bone) !important; border-color: var(--bone) !important; box-shadow: 0 0 0 2px rgba(167, 201, 173, .15), 0 0 17px rgba(167, 201, 173, .64) !important; transform: scale(1.9) !important; }
.folio-contribution.is-motion-ready .folio-contribution-grid span { opacity: .08; transform: scale(.45); }
.folio-contribution.is-awake .folio-contribution-grid span { animation: garden-contribution-wake 560ms cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--cell-delay, 0ms); }
.folio-contribution.is-awake .folio-contribution-grid span.is-future { animation-name: garden-contribution-future; }
.folio-contribution-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 0 18px; color: rgba(207, 219, 205, .38); font: 6px/1 var(--mono); letter-spacing: .08em; }
.folio-contribution-foot p { display: flex; gap: 3px; margin: 0; }
.folio-contribution-foot i { width: 7px; height: 7px; }

.folio-calendar { margin-top: auto; padding: 30px 0 0; }
.folio-calendar > header { display: flex; align-items: end; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.folio-calendar > header small { color: var(--dim); font: 7px/1 var(--pixel); letter-spacing: .14em; }
.folio-calendar > header time { color: var(--bone); font: 400 clamp(17px, 2vw, 25px)/1 var(--pixel); letter-spacing: .08em; }
.folio-calendar-weekdays, .folio-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.folio-calendar-weekdays { height: 30px; color: rgba(207, 219, 205, .4); border-bottom: 1px solid rgba(218, 229, 216, .07); font: 6px/1 var(--mono); }
.folio-calendar-weekdays span, .folio-calendar-days span, .folio-calendar-days button { display: grid; place-items: center; }
.folio-calendar-days { grid-auto-rows: 27px; padding-top: 6px; color: rgba(231, 237, 228, .76); font: 8px/1 var(--pixel); }
.folio-calendar-days span.is-outside { color: rgba(207, 219, 205, .12); }
.folio-calendar-days button { width: 30px; height: 22px; place-self: center; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; cursor: crosshair; transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1); }
.folio-calendar-days button.is-today { color: #0c120e; background: var(--bone); box-shadow: 0 0 18px rgba(237, 241, 235, .16); transform: skewX(-4deg); }
.folio-calendar-days button.is-near { color: var(--moss-bright); transform: scale(1.08) !important; }
.folio-calendar-days button.is-pointed { z-index: 2; color: #0c120e !important; background: var(--bone) !important; box-shadow: 0 0 0 1px rgba(237, 241, 235, .34), 0 0 22px rgba(167, 201, 173, .44) !important; transform: skewX(-4deg) scale(1.12) !important; animation-play-state: paused !important; }
.folio-calendar.is-date-hovered .folio-calendar-days button.is-today:not(.is-pointed) { color: var(--moss-bright); background: rgba(167, 201, 173, .1); box-shadow: none; animation-play-state: paused; transform: skewX(-4deg) scale(.96) !important; }
.folio-calendar-days button:focus-visible { outline: 1px solid var(--moss-bright); outline-offset: 3px; }
.folio-calendar.is-motion-ready .folio-calendar-days span, .folio-calendar.is-motion-ready .folio-calendar-days button { opacity: 0; transform: translate3d(0, 7px, 0); }
.folio-calendar.is-awake .folio-calendar-days span, .folio-calendar.is-awake .folio-calendar-days button { animation: garden-calendar-wake 420ms cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--calendar-delay, 0ms); }
.folio-calendar.is-awake .folio-calendar-days button.is-today { animation: garden-calendar-wake 420ms cubic-bezier(.16, 1, .3, 1) forwards var(--calendar-delay, 0ms), garden-calendar-today 2.8s cubic-bezier(.45, 0, .55, 1) 900ms infinite; }
.folio-calendar > footer { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--dim); font: 6px/1 var(--mono); letter-spacing: .08em; }
.folio-calendar > footer b { color: rgba(224, 233, 222, .48); font-weight: 400; }
.folio-calendar > footer::after { content: ""; position: absolute; left: 40px; right: 0; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--bone) 0 28%, var(--line) 28% 100%); transform: translateY(17px) skewX(-28deg); }

.folio-article-stream { position: relative; padding-top: 22px; }
.folio-article-stream > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.folio-article-stream > header h2, .folio-article-stream > header a { margin: 0; font: 600 9px/1 var(--pixel); letter-spacing: .24em; text-decoration: none; }
.folio-article-stream > header h2 { color: var(--bone); }
.folio-article-stream > header h2 i { color: var(--moss-bright); font-style: normal; }
.folio-article-stream > header a { color: var(--dim); font-size: 7px; transition: color 180ms ease; }
.folio-article-stream ol { margin: 20px 0 0; padding: 0; list-style: none; }
.folio-article-stream li { width: 100%; border-bottom: 1px solid rgba(218, 229, 216, .1); }
.folio-article-stream li:nth-child(2) { width: 96%; margin-left: 4%; }
.folio-article-stream li:nth-child(3) { width: 92%; margin-left: 8%; }
.folio-article-stream li > a { position: relative; display: grid; align-content: center; min-height: 172px; padding: 28px 116px 28px 32px; text-decoration: none; transition: background 260ms ease, transform 380ms var(--ease-out), border-color 260ms ease; }
.folio-article-stream li small { color: var(--dim); font: 400 8px/1 var(--pixel); letter-spacing: .13em; }
.folio-article-stream li h3 { max-width: 760px; margin: 11px 0 9px; color: var(--bone); font: 400 clamp(27px, 3vw, 44px)/1.08 var(--scrawl); letter-spacing: .015em; transition: color 220ms ease, transform 360ms var(--ease-out); }
.folio-article-stream li p { max-width: 700px; margin: 0; color: rgba(213, 224, 212, .5); font: 400 11px/1.65 var(--sans); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.folio-article-stream li span { position: absolute; right: 2px; top: 50%; color: rgba(206, 217, 205, .28); font: 7px/1 var(--mono); letter-spacing: .08em; transform: translateY(-50%); transition: color 180ms ease, right 280ms var(--ease-out); }
.folio-motion-row { opacity: 0; transform: translate3d(28px, 0, 0); }
.folio-motion-row.is-motion-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 520ms cubic-bezier(0, 0, .2, 1) var(--motion-delay, 0ms), transform 680ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms); }
.folio-articles-baseline { position: absolute; right: 11%; bottom: 16px; margin: 0; color: rgba(230, 238, 228, .62); font: 600 8px/1 var(--pixel); letter-spacing: .3em; }
.folio-articles-baseline::before { content: ""; position: absolute; right: calc(100% + 20px); top: 50%; width: 38vw; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
@media (hover: hover) and (pointer: fine) {
  .folio-article-stream > header a:hover { color: var(--moss-bright); }
  .folio-directory-item.folio-motion-row.is-motion-in:hover { transform: translateX(12px); }
  .folio-article-stream li > a:hover { background: linear-gradient(90deg, rgba(120, 157, 127, .085), transparent 84%); transform: translateX(10px); }
  .folio-article-stream li > a:hover h3 { color: var(--moss-bright); transform: translateX(4px); }
  .folio-article-stream li > a:hover span { right: 12px; color: var(--moss-bright); }
}

/* Page ending — the field condenses into one interactive signal. */
.folio-outro {
  --outro-parallax-x: 0px;
  --outro-parallax-y: 0px;
  --outro-title-x: 0px;
  --outro-title-y: 0px;
  --outro-orbit-x: 50vw;
  --outro-orbit-y: 50%;
  --outro-track-x: calc(100% - 7px);
  --outro-energy: 0;
  --outro-tune: 1;
  position: relative;
  display: grid;
  min-height: clamp(460px, 62svh, 720px);
  margin-top: -1px;
  place-items: center;
  color: var(--bone);
  background: linear-gradient(180deg, rgba(5, 7, 6, .76), rgba(5, 7, 6, .92));
  border-top: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}
.folio-outro::before {
  content: "EOF";
  position: absolute;
  left: 50%;
  bottom: -7%;
  z-index: -1;
  color: color-mix(in srgb, var(--bone) 4%, transparent);
  font: 700 clamp(180px, 34vw, 520px)/.64 var(--tall);
  letter-spacing: -.08em;
  opacity: 1;
  transform: translate3d(calc(-56% + var(--outro-parallax-x)), var(--outro-parallax-y), 0);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1);
  white-space: nowrap;
}
.folio-outro-orbit {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: clamp(150px, 18vw, 240px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--moss-bright) 24%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(var(--outro-orbit-x), var(--outro-orbit-y), 0) scale(calc(.86 + var(--outro-energy) * .18));
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  will-change: transform;
}
.folio-outro-orbit::before,
.folio-outro-orbit::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid color-mix(in srgb, var(--moss) 18%, transparent);
  border-radius: 50%;
}
.folio-outro-orbit::after { inset: 42%; background: var(--moss-bright); border: 0; box-shadow: 0 0 20px color-mix(in srgb, var(--moss-bright) 48%, transparent); }
.folio-outro-orbit i { position: absolute; left: 50%; top: -28%; width: 1px; height: 156%; background: linear-gradient(transparent, color-mix(in srgb, var(--moss-bright) 32%, transparent), transparent); transform: rotate(calc(34deg + var(--outro-energy) * 96deg)); transition: transform 180ms ease-out; }
.folio-outro.is-pointer-in .folio-outro-orbit { opacity: calc(.38 + var(--outro-energy) * .42); }
.folio-outro-inner { width: var(--page); }
.folio-outro-signal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(34px, 5vw, 64px);
  color: var(--dim);
  font: 8px/1 var(--pixel);
  letter-spacing: .18em;
}
.folio-outro-signal i {
  width: 7px;
  height: 7px;
  background: var(--moss);
  box-shadow: 0 0 13px color-mix(in srgb, var(--moss) 64%, transparent);
}
.folio-outro h2 {
  max-width: 1160px;
  margin: 0;
  color: var(--bone);
  font: 500 clamp(58px, 9vw, 142px)/.9 var(--tech);
  letter-spacing: -.065em;
  perspective: 700px;
}
.folio-outro h2 > [data-outro-text] { display: block; white-space: nowrap; }
.folio-outro-glyph {
  display: inline-block;
  min-width: .12em;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 68%;
  text-shadow: calc(var(--outro-energy) * -5px) 0 0 color-mix(in srgb, var(--moss-bright) 44%, transparent), calc(var(--outro-energy) * 5px) 0 0 color-mix(in srgb, var(--rust) 34%, transparent);
  will-change: transform;
}
.folio-outro-glyph.is-space { width: .34em; min-width: .34em; }
.folio-outro-track {
  position: relative;
  height: 34px;
  margin-top: clamp(42px, 6vw, 76px);
  background: transparent;
  cursor: ew-resize;
  overflow: visible;
  touch-action: none;
}
.folio-outro-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.folio-outro-track:focus-visible { outline: 1px solid var(--moss-bright); outline-offset: 7px; }
.folio-outro-track:focus-visible::before,
.folio-outro.is-tuning .folio-outro-track::before {
  background: color-mix(in srgb, var(--moss-bright) 44%, var(--line));
  box-shadow: 0 0 16px color-mix(in srgb, var(--moss-bright) 15%, transparent);
}
.folio-outro-track i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--moss-bright), var(--bone) 58%, var(--moss));
  transform: scaleX(var(--outro-tune));
  transform-origin: left;
}
.folio-outro-track b {
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--bone);
  box-shadow: 0 0 18px color-mix(in srgb, var(--moss-bright) 62%, transparent);
  transform: translate3d(var(--outro-track-x), -50%, 0) rotate(45deg);
}
.folio-outro-track > span {
  position: absolute;
  right: 0;
  top: calc(50% + 10px);
  color: var(--dim);
  font: 7px/1 var(--pixel);
  letter-spacing: .12em;
  pointer-events: none;
}
.folio-outro-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  color: var(--dim);
  font: 8px/1 var(--mono);
  letter-spacing: .12em;
}
.folio-outro-meta a { color: var(--moss-bright); text-decoration: none; }
.folio-outro-actions { display: flex; align-items: center; gap: 24px; }
.folio-outro-actions b { display: inline-block; margin-left: 7px; transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
.folio-outro-actions a:hover b { transform: translateY(-4px); }

.folio-outro-pulse {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 28px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--moss-bright) 74%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 32px color-mix(in srgb, var(--moss-bright) 16%, transparent), inset 0 0 24px color-mix(in srgb, var(--moss-bright) 12%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  animation: garden-outro-impact 820ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.folio-outro-pulse::after {
  content: "";
  position: absolute;
  inset: 34%;
  border: 1px solid color-mix(in srgb, var(--bone) 52%, transparent);
  border-radius: inherit;
}

.folio-outro.is-motion-ready::before { opacity: 0; transform: translate3d(-62%, 0, 0); }
.folio-outro.is-motion-ready .folio-outro-signal,
.folio-outro.is-motion-ready h2,
.folio-outro.is-motion-ready .folio-outro-meta > * { opacity: 0; }
.folio-outro.is-motion-ready .folio-outro-signal { transform: translate3d(-30px, 0, 0); }
.folio-outro.is-motion-ready h2 { transform: translate3d(0, 26px, 0); }
.folio-outro.is-motion-ready .folio-outro-track i { transform: scaleX(0); }
.folio-outro.is-motion-ready .folio-outro-track b { opacity: 0; transform: translate3d(-24px, -50%, 0) rotate(45deg); }
.folio-outro.is-motion-ready .folio-outro-meta > :first-child { transform: translate3d(-30px, 0, 0); }
.folio-outro.is-motion-ready .folio-outro-meta > :last-child { transform: translate3d(30px, 0, 0); }
.folio-outro.is-motion-ready.is-visible::before { opacity: 1; transform: translate3d(calc(-56% + var(--outro-parallax-x)), var(--outro-parallax-y), 0); }
.folio-outro.is-motion-ready.is-visible .folio-outro-signal {
  opacity: 1;
  transform: none;
  transition: opacity 650ms cubic-bezier(.16, 1, .3, 1) 80ms, transform 760ms cubic-bezier(.16, 1, .3, 1) 80ms;
}
.folio-outro.is-motion-ready.is-visible h2 {
  opacity: 1;
  transform: translate3d(var(--outro-title-x), var(--outro-title-y), 0);
  transition: opacity 720ms cubic-bezier(.16, 1, .3, 1) 170ms, transform 900ms cubic-bezier(.16, 1, .3, 1) 170ms;
}
.folio-outro.is-motion-ready.is-visible .folio-outro-track i {
  transform: scaleX(var(--outro-tune));
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1) 260ms;
}
.folio-outro.is-motion-ready.is-visible .folio-outro-track b {
  opacity: 1;
  transform: translate3d(var(--outro-track-x), -50%, 0) rotate(45deg);
  transition: opacity 260ms ease 1120ms, transform 520ms cubic-bezier(.16, 1, .3, 1) 960ms;
  animation: garden-outro-signal 2.4s ease-in-out 1.45s infinite;
}
.folio-outro.is-interactive { cursor: crosshair; }
.folio-outro.is-interactive.is-visible::before { transition: opacity 900ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); }
.folio-outro.is-interactive.is-visible h2 { transition: opacity 720ms cubic-bezier(.16, 1, .3, 1), transform 420ms cubic-bezier(.16, 1, .3, 1); }
.folio-outro.is-interactive.is-visible .folio-outro-track i { transition: transform 90ms cubic-bezier(.16, 1, .3, 1); }
.folio-outro.is-interactive.is-visible .folio-outro-track b {
  transform: translate3d(var(--outro-track-x), -50%, 0) rotate(45deg);
  transition: opacity 180ms ease, transform 90ms cubic-bezier(.16, 1, .3, 1);
}
.folio-outro.is-interactive.is-visible.is-tuning .folio-outro-track b { animation: none; transform: translate3d(var(--outro-track-x), -50%, 0) rotate(135deg) scale(1.35); }
.folio-outro.is-motion-ready.is-visible .folio-outro-meta > * {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(.16, 1, .3, 1) 590ms, transform 820ms cubic-bezier(.16, 1, .3, 1) 590ms;
}

/* V46 ending station — a field keeper drawn as deliberate, readable pixel poses. */
.folio-outro {
  --outro-keeper-x: calc(100% - 28px);
  min-height: clamp(680px, 82svh, 920px);
  padding: clamp(98px, 10vw, 148px) 0 clamp(64px, 7vw, 94px);
  background:
    radial-gradient(ellipse at 80% 62%, color-mix(in srgb, var(--moss) 9%, transparent), transparent 27%),
    linear-gradient(180deg, rgba(5, 7, 6, .76), rgba(4, 6, 5, .96));
}
.folio-outro::after {
  content: "";
  position: absolute;
  left: -9%;
  right: -9%;
  bottom: -8%;
  z-index: -1;
  height: 43%;
  opacity: .26;
  background:
    repeating-linear-gradient(90deg, transparent 0 7.5vw, color-mix(in srgb, var(--bone) 9%, transparent) calc(7.5vw + 1px), transparent calc(7.5vw + 2px) 15vw),
    repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--bone) 8%, transparent) 32px, transparent 33px 58px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28% 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28% 70%, transparent);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom;
  pointer-events: none;
}
.folio-outro-inner { position: relative; z-index: 2; }
.folio-outro-inner::before {
  content: "";
  position: absolute;
  left: -24px;
  top: -22px;
  width: 1px;
  height: clamp(92px, 10vw, 146px);
  opacity: .36;
  background: linear-gradient(transparent, var(--moss-bright), transparent);
}
.folio-outro-signal { margin-bottom: clamp(38px, 4vw, 56px); }
.folio-outro h2 {
  max-width: 1080px;
  font-size: clamp(58px, 8.2vw, 124px);
  letter-spacing: -.058em;
}
.folio-outro-track {
  height: 180px;
  margin-top: clamp(52px, 6vw, 76px);
  cursor: col-resize;
}
.folio-outro-track::before {
  top: calc(100% - 18px);
  height: 3px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bone) 18%, transparent) 0 1px, transparent 1px 2px, color-mix(in srgb, var(--bone) 8%, transparent) 2px 3px);
  box-shadow: 0 11px 0 color-mix(in srgb, var(--bone) 5%, transparent);
}
.folio-outro-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 10px);
  height: 13px;
  opacity: .38;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bone) 18%, transparent) 0 1px, transparent 1px 29px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 88%);
  mask-image: linear-gradient(90deg, #000, transparent 88%);
  pointer-events: none;
}
.folio-outro-track > i { top: calc(100% - 18px); height: 2px; }
.folio-outro-track > b {
  top: calc(100% - 18px);
  width: 11px;
  height: 11px;
  background: var(--moss-bright);
  border: 2px solid var(--void);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bone) 40%, transparent), 0 0 24px color-mix(in srgb, var(--moss-bright) 72%, transparent);
}
.folio-outro-track > [data-outro-meter] { top: calc(100% + 10px); }

.folio-outro-keeper {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% - 18px);
  z-index: 7;
  display: block;
  width: 120px;
  height: 160px;
  color: var(--bone);
  font: inherit;
  letter-spacing: 0;
  opacity: 1;
  pointer-events: none;
  contain: layout paint style;
  transform: translate3d(calc(var(--outro-keeper-x) - 60px), -100%, 0);
  transform-origin: 60px 100%;
  transition: opacity 160ms cubic-bezier(.2, .8, .2, 1), transform 140ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.folio-outro-track > .folio-outro-keeper {
  pointer-events: none;
}
.folio-keeper-canvas,
.folio-keeper-alert,
.folio-keeper-shadow { pointer-events: none; }
.folio-wanderer-frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.folio-wanderer-glow {
  position: absolute;
  right: 4px;
  bottom: 9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--moss-bright) 28%, transparent), transparent 68%);
  opacity: .42;
  transform: scale(.82);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.folio-wanderer-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .98;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .42));
  transform-origin: 50% 92%;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease;
  pointer-events: none;
}
.folio-keeper-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 216px;
  height: 192px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: 70.8% 100%;
  filter: drop-shadow(0 11px 8px rgba(0, 0, 0, .38));
}
.folio-keeper-shadow {
  display: none;
}
.folio-keeper-alert {
  position: absolute;
  left: 94px;
  top: 2px;
  z-index: 9;
  width: 28px;
  height: 28px;
  opacity: 0;
  color: var(--moss-bright);
  background: color-mix(in srgb, var(--void) 90%, transparent);
  border: 2px solid color-mix(in srgb, var(--moss-bright) 62%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--moss-bright) 18%, transparent);
  font: 14px/24px var(--pixel);
  text-align: center;
  transform: translate3d(-5px, 7px, 0) scale(.82);
  transition: opacity 120ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.folio-keeper-alert::before { content: "!"; }
.folio-outro.is-keeper-startled .folio-keeper-alert {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.08) rotate(4deg);
}
.folio-outro.is-keeper-startled .folio-keeper-shadow {
  opacity: .2;
  transform: scale(.72);
}
.folio-outro.is-keeper-pointing .folio-keeper-alert {
  left: 96px;
  opacity: 1;
  transform: none;
}
.folio-outro.is-keeper-pointing .folio-keeper-alert::before { content: "↗"; }
.folio-outro.is-keeper-pointing .folio-keeper-canvas {
  filter: drop-shadow(0 10px 7px rgba(0, 0, 0, .34)) drop-shadow(20px -20px 22px rgba(167, 201, 173, .22));
}
.folio-outro.is-keeper-pointing .folio-wanderer-image {
  transform: translate3d(0, -3px, 0) rotate(.45deg);
}
.folio-outro.is-keeper-pointing .folio-wanderer-glow { opacity: .9; transform: scale(1.3); }
.folio-outro.is-keeper-startled .folio-wanderer-image { transform: translate3d(0, -6px, 0) rotate(-.8deg); }
.folio-outro.is-keeper-settled .folio-wanderer-image { transform: scale3d(1.015, .985, 1); }
.folio-outro.is-keeper-walking .folio-wanderer-image { transform: translate3d(2px, -2px, 0) rotate(.35deg); }
.folio-outro.is-motion-ready .folio-outro-keeper {
  opacity: 0;
  transform: translate3d(10px, -100%, 0);
}
.folio-outro.is-motion-ready.is-visible .folio-outro-keeper {
  opacity: 1;
  transform: translate3d(calc(var(--outro-keeper-x) - 60px), -100%, 0);
  transition: opacity 160ms cubic-bezier(.2, .8, .2, 1) 180ms, transform 420ms cubic-bezier(.16, 1, .3, 1) 150ms;
}
.folio-outro.is-interactive.is-visible .folio-outro-keeper {
  transition: transform 80ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease;
}
.folio-outro.is-tuning .folio-outro-keeper,
.folio-outro.is-tuning .folio-outro-track > i,
.folio-outro.is-tuning .folio-outro-track > b { transition: none !important; }
.folio-outro.is-visible:not(.is-keeper-watching):not(.is-keeper-pointing):not(.is-keeper-walking):not(.is-keeper-startled):not(.is-keeper-settled) .folio-keeper-canvas {
  animation: garden-keeper-breathe 2.8s steps(2, end) infinite;
}
.folio-outro.is-visible:not(.is-keeper-pointing):not(.is-keeper-walking):not(.is-keeper-startled):not(.is-keeper-settled) .folio-wanderer-image {
  animation: garden-wanderer-idle 4.8s cubic-bezier(.37, 0, .63, 1) infinite;
}
@keyframes garden-keeper-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}
@keyframes garden-wanderer-idle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -2px, 0); }
}

:root[data-resolved-theme="light"] .folio-outro {
  background:
    radial-gradient(ellipse at 80% 62%, rgba(49, 94, 60, .08), transparent 27%),
    linear-gradient(180deg, rgba(227, 232, 224, .82), rgba(220, 226, 217, .96));
}
:root[data-resolved-theme="light"] .folio-keeper-alert { background: rgba(227, 232, 224, .94); }
:root[data-resolved-theme="light"] .folio-wanderer-frame { opacity: .92; filter: drop-shadow(0 12px 12px rgba(20, 28, 22, .16)); }

@media (max-width: 768px) {
  .folio-outro { min-height: 700px; padding-block: 86px 62px; }
  .folio-outro h2 { max-width: 100%; font-size: clamp(40px, 12vw, 58px); }
  .folio-outro-track { height: 172px; margin-top: 44px; }
  .folio-outro-inner::before { left: -9px; }
  .folio-outro-keeper {
    transform: translate3d(calc(var(--outro-keeper-x) - 60px), -100%, 0) scale(.84);
    transform-origin: 60px 100%;
  }
  .folio-outro.is-motion-ready.is-visible .folio-outro-keeper {
    transform: translate3d(calc(var(--outro-keeper-x) - 60px), -100%, 0) scale(.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  .folio-outro-keeper,
  .folio-keeper-alert,
  .folio-keeper-shadow { animation: none !important; transition: none !important; }
}
html.garden-lite-motion .folio-outro-keeper,
html.garden-lite-motion .folio-keeper-alert,
html.garden-lite-motion .folio-keeper-shadow { animation: none !important; transition: none !important; }

/* V50 ending eclipse — one clear gesture, no draggable character or physics field. */
.folio-outro {
  min-height: clamp(660px, 78svh, 840px);
  padding: clamp(92px, 9vw, 132px) 0 clamp(58px, 6vw, 82px);
}
.folio-eclipse {
  --eclipse-x: 0px;
  --eclipse-y: 0px;
  --eclipse-tilt: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  height: clamp(230px, 25vw, 300px);
  margin: clamp(28px, 4vw, 54px) auto 0;
  isolation: isolate;
}
.folio-eclipse::before,
.folio-eclipse::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(72vw, 620px);
  height: 1px;
  pointer-events: none;
}
.folio-eclipse::before {
  top: 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bone) 12%, transparent) 22%, color-mix(in srgb, var(--moss-bright) 34%, transparent) 50%, color-mix(in srgb, var(--bone) 12%, transparent) 78%, transparent);
  transform: translateX(-50%);
}
.folio-eclipse::after {
  top: calc(50% + 22px);
  opacity: .32;
  background: repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--bone) 16%, transparent) 31px 32px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24% 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24% 76%, transparent);
  transform: translateX(-50%);
}
.folio-eclipse-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 1px;
  opacity: .32;
  background: linear-gradient(transparent, color-mix(in srgb, var(--moss-bright) 34%, transparent) 25% 75%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.folio-eclipse-axis::before,
.folio-eclipse-axis::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--moss-bright) 42%, transparent);
  transform: rotate(45deg);
}
.folio-eclipse-axis::before { top: 10%; }
.folio-eclipse-axis::after { bottom: 10%; }
.folio-eclipse-axis i {
  position: absolute;
  left: -11px;
  top: 50%;
  width: 23px;
  height: 1px;
  background: color-mix(in srgb, var(--moss-bright) 45%, transparent);
}
.folio-eclipse-trigger {
  position: relative;
  z-index: 3;
  display: block;
  width: clamp(152px, 15vw, 184px);
  aspect-ratio: 1;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translate3d(var(--eclipse-x), var(--eclipse-y), 0) rotate(var(--eclipse-tilt));
  transition: transform 90ms cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.folio-eclipse-trigger:focus-visible {
  outline: 1px solid var(--moss-bright);
  outline-offset: 12px;
}
.folio-eclipse-orbit,
.folio-eclipse-orbit::before,
.folio-eclipse-orbit::after {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.folio-eclipse-orbit {
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--bone) 19%, transparent);
  box-shadow: inset 0 0 0 9px color-mix(in srgb, var(--void) 34%, transparent);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.folio-eclipse-orbit::before,
.folio-eclipse-orbit::after {
  content: "";
  inset: 13px;
  border: 1px dashed color-mix(in srgb, var(--moss-bright) 23%, transparent);
  transform: rotate(23deg);
}
.folio-eclipse-orbit::after {
  inset: 28px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--bone) 11%, transparent);
  transform: none;
}
.folio-eclipse-orbit i,
.folio-eclipse-orbit b {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--void);
  border: 1px solid color-mix(in srgb, var(--moss-bright) 55%, transparent);
  transform: translateX(-50%) rotate(45deg);
}
.folio-eclipse-orbit i { top: -4px; }
.folio-eclipse-orbit b { bottom: -4px; }
.folio-eclipse-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 43% 38%, #101713, #040706 52%, #010201 76%);
  border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--void) 74%, transparent), 0 0 28px color-mix(in srgb, var(--moss-bright) 12%, transparent);
  transform: translate(-50%, -50%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.folio-eclipse-disc::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  opacity: .36;
  background: conic-gradient(from 25deg, transparent 0 11%, color-mix(in srgb, var(--moss-bright) 54%, transparent) 13%, transparent 16% 57%, color-mix(in srgb, var(--bone) 32%, transparent) 60%, transparent 63%);
  filter: blur(4px);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.folio-eclipse-disc i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss-bright);
  box-shadow: 0 0 13px color-mix(in srgb, var(--moss-bright) 72%, transparent);
  transform: translate(-50%, -50%);
  transition: opacity 140ms cubic-bezier(.2, .8, .2, 1), transform 180ms cubic-bezier(.2, .8, .2, 1);
}
.folio-eclipse-afterglow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 1px;
  height: 74%;
  opacity: 0;
  background: linear-gradient(transparent, var(--moss-bright), transparent);
  transform: translate(-50%, -50%) scaleY(.92);
  transition: opacity 160ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .folio-eclipse-trigger:hover .folio-eclipse-orbit { opacity: .72; transform: rotate(4deg) scale(.985); }
  .folio-eclipse-trigger:hover .folio-eclipse-disc { box-shadow: 0 0 0 7px color-mix(in srgb, var(--void) 74%, transparent), 0 0 42px color-mix(in srgb, var(--moss-bright) 24%, transparent); transform: translate(-50%, -50%) scale(.96); }
  .folio-eclipse-trigger:hover .folio-eclipse-disc::before { opacity: .82; transform: rotate(-7deg) scale(1.08); }
  .folio-eclipse-trigger:hover .folio-eclipse-disc i { transform: translate(-50%, -50%) scale(1.45); }
}
.folio-outro.is-eclipse-closing .folio-eclipse-trigger { transform: translate3d(0, 0, 0) scale(.96); }
.folio-outro.is-eclipse-closing .folio-eclipse-orbit { opacity: .16; transform: rotate(9deg) scale(.91); }
.folio-outro.is-eclipse-closing .folio-eclipse-disc { transform: translate(-50%, -50%) scale(.92); box-shadow: 0 0 0 2px color-mix(in srgb, var(--void) 94%, transparent); }
.folio-outro.is-eclipse-closing .folio-eclipse-disc::before,
.folio-outro.is-eclipse-closing .folio-eclipse-disc i { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
.folio-outro.is-eclipse-closing .folio-eclipse-afterglow { opacity: .82; transform: translate(-50%, -50%) scaleY(1); }
.folio-outro.is-motion-ready .folio-eclipse { opacity: 0; transform: translate3d(0, 18px, 0); }
.folio-outro.is-motion-ready.is-visible .folio-eclipse {
  opacity: 1;
  transform: none;
  transition: opacity 260ms cubic-bezier(.2, .8, .2, 1) 180ms, transform 280ms cubic-bezier(.2, .8, .2, 1) 180ms;
}
:root[data-resolved-theme="light"] .folio-eclipse-disc {
  background: radial-gradient(circle at 43% 38%, #172018, #080c09 56%, #020403 78%);
  border-color: rgba(27, 41, 31, .42);
}
@media (max-width: 768px) {
  .folio-eclipse { height: 220px; margin-top: 24px; }
  .folio-eclipse-trigger { width: 142px; }
  .folio-eclipse::before, .folio-eclipse::after { width: 90vw; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-eclipse,
  .folio-eclipse-trigger,
  .folio-eclipse-orbit,
  .folio-eclipse-disc,
  .folio-eclipse-disc::before,
  .folio-eclipse-disc i,
  .folio-eclipse-afterglow { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-eclipse,
html.garden-lite-motion .folio-eclipse-trigger,
html.garden-lite-motion .folio-eclipse-orbit,
html.garden-lite-motion .folio-eclipse-disc,
html.garden-lite-motion .folio-eclipse-disc::before,
html.garden-lite-motion .folio-eclipse-disc i,
html.garden-lite-motion .folio-eclipse-afterglow { animation: none !important; transition: none !important; }

/* V51 ending pixel vista — a small rainy lake, no headline and no drag surface. */
.folio-outro {
  min-height: clamp(620px, 74svh, 780px);
  padding: clamp(88px, 8vw, 120px) 0 clamp(54px, 6vw, 76px);
}
.folio-outro-signal { margin-bottom: clamp(22px, 3vw, 36px); }
.folio-pixel-vista {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.folio-pixel-screen {
  --pixel-x: 0px;
  --pixel-y: 0px;
  position: relative;
  display: block;
  width: min(640px, 82vw);
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: #07100e;
  border: 0;
  outline: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
  outline-offset: 7px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .3), 0 0 0 8px color-mix(in srgb, var(--void) 72%, transparent);
  cursor: pointer;
  image-rendering: pixelated;
  transform: translate3d(var(--pixel-x), var(--pixel-y), 0);
  transition: transform 90ms cubic-bezier(.2, .8, .2, 1), outline-color 160ms cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.folio-pixel-screen:focus-visible {
  outline-color: var(--moss-bright);
  outline-width: 2px;
}
.folio-pixel-screen > span { position: absolute; display: block; pointer-events: none; }
.pixel-sky { inset: 0 0 44%; z-index: 1; background: #07100e; }
.pixel-sky i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #9aafa0;
  opacity: .58;
}
.pixel-sky i:nth-child(1) { left: 8%; top: 17%; }
.pixel-sky i:nth-child(2) { left: 25%; top: 31%; width: 2px; height: 2px; }
.pixel-sky i:nth-child(3) { left: 43%; top: 12%; }
.pixel-sky i:nth-child(4) { left: 63%; top: 27%; width: 2px; height: 2px; }
.pixel-sky i:nth-child(5) { left: 79%; top: 11%; }
.pixel-sky i:nth-child(6) { left: 91%; top: 35%; width: 2px; height: 2px; }
.pixel-moon {
  left: 14%;
  top: 14%;
  z-index: 2;
  width: 9%;
  aspect-ratio: 1;
  background: #bed0bf;
  clip-path: polygon(25% 0, 75% 0, 75% 7%, 88% 7%, 88% 19%, 100% 19%, 100% 75%, 88% 75%, 88% 88%, 75% 88%, 75% 100%, 25% 100%, 25% 94%, 13% 94%, 13% 82%, 0 82%, 0 25%, 13% 25%, 13% 13%, 25% 13%);
  box-shadow: 8px 4px 0 #546c5c;
  transform: translate3d(0, 0, 0);
  transition: transform 90ms cubic-bezier(.2, .8, .2, 1), opacity 180ms cubic-bezier(.2, .8, .2, 1);
}
.pixel-cloud { z-index: 3; height: 5px; background: #1b2a24; opacity: .72; }
.pixel-cloud::before,
.pixel-cloud::after { content: ""; position: absolute; height: 5px; background: inherit; }
.pixel-cloud-a { left: 25%; top: 24%; width: 13%; }
.pixel-cloud-a::before { left: 12%; top: -5px; width: 42%; }
.pixel-cloud-a::after { right: 10%; bottom: -5px; width: 56%; }
.pixel-cloud-b { right: 14%; top: 33%; width: 17%; opacity: .48; }
.pixel-cloud-b::before { right: 16%; top: -5px; width: 48%; }
.pixel-cloud-b::after { left: 8%; bottom: -5px; width: 38%; }
.pixel-rain {
  inset: -18px -8px;
  z-index: 9;
  opacity: .18;
  background: repeating-linear-gradient(112deg, transparent 0 21px, #a8bcae 22px 23px, transparent 24px 45px);
  transform: translate3d(0, -16px, 0);
  animation: garden-pixel-rain 720ms steps(4, end) infinite;
}
.pixel-ridge { left: 0; right: 0; z-index: 3; transform: translate3d(0, 0, 0); transition: transform 90ms cubic-bezier(.2, .8, .2, 1); }
.pixel-ridge-back {
  bottom: 34%;
  height: 32%;
  background: #14221c;
  clip-path: polygon(0 58%, 6% 58%, 6% 48%, 12% 48%, 12% 36%, 18% 36%, 18% 48%, 24% 48%, 24% 62%, 31% 62%, 31% 44%, 37% 44%, 37% 27%, 43% 27%, 43% 41%, 49% 41%, 49% 57%, 56% 57%, 56% 48%, 63% 48%, 63% 33%, 69% 33%, 69% 45%, 76% 45%, 76% 58%, 83% 58%, 83% 39%, 90% 39%, 90% 52%, 96% 52%, 96% 62%, 100% 62%, 100% 100%, 0 100%);
}
.pixel-ridge-front {
  bottom: 26%;
  height: 29%;
  z-index: 4;
  background: #0b1511;
  clip-path: polygon(0 50%, 8% 50%, 8% 39%, 16% 39%, 16% 54%, 24% 54%, 24% 68%, 34% 68%, 34% 47%, 42% 47%, 42% 57%, 51% 57%, 51% 69%, 62% 69%, 62% 51%, 72% 51%, 72% 64%, 81% 64%, 81% 44%, 90% 44%, 90% 58%, 100% 58%, 100% 100%, 0 100%);
}
.pixel-lake { inset: 67% 0 0; z-index: 2; background: #081411; border-top: 4px solid #1e3329; }
.pixel-lake i,
.pixel-lake b {
  position: absolute;
  left: 8%;
  top: 28%;
  width: 27%;
  height: 3px;
  background: #395345;
  opacity: .62;
  animation: garden-pixel-ripple 2.6s steps(4, end) infinite;
}
.pixel-lake b { left: 56%; top: 57%; width: 30%; animation-delay: -1.2s; }
.pixel-beam {
  right: 20%;
  bottom: 40%;
  z-index: 5;
  width: 48%;
  height: 17%;
  opacity: .32;
  background: rgba(158, 194, 166, .34);
  clip-path: polygon(100% 42%, 100% 62%, 0 100%, 0 0);
  transform-origin: 100% 52%;
  animation: garden-pixel-beam 5.8s steps(10, end) infinite;
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.pixel-lighthouse {
  right: 15%;
  bottom: 25%;
  z-index: 6;
  width: 9%;
  height: 38%;
}
.pixel-lighthouse::before {
  content: "";
  position: absolute;
  left: 24%;
  right: 20%;
  bottom: 0;
  height: 70%;
  background: #89998e;
  box-shadow: inset 6px 0 0 #4e6054, inset -5px 0 0 #27362d;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.pixel-lighthouse i {
  position: absolute;
  left: 8%;
  top: 17%;
  width: 84%;
  height: 18%;
  background: #9fc5a7;
  border: 3px solid #18241d;
  box-shadow: 0 0 0 3px #526459;
  transition: background-color 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms cubic-bezier(.2, .8, .2, 1);
}
.pixel-lighthouse b {
  position: absolute;
  left: 0;
  top: 9%;
  width: 100%;
  height: 8%;
  background: #18241d;
  box-shadow: 7px -5px 0 #18241d, 14px -5px 0 #18241d, 21px 0 0 #18241d;
}
.pixel-lighthouse em { position: absolute; left: 12%; right: 8%; bottom: 0; height: 7%; background: #19251e; }
.pixel-reflection {
  right: 17%;
  bottom: 5%;
  z-index: 3;
  width: 6%;
  height: 19%;
  opacity: .48;
  background: repeating-linear-gradient(180deg, #6e9278 0 3px, transparent 3px 9px);
  clip-path: polygon(37% 0, 63% 0, 72% 32%, 82% 32%, 92% 68%, 100% 68%, 100% 100%, 0 100%, 0 68%, 8% 68%, 18% 32%, 28% 32%);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1);
}
.pixel-frame { inset: 0; z-index: 11; border: 6px solid #050806; box-shadow: inset 0 0 0 2px #334039; }
.pixel-frame::before,
.pixel-frame::after { content: ""; position: absolute; top: 14px; width: 18px; height: 3px; background: #607369; }
.pixel-frame::before { left: 14px; }
.pixel-frame::after { right: 14px; }
.pixel-scan { left: 6px; right: 6px; top: 50%; z-index: 10; height: 1px; opacity: .08; background: #d4e2d6; }
.pixel-fireflies { inset: 0; z-index: 7; opacity: 0; transition: opacity 180ms cubic-bezier(.2, .8, .2, 1); }
.pixel-fireflies i { position: absolute; width: 4px; height: 4px; background: #9fc5a7; box-shadow: 0 0 0 2px rgba(159, 197, 167, .12); }
.pixel-fireflies i:nth-child(1) { left: 61%; top: 40%; }
.pixel-fireflies i:nth-child(2) { left: 69%; top: 51%; }
.pixel-fireflies i:nth-child(3) { left: 52%; top: 47%; }
.folio-pixel-screen.is-lamp-off .pixel-beam,
.folio-pixel-screen.is-lamp-off .pixel-reflection { opacity: 0; }
.folio-pixel-screen.is-lamp-off .pixel-lighthouse i { background: #26332b; box-shadow: 0 0 0 3px #303e35; }
.folio-pixel-screen.is-aiming .pixel-beam {
  animation-play-state: paused;
  transition-duration: 90ms;
}
.pixel-click-ripple {
  z-index: 8;
  width: 32px;
  height: 12px;
  margin: -6px 0 0 -16px;
  border: 3px solid #75927e;
  opacity: .82;
  transform: scale(.72);
}
.pixel-click-ripple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 3px;
  background: #a7c9ad;
  transform: translate(-50%, -50%);
}
.pixel-meteor {
  z-index: 8;
  width: 24px;
  height: 3px;
  margin: -2px 0 0 -2px;
  background: #d8e5d9;
  box-shadow: -7px -3px 0 #829a88, -14px -6px 0 #445a4c, -21px -9px 0 #26372d;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.folio-outro.is-motion-ready .folio-pixel-vista { opacity: 0; transform: translate3d(0, 14px, 0); }
.folio-outro.is-motion-ready.is-visible .folio-pixel-vista {
  opacity: 1;
  transform: none;
  transition: opacity 240ms cubic-bezier(.2, .8, .2, 1) 120ms, transform 260ms cubic-bezier(.2, .8, .2, 1) 120ms;
}
@media (hover: hover) and (pointer: fine) {
  .folio-pixel-screen:hover { outline-color: color-mix(in srgb, var(--moss-bright) 68%, transparent); }
  .folio-pixel-screen:hover .pixel-fireflies { opacity: .82; }
  .folio-pixel-screen:hover .pixel-beam { opacity: .48; }
}
@keyframes garden-pixel-rain {
  to { transform: translate3d(-10px, 18px, 0); }
}
@keyframes garden-pixel-ripple {
  0%, 100% { opacity: .2; transform: scaleX(.72); }
  50% { opacity: .68; transform: scaleX(1); }
}
@keyframes garden-pixel-beam {
  0%, 100% { transform: rotate(-4deg) scaleX(.96); }
  50% { transform: rotate(8deg) scaleX(1); }
}
@media (max-width: 768px) {
  .folio-pixel-screen { width: min(560px, 88vw); outline-offset: 5px; }
  .pixel-frame { border-width: 4px; }
  .pixel-lighthouse i { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-vista,
  .folio-pixel-screen,
  .pixel-moon,
  .pixel-ridge,
  .pixel-rain,
  .pixel-lake i,
  .pixel-lake b,
  .pixel-beam { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-vista,
html.garden-lite-motion .folio-pixel-screen,
html.garden-lite-motion .pixel-moon,
html.garden-lite-motion .pixel-ridge,
html.garden-lite-motion .pixel-rain,
html.garden-lite-motion .pixel-lake i,
html.garden-lite-motion .pixel-lake b,
html.garden-lite-motion .pixel-beam { animation: none !important; transition: none !important; }

/* V53: the pixel ending behaves as one connected weather system. */
.folio-pixel-screen {
  width: min(740px, 84vw);
  background: #050d0b;
  cursor: crosshair;
  transform: translate3d(0, 0, 0);
  transition: outline-color 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-screen:active { box-shadow: 0 22px 58px rgba(0, 0, 0, .3), 0 0 0 8px color-mix(in srgb, var(--void) 72%, transparent); }
.pixel-sky { bottom: 43%; transition: background-color 620ms cubic-bezier(.23, 1, .32, 1); }
.pixel-sky i {
  background: #b7c9ba;
  opacity: .28;
  transform: scale(.8);
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1), transform 420ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-sky i:nth-child(7) { left: 34%; top: 8%; width: 2px; height: 2px; }
.pixel-sky i:nth-child(8) { left: 55%; top: 39%; }
.pixel-sky i:nth-child(9) { left: 72%; top: 19%; width: 2px; height: 2px; }
.pixel-sky i:nth-child(10) { left: 18%; top: 43%; width: 2px; height: 2px; }
.pixel-atmosphere {
  inset: -22% -12% 39%;
  z-index: 2;
  opacity: .13;
  background: repeating-linear-gradient(165deg, transparent 0 11%, rgba(100, 158, 121, .2) 12% 13%, transparent 14% 22%);
  transform: translate3d(-2%, 0, 0) skewX(-8deg);
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1), transform 760ms cubic-bezier(.77, 0, .175, 1);
}
.pixel-moon {
  z-index: 3;
  background: #9fb3a4;
  box-shadow: 8px 4px 0 #3e5548, 0 0 0 rgba(159, 197, 167, 0);
  transition: background-color 420ms cubic-bezier(.23, 1, .32, 1), box-shadow 520ms cubic-bezier(.23, 1, .32, 1), opacity 180ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-moon i {
  position: absolute;
  right: 24%;
  top: 28%;
  width: 12%;
  aspect-ratio: 1;
  background: #6d8374;
  box-shadow: -13px 11px 0 #7c9182, 4px 19px 0 #718678;
}
.pixel-cloud-a { transition: opacity 520ms cubic-bezier(.23, 1, .32, 1), transform 720ms cubic-bezier(.77, 0, .175, 1); }
.pixel-cloud-b { transition: opacity 520ms cubic-bezier(.23, 1, .32, 1), transform 820ms cubic-bezier(.77, 0, .175, 1); }
.pixel-rain { opacity: .2; transition: opacity 460ms cubic-bezier(.23, 1, .32, 1); }
.pixel-horizon-glow {
  left: 8%;
  right: 8%;
  bottom: 31%;
  z-index: 3;
  height: 20%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(103, 164, 122, .16));
  transform: scaleX(.82);
  transition: opacity 620ms cubic-bezier(.23, 1, .32, 1), transform 720ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-ridge { transition: none; }
.pixel-lake {
  overflow: hidden;
  transition: background-color 520ms cubic-bezier(.23, 1, .32, 1), border-color 520ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-lake em {
  position: absolute;
  left: 35%;
  top: 76%;
  width: 14%;
  height: 3px;
  background: #395345;
  opacity: .34;
  animation: garden-pixel-ripple 2.6s steps(4, end) -.55s infinite;
}
.pixel-beam {
  opacity: .38;
  background: linear-gradient(90deg, rgba(158, 194, 166, .04), rgba(158, 194, 166, .38));
  transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-beam::after {
  content: "";
  position: absolute;
  left: 0;
  top: 35%;
  width: 12px;
  height: 7px;
  background: rgba(195, 224, 200, .72);
  box-shadow: -8px 0 0 rgba(195, 224, 200, .2);
}
.pixel-lighthouse i { transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1), transform 160ms cubic-bezier(.23, 1, .32, 1); }
.pixel-beam-focus {
  left: 0;
  top: 0;
  z-index: 7;
  width: 34px;
  height: 9px;
  margin: -4px 0 0 -17px;
  opacity: 0;
  border: 2px solid rgba(167, 201, 173, .7);
  box-shadow: 0 0 10px rgba(159, 197, 167, .42), inset 0 0 7px rgba(159, 197, 167, .16);
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 140ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-reflection { transition: opacity 180ms cubic-bezier(.23, 1, .32, 1), transform 420ms steps(5, end); }
.pixel-shore {
  inset: auto 0 0;
  z-index: 8;
  height: 11%;
  background: #030806;
  clip-path: polygon(0 63%, 6% 63%, 6% 48%, 12% 48%, 12% 72%, 19% 72%, 19% 58%, 30% 58%, 30% 79%, 43% 79%, 43% 64%, 58% 64%, 58% 75%, 70% 75%, 70% 57%, 82% 57%, 82% 72%, 91% 72%, 91% 54%, 100% 54%, 100% 100%, 0 100%);
}
.pixel-shore i,
.pixel-shore b { position: absolute; bottom: 36%; width: 3px; height: 34px; background: #111d17; transform-origin: bottom; }
.pixel-shore i { left: 8%; transform: rotate(-8deg); box-shadow: 11px 8px 0 #111d17, 24px -3px 0 #111d17; }
.pixel-shore b { right: 7%; height: 27px; transform: rotate(7deg); box-shadow: -14px 5px 0 #111d17, -27px -5px 0 #111d17; }
.pixel-fireflies { transition: opacity 420ms cubic-bezier(.23, 1, .32, 1); }
.pixel-fireflies i:nth-child(4) { left: 44%; top: 57%; }
.pixel-fireflies i:nth-child(5) { left: 76%; top: 43%; }
.pixel-fireflies i:nth-child(2n) { animation: garden-pixel-firefly-a 2.4s steps(6, end) infinite; }
.pixel-fireflies i:nth-child(2n + 1) { animation: garden-pixel-firefly-b 3.1s steps(7, end) infinite; }
.folio-pixel-screen.is-clear .pixel-sky { background: #091611; }
.folio-pixel-screen.is-clear .pixel-sky i { opacity: .88; transform: scale(1); }
.folio-pixel-screen.is-clear .pixel-sky i:nth-child(3n) { animation: garden-pixel-star 1.8s steps(3, end) infinite; }
.folio-pixel-screen.is-clear .pixel-atmosphere { opacity: .72; transform: translate3d(4%, 2%, 0) skewX(-8deg); }
.folio-pixel-screen.is-clear .pixel-moon { background: #d1ddcf; box-shadow: 8px 4px 0 #617567, 0 0 28px rgba(159, 197, 167, .42); }
.folio-pixel-screen.is-clear .pixel-cloud-a { opacity: .16; transform: translate3d(-62%, -6px, 0); }
.folio-pixel-screen.is-clear .pixel-cloud-b { opacity: .1; transform: translate3d(48%, 5px, 0); }
.folio-pixel-screen.is-clear .pixel-rain { opacity: 0; }
.folio-pixel-screen.is-clear .pixel-horizon-glow { opacity: .74; transform: scaleX(1); }
.folio-pixel-screen.is-clear .pixel-lake { background: #0b1b16; border-color: #31513f; }
.folio-pixel-screen.is-clear .pixel-fireflies { opacity: .88; }
.folio-pixel-screen.is-lamp-off .pixel-beam,
.folio-pixel-screen.is-lamp-off .pixel-reflection,
.folio-pixel-screen.is-lamp-off .pixel-beam-focus { opacity: 0; }
.folio-pixel-screen.is-lamp-off .pixel-lighthouse i { background: #26332b; box-shadow: 0 0 0 3px #303e35; }
.folio-pixel-screen.is-signal-active .pixel-lighthouse i { background: #b5d8bc; box-shadow: 0 0 16px rgba(172, 217, 179, .74), 0 0 0 3px #526459; }
.folio-pixel-screen.is-signal-queued .pixel-frame::after { background: #a7c9ad; box-shadow: -7px 0 0 rgba(167, 201, 173, .36); }
.folio-pixel-screen.is-aiming .pixel-beam { transition-duration: 80ms; }
.folio-pixel-screen.is-aiming:not(.is-lamp-off)[data-pixel-zone="water"] .pixel-beam-focus { opacity: .8; }
.folio-pixel-screen[data-pixel-zone="moon"] .pixel-moon { box-shadow: 8px 4px 0 #617567, 0 0 34px rgba(159, 197, 167, .58); }
.folio-pixel-screen[data-pixel-zone="lamp"] .pixel-lighthouse i { transform: translate3d(0, -2px, 0); box-shadow: 0 0 12px rgba(166, 211, 174, .72), 0 0 0 3px #526459; }
.folio-pixel-screen[data-pixel-zone="water"] .pixel-beam-focus { opacity: .72; }
.pixel-click-ripple { width: 38px; height: 13px; margin: -6px 0 0 -19px; border: 2px solid #86aa8e; }
.pixel-click-ripple::before,
.pixel-click-ripple::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  height: 48%;
  border: 2px solid rgba(159, 197, 167, .68);
  transform: translate(-50%, -50%);
}
.pixel-click-ripple::after { width: 18%; height: 16%; border: 0; background: #b7d7bc; }
.pixel-moon-pulse { z-index: 6; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; }
.pixel-moon-pulse::before { width: 72%; height: 72%; border-radius: 50%; }
.pixel-moon-pulse::after { width: 12%; height: 12%; border-radius: 50%; }
.pixel-meteor { width: 28px; }
.pixel-lightning {
  z-index: 10;
  width: 8px;
  height: 30%;
  margin-left: -4px;
  background: #dbe9dc;
  clip-path: polygon(38% 0, 100% 0, 63% 37%, 100% 37%, 25% 100%, 45% 53%, 0 53%);
  filter: drop-shadow(0 0 5px rgba(199, 226, 203, .78));
  transform: scaleY(.92);
  transform-origin: top;
}
.pixel-sky-flash { inset: 6px; z-index: 9; background: rgba(190, 218, 195, .18); opacity: 0; }
.folio-pixel-screen.is-keyboard-change .pixel-beam,
.folio-pixel-screen.is-keyboard-change .pixel-reflection,
.folio-pixel-screen.is-keyboard-change .pixel-lighthouse i { transition: none !important; animation: none !important; }
@media (hover: hover) and (pointer: fine) {
  .folio-pixel-screen:hover { outline-color: color-mix(in srgb, var(--moss-bright) 72%, transparent); box-shadow: 0 30px 82px rgba(0, 0, 0, .38), 0 0 0 8px color-mix(in srgb, var(--void) 72%, transparent); }
  .folio-pixel-screen:not(.is-lamp-off):hover .pixel-beam { opacity: .54; }
}
@keyframes garden-pixel-firefly-a {
  0%, 100% { opacity: .2; transform: translate3d(0, 0, 0); }
  45% { opacity: 1; transform: translate3d(5px, -4px, 0); }
}
@keyframes garden-pixel-firefly-b {
  0%, 100% { opacity: .32; transform: translate3d(0, 0, 0); }
  58% { opacity: .9; transform: translate3d(-4px, 5px, 0); }
}
@keyframes garden-pixel-star { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pixel-atmosphere,
  .pixel-cloud,
  .pixel-horizon-glow,
  .pixel-lake em,
  .pixel-fireflies i,
  .pixel-sky i { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .pixel-atmosphere,
html.garden-lite-motion .pixel-cloud,
html.garden-lite-motion .pixel-horizon-glow,
html.garden-lite-motion .pixel-lake em,
html.garden-lite-motion .pixel-fireflies i,
html.garden-lite-motion .pixel-sky i { animation: none !important; transition: none !important; }

/* V57: a stronger observation rig with a clear visual hierarchy. */
.folio-pixel-vista::before,
.folio-pixel-vista::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.folio-pixel-vista::before {
  left: clamp(28px, 5vw, 104px);
  right: clamp(28px, 5vw, 104px);
  top: -32px;
  bottom: -32px;
  border-top: 1px solid rgba(137, 169, 143, .16);
  border-bottom: 1px solid rgba(137, 169, 143, .2);
  background:
    linear-gradient(90deg, rgba(137, 169, 143, .32) 0 18px, transparent 18px calc(100% - 18px), rgba(137, 169, 143, .32) calc(100% - 18px)),
    linear-gradient(90deg, transparent 50%, rgba(137, 169, 143, .08) 50%, transparent calc(50% + 1px));
  background-size: 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}
.folio-pixel-vista::after {
  left: 50%;
  top: -64px;
  bottom: -64px;
  width: 1px;
  opacity: .32;
  background: repeating-linear-gradient(180deg, rgba(137, 169, 143, .2) 0 8px, transparent 8px 18px);
}
.folio-pixel-screen { z-index: 2; }
.folio-pixel-instruments {
  position: absolute;
  inset: -4% 0 -7%;
  z-index: 1;
  display: block;
  overflow: visible;
  color: rgba(155, 190, 162, .74);
  pointer-events: none;
  transition: color 220ms cubic-bezier(.23, 1, .32, 1), opacity 220ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-instruments::before,
.folio-pixel-instruments::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 7%;
  width: clamp(210px, 19vw, 350px);
  opacity: .7;
}
.folio-pixel-instruments::before {
  left: clamp(24px, 5vw, 108px);
  border-top: 1px solid rgba(145, 181, 153, .2);
  border-bottom: 1px solid rgba(145, 181, 153, .22);
  border-left: 1px solid rgba(145, 181, 153, .32);
  clip-path: polygon(0 0, 70% 0, 70% 1px, 100% 1px, 100% calc(100% - 1px), 58% calc(100% - 1px), 58% 100%, 0 100%);
}
.folio-pixel-instruments::after {
  right: clamp(24px, 5vw, 108px);
  border-top: 1px solid rgba(145, 181, 153, .2);
  border-right: 1px solid rgba(145, 181, 153, .34);
  border-bottom: 1px solid rgba(145, 181, 153, .22);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 42% 100%, 42% calc(100% - 1px), 0 calc(100% - 1px), 0 1px, 30% 1px);
}
.folio-pixel-instruments > span,
.folio-pixel-instruments > span > i,
.folio-pixel-instruments > span > b,
.folio-pixel-instruments > span > em { position: absolute; display: block; }
.folio-pixel-scope {
  right: clamp(42px, 6vw, 124px);
  top: 45%;
  width: clamp(142px, 11vw, 196px);
  aspect-ratio: 1;
  border: 1px solid rgba(151, 189, 159, .5);
  border-radius: 50%;
  outline: 1px solid rgba(136, 169, 142, .18);
  outline-offset: 11px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(136, 169, 142, .2) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(136, 169, 142, .2) 50%, transparent calc(50% + .5px));
  box-shadow: inset 0 0 38px rgba(93, 137, 102, .1), 0 0 0 5px rgba(4, 12, 8, .52);
  transform: translate3d(0, -50%, 0);
}
.folio-pixel-scope::before,
.folio-pixel-scope::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(136, 169, 142, .2);
  border-radius: 50%;
}
.folio-pixel-scope::before { inset: 17%; border-color: rgba(151, 189, 159, .34); border-style: dashed; }
.folio-pixel-scope::after { inset: 35%; border-color: rgba(151, 189, 159, .42); }
.folio-pixel-scope > i {
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  background: #8fb099;
  box-shadow: 28px -21px 0 rgba(143, 176, 153, .46), -31px 27px 0 rgba(143, 176, 153, .24);
}
.folio-pixel-scope > b {
  left: 50%;
  top: 0;
  width: 50%;
  height: 50%;
  background: linear-gradient(156deg, transparent 0 72%, rgba(166, 205, 174, .24) 73% 88%, rgba(181, 216, 187, .72) 89% 91%, transparent 92%);
  clip-path: polygon(0 100%, 100% 70%, 100% 100%);
  transform: rotate(-38deg);
  transform-origin: left bottom;
  animation: garden-pixel-scope 11s steps(36, end) infinite;
}
.folio-pixel-scope > em {
  left: 68%;
  top: 31%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(168, 205, 174, .64);
  box-shadow: 0 0 8px rgba(150, 191, 158, .2);
  opacity: .6;
  transform: scale(.9);
}
.folio-pixel-wave {
  left: clamp(38px, 6vw, 124px);
  bottom: 15%;
  width: clamp(196px, 16vw, 286px);
  height: 94px;
  border-left: 1px solid rgba(151, 189, 159, .38);
  border-bottom: 1px solid rgba(151, 189, 159, .34);
  background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(136, 169, 142, .06) 31px 32px);
}
.folio-pixel-wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(151, 189, 159, .25) 13px 15px);
}
.folio-pixel-wave::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(164, 201, 171, .56);
  border-left: 1px solid rgba(164, 201, 171, .56);
}
.folio-pixel-wave > i {
  bottom: 50%;
  width: 3px;
  height: 8px;
  background: currentColor;
  opacity: .46;
  transform: scaleY(.7);
  transform-origin: bottom;
}
.folio-pixel-wave > i:nth-child(1) { left: 5%; height: 9px; }
.folio-pixel-wave > i:nth-child(2) { left: 12%; height: 18px; }
.folio-pixel-wave > i:nth-child(3) { left: 19%; height: 11px; }
.folio-pixel-wave > i:nth-child(4) { left: 26%; height: 25px; }
.folio-pixel-wave > i:nth-child(5) { left: 33%; height: 14px; }
.folio-pixel-wave > i:nth-child(6) { left: 40%; height: 30px; }
.folio-pixel-wave > i:nth-child(7) { left: 47%; height: 19px; }
.folio-pixel-wave > i:nth-child(8) { left: 54%; height: 36px; }
.folio-pixel-wave > i:nth-child(9) { left: 61%; height: 22px; }
.folio-pixel-wave > i:nth-child(10) { left: 68%; height: 29px; }
.folio-pixel-wave > i:nth-child(11) { left: 75%; height: 13px; }
.folio-pixel-wave > i:nth-child(12) { left: 82%; height: 23px; }
.folio-pixel-wave > i:nth-child(13) { left: 89%; height: 10px; }
.folio-pixel-wave > i:nth-child(14) { left: 96%; height: 17px; }
.folio-pixel-route {
  right: clamp(184px, 17vw, 324px);
  top: 45%;
  width: clamp(110px, 13vw, 238px);
  height: 1px;
  opacity: .68;
  background: repeating-linear-gradient(90deg, rgba(155, 192, 162, .54) 0 12px, transparent 12px 22px);
  transform: scaleX(.94);
  transform-origin: left;
}
.folio-pixel-route > i,
.folio-pixel-route > b,
.folio-pixel-route > em { top: -3px; width: 7px; height: 7px; background: #8aab91; box-shadow: 0 0 8px rgba(144, 184, 152, .18); }
.folio-pixel-route > i { left: 0; }
.folio-pixel-route > b { left: 48%; opacity: .52; }
.folio-pixel-route > em { right: 0; opacity: .3; }
.folio-pixel-vista.is-signal-active .folio-pixel-scope { border-color: rgba(172, 211, 179, .54); box-shadow: inset 0 0 28px rgba(106, 162, 117, .12), 0 0 30px rgba(106, 162, 117, .05); }
.folio-pixel-vista.is-signal-active .folio-pixel-scope::before { animation: garden-pixel-scope-ring 1.9s steps(9, end) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-scope > b { animation-duration: 1.9s; }
.folio-pixel-vista.is-signal-active .folio-pixel-route { animation: garden-pixel-route 1.9s steps(12, end) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-route > i { animation: garden-pixel-route-node 1.9s steps(8, end) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-route > b { animation: garden-pixel-route-node 1.9s steps(8, end) .24s both; }
.folio-pixel-vista.is-signal-active .folio-pixel-route > em { animation: garden-pixel-route-node 1.9s steps(8, end) .48s both; }
.folio-pixel-vista.is-signal-active .folio-pixel-wave > i { animation: garden-pixel-wave 760ms steps(5, end) infinite; }
.folio-pixel-vista.is-signal-active .folio-pixel-wave > i:nth-child(3n + 1) { animation-delay: -180ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-wave > i:nth-child(3n + 2) { animation-delay: -360ms; }
.folio-pixel-vista.is-signal-response .folio-pixel-scope > em { opacity: 1; transform: scale(1.5); box-shadow: 0 0 12px rgba(171, 215, 178, .68); transition: opacity 120ms cubic-bezier(.23, 1, .32, 1), transform 180ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-vista.is-signal-queued .folio-pixel-scope { outline-color: rgba(172, 211, 179, .38); }
.folio-pixel-vista.is-clear .folio-pixel-instruments { color: rgba(174, 209, 181, .82); }
.folio-pixel-vista.is-clear .folio-pixel-scope { border-color: rgba(171, 207, 178, .58); box-shadow: inset 0 0 42px rgba(111, 169, 123, .12), 0 0 0 5px rgba(4, 12, 8, .48); }
@media (hover: hover) and (pointer: fine) {
  .folio-pixel-vista:hover .folio-pixel-instruments { color: rgba(174, 209, 181, .88); }
  .folio-pixel-vista:hover .folio-pixel-scope { outline-color: rgba(151, 189, 159, .3); }
}
@keyframes garden-pixel-scope { to { transform: rotate(322deg); } }
@keyframes garden-pixel-scope-ring {
  0% { opacity: .24; transform: scale(.92); }
  46% { opacity: .72; transform: scale(1.05); }
  100% { opacity: .2; transform: scale(1); }
}
@keyframes garden-pixel-route {
  0% { opacity: .18; transform: scaleX(.24); }
  58% { opacity: .8; transform: scaleX(1); }
  100% { opacity: .28; transform: scaleX(.94); }
}
@keyframes garden-pixel-route-node {
  0%, 100% { opacity: .22; transform: scale(.8); }
  38%, 62% { opacity: 1; transform: scale(1.45); }
}
@keyframes garden-pixel-wave {
  0%, 100% { opacity: .22; transform: scaleY(.52); }
  50% { opacity: .86; transform: scaleY(1.18); }
}
@media (max-width: 1180px) {
  .folio-pixel-instruments { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-scope > b,
  .folio-pixel-scope::before,
  .folio-pixel-route,
  .folio-pixel-route > i,
  .folio-pixel-route > b,
  .folio-pixel-route > em,
  .folio-pixel-wave > i { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-scope > b,
html.garden-lite-motion .folio-pixel-scope::before,
html.garden-lite-motion .folio-pixel-route,
html.garden-lite-motion .folio-pixel-route > i,
html.garden-lite-motion .folio-pixel-route > b,
html.garden-lite-motion .folio-pixel-route > em,
html.garden-lite-motion .folio-pixel-wave > i { animation: none !important; transition: none !important; }

/* V58: the lake escapes its frame and turns the negative space into scenery. */
.folio-pixel-vista::before,
.folio-pixel-vista::after { display: none; }
.pixel-beam { right: 19.5%; bottom: 45%; }
.folio-pixel-bleed {
  position: absolute;
  inset: -14% 0 -16%;
  z-index: auto;
  display: block;
  overflow: visible;
  pointer-events: none;
  image-rendering: pixelated;
}
.folio-pixel-bleed > span,
.folio-pixel-bleed > span > i,
.folio-pixel-bleed > span > b,
.folio-pixel-bleed > span > em { position: absolute; display: block; }
.folio-pixel-bleed-sky {
  inset: 0 2% 39%;
  z-index: 0;
  opacity: .16;
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-bleed-sky > i {
  width: 4px;
  height: 4px;
  background: #a8c5ad;
  box-shadow: 0 0 0 2px rgba(132, 175, 141, .06);
}
.folio-pixel-bleed-sky > i:nth-child(1) { left: 5%; top: 18%; }
.folio-pixel-bleed-sky > i:nth-child(2) { left: 13%; top: 52%; width: 2px; height: 2px; }
.folio-pixel-bleed-sky > i:nth-child(3) { left: 24%; top: 8%; width: 3px; height: 3px; }
.folio-pixel-bleed-sky > i:nth-child(4) { left: 35%; top: 39%; width: 2px; height: 2px; }
.folio-pixel-bleed-sky > i:nth-child(5) { left: 63%; top: 16%; }
.folio-pixel-bleed-sky > i:nth-child(6) { left: 72%; top: 48%; width: 2px; height: 2px; }
.folio-pixel-bleed-sky > i:nth-child(7) { left: 81%; top: 9%; width: 3px; height: 3px; }
.folio-pixel-bleed-sky > i:nth-child(8) { left: 91%; top: 35%; }
.folio-pixel-bleed-sky > i:nth-child(9) { left: 97%; top: 63%; width: 2px; height: 2px; }
.folio-pixel-bleed-sky > i:nth-child(10) { left: 1%; top: 72%; width: 2px; height: 2px; }
.folio-pixel-bleed-mist {
  left: 0;
  right: 0;
  top: 37%;
  z-index: 1;
  height: 30%;
  overflow: hidden;
  opacity: .5;
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-bleed-mist > i,
.folio-pixel-bleed-mist > b {
  left: -4%;
  width: 108%;
  height: 46%;
  background: rgba(27, 47, 37, .5);
  clip-path: polygon(0 38%, 7% 38%, 7% 24%, 16% 24%, 16% 43%, 24% 43%, 24% 31%, 34% 31%, 34% 48%, 47% 48%, 47% 27%, 58% 27%, 58% 41%, 69% 41%, 69% 20%, 79% 20%, 79% 38%, 88% 38%, 88% 28%, 100% 28%, 100% 72%, 90% 72%, 90% 82%, 77% 82%, 77% 68%, 64% 68%, 64% 84%, 51% 84%, 51% 63%, 39% 63%, 39% 78%, 25% 78%, 25% 61%, 13% 61%, 13% 75%, 0 75%);
  transform: translate3d(-1.5%, 0, 0);
  animation: garden-pixel-bleed-mist 13s steps(18, end) infinite alternate;
}
.folio-pixel-bleed-mist > i { top: 2%; }
.folio-pixel-bleed-mist > b { bottom: -3%; opacity: .48; transform: translate3d(1.5%, 0, 0) scaleX(-1); animation-direction: alternate-reverse; animation-duration: 17s; }
.folio-pixel-bleed-water {
  left: 3%;
  right: 3%;
  top: 65%;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  opacity: .72;
  border-top: 2px solid rgba(50, 83, 65, .5);
  background: linear-gradient(180deg, rgba(11, 29, 23, .7), rgba(4, 14, 10, .22));
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1), background-color 420ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-bleed-water > i,
.folio-pixel-bleed-water > b,
.folio-pixel-bleed-water > em {
  height: 3px;
  background: rgba(83, 124, 94, .64);
  transform-origin: center;
  animation: garden-pixel-bleed-water 3.4s steps(6, end) infinite;
}
.folio-pixel-bleed-water > i { left: 4%; top: 24%; width: 27%; }
.folio-pixel-bleed-water > b { right: 5%; top: 49%; width: 24%; animation-delay: -1.2s; }
.folio-pixel-bleed-water > em { left: 18%; right: 17%; bottom: 18%; opacity: .32; animation-delay: -2.1s; }
.folio-pixel-bleed-reeds {
  bottom: 1%;
  z-index: 1;
  width: 23%;
  height: 55%;
  opacity: .92;
}
.folio-pixel-bleed-reeds-left { left: 2%; }
.folio-pixel-bleed-reeds-right { right: 2%; transform: scaleX(-1); }
.folio-pixel-bleed-reeds > i,
.folio-pixel-bleed-reeds > b,
.folio-pixel-bleed-reeds > em {
  bottom: 0;
  width: 4px;
  background: #050e0a;
  transform-origin: bottom;
  animation: garden-pixel-bleed-reed 5.6s steps(6, end) infinite alternate;
}
.folio-pixel-bleed-reeds > i { left: 12%; height: 62%; box-shadow: 16px 24px 0 #07130e, 33px -7px 0 #050e0a, 51px 31px 0 #081710; transform: rotate(-3deg); }
.folio-pixel-bleed-reeds > b { left: 48%; height: 84%; box-shadow: 20px 29px 0 #07130e, 41px 12px 0 #050e0a; transform: rotate(2deg); animation-delay: -2s; }
.folio-pixel-bleed-reeds > em { left: 78%; height: 54%; box-shadow: 15px -18px 0 #07130e, 31px 18px 0 #050e0a; transform: rotate(-2deg); animation-delay: -3.6s; }
.folio-pixel-bleed-reeds > i::after,
.folio-pixel-bleed-reeds > b::after,
.folio-pixel-bleed-reeds > em::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 18%;
  width: 14px;
  height: 5px;
  background: #0a1a12;
  box-shadow: 8px 29px 0 #08160f, -5px 61px 0 #07130e;
}
.folio-pixel-bleed-fireflies { inset: 20% 0 13%; z-index: 1; opacity: .38; transition: opacity 420ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-bleed-fireflies > i { width: 4px; height: 4px; background: #9cc9a4; box-shadow: 0 0 8px rgba(145, 203, 155, .42); animation: garden-pixel-bleed-firefly 3.8s steps(8, end) infinite; }
.folio-pixel-bleed-fireflies > i:nth-child(1) { left: 7%; top: 37%; }
.folio-pixel-bleed-fireflies > i:nth-child(2) { left: 16%; top: 58%; animation-delay: -.8s; }
.folio-pixel-bleed-fireflies > i:nth-child(3) { left: 27%; top: 23%; animation-delay: -1.6s; }
.folio-pixel-bleed-fireflies > i:nth-child(4) { left: 38%; top: 71%; animation-delay: -2.4s; }
.folio-pixel-bleed-fireflies > i:nth-child(5) { left: 67%; top: 19%; animation-delay: -1.1s; }
.folio-pixel-bleed-fireflies > i:nth-child(6) { left: 76%; top: 63%; animation-delay: -2.1s; }
.folio-pixel-bleed-fireflies > i:nth-child(7) { left: 87%; top: 31%; animation-delay: -3s; }
.folio-pixel-bleed-fireflies > i:nth-child(8) { left: 95%; top: 70%; animation-delay: -3.5s; }
.folio-pixel-bleed-beam {
  left: 0;
  top: 0;
  z-index: 3;
  width: 40%;
  height: clamp(58px, 4.7vw, 82px);
  opacity: 0;
  background: linear-gradient(90deg, rgba(160, 205, 169, .36), rgba(114, 172, 127, .1), transparent);
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 52%);
  transform: rotate(-14deg) scaleX(.12);
  transform-origin: left center;
}
.folio-pixel-vista.is-clear .folio-pixel-bleed-sky { opacity: .78; }
.folio-pixel-vista.is-clear .folio-pixel-bleed-mist { opacity: .28; }
.folio-pixel-vista.is-clear .folio-pixel-bleed-water { opacity: .86; background: linear-gradient(180deg, rgba(13, 40, 29, .74), rgba(4, 17, 11, .24)); }
.folio-pixel-vista.is-clear .folio-pixel-bleed-fireflies { opacity: .9; }
.folio-pixel-vista.is-signal-active .folio-pixel-bleed-beam { animation: garden-pixel-bleed-beam 1.9s steps(18, end) both; }
.folio-pixel-vista.is-signal-response .folio-pixel-bleed-water > i,
.folio-pixel-vista.is-signal-response .folio-pixel-bleed-water > b,
.folio-pixel-vista.is-signal-response .folio-pixel-bleed-water > em { animation: garden-pixel-bleed-echo 560ms steps(6, end) both; }
.folio-pixel-vista.is-signal-response .folio-pixel-bleed-fireflies { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .folio-pixel-vista:hover .folio-pixel-bleed-fireflies { opacity: .78; }
}
@keyframes garden-pixel-bleed-mist { to { transform: translate3d(1.5%, -2px, 0); } }
@keyframes garden-pixel-bleed-water {
  0%, 100% { opacity: .28; transform: scaleX(.72); }
  50% { opacity: .72; transform: scaleX(1); }
}
@keyframes garden-pixel-bleed-reed {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(2deg); }
}
@keyframes garden-pixel-bleed-firefly {
  0%, 100% { opacity: .2; transform: translate3d(0, 0, 0); }
  42% { opacity: 1; transform: translate3d(7px, -6px, 0); }
  72% { opacity: .48; transform: translate3d(-3px, 3px, 0); }
}
@keyframes garden-pixel-bleed-beam {
  0% { opacity: 0; transform: rotate(-14deg) scaleX(.12); }
  18% { opacity: .54; transform: rotate(-14deg) scaleX(.96); }
  56% { opacity: .72; transform: rotate(10deg) scaleX(1.04); }
  80% { opacity: .34; transform: rotate(-3deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(-3deg) scaleX(.88); }
}
@keyframes garden-pixel-bleed-echo {
  0% { opacity: .18; transform: scaleX(.42); }
  48% { opacity: .9; transform: scaleX(1.18); }
  100% { opacity: .24; transform: scaleX(.82); }
}
@media (max-width: 1180px) {
  .folio-pixel-bleed-reeds { width: 17%; opacity: .72; }
}
@media (max-width: 900px) {
  .folio-pixel-bleed { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-bleed-mist > i,
  .folio-pixel-bleed-mist > b,
  .folio-pixel-bleed-water > i,
  .folio-pixel-bleed-water > b,
  .folio-pixel-bleed-water > em,
  .folio-pixel-bleed-reeds > i,
  .folio-pixel-bleed-reeds > b,
  .folio-pixel-bleed-reeds > em,
  .folio-pixel-bleed-fireflies > i,
  .folio-pixel-bleed-beam { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-bleed-mist > i,
html.garden-lite-motion .folio-pixel-bleed-mist > b,
html.garden-lite-motion .folio-pixel-bleed-water > i,
html.garden-lite-motion .folio-pixel-bleed-water > b,
html.garden-lite-motion .folio-pixel-bleed-water > em,
html.garden-lite-motion .folio-pixel-bleed-reeds > i,
html.garden-lite-motion .folio-pixel-bleed-reeds > b,
html.garden-lite-motion .folio-pixel-bleed-reeds > em,
html.garden-lite-motion .folio-pixel-bleed-fireflies > i,
html.garden-lite-motion .folio-pixel-bleed-beam { animation: none !important; transition: none !important; }
/* Reveal: quiet and coordinated. */
.folio .reveal-ready { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-out), transform .75s var(--ease-out); }
.folio .reveal-ready.reveal-visible { opacity: 1; transform: none; }

/* Boot sequence. */
html.garden-booting { overflow: hidden; }
.garden-boot {
  --bone: #edf1eb;
  --dim: #858d86;
  --moss: #789d7f;
  --moss-bright: #a7c9ad;
  --boot-veil: rgba(5, 8, 6, .77);
  --boot-shutter: rgba(6, 9, 7, .66);
  position: fixed;
  inset: 0;
  z-index: 1200;
  min-height: 100svh;
  color: var(--bone);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: visibility 0s linear .78s;
}
.garden-boot[hidden] { display: none; }
.garden-boot.is-leaving { visibility: hidden; }
.garden-boot::before,
.garden-boot::after {
  content: "";
  position: absolute;
  z-index: 7;
  pointer-events: none;
}
.garden-boot::before {
  inset: 20px;
  border: 1px solid rgba(173, 202, 178, .2);
  transition: opacity .24s ease;
}
.garden-boot::after {
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
  opacity: .28;
  background: linear-gradient(90deg, transparent, rgba(198, 222, 202, .58) 12% 88%, transparent);
  transform: scaleX(.08);
  transition: transform 1.2s var(--ease-out), opacity .3s ease;
}
.garden-boot.is-phase-one::after { transform: scaleX(.56); }
.garden-boot.is-phase-two::after,
.garden-boot.is-ready::after { transform: scaleX(1); }
.garden-boot.is-leaving::before,
.garden-boot.is-leaving::after { opacity: 0; }

.garden-boot-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: .78;
  transition: opacity .58s var(--ease-out) .16s;
}
.garden-boot.is-leaving .garden-boot-field { opacity: 0; }
.garden-boot-field::before,
.garden-boot-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.garden-boot-field::before {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 19%, rgba(3, 5, 4, .2) 52%, rgba(2, 3, 2, .74) 108%),
    linear-gradient(90deg, rgba(3, 4, 3, .62), transparent 22% 78%, rgba(3, 4, 3, .68));
}
.garden-boot-field::after {
  opacity: .16;
  background:
    linear-gradient(rgba(206, 225, 207, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 225, 207, .04) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(203, 228, 207, .09) 4px);
  background-size: 80px 80px, 80px 80px, auto;
}
.garden-boot-photo {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.2) brightness(.42);
  transform: scale(1.045) translate3d(0, 9px, 0);
  transition: transform 2.25s cubic-bezier(.2, .78, .2, 1);
}
.garden-boot-photo-light { display: none; }
.garden-boot.is-phase-one .garden-boot-photo { transform: scale(1.03) translate3d(0, 4px, 0); }
.garden-boot.is-ready .garden-boot-photo { transform: scale(1.018) translate3d(0, 0, 0); }

.garden-boot-fog {
  position: absolute;
  left: -12%;
  z-index: 3;
  width: 124%;
  height: 42%;
  opacity: .94;
  background: linear-gradient(180deg, transparent, var(--boot-veil) 34% 68%, transparent);
  filter: blur(16px);
  transition: transform 1.55s var(--ease-out), opacity .7s ease;
  will-change: transform, opacity;
}
.garden-boot-fog-a { top: 7%; transform: translate3d(-7%, 2%, 0) skewX(-8deg); }
.garden-boot-fog-b { bottom: 3%; transform: translate3d(8%, -2%, 0) skewX(7deg); }
.garden-boot.is-phase-one .garden-boot-fog-a { transform: translate3d(2%, -9%, 0) skewX(-3deg); opacity: .68; }
.garden-boot.is-phase-one .garden-boot-fog-b { transform: translate3d(-2%, 8%, 0) skewX(3deg); opacity: .64; }
.garden-boot.is-ready .garden-boot-fog { opacity: .36; }

.garden-boot-snow { position: absolute; inset: 0; z-index: 4; }
.garden-boot-snow i {
  position: absolute;
  width: 3px;
  height: 3px;
  opacity: 0;
  background: var(--bone);
  box-shadow: 0 0 10px rgba(211, 231, 214, .34);
  transform: translate3d(-9px, -15px, 0) rotate(45deg) scale(.4);
  transition: opacity .34s ease, transform .72s var(--ease-out);
}
.garden-boot-snow i:nth-child(1) { left: 10%; top: 22%; transition-delay: .04s; }
.garden-boot-snow i:nth-child(2) { left: 24%; top: 72%; transition-delay: .14s; }
.garden-boot-snow i:nth-child(3) { left: 37%; top: 18%; transition-delay: .22s; }
.garden-boot-snow i:nth-child(4) { left: 59%; top: 77%; transition-delay: .08s; }
.garden-boot-snow i:nth-child(5) { left: 71%; top: 26%; transition-delay: .28s; }
.garden-boot-snow i:nth-child(6) { left: 86%; top: 67%; transition-delay: .18s; }
.garden-boot-snow i:nth-child(7) { left: 93%; top: 14%; transition-delay: .34s; }
.garden-boot.is-phase-two .garden-boot-snow i,
.garden-boot.is-ready .garden-boot-snow i { opacity: .64; transform: translate3d(0, 0, 0) rotate(45deg) scale(1); }

.garden-boot-omen {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(1180px, calc(100vw - 112px));
  transform: translate3d(-50%, -50%, 0);
  transition: opacity .24s ease, transform .52s var(--ease-out);
}
.garden-boot.is-leaving .garden-boot-omen { opacity: 0; transform: translate3d(-50%, calc(-50% - 8px), 0) scale(.988); }
.garden-boot-eyebrow,
.garden-boot-readout,
.garden-boot-actions,
.garden-boot-sight { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.garden-boot-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 0 clamp(22px, 3.5vw, 46px);
  color: var(--dim);
  font-size: 9px;
  font-weight: 400;
}
.garden-boot-eyebrow span { display: inline-flex; align-items: center; }
.garden-boot-eyebrow span i { width: 5px; height: 5px; margin-right: 10px; background: var(--moss); box-shadow: 0 0 10px rgba(120, 157, 127, .55); }
.garden-boot-eyebrow b { color: var(--moss-bright); font-size: 8px; font-weight: 500; }

.garden-boot-title {
  position: relative;
  height: clamp(78px, 13vw, 178px);
  margin: 0;
  color: var(--bone);
  font: italic 700 clamp(68px, 10.6vw, 158px)/.92 var(--serif);
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.garden-boot-title > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.garden-boot-title-base { color: transparent; opacity: .7; -webkit-text-stroke: 1px rgba(231, 240, 229, .2); }
.garden-boot-title-cut { text-shadow: 0 22px 66px rgba(0, 0, 0, .68); transition: transform 1.05s var(--ease-out), opacity .46s ease; }
.garden-boot-title-cut-a { clip-path: polygon(0 0, 100% 0, 100% 34%, 0 57%); opacity: .48; transform: translate3d(-4.8vw, -16px, 0) skewX(-5deg); }
.garden-boot-title-cut-b { clip-path: polygon(0 57%, 100% 34%, 100% 69%, 0 78%); opacity: .7; transform: translate3d(3vw, 7px, 0) skewX(3deg); }
.garden-boot-title-cut-c { clip-path: polygon(0 78%, 100% 69%, 100% 100%, 0 100%); opacity: .42; transform: translate3d(-2.4vw, 18px, 0) skewX(-2deg); }
.garden-boot.is-phase-one .garden-boot-title-cut-a { opacity: .72; transform: translate3d(-1.7vw, -7px, 0) skewX(-2deg); }
.garden-boot.is-phase-one .garden-boot-title-cut-b { opacity: .86; transform: translate3d(1.2vw, 3px, 0) skewX(1deg); }
.garden-boot.is-phase-one .garden-boot-title-cut-c { opacity: .66; transform: translate3d(-.8vw, 8px, 0) skewX(-1deg); }
.garden-boot.is-phase-two .garden-boot-title-cut,
.garden-boot.is-ready .garden-boot-title-cut { opacity: .98; transform: translate3d(0, 0, 0) skewX(0); }

.garden-boot-sight {
  position: absolute;
  left: 5%;
  top: 52%;
  z-index: 3;
  width: 96px;
  height: 42px;
  opacity: 0;
  color: rgba(216, 232, 217, .44);
  transform: translate3d(-18px, 0, 0) rotate(-9deg);
  transition: opacity .4s ease, transform .8s var(--ease-out);
}
.garden-boot-sight::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(182, 210, 186, .26); border-right-color: transparent; border-radius: 50%; }
.garden-boot-sight::after { content: ""; position: absolute; left: -12px; top: 50%; width: 122px; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }
.garden-boot-sight i { position: absolute; left: 31%; top: 50%; width: 4px; height: 4px; background: var(--moss-bright); box-shadow: 0 0 12px rgba(167, 201, 173, .68); transform: translate(-50%, -50%) rotate(45deg); }
.garden-boot-sight b { position: absolute; left: 31%; top: 50%; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); }
.garden-boot-sight span { position: absolute; left: 64%; top: 8px; font-size: 7px; white-space: nowrap; }
.garden-boot.is-phase-two .garden-boot-sight,
.garden-boot.is-ready .garden-boot-sight { opacity: .9; transform: translate3d(0, 0, 0) rotate(-9deg); }

.garden-boot-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 52px);
  color: var(--dim);
  font-size: 8px;
}
.garden-boot-readout i { color: var(--bone); font-style: normal; }
.garden-boot-readout strong { color: rgba(167, 201, 173, .72); font-size: 8px; font-weight: 400; }
.garden-boot-bar { position: relative; height: 1px; margin-top: 11px; background: rgba(213, 229, 214, .16); }
.garden-boot-bar > i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--moss), var(--moss-bright)); transform: scaleX(0); transform-origin: left; }

.garden-boot-actions { display: flex; align-items: center; gap: 24px; margin-top: 24px; opacity: .54; transition: opacity .42s ease; }
.garden-boot.is-phase-two .garden-boot-actions,
.garden-boot.is-ready .garden-boot-actions { opacity: 1; }
.garden-boot-actions button { padding: 0; border: 0; color: var(--dim); background: none; font: 9px/1 var(--mono); letter-spacing: .12em; cursor: pointer; transition: color 180ms ease, transform 180ms var(--ease-out); }
.garden-boot-actions button:first-child { color: var(--bone); }
.garden-boot-actions button:first-child::before { content: ""; display: inline-block; width: 38px; height: 1px; margin: 0 9px 3px 0; background: var(--moss-bright); transform: scaleX(.63); transform-origin: left; transition: transform .24s var(--ease-out); }
.garden-boot-actions button:active { transform: translateY(1px) scale(.98); }
.garden-boot-actions button span { display: inline-block; margin-left: 8px; }
@media (hover: hover) and (pointer: fine) {
  .garden-boot-actions button:first-child:hover::before { transform: scaleX(1); }
  .garden-boot-actions button:hover { color: var(--moss-bright); }
}

.garden-boot-shutter {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 50.1%;
  background: var(--boot-shutter);
  pointer-events: none;
  will-change: transform;
  transition: transform .72s cubic-bezier(.68, 0, .22, 1);
}
.garden-boot-shutter-top { top: 0; border-bottom: 1px solid rgba(188, 214, 192, .12); }
.garden-boot-shutter-bottom { bottom: 0; border-top: 1px solid rgba(188, 214, 192, .12); }
.garden-boot.is-leaving .garden-boot-shutter-top { transform: translate3d(0, -102%, 0); }
.garden-boot.is-leaving .garden-boot-shutter-bottom { transform: translate3d(0, 102%, 0); }

:root[data-resolved-theme="light"] .garden-boot {
  --bone: #1d241e;
  --dim: #657066;
  --moss: #4f7758;
  --moss-bright: #315f3b;
  --boot-veil: rgba(220, 226, 217, .78);
  --boot-shutter: rgba(227, 232, 224, .7);
}
:root[data-resolved-theme="light"] .garden-boot-photo-dark { display: none; }
:root[data-resolved-theme="light"] .garden-boot-photo-light { display: block; filter: grayscale(.76) saturate(.42) contrast(.92) brightness(1.04); }
:root[data-resolved-theme="light"] .garden-boot-field::before {
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 21%, rgba(227, 232, 224, .24) 55%, rgba(227, 232, 224, .82) 108%),
    linear-gradient(90deg, rgba(227, 232, 224, .7), transparent 24% 76%, rgba(227, 232, 224, .74));
}
:root[data-resolved-theme="light"] .garden-boot-field::after { opacity: .12; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .garden-boot::before { border-color: rgba(49, 94, 60, .22); }
:root[data-resolved-theme="light"] .garden-boot::after { background: linear-gradient(90deg, transparent, rgba(49, 94, 60, .48) 12% 88%, transparent); }
:root[data-resolved-theme="light"] .garden-boot-title-base { -webkit-text-stroke-color: rgba(32, 39, 32, .2); }
:root[data-resolved-theme="light"] .garden-boot-title-cut { text-shadow: 0 22px 58px rgba(42, 56, 44, .18); }
:root[data-resolved-theme="light"] .garden-boot-sight { color: rgba(49, 94, 60, .42); }
:root[data-resolved-theme="light"] .garden-boot-snow i { box-shadow: 0 0 10px rgba(49, 94, 60, .18); }

/* Atmosphere and HUD. */
.garden-atmosphere, .garden-scanlines, .garden-noise, .garden-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.garden-atmosphere { z-index: 61; overflow: hidden; }
.garden-particles { opacity: .42; transition: opacity .3s; }
.garden-scanlines { opacity: .12; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .24) 50%) 0 0 / 100% 2px, linear-gradient(90deg, rgba(255, 0, 0, .025), rgba(0, 255, 0, .012), rgba(0, 0, 255, .025)) 0 0 / 3px 100%; box-shadow: inset 0 0 150px rgba(0, 0, 0, .56); animation: garden-flicker 5s infinite; }
.garden-noise { opacity: .026; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); animation: garden-noise .5s steps(2) infinite; }
.garden-hud { position: fixed; inset: 0; z-index: 70; color: rgba(236, 243, 234, .48); pointer-events: none; font: 8px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.garden-hud-system { display: none; }
.garden-hud-vitals { position: absolute; top: 78px; right: 20px; display: flex; gap: 15px; }
.garden-hud-vitals i { color: var(--moss-bright); font-style: normal; }
.garden-hud-scroll { position: absolute; right: 17px; top: 38%; display: grid; justify-items: center; gap: 8px; }
.garden-hud-scroll b { font-weight: 400; writing-mode: vertical-rl; }
.garden-hud-scroll > span { position: relative; width: 1px; height: 90px; background: rgba(235, 242, 233, .18); overflow: hidden; }
.garden-hud-scroll > span i { position: absolute; inset: 0; background: var(--moss-bright); transform: scaleY(0); transform-origin: top; }
.garden-hud-scroll small { font: inherit; font-size: 7px; writing-mode: vertical-rl; }
.garden-corner { position: absolute; width: 15px; height: 15px; border-color: rgba(202, 222, 203, .26); border-style: solid; }
.garden-corner-a { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.garden-corner-b { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
.garden-corner-c { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.garden-corner-d { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }

/* Cursor and click feedback. */
.garden-cursor { position: fixed; inset: 0; z-index: 1400; pointer-events: none; opacity: 0; mix-blend-mode: difference; transition: opacity 150ms ease; }
.garden-cursor.is-visible { opacity: 1; }
.garden-cursor-dot, .garden-cursor-frame { position: absolute; top: 0; left: 0; display: block; will-change: transform, width, height; }
.garden-cursor-dot { width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: white; }
.garden-cursor-frame { width: 30px; height: 30px; margin: -15px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; transition: border-radius 140ms, background 140ms; }
.garden-cursor span { position: absolute; display: none; color: white; font: 8px/1 var(--mono); letter-spacing: .12em; }
.garden-cursor.is-targeting .garden-cursor-frame { margin: 0; border-radius: 0; background: rgba(255, 255, 255, .08); }
.garden-cursor.is-targeting span { display: block; }
.garden-cursor.is-down .garden-cursor-frame { background: rgba(255, 255, 255, .18); }
html.garden-cursor-on, html.garden-cursor-on a, html.garden-cursor-on button { cursor: none !important; }
.garden-ripple-layer { position: fixed; inset: 0; z-index: 1350; pointer-events: none; overflow: hidden; }
.garden-ripple { position: absolute; width: 48px; height: 48px; margin: -24px; display: grid; place-items: center; border: 1px solid rgba(184, 220, 190, .7); border-radius: 50%; color: var(--moss-bright); font: 9px/1 var(--mono); animation: garden-ripple .68s cubic-bezier(.17, .67, .33, 1) forwards; }

/* Companion. */
.garden-pet { position: fixed; left: clamp(18px, 3vw, 40px); right: auto; bottom: clamp(18px, 3vw, 34px); z-index: 92; display: grid; justify-items: start; gap: 10px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 220ms ease, transform 300ms var(--ease-out); }
body.garden-pet-ready .garden-pet { opacity: 1; transform: none; pointer-events: auto; }
.garden-pet > p { position: relative; max-width: 220px; margin: 0 0 0 10px; padding: 11px 13px; color: var(--bone); background: rgba(9, 13, 10, .9); border: 1px solid var(--line-strong); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); font: 9px/1.6 var(--mono); letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.garden-pet > p::after { content: ""; position: absolute; left: 20px; right: auto; bottom: -5px; width: 8px; height: 8px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: rgba(9, 13, 10, .9); transform: rotate(45deg); }
.garden-pet.is-speaking > p { opacity: 1; transform: none; }
.garden-pet button { position: relative; width: 62px; height: 62px; padding: 0; border: 1px solid rgba(210, 228, 210, .42); border-radius: 50%; background: #111812; box-shadow: 0 10px 36px rgba(0, 0, 0, .28); overflow: hidden; cursor: pointer; transition: transform 200ms var(--ease-out), border-radius 200ms; }
.garden-pet button:active { transform: scale(.96); }
.garden-pet img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.garden-pet-light { display: none; }
.garden-pet-dark { display: block; }
.garden-pet button span { position: absolute; inset: auto 0 0; padding: 5px 2px; color: var(--bone); background: rgba(7, 12, 9, .72); font: 7px/1 var(--mono); letter-spacing: .08em; opacity: 0; transform: translateY(100%); transition: opacity 160ms, transform 160ms; }
@media (hover: hover) and (pointer: fine) {
  .garden-pet button:hover { border-radius: 34% 66% 59% 41% / 47% 38% 62% 53%; transform: rotate(-5deg) scale(1.06); }
  .garden-pet button:hover span { opacity: 1; transform: none; }
}
.garden-pet.is-happy button { animation: garden-pet-hop .55s cubic-bezier(.34, 1.56, .64, 1); }

.garden-overgrowth {
  --bone: #edf1eb;
  --root-node-x: 68%;
  --root-node-y: 54%;
  position: fixed;
  inset: 0;
  z-index: 1300;
  color: var(--bone);
  background:
    radial-gradient(circle at var(--root-node-x) var(--root-node-y), rgba(117, 174, 126, .11), transparent 0 24%),
    linear-gradient(112deg, rgba(3, 9, 5, .9), rgba(7, 19, 10, .52) 48%, rgba(2, 8, 5, .88));
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 420ms;
}
.garden-overgrowth::before,
.garden-overgrowth::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
}
.garden-overgrowth::before {
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 42px, rgba(178, 210, 181, .055) 43px 44px, transparent 45px 73px);
  opacity: 0;
  transform: scale(.82) rotate(-4deg);
}
.garden-overgrowth::after {
  background: radial-gradient(ellipse at 50% 104%, rgba(86, 126, 91, .27), transparent 58%);
  opacity: 0;
  transform: translate3d(0, 14%, 0);
}
.garden-overgrowth.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0, 0, .2, 1), visibility 0s;
}
.garden-overgrowth.is-receding { opacity: 0; pointer-events: none; transition-duration: 760ms; }
.garden-overgrowth.is-active::before { animation: garden-root-radar 5.8s cubic-bezier(.16, 1, .3, 1) .25s both; }
.garden-overgrowth.is-active::after { animation: garden-root-mist 5.9s cubic-bezier(.16, 1, .3, 1) .1s both; }

.garden-overgrowth-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: linear-gradient(105deg, transparent 0 38%, rgba(215, 239, 217, .24) 48%, transparent 57%);
  opacity: 0;
  transform: translate3d(-110%, 0, 0) skewX(-8deg);
  pointer-events: none;
}
.garden-overgrowth.is-active .garden-overgrowth-flash { animation: garden-root-flash 880ms cubic-bezier(.4, 0, .2, 1) both; }

.garden-overgrowth-vines { position: absolute; inset: -2%; z-index: 1; width: 104%; height: 104%; overflow: visible; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform 480ms cubic-bezier(.16, 1, .3, 1); }
.garden-overgrowth-vines path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.garden-overgrowth-vines-back path { stroke: rgba(115, 163, 121, .38); stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(92, 150, 101, .15)); }
.garden-overgrowth-vines-front path { stroke: rgba(179, 215, 183, .7); stroke-width: 1.5; filter: drop-shadow(0 0 11px rgba(120, 183, 131, .3)); }
.garden-overgrowth.is-active .garden-overgrowth-vines-back path { animation: garden-vine-grow 3.4s cubic-bezier(.16, 1, .3, 1) both; }
.garden-overgrowth.is-active .garden-overgrowth-vines-front path { animation: garden-vine-grow 2.75s cubic-bezier(.16, 1, .3, 1) .42s both; }
.garden-overgrowth-vines path:nth-child(2) { animation-delay: .18s !important; }
.garden-overgrowth-vines path:nth-child(3) { animation-delay: .34s !important; }
.garden-overgrowth-vines path:nth-child(4) { animation-delay: .52s !important; }
.garden-overgrowth-vines-front path:nth-child(2) { animation-delay: .58s !important; }
.garden-overgrowth-vines-front path:nth-child(3) { animation-delay: .76s !important; }

.garden-overgrowth-spores { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform 620ms cubic-bezier(.16, 1, .3, 1); }
.garden-overgrowth-spores i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(4px * var(--s));
  height: calc(4px * var(--s));
  background: #c7e2ca;
  border-radius: 50%;
  box-shadow: 0 0 calc(13px * var(--s)) rgba(163, 217, 171, .72);
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.2);
}
.garden-overgrowth.is-active .garden-overgrowth-spores i { animation: garden-spore-rise 3.1s cubic-bezier(.16, 1, .3, 1) var(--d) infinite; }

.garden-overgrowth-node {
  position: absolute;
  left: var(--root-node-x);
  top: var(--root-node-y);
  z-index: 3;
  width: clamp(70px, 8vw, 118px);
  aspect-ratio: 1;
  border: 1px solid rgba(177, 221, 184, .34);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
  pointer-events: none;
}
.garden-overgrowth-node::before,
.garden-overgrowth-node::after { content: ""; position: absolute; border: 1px solid rgba(159, 211, 169, .24); border-radius: inherit; }
.garden-overgrowth-node::before { inset: 18%; }
.garden-overgrowth-node::after { inset: -38%; }
.garden-overgrowth-node i { position: absolute; left: 50%; top: -45%; width: 1px; height: 190%; background: linear-gradient(transparent, rgba(205, 237, 209, .62), transparent); transform: rotate(33deg); }
.garden-overgrowth-node b { position: absolute; inset: 43%; background: #d7efda; border-radius: 50%; box-shadow: 0 0 28px rgba(164, 225, 174, .9); }
.garden-overgrowth.is-active .garden-overgrowth-node { animation: garden-root-node 4.8s cubic-bezier(.34, 1.56, .64, 1) .9s both; }
.garden-overgrowth.is-active.is-striking .garden-overgrowth-node { animation: garden-node-crush 860ms cubic-bezier(.77, 0, .175, 1) .46s both; transform-origin: 22% 62%; }

.garden-overgrowth-impact {
  position: absolute;
  left: var(--root-node-x);
  top: var(--root-node-y);
  z-index: 4;
  width: 32px;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}
.garden-overgrowth-impact::before,
.garden-overgrowth-impact::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(220, 244, 222, .92);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(164, 225, 174, .7);
}
.garden-overgrowth-impact::after { border-style: dashed; transform: rotate(22deg) scale(1.45); }
.garden-overgrowth-impact i,
.garden-overgrowth-impact b { position: absolute; left: 45%; top: 45%; width: 7px; height: 7px; background: #d9f0dc; box-shadow: 0 0 14px rgba(174, 229, 183, .9); transform: rotate(45deg); }
.garden-overgrowth.is-striking .garden-overgrowth-impact { animation: garden-node-impact 920ms cubic-bezier(.23, 1, .32, 1) .46s both; }
.garden-overgrowth.is-striking .garden-overgrowth-impact::before { animation: garden-impact-ring 860ms cubic-bezier(.23, 1, .32, 1) .46s both; }
.garden-overgrowth.is-striking .garden-overgrowth-impact::after { animation: garden-impact-ring-alt 1.05s cubic-bezier(.23, 1, .32, 1) .5s both; }
.garden-overgrowth.is-striking .garden-overgrowth-impact i { animation: garden-impact-shard-a 780ms cubic-bezier(.23, 1, .32, 1) .46s both; }
.garden-overgrowth.is-striking .garden-overgrowth-impact b { animation: garden-impact-shard-b 820ms cubic-bezier(.23, 1, .32, 1) .46s both; }

.garden-overgrowth-cat {
  position: absolute;
  left: var(--root-node-x);
  top: var(--root-node-y);
  z-index: 5;
  display: grid;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 192 / 208;
  opacity: 0;
  transform: translate3d(calc(-68vw - 120%), -86%, 0) rotate(-5deg) scale(.84);
  transform-origin: 88% 92%;
  pointer-events: none;
}
.garden-overgrowth.is-active .garden-overgrowth-cat { will-change: transform, opacity; }
.garden-overgrowth-cat-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  image-rendering: auto;
  filter: drop-shadow(0 17px 16px rgba(0, 0, 0, .58)) drop-shadow(0 0 1px rgba(193, 221, 197, .42));
}
.garden-overgrowth-cat-contact {
  position: absolute;
  right: 0;
  bottom: 3%;
  width: 30%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(197, 231, 202, .42), rgba(102, 170, 112, .08) 52%, transparent 72%);
  opacity: 0;
  transform: translate3d(1%, 0, 0) scale(.25, .55);
  filter: blur(2px);
}
.garden-overgrowth-cat span {
  position: absolute;
  left: 55%;
  top: calc(100% + 2px);
  color: rgba(218, 236, 219, .72);
  font: 7px/1 var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.garden-overgrowth.is-striking .garden-overgrowth-cat-contact {
  animation: garden-sumi-contact 820ms cubic-bezier(.23, 1, .32, 1) both;
}
.garden-overgrowth.is-contained .garden-overgrowth-cat {
  opacity: 1;
  transform: translate3d(-88%, -92%, 0) rotate(0) scale(1);
}
.garden-overgrowth.is-contained .garden-overgrowth-cat-contact {
  opacity: .28;
  transform: translate3d(1%, 0, 0) scale(1.05, .72);
}
.garden-overgrowth.is-contained .garden-overgrowth-cat span { color: #c7e2ca; }

.garden-overgrowth-copy {
  position: absolute;
  left: clamp(24px, 7vw, 120px);
  bottom: clamp(34px, 8vh, 94px);
  z-index: 6;
  display: grid;
  justify-items: start;
  gap: 12px;
  width: min(680px, calc(100vw - 48px));
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}
.garden-overgrowth-copy small { color: #a8cfad; font: 8px/1.4 var(--pixel); letter-spacing: .18em; }
.garden-overgrowth-copy strong { color: var(--bone); font: 500 clamp(36px, 6vw, 82px)/.96 var(--scrawl); letter-spacing: .01em; text-shadow: 0 10px 34px rgba(0, 0, 0, .54); }
.garden-overgrowth-copy > span { color: rgba(222, 236, 223, .68); font: 10px/1.6 var(--mono); letter-spacing: .08em; }
.garden-overgrowth-copy button { margin-top: 11px; padding: 10px 0; color: rgba(220, 238, 221, .68); background: transparent; border: 0; border-bottom: 1px solid rgba(183, 219, 187, .34); font: 8px/1 var(--mono); letter-spacing: .13em; cursor: pointer; }
.garden-overgrowth-copy button b { display: inline-block; margin-left: 10px; font-size: 12px; transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) and (pointer: fine) {
  .garden-overgrowth-copy button:hover { color: var(--bone); border-color: rgba(211, 235, 214, .72); }
  .garden-overgrowth-copy button:hover b { transform: rotate(90deg) scale(1.25); }
}
.garden-overgrowth-copy button:focus-visible { outline: 1px solid #b3d8b8; outline-offset: 5px; }
.garden-overgrowth.is-active .garden-overgrowth-copy { animation: garden-root-copy 760ms cubic-bezier(.16, 1, .3, 1) 1.65s both; }

.garden-root-burst {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(194, 231, 199, .78);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(149, 211, 158, .32), inset 0 0 20px rgba(182, 224, 188, .2);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  animation: garden-root-burst 980ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.garden-root-burst::before,
.garden-root-burst::after { content: ""; position: absolute; inset: 24%; border: 1px solid rgba(190, 227, 195, .48); border-radius: inherit; }
.garden-root-burst::after { inset: 46%; background: #d7efda; border: 0; box-shadow: 0 0 18px rgba(181, 231, 189, .86); }

html.garden-overrun .g-nav { animation: garden-system-skew 760ms cubic-bezier(.16, 1, .3, 1) both; }
html.garden-overrun .folio-cover,
html.garden-overrun .folio-explore,
html.garden-overrun .folio-articles,
html.garden-overrun .folio-outro { animation: garden-world-buckle 980ms cubic-bezier(.16, 1, .3, 1) both; }
html.garden-root-impact .garden-overgrowth { animation: garden-impact-jolt 440ms cubic-bezier(.23, 1, .32, 1) both; }

@keyframes garden-pulse { 50% { opacity: .35; } }
@keyframes garden-quote-progress { to { transform: scaleX(1); } }
@keyframes garden-quote-exposure {
  0% { opacity: 0; transform: translateX(-115%) skewX(-8deg); }
  18% { opacity: .62; }
  52% { opacity: .94; }
  100% { opacity: 0; transform: translateX(118%) skewX(-8deg); }
}
@keyframes garden-world-drift { from { transform: scale(1.025) translate3d(-.35%, -.18%, 0); } to { transform: scale(1.065) translate3d(.45%, .24%, 0); } }
@keyframes garden-cover-drift { from { transform: scale(1.035) translate3d(-.45%, -.2%, 0); } to { transform: scale(1.075) translate3d(.55%, .35%, 0); } }
@keyframes garden-wordmark-ray {
  0% { opacity: 0; transform: scaleX(0); }
  16% { opacity: .9; }
  62% { opacity: .68; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.035); }
}
@keyframes garden-wordmark-echo {
  0%, 100% { opacity: var(--wordmark-ghost-opacity); }
  38% { opacity: var(--wordmark-ghost-peak); }
}
@keyframes garden-wordmark-eclipse {
  0%, 100% { transform: scale(1); }
  16% { transform: scale(.91, 1.055); }
  46% { transform: scale(1.065, .94); }
}
@keyframes garden-wordmark-cover {
  0%, 100% { transform: translate(-50%, -50%) translate3d(var(--eclipse-x), var(--eclipse-y), 0) scale(1); }
  34% { transform: translate(-50%, -50%) translate3d(var(--eclipse-x), var(--eclipse-y), 0) scale(.9); }
}
@keyframes garden-wordmark-chip-a {
  0%, 100% { opacity: var(--wordmark-chip-rest); transform: translate3d(-8px, -5px, 0) rotate(-.38deg); }
  18% { opacity: var(--wordmark-chip-tight); transform: translate3d(-4px, -2px, 0) rotate(-.14deg); }
  48% { opacity: var(--wordmark-chip-peak); transform: translate3d(-17px, -10px, 0) rotate(-1.12deg); }
  76% { opacity: var(--wordmark-chip-tail); transform: translate3d(-7px, -4px, 0) rotate(-.28deg); }
}
@keyframes garden-wordmark-chip-b {
  0%, 100% { opacity: var(--wordmark-chip-rest); transform: translate3d(10px, -5px, 0) rotate(.42deg); }
  18% { opacity: var(--wordmark-chip-tight); transform: translate3d(5px, -2px, 0) rotate(.16deg); }
  48% { opacity: var(--wordmark-chip-peak); transform: translate3d(19px, -11px, 0) rotate(1.08deg); }
  76% { opacity: var(--wordmark-chip-tail); transform: translate3d(9px, -4px, 0) rotate(.3deg); }
}
@keyframes garden-trace-breathe { from { transform: scale(1) translate3d(-2px, 3px, 0); opacity: .62; } to { transform: scale(1.012) translate3d(4px, -5px, 0); opacity: .94; } }
@keyframes garden-field-mist { 0%, 12% { opacity: 0; transform: translate3d(0, 12vh, 0) scale(.82); } 28% { opacity: .7; } 68% { opacity: .34; } 82%, 100% { opacity: 0; transform: translate3d(132vw, -14vh, 0) scale(1.12); } }
@keyframes garden-field-node { 0%, 12%, 100% { opacity: 0; transform: scale(.3); } 24% { opacity: .9; transform: scale(1); } 42% { opacity: .18; transform: scale(2.5); } 58% { opacity: 0; transform: scale(3.2); } }
@keyframes garden-contribution-wake { from { opacity: .08; transform: scale(.45); } 65% { opacity: 1; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }
@keyframes garden-contribution-future { from { opacity: .05; transform: scale(.45); } to { opacity: .22; transform: scale(1); } }
@keyframes garden-github-sync { 50% { opacity: .38; } }
@keyframes garden-calendar-wake { from { opacity: 0; transform: translate3d(0, 7px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes garden-calendar-today { 0%, 100% { transform: skewX(-4deg) scale(1); } 50% { transform: skewX(-4deg) scale(1.08); } }
@keyframes garden-descend { 0%, 100% { opacity: .25; transform: scaleY(.15); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes garden-orbit { to { transform: rotate(360deg); } }
@keyframes garden-scan { to { background-position: 0 120px; } }
@keyframes garden-flicker { 0%, 100% { opacity: .1; } 48% { opacity: .13; } 50% { opacity: .08; } 52% { opacity: .12; } }
@keyframes garden-noise { 0% { transform: translate(0); } 25% { transform: translate(-1.5%, 1%); } 50% { transform: translate(1%, -1.5%); } 75% { transform: translate(1.5%, 1%); } }
@keyframes garden-ripple { 0% { opacity: 1; transform: scale(.2) rotate(-18deg); } 65% { opacity: .45; } 100% { opacity: 0; transform: scale(2.25) rotate(12deg); } }
@keyframes garden-pet-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-13px) rotate(-6deg); } 65% { transform: translateY(2px) rotate(4deg); } }
@keyframes garden-alert { 0% { transform: translate(0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-1px, -2px); } }
@keyframes garden-root-flash {
  0% { opacity: 0; transform: translate3d(-110%, 0, 0) skewX(-8deg); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(112%, 0, 0) skewX(-8deg); }
}
@keyframes garden-vine-grow {
  0% { opacity: 0; stroke-dashoffset: 1; }
  12% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes garden-root-radar {
  0% { opacity: 0; transform: scale(.82) rotate(-4deg); }
  28% { opacity: .7; }
  100% { opacity: .26; transform: scale(1.12) rotate(3deg); }
}
@keyframes garden-root-mist {
  0% { opacity: 0; transform: translate3d(0, 14%, 0); }
  35% { opacity: 1; }
  100% { opacity: .52; transform: translate3d(0, -4%, 0); }
}
@keyframes garden-spore-rise {
  0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(.2); }
  24% { opacity: .84; }
  72% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(12px, -92px, 0) scale(1.2); }
}
@keyframes garden-root-node {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-35deg); }
  18% { opacity: .9; transform: translate(-50%, -50%) scale(1.1) rotate(0); }
  32%, 54% { opacity: .72; transform: translate(-50%, -50%) scale(.92) rotate(18deg); }
  66% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(35deg); }
  74%, 100% { opacity: .16; transform: translate(-50%, -50%) scale(.28) rotate(46deg); }
}
@keyframes garden-sumi-contact {
  0%, 38% { opacity: 0; transform: translate3d(1%, 0, 0) scale(.25, .55); }
  57% { opacity: .9; transform: translate3d(1%, 0, 0) scale(1.4, .68); }
  76% { opacity: .34; transform: translate3d(1%, 0, 0) scale(.88, .78); }
  100% { opacity: .28; transform: translate3d(1%, 0, 0) scale(1.05, .72); }
}
@keyframes garden-node-crush {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(35deg); }
  22% { opacity: 1; transform: translate(-45%, -50%) scale(1.38, .62) rotate(58deg); }
  44% { opacity: .86; transform: translate(-34%, -46%) scale(.48, 1.16) rotate(82deg); }
  68% { opacity: .32; transform: translate(-18%, -42%) scale(.24, .44) rotate(118deg); }
  100% { opacity: 0; transform: translate(14%, -38%) scale(.08) rotate(160deg); }
}
@keyframes garden-node-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}
@keyframes garden-impact-ring {
  0% { opacity: 1; transform: scale(.25); }
  100% { opacity: 0; transform: scale(8.5); }
}
@keyframes garden-impact-ring-alt {
  0% { opacity: .86; transform: rotate(22deg) scale(.3); }
  100% { opacity: 0; transform: rotate(88deg) scale(11); }
}
@keyframes garden-impact-shard-a {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate3d(92px, -64px, 0) rotate(210deg) scale(.25); }
}
@keyframes garden-impact-shard-b {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate3d(-76px, 86px, 0) rotate(-170deg) scale(.2); }
}
@keyframes garden-impact-jolt {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14% { transform: translate3d(-4px, 2px, 0); }
  31% { transform: translate3d(3px, -1px, 0); }
  50% { transform: translate3d(-2px, 1px, 0); }
  70% { transform: translate3d(1px, -.5px, 0); }
}
@keyframes garden-root-copy {
  0% { opacity: 0; transform: translate3d(0, 36px, 0); filter: blur(8px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes garden-root-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16) rotate(-18deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.5) rotate(34deg); }
}
@keyframes garden-system-skew {
  0% { transform: none; }
  18% { transform: translate3d(-9px, 0, 0) skewX(-3deg); }
  38% { transform: translate3d(7px, 0, 0) skewX(2deg); }
  64% { transform: translate3d(-2px, 0, 0); }
  100% { transform: none; }
}
@keyframes garden-world-buckle {
  0% { transform: none; }
  16% { transform: translate3d(0, 5px, 0) scale(.994, 1.006); }
  34% { transform: translate3d(-4px, -2px, 0) scale(1.004, .996); }
  62% { transform: translate3d(2px, 0, 0); }
  100% { transform: none; }
}
@keyframes garden-outro-signal { 50% { opacity: .34; box-shadow: 0 0 7px color-mix(in srgb, var(--moss-bright) 24%, transparent); } }
@keyframes garden-route { to { stroke-dashoffset: -380; } }
@keyframes garden-outro-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  18% { opacity: .86; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(15); }
}

/* V28 easter egg: a single low-resolution rain scene. The canvas owns the
   atmosphere and interaction; CSS only frames it like a worn pixel display. */
.garden-overgrowth {
  --pixel-ink: #050607;
  --pixel-night: #0b0e0f;
  --pixel-slate: #202728;
  --pixel-mist: #3b4745;
  --pixel-moss: #758374;
  --pixel-light: #c9d0c6;
  color: var(--pixel-light);
  background: var(--pixel-ink);
  cursor: crosshair;
  transition: opacity 680ms cubic-bezier(.4, 0, 1, 1), visibility 0s linear 680ms;
}
.garden-overgrowth::before,
.garden-overgrowth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: none;
  clip-path: none;
}
.garden-overgrowth::before {
  z-index: 0;
  background:
    radial-gradient(ellipse at 76% 20%, rgba(201, 208, 198, .07), transparent 0 24%),
    linear-gradient(180deg, #0b0e0f, #070909 52%, #030404);
  opacity: 1;
}
.garden-overgrowth::after {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.015), transparent 24% 76%, rgba(255,255,255,.012)),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .15) 3px 4px);
  opacity: .3;
}
.garden-overgrowth.is-active {
  touch-action: none;
  cursor: none;
  transition: opacity 260ms steps(5, end), visibility 0s;
}
.garden-overgrowth.is-active::before,
.garden-overgrowth.is-active::after { animation: none; clip-path: none; }
.garden-overgrowth.is-receding {
  opacity: 0;
  pointer-events: none;
  transition-duration: 420ms;
}
.garden-overgrowth-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
  transition: opacity 420ms steps(6, end);
}
.garden-overgrowth.is-receding .garden-overgrowth-field { opacity: 0; }
.garden-overgrowth-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .2) 72%, rgba(0, 0, 0, .66) 110%),
    linear-gradient(180deg, rgba(4, 6, 6, .1), transparent 16% 76%, rgba(2, 3, 3, .34));
  pointer-events: none;
}
.garden-overgrowth-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(211, 218, 207, .012) 7px 8px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(211, 218, 207, .01) 7px 8px);
  opacity: .76;
  transform: none;
}
.garden-overgrowth-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, transparent 0 43%, rgba(226, 230, 221, .035) 49%, transparent 55% 100%);
  background-size: 230% 100%;
  mix-blend-mode: screen;
  opacity: 0;
}
.garden-overgrowth.is-active .garden-overgrowth-veil::before { animation: none; }
.garden-overgrowth.is-active .garden-overgrowth-veil::after {
  animation: garden-pixel-glass 5.8s steps(14, end) .5s both;
}
.garden-overgrowth-copy {
  left: clamp(24px, 5.5vw, 96px);
  bottom: clamp(30px, 6vh, 68px);
  z-index: 5;
  gap: 9px;
  width: min(690px, calc(100vw - 48px));
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 8px, 0);
}
.garden-overgrowth-copy small {
  color: var(--pixel-moss);
  font: 8px/1.4 var(--pixel);
  letter-spacing: .18em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .72);
}
.garden-overgrowth-copy strong {
  max-width: 11em;
  color: var(--pixel-light);
  font: 400 clamp(36px, 5.4vw, 72px)/.96 var(--pixel);
  letter-spacing: .035em;
  text-wrap: balance;
  text-shadow: 3px 3px 0 #090c0c, 5px 5px 0 rgba(117, 131, 116, .12);
}
.garden-overgrowth-copy > span {
  max-width: 520px;
  color: rgba(201, 208, 198, .58);
  font: 9px/1.7 var(--mono);
  letter-spacing: .09em;
}
.garden-overgrowth-copy button {
  width: max-content;
  margin-top: 8px;
  padding: 8px 0 7px;
  color: rgba(201, 208, 198, .58);
  border-bottom-color: rgba(117, 131, 116, .34);
  font-family: var(--pixel);
  cursor: pointer;
}
.garden-overgrowth-copy button b { transition: transform 160ms steps(3, end); }
@media (hover: hover) and (pointer: fine) {
  .garden-overgrowth-copy button:hover { color: var(--pixel-light); border-color: var(--pixel-moss); }
  .garden-overgrowth-copy button:hover b { transform: translateX(3px) rotate(90deg); }
}
.garden-overgrowth-copy button:focus-visible { outline-color: var(--pixel-light); }
.garden-overgrowth.is-active .garden-overgrowth-copy {
  animation: garden-pixel-copy 420ms steps(7, end) .18s both;
}

@keyframes garden-pixel-copy {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, 8px, 0); }
  42% { opacity: 1; }
  to { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0); }
}
@keyframes garden-pixel-glass {
  0%, 18% { opacity: 0; background-position: 100% 0; }
  24% { opacity: .72; }
  54%, 100% { opacity: 0; background-position: -100% 0; }
}

/* V29 turns the vignette into a playable one-level game. Keep the HUD quiet so
   the world, checkpoints and gate remain the only visual hierarchy. */
.garden-overgrowth .garden-overgrowth-copy {
  top: clamp(18px, 4vh, 44px);
  bottom: auto;
  gap: 6px;
  width: min(520px, calc(100vw - 48px));
}
.garden-overgrowth .garden-overgrowth-copy strong {
  max-width: none;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1;
}
.garden-overgrowth .garden-overgrowth-copy > span {
  max-width: 470px;
  font-size: 8px;
}
.garden-overgrowth .garden-overgrowth-copy button {
  margin-top: 4px;
  padding-block: 6px;
  font-size: 8px;
}
.garden-overgrowth.is-game-won .garden-overgrowth-copy small {
  color: var(--pixel-light);
  text-shadow: 0 0 9px rgba(201, 208, 198, .22);
}
.garden-relic-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 7vh, 72px);
  z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  width: min(520px, calc(100vw - 48px));
  padding: 14px 18px 13px;
  color: var(--pixel-light);
  background: rgba(5, 7, 7, .9);
  border: 1px solid rgba(117, 131, 116, .72);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38), inset 0 0 0 2px rgba(201, 208, 198, .035);
  opacity: 0;
  transform: translate3d(-50%, 10px, 0) scale(.98);
  transition: opacity 180ms steps(4, end), transform 240ms cubic-bezier(.2, .8, .2, 1), border-color 180ms ease;
  pointer-events: none;
}
.garden-relic-panel[hidden] { display: none; }
.garden-relic-panel.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}
.garden-relic-panel small {
  grid-column: 1 / -1;
  color: var(--pixel-moss);
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .18em;
}
.garden-relic-panel strong {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: center;
  min-width: 4.2em;
  color: var(--pixel-light);
  font: 400 clamp(24px, 3vw, 34px)/1 var(--pixel);
  letter-spacing: .08em;
}
.garden-relic-panel span {
  grid-column: 2;
  align-self: end;
  color: rgba(228, 230, 223, .9);
  font: 500 13px/1.5 var(--sans);
}
.garden-relic-panel b {
  grid-column: 2;
  color: var(--pixel-moss);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .1em;
}
.garden-relic-panel em {
  grid-column: 1 / -1;
  min-height: 1em;
  color: rgba(201, 208, 198, .48);
  font: normal 9px/1.4 var(--mono);
  letter-spacing: .08em;
}
.garden-relic-panel.is-confirmed {
  border-color: rgba(228, 230, 223, .88);
  transform: translate3d(-50%, -3px, 0) scale(1.015);
}
.garden-relic-panel.is-compact {
  width: auto;
  min-width: min(420px, calc(100vw - 48px));
  padding-block: 9px;
  opacity: .86;
}
.garden-relic-panel.is-compact strong,
.garden-relic-panel.is-compact span,
.garden-relic-panel.is-compact b { display: none; }
.garden-relic-panel.is-compact small,
.garden-relic-panel.is-compact em { grid-column: 1 / -1; }
.garden-relic-panel.is-compact em { color: rgba(201, 208, 198, .72); }
.garden-overgrowth.is-active .garden-overgrowth-veil::after {
  animation: none;
  opacity: .055;
}
.garden-game-controls {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 7;
  display: none;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(3, 44px);
  gap: 6px;
  transform: translateX(-50%);
}
.garden-game-controls button {
  display: grid;
  width: 48px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: rgba(201, 208, 198, .72);
  background: rgba(7, 10, 9, .64);
  border: 1px solid rgba(117, 131, 116, .38);
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(5, 6, 7, .6);
  font: 14px/1 var(--pixel);
  touch-action: none;
  user-select: none;
  cursor: pointer;
}
.garden-game-controls [data-game-up] { grid-column: 2; grid-row: 1; }
.garden-game-controls [data-game-left] { grid-column: 1; grid-row: 2; }
.garden-game-controls [data-game-shot] {
  grid-column: 2;
  grid-row: 2;
  color: var(--pixel-light);
  background: rgba(117, 131, 116, .18);
  font-size: 17px;
  text-shadow: 0 0 8px rgba(201, 208, 198, .35);
}
.garden-game-controls [data-game-right] { grid-column: 3; grid-row: 2; }
.garden-game-controls [data-game-down] { grid-column: 2; grid-row: 3; }
.garden-game-controls button:active {
  color: var(--pixel-ink);
  background: var(--pixel-moss);
  transform: translateY(2px);
}
.garden-game-controls button:focus-visible {
  outline: 1px solid var(--pixel-light);
  outline-offset: 3px;
}
@media (hover: none), (pointer: coarse) {
  .garden-overgrowth.is-active .garden-game-controls { display: grid; }
  .garden-overgrowth .garden-overgrowth-copy {
    top: 18px;
    left: 18px;
    width: calc(100vw - 36px);
  }
  .garden-overgrowth .garden-overgrowth-copy strong { font-size: clamp(25px, 8vw, 38px); }
  .garden-overgrowth .garden-overgrowth-copy > span { max-width: 300px; }
  .garden-relic-panel {
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 146px);
    width: calc(100vw - 36px);
    padding: 11px 13px;
  }
  .garden-relic-panel strong { font-size: 22px; }
  .garden-relic-panel span { font-size: 12px; }
}
html.garden-lite-motion .garden-overgrowth.is-active .garden-game-controls { display: none; }
@media (prefers-reduced-motion: reduce) {
  .garden-overgrowth.is-active .garden-game-controls { display: none; }
}

@media (max-width: 1023px) {
  .folio { --page: min(100% - 48px, 900px); }
  .folio-wordmark { width: calc(100vw - 64px); height: clamp(80px, 12vw, 124px); font-size: clamp(62px, 8.4vw, 96px); }
  .folio-cover-fragment { right: 64px; width: min(490px, 48vw); }
  .folio-explore-grid { grid-template-columns: 310px minmax(0, 1fr); gap: 36px; }
  .folio-profile { max-width: 310px; }
  .folio-directory-item { padding-inline: 24px 58px; }
  .folio-directory-item strong { font-size: clamp(30px, 4.2vw, 44px); }
  .folio-directory-item code { display: none; }
  .folio-articles-grid { grid-template-columns: minmax(250px, .52fr) minmax(0, 1.48fr); gap: 48px; }
  .folio-article-console { padding-left: 28px; }
  .folio-article-stream li > a { padding-right: 76px; }
  .folio-article-stream li h3 { font-size: clamp(25px, 3.4vw, 36px); }
  .folio-article-stream li span { font-size: 6px; }
}

@media (max-width: 768px) {
  .folio { --page: calc(100% - 36px); }
  .is-home .g-nav-inner { min-height: 54px; }
  .is-home .g-nav-links li:nth-child(3), .is-home .g-nav-links li:nth-child(4) { display: none; }
  .is-home .g-nav-logo, .is-home .g-nav-links a { font-size: 9px; }
  .folio-command { width: calc(100vw - 24px); max-height: calc(100svh - 24px); }
  .folio-command-shell { max-height: calc(100svh - 24px); }
  .folio-command-head { min-height: 40px; padding-inline: 13px; }
  .folio-command-search { min-height: 66px; padding-inline: 14px; }
  .folio-command-search input { height: 64px; font-size: 15px; }
  .folio-command-search kbd { display: none; }
  .folio-command-status { padding-inline: 14px; }
  .folio-command-results { padding-inline: 5px; }
  .folio-command-results a { grid-template-columns: minmax(0, 1fr) 22px; grid-template-rows: auto auto; gap: 4px 9px; min-height: 68px; padding: 10px 11px; }
  .folio-command-results small { grid-column: 1; grid-row: 1; }
  .folio-command-results strong { grid-column: 1; grid-row: 2; font-size: 14px; }
  .folio-command-results span { display: none; }
  .folio-command-results b { grid-column: 2; grid-row: 1 / 3; }
  .folio-command-foot { justify-content: space-between; gap: 8px; padding-inline: 13px; }
  .folio-command-foot span:first-child { display: none; }
  .folio-masthead { top: 72px; gap: 10px; }
  .folio-masthead span, .garden-hud-vitals { display: none; }
  .folio-cover { min-height: 100svh; }
  .folio-wordmark { top: 34%; width: calc(100vw - 24px); height: 72px; font-size: clamp(36px, 10.3vw, 50px); letter-spacing: -.02em; }
  .folio-cover-copy { bottom: 228px; }
  .folio-cover-role { margin-bottom: 17px; font-size: 13px; }
  .folio-cover-terminal { font-size: 8px; }
  .folio-cover-terminal span { display: none; }
  .folio-cover-fragment { left: 17px; right: 17px; bottom: 26px; width: auto; min-height: 204px; }
  .folio-cover-fragment::before { left: auto; right: 0; top: 29px; font-size: 58px; }
  .folio-quote-film { min-height: 198px; padding: 15px 7px 31px 30px; transform: translate3d(0, 0, 0) rotateZ(-.15deg); }
  .folio-quote-film::before { left: 5px; top: -8px; bottom: 27px; width: 1px; }
  .folio-quote-film::after { left: 2px; top: 27px; width: 6px; height: 6px; }
  .folio-quote-registration { display: none; }
  .folio-cover-fragment blockquote { min-height: 78px; margin: 25px 0 16px; font-size: clamp(18px, 4.7vw, 21px); line-height: 1.6; letter-spacing: .02em; }
  .folio-cover-fragment blockquote::before { left: -30px; width: 15px; }
  .folio-quote-meta { gap: 8px; margin: 0; }
  .folio-quote-meta strong { font-size: 10px; }
  .folio-quote-meta cite { font-size: 6px; }
  .folio-quote-rail { right: 0; top: auto; bottom: 5px; gap: 14px; width: auto; }
  .folio-quote-next { width: auto; height: auto; min-height: 24px; }
  .folio-quote-progress { left: 30px; right: 69px; bottom: 5px; }
  .folio-cover-side { display: none; }
  .folio-cover-scroll { bottom: 18px; left: 20px; transform: none; }
  .folio-cover-scroll span { display: none; }
  .folio-explore { min-height: auto; padding: 72px 0 78px; }
  .folio-explore-traces { opacity: .58; }
  .folio-explore-grid { grid-template-columns: 1fr; gap: 84px; min-height: 0; }
  .folio-profile { max-width: none; padding: 28px 0 0; }
  .folio-profile::before { top: 12px; bottom: 72px; }
  .folio-profile::after { top: 44px; height: 30%; }
  .folio-profile-status, .folio-profile-id, .folio-profile dl, .folio-profile nav { margin-left: 28px; }
  .folio-profile-clock { position: relative; left: auto; bottom: auto; margin: 34px 0 0 28px; }
  .folio-directory-ghost { top: -26px; font-size: 66px; }
  .folio-directory > header h2, .folio-directory > header span { font-size: 8px; }
  .folio-directory-item, .folio-directory-item-2, .folio-directory-item-3, .folio-directory-item-4 { width: 100%; min-height: 126px; margin-left: 0; padding: 20px 18px; }
  .folio-directory-item strong { font-size: clamp(30px, 10vw, 42px); }
  .folio-directory-item em { max-width: 100%; font-size: 8px; }
  .folio-articles { min-height: auto; padding: 74px 0 90px; }
  .folio-articles-traces { opacity: .62; }
  .folio-articles::after { top: 28px; font-size: 82px; }
  .folio-articles-grid { grid-template-columns: 1fr; gap: 76px; min-height: 0; }
  .folio-article-console { min-height: 560px; padding-left: 28px; }
  .folio-contribution-heading h3 { font-size: 21px; }
  .folio-contribution-grid { gap: 2px; height: 76px; }
  .folio-article-stream > header h2 { font-size: 8px; }
  .folio-article-stream li, .folio-article-stream li:nth-child(2), .folio-article-stream li:nth-child(3) { width: 100%; margin-left: 0; }
  .folio-article-stream li > a { min-height: 150px; padding: 25px 48px 25px 0; }
  .folio-article-stream li h3 { margin-block: 10px 8px; font-size: clamp(26px, 8vw, 36px); }
  .folio-article-stream li p { font-size: 10px; white-space: normal; }
  .folio-article-stream li span { right: 0; writing-mode: vertical-rl; }
  .folio-articles-baseline { right: 18px; bottom: 18px; }
  .folio-outro { min-height: 520px; }
  .folio-outro h2 { font-size: clamp(38px, 10.5vw, 56px); letter-spacing: -.075em; }
  .folio-outro-meta { align-items: flex-start; flex-direction: column; }
  .folio-outro-actions { width: 100%; justify-content: space-between; }
  .garden-boot::before { inset: 10px; }
  .garden-boot::after { left: 10px; right: 10px; }
  .garden-boot-omen { width: calc(100vw - 42px); }
  .garden-boot-title { height: clamp(58px, 17vw, 86px); font-size: clamp(45px, 13.8vw, 72px); letter-spacing: -.055em; }
  .garden-boot-eyebrow { margin-bottom: 24px; font-size: 7px; }
  .garden-boot-eyebrow b { font-size: 7px; }
  .garden-boot-sight { left: 0; top: 48%; transform: translate3d(-10px, 0, 0) rotate(-9deg) scale(.78); transform-origin: left center; }
  .garden-boot.is-phase-two .garden-boot-sight,
  .garden-boot.is-ready .garden-boot-sight { transform: translate3d(0, 0, 0) rotate(-9deg) scale(.78); }
  .garden-boot-readout { margin-top: 32px; }
  .garden-boot-actions { flex-wrap: wrap; }
  .garden-corner { display: none; }
  .garden-hud-scroll { right: 7px; }
  .garden-pet { left: 11px; right: auto; bottom: 14px; }
  .garden-pet button { width: 50px; height: 50px; }
  .garden-pet > p { max-width: 190px; }
  .garden-overgrowth { cursor: default; }
  .garden-overgrowth-copy { left: 20px; bottom: 38px; width: calc(100vw - 40px); gap: 9px; }
  .garden-overgrowth-copy strong { font-size: clamp(32px, 10.5vw, 48px); }
  .garden-overgrowth-copy > span { max-width: 290px; font-size: 8px; }
}

@media (max-width: 480px) {
  .is-home .g-nav-links li:not(:last-child) { display: none; }
  .folio-wordmark { width: calc(100vw - 18px); font-size: clamp(34px, 10.5vw, 44px); }
  .folio-wordmark-disc > b { width: 2px; height: 2px; }
  .folio-quote-film { padding-left: 27px; padding-right: 3px; }
  .folio-quote-head > span { gap: 8px; }
  .folio-quote-head i { font-size: 5px; }
  .folio-quote-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .folio-quote-progress { left: 27px; right: 66px; }
}

html.garden-lite-motion .garden-particles,
html.garden-lite-motion .garden-scanlines,
html.garden-lite-motion .garden-noise,
html.garden-lite-motion .garden-cursor,
html.garden-lite-motion .garden-overgrowth-veil::before,
html.garden-lite-motion .folio-field-motion { display: none; }
html.garden-lite-motion .garden-boot *,
html.garden-lite-motion .garden-boot *::before,
html.garden-lite-motion .garden-boot *::after { animation: none !important; }
html.garden-lite-motion .folio-cover-photo > img,
html.garden-lite-motion .folio-world-etchings,
html.garden-lite-motion .folio-explore-traces g,
html.garden-lite-motion .folio-articles-traces g { animation: none; }
html.garden-lite-motion .garden-overgrowth *,
html.garden-lite-motion .garden-overgrowth::before,
html.garden-lite-motion .garden-overgrowth::after,
html.garden-lite-motion.garden-overrun .g-nav,
html.garden-lite-motion.garden-overrun .folio-cover,
html.garden-lite-motion.garden-overrun .folio-explore,
html.garden-lite-motion.garden-overrun .folio-articles,
html.garden-lite-motion.garden-overrun .folio-outro { animation: none !important; transition: none !important; }
html.garden-lite-motion .garden-overgrowth.is-active::after { opacity: .32; clip-path: circle(145% at 68% 56%); }
html.garden-lite-motion .garden-overgrowth.is-active .garden-overgrowth-copy { opacity: 1; clip-path: none; transform: none; }
html.garden-lite-motion.garden-cursor-on,
html.garden-lite-motion.garden-cursor-on a,
html.garden-lite-motion.garden-cursor-on button { cursor: auto !important; }
html.garden-lite-motion .folio-wordmark-main { transform: none; }
html.garden-lite-motion .folio-wordmark-ghost { transform: translate3d(4px, 5px, 0); }
html.garden-lite-motion .folio-wordmark-ray { display: none; }

@media (prefers-reduced-motion: reduce), (hover: none) {
  .garden-cursor { display: none; }
  html.garden-cursor-on, html.garden-cursor-on a, html.garden-cursor-on button { cursor: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .folio *, .folio *::before, .folio *::after { scroll-behavior: auto !important; }
  .folio .reveal-ready, .folio .reveal-ready.reveal-visible { opacity: 1; transform: none; transition: none; }
  .garden-boot { transition-duration: .01ms; transition-delay: 0s; }
  .garden-boot *, .garden-boot *::before, .garden-boot *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .garden-boot::after, .garden-scanlines, .garden-noise, .garden-ripple, .garden-pet.is-happy button, .garden-overgrowth.is-active, .folio-masthead a i, .folio-quote-progress i, .folio-quote-exposure, .folio-cover-scroll i, .folio-cover-photo > img, .folio-world::before, .folio-world-etchings, .folio-explore-traces g, .folio-articles-traces g, .folio-contribution-heading > span, .folio-outro-track b, .folio-outro h2 span, .folio-outro-pulse { animation: none; }
  .folio-quote-film { transform: none !important; transition: none; }
  .folio-outro-glyph { transform: none !important; text-shadow: none; will-change: auto; }
  .folio-outro-pulse { display: none; }
  .garden-particles, .folio-cover-lens { display: none; }
  .folio-field-motion { display: none; }
  .folio-wordmark-main { transform: none !important; }
  .folio-wordmark-ghost { transform: translate3d(4px, 5px, 0) !important; }
  .folio-wordmark-ray { display: none; }
  .folio-contribution-grid span, .folio-calendar-days button { transition: none; }
  .folio-contribution-grid span.is-pointed, .folio-contribution-grid span.is-near, .folio-calendar-days button.is-pointed, .folio-calendar-days button.is-near { transform: none !important; }
  .garden-overgrowth *, .garden-overgrowth::before, .garden-overgrowth::after { animation: none !important; transition: none !important; }
  .garden-overgrowth.is-active::before { opacity: .32; transform: none; }
  .garden-overgrowth.is-active::after { opacity: .32; clip-path: circle(145% at 68% 56%); transform: none; }
  .garden-overgrowth.is-active .garden-overgrowth-copy { opacity: 1; clip-path: none; transform: none; }
  .garden-overgrowth-veil::before { display: none; }
  html.garden-overrun .g-nav,
  html.garden-overrun .folio-cover,
  html.garden-overrun .folio-explore,
  html.garden-overrun .folio-articles,
  html.garden-overrun .folio-outro { animation: none !important; }
}

/* Light field: the same system wakes beneath the white cat, not a second design. */
:root[data-resolved-theme="light"] .folio {
  --void: #d6dcd4;
  --carbon: #cbd2ca;
  --panel: rgba(225, 231, 223, .82);
  --bone: #222a24;
  --dim: #58645b;
  --moss: #496f52;
  --moss-bright: #2f5a39;
  --rust: #86593f;
  --line: rgba(48, 63, 50, .17);
  --line-strong: rgba(48, 63, 50, .36);
}

:root[data-resolved-theme="light"] .is-home .g-nav {
  background: rgba(214, 220, 212, .84);
  border-bottom-color: rgba(48, 63, 50, .14);
  box-shadow: 0 18px 45px rgba(42, 56, 44, .05);
}
:root[data-resolved-theme="light"] .folio-photo-light,
:root[data-resolved-theme="light"] .garden-pet-light { display: block; }
:root[data-resolved-theme="light"] .folio-photo-dark,
:root[data-resolved-theme="light"] .garden-pet-dark { display: none; }
:root[data-resolved-theme="light"] .folio-cover-photo > img {
  opacity: 0;
  filter: grayscale(.84) saturate(.45) contrast(.9) brightness(1.08);
}
:root[data-resolved-theme="light"] .folio-world {
  --world-rain-opacity-light: .16;
  background: #d4dad2;
}
:root[data-resolved-theme="light"] .folio-world::before {
  opacity: .4;
  filter: grayscale(.94) contrast(.8) brightness(.96);
  mix-blend-mode: multiply;
}
:root[data-resolved-theme="light"] .folio-world::after {
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(214, 220, 212, .02) 0 20%, rgba(210, 217, 209, .24) 64%, rgba(199, 207, 198, .62) 112%),
    linear-gradient(90deg, rgba(204, 212, 203, .5), transparent 23% 77%, rgba(201, 209, 200, .54)),
    linear-gradient(rgba(48, 63, 50, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 63, 50, .032) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(48, 63, 50, .014) 7px 8px);
  background-size: auto, auto, 80px 80px, 80px 80px, 8px 8px;
}
:root[data-resolved-theme="light"] .folio-world-etchings { color: rgba(48, 63, 50, .13); mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-cover-lens { filter: grayscale(.3) saturate(.55) contrast(.94); }
:root[data-resolved-theme="light"] .folio-cover-lens img { opacity: .6; }
:root[data-resolved-theme="light"] .folio-cover-shade {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(214, 220, 212, 0) 0 22%, rgba(210, 217, 209, .1) 62%, rgba(196, 205, 196, .42) 100%),
    linear-gradient(180deg, rgba(214, 220, 212, .02), rgba(208, 215, 207, .06) 56%, rgba(193, 202, 193, .46));
}
:root[data-resolved-theme="light"] .folio-cover::after { color: rgba(32, 39, 32, .28); }
:root[data-resolved-theme="light"] .folio-wordmark {
  --wordmark-ink: #202720;
  --wordmark-ghost-ink: rgba(44, 72, 49, .14);
  --wordmark-omen: rgba(167, 201, 173, .82);
  --wordmark-void: rgba(4, 7, 5, .96);
  --wordmark-chip-rest: .4;
  --wordmark-chip-tight: .5;
  --wordmark-chip-peak: .7;
  --wordmark-chip-tail: .46;
  --wordmark-ghost-opacity: .48;
  --wordmark-ghost-peak: .68;
}
:root[data-resolved-theme="light"] .folio-wordmark-main { text-shadow: 1px 2px 0 rgba(49, 94, 60, .045), 0 12px 34px rgba(42, 56, 44, .09); }
:root[data-resolved-theme="light"] .folio-wordmark-disc { box-shadow: 0 0 0 1px rgba(49, 94, 60, .13), 0 0 22px rgba(75, 112, 79, .18); }
:root[data-resolved-theme="light"] .folio-wordmark-ray { mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-cover-terminal { color: rgba(42, 56, 44, .56); }
:root[data-resolved-theme="light"] .folio-command {
  color: #243027;
  background: rgba(226, 232, 225, .97);
  border-color: rgba(49, 94, 60, .28);
  box-shadow: 0 34px 100px rgba(42, 56, 44, .3), inset 0 1px 0 rgba(255, 255, 255, .54);
}
:root[data-resolved-theme="light"] .folio-command::backdrop { background: rgba(38, 47, 39, .48); }
:root[data-resolved-theme="light"] .folio-command-search input,
:root[data-resolved-theme="light"] .folio-command-results a,
:root[data-resolved-theme="light"] .folio-command-empty strong { color: #243027; }
:root[data-resolved-theme="light"] .folio-command-search kbd,
:root[data-resolved-theme="light"] .folio-command-foot kbd { background: rgba(49, 94, 60, .035); }
:root[data-resolved-theme="light"] .folio-quote-film::before {
  background: linear-gradient(transparent, rgba(49, 94, 60, .62) 20% 71%, transparent);
  box-shadow: 3px 0 22px rgba(49, 94, 60, .1);
}
:root[data-resolved-theme="light"] .folio-quote-exposure { background: linear-gradient(90deg, transparent 15%, rgba(49, 94, 60, .03) 35%, rgba(49, 94, 60, .2) 49%, rgba(49, 94, 60, .06) 58%, transparent 78%); mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-cover-side,
:root[data-resolved-theme="light"] .folio-cover-scroll { color: rgba(42, 56, 44, .46); }

:root[data-resolved-theme="light"] .folio-explore,
:root[data-resolved-theme="light"] .folio-articles {
  background: rgba(214, 221, 213, .42);
  border-top-color: var(--line);
}
:root[data-resolved-theme="light"] .folio-outro {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(86, 106, 91, .09), transparent 46%),
    rgba(227, 232, 224, .84);
}
:root[data-resolved-theme="light"] .folio-pixel-screen {
  background: #c9d2ca;
  outline-color: rgba(63, 82, 69, .5);
  box-shadow: 0 24px 54px rgba(43, 57, 47, .18), 0 0 0 8px rgba(78, 96, 83, .14);
}
:root[data-resolved-theme="light"] .folio-pixel-screen:active {
  box-shadow: 0 18px 42px rgba(43, 57, 47, .16), 0 0 0 8px rgba(78, 96, 83, .18);
}
:root[data-resolved-theme="light"] .folio-pixel-screen .pixel-sky { background: #cbd3cc; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-sky { background: #d5dbd4; }
:root[data-resolved-theme="light"] .pixel-sky i { background: #52675a; opacity: .34; }
:root[data-resolved-theme="light"] .pixel-atmosphere {
  opacity: .18;
  background: repeating-linear-gradient(165deg, transparent 0 11%, rgba(75, 104, 84, .2) 12% 13%, transparent 14% 22%);
}
:root[data-resolved-theme="light"] .pixel-moon {
  background: #eef1e9;
  box-shadow: 8px 4px 0 #87968a, 0 0 24px rgba(88, 112, 94, .14);
}
:root[data-resolved-theme="light"] .pixel-moon i { background: #a8b3aa; box-shadow: -13px 11px 0 #b8c1b9, 4px 19px 0 #9eaaa0; }
:root[data-resolved-theme="light"] .pixel-cloud { background: #9eaba1; opacity: .46; }
:root[data-resolved-theme="light"] .pixel-rain {
  opacity: .13;
  background: repeating-linear-gradient(112deg, transparent 0 21px, #617568 22px 23px, transparent 24px 45px);
}
:root[data-resolved-theme="light"] .pixel-ridge-back { background: #87958a; }
:root[data-resolved-theme="light"] .pixel-ridge-front { background: #68786d; }
:root[data-resolved-theme="light"] .pixel-lake { background: #91a096; border-top-color: #667b6c; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-lake { background: #9eada3; border-color: #718777; }
:root[data-resolved-theme="light"] .pixel-lake i,
:root[data-resolved-theme="light"] .pixel-lake b,
:root[data-resolved-theme="light"] .pixel-lake em { background: #61786a; }
:root[data-resolved-theme="light"] .pixel-lighthouse::before {
  background: #b2bcb4;
  box-shadow: inset 6px 0 0 #86958a, inset -5px 0 0 #647568;
}
:root[data-resolved-theme="light"] .pixel-lighthouse i { background: #e3e9e0; border-color: #4d5f52; box-shadow: 0 0 0 3px #829087; }
:root[data-resolved-theme="light"] .pixel-lighthouse b,
:root[data-resolved-theme="light"] .pixel-lighthouse em { background: #4b5d50; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-lamp-off .pixel-lighthouse i { background: #839188; box-shadow: 0 0 0 3px #6e7e72; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-signal-active .pixel-lighthouse i { background: #f1f3eb; box-shadow: 0 0 18px rgba(79, 119, 88, .3), 0 0 0 3px #74877a; }
:root[data-resolved-theme="light"] .pixel-beam {
  background: linear-gradient(90deg, rgba(240, 244, 235, .04), rgba(222, 234, 220, .72));
  mix-blend-mode: screen;
}
:root[data-resolved-theme="light"] .pixel-reflection { background: repeating-linear-gradient(180deg, #dce7da 0 3px, transparent 3px 9px); opacity: .62; }
:root[data-resolved-theme="light"] .pixel-shore { background: #4c5e51; }
:root[data-resolved-theme="light"] .pixel-shore i,
:root[data-resolved-theme="light"] .pixel-shore b { background: #374a3d; }
:root[data-resolved-theme="light"] .pixel-shore i { box-shadow: 11px 8px 0 #374a3d, 24px -3px 0 #374a3d; }
:root[data-resolved-theme="light"] .pixel-shore b { box-shadow: -14px 5px 0 #374a3d, -27px -5px 0 #374a3d; }
:root[data-resolved-theme="light"] .pixel-frame { border-color: #4d5e52; box-shadow: inset 0 0 0 2px #aab5ad; }
:root[data-resolved-theme="light"] .pixel-frame::before,
:root[data-resolved-theme="light"] .pixel-frame::after { background: #738378; }
:root[data-resolved-theme="light"] .pixel-scan { background: #405447; }
:root[data-resolved-theme="light"] .folio-pixel-bleed {
  opacity: .64;
  -webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 58%, #000 34%, rgba(0, 0, 0, .76) 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 72% at 50% 58%, #000 34%, rgba(0, 0, 0, .76) 65%, transparent 100%);
}
:root[data-resolved-theme="light"] .folio-pixel-bleed-mist { opacity: .3; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-mist > i,
:root[data-resolved-theme="light"] .folio-pixel-bleed-mist > b { background: rgba(93, 112, 98, .38); }
:root[data-resolved-theme="light"] .folio-pixel-bleed-water {
  opacity: .48;
  border-top-color: rgba(83, 105, 89, .36);
  background: linear-gradient(180deg, rgba(115, 134, 120, .38), rgba(159, 171, 161, .12));
}
:root[data-resolved-theme="light"] .folio-pixel-bleed-water > i,
:root[data-resolved-theme="light"] .folio-pixel-bleed-water > b,
:root[data-resolved-theme="light"] .folio-pixel-bleed-water > em { background: rgba(75, 102, 82, .5); }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds { opacity: .5; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > i,
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > b,
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > em { background: #4d6152; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > i { box-shadow: 16px 24px 0 #5d7062, 33px -7px 0 #4d6152, 51px 31px 0 #687a6d; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > b { box-shadow: 20px 29px 0 #5d7062, 41px 12px 0 #4d6152; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > em { box-shadow: 15px -18px 0 #5d7062, 31px 18px 0 #4d6152; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > i::after,
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > b::after,
:root[data-resolved-theme="light"] .folio-pixel-bleed-reeds > em::after { background: #607365; box-shadow: 8px 29px 0 #718176, -5px 61px 0 #53675a; }
:root[data-resolved-theme="light"] .folio-pixel-bleed-fireflies > i { background: #557a5e; box-shadow: 0 0 7px rgba(68, 111, 77, .22); }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) { background: #b7c1b9; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-sky { background: #acb8af; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-sky i { opacity: .16; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-atmosphere { opacity: .3; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-moon {
  opacity: .68;
  background: #ced5ce;
  box-shadow: 8px 4px 0 #78887d, 0 0 0 rgba(88, 112, 94, 0);
}
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-cloud-a { opacity: .68; transform: none; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-cloud-b { opacity: .5; transform: none; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-rain { opacity: .27; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-ridge-back { background: #748278; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-ridge-front { background: #58695e; }
:root[data-resolved-theme="light"] .folio-pixel-screen:not(.is-clear) .pixel-lake { background: #7c8d82; border-top-color: #566d5e; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear {
  background: #dce2db;
  box-shadow: 0 25px 58px rgba(55, 73, 60, .14), 0 0 0 8px rgba(95, 115, 100, .12);
}
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-sky { background: #e3e7e0; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-sky i { opacity: .62; background: #637a69; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-atmosphere { opacity: .07; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-moon {
  opacity: 1;
  background: #f5f1dc;
  box-shadow: 8px 4px 0 #a7b1a7, 0 0 30px rgba(166, 156, 96, .2);
}
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-cloud-a,
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-cloud-b { opacity: .05; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-rain { opacity: 0; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-horizon-glow {
  opacity: .82;
  background: linear-gradient(180deg, transparent, rgba(218, 225, 195, .58));
}
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-ridge-back { background: #a2aea5; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-ridge-front { background: #7f9084; }
:root[data-resolved-theme="light"] .folio-pixel-screen.is-clear .pixel-lake { background: #acbbb0; border-top-color: #84998a; }
:root[data-resolved-theme="light"] .folio-pixel-vista:not(.is-clear) .folio-pixel-bleed-sky { opacity: .12; }
:root[data-resolved-theme="light"] .folio-pixel-vista:not(.is-clear) .folio-pixel-bleed-mist { opacity: .43; }
:root[data-resolved-theme="light"] .folio-pixel-vista:not(.is-clear) .folio-pixel-bleed-water { opacity: .4; }
:root[data-resolved-theme="light"] .folio-pixel-vista:not(.is-clear) .folio-pixel-bleed-fireflies { opacity: .16; }
:root[data-resolved-theme="light"] .folio-pixel-vista.is-clear .folio-pixel-bleed-sky { opacity: .56; }
:root[data-resolved-theme="light"] .folio-pixel-vista.is-clear .folio-pixel-bleed-mist { opacity: .1; }
:root[data-resolved-theme="light"] .folio-pixel-vista.is-clear .folio-pixel-bleed-water {
  opacity: .62;
  border-top-color: rgba(91, 119, 97, .28);
  background: linear-gradient(180deg, rgba(151, 167, 155, .34), rgba(193, 201, 193, .1));
}
:root[data-resolved-theme="light"] .folio-pixel-vista.is-clear .folio-pixel-bleed-reeds { opacity: .34; }
:root[data-resolved-theme="light"] .folio-pixel-vista.is-clear .folio-pixel-bleed-fireflies { opacity: .68; }
:root[data-resolved-theme="light"] .folio-explore::before,
:root[data-resolved-theme="light"] .folio-articles::before {
  opacity: .56;
  filter: contrast(.92);
}
:root[data-resolved-theme="light"] .folio-explore-traces,
:root[data-resolved-theme="light"] .folio-articles-traces { color: rgba(48, 63, 50, .16); }
:root[data-resolved-theme="light"] .folio-field-motion { mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-field-sweep {
  background: radial-gradient(circle, rgba(49, 94, 60, .12), rgba(49, 94, 60, .035) 42%, transparent 70%);
}
:root[data-resolved-theme="light"] .folio-field-motion b { border-color: rgba(49, 94, 60, .54); }
:root[data-resolved-theme="light"] .folio-field-motion b::after { border-color: rgba(49, 94, 60, .16); }
:root[data-resolved-theme="light"] .folio-profile-id img { border-color: rgba(48, 63, 50, .48); }
:root[data-resolved-theme="light"] .folio-profile dt { color: rgba(48, 63, 50, .54); }
:root[data-resolved-theme="light"] .folio-directory-ghost,
:root[data-resolved-theme="light"] .folio-articles::after { color: rgba(32, 39, 32, .035); }
:root[data-resolved-theme="light"] .folio-directory-item,
:root[data-resolved-theme="light"] .folio-article-stream li { border-bottom-color: rgba(48, 63, 50, .11); }
:root[data-resolved-theme="light"] .folio-directory-item em,
:root[data-resolved-theme="light"] .folio-article-stream li p { color: rgba(48, 63, 50, .62); }
:root[data-resolved-theme="light"] .folio-directory-item code,
:root[data-resolved-theme="light"] .folio-article-stream li span { color: rgba(48, 63, 50, .34); }

:root[data-resolved-theme="light"] .folio-contribution-months,
:root[data-resolved-theme="light"] .folio-contribution-weekdays,
:root[data-resolved-theme="light"] .folio-contribution-foot,
:root[data-resolved-theme="light"] .folio-calendar-weekdays,
:root[data-resolved-theme="light"] .folio-calendar > footer b { color: rgba(48, 63, 50, .5); }
:root[data-resolved-theme="light"] .folio-contribution-grid span,
:root[data-resolved-theme="light"] .folio-contribution-foot i { background: rgba(48, 63, 50, .1); border-color: rgba(48, 63, 50, .11); }
:root[data-resolved-theme="light"] .folio-contribution-grid span[data-level="1"],
:root[data-resolved-theme="light"] .folio-contribution-foot i[data-level="1"] { background: #b9cbbb; border-color: #a8bca9; }
:root[data-resolved-theme="light"] .folio-contribution-grid span[data-level="2"],
:root[data-resolved-theme="light"] .folio-contribution-foot i[data-level="2"] { background: #8fab93; border-color: #789b80; }
:root[data-resolved-theme="light"] .folio-contribution-grid span[data-level="3"],
:root[data-resolved-theme="light"] .folio-contribution-foot i[data-level="3"] { background: #63866a; border-color: #54795d; box-shadow: 0 0 7px rgba(49, 94, 60, .12); }
:root[data-resolved-theme="light"] .folio-contribution-grid span[data-level="4"],
:root[data-resolved-theme="light"] .folio-contribution-foot i[data-level="4"] { background: #355f40; border-color: #294f34; box-shadow: 0 0 9px rgba(49, 94, 60, .2); }
:root[data-resolved-theme="light"] .folio-contribution-grid span.is-today { outline-color: rgba(32, 39, 32, .72); }
:root[data-resolved-theme="light"] .folio-calendar-days { color: rgba(32, 39, 32, .76); }
:root[data-resolved-theme="light"] .folio-calendar-weekdays { border-bottom-color: rgba(48, 63, 50, .1); }
:root[data-resolved-theme="light"] .folio-calendar-days span.is-outside { color: rgba(48, 63, 50, .2); }
:root[data-resolved-theme="light"] .folio-calendar-days button.is-today,
:root[data-resolved-theme="light"] .folio-calendar-days button.is-pointed { color: var(--void) !important; box-shadow: 0 0 0 1px rgba(32, 39, 32, .14), 0 0 20px rgba(49, 94, 60, .2) !important; }
:root[data-resolved-theme="light"] .folio-articles-baseline { color: rgba(48, 63, 50, .62); }

:root[data-resolved-theme="light"] .garden-particles { opacity: .16; }
:root[data-resolved-theme="light"] .garden-scanlines {
  display: none;
}
:root[data-resolved-theme="light"] .garden-noise { opacity: .024; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .garden-hud { color: rgba(48, 63, 50, .52); }
:root[data-resolved-theme="light"] .garden-hud-scroll > span { background: rgba(48, 63, 50, .2); }
:root[data-resolved-theme="light"] .garden-corner { border-color: rgba(48, 63, 50, .27); }
:root[data-resolved-theme="light"] .garden-pet > p {
  background: rgba(239, 243, 236, .94);
  box-shadow: 0 12px 40px rgba(42, 56, 44, .14);
}
:root[data-resolved-theme="light"] .garden-pet > p::after { background: rgba(239, 243, 236, .94); }
:root[data-resolved-theme="light"] .garden-pet button { background: #d9ded7; border-color: rgba(48, 63, 50, .38); box-shadow: 0 10px 36px rgba(42, 56, 44, .16); }
:root[data-resolved-theme="light"] .garden-pet button span { background: rgba(227, 232, 224, .82); }

/* Background motion v42 — original composition, pointer depth and scroll energy. */
.folio-world {
  --world-back-x: 0px;
  --world-back-y: 0px;
  --world-mid-x: 0px;
  --world-mid-y: 0px;
  --world-front-x: 0px;
  --world-front-y: 0px;
  --world-pointer-x: 50vw;
  --world-pointer-y: 42vh;
  --world-energy: 0;
  --world-etch-opacity: .66;
  --world-rain-opacity: .4;
  --world-rain-opacity-light: .24;
  --world-brightness: 1;
  --rain-skew: 0deg;
}
.folio-world::before {
  inset: -2%;
  opacity: .68;
  background-position: center 54%;
  filter: grayscale(1) contrast(1.2) brightness(.39);
  animation: garden-atmosphere-drift 42s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.folio-world::after {
  background-image:
    radial-gradient(circle 300px at var(--world-pointer-x) var(--world-pointer-y), rgba(145, 181, 150, .1), transparent 72%),
    radial-gradient(ellipse at 50% 43%, transparent 0 18%, rgba(4, 6, 5, .24) 58%, rgba(2, 3, 2, .87) 112%),
    linear-gradient(90deg, rgba(0, 0, 0, .58), transparent 22% 79%, rgba(0, 0, 0, .6)),
    linear-gradient(104deg, transparent 17%, rgba(220, 232, 219, .035) 43%, transparent 61%),
    radial-gradient(circle, rgba(220, 231, 218, .022) 0 1px, transparent 1.3px);
  background-size: auto, auto, auto, auto, 13px 17px;
}
.folio-world-etchings {
  color: rgba(198, 217, 200, .2);
  opacity: calc(var(--world-etch-opacity) - .3);
  animation: garden-etching-drift 34s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

/* V75: wind-bent luminous threads replace the rigid perspective lattice. */
.folio-kinetic-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: .76;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 3%, rgba(0, 0, 0, .62) 13%, #000 27% 92%, rgba(0, 0, 0, .36) 100%);
  mask-image: linear-gradient(180deg, transparent 3%, rgba(0, 0, 0, .62) 13%, #000 27% 92%, rgba(0, 0, 0, .36) 100%);
}

.folio-rainfield {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: var(--world-rain-opacity);
  mix-blend-mode: screen;
  filter: brightness(var(--world-brightness));
  transform: translate3d(var(--world-front-x), var(--world-front-y), 0) rotate(var(--rain-skew)) scale(1.025);
  transform-origin: center;
  will-change: transform;
}
.folio-rainfield::before {
  content: "";
  position: absolute;
  inset: -10% -15%;
  opacity: .44;
  background: linear-gradient(106deg, transparent 30%, rgba(222, 233, 220, .11) 47%, transparent 59%);
  transform: translateX(-16%);
  animation: garden-wet-light 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.folio-rainfield::after {
  content: "";
  position: absolute;
  inset: 8% 7% 9%;
  opacity: .19;
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(222, 233, 220, .1) 22.08%, transparent 22.2% 67%, rgba(222, 233, 220, .07) 67.08%, transparent 67.2%),
    linear-gradient(103deg, transparent 20%, rgba(222, 233, 220, .04) 42%, transparent 63%);
  clip-path: polygon(0 3%, 100% 0, 96% 97%, 4% 100%);
}
.folio-rainfield i {
  position: absolute;
  top: -26%;
  width: 1px;
  height: clamp(120px, 18vh, 210px);
  opacity: .2;
  background: linear-gradient(transparent, rgba(225, 235, 223, .68), transparent);
  box-shadow: 18px 44px 0 rgba(225, 235, 223, .045);
  animation: garden-soft-rain 14s cubic-bezier(.45, 0, .55, 1) infinite;
}
.folio-rainfield i:nth-child(3n) { width: 2px; opacity: .15; filter: blur(.35px); }
.folio-rainfield i:nth-child(2n) { height: clamp(170px, 25vh, 280px); }
.folio-rainfield i:nth-child(1) { left: 8%; animation-delay: -8s; }
.folio-rainfield i:nth-child(2) { left: 19%; animation-delay: -2s; }
.folio-rainfield i:nth-child(3) { left: 31%; animation-delay: -11s; }
.folio-rainfield i:nth-child(4) { left: 44%; animation-delay: -5s; }
.folio-rainfield i:nth-child(5) { left: 56%; animation-delay: -9s; }
.folio-rainfield i:nth-child(6) { left: 68%; animation-delay: -1s; }
.folio-rainfield i:nth-child(7) { left: 79%; animation-delay: -6s; }
.folio-rainfield i:nth-child(8) { left: 89%; animation-delay: -12s; }
.folio-rainfield i:nth-child(9) { left: 96%; animation-delay: -4s; }

.folio-cover::before {
  content: "";
  position: absolute;
  right: clamp(42px, 7vw, 118px);
  top: 19%;
  z-index: 2;
  width: clamp(180px, 24vw, 360px);
  aspect-ratio: 1.9;
  opacity: .16;
  border: 1px solid rgba(201, 220, 202, .26);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(201, 220, 202, .045), 0 0 0 82px rgba(201, 220, 202, .022);
  transform: rotate(-8deg) scale(.92);
  animation: garden-water-ring 12s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  pointer-events: none;
}
.folio-cover-shade {
  background:
    radial-gradient(ellipse at 50% 43%, transparent 0 21%, rgba(7, 9, 8, .1) 57%, rgba(4, 6, 5, .56) 100%),
    linear-gradient(180deg, transparent 0 52%, rgba(5, 7, 6, .3));
}
.folio-explore-traces,
.folio-articles-traces { opacity: .78; }
.folio-field-motion { opacity: .72; }

:root[data-resolved-theme="light"] .folio-world::before {
  opacity: .42;
  filter: grayscale(1) sepia(.08) saturate(.52) contrast(.96) brightness(1.08);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .28) 24%, rgba(0, 0, 0, .68) 48%, rgba(0, 0, 0, .92) 72%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .28) 24%, rgba(0, 0, 0, .68) 48%, rgba(0, 0, 0, .92) 72%, #000 100%);
}
:root[data-resolved-theme="light"] .folio-world::after {
  background-image:
    radial-gradient(circle 290px at var(--world-pointer-x) var(--world-pointer-y), rgba(49, 94, 60, .07), transparent 72%),
    radial-gradient(ellipse at 50% 43%, transparent 0 22%, rgba(210, 217, 209, .18) 61%, rgba(198, 206, 197, .62) 112%),
    radial-gradient(circle, rgba(40, 62, 45, .024) 0 .7px, transparent .9px);
  background-size: auto, auto, 13px 17px;
}
:root[data-resolved-theme="light"] .folio-rainfield { opacity: .11; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-rainfield::after,
:root[data-resolved-theme="light"] .folio-rainfield i { display: none; }
:root[data-resolved-theme="light"] .folio-rainfield::before { opacity: .18; }
:root[data-resolved-theme="light"] .folio-cover::before {
  border-color: rgba(49, 94, 60, .22);
  box-shadow: 0 0 0 34px rgba(49, 94, 60, .04), 0 0 0 82px rgba(49, 94, 60, .02);
}
:root[data-resolved-theme="light"] .folio-world-etchings { color: rgba(39, 65, 44, .17); opacity: .22; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-etching-fibres { opacity: .18; }
:root[data-resolved-theme="light"] .folio-etching-branches { opacity: .38; }
:root[data-resolved-theme="light"] .folio-kinetic-veil { opacity: .22; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-explore-traces,
:root[data-resolved-theme="light"] .folio-articles-traces { color: rgba(39, 76, 47, .2); opacity: .46; }
:root[data-resolved-theme="light"] .folio-field-motion { opacity: .48; }

@media (max-width: 768px) {
  .folio-rainfield i:nth-child(even) { display: none; }
  .folio-cover::before { right: -28px; top: 17%; opacity: .1; }
  .folio-kinetic-veil { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-command { transition: none; }
  .folio-kinetic-veil { display: none; }
  .folio-world::before,
  .folio-world-etchings,
  .folio-rainfield::before,
  .folio-rainfield i,
  .folio-cover::before,
  .folio-explore-traces g,
  .folio-articles-traces g { animation: none; }
}

html.garden-lite-motion .folio-kinetic-veil { display: none; }

@keyframes garden-atmosphere-drift {
  from { transform: scale(1.025) translate3d(calc(var(--world-back-x) - .24%), calc(var(--world-back-y) - .08%), 0); }
  to { transform: scale(1.055) translate3d(calc(var(--world-back-x) + .3%), calc(var(--world-back-y) - .2%), 0); }
}
@keyframes garden-etching-drift {
  from { transform: scale(1.018) translate3d(calc(var(--world-mid-x) - 5px), calc(var(--world-mid-y) + 3px), 0); }
  to { transform: scale(1.03) translate3d(calc(var(--world-mid-x) + 8px), calc(var(--world-mid-y) - 7px), 0); }
}
@keyframes garden-wet-light {
  from { opacity: .16; transform: translateX(-18%); }
  to { opacity: .4; transform: translateX(17%); }
}
@keyframes garden-soft-rain {
  0%, 34% { opacity: 0; transform: translate3d(0, -14vh, 0); }
  43% { opacity: .24; }
  73%, 100% { opacity: 0; transform: translate3d(0, 120vh, 0); }
}
@keyframes garden-water-ring {
  from { opacity: .09; transform: rotate(-8deg) scale(.9); }
  to { opacity: .2; transform: rotate(-6deg) scale(1.035); }
}

/* Ninefold seal — carved realm stones unfold around the eclipse. */
.folio-ninefold {
  --ninefold-x: 57%;
  --ninefold-y: 45%;
  position: absolute;
  inset: 0;
  z-index: 3;
  color: color-mix(in srgb, var(--moss-bright) 76%, var(--bone));
  pointer-events: none;
  overflow: hidden;
}
.folio-cover:has(.folio-ninefold.is-opening) .folio-cover-lens,
.folio-cover:has(.folio-ninefold.is-open) .folio-cover-lens { opacity: 0; }

.folio-oath-seal {
  position: absolute;
  left: var(--ninefold-x);
  top: var(--ninefold-y);
  z-index: 2;
  width: clamp(200px, 18.5vw, 280px);
  aspect-ratio: 1;
  color: inherit;
  opacity: .78;
  transform: translate(-50%, -50%) rotate(-5deg);
  transform-origin: center;
  transition: opacity 220ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}
.folio-oath-seal::before {
  content: "";
  position: absolute;
  inset: 5%;
  background:
    radial-gradient(circle at 39% 32%, rgba(214, 226, 215, .12), transparent 22%),
    radial-gradient(circle at 58% 62%, rgba(0, 0, 0, .62), transparent 55%),
    repeating-conic-gradient(from 17deg, rgba(210, 225, 210, .032) 0 2deg, transparent 2deg 17deg),
    rgba(5, 8, 6, .56);
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  clip-path: polygon(50% 0,61% 3%,70% 1%,78% 7%,87% 9%,91% 18%,97% 25%,96% 36%,100% 46%,97% 56%,99% 67%,92% 75%,89% 86%,78% 90%,70% 97%,59% 95%,49% 100%,39% 96%,29% 98%,21% 91%,11% 87%,9% 77%,2% 69%,5% 58%,0 48%,4% 38%,2% 28%,10% 20%,14% 10%,25% 8%,33% 2%,43% 4%);
  box-shadow:
    inset 1px 2px 0 rgba(223, 235, 224, .07),
    inset -10px -14px 34px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(6, 10, 7, .36);
}
.folio-oath-seal::after {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: 0;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .22);
  opacity: .72;
}
.folio-oath-seal svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px rgba(194, 221, 198, .12)); }
.folio-oath-ring { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; transform-origin: 120px 120px; }
.folio-oath-ring-outer { stroke-width: 1.05; stroke-dasharray: 4 7 24 6; opacity: .72; }
.folio-oath-ring-mid { stroke-width: .7; stroke-dasharray: 1 6 13 5; opacity: .46; }
.folio-oath-ring-inner { stroke-width: .85; opacity: .4; }
.folio-oath-runes { opacity: .64; stroke-width: 1.55; }
.folio-oath-runes path, .folio-valknut path { vector-effect: non-scaling-stroke; }
.folio-valknut { opacity: .27; stroke-width: 1.15; }
.folio-nine-realms circle { opacity: .48; transform-box: fill-box; transform-origin: center; }

.folio-realm-stones {
  position: absolute;
  left: var(--ninefold-x);
  top: var(--ninefold-y);
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
.folio-realm-stones::before,
.folio-realm-stones::after {
  content: "";
  position: absolute;
  left: -72px;
  top: -5px;
  z-index: 0;
  width: 780px;
  height: 408px;
  border: 1px solid color-mix(in srgb, var(--bone) 14%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-5deg) scale(.94);
  transition: opacity 520ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.folio-realm-stones::after {
  left: -30px;
  top: 1px;
  width: 582px;
  height: 316px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--moss-bright) 16%, transparent);
  transform: translate(-50%, -50%) rotate(7deg) scale(.9);
}
.folio-realm-stone {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  z-index: 1;
  width: 58px;
  height: 78px;
  padding: 0;
  border: 0;
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  filter: drop-shadow(0 12px 11px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(112, 150, 119, .08));
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0) scale(.12);
  transform-origin: center;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.16, 1, .3, 1);
}
.folio-realm-stone:nth-child(3n + 2) { width: 53px; height: 73px; }
.folio-realm-stone:nth-child(3n) { width: 63px; height: 84px; }
.folio-realm-stones svg { display: block; width: 100%; height: 100%; overflow: visible; transform-box: fill-box; transform-origin: center; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.folio-stone-body { fill: url("#realm-stone-shell") #101713; stroke: color-mix(in srgb, var(--bone) 54%, var(--moss)); stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.folio-stone-face { fill: url("#realm-stone-face") #17211b; stroke: rgba(216, 229, 216, .17); stroke-width: .75; vector-effect: non-scaling-stroke; }
.folio-stone-sigil { fill: none; stroke: color-mix(in srgb, var(--bone) 30%, var(--moss-bright)); stroke-width: .62; stroke-dasharray: 1.1 2.7; vector-effect: non-scaling-stroke; opacity: .64; }
.folio-stone-grain { fill: none; stroke: rgba(221, 232, 222, .29); stroke-width: .62; stroke-linecap: round; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; opacity: .76; }
.folio-realm-mark { fill: none; stroke: color-mix(in srgb, var(--bone) 78%, var(--moss-bright)); stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; opacity: .92; filter: drop-shadow(0 0 2px rgba(151, 195, 159, .34)); }
.folio-realm-caption {
  --plaque-hidden-transform: translateX(-50%) translateY(5px);
  --plaque-visible-transform: translateX(-50%) translateY(0);
  --plaque-enter-transform: translateX(-50%) translateY(12px);
  position: absolute;
  left: 50%;
  top: calc(100% + 11px);
  display: grid;
  justify-items: center;
  gap: 0;
  width: 164px;
  padding: 7px 11px 8px;
  border-block: 1px solid transparent;
  border-left: 2px solid transparent;
  color: var(--bone);
  opacity: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  rotate: calc(0deg - var(--rot));
  transform: var(--plaque-hidden-transform);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, gap 180ms ease, opacity 140ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}
.folio-realm-caption b { font: italic 700 15px/.95 var(--serif); letter-spacing: .045em; white-space: nowrap; text-shadow: 0 5px 18px rgba(0, 0, 0, .42); }
.folio-realm-caption small { height: 0; color: var(--moss-bright); font: 500 10px/1 var(--serif); letter-spacing: .13em; opacity: 0; overflow: hidden; white-space: nowrap; transform: translateY(-3px); transition: height 180ms ease, opacity 150ms ease, transform 180ms ease; }
.folio-realm-caption em {
  display: block;
  position: absolute;
  top: 100%;
  right: -1px;
  left: -1px;
  padding: 7px 8px 8px;
  color: color-mix(in srgb, var(--bone) 66%, var(--moss-bright));
  border: 1px solid color-mix(in srgb, var(--moss-bright) 22%, transparent);
  border-top: 0;
  background: color-mix(in srgb, #080d0a 94%, transparent);
  font: 500 9px/1.5 var(--sans);
  font-style: normal;
  letter-spacing: .045em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 140ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 220ms;
}
.folio-realm-stone:focus-visible { outline: none; }
.folio-realm-stone:focus-visible .folio-stone-body { stroke: var(--moss-bright); stroke-width: 1.4; }
.folio-realm-stone:focus-visible .folio-realm-caption { color: var(--moss-bright); }

.folio-ninefold-trigger {
  position: absolute;
  left: var(--ninefold-x);
  top: var(--ninefold-y);
  z-index: 8;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--moss-bright);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}
.folio-ninefold-trigger::before,
.folio-ninefold-trigger::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 180ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.folio-ninefold-trigger::before { inset: 2px; border: 1px solid currentColor; transform: scale(.68) rotate(-18deg); }
.folio-ninefold-trigger::after { inset: -6px; border: 1px dashed color-mix(in srgb, currentColor 50%, transparent); transform: scale(.72) rotate(20deg); }
.folio-ninefold-trigger:focus-visible { outline: 1px solid color-mix(in srgb, var(--moss-bright) 72%, transparent); outline-offset: 6px; }
.folio-ninefold-trigger:focus-visible::before { opacity: .58; transform: scale(1) rotate(-5deg); }
.folio-ninefold-trigger:focus-visible::after { opacity: .28; transform: scale(1.08) rotate(62deg); }
.folio-ninefold-trigger:active { transform: translate(-50%, -50%) scale(.91, 1.04); }

.folio-ninefold-hint {
  position: absolute;
  left: var(--ninefold-x);
  top: calc(var(--ninefold-y) + 286px);
  z-index: 5;
  margin: 0;
  padding: 7px 15px 8px;
  color: color-mix(in srgb, var(--moss-bright) 82%, var(--bone));
  border-inline: 1px solid color-mix(in srgb, var(--moss-bright) 28%, transparent);
  font: 600 9px/1 var(--mono);
  letter-spacing: .12em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 7px);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.folio-ninefold-hint span:last-child { display: none; }
.folio-realm-readout { display: none; }
.folio-realm-readout[hidden] { display: none; }

.folio-ninefold.is-opening .folio-realm-stone {
  will-change: transform, opacity;
  animation: garden-realm-stone-open 920ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--stone) * 52ms);
}
.folio-ninefold.is-closing .folio-realm-stone { animation: garden-realm-stone-close 760ms cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--stone) * 30ms); }
.folio-ninefold.is-open .folio-realm-stone {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1);
}
.folio-ninefold.is-opening .folio-realm-stones::before,
.folio-ninefold.is-open .folio-realm-stones::before { opacity: .34; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
.folio-ninefold.is-opening .folio-realm-stones::after,
.folio-ninefold.is-open .folio-realm-stones::after { opacity: .42; transform: translate(-50%, -50%) rotate(7deg) scale(1); }
.folio-ninefold.is-open .folio-realm-caption { opacity: .46; transform: var(--plaque-visible-transform); }
.folio-ninefold.is-open .folio-realm-stone:hover .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:focus-visible .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-realm-caption {
  gap: 5px;
  color: var(--bone);
  border-block-color: color-mix(in srgb, var(--moss-bright) 20%, transparent);
  border-left-color: color-mix(in srgb, var(--moss-bright) 68%, transparent);
  opacity: 1;
  background:
    linear-gradient(90deg, color-mix(in srgb, #07100b 94%, transparent), color-mix(in srgb, #101a14 78%, transparent) 78%, transparent),
    repeating-linear-gradient(0deg, rgba(220, 232, 220, .025) 0 1px, transparent 1px 4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  transform: var(--plaque-visible-transform);
}
.folio-ninefold.is-open .folio-realm-stone:hover .folio-realm-caption small,
.folio-ninefold.is-open .folio-realm-stone:focus-visible .folio-realm-caption small,
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-realm-caption small { height: 10px; opacity: 1; transform: translateY(0); }

/* Each plaque opens toward available viewport space; top stones never escape above the cover. */
.folio-realm-stone:nth-child(1) > .folio-realm-caption,
.folio-realm-stone:nth-child(3) > .folio-realm-caption,
.folio-realm-stone:nth-child(6) > .folio-realm-caption {
  --plaque-hidden-transform: translate(5px, -50%);
  --plaque-visible-transform: translate(0, -50%);
  --plaque-enter-transform: translate(13px, -50%);
  top: 50%;
  right: auto;
  bottom: auto;
  left: calc(100% + 13px);
  transform: var(--plaque-hidden-transform);
}

.folio-realm-stone:nth-child(2) > .folio-realm-caption,
.folio-realm-stone:nth-child(4) > .folio-realm-caption,
.folio-realm-stone:nth-child(5) > .folio-realm-caption,
.folio-realm-stone:nth-child(7) > .folio-realm-caption,
.folio-realm-stone:nth-child(8) > .folio-realm-caption {
  --plaque-hidden-transform: translate(-5px, -50%);
  --plaque-visible-transform: translate(0, -50%);
  --plaque-enter-transform: translate(-13px, -50%);
  top: 50%;
  right: calc(100% + 13px);
  bottom: auto;
  left: auto;
  justify-items: end;
  border-right: 2px solid transparent;
  border-left-width: 0;
  text-align: right;
  transform: var(--plaque-hidden-transform);
}
.folio-ninefold.is-open .folio-realm-stone:nth-child(2):hover > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(2):focus-visible > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(2).is-selected > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(4):hover > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(4):focus-visible > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(4).is-selected > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(5):hover > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(5):focus-visible > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(5).is-selected > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(7):hover > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(7):focus-visible > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(7).is-selected > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(8):hover > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(8):focus-visible > .folio-realm-caption,
.folio-ninefold.is-open .folio-realm-stone:nth-child(8).is-selected > .folio-realm-caption {
  border-right-color: color-mix(in srgb, var(--moss-bright) 68%, transparent);
  background:
    linear-gradient(270deg, color-mix(in srgb, #07100b 94%, transparent), color-mix(in srgb, #101a14 78%, transparent) 78%, transparent),
    repeating-linear-gradient(0deg, rgba(220, 232, 220, .025) 0 1px, transparent 1px 4px);
}

.folio-realm-stone:nth-child(9) > .folio-realm-caption {
  --plaque-hidden-transform: translateX(-50%) translateY(5px);
  --plaque-visible-transform: translateX(-50%) translateY(0);
  --plaque-enter-transform: translateX(-50%) translateY(12px);
  top: auto;
  right: auto;
  bottom: calc(100% + 11px);
  left: 50%;
  justify-items: center;
  border-left-width: 1px;
  text-align: center;
  transform: var(--plaque-hidden-transform);
}
.folio-realm-stone:nth-child(9) > .folio-realm-caption em {
  top: auto;
  bottom: 100%;
  border-top: 1px solid color-mix(in srgb, var(--moss-bright) 24%, transparent);
  border-bottom: 0;
}
.folio-ninefold.is-open .folio-ninefold-hint { opacity: .66; transform: translate(-50%, 0); }
.folio-ninefold.is-guiding .folio-realm-stone { animation: garden-realm-guide 520ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--stone) * 150ms); }
.folio-ninefold.has-realm-selection .folio-realm-stone:not(.is-selected) { opacity: .6; }
.folio-ninefold.has-realm-selection .folio-realm-stones::before { opacity: .46; }
.folio-ninefold.has-realm-selection .folio-realm-stones::after { opacity: .58; }
.folio-ninefold.has-realm-selection .folio-ninefold-hint { opacity: 0; }
.folio-ninefold.is-open .folio-realm-stone.is-selected { z-index: 5; opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1.14); }
.folio-ninefold.is-open .folio-realm-stone.is-selected > .folio-realm-caption { color: var(--bone); opacity: 1; }
.folio-ninefold.is-open .folio-realm-stone.is-selected > .folio-realm-caption em { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.folio-ninefold.is-open .folio-realm-stone.is-selected > svg { animation-play-state: paused; transform: translateY(-2px) scale(1.045); }
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-stone-body { stroke: var(--moss-bright); stroke-width: 1.5; }
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-stone-sigil { stroke: var(--moss-bright); stroke-width: .85; opacity: .92; }
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-stone-grain { opacity: .88; }
.folio-ninefold.is-open .folio-realm-stone.is-selected .folio-realm-mark { opacity: 1; stroke-width: 2.15; }
.folio-ninefold.has-realm-selection .folio-oath-seal { opacity: .84; transform: translate(-50%, -50%) rotate(16deg) scale(1.055); }
.folio-ninefold.is-open .folio-oath-seal { opacity: .76; transform: translate(-50%, -50%) rotate(12deg) scale(1.035); }
.folio-ninefold.is-open .folio-oath-ring-outer { transform: rotate(82deg); }
.folio-ninefold.is-open .folio-oath-ring-mid { transform: rotate(-64deg); }
.folio-ninefold.is-open .folio-nine-realms circle { opacity: 1; transform: scale(1.5); }
.folio-ninefold.is-opening .folio-oath-seal { animation: garden-ninefold-seal-open 1180ms cubic-bezier(.16, 1, .3, 1) both; }
.folio-ninefold.is-closing .folio-oath-seal { animation: garden-ninefold-seal-close 900ms cubic-bezier(.4, 0, .2, 1) both; }
.folio-wordmark.is-ninefold-transition .folio-wordmark-disc { animation: garden-ninefold-eclipse 1100ms cubic-bezier(.16, 1, .3, 1) both; }
.folio-wordmark.is-ninefold-transition .folio-wordmark-ghost { animation: garden-ninefold-ghost 1100ms cubic-bezier(.16, 1, .3, 1) both; }

:root[data-resolved-theme="light"] .folio-ninefold { color: #31583a; }
:root[data-resolved-theme="light"] .folio-oath-seal { color: #284e32; opacity: .67; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-oath-seal::before {
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, .42), transparent 27%),
    radial-gradient(circle at 58% 62%, rgba(59, 76, 63, .15), transparent 52%),
    repeating-conic-gradient(from 17deg, rgba(35, 61, 42, .045) 0 3deg, transparent 3deg 19deg),
    rgba(206, 214, 207, .56);
  box-shadow: inset 0 0 36px rgba(45, 62, 50, .14);
}
:root[data-resolved-theme="light"] .folio-stone-body { fill: #425549; stroke: rgba(26, 47, 31, .78); }
:root[data-resolved-theme="light"] .folio-stone-face { fill: #64776a; stroke: rgba(241, 246, 241, .28); }
:root[data-resolved-theme="light"] .folio-stone-sigil { stroke: rgba(229, 238, 230, .38); }
:root[data-resolved-theme="light"] .folio-stone-grain { stroke: rgba(243, 248, 243, .28); }
:root[data-resolved-theme="light"] .folio-realm-mark { stroke: #dce7dd; filter: drop-shadow(0 0 1px rgba(24, 49, 30, .28)); }
:root[data-resolved-theme="light"] .folio-realm-caption {
  color: #17251b;
  text-shadow: none;
}
:root[data-resolved-theme="light"] .folio-realm-caption b { text-shadow: none; }
:root[data-resolved-theme="light"] .folio-realm-caption small { color: #356543; }
:root[data-resolved-theme="light"] .folio-realm-caption em { color: #304735; border-color: rgba(41, 76, 49, .18); background: rgba(178, 198, 181, .96); }
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:hover .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:focus-visible .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone.is-selected .folio-realm-caption {
  color: #17251b;
  border-block-color: rgba(41, 76, 49, .2);
  background:
    linear-gradient(90deg, rgba(165, 184, 168, .93), rgba(192, 207, 194, .7) 74%, rgba(216, 226, 217, .06)),
    repeating-linear-gradient(0deg, rgba(36, 58, 41, .025) 0 1px, transparent 1px 4px);
  box-shadow: 0 8px 18px rgba(31, 48, 34, .08);
}
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(2):hover > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(2):focus-visible > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(2).is-selected > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(4):hover > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(4):focus-visible > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(4).is-selected > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(5):hover > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(5):focus-visible > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(5).is-selected > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(7):hover > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(7):focus-visible > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(7).is-selected > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(8):hover > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(8):focus-visible > .folio-realm-caption,
:root[data-resolved-theme="light"] .folio-ninefold.is-open .folio-realm-stone:nth-child(8).is-selected > .folio-realm-caption {
  background:
    linear-gradient(270deg, rgba(165, 184, 168, .93), rgba(192, 207, 194, .7) 74%, rgba(216, 226, 217, .06)),
    repeating-linear-gradient(0deg, rgba(36, 58, 41, .025) 0 1px, transparent 1px 4px);
}
:root[data-resolved-theme="light"] .folio-ninefold-hint { color: #315e3c; border-color: rgba(49, 94, 60, .28); }

@keyframes garden-realm-stone-open {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(.12); }
  14% { opacity: .94; transform: translate(-50%, -50%) translate(0, -8px) rotate(-7deg) scale(.34, .72); }
  54% { opacity: 1; transform: translate(-50%, -50%) translate(var(--mx), var(--my)) rotate(calc(var(--rot) - 18deg)) scale(.82, 1.08); }
  82% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(calc(var(--rot) + 4deg)) scale(1.06, .96); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); }
}
@keyframes garden-realm-stone-close {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); }
  48% { opacity: .92; transform: translate(-50%, -50%) translate(var(--mx), var(--my)) rotate(calc(var(--rot) - 12deg)) scale(.78, 1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(.12); }
}
@keyframes garden-realm-guide {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); }
  28% { opacity: .94; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(calc(var(--rot) - 2deg)) scale(.96, 1.04); }
  58% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(calc(var(--rot) + 2deg)) scale(1.14, .97); }
}
@keyframes garden-realm-guide-label {
  0%, 100% { opacity: 0; transform: var(--plaque-hidden-transform); }
  24% { opacity: .2; }
  52%, 78% { opacity: 1; transform: var(--plaque-visible-transform); }
}
@keyframes garden-realm-breathe {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  50% { transform: translateY(-2px) rotate(.8deg) scale(1.035, .985); }
}
@keyframes garden-realm-readout-in {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes garden-ninefold-seal-open {
  0% { opacity: .68; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
  14% { opacity: .86; transform: translate(-50%, -50%) rotate(-10deg) scale(.93, 1.05); }
  72% { opacity: .8; transform: translate(-50%, -50%) rotate(16deg) scale(1.055); }
  100% { opacity: .76; transform: translate(-50%, -50%) rotate(12deg) scale(1.035); }
}
@keyframes garden-ninefold-seal-close {
  0% { opacity: .76; transform: translate(-50%, -50%) rotate(12deg) scale(1.035); }
  68% { opacity: .84; transform: translate(-50%, -50%) rotate(-8deg) scale(.96, 1.035); }
  100% { opacity: .68; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
}
@keyframes garden-ninefold-eclipse {
  0%, 100% { transform: scale(1); }
  9% { transform: scale(.76, 1.08); }
  28% { transform: scale(1.14, .9); }
  72% { transform: scale(.96); }
}
@keyframes garden-ninefold-ghost {
  0%, 100% { opacity: var(--wordmark-ghost-opacity); }
  24% { opacity: .2; }
  54% { opacity: var(--wordmark-ghost-peak); }
}

@media (hover: hover) and (pointer: fine) {
  .folio-ninefold:has(.folio-ninefold-trigger:hover) .folio-oath-seal { opacity: .86; transform: translate(-50%, -50%) rotate(2deg) scale(1.02); }
  .folio-ninefold-trigger:hover::before { opacity: .52; transform: scale(1) rotate(-5deg); }
  .folio-ninefold-trigger:hover::after { opacity: .24; transform: scale(1.08) rotate(62deg); }
  .folio-ninefold.is-open .folio-realm-stone:hover { z-index: 4; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1.09); }
  .folio-ninefold.is-open .folio-realm-stone:hover > svg { transform: translateY(-2px) scale(1.035); }
  .folio-ninefold.is-open .folio-realm-stone:hover > .folio-realm-caption { color: var(--bone); opacity: 1; }
  .folio-ninefold.is-open .folio-realm-stone:hover > .folio-realm-caption em,
  .folio-ninefold.is-open .folio-realm-stone:focus-visible > .folio-realm-caption em { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
  .folio-ninefold.is-open:has(.folio-realm-stone:hover) .folio-realm-stone:not(:hover):not(.is-selected) { opacity: .5; }
  .folio-ninefold.is-open:has(.folio-realm-stone:focus-visible) .folio-realm-stone:not(:focus-visible):not(.is-selected) { opacity: .5; }
  .folio-ninefold.has-realm-selection .folio-realm-stone:hover,
  .folio-ninefold.has-realm-selection .folio-realm-stone:focus-visible { opacity: 1; }
  .folio-ninefold.is-open .folio-realm-stone.is-selected:hover { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--rot)) scale(1.14); }
  .folio-ninefold.is-open .folio-realm-stone:hover .folio-stone-body { stroke: var(--moss-bright); stroke-width: 1.4; }
  .folio-ninefold.is-open .folio-realm-stone:hover .folio-stone-sigil { stroke: var(--moss-bright); opacity: .86; }
}
@media (max-width: 1100px) {
  .folio-realm-stones { transform: scale(.78); }
  .folio-realm-caption { scale: 1.16; transform-origin: top center; }
}
@media (max-width: 768px) {
  .folio-ninefold { --ninefold-y: 34%; }
  .folio-oath-seal { width: clamp(112px, 32vw, 132px); opacity: .5; }
  .folio-oath-runes { stroke-width: 1.35; }
  .folio-realm-stones { transform: none; }
  .folio-realm-stones::before { left: -5px; top: -2px; width: 260px; height: 184px; }
  .folio-realm-stones::after { left: 0; top: 1px; width: 190px; height: 134px; }
  .folio-realm-stone { --rot: 0deg !important; width: 46px; height: 62px; }
  .folio-realm-stone:nth-child(3n + 2) { width: 44px; height: 60px; }
  .folio-realm-stone:nth-child(3n) { width: 50px; height: 66px; }
  .folio-realm-stone:nth-child(1) { --x: -118px !important; --y: -52px !important; --mx: -74px !important; --my: -72px !important; }
  .folio-realm-stone:nth-child(2) { --x: -62px !important; --y: -84px !important; --mx: -42px !important; --my: -108px !important; }
  .folio-realm-stone:nth-child(3) { --x: 0px !important; --y: -92px !important; --mx: 0px !important; --my: -118px !important; }
  .folio-realm-stone:nth-child(4) { --x: 58px !important; --y: -82px !important; --mx: 39px !important; --my: -106px !important; }
  .folio-realm-stone:nth-child(5) { --x: 110px !important; --y: -48px !important; --mx: 70px !important; --my: -70px !important; }
  .folio-realm-stone:nth-child(6) { --x: -110px !important; --y: 48px !important; --mx: -70px !important; --my: 68px !important; }
  .folio-realm-stone:nth-child(7) { --x: -54px !important; --y: 78px !important; --mx: -36px !important; --my: 100px !important; }
  .folio-realm-stone:nth-child(8) { --x: 10px !important; --y: 86px !important; --mx: 7px !important; --my: 110px !important; }
  .folio-realm-stone:nth-child(9) { --x: 96px !important; --y: 52px !important; --mx: 62px !important; --my: 74px !important; }
  .folio-ninefold.is-open .folio-realm-stone { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1); }
  .folio-ninefold.is-open .folio-realm-stone.is-selected { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1.08); }
  .folio-realm-caption { display: none; }
  .folio-realm-readout:not([hidden]) {
    position: absolute;
    left: 50%;
    top: calc(var(--ninefold-y, 34%) + 120px);
    z-index: 8;
    display: grid;
    justify-items: center;
    width: min(292px, calc(100vw - 32px));
    padding: 11px 15px 13px;
    color: var(--bone);
    border-block: 1px solid color-mix(in srgb, var(--moss-bright) 22%, transparent);
    border-left: 2px solid color-mix(in srgb, var(--moss-bright) 72%, transparent);
    background:
      linear-gradient(110deg, rgba(5, 9, 6, .985), rgba(10, 16, 12, .96)),
      repeating-linear-gradient(0deg, rgba(220, 232, 220, .025) 0 1px, transparent 1px 4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
    animation: garden-realm-readout-in 220ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .folio-realm-readout > span { color: color-mix(in srgb, var(--moss-bright) 70%, var(--bone)); font: 600 7px/1 var(--mono); letter-spacing: .2em; }
  .folio-realm-readout > b { margin-top: 7px; font: italic 700 19px/1 var(--serif); letter-spacing: .045em; }
  .folio-realm-readout > small { margin-top: 4px; color: var(--moss-bright); font: 500 11px/1 var(--serif); letter-spacing: .14em; }
  .folio-realm-readout > p { width: 100%; margin: 9px 0 0; padding-top: 8px; color: color-mix(in srgb, var(--bone) 70%, var(--moss-bright)); border-top: 1px solid color-mix(in srgb, var(--moss-bright) 18%, transparent); font: 500 11px/1.5 var(--sans); letter-spacing: .045em; }
  :root[data-resolved-theme="light"] .folio-realm-readout:not([hidden]) { color: #17251b; border-color: rgba(41, 76, 49, .22); border-left-color: rgba(41, 91, 52, .74); background: rgba(224, 232, 224, .98); box-shadow: 0 14px 30px rgba(31, 48, 34, .15); }
  :root[data-resolved-theme="light"] .folio-realm-readout > span,
  :root[data-resolved-theme="light"] .folio-realm-readout > small { color: #356543; }
  :root[data-resolved-theme="light"] .folio-realm-readout > p { color: #3f5543; border-color: rgba(41, 76, 49, .18); }
  .folio-ninefold-hint { top: calc(var(--ninefold-y) + 184px); padding-inline: 12px; font-size: 8px; }
  .folio-ninefold-hint span:first-child { display: none; }
  .folio-ninefold-hint span:last-child { display: inline; }
  .folio-ninefold-trigger { width: 54px; height: 54px; }
}
html.garden-lite-motion .folio-ninefold.is-opening *,
html.garden-lite-motion .folio-ninefold.is-closing *,
html.garden-lite-motion .folio-ninefold.is-guiding *,
html.garden-lite-motion .folio-ninefold.is-open .folio-realm-stone > svg,
html.garden-lite-motion .folio-wordmark.is-ninefold-transition .folio-wordmark-disc,
html.garden-lite-motion .folio-wordmark.is-ninefold-transition .folio-wordmark-ghost { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .folio-ninefold.is-opening *,
  .folio-ninefold.is-closing *,
  .folio-ninefold.is-guiding *,
  .folio-ninefold.is-open .folio-realm-stone > svg,
  .folio-wordmark.is-ninefold-transition .folio-wordmark-disc,
  .folio-wordmark.is-ninefold-transition .folio-wordmark-ghost { animation: none !important; }
  .folio-realm-stone { transition: opacity 120ms ease; }
  .folio-realm-caption em { transform: none; transition: opacity 120ms ease, visibility 0s linear 120ms; }
  .folio-realm-readout { animation: none !important; }
  .folio-ninefold-hint { transform: translate(-50%, 0); transition: opacity 120ms ease; }
}

@media (prefers-reduced-transparency: reduce) {
  .folio-command { background: var(--carbon); }
  .folio-command::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-resolved-theme="light"] .folio-command { background: #e2e8e1; }
}

/* Pixel diorama — the ending becomes a layered miniature; the HUD remains screen-aligned. */
.folio-pixel-stage {
  position: relative;
  z-index: 2;
  width: min(740px, 84vw);
  aspect-ratio: 16 / 9;
  perspective: 660px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

.folio-pixel-stage::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 1%;
  bottom: -42px;
  height: 62px;
  opacity: .72;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .78), transparent 70%);
  filter: blur(9px);
  transform: rotateX(72deg) translateZ(-34px);
  pointer-events: none;
}

.folio-pixel-stage::after {
  content: "YGGDRASIL / ROOTS OF NINE WORLDS";
  position: absolute;
  right: 4px;
  top: -21px;
  color: rgba(168, 199, 174, .42);
  font: 600 6px/1 var(--mono);
  letter-spacing: .18em;
  pointer-events: none;
}

.folio-pixel-diorama {
  position: absolute;
  inset: 0;
  transform: rotateX(0deg) rotateY(0deg);
  transform-origin: 50% 68%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.folio-pixel-diorama::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: #020604;
  border: 1px solid rgba(143, 178, 150, .18);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
  z-index: 0;
  transform: translateZ(-22px);
  pointer-events: none;
}

.folio-pixel-diorama.is-diorama-tracking { will-change: transform; }
.folio-pixel-diorama.is-depth-tracking .pixel-depth-layer { transition: opacity 220ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-diorama.is-depth-tracking .pixel-depth-sky { opacity: .72; }
.folio-pixel-diorama.is-depth-tracking .pixel-depth-ridge-back { opacity: .86; }

.folio-pixel-shell {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
}

.folio-pixel-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(157, 194, 165, .18) 9px 11px);
}

.folio-pixel-shell-right {
  top: 1px;
  right: -31px;
  width: 32px;
  height: calc(100% - 1px);
  background: #111b16;
  border-right: 4px solid #030705;
  box-shadow: inset 8px 0 0 #27352d, inset 13px 0 0 #0a100d;
  transform: translateZ(-8px) rotateY(70deg);
  transform-origin: left center;
}

.folio-pixel-shell-bottom {
  left: 1px;
  bottom: -31px;
  width: calc(100% - 1px);
  height: 32px;
  background: #0a110d;
  border-bottom: 4px solid #020503;
  box-shadow: inset 0 8px 0 #2b3b31, inset 0 13px 0 #111a15;
  transform: translateZ(-8px) rotateX(-70deg);
  transform-origin: center top;
}

.folio-pixel-stage .folio-pixel-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: clip;
  transform-style: preserve-3d;
  transform-origin: 50% 72%;
  transform: none;
  pointer-events: none;
  user-select: none;
  cursor: default;
  transition: outline-color 160ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1);
}

.folio-pixel-interaction {
  position: absolute;
  left: 50%;
  top: 36%;
  z-index: 40;
  width: 112px;
  height: 112px;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-interaction:focus-visible {
  outline: 2px solid rgba(190, 222, 196, .9);
  outline-offset: 9px;
  box-shadow: 0 0 0 13px rgba(4, 11, 7, .54);
}

.folio-pixel-brief {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr);
  gap: clamp(20px, 5vw, 68px);
  align-items: end;
  width: min(740px, 84vw);
  margin: 0 auto 25px;
  padding: 15px 0 16px;
  border-top: 1px solid rgba(153, 188, 160, .22);
  border-bottom: 1px solid rgba(153, 188, 160, .12);
}
.folio-pixel-brief small {
  display: block;
  margin-bottom: 8px;
  color: rgba(163, 197, 170, .55);
  font: 600 7px/1 var(--mono);
  letter-spacing: .16em;
}
.folio-pixel-brief h3 {
  margin: 0;
  color: rgba(220, 232, 222, .92);
  font: 500 clamp(19px, 2.5vw, 28px)/1.05 var(--serif);
  letter-spacing: .04em;
}
.folio-pixel-brief p {
  margin: 0;
  color: rgba(198, 215, 201, .66);
  font: 500 11px/1.75 var(--sans);
  letter-spacing: .04em;
}

.folio-pixel-screen > .pixel-depth-layer,
.pixel-depth-layer > span {
  position: absolute;
  display: block;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.pixel-depth-layer {
  inset: 0;
  transform-origin: 50% 60%;
  transition: transform 820ms cubic-bezier(.23, 1, .32, 1), opacity 420ms ease;
}
.pixel-depth-sky { opacity: .82; transform: translateZ(-90px) scale(1.22); }
.pixel-depth-ridge-back { opacity: .92; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .22)); transform: translateZ(30px) scale(1); }
.pixel-depth-ridge-front { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .34)); transform: translateZ(110px) scale(.92); }
.pixel-depth-water { filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .4)); transform: translateZ(190px) scale(.82); }
.pixel-depth-foreground { filter: drop-shadow(0 16px 10px rgba(0, 0, 0, .5)); transform: translateZ(260px) scale(.74); }
.pixel-frame { transform: translateZ(320px) scale(.515); }
.pixel-scan { transform: translateZ(322px) scale(.512); }

.pixel-depth-layer::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 4px;
  opacity: .24;
  background: #78907e;
  box-shadow: 0 4px 0 #020604;
  transform: rotateX(78deg) translateZ(-2px);
  transform-origin: center bottom;
}

.pixel-depth-sky .pixel-sky,
.pixel-depth-sky .pixel-atmosphere,
.pixel-depth-sky .pixel-rain { inset: 0; }
.pixel-depth-sky .pixel-sky { bottom: 43%; }
.pixel-depth-ridge-back .pixel-ridge,
.pixel-depth-ridge-front .pixel-ridge { left: 0; right: 0; }
.pixel-depth-water .pixel-lake { inset: 67% 0 0; }
.pixel-depth-foreground .pixel-fireflies { inset: 0; }

/* The drowned World Tree relay — every landmark occupies a separate cut-paper plane. */
.pixel-aurora {
  left: 27%;
  right: 5%;
  top: 7%;
  z-index: 2;
  height: 33%;
  opacity: .28;
  transform: skewX(-9deg);
  transition: opacity 520ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-aurora i {
  position: absolute;
  display: block;
  height: 5px;
  background: #476d56;
  box-shadow: 11px 5px 0 rgba(71, 109, 86, .74), 22px 10px 0 rgba(71, 109, 86, .42), 33px 15px 0 rgba(71, 109, 86, .18);
}
.pixel-aurora i:nth-child(1) { left: 5%; top: 10%; width: 36%; }
.pixel-aurora i:nth-child(2) { left: 28%; top: 37%; width: 51%; opacity: .58; }
.pixel-aurora i:nth-child(3) { left: 54%; top: 66%; width: 31%; opacity: .34; }

.pixel-rune-constellation {
  left: 41%;
  top: 12%;
  z-index: 4;
  width: 22%;
  height: 24%;
  opacity: .4;
}
.pixel-rune-constellation::before,
.pixel-rune-constellation::after {
  content: "";
  position: absolute;
  background: #89a890;
  transform-origin: left center;
}
.pixel-rune-constellation::before { left: 12%; top: 48%; width: 74%; height: 2px; transform: rotate(-18deg); }
.pixel-rune-constellation::after { left: 45%; top: 14%; width: 2px; height: 74%; transform: rotate(13deg); }
.pixel-rune-constellation i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #b5ccb9;
  box-shadow: 0 0 0 2px rgba(181, 204, 185, .08);
}
.pixel-rune-constellation i:nth-child(1) { left: 7%; top: 45%; }
.pixel-rune-constellation i:nth-child(2) { left: 33%; top: 30%; }
.pixel-rune-constellation i:nth-child(3) { left: 47%; top: 7%; }
.pixel-rune-constellation i:nth-child(4) { left: 54%; top: 69%; }
.pixel-rune-constellation i:nth-child(5) { right: 7%; top: 27%; }

.pixel-worldtree {
  left: 31%;
  top: 3%;
  z-index: 5;
  width: 42%;
  height: 68%;
  filter: drop-shadow(8px 6px 0 rgba(1, 5, 3, .58));
}
.pixel-worldtree::before {
  content: "";
  position: absolute;
  left: 43%;
  bottom: 0;
  width: 17%;
  height: 66%;
  background: #1e3026;
  box-shadow: inset 7px 0 0 #30473a, inset -6px 0 0 #0b1410;
  clip-path: polygon(23% 0, 77% 0, 77% 12%, 88% 12%, 88% 31%, 100% 31%, 88% 58%, 88% 100%, 6% 100%, 6% 65%, 0 65%, 13% 37%, 13% 16%, 23% 16%);
}
.pixel-worldtree::after {
  content: "";
  position: absolute;
  inset: 0 0 42%;
  background: #17271f;
  box-shadow: inset 0 -8px 0 #0b1510;
  clip-path: polygon(8% 18%, 31% 18%, 31% 5%, 47% 5%, 47% 0, 59% 0, 59% 11%, 77% 11%, 77% 22%, 93% 22%, 93% 33%, 100% 33%, 100% 63%, 89% 63%, 89% 78%, 70% 78%, 70% 93%, 56% 93%, 56% 100%, 40% 100%, 40% 91%, 22% 91%, 22% 77%, 7% 77%, 7% 61%, 0 61%, 0 34%, 8% 34%);
}
.pixel-worldtree i,
.pixel-worldtree b {
  position: absolute;
  z-index: 2;
  height: 6px;
  background: #314a3b;
}
.pixel-worldtree i { left: 4%; top: 31%; width: 43%; box-shadow: 14px -11px 0 #23382c; transform: rotate(8deg); }
.pixel-worldtree b { right: 2%; top: 38%; width: 45%; box-shadow: -13px -13px 0 #293f32; transform: rotate(-9deg); }
.pixel-worldtree em {
  position: absolute;
  left: 13%;
  right: 6%;
  bottom: -2%;
  z-index: 3;
  height: 24%;
  background: #111e17;
  clip-path: polygon(0 44%, 25% 44%, 25% 22%, 43% 22%, 43% 0, 58% 0, 58% 27%, 73% 27%, 73% 52%, 100% 52%, 100% 76%, 71% 76%, 71% 63%, 53% 63%, 53% 100%, 39% 100%, 39% 63%, 20% 63%, 20% 77%, 0 77%);
}
.pixel-worldtree strong {
  position: absolute;
  left: 48%;
  top: 48%;
  z-index: 6;
  width: 10px;
  height: 10px;
  opacity: .14;
  background: #a9c9ae;
  box-shadow: 0 0 0 4px rgba(126, 164, 134, .12), 0 0 18px rgba(126, 164, 134, .16);
  transform: scale(.72);
  transform-origin: center;
}

.pixel-depth-ridge-back .pixel-ridge-back {
  bottom: 29%;
  height: 24%;
  background: #13241b;
  opacity: .92;
}
.pixel-depth-ridge-front .pixel-ridge-front {
  bottom: 21%;
  height: 27%;
  background: #09120e;
}

.pixel-ruin-bridge {
  left: 7%;
  bottom: 29%;
  z-index: 6;
  width: 46%;
  height: 22%;
  border-top: 8px solid #26382d;
  background: #111d17;
  clip-path: polygon(0 0, 88% 0, 88% 14%, 100% 14%, 100% 34%, 86% 34%, 86% 100%, 73% 100%, 73% 54%, 64% 54%, 64% 39%, 49% 39%, 49% 49%, 37% 49%, 37% 100%, 24% 100%, 24% 57%, 16% 57%, 16% 43%, 0 43%);
  box-shadow: inset 0 7px 0 #394c3f;
}
.pixel-ruin-bridge::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 16%;
  top: 13px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #43584a 0 18px, transparent 18px 22px);
}
.pixel-ruin-bridge i,
.pixel-ruin-bridge b {
  position: absolute;
  bottom: 0;
  width: 7px;
  background: #34483b;
}
.pixel-ruin-bridge i { left: 26%; height: 61%; }
.pixel-ruin-bridge b { right: 23%; height: 47%; }

.pixel-runestone {
  z-index: 7;
  width: 5%;
  min-width: 16px;
  background: #405448;
  box-shadow: inset 5px 0 0 #24342b, 4px 3px 0 #050a07;
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 89% 100%, 0 100%, 8% 13%);
}
.pixel-runestone-a { right: 32%; bottom: 27%; height: 21%; transform: rotate(3deg); }
.pixel-runestone-b { right: 24%; bottom: 24%; height: 15%; opacity: .66; transform: rotate(-5deg); }
.pixel-runestone i {
  position: absolute;
  left: 39%;
  top: 25%;
  width: 3px;
  height: 50%;
  background: #86a68d;
  box-shadow: -5px 6px 0 #86a68d, 5px 13px 0 #86a68d;
}

.pixel-depth-water .pixel-lake {
  background: #07130f;
  border-color: #2f4a3a;
  box-shadow: inset 0 8px 0 rgba(21, 43, 32, .86);
}
.pixel-depth-water .pixel-lighthouse {
  right: 13%;
  bottom: 24%;
  width: 12%;
  height: 43%;
  filter: drop-shadow(7px 6px 0 rgba(0, 0, 0, .66));
}
.pixel-depth-water .pixel-lighthouse::before {
  left: 17%;
  right: 15%;
  height: 74%;
  background: #566b5d;
  box-shadow: inset 8px 0 0 #788a7e, inset -8px 0 0 #26372d;
  clip-path: polygon(17% 0, 83% 0, 83% 12%, 94% 12%, 94% 48%, 100% 48%, 100% 100%, 0 100%, 0 48%, 6% 48%, 6% 12%, 17% 12%);
}
.pixel-depth-water .pixel-lighthouse i {
  left: 11%;
  top: 13%;
  width: 78%;
  height: 17%;
  border: 3px solid #0e1913;
  background: #9fc5a7;
  box-shadow: 0 0 0 4px #3a5042, 0 0 22px rgba(159, 197, 167, .28);
}
.pixel-depth-water .pixel-lighthouse b {
  left: 2%;
  top: 3%;
  width: 96%;
  height: 9%;
  background: #101c16;
  box-shadow: 8px -6px 0 #101c16, 16px -6px 0 #101c16, 24px 0 0 #101c16;
}
.pixel-depth-water .pixel-lighthouse em {
  left: 5%;
  right: 3%;
  height: 9%;
  background: #15241b;
  box-shadow: 0 -5px 0 #34483b;
}
.pixel-depth-water .pixel-lighthouse strong {
  position: absolute;
  left: 47%;
  top: 41%;
  z-index: 4;
  width: 4px;
  height: 31%;
  background: #7fa387;
  box-shadow: -7px 7px 0 #7fa387, 7px 17px 0 #7fa387, 0 0 10px rgba(127, 163, 135, .24);
}
.folio-pixel-screen.is-lamp-off .pixel-lighthouse strong { opacity: .28; }
.folio-pixel-screen:not(.is-lamp-off) .pixel-lighthouse strong { background: #bdd6c1; box-shadow: -7px 7px 0 #bdd6c1, 7px 17px 0 #bdd6c1, 0 0 14px rgba(189, 214, 193, .48); }

.pixel-depth-water .pixel-beam {
  right: 18%;
  bottom: 58%;
  width: 35%;
  height: 7px;
  opacity: 0;
  background: repeating-linear-gradient(90deg, rgba(188, 216, 193, .26) 0 9px, rgba(188, 216, 193, .76) 9px 13px, transparent 13px 18px);
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
  transform: scaleX(.08);
  transform-origin: right center;
  animation: none;
}
.pixel-depth-water .pixel-beam::after {
  left: 0;
  top: 0;
  width: 8px;
  height: 7px;
  background: #c4dac7;
  box-shadow: -7px 0 0 rgba(196, 218, 199, .28);
}

.pixel-root-network {
  left: 22%;
  right: 15%;
  bottom: 13%;
  z-index: 6;
  height: 26%;
  opacity: .12;
  transform: scaleX(.08);
  transform-origin: right center;
}
.pixel-root-network::before,
.pixel-root-network::after {
  content: "";
  position: absolute;
  right: 0;
  background: #80a087;
}
.pixel-root-network::before {
  bottom: 37%;
  width: 100%;
  height: 4px;
  box-shadow: 0 6px 0 rgba(128, 160, 135, .2);
  clip-path: polygon(0 0, 31% 0, 31% 35%, 54% 35%, 54% 0, 100% 0, 100% 100%, 54% 100%, 54% 65%, 31% 65%, 31% 100%, 0 100%);
}
.pixel-root-network::after {
  right: 22%;
  bottom: 39%;
  width: 42%;
  height: 3px;
  box-shadow: -15px -10px 0 rgba(128, 160, 135, .65), 19px 11px 0 rgba(128, 160, 135, .5);
  transform: rotate(-13deg);
}
.pixel-root-network i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  background: #b6ceb9;
  border: 2px solid #24372b;
  box-shadow: 0 0 8px rgba(182, 206, 185, .34);
}
.pixel-root-network i:nth-child(1) { left: 2%; bottom: 33%; }
.pixel-root-network i:nth-child(2) { left: 28%; bottom: 33%; }
.pixel-root-network i:nth-child(3) { left: 51%; bottom: 33%; }
.pixel-root-network i:nth-child(4) { left: 70%; bottom: 47%; }
.pixel-root-network i:nth-child(5) { right: 1%; bottom: 33%; }

.folio-pixel-screen.is-linked .pixel-root-network { opacity: .7; transform: scaleX(1); }
.folio-pixel-screen.is-linked .pixel-worldtree strong { opacity: .72; transform: scale(1); box-shadow: 0 0 0 4px rgba(154, 193, 162, .18), 0 0 24px rgba(154, 193, 162, .5); }
.folio-pixel-screen.is-linked .pixel-beam { opacity: .18; transform: scaleX(1); }
.folio-pixel-screen.is-linked .pixel-reflection { opacity: .28; }
.folio-pixel-screen.is-linked .pixel-lighthouse i { background: #b5d8bc; box-shadow: 0 0 16px rgba(172, 217, 179, .48), 0 0 0 3px #526459; }

.pixel-root-arch {
  inset: 0;
  z-index: 9;
}
.pixel-root-arch::before,
.pixel-root-arch::after {
  content: "";
  position: absolute;
  top: -2%;
  bottom: 0;
  width: 29%;
  background: #030806;
  filter: drop-shadow(6px 0 0 #101a14);
}
.pixel-root-arch::before {
  left: 0;
  clip-path: polygon(0 0, 58% 0, 58% 13%, 70% 13%, 70% 29%, 82% 29%, 82% 45%, 94% 45%, 94% 59%, 75% 59%, 75% 48%, 61% 48%, 61% 72%, 48% 72%, 48% 100%, 0 100%);
}
.pixel-root-arch::after {
  right: 0;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 51% 100%, 51% 74%, 39% 74%, 39% 54%, 25% 54%, 25% 65%, 7% 65%, 7% 48%, 19% 48%, 19% 31%, 31% 31%, 31% 14%, 38% 14%);
}
.pixel-root-arch i,
.pixel-root-arch b,
.pixel-root-arch em {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 6px;
  background: #1c2a22;
  transform-origin: bottom;
}
.pixel-root-arch i { left: 18%; height: 48%; transform: rotate(15deg); box-shadow: 13px -12px 0 #101b15; }
.pixel-root-arch b { right: 16%; height: 41%; transform: rotate(-13deg); box-shadow: -15px -8px 0 #121f18; }
.pixel-root-arch em { left: 49%; height: 17%; transform: rotate(4deg); opacity: .6; }

.folio-pixel-screen.is-clear .pixel-aurora { opacity: .82; }
.folio-pixel-screen.is-clear .pixel-rune-constellation { opacity: .82; }

.folio-pixel-hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  color: rgba(199, 219, 202, .72);
  font-family: var(--mono);
  pointer-events: none;
}

.folio-pixel-zone-copy {
  position: absolute;
  left: 18px;
  top: 17px;
  display: grid;
  min-width: 188px;
  margin: 0;
  padding: 9px 12px 10px;
  border-left: 2px solid rgba(158, 199, 166, .56);
  background: linear-gradient(90deg, rgba(4, 10, 7, .84), rgba(4, 10, 7, .08));
  opacity: .72;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.folio-pixel-zone-copy small { color: rgba(168, 199, 174, .48); font: 600 6px/1 var(--mono); letter-spacing: .16em; }
.folio-pixel-zone-copy strong { margin-top: 7px; color: #bdd6c1; font: 600 10px/1 var(--mono); letter-spacing: .08em; }
.folio-pixel-zone-copy span { margin-top: 6px; color: rgba(210, 224, 211, .62); font: 500 7px/1.3 var(--sans); letter-spacing: .04em; }
.folio-pixel-hud[data-zone] .folio-pixel-zone-copy { opacity: 1; border-color: rgba(183, 218, 190, .9); }

.folio-pixel-beacon-callout {
  position: absolute;
  right: 13.5%;
  top: 32%;
  display: block;
  width: 72px;
  height: 72px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: rgba(207, 225, 210, .78);
  z-index: 12;
  background: rgba(11, 25, 17, .08);
  border: 2px solid rgba(181, 216, 187, .72);
  box-shadow: 0 0 0 5px rgba(3, 9, 6, .58), 0 0 22px rgba(145, 190, 154, .24);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-beacon-callout::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(190, 222, 196, .74);
  box-shadow: inset 0 0 12px rgba(154, 202, 163, .18);
  animation: garden-beacon-locate 1.8s steps(2, end) infinite;
}
.folio-pixel-beacon-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #c0d9c5;
  box-shadow: 0 0 0 4px rgba(166, 207, 174, .18), 0 0 18px rgba(166, 207, 174, .72);
  transform: translate(-50%, -50%) rotate(45deg);
}
.folio-pixel-beacon-callout > i {
  position: absolute;
  left: -44px;
  top: 50%;
  width: 44px;
  height: 1px;
  border: 0;
  background: repeating-linear-gradient(90deg, rgba(181, 216, 187, .82) 0 6px, transparent 6px 10px);
  transform: translateY(-50%);
}
.folio-pixel-beacon-callout strong,
.folio-pixel-beacon-callout span {
  position: absolute;
  right: calc(100% + 43px);
  width: 156px;
  padding: 7px 9px;
  text-align: right;
  white-space: nowrap;
  background: rgba(3, 9, 6, .9);
}
.folio-pixel-beacon-callout strong { top: 10px; color: #d2e4d5; border-left: 2px solid #9fc5a7; font: 700 10px/1 var(--mono); letter-spacing: .04em; }
.folio-pixel-beacon-callout span { top: 37px; color: rgba(213, 229, 215, .7); font: 500 8px/1.2 var(--sans); letter-spacing: .03em; }
.folio-pixel-screen[data-pixel-zone="lamp"] .folio-pixel-beacon-callout { border-color: #c9dfcd; background: rgba(105, 155, 115, .16); transform: scale(1.08); }
.folio-pixel-screen.is-signal-active .folio-pixel-beacon-callout { border-color: #a7cbae; }
.folio-pixel-screen.is-signal-active .folio-pixel-beacon-callout::after { background: #e0eee2; box-shadow: 0 0 0 5px rgba(188, 222, 194, .2), 0 0 24px rgba(188, 222, 194, .9); }
.folio-pixel-screen.is-linked .folio-pixel-beacon-callout { border-color: rgba(181, 218, 188, .84); background: rgba(63, 104, 71, .16); }
.folio-pixel-screen.is-linked .folio-pixel-beacon-callout::after { background: #c0ddc5; box-shadow: 0 0 14px rgba(165, 209, 173, .76); }

.folio-pixel-screen.is-lamp-off .pixel-lighthouse i {
  background: #789a80;
  box-shadow: 0 0 0 3px #3b5142, 0 0 17px rgba(142, 190, 151, .42);
  animation: garden-beacon-core 1.8s steps(2, end) infinite;
}
.folio-pixel-screen.is-lamp-off .pixel-lighthouse strong { opacity: .68; }

@keyframes garden-beacon-locate {
  0%, 100% { opacity: .42; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes garden-beacon-core {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

.pixel-beacon-target {
  right: 13.5%;
  top: 32%;
  z-index: 12;
  width: 72px;
  height: 72px;
  background: rgba(11, 25, 17, .08);
  border: 2px solid rgba(181, 216, 187, .72);
  box-shadow: 0 0 0 5px rgba(3, 9, 6, .42), 0 0 22px rgba(145, 190, 154, .24);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-beacon-target::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(190, 222, 196, .74);
  box-shadow: inset 0 0 12px rgba(154, 202, 163, .18);
  animation: garden-beacon-locate 1.8s steps(2, end) infinite;
}
.pixel-beacon-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #c0d9c5;
  box-shadow: 0 0 0 4px rgba(166, 207, 174, .18), 0 0 18px rgba(166, 207, 174, .72);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pixel-beacon-target > i {
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(181, 216, 187, .82) 0 6px, transparent 6px 10px);
  transform: translateY(-50%);
}
.folio-pixel-screen[data-pixel-zone="lamp"] .pixel-beacon-target { border-color: #c9dfcd; background: rgba(105, 155, 115, .16); transform: scale(1.08); }
.folio-pixel-screen.is-signal-active .pixel-beacon-target::after { background: #e0eee2; box-shadow: 0 0 0 5px rgba(188, 222, 194, .2), 0 0 24px rgba(188, 222, 194, .9); }
.folio-pixel-screen.is-linked .pixel-beacon-target { border-color: rgba(181, 218, 188, .84); background: rgba(63, 104, 71, .16); }

.folio-pixel-vista { padding-bottom: 68px; }
.folio-pixel-actionbar {
  position: absolute;
  left: 50%;
  bottom: -59px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
  width: min(460px, 88%);
  margin: 0;
  padding: 10px 14px;
  color: rgba(210, 227, 213, .76);
  background: rgba(3, 9, 6, .9);
  border-top: 1px solid rgba(160, 198, 167, .4);
  transform: translateX(-50%);
}
.folio-pixel-actionbar > i {
  grid-row: 1 / 3;
  align-self: center;
  width: 9px;
  height: 9px;
  border: 1px solid #9fc5a7;
  transform: rotate(45deg);
}
.folio-pixel-actionbar strong { color: #d2e4d5; font: 700 10px/1.15 var(--mono); letter-spacing: .04em; }
.folio-pixel-actionbar span { margin-top: 5px; color: rgba(207, 225, 210, .68); font: 500 9px/1.35 var(--sans); letter-spacing: .03em; }
.folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar { border-color: #a7cbae; }
.folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar > i { background: #c7dec9; box-shadow: 0 0 12px rgba(185, 214, 190, .7); }
.folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar { background: rgba(8, 21, 13, .94); border-color: rgba(156, 197, 164, .7); }
.folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar > i { background: #c0ddc5; box-shadow: 0 0 14px rgba(165, 209, 173, .62); }

.pixel-root-arch::after {
  width: 9%;
  opacity: .68;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .28));
  clip-path: polygon(46% 0, 100% 0, 100% 100%, 50% 100%, 50% 72%, 28% 72%, 28% 46%, 46% 46%);
}
.pixel-root-arch b { right: 3%; height: 23%; opacity: .62; box-shadow: none; }

/* V136 — a staged Yggdrasil awakening: heart, nine roots, ruins, then sky. */
.pixel-worldtree {
  left: 25%;
  top: 0;
  width: 50%;
  height: 73%;
  opacity: .9;
  transform-origin: 50% 72%;
}
.pixel-worldtree::before { background: #263c2f; box-shadow: inset 8px 0 0 #3b5544, inset -7px 0 0 #0a1510; }
.pixel-worldtree::after { background: #1b3025; box-shadow: inset 0 -8px 0 #0a1610; }
.pixel-worldtree strong {
  left: 48%;
  top: 48%;
  width: 12px;
  height: 12px;
  opacity: .32;
  background: #b7d0bb;
  box-shadow: 0 0 0 5px rgba(146, 190, 154, .14), 0 0 22px rgba(146, 190, 154, .28);
  transform: scale(.86);
}

.pixel-depth-ridge-back .pixel-ridge-back { bottom: 25%; height: 22%; opacity: .72; }
.pixel-depth-ridge-front .pixel-ridge-front { bottom: 18%; height: 23%; opacity: .82; }

.pixel-ruin-bridge {
  left: 29%;
  bottom: 17%;
  width: 42%;
  height: 37%;
  border: 0;
  background: #18261e;
  box-shadow: inset 0 7px 0 #354a3b;
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}
.pixel-ruin-bridge::before {
  left: 47%;
  right: auto;
  top: 8%;
  width: 6%;
  height: 78%;
  background: repeating-linear-gradient(180deg, #8ba793 0 5px, transparent 5px 13px);
}
.pixel-ruin-bridge i,
.pixel-ruin-bridge b { bottom: 2%; width: 6px; height: 46%; background: #43594a; }
.pixel-ruin-bridge i { left: 14%; }
.pixel-ruin-bridge b { right: 14%; }

.pixel-runestone-a { left: 18%; right: auto; bottom: 23%; height: 23%; transform: rotate(-3deg); }
.pixel-runestone-b { right: 18%; bottom: 23%; height: 23%; opacity: .78; transform: rotate(3deg); }

.pixel-root-network {
  left: 12%;
  right: 12%;
  bottom: 5%;
  height: 42%;
  opacity: .58;
  transform: none;
  transform-origin: 50% 0;
}
.pixel-root-network::before {
  left: calc(50% - 1px);
  right: auto;
  top: 0;
  bottom: auto;
  width: 3px;
  height: 18%;
  background: linear-gradient(#9ebda5, #4f725a);
  box-shadow: 0 0 11px rgba(151, 195, 160, .24);
  clip-path: none;
}
.pixel-root-network::after {
  left: 50%;
  right: auto;
  top: 14%;
  bottom: auto;
  width: 9px;
  height: 9px;
  background: #aac7af;
  box-shadow: 0 0 0 4px rgba(142, 184, 150, .13), 0 0 15px rgba(142, 184, 150, .34);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pixel-root-network i {
  --root-angle: 90deg;
  --root-length: 29%;
  left: 50%;
  top: 16%;
  z-index: 2;
  width: var(--root-length);
  height: 3px;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, rgba(159, 199, 167, .92), rgba(103, 148, 113, .44));
  border: 0;
  box-shadow: 0 0 7px rgba(146, 193, 155, .18);
  opacity: .22;
  transform: rotate(var(--root-angle)) scaleX(.34);
  transform-origin: 0 50%;
}
.pixel-root-network i:nth-child(n) { left: 50%; right: auto; top: 16%; bottom: auto; }
.pixel-root-network i:nth-child(1) { --root-angle: 151deg; --root-length: 48%; }
.pixel-root-network i:nth-child(2) { --root-angle: 137deg; --root-length: 40%; }
.pixel-root-network i:nth-child(3) { --root-angle: 124deg; --root-length: 34%; }
.pixel-root-network i:nth-child(4) { --root-angle: 103deg; --root-length: 30%; }
.pixel-root-network i:nth-child(5) { --root-angle: 90deg; --root-length: 29%; }
.pixel-root-network i:nth-child(6) { --root-angle: 77deg; --root-length: 30%; }
.pixel-root-network i:nth-child(7) { --root-angle: 56deg; --root-length: 34%; }
.pixel-root-network i:nth-child(8) { --root-angle: 43deg; --root-length: 40%; }
.pixel-root-network i:nth-child(9) { --root-angle: 29deg; --root-length: 48%; }
.pixel-root-network i > b {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #a9c9ae;
  border: 2px solid #213329;
  box-shadow: 0 0 9px rgba(177, 211, 184, .38);
  opacity: .46;
  transform: translateY(-50%) rotate(45deg) scale(.72);
  transform-origin: center;
}

.pixel-canopy-echo {
  left: 25%;
  top: 0;
  z-index: 4;
  width: 50%;
  height: 43%;
  pointer-events: none;
}
.pixel-canopy-echo i {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(119, 164, 128, .22);
  clip-path: polygon(8% 18%, 31% 18%, 31% 5%, 47% 5%, 47% 0, 59% 0, 59% 11%, 77% 11%, 77% 22%, 93% 22%, 93% 33%, 100% 33%, 100% 63%, 89% 63%, 89% 78%, 70% 78%, 70% 93%, 56% 93%, 56% 100%, 40% 100%, 40% 91%, 22% 91%, 22% 77%, 7% 77%, 7% 61%, 0 61%, 0 34%, 8% 34%);
  opacity: 0;
  transform: scale(.96);
  transform-origin: 50% 92%;
}

.pixel-heart-burst {
  position: absolute;
  left: 50%;
  top: 36%;
  z-index: 30;
  display: block;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  pointer-events: none;
}
.pixel-heart-burst i {
  position: absolute;
  inset: 3px;
  display: block;
  border: 1px solid rgba(196, 225, 201, .72);
  box-shadow: 0 0 16px rgba(151, 203, 162, .22), inset 0 0 9px rgba(151, 203, 162, .12);
  opacity: 0;
  transform: scale(.48) rotate(45deg);
}
.folio-pixel-vista.is-signal-active .pixel-heart-burst i:nth-child(1) { animation: garden-tree-heart-ring 880ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-active .pixel-heart-burst i:nth-child(2) { animation: garden-tree-heart-ring 1040ms cubic-bezier(.23, 1, .32, 1) 90ms both; }
.folio-pixel-vista.is-replay-active .pixel-heart-burst i:nth-child(1) { animation-duration: 620ms; }
.folio-pixel-vista.is-replay-active .pixel-heart-burst i:nth-child(2) { animation-duration: 720ms; animation-delay: 55ms; }

@keyframes garden-tree-heart-ring {
  0% { opacity: 0; transform: scale(.48) rotate(45deg); }
  12% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.82) rotate(45deg); }
}

.folio-pixel-screen.is-linked .pixel-root-network { opacity: .92; transform: none; }
.folio-pixel-screen.is-linked .pixel-root-network i { opacity: .78; transform: rotate(var(--root-angle)) scaleX(1); }
.folio-pixel-screen.is-linked .pixel-root-network i > b { opacity: 1; transform: translateY(-50%) rotate(45deg) scale(1); }
.folio-pixel-screen.is-linked .pixel-rune-constellation { opacity: .68; }
.folio-pixel-screen.is-linked .pixel-runestone i { background: #a8c8ae; box-shadow: -5px 6px 0 #789a80, 5px 13px 0 #789a80, 0 0 12px rgba(157, 201, 166, .34); }
.folio-outro:not(.is-inview) .pixel-rain,
.folio-outro:not(.is-inview) .pixel-fireflies i,
.folio-outro:not(.is-inview) .folio-pixel-bleed-fireflies i,
.folio-outro:not(.is-inview) .folio-pixel-bleed-mist,
.folio-outro:not(.is-inview) .folio-pixel-bleed-water > * { animation-play-state: paused !important; }

.pixel-tree-target {
  position: absolute;
  display: block;
  left: 50%;
  top: 36%;
  z-index: 31;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 2px solid rgba(190, 221, 196, .74);
  box-shadow: 0 0 0 5px rgba(3, 9, 6, .38), 0 0 24px rgba(150, 198, 160, .24);
  pointer-events: none;
  transform: scale(.88);
  transition: border-color 180ms ease, background-color 180ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-tree-target::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(197, 226, 202, .72);
  animation: none;
}
.pixel-tree-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  background: #c8ddcb;
  box-shadow: 0 0 0 4px rgba(178, 211, 184, .16), 0 0 18px rgba(178, 211, 184, .65);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pixel-tree-target i {
  position: absolute;
  left: calc(100% + 11px);
  top: 50%;
  width: 42px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(189, 220, 195, .68) 0 5px, transparent 5px 9px);
  transform: translateY(-50%);
}
.pixel-tree-target i::after {
  content: "树心 / TREE HEART";
  position: absolute;
  left: 48px;
  top: 50%;
  width: max-content;
  padding: 5px 7px;
  color: rgba(211, 230, 214, .86);
  background: rgba(3, 9, 6, .82);
  border-left: 1px solid rgba(190, 221, 196, .62);
  font: 600 7px/1 var(--mono);
  letter-spacing: .08em;
  transform: translateY(-50%);
}
.folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target {
  border-color: #d4e6d7;
  background: rgba(115, 163, 124, .14);
  transform: scale(.98);
}
.folio-pixel-vista.is-signal-active .pixel-tree-target::after { background: #e3eee5; box-shadow: 0 0 0 5px rgba(199, 225, 204, .2), 0 0 28px rgba(199, 225, 204, .9); }
.folio-pixel-vista.is-signal-active .pixel-tree-target { transform: scale(1.02); }
.folio-pixel-vista.is-linked .pixel-tree-target { border-color: rgba(190, 224, 196, .88); background: rgba(77, 126, 86, .15); }
.folio-pixel-screen.is-linked .pixel-worldtree { opacity: 1; }
.folio-pixel-screen.is-linked .pixel-worldtree strong { opacity: .82; transform: scale(1); box-shadow: 0 0 0 6px rgba(165, 207, 173, .2), 0 0 30px rgba(165, 207, 173, .62); }
.folio-pixel-screen.is-linked .pixel-aurora { opacity: .62; }
.folio-pixel-screen.is-linked .pixel-root-network { opacity: .92; transform: none; }

.pixel-root-arch::before { width: 8%; opacity: .62; }
.pixel-root-arch::after { width: 8%; opacity: .62; }
.pixel-root-arch i { left: 6%; height: 32%; opacity: .58; box-shadow: none; }
.pixel-root-arch b { right: 6%; height: 32%; opacity: .58; }

.folio-pixel-reticle {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
  border: 1px solid rgba(183, 216, 189, .72);
  box-shadow: 0 0 12px rgba(147, 191, 155, .16), inset 0 0 8px rgba(147, 191, 155, .08);
  transform: translate3d(-80px, -80px, 0);
  transition: opacity 120ms ease;
}
.folio-pixel-reticle::before,
.folio-pixel-reticle::after {
  content: "";
  position: absolute;
  background: rgba(191, 222, 197, .78);
}
.folio-pixel-reticle::before { left: 50%; top: -6px; width: 1px; height: 46px; }
.folio-pixel-reticle::after { left: -6px; top: 50%; width: 46px; height: 1px; }
.folio-pixel-reticle i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: #c5ddc9; transform: translate(-50%, -50%); }
.folio-pixel-hud[data-zone] .folio-pixel-reticle { opacity: .86; }

.folio-pixel-depth-meter {
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  justify-items: end;
  gap: 6px;
  margin: 0;
  color: rgba(171, 199, 176, .34);
  font: 600 5px/1 var(--mono);
  letter-spacing: .12em;
  transform: translateY(-50%);
}
.folio-pixel-depth-meter i {
  width: 38px;
  height: 1px;
  background: rgba(159, 197, 167, .2);
  transform: scaleX(.58);
  transform-origin: 100% 50%;
  transition: transform 180ms cubic-bezier(.23, 1, .32, 1), background-color 180ms ease;
}
.folio-pixel-hud[data-zone="moon"] .folio-pixel-depth-meter span:first-child,
.folio-pixel-hud[data-zone="sky"] .folio-pixel-depth-meter span:first-child,
.folio-pixel-hud[data-zone="lamp"] .folio-pixel-depth-meter span:nth-of-type(2),
.folio-pixel-hud[data-zone="water"] .folio-pixel-depth-meter span:nth-of-type(3) { color: #b9d6be; }
.folio-pixel-hud[data-zone="moon"] .folio-pixel-depth-meter i:first-of-type,
.folio-pixel-hud[data-zone="sky"] .folio-pixel-depth-meter i:first-of-type,
.folio-pixel-hud[data-zone="lamp"] .folio-pixel-depth-meter i:nth-of-type(2),
.folio-pixel-hud[data-zone="water"] .folio-pixel-depth-meter i:nth-of-type(3) { background: rgba(184, 218, 190, .72); transform: scaleX(1); }

.folio-pixel-touch-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: none;
  margin: 0;
  padding: 7px 10px;
  color: rgba(207, 223, 209, .68);
  background: rgba(4, 10, 7, .72);
  font: 600 7px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.folio-outro.is-motion-ready .folio-pixel-vista { opacity: 1; transform: none; }
.folio-outro.is-motion-ready .folio-pixel-stage {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.94);
}
.folio-outro.is-motion-ready:not(.is-visible) .pixel-depth-layer { opacity: .46; transform: translateZ(0) scale(.96); }
.folio-outro.is-motion-ready.is-visible .folio-pixel-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1) 80ms, transform 680ms cubic-bezier(.23, 1, .32, 1) 80ms;
}
.folio-outro.is-motion-ready.is-visible .pixel-depth-sky { transition-delay: 80ms; }
.folio-outro.is-motion-ready.is-visible .pixel-depth-ridge-back { transition-delay: 125ms; }
.folio-outro.is-motion-ready.is-visible .pixel-depth-ridge-front { transition-delay: 170ms; }
.folio-outro.is-motion-ready.is-visible .pixel-depth-water { transition-delay: 215ms; }
.folio-outro.is-motion-ready.is-visible .pixel-depth-foreground { transition-delay: 260ms; }

@media (hover: hover) and (pointer: fine) {
  .folio-pixel-stage:hover .folio-pixel-zone-copy { opacity: 1; }
}

/* V137 — keep the screen-aligned interface above the 3D miniature. */
.folio-pixel-vista {
  z-index: 1;
  padding-bottom: 84px;
}
.folio-pixel-stage {
  isolation: isolate;
  transform-style: flat;
}
.folio-pixel-diorama { z-index: 1; }
.folio-pixel-hud {
  z-index: 60;
  isolation: isolate;
  transform-style: flat;
}
.folio-pixel-actionbar { z-index: 2; }
.folio-outro-meta {
  position: relative;
  z-index: 4;
  isolation: isolate;
}
.folio-outro-meta::before {
  content: "";
  position: absolute;
  inset: -30px -18px -14px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 5, .88) 46%, rgba(4, 6, 5, .96));
  pointer-events: none;
}

/* The light theme keeps the same dusk composition, redrawn in paper grey and deep moss. */
:root[data-resolved-theme="light"] .folio-pixel-stage::before {
  opacity: .42;
  background: radial-gradient(ellipse, rgba(45, 64, 49, .24), transparent 70%);
}
:root[data-resolved-theme="light"] .folio-pixel-stage::after { color: rgba(39, 82, 50, .56); }
:root[data-resolved-theme="light"] .folio-pixel-diorama::before {
  background: #aab6ac;
  border-color: rgba(42, 76, 50, .3);
  box-shadow: 0 28px 62px rgba(42, 57, 46, .2);
}
:root[data-resolved-theme="light"] .folio-pixel-shell-right {
  background: #8f9f92;
  border-right-color: #536459;
  box-shadow: inset 8px 0 0 #b3bdb4, inset 13px 0 0 #748579;
}
:root[data-resolved-theme="light"] .folio-pixel-shell-bottom {
  background: #87988b;
  border-bottom-color: #536459;
  box-shadow: inset 0 8px 0 #b4beb5, inset 0 13px 0 #708176;
}
:root[data-resolved-theme="light"] .folio-pixel-shell::after {
  opacity: .28;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(37, 76, 48, .28) 9px 11px);
}
:root[data-resolved-theme="light"] .folio-pixel-brief {
  border-color: rgba(39, 82, 50, .2);
}
:root[data-resolved-theme="light"] .folio-pixel-brief small { color: rgba(47, 90, 57, .68); }
:root[data-resolved-theme="light"] .folio-pixel-brief h3 { color: #243328; }
:root[data-resolved-theme="light"] .folio-pixel-brief p { color: rgba(37, 54, 42, .72); }
:root[data-resolved-theme="light"] .pixel-worldtree {
  filter: drop-shadow(8px 6px 0 rgba(44, 61, 48, .2));
}
:root[data-resolved-theme="light"] .pixel-worldtree::before {
  background: #496553;
  box-shadow: inset 8px 0 0 #66806d, inset -7px 0 0 #2b4032;
}
:root[data-resolved-theme="light"] .pixel-worldtree::after {
  background: #385744;
  box-shadow: inset 0 -8px 0 #294033;
}
:root[data-resolved-theme="light"] .pixel-worldtree i,
:root[data-resolved-theme="light"] .pixel-worldtree b { background: #5d7966; }
:root[data-resolved-theme="light"] .pixel-worldtree i { box-shadow: 14px -11px 0 #45614f; }
:root[data-resolved-theme="light"] .pixel-worldtree b { box-shadow: -13px -13px 0 #4e6a57; }
:root[data-resolved-theme="light"] .pixel-worldtree em { background: #304838; }
:root[data-resolved-theme="light"] .pixel-worldtree strong {
  background: #285f3b;
  box-shadow: 0 0 0 5px rgba(43, 102, 61, .16), 0 0 20px rgba(43, 102, 61, .28);
}
:root[data-resolved-theme="light"] .pixel-canopy-echo i { background: rgba(48, 105, 63, .2); }
:root[data-resolved-theme="light"] .pixel-depth-ridge-back .pixel-ridge-back { background: #849589; }
:root[data-resolved-theme="light"] .pixel-depth-ridge-front .pixel-ridge-front { background: #637568; }
:root[data-resolved-theme="light"] .pixel-ruin-bridge {
  background: #53685a;
  box-shadow: inset 0 7px 0 #829388;
}
:root[data-resolved-theme="light"] .pixel-ruin-bridge::before {
  background: repeating-linear-gradient(180deg, #d0d9d1 0 5px, transparent 5px 13px);
}
:root[data-resolved-theme="light"] .pixel-ruin-bridge i,
:root[data-resolved-theme="light"] .pixel-ruin-bridge b { background: #344c3b; }
:root[data-resolved-theme="light"] .pixel-runestone {
  background: #697b6e;
  box-shadow: inset 5px 0 0 #87978b, 4px 3px 0 rgba(41, 58, 46, .34);
}
:root[data-resolved-theme="light"] .pixel-runestone i {
  background: #e1e8e0;
  box-shadow: -5px 6px 0 #e1e8e0, 5px 13px 0 #e1e8e0;
}
:root[data-resolved-theme="light"] .pixel-root-network::before {
  background: linear-gradient(#2f6841, #4d7559);
  box-shadow: 0 0 11px rgba(45, 100, 61, .2);
}
:root[data-resolved-theme="light"] .pixel-root-network::after {
  background: #2d6840;
  box-shadow: 0 0 0 4px rgba(45, 104, 64, .14), 0 0 15px rgba(45, 104, 64, .25);
}
:root[data-resolved-theme="light"] .pixel-root-network i {
  background: linear-gradient(90deg, rgba(39, 103, 59, .94), rgba(72, 125, 83, .54));
  box-shadow: 0 0 7px rgba(39, 103, 59, .16);
}
:root[data-resolved-theme="light"] .pixel-root-network i > b {
  background: #2e6840;
  border-color: #dbe3dc;
  box-shadow: 0 0 9px rgba(39, 103, 59, .28);
}
:root[data-resolved-theme="light"] .pixel-root-arch::before,
:root[data-resolved-theme="light"] .pixel-root-arch::after {
  background: #344a3b;
  filter: drop-shadow(6px 0 0 rgba(55, 72, 60, .18));
}
:root[data-resolved-theme="light"] .pixel-root-arch i,
:root[data-resolved-theme="light"] .pixel-root-arch b,
:root[data-resolved-theme="light"] .pixel-root-arch em { background: #536a59; }
:root[data-resolved-theme="light"] .pixel-rune-constellation::before,
:root[data-resolved-theme="light"] .pixel-rune-constellation::after { background: #3e704d; }
:root[data-resolved-theme="light"] .pixel-rune-constellation i {
  background: #285e3a;
  box-shadow: 0 0 0 2px rgba(40, 94, 58, .12);
}
:root[data-resolved-theme="light"] .pixel-tree-target {
  border-color: rgba(39, 93, 55, .74);
  box-shadow: 0 0 0 5px rgba(235, 240, 233, .72), 0 0 22px rgba(39, 93, 55, .2);
}
:root[data-resolved-theme="light"] .pixel-tree-target::before { border-color: rgba(39, 93, 55, .62); }
:root[data-resolved-theme="light"] .pixel-tree-target::after {
  background: #2f6a42;
  box-shadow: 0 0 0 4px rgba(47, 106, 66, .14), 0 0 16px rgba(47, 106, 66, .34);
}
:root[data-resolved-theme="light"] .folio-pixel-vista.is-signal-active .pixel-tree-target::after {
  background: #225d36;
  box-shadow: 0 0 0 5px rgba(34, 93, 54, .16), 0 0 24px rgba(34, 93, 54, .42);
}
:root[data-resolved-theme="light"] .folio-pixel-vista.is-linked .pixel-tree-target {
  border-color: rgba(39, 93, 55, .82);
  background: rgba(47, 106, 66, .1);
}
:root[data-resolved-theme="light"] .folio-pixel-screen.is-linked .pixel-worldtree strong {
  background: #245f38;
  box-shadow: 0 0 0 6px rgba(36, 95, 56, .16), 0 0 26px rgba(36, 95, 56, .4);
}
:root[data-resolved-theme="light"] .pixel-tree-target i {
  background: repeating-linear-gradient(90deg, rgba(39, 93, 55, .72) 0 5px, transparent 5px 9px);
}
:root[data-resolved-theme="light"] .pixel-tree-target i::after {
  color: #193522;
  background: rgba(233, 239, 231, .94);
  border-left-color: rgba(39, 93, 55, .62);
}
:root[data-resolved-theme="light"] .pixel-heart-burst i {
  border-color: rgba(39, 103, 59, .68);
  box-shadow: 0 0 16px rgba(39, 103, 59, .18), inset 0 0 9px rgba(39, 103, 59, .1);
}
:root[data-resolved-theme="light"] .folio-pixel-interaction:focus-visible {
  outline-color: #2f6a42;
  box-shadow: 0 0 0 13px rgba(232, 238, 230, .72);
}
:root[data-resolved-theme="light"] .folio-pixel-hud { color: rgba(37, 63, 44, .72); }
:root[data-resolved-theme="light"] .folio-pixel-actionbar {
  color: rgba(37, 63, 44, .78);
  background: rgba(231, 237, 229, .94);
  border-color: rgba(39, 93, 55, .42);
  box-shadow: 0 12px 28px rgba(42, 57, 46, .12);
}
:root[data-resolved-theme="light"] .folio-pixel-actionbar > i { border-color: #2f6a42; }
:root[data-resolved-theme="light"] .folio-pixel-actionbar strong { color: #203526; }
:root[data-resolved-theme="light"] .folio-pixel-actionbar span { color: rgba(37, 63, 44, .68); }
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar { border-color: #39754b; }
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar > i {
  background: #39754b;
  box-shadow: 0 0 10px rgba(57, 117, 75, .32);
}
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar {
  background: rgba(220, 231, 220, .96);
  border-color: rgba(39, 93, 55, .62);
}
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar > i {
  background: #2f6a42;
  box-shadow: 0 0 12px rgba(47, 106, 66, .28);
}
:root[data-resolved-theme="light"] .folio-outro-meta::before {
  background: linear-gradient(180deg, transparent, rgba(227, 232, 224, .9) 46%, rgba(227, 232, 224, .98));
}

/* V139 — contextual discovery: the heart whispers; sky, stones and roots answer the pointer. */
.pixel-tree-target {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-width: 1px;
  opacity: .44;
  box-shadow: 0 0 0 4px rgba(3, 9, 6, .28), 0 0 15px rgba(150, 198, 160, .14);
  transform: scale(.96);
  transition: opacity 160ms ease, border-color 180ms ease, background-color 180ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-tree-target::before {
  inset: 8px;
  opacity: .48;
}
.pixel-tree-target::after {
  width: 9px;
  height: 9px;
}
.pixel-tree-target i {
  left: calc(100% + 9px);
  width: 34px;
  opacity: 0;
  transform: translate3d(-7px, -50%, 0);
  transition: opacity 150ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.pixel-tree-target i::after { left: 40px; }
.folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target,
.folio-pixel-vista.is-signal-active .pixel-tree-target {
  opacity: 1;
  transform: scale(1);
}
.folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target i {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}
.folio-pixel-stage:has(.folio-pixel-interaction:focus-visible) .pixel-tree-target,
.folio-pixel-stage:has(.folio-pixel-interaction:focus-visible) .pixel-tree-target i { transition: none; }
.folio-pixel-vista.is-linked:not(.is-signal-active) .pixel-tree-target { opacity: .68; }

@media (hover: hover) and (pointer: fine) {
  .pixel-aurora,
  .pixel-rune-constellation,
  .pixel-rune-constellation i,
  .pixel-runestone,
  .pixel-ruin-bridge,
  .pixel-root-network,
  .pixel-root-network i,
  .pixel-root-network i > b {
    transition-property: opacity, transform;
    transition-duration: 180ms, 280ms;
    transition-timing-function: ease, cubic-bezier(.23, 1, .32, 1);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora {
    opacity: .5;
    transform: skewX(-9deg) translate3d(2%, -2px, 0);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora { opacity: .76; }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation {
    opacity: .7;
    transform: translate3d(0, -2px, 0) scale(1.025);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation { opacity: .8; }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation i { transform: scale(1.16); }

  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-ruin-bridge {
    opacity: 1;
    transform: translate3d(0, -2px, 0);
  }
  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-runestone-a {
    opacity: 1;
    transform: rotate(-3deg) translate3d(0, -3px, 0) scale(1.055);
  }
  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-runestone-b {
    opacity: 1;
    transform: rotate(3deg) translate3d(0, -3px, 0) scale(1.055);
  }

  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network { opacity: .84; }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active):not(.is-linked) .pixel-root-network i {
    opacity: .5;
    transform: rotate(var(--root-angle)) scaleX(.52);
  }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active):not(.is-linked) .pixel-root-network i > b {
    opacity: .74;
    transform: translateY(-50%) rotate(45deg) scale(.88);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network { opacity: 1; }
  .folio-pixel-screen.is-linked[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i {
    opacity: .94;
    transform: rotate(var(--root-angle)) scaleX(1.025);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i > b {
    transform: translateY(-50%) rotate(45deg) scale(1.12);
  }
}

/* V140 — remove the scanner box and turn each discovery zone into a readable pose. */
.pixel-tree-target,
.folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target,
.folio-pixel-vista.is-linked .pixel-tree-target {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.pixel-tree-target { opacity: .58; }
.pixel-tree-target::before {
  inset: 0;
  border: 0;
  opacity: 0;
  background:
    linear-gradient(#b8d4bd, #b8d4bd) left top / 9px 1px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) left top / 1px 9px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) right top / 9px 1px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) right top / 1px 9px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) left bottom / 9px 1px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) left bottom / 1px 9px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) right bottom / 9px 1px no-repeat,
    linear-gradient(#b8d4bd, #b8d4bd) right bottom / 1px 9px no-repeat;
  box-shadow: none;
  transform: scale(.92);
  transition: opacity 150ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target::before,
.folio-pixel-vista.is-signal-active .pixel-tree-target::before {
  opacity: .72;
  transform: scale(1);
}
.folio-pixel-vista.is-linked:not(.is-signal-active) .pixel-tree-target { opacity: .72; }
.folio-pixel-stage[data-pixel-zone="sky"]::after { content: "OBSERVE / AURORA + STAR MAP"; color: rgba(188, 220, 194, .72); }
.folio-pixel-stage[data-pixel-zone="runes"]::after { content: "OBSERVE / GUARD STONES"; color: rgba(188, 220, 194, .72); }
.folio-pixel-stage[data-pixel-zone="roots"]::after { content: "TRACE / NINE ROOT PATHS"; color: rgba(188, 220, 194, .72); }
.folio-pixel-stage[data-pixel-zone="heart"]::after { content: "INTERACT / TREE HEART"; color: rgba(210, 231, 214, .84); }

:root[data-resolved-theme="light"] .pixel-tree-target,
:root[data-resolved-theme="light"] .folio-pixel-stage[data-pixel-zone="heart"] .pixel-tree-target,
:root[data-resolved-theme="light"] .folio-pixel-vista.is-linked .pixel-tree-target {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
:root[data-resolved-theme="light"] .pixel-tree-target::before {
  background:
    linear-gradient(#2f6a42, #2f6a42) left top / 9px 1px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) left top / 1px 9px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) right top / 9px 1px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) right top / 1px 9px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) left bottom / 9px 1px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) left bottom / 1px 9px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) right bottom / 9px 1px no-repeat,
    linear-gradient(#2f6a42, #2f6a42) right bottom / 1px 9px no-repeat;
}
:root[data-resolved-theme="light"] .folio-pixel-stage[data-pixel-zone]::after { color: rgba(39, 82, 50, .74); }

@media (hover: hover) and (pointer: fine) {
  .pixel-aurora i,
  .pixel-moon,
  .pixel-runestone i,
  .pixel-root-network::before,
  .pixel-root-network::after {
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.23, 1, .32, 1);
  }
  .pixel-aurora i { transform-origin: left center; }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora {
    opacity: .72;
    transform: skewX(-9deg) translate3d(4%, -4px, 0) scaleX(1.04);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora { opacity: .9; }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora i:nth-child(1) { transform: translate3d(5px, -2px, 0) scaleX(1.14); }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora i:nth-child(2) { transform: translate3d(-5px, 0, 0) scaleX(1.1); }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-aurora i:nth-child(3) { transform: translate3d(6px, 2px, 0) scaleX(1.16); }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation {
    opacity: .92;
    transform: translate3d(0, -4px, 0) scale(1.08);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation i { transform: scale(1.42); }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-moon {
    opacity: 1;
    transform: translate3d(-4px, -4px, 0) scale(1.12);
  }

  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-ruin-bridge {
    opacity: 1;
    transform: translate3d(0, -5px, 0) scale(1.025);
  }
  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-runestone-a {
    opacity: 1;
    transform: rotate(-3deg) translate3d(0, -7px, 0) scale(1.18);
  }
  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-runestone-b {
    opacity: 1;
    transform: rotate(3deg) translate3d(0, -7px, 0) scale(1.18);
  }
  .folio-pixel-screen[data-pixel-zone="runes"]:not(.is-signal-active) .pixel-runestone i { transform: scale(1.28); }

  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network::before {
    opacity: 1;
    transform: scaleY(1.28);
    transform-origin: 50% 100%;
  }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1.42);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i {
    opacity: 1;
    transform: rotate(var(--root-angle)) scaleX(1.07);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i > b {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) scale(1.38);
  }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(4),
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(6) { transition-delay: 28ms; }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(3),
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(7) { transition-delay: 56ms; }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(2),
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(8) { transition-delay: 84ms; }
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(1),
  .folio-pixel-screen[data-pixel-zone="roots"]:not(.is-signal-active) .pixel-root-network i:nth-child(9) { transition-delay: 112ms; }
}

/* V141 — the moon once again controls the miniature's weather. */
.folio-pixel-weather-toggle {
  position: absolute;
  left: 18.5%;
  top: 22%;
  z-index: 42;
  width: clamp(54px, 9vw, 76px);
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
}
.folio-pixel-weather-toggle::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(185, 215, 191, .52);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 150ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-weather-toggle:active {
  transform: translate(-50%, -50%) scale(.96);
  transition-duration: 100ms;
}
.folio-pixel-weather-toggle:focus-visible::before {
  opacity: .88;
  transform: scale(1);
  transition: none;
}
.folio-pixel-weather-toggle[aria-pressed="true"]::before { border-style: dashed; }
.folio-pixel-stage:has(.folio-pixel-weather-toggle:focus-visible)::after {
  content: "INTERACT / WEATHER";
  color: rgba(210, 231, 214, .84);
}
@media (hover: hover) and (pointer: fine) {
  .folio-pixel-weather-toggle:hover::before {
    opacity: .7;
    transform: scale(1);
  }
}
:root[data-resolved-theme="light"] .folio-pixel-weather-toggle::before { border-color: rgba(39, 93, 55, .62); }
:root[data-resolved-theme="light"] .folio-pixel-stage:has(.folio-pixel-weather-toggle:focus-visible)::after { color: rgba(39, 82, 50, .8); }

/* V142 — spectral sap, lake echo and a velocity-aware glass highlight. */
.pixel-tree-sap {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.pixel-tree-sap i,
.pixel-tree-sap b {
  position: absolute;
  left: calc(50% - 1px);
  width: 3px;
  opacity: 0;
  background: repeating-linear-gradient(180deg, #d6ead9 0 5px, #7ca986 5px 9px, transparent 9px 13px);
  box-shadow: 0 0 8px rgba(174, 218, 181, .44);
  transform: scaleY(.08);
}
.pixel-tree-sap i {
  bottom: 64%;
  height: 24%;
  transform-origin: 50% 100%;
}
.pixel-tree-sap b {
  top: 36%;
  height: 29%;
  transform-origin: 50% 0;
}
.folio-pixel-screen.is-linked .pixel-tree-sap i,
.folio-pixel-screen.is-linked .pixel-tree-sap b {
  opacity: .18;
  transform: scaleY(1);
}
.folio-pixel-screen.is-linked[data-pixel-zone="roots"] .pixel-tree-sap i,
.folio-pixel-screen.is-linked[data-pixel-zone="roots"] .pixel-tree-sap b { opacity: .38; }

.pixel-lake-signal {
  position: absolute;
  inset: 67% 0 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.pixel-lake-signal i,
.pixel-lake-signal b,
.pixel-lake-signal em {
  position: absolute;
  left: 50%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #b8d8be 22% 78%, transparent);
  transform: translateX(-50%) scaleX(.38);
  transform-origin: center;
}
.pixel-lake-signal i { top: 18%; width: 24%; }
.pixel-lake-signal b { top: 43%; width: 34%; }
.pixel-lake-signal em { top: 69%; width: 46%; }

.folio-pixel-glass-glint {
  position: absolute;
  left: -45%;
  top: -7%;
  z-index: 25;
  width: 45%;
  height: 114%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 0 34%, rgba(217, 238, 221, .08) 43%, rgba(231, 245, 234, .7) 50%, rgba(174, 214, 182, .12) 57%, transparent 68%);
  mix-blend-mode: screen;
  transform: translate3d(130%, 0, 0) skewX(-13deg);
  backface-visibility: hidden;
}

.folio-pixel-actionbar {
  background: rgba(3, 9, 6, .76);
  border: 1px solid rgba(160, 198, 167, .34);
  border-top-color: rgba(205, 227, 209, .54);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px) saturate(1.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.16);
}
.folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar {
  background: rgba(8, 21, 13, .76);
  border-color: rgba(160, 198, 167, .38);
  border-top-color: rgba(205, 227, 209, .58);
}
:root[data-resolved-theme="light"] .pixel-tree-sap i,
:root[data-resolved-theme="light"] .pixel-tree-sap b {
  background: repeating-linear-gradient(180deg, #2f6a42 0 5px, #6a9273 5px 9px, transparent 9px 13px);
  box-shadow: 0 0 7px rgba(39, 103, 59, .24);
}
:root[data-resolved-theme="light"] .pixel-lake-signal i,
:root[data-resolved-theme="light"] .pixel-lake-signal b,
:root[data-resolved-theme="light"] .pixel-lake-signal em {
  background: linear-gradient(90deg, transparent, #2f6a42 22% 78%, transparent);
}
:root[data-resolved-theme="light"] .folio-pixel-glass-glint {
  background: linear-gradient(102deg, transparent 0 34%, rgba(255, 255, 255, .06) 43%, rgba(255, 255, 255, .68) 50%, rgba(39, 93, 55, .08) 57%, transparent 68%);
  mix-blend-mode: soft-light;
}
:root[data-resolved-theme="light"] .folio-pixel-actionbar {
  background: rgba(231, 237, 229, .78);
  border-color: rgba(39, 93, 55, .3);
  border-top-color: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 30px rgba(42, 57, 46, .12);
}
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar {
  background: rgba(220, 231, 220, .8);
  border-color: rgba(39, 93, 55, .34);
  border-top-color: rgba(255, 255, 255, .76);
}
@media (prefers-reduced-transparency: reduce) {
  .folio-pixel-actionbar {
    background: #07100b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  :root[data-resolved-theme="light"] .folio-pixel-actionbar { background: #e7ede5; }
}

/* V143 — a lagging local light, restrained signal bloom and finished glass edge. */
.pixel-signal-bloom {
  position: absolute;
  inset: 0;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 36%, rgba(224, 242, 227, .72) 0 2%, rgba(139, 191, 149, .22) 9%, rgba(75, 124, 84, .08) 24%, transparent 47%);
  mix-blend-mode: screen;
  transform: scale(.78);
  transform-origin: 50% 36%;
}
.pixel-signal-bloom i {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 248, 239, .76), rgba(162, 210, 171, .2) 28%, transparent 70%);
  transform: translate(-50%, -50%);
}
.pixel-signal-bloom b {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 63%;
  height: 18%;
  background: linear-gradient(180deg, rgba(188, 224, 194, .18), rgba(115, 169, 125, .04) 40%, transparent 78%);
  clip-path: polygon(46% 0, 54% 0, 70% 100%, 30% 100%);
}
.folio-pixel-screen.is-signal-active .pixel-signal-bloom {
  animation: garden-tree-environment-bloom 1180ms cubic-bezier(.23, 1, .32, 1) both;
}
.folio-pixel-vista.is-replay-active .pixel-signal-bloom { animation-duration: 760ms; }

.pixel-surface-light {
  position: absolute;
  left: -18%;
  top: -28%;
  z-index: 8;
  width: 38%;
  height: 72%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(223, 240, 226, .82) 0, rgba(156, 199, 163, .28) 24%, rgba(92, 139, 101, .08) 47%, transparent 72%);
  border-radius: 50%;
  mix-blend-mode: screen;
  transform: translate3d(145%, 72%, 0);
  will-change: auto;
}
.pixel-surface-light i {
  position: absolute;
  left: 36%;
  top: 72%;
  width: 28%;
  height: 44%;
  opacity: .48;
  background: linear-gradient(180deg, rgba(214, 237, 218, .68), rgba(126, 177, 136, .12) 48%, transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transform: scaleY(1.08);
  transform-origin: 50% 0;
  transition: opacity 180ms ease, transform 280ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-screen[data-pixel-zone="sky"] .pixel-surface-light i { opacity: .22; transform: scaleY(.86); }
.folio-pixel-screen[data-pixel-zone="roots"] .pixel-surface-light i { opacity: .78; transform: scaleY(1.3); }

.pixel-surface-finish {
  position: absolute;
  inset: 6px;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(226, 239, 228, .055), transparent 19%),
    radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(1, 5, 3, .12) 76%, rgba(1, 4, 2, .34) 100%);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(221, 238, 224, .12);
}
.pixel-surface-finish::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  opacity: .54;
  background: linear-gradient(90deg, transparent, rgba(211, 231, 214, .42) 18% 82%, transparent);
}

@keyframes garden-tree-environment-bloom {
  0% { opacity: 0; transform: scale(.78); }
  12% { opacity: .12; transform: scale(.72); }
  34% { opacity: .78; transform: scale(1); }
  62% { opacity: .26; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.17); }
}

:root[data-resolved-theme="light"] .pixel-signal-bloom {
  background: radial-gradient(circle at 50% 36%, rgba(245, 249, 242, .82) 0 2%, rgba(62, 126, 78, .22) 10%, rgba(48, 101, 61, .07) 26%, transparent 48%);
  mix-blend-mode: soft-light;
}
:root[data-resolved-theme="light"] .pixel-signal-bloom i {
  background: radial-gradient(circle, rgba(255, 255, 250, .82), rgba(65, 132, 82, .17) 30%, transparent 70%);
}
:root[data-resolved-theme="light"] .pixel-signal-bloom b {
  background: linear-gradient(180deg, rgba(45, 111, 62, .16), rgba(45, 111, 62, .03) 48%, transparent 80%);
}
:root[data-resolved-theme="light"] .pixel-surface-light {
  background: radial-gradient(ellipse, rgba(255, 255, 250, .86) 0, rgba(77, 132, 89, .2) 26%, rgba(55, 108, 68, .055) 48%, transparent 72%);
  mix-blend-mode: soft-light;
}
:root[data-resolved-theme="light"] .pixel-surface-light i {
  background: linear-gradient(180deg, rgba(255, 255, 250, .58), rgba(55, 113, 69, .1) 50%, transparent);
}
:root[data-resolved-theme="light"] .pixel-surface-finish {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 20%),
    radial-gradient(ellipse at 50% 42%, transparent 51%, rgba(42, 61, 47, .06) 79%, rgba(42, 61, 47, .14) 100%);
  box-shadow: inset 0 0 24px rgba(45, 62, 49, .1), inset 0 1px 0 rgba(255, 255, 255, .54);
}
:root[data-resolved-theme="light"] .pixel-surface-finish::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .74) 18% 82%, transparent);
}

/* V144 — the awakened roots continue upward and draw a Yggdrasil rune map. */
.pixel-rune-constellation::before,
.pixel-rune-constellation::after { opacity: 0; }
.pixel-rune-constellation svg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  overflow: visible;
  pointer-events: none;
}
.pixel-rune-constellation svg path {
  fill: none;
  stroke: #aac8b0;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .08;
  vector-effect: non-scaling-stroke;
}
.folio-pixel-screen.is-linked .pixel-rune-constellation svg path {
  opacity: .78;
}
.pixel-rune-reflection {
  position: absolute;
  left: 39%;
  top: 82%;
  z-index: 3;
  width: 24%;
  height: 28%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: scaleY(-.28) translateY(-4px);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 84%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 84%);
}
.pixel-rune-reflection path {
  fill: none;
  stroke: #91b399;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.folio-pixel-screen.is-linked .pixel-rune-reflection {
  opacity: .12;
  transform: scaleY(-.48) translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .pixel-rune-constellation svg path {
    transition: opacity 180ms ease, transform 300ms cubic-bezier(.23, 1, .32, 1);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-linked):not(.is-signal-active) .pixel-rune-constellation svg path {
    opacity: .34;
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation svg path { opacity: 1; }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-reflection { opacity: .22; }
}
:root[data-resolved-theme="light"] .pixel-rune-constellation svg path { stroke: #2f6a42; }
:root[data-resolved-theme="light"] .pixel-rune-reflection path { stroke: #356f47; }

/* V145 — replace the tiny star mark with a visible nine-realm orbit behind the crown. */
.pixel-rune-constellation {
  left: 20%;
  top: 2%;
  width: 60%;
  height: 48%;
  opacity: .34;
}
.pixel-rune-constellation svg {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(160, 207, 169, .26));
}
.pixel-rune-constellation svg path {
  stroke: #b8d5bd;
  stroke-width: 2.2;
  opacity: .1;
}
.pixel-rune-orbit {
  fill: none;
  stroke: #9fc3a6;
  stroke-width: 1.7;
  opacity: .18;
  vector-effect: non-scaling-stroke;
}
.pixel-rune-realms circle {
  fill: #d5e7d8;
  stroke: #668c6e;
  stroke-width: 1;
  opacity: .08;
  transform: scale(.72);
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}
.folio-pixel-screen.is-linked .pixel-rune-constellation { opacity: .92; }
.folio-pixel-screen.is-linked .pixel-rune-constellation svg path { opacity: .86; }
.folio-pixel-screen.is-linked .pixel-rune-orbit { opacity: .72; }
.folio-pixel-screen.is-linked .pixel-rune-realms circle { opacity: .86; transform: scale(1); }

.pixel-rune-reflection {
  left: 27%;
  top: 86%;
  width: 46%;
  height: 34%;
}
.pixel-rune-reflection path,
.pixel-rune-reflection circle {
  fill: none;
  stroke: #91b399;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}
.pixel-rune-reflection circle { opacity: .64; }
.folio-pixel-screen.is-linked .pixel-rune-reflection { opacity: .18; }

@media (hover: hover) and (pointer: fine) {
  .pixel-rune-orbit,
  .pixel-rune-realms circle {
    transition: opacity 180ms ease, transform 260ms cubic-bezier(.23, 1, .32, 1);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-linked):not(.is-signal-active) .pixel-rune-orbit {
    opacity: .38;
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-linked):not(.is-signal-active) .pixel-rune-realms circle {
    opacity: .28;
    transform: scale(.9);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-constellation { opacity: 1; }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-orbit { opacity: 1; }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-realms circle { opacity: 1; transform: scale(1.18); }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-reflection { opacity: .3; }
}

:root[data-resolved-theme="light"] .pixel-rune-constellation svg {
  filter: drop-shadow(0 0 3px rgba(39, 103, 58, .16));
}
:root[data-resolved-theme="light"] .pixel-rune-constellation svg path,
:root[data-resolved-theme="light"] .pixel-rune-orbit { stroke: #2f6a42; }
:root[data-resolved-theme="light"] .pixel-rune-realms circle {
  fill: #2d6640;
  stroke: #f0f4ec;
}
:root[data-resolved-theme="light"] .pixel-rune-reflection path,
:root[data-resolved-theme="light"] .pixel-rune-reflection circle { stroke: #356f47; }

/* V146 — final motion pass: compositor-only reveals, quieter idle state and sharper input feedback. */
.pixel-rune-constellation svg path {
  opacity: .08;
  transform: scale(.93);
  transform-box: fill-box;
  transform-origin: center;
}
.pixel-rune-orbit {
  opacity: .18;
  transform: scale(.94);
  transform-box: fill-box;
  transform-origin: center;
}
.folio-pixel-screen.is-linked .pixel-rune-constellation svg path { opacity: .86; transform: scale(1); }
.folio-pixel-screen.is-linked .pixel-rune-orbit { opacity: .72; transform: scale(1); }

.folio-pixel-vista.is-signal-active .pixel-heart-burst i:nth-child(1) { animation-duration: 760ms; }
.folio-pixel-vista.is-signal-active .pixel-heart-burst i:nth-child(2) { animation-duration: 920ms; animation-delay: 74ms; }
.folio-pixel-screen.is-signal-active .pixel-signal-bloom { animation-duration: 980ms; }
.folio-pixel-vista.is-replay-active .pixel-signal-bloom { animation-duration: 680ms; }
.pixel-fireflies i:nth-child(2n) { animation-duration: 4.8s; }
.pixel-fireflies i:nth-child(2n + 1) { animation-duration: 5.9s; }
.folio-pixel-screen.is-clear .pixel-sky i:nth-child(3n) { animation-duration: 4.6s; }
.folio-pixel-bleed-fireflies > i { animation-duration: 6.2s; }

.folio-pixel-diorama.is-diorama-tracking .pixel-surface-light { will-change: transform, opacity; }

.folio-pixel-weather-toggle { transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-weather-toggle:active { transition-duration: 90ms; }
.pixel-tree-target::after { transition: transform 140ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-stage:has(.folio-pixel-interaction:active) .pixel-tree-target::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(.9);
  transition-duration: 90ms;
}
.folio-pixel-weather-toggle:focus-visible:active {
  transform: translate(-50%, -50%);
  transition: none;
}
.folio-pixel-stage:has(.folio-pixel-interaction:focus-visible:active) .pixel-tree-target::after {
  transform: translate(-50%, -50%) rotate(45deg);
  transition: none;
}
.folio-pixel-screen.is-keyboard-change .pixel-sky,
.folio-pixel-screen.is-keyboard-change .pixel-sky i,
.folio-pixel-screen.is-keyboard-change .pixel-atmosphere,
.folio-pixel-screen.is-keyboard-change .pixel-moon,
.folio-pixel-screen.is-keyboard-change .pixel-cloud,
.folio-pixel-screen.is-keyboard-change .pixel-rain,
.folio-pixel-screen.is-keyboard-change .pixel-horizon-glow,
.folio-pixel-screen.is-keyboard-change .pixel-lake,
.folio-pixel-screen.is-keyboard-change .pixel-fireflies,
.folio-pixel-vista.is-keyboard-change .folio-pixel-bleed-sky,
.folio-pixel-vista.is-keyboard-change .folio-pixel-bleed-mist,
.folio-pixel-vista.is-keyboard-change .folio-pixel-bleed-water,
.folio-pixel-vista.is-keyboard-change .folio-pixel-bleed-fireflies {
  animation: none !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .pixel-rune-constellation svg path,
  .pixel-rune-orbit {
    transition: opacity 180ms ease, transform 300ms cubic-bezier(.23, 1, .32, 1);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-linked):not(.is-signal-active) .pixel-rune-constellation svg path {
    opacity: .24;
    transform: scale(.97);
  }
  .folio-pixel-screen[data-pixel-zone="sky"]:not(.is-linked):not(.is-signal-active) .pixel-rune-orbit {
    opacity: .38;
    transform: scale(.98);
  }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-orbit {
    opacity: 1;
    transform: scale(1.025);
  }
}

/* V147 — a clearly visible crown field, nine inward links and explicit realm progress. */
.pixel-crown-aura {
  position: absolute;
  left: 14%;
  top: -8%;
  z-index: 4;
  width: 72%;
  height: 66%;
  opacity: .035;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0 34%, rgba(174, 216, 181, .42) 35% 36%, transparent 37% 49%, rgba(113, 164, 123, .24) 50% 51%, transparent 52%),
    repeating-conic-gradient(from 8deg at 50% 50%, transparent 0 8deg, rgba(164, 205, 171, .2) 9deg 11deg, transparent 12deg 20deg);
  border-radius: 50%;
  transform: scale(.84);
  transform-origin: 50% 58%;
}
.pixel-crown-aura i,
.pixel-crown-aura b {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.pixel-crown-aura i { inset: 19% 21%; border: 1px dashed rgba(195, 225, 200, .46); }
.pixel-crown-aura b { inset: 31% 34%; border: 1px solid rgba(139, 187, 148, .42); }
.folio-pixel-screen.is-linked .pixel-crown-aura { opacity: .42; transform: scale(1); }

.pixel-rune-spokes {
  opacity: 0;
  transform: scale(.84);
  transform-box: fill-box;
  transform-origin: center;
}
.pixel-rune-spokes line {
  stroke: #8fb797;
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
}
.folio-pixel-screen.is-linked .pixel-rune-spokes { opacity: .36; transform: scale(1); }

.folio-pixel-actionbar { grid-template-columns: auto minmax(0, 1fr) auto; }
.folio-pixel-actionbar > b {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  min-width: 41px;
  padding-left: 10px;
  color: rgba(181, 210, 187, .58);
  border-left: 1px solid rgba(151, 190, 159, .22);
  font: 650 8px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-align: right;
}
.folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar > b { color: #d4e7d7; }
.folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar > b { color: #b9d5bf; }

@media (hover: hover) and (pointer: fine) {
  .pixel-crown-aura,
  .pixel-rune-spokes { transition: opacity 180ms ease, transform 320ms cubic-bezier(.23, 1, .32, 1); }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-crown-aura { opacity: .58; transform: scale(1.025); }
  .folio-pixel-screen.is-linked[data-pixel-zone="sky"]:not(.is-signal-active) .pixel-rune-spokes { opacity: .58; transform: scale(1.015); }
}

:root[data-resolved-theme="light"] .pixel-crown-aura {
  background:
    radial-gradient(ellipse at center, transparent 0 34%, rgba(38, 101, 56, .25) 35% 36%, transparent 37% 49%, rgba(53, 111, 70, .14) 50% 51%, transparent 52%),
    repeating-conic-gradient(from 8deg at 50% 50%, transparent 0 8deg, rgba(42, 103, 59, .13) 9deg 11deg, transparent 12deg 20deg);
}
:root[data-resolved-theme="light"] .pixel-crown-aura i { border-color: rgba(39, 101, 57, .32); }
:root[data-resolved-theme="light"] .pixel-crown-aura b { border-color: rgba(39, 101, 57, .28); }
:root[data-resolved-theme="light"] .pixel-rune-spokes line { stroke: #3f7850; }
:root[data-resolved-theme="light"] .folio-pixel-actionbar > b {
  color: rgba(39, 82, 50, .62);
  border-left-color: rgba(39, 93, 55, .2);
}
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="sending"] .folio-pixel-actionbar > b,
:root[data-resolved-theme="light"] .folio-pixel-hud[data-state="linked"] .folio-pixel-actionbar > b { color: #2f6540; }

/* V148 — immersive replay: full-scene trigger, stronger completion and visible root surges. */
.pixel-root-network i > em {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: block;
  width: 100%;
  height: 5px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0, #dbeedd 42%, #f1f8f2 78%, transparent 100%);
  box-shadow: 0 0 9px rgba(190, 226, 197, .72);
  transform: translateY(-50%) scaleX(.08);
  transform-origin: 0 50%;
  pointer-events: none;
}
.pixel-root-network i > em::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #edf7ee;
  box-shadow: 0 0 12px rgba(204, 235, 209, .92);
  transform: translate(50%, -50%) rotate(45deg);
}
.pixel-root-network i > b { z-index: 3; }

.folio-pixel-screen.is-linked { cursor: pointer; }
.folio-pixel-screen.is-linked .pixel-crown-aura { opacity: .58; }
.folio-pixel-screen.is-linked .pixel-rune-spokes { opacity: .5; }
.folio-pixel-screen.is-linked .pixel-rune-constellation { opacity: .98; }
.folio-pixel-screen.is-linked .pixel-rune-orbit { opacity: .9; }
.folio-pixel-screen.is-linked .pixel-rune-reflection { opacity: .23; }

.folio-pixel-vista.is-replay-active .pixel-signal-bloom {
  animation-name: garden-tree-replay-bloom;
  animation-duration: 820ms;
}
@keyframes garden-tree-replay-bloom {
  0% { opacity: 0; transform: scale(.82); }
  18% { opacity: .82; transform: scale(.93); }
  52% { opacity: .42; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.2); }
}

@media (hover: hover) and (pointer: fine) {
  .folio-pixel-screen.is-linked:hover .pixel-crown-aura { opacity: .68; }
  .folio-pixel-screen.is-linked:hover .pixel-rune-spokes { opacity: .62; }
}

:root[data-resolved-theme="light"] .pixel-root-network i > em {
  background: linear-gradient(90deg, transparent 0, #4c865c 42%, #245f38 78%, transparent 100%);
  box-shadow: 0 0 8px rgba(39, 104, 58, .4);
}
:root[data-resolved-theme="light"] .pixel-root-network i > em::after {
  background: #245f38;
  box-shadow: 0 0 10px rgba(39, 104, 58, .46);
}
:root[data-resolved-theme="light"] .folio-pixel-diorama.is-depth-tracking .pixel-depth-sky { opacity: .82; }
:root[data-resolved-theme="light"] .folio-pixel-diorama.is-depth-tracking .pixel-depth-ridge-back { opacity: .9; }

/* V152 — one continuous Yggdrasil shore, seen through a rune-cut observation frame. */
.folio-pixel-bleed {
  --bleed-sky-x: 0px;
  --bleed-sky-y: 0px;
  --bleed-back-x: 0px;
  --bleed-back-y: 0px;
  --bleed-water-x: 0px;
  --bleed-water-y: 0px;
  --bleed-front-x: 0px;
  --bleed-front-y: 0px;
  --bleed-sky: #a8c5ad;
  --bleed-canopy: #17271f;
  --bleed-ridge-back: rgba(27, 47, 37, .72);
  --bleed-ridge-front: rgba(10, 24, 17, .86);
  --bleed-water: rgba(8, 23, 17, .78);
  --bleed-water-line: rgba(83, 124, 94, .62);
  --bleed-root: #132219;
  inset: -10% 0 -12%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 76% 82% at 50% 53%, #000 28%, rgba(0, 0, 0, .86) 67%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 82% at 50% 53%, #000 28%, rgba(0, 0, 0, .86) 67%, transparent 100%);
}
.folio-pixel-bleed-sky {
  inset: 0 0 39%;
  opacity: .34;
  transform: translate3d(var(--bleed-sky-x), var(--bleed-sky-y), 0);
}
.folio-pixel-bleed-sky > i { background: var(--bleed-sky); }
.folio-pixel-bleed-canopy {
  left: 50%;
  top: 2%;
  z-index: 1;
  width: min(980px, 76vw);
  height: 49%;
  opacity: .3;
  background: var(--bleed-canopy);
  box-shadow: inset 0 -12px 0 rgba(2, 7, 4, .32), 0 18px 34px rgba(0, 0, 0, .2);
  clip-path: polygon(4% 26%, 19% 26%, 19% 14%, 34% 14%, 34% 5%, 46% 5%, 46% 0, 55% 0, 55% 8%, 68% 8%, 68% 16%, 83% 16%, 83% 29%, 96% 29%, 96% 44%, 100% 44%, 100% 66%, 91% 66%, 91% 78%, 74% 78%, 74% 90%, 59% 90%, 59% 100%, 42% 100%, 42% 91%, 25% 91%, 25% 79%, 9% 79%, 9% 65%, 0 65%, 0 43%, 4% 43%);
  transform: translate3d(calc(-50% + var(--bleed-back-x)), var(--bleed-back-y), 0);
  transform-origin: 50% 76%;
  transition: opacity 420ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-bleed-canopy::before {
  content: "";
  position: absolute;
  left: calc(50% - 14px);
  top: 58%;
  width: 28px;
  height: 52%;
  background: linear-gradient(90deg, #0d1912, #2a4133 42%, #101c15);
  box-shadow: -10px 0 0 rgba(17, 31, 23, .8), 11px 0 0 rgba(5, 13, 9, .82);
}
.folio-pixel-bleed-canopy > i,
.folio-pixel-bleed-canopy > b,
.folio-pixel-bleed-canopy > em {
  z-index: 2;
  height: 6px;
  background: #314a3b;
  box-shadow: 0 0 12px rgba(108, 153, 118, .12);
}
.folio-pixel-bleed-canopy > i { left: 8%; top: 43%; width: 42%; transform: rotate(7deg); }
.folio-pixel-bleed-canopy > b { right: 7%; top: 49%; width: 43%; transform: rotate(-8deg); }
.folio-pixel-bleed-canopy > em { left: 34%; top: 65%; width: 32%; opacity: .62; }
.folio-pixel-bleed-mist {
  top: 35%;
  height: 34%;
  opacity: .78;
  transform: translate3d(var(--bleed-back-x), var(--bleed-back-y), 0);
}
.folio-pixel-bleed-mist > i,
.folio-pixel-bleed-mist > b {
  left: -3%;
  width: 106%;
  animation: none;
  transform: none;
}
.folio-pixel-bleed-mist > i {
  top: 26%;
  height: 43%;
  background: var(--bleed-ridge-back);
  clip-path: polygon(0 52%, 6% 52%, 6% 42%, 13% 42%, 13% 28%, 20% 28%, 20% 45%, 29% 45%, 29% 58%, 38% 58%, 38% 36%, 45% 36%, 45% 53%, 55% 53%, 55% 39%, 64% 39%, 64% 26%, 72% 26%, 72% 43%, 82% 43%, 82% 56%, 91% 56%, 91% 39%, 100% 39%, 100% 100%, 0 100%);
}
.folio-pixel-bleed-mist > b {
  bottom: 0;
  height: 39%;
  opacity: .92;
  background: var(--bleed-ridge-front);
  clip-path: polygon(0 47%, 8% 47%, 8% 35%, 17% 35%, 17% 54%, 27% 54%, 27% 67%, 38% 67%, 38% 43%, 48% 43%, 48% 61%, 59% 61%, 59% 48%, 70% 48%, 70% 64%, 81% 64%, 81% 39%, 91% 39%, 91% 57%, 100% 57%, 100% 100%, 0 100%);
}
.folio-pixel-bleed-water {
  left: 0;
  right: 0;
  top: 65%;
  opacity: .8;
  border-top-color: rgba(70, 108, 82, .52);
  background: linear-gradient(180deg, var(--bleed-water), rgba(3, 12, 8, .2));
  transform: translate3d(var(--bleed-water-x), var(--bleed-water-y), 0);
}
.folio-pixel-bleed-water::before,
.folio-pixel-bleed-water::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 2px;
  opacity: .34;
  background: linear-gradient(90deg, transparent, var(--bleed-water-line), transparent);
  transform: translateX(-50%);
}
.folio-pixel-bleed-water::before { top: 14%; width: 64%; }
.folio-pixel-bleed-water::after { top: 34%; width: 82%; opacity: .2; }
.folio-pixel-bleed-water > i,
.folio-pixel-bleed-water > b,
.folio-pixel-bleed-water > em { background: var(--bleed-water-line); }
.folio-pixel-bleed-rootlines {
  inset: 0;
  z-index: 2;
  opacity: .16;
  transform: translate3d(var(--bleed-water-x), var(--bleed-water-y), 0);
  transition: opacity 360ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-bleed-rootlines > i {
  --bleed-root-angle: 90deg;
  --bleed-root-length: 42%;
  left: 50%;
  top: 59%;
  width: var(--bleed-root-length);
  height: 2px;
  background: linear-gradient(90deg, rgba(135, 170, 143, .72), rgba(55, 91, 65, .42), transparent 88%);
  box-shadow: 0 3px 0 rgba(2, 9, 5, .38);
  transform: rotate(var(--bleed-root-angle)) scaleX(.98);
  transform-origin: left center;
}
.folio-pixel-bleed-rootlines > i::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0, #dceade 26%, #76a47f 68%, transparent 100%);
  box-shadow: 0 0 9px rgba(157, 203, 166, .46);
  transform: scaleX(.08);
  transform-origin: left center;
}
.folio-pixel-bleed-rootlines > i:nth-child(1) { --bleed-root-angle: 151deg; --bleed-root-length: 52%; }
.folio-pixel-bleed-rootlines > i:nth-child(2) { --bleed-root-angle: 137deg; --bleed-root-length: 46%; }
.folio-pixel-bleed-rootlines > i:nth-child(3) { --bleed-root-angle: 124deg; --bleed-root-length: 41%; }
.folio-pixel-bleed-rootlines > i:nth-child(4) { --bleed-root-angle: 103deg; --bleed-root-length: 37%; }
.folio-pixel-bleed-rootlines > i:nth-child(5) { --bleed-root-angle: 90deg; --bleed-root-length: 35%; }
.folio-pixel-bleed-rootlines > i:nth-child(6) { --bleed-root-angle: 77deg; --bleed-root-length: 37%; }
.folio-pixel-bleed-rootlines > i:nth-child(7) { --bleed-root-angle: 56deg; --bleed-root-length: 41%; }
.folio-pixel-bleed-rootlines > i:nth-child(8) { --bleed-root-angle: 43deg; --bleed-root-length: 46%; }
.folio-pixel-bleed-rootlines > i:nth-child(9) { --bleed-root-angle: 29deg; --bleed-root-length: 52%; }
.folio-pixel-bleed-reeds {
  bottom: -3%;
  z-index: 3;
  width: 29%;
  height: 55%;
  opacity: .96;
  background: var(--bleed-root);
  filter: drop-shadow(0 -8px 11px rgba(0, 0, 0, .36));
  clip-path: polygon(0 18%, 22% 18%, 22% 29%, 39% 29%, 39% 45%, 55% 45%, 55% 62%, 72% 62%, 72% 76%, 100% 76%, 100% 100%, 0 100%);
}
.folio-pixel-bleed-reeds-left { left: 0; transform: translate3d(var(--bleed-front-x), var(--bleed-front-y), 0); }
.folio-pixel-bleed-reeds-right { right: 0; transform: translate3d(var(--bleed-front-x), var(--bleed-front-y), 0) scaleX(-1); }
.folio-pixel-bleed-reeds > i,
.folio-pixel-bleed-reeds > b,
.folio-pixel-bleed-reeds > em {
  bottom: 0;
  width: 7px;
  background: #263a2d;
  animation: none;
  box-shadow: 12px -8px 0 #101c15;
}
.folio-pixel-bleed-reeds > i { left: 22%; height: 72%; transform: rotate(18deg); }
.folio-pixel-bleed-reeds > b { left: 48%; height: 58%; transform: rotate(32deg); }
.folio-pixel-bleed-reeds > em { left: 70%; height: 39%; transform: rotate(46deg); }
.folio-pixel-bleed-reeds > i::after,
.folio-pixel-bleed-reeds > b::after,
.folio-pixel-bleed-reeds > em::after { display: none; }
.folio-pixel-bleed-fireflies { transform: translate3d(var(--bleed-front-x), var(--bleed-front-y), 0); }
.folio-pixel-vista.is-clear .folio-pixel-bleed-canopy { opacity: .38; }
.folio-pixel-vista.is-clear .folio-pixel-bleed-rootlines { opacity: .24; }
.folio-pixel-vista.is-linked .folio-pixel-bleed-canopy { opacity: .42; }
.folio-pixel-vista.is-linked .folio-pixel-bleed-rootlines { opacity: .5; }
.folio-pixel-vista.is-signal-active .folio-pixel-bleed-canopy { animation: garden-bleed-canopy-awake 900ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-bleed-rootlines > i::after { animation: garden-bleed-root-conduct 820ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-bleed-rootlines > i:nth-child(2n)::after { animation-delay: 55ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-bleed-rootlines > i:nth-child(3n)::after { animation-delay: 105ms; }
@keyframes garden-bleed-canopy-awake {
  0% { opacity: .3; }
  42% { opacity: .58; }
  100% { opacity: .42; }
}
@keyframes garden-bleed-root-conduct {
  0% { opacity: 0; transform: scaleX(.06); }
  22% { opacity: .9; }
  72% { opacity: .66; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
:root[data-resolved-theme="light"] .folio-pixel-bleed {
  --bleed-sky: #557a5e;
  --bleed-canopy: #718477;
  --bleed-ridge-back: rgba(107, 126, 112, .54);
  --bleed-ridge-front: rgba(83, 104, 89, .66);
  --bleed-water: rgba(135, 153, 140, .42);
  --bleed-water-line: rgba(70, 100, 79, .5);
  --bleed-root: #526759;
}
@media (max-width: 1180px) {
  .folio-pixel-bleed-canopy { width: min(860px, 82vw); }
  .folio-pixel-bleed-reeds { width: 23%; opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-bleed-canopy,
  .folio-pixel-bleed-rootlines > i::after { animation: none !important; }
}
html.garden-lite-motion .folio-pixel-bleed-canopy,
html.garden-lite-motion .folio-pixel-bleed-rootlines > i::after { animation: none !important; transition: none !important; }

/* V153 — the landscape stays inside a legible nine-realm stone reliquary. */
.folio-pixel-bleed {
  --reliquary-void: #040806;
  --reliquary-stone: #101914;
  --reliquary-face: #1c2a22;
  --reliquary-edge: #405246;
  --reliquary-rune: #9bb7a1;
  --reliquary-root: #66876e;
  inset: -10% 0 -13%;
  z-index: 0;
  overflow: visible;
  isolation: isolate;
  -webkit-mask-image: none;
  mask-image: none;
}
.folio-pixel-reliquary-lintel,
.folio-pixel-reliquary-pillar,
.folio-pixel-reliquary-roots,
.folio-pixel-reliquary-plinth { position: absolute; display: block; pointer-events: none; }
.folio-pixel-reliquary-lintel {
  left: 50%;
  top: -1%;
  z-index: 1;
  width: min(944px, 96vw);
  height: 90px;
  opacity: .94;
  background:
    linear-gradient(90deg, transparent 0 2%, var(--reliquary-edge) 2% 2.5%, transparent 2.5% 97.5%, var(--reliquary-edge) 97.5% 98%, transparent 98%),
    linear-gradient(180deg, var(--reliquary-face), var(--reliquary-stone));
  border-top: 2px solid color-mix(in srgb, var(--reliquary-edge) 76%, transparent);
  box-shadow: inset 0 -9px 0 var(--reliquary-void), 0 14px 30px rgba(0, 0, 0, .28);
  clip-path: polygon(3% 0, 97% 0, 97% 12%, 100% 12%, 100% 78%, 96% 78%, 96% 100%, 4% 100%, 4% 78%, 0 78%, 0 12%, 3% 12%);
  transform: translateX(-50%);
}
.folio-pixel-reliquary-lintel::before {
  content: "NINE ROOT RELIQUARY / 09";
  position: absolute;
  left: 50%;
  top: 10px;
  color: color-mix(in srgb, var(--reliquary-rune) 58%, transparent);
  font: 600 7px/1 var(--mono);
  letter-spacing: .2em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.folio-pixel-reliquary-lintel::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reliquary-rune) 58%, transparent) 8% 92%, transparent);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.folio-pixel-reliquary-lintel > i {
  top: 39px;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: var(--reliquary-stone);
  border: 2px solid var(--reliquary-edge);
  box-shadow: 0 0 0 3px rgba(5, 10, 7, .48), 0 5px 9px rgba(0, 0, 0, .3);
  transform: rotate(45deg);
  transition: border-color 260ms cubic-bezier(.23, 1, .32, 1), background-color 260ms cubic-bezier(.23, 1, .32, 1), box-shadow 260ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-reliquary-lintel > i::before,
.folio-pixel-reliquary-lintel > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 11px;
  background: var(--reliquary-rune);
  opacity: .72;
  transform: translate(-50%, -50%);
}
.folio-pixel-reliquary-lintel > i::after { width: 8px; height: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.folio-pixel-reliquary-lintel > i:nth-child(1) { left: 8%; }
.folio-pixel-reliquary-lintel > i:nth-child(2) { left: 18.5%; }
.folio-pixel-reliquary-lintel > i:nth-child(3) { left: 29%; }
.folio-pixel-reliquary-lintel > i:nth-child(4) { left: 39.5%; }
.folio-pixel-reliquary-lintel > i:nth-child(5) { left: 50%; }
.folio-pixel-reliquary-lintel > i:nth-child(6) { left: 60.5%; }
.folio-pixel-reliquary-lintel > i:nth-child(7) { left: 71%; }
.folio-pixel-reliquary-lintel > i:nth-child(8) { left: 81.5%; }
.folio-pixel-reliquary-lintel > i:nth-child(9) { left: 92%; }
.folio-pixel-reliquary-lintel > i:nth-child(2n)::after { width: 2px; height: 8px; transform: translate(-50%, -50%) rotate(-42deg); }
.folio-pixel-reliquary-lintel > i:nth-child(3n)::before { height: 8px; transform: translate(-50%, -50%) rotate(45deg); }
.folio-pixel-reliquary-pillar {
  top: 6%;
  z-index: 2;
  width: 98px;
  height: 76%;
  opacity: .96;
  background:
    repeating-linear-gradient(180deg, transparent 0 54px, rgba(91, 115, 98, .18) 54px 57px),
    linear-gradient(90deg, var(--reliquary-void) 0 10px, var(--reliquary-face) 10px 75%, var(--reliquary-stone) 75% 100%);
  border: 1px solid color-mix(in srgb, var(--reliquary-edge) 62%, transparent);
  box-shadow: inset 8px 0 0 rgba(101, 128, 108, .1), inset -9px 0 0 rgba(2, 6, 4, .45), 0 20px 38px rgba(0, 0, 0, .36);
  clip-path: polygon(13% 0, 87% 0, 87% 5%, 100% 5%, 100% 94%, 91% 94%, 91% 100%, 9% 100%, 9% 94%, 0 94%, 0 5%, 13% 5%);
}
.folio-pixel-reliquary-pillar-left { left: calc(50% - 476px); }
.folio-pixel-reliquary-pillar-right { right: calc(50% - 476px); transform: scaleX(-1); }
.folio-pixel-reliquary-pillar > i,
.folio-pixel-reliquary-pillar > b,
.folio-pixel-reliquary-pillar > em {
  left: 34px;
  width: 28px;
  height: 3px;
  background: var(--reliquary-rune);
  opacity: .42;
  box-shadow: 0 5px 0 rgba(3, 9, 5, .66);
  transform-origin: center;
}
.folio-pixel-reliquary-pillar > i { top: 22%; transform: rotate(57deg); }
.folio-pixel-reliquary-pillar > b { top: 49%; transform: rotate(-44deg); }
.folio-pixel-reliquary-pillar > em { top: 74%; transform: rotate(90deg); }
.folio-pixel-reliquary-plinth {
  left: 50%;
  bottom: -1%;
  z-index: 4;
  width: min(964px, 97vw);
  height: 118px;
  opacity: .98;
  background:
    linear-gradient(180deg, var(--reliquary-edge) 0 3px, transparent 3px),
    linear-gradient(180deg, var(--reliquary-face), var(--reliquary-void));
  box-shadow: inset 0 13px 0 rgba(84, 111, 92, .12), 0 24px 48px rgba(0, 0, 0, .38);
  clip-path: polygon(4% 0, 96% 0, 96% 8%, 100% 8%, 96% 72%, 89% 72%, 89% 100%, 11% 100%, 11% 72%, 4% 72%, 0 8%, 4% 8%);
  transform: translateX(-50%);
}
.folio-pixel-reliquary-plinth::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--reliquary-root), transparent);
  box-shadow: 0 0 13px rgba(123, 166, 133, .2);
}
.folio-pixel-reliquary-plinth::after {
  content: "ROOT CHANNEL / 09";
  position: absolute;
  right: 12%;
  bottom: 18px;
  color: color-mix(in srgb, var(--reliquary-rune) 46%, transparent);
  font: 600 6px/1 var(--mono);
  letter-spacing: .18em;
}
.folio-pixel-reliquary-plinth > i,
.folio-pixel-reliquary-plinth > b,
.folio-pixel-reliquary-plinth > em {
  top: 43px;
  height: 3px;
  opacity: .42;
  background: var(--reliquary-root);
  box-shadow: 0 6px 0 rgba(4, 10, 7, .62);
}
.folio-pixel-reliquary-plinth > i { left: 8%; width: 28%; transform: rotate(2deg); }
.folio-pixel-reliquary-plinth > b { left: 38%; width: 24%; }
.folio-pixel-reliquary-plinth > em { right: 8%; width: 28%; transform: rotate(-2deg); }
.folio-pixel-reliquary-roots {
  inset: 0;
  z-index: 3;
  opacity: .24;
  transform: translate3d(var(--bleed-water-x), var(--bleed-water-y), 0);
  transition: opacity 320ms cubic-bezier(.23, 1, .32, 1);
}
.folio-pixel-reliquary-roots > i {
  --reliquary-root-angle: 90deg;
  --reliquary-root-length: 42%;
  left: 50%;
  top: 50.5%;
  width: var(--reliquary-root-length);
  height: 3px;
  background: linear-gradient(90deg, var(--reliquary-root), color-mix(in srgb, var(--reliquary-root) 52%, transparent), transparent 92%);
  box-shadow: 0 4px 0 rgba(1, 7, 3, .48);
  transform: rotate(var(--reliquary-root-angle));
  transform-origin: left center;
}
.folio-pixel-reliquary-roots > i::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #dceade 24%, #7aa984 70%, transparent);
  box-shadow: 0 0 10px rgba(164, 211, 173, .5);
  transform: scaleX(.06);
  transform-origin: left center;
}
.folio-pixel-reliquary-roots > i:nth-child(1) { --reliquary-root-angle: 151deg; --reliquary-root-length: 52%; }
.folio-pixel-reliquary-roots > i:nth-child(2) { --reliquary-root-angle: 137deg; --reliquary-root-length: 46%; }
.folio-pixel-reliquary-roots > i:nth-child(3) { --reliquary-root-angle: 124deg; --reliquary-root-length: 41%; }
.folio-pixel-reliquary-roots > i:nth-child(4) { --reliquary-root-angle: 103deg; --reliquary-root-length: 37%; }
.folio-pixel-reliquary-roots > i:nth-child(5) { --reliquary-root-angle: 90deg; --reliquary-root-length: 35%; }
.folio-pixel-reliquary-roots > i:nth-child(6) { --reliquary-root-angle: 77deg; --reliquary-root-length: 37%; }
.folio-pixel-reliquary-roots > i:nth-child(7) { --reliquary-root-angle: 56deg; --reliquary-root-length: 41%; }
.folio-pixel-reliquary-roots > i:nth-child(8) { --reliquary-root-angle: 43deg; --reliquary-root-length: 46%; }
.folio-pixel-reliquary-roots > i:nth-child(9) { --reliquary-root-angle: 29deg; --reliquary-root-length: 52%; }
.folio-pixel-vista.is-clear .folio-pixel-reliquary-lintel,
.folio-pixel-vista.is-clear .folio-pixel-reliquary-pillar { opacity: 1; }
.folio-pixel-vista.is-linked .folio-pixel-reliquary-roots { opacity: .68; }
.folio-pixel-vista.is-linked .folio-pixel-reliquary-lintel > i {
  border-color: var(--reliquary-rune);
  background: color-mix(in srgb, var(--reliquary-face) 72%, var(--reliquary-root));
  box-shadow: 0 0 0 3px rgba(5, 10, 7, .48), 0 0 16px rgba(137, 181, 146, .34);
}
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i { animation: garden-reliquary-realm 720ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i::after { animation: garden-reliquary-conduct 820ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(2),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(2)::after { animation-delay: 45ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(3),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(3)::after { animation-delay: 90ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(4),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(4)::after { animation-delay: 135ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(5),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(5)::after { animation-delay: 180ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(6),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(6)::after { animation-delay: 225ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(7),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(7)::after { animation-delay: 270ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(8),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(8)::after { animation-delay: 315ms; }
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-lintel > i:nth-child(9),
.folio-pixel-vista.is-signal-active .folio-pixel-reliquary-roots > i:nth-child(9)::after { animation-delay: 360ms; }
@keyframes garden-reliquary-realm {
  0% { transform: rotate(45deg) scale(.86); }
  42% { border-color: #dbe9dd; background: #77957e; box-shadow: 0 0 0 4px rgba(162, 207, 171, .18), 0 0 24px rgba(162, 207, 171, .7); transform: rotate(45deg) scale(1.14); }
  100% { transform: rotate(45deg) scale(1); }
}
@keyframes garden-reliquary-conduct {
  0% { opacity: 0; transform: scaleX(.05); }
  22% { opacity: .94; }
  74% { opacity: .72; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
:root[data-resolved-theme="light"] .folio-pixel-bleed {
  --reliquary-void: #718077;
  --reliquary-stone: #87968c;
  --reliquary-face: #a2afa6;
  --reliquary-edge: #566b5c;
  --reliquary-rune: #315f3d;
  --reliquary-root: #477653;
  opacity: .86;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 1180px) {
  .folio-pixel-reliquary-lintel { width: min(880px, 95vw); }
  .folio-pixel-reliquary-pillar { width: 82px; }
  .folio-pixel-reliquary-pillar-left { left: calc(50% - 440px); }
  .folio-pixel-reliquary-pillar-right { right: calc(50% - 440px); }
  .folio-pixel-reliquary-plinth { width: min(900px, 96vw); }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-reliquary-lintel > i,
  .folio-pixel-reliquary-roots > i::after { animation: none !important; }
}
html.garden-lite-motion .folio-pixel-reliquary-lintel > i,
html.garden-lite-motion .folio-pixel-reliquary-roots > i::after { animation: none !important; transition: none !important; }

/* V154 — a restrained smoked-glass surround: material and reflected light, no extra iconography. */
.folio-pixel-stage::after { display: none; }
.folio-pixel-stage::before {
  left: 8%;
  right: 8%;
  bottom: -31px;
  z-index: 0;
  height: 40px;
  opacity: .58;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .72), transparent 72%);
  filter: blur(12px);
  transform: none;
}
.folio-pixel-ambient {
  position: absolute;
  inset: -18px -20px -26px;
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: .78;
  background:
    radial-gradient(ellipse 64% 44% at 50% 0, rgba(105, 151, 114, .18), transparent 72%),
    linear-gradient(180deg, rgba(30, 47, 38, .5), rgba(5, 11, 8, .92) 18% 80%, rgba(25, 44, 33, .52));
  border: 1px solid rgba(138, 167, 144, .2);
  box-shadow:
    inset 0 1px 0 rgba(196, 218, 200, .13),
    inset 0 -1px 0 rgba(112, 151, 120, .18),
    0 22px 58px rgba(0, 0, 0, .42),
    0 0 32px rgba(91, 137, 101, .08);
  pointer-events: none;
  transform: translate3d(0, 0, -1px) scale(.998);
  transform-origin: 50% 58%;
  transition: opacity 320ms cubic-bezier(.23, 1, .32, 1), transform 420ms cubic-bezier(.23, 1, .32, 1), border-color 320ms ease;
}
.folio-pixel-ambient::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: -18px;
  height: 45px;
  opacity: .68;
  background: radial-gradient(ellipse, rgba(139, 183, 147, .34), transparent 70%);
  filter: blur(13px);
}
.folio-pixel-ambient::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200, 218, 203, .06);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .32);
  pointer-events: none;
}
.folio-pixel-ambient > i,
.folio-pixel-ambient > b,
.folio-pixel-ambient > em {
  position: absolute;
  display: block;
  left: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(145, 184, 153, .52), transparent);
  transform: translateX(-50%);
  transform-origin: center;
}
.folio-pixel-ambient > i {
  top: 8px;
  width: 76%;
  opacity: .54;
  animation: garden-pixel-ambient-crown 6.8s cubic-bezier(.37, 0, .63, 1) infinite;
}
.folio-pixel-ambient > b {
  bottom: 15px;
  width: 82%;
  opacity: .46;
  animation: garden-pixel-ambient-water 5.4s cubic-bezier(.37, 0, .63, 1) -1.7s infinite;
}
.folio-pixel-ambient > em {
  bottom: 8px;
  width: 58%;
  opacity: .24;
  animation: garden-pixel-ambient-water 6.2s cubic-bezier(.37, 0, .63, 1) -3.4s infinite reverse;
}
.folio-pixel-stage:has(.folio-pixel-diorama.is-diorama-tracking) .folio-pixel-ambient {
  opacity: .92;
  border-color: rgba(151, 187, 158, .3);
  transform: translate3d(0, 1px, -1px) scale(1.006);
}
.folio-pixel-vista.is-clear .folio-pixel-ambient {
  opacity: .9;
  background:
    radial-gradient(ellipse 64% 44% at 50% 0, rgba(123, 178, 135, .22), transparent 72%),
    linear-gradient(180deg, rgba(34, 58, 44, .56), rgba(6, 15, 10, .9) 18% 80%, rgba(31, 60, 41, .58));
}
.folio-pixel-vista.is-linked .folio-pixel-ambient { box-shadow: inset 0 1px 0 rgba(210, 229, 214, .16), inset 0 -1px 0 rgba(129, 174, 139, .24), 0 22px 58px rgba(0, 0, 0, .42), 0 0 38px rgba(104, 159, 116, .14); }
.folio-pixel-vista.is-signal-active .folio-pixel-ambient { animation: garden-pixel-ambient-awake 980ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-diorama::before {
  inset: -7px;
  background: linear-gradient(145deg, #0d1511, #020604 46% 100%);
  border-color: rgba(151, 180, 157, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(208, 224, 211, .06);
  transform: translateZ(-18px);
}
.folio-pixel-shell-right {
  right: -19px;
  width: 20px;
  background: linear-gradient(90deg, #2d3a32, #111a15 42%, #040806);
  border-right-width: 2px;
  box-shadow: inset 5px 0 0 rgba(97, 119, 102, .22), inset 9px 0 0 rgba(4, 8, 6, .62);
  transform: translateZ(-6px) rotateY(72deg);
}
.folio-pixel-shell-bottom {
  bottom: -19px;
  height: 20px;
  background: linear-gradient(180deg, #334238, #111a15 42%, #030705);
  border-bottom-width: 2px;
  box-shadow: inset 0 5px 0 rgba(101, 127, 107, .2), inset 0 9px 0 rgba(4, 8, 6, .66);
  transform: translateZ(-6px) rotateX(-72deg);
}
.pixel-frame {
  border-width: 4px;
  border-color: #050806;
  box-shadow: inset 0 0 0 1px rgba(166, 192, 171, .34), inset 0 0 0 3px rgba(4, 9, 6, .76);
}
@keyframes garden-pixel-ambient-crown {
  0%, 100% { opacity: .34; transform: translateX(-50%) scaleX(.82); }
  50% { opacity: .62; transform: translateX(-50%) scaleX(1); }
}
@keyframes garden-pixel-ambient-water {
  0%, 100% { opacity: .18; transform: translateX(-50%) scaleX(.72); }
  48% { opacity: .56; transform: translateX(-50%) scaleX(1); }
}
@keyframes garden-pixel-ambient-awake {
  0% { opacity: .78; transform: translate3d(0, 0, -1px) scale(.998); }
  38% { opacity: 1; transform: translate3d(0, 1px, -1px) scale(1.012); }
  100% { opacity: .9; transform: translate3d(0, 0, -1px) scale(1); }
}
:root[data-resolved-theme="light"] .folio-pixel-ambient {
  opacity: .7;
  background:
    radial-gradient(ellipse 64% 44% at 50% 0, rgba(52, 104, 65, .16), transparent 72%),
    linear-gradient(180deg, rgba(180, 191, 183, .72), rgba(125, 141, 130, .56) 20% 80%, rgba(157, 174, 161, .7));
  border-color: rgba(54, 85, 63, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(48, 78, 57, .18), 0 20px 48px rgba(49, 63, 52, .22), 0 0 28px rgba(45, 91, 57, .08);
}
:root[data-resolved-theme="light"] .folio-pixel-ambient > i,
:root[data-resolved-theme="light"] .folio-pixel-ambient > b,
:root[data-resolved-theme="light"] .folio-pixel-ambient > em { background: linear-gradient(90deg, transparent, rgba(43, 92, 55, .48), transparent); }
:root[data-resolved-theme="light"] .folio-pixel-diorama::before {
  background: linear-gradient(145deg, #8e9e92, #65786b 46% 100%);
  border-color: rgba(45, 78, 54, .32);
  box-shadow: 0 22px 52px rgba(46, 58, 49, .24), inset 0 1px 0 rgba(255, 255, 255, .38);
}
:root[data-resolved-theme="light"] .folio-pixel-shell-right { background: linear-gradient(90deg, #8fa094, #66786b 48%, #46564b); }
:root[data-resolved-theme="light"] .folio-pixel-shell-bottom { background: linear-gradient(180deg, #91a197, #65776b 48%, #435348); }
:root[data-resolved-theme="light"] .pixel-frame { border-color: #45574b; box-shadow: inset 0 0 0 1px rgba(235, 241, 236, .58), inset 0 0 0 3px rgba(54, 73, 60, .42); }
@media (max-width: 768px), (hover: none) {
  .folio-pixel-ambient { inset: -10px -11px -15px; opacity: .62; }
  .folio-pixel-shell-right { right: -13px; width: 14px; }
  .folio-pixel-shell-bottom { bottom: -13px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-ambient,
  .folio-pixel-ambient > i,
  .folio-pixel-ambient > b,
  .folio-pixel-ambient > em { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-ambient,
html.garden-lite-motion .folio-pixel-ambient > i,
html.garden-lite-motion .folio-pixel-ambient > b,
html.garden-lite-motion .folio-pixel-ambient > em { animation: none !important; transition: none !important; }

/* V155 — a restrained near-shore vignette extends the lake without entering the text area. */
.folio-pixel-surround {
  --surround-shore-x: 0px;
  --surround-shore-y: 0px;
  --surround-water-x: 0px;
  --surround-water-y: 0px;
  --surround-rock: #07100c;
  --surround-rock-face: #132219;
  --surround-rock-edge: #304437;
  --surround-reed: #22372a;
  --surround-water: #62806a;
  position: absolute;
  left: -116px;
  right: -116px;
  top: 43%;
  bottom: -38px;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
}
.folio-pixel-surround-shore,
.folio-pixel-surround-water,
.folio-pixel-surround-fireflies,
.folio-pixel-surround-shore > i,
.folio-pixel-surround-shore > b,
.folio-pixel-surround-shore > em,
.folio-pixel-surround-water > i,
.folio-pixel-surround-water > b,
.folio-pixel-surround-water > em,
.folio-pixel-surround-fireflies > i { position: absolute; display: block; }
.folio-pixel-surround-shore {
  bottom: 13px;
  z-index: 3;
  width: 154px;
  height: 136px;
  opacity: .94;
  background: transparent;
  filter: drop-shadow(0 13px 15px rgba(0, 0, 0, .34));
  transform-origin: 50% 100%;
}
.folio-pixel-surround-shore::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(180deg, transparent 0 31%, var(--surround-rock-edge) 31% 35%, transparent 35%),
    linear-gradient(145deg, var(--surround-rock-face), var(--surround-rock) 62%);
  clip-path: polygon(0 29%, 14% 29%, 14% 20%, 31% 20%, 31% 8%, 49% 8%, 49% 18%, 66% 18%, 66% 31%, 82% 31%, 82% 46%, 100% 46%, 100% 100%, 0 100%);
}
.folio-pixel-surround-shore::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 25%;
  width: 5px;
  height: 64%;
  opacity: .34;
  background: linear-gradient(180deg, transparent, #7ca185 32% 74%, transparent);
  box-shadow: 0 0 10px rgba(108, 155, 118, .18);
  transform: rotate(31deg) scaleY(.74);
  transform-origin: top;
}
.folio-pixel-surround-shore-left {
  left: 0;
  transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0);
}
.folio-pixel-surround-shore-right {
  right: 0;
  transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0) scaleX(-1);
}
.folio-pixel-surround-shore > i,
.folio-pixel-surround-shore > b,
.folio-pixel-surround-shore > em {
  bottom: 60%;
  width: 4px;
  background: var(--surround-reed);
  box-shadow: 0 0 0 1px rgba(4, 11, 7, .42);
  transform-origin: bottom;
}
.folio-pixel-surround-shore > i { left: 21%; height: 46px; transform: rotate(-7deg); animation: garden-surround-reed-a 5.8s steps(6, end) infinite alternate; }
.folio-pixel-surround-shore > b { left: 33%; height: 64px; transform: rotate(3deg); animation: garden-surround-reed-b 6.6s steps(7, end) -2.1s infinite alternate; }
.folio-pixel-surround-shore > em { left: 46%; height: 38px; transform: rotate(8deg); animation: garden-surround-reed-a 7.2s steps(7, end) -3.4s infinite alternate-reverse; }
.folio-pixel-surround-shore > i::after,
.folio-pixel-surround-shore > b::after,
.folio-pixel-surround-shore > em::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 18%;
  width: 10px;
  height: 4px;
  background: color-mix(in srgb, var(--surround-reed) 78%, #728c78);
  box-shadow: 5px 16px 0 var(--surround-reed);
}
.folio-pixel-surround-water {
  left: 3%;
  right: 3%;
  bottom: 9px;
  z-index: 2;
  height: 48px;
  overflow: hidden;
  opacity: .62;
  background: linear-gradient(180deg, rgba(16, 39, 28, .18), rgba(4, 15, 10, .04));
  transform: translate3d(var(--surround-water-x), var(--surround-water-y), 0);
}
.folio-pixel-surround-water::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 24% at 50% 0, rgba(99, 139, 108, .18), transparent 72%);
}
.folio-pixel-surround-water > i,
.folio-pixel-surround-water > b,
.folio-pixel-surround-water > em {
  left: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--surround-water), transparent);
  transform: translateX(-50%);
  transform-origin: center;
  animation: garden-surround-water 5.2s cubic-bezier(.37, 0, .63, 1) infinite;
}
.folio-pixel-surround-water > i { top: 9px; width: 58%; opacity: .6; }
.folio-pixel-surround-water > b { top: 23px; width: 76%; opacity: .4; animation-delay: -1.8s; animation-duration: 6.4s; }
.folio-pixel-surround-water > em { top: 37px; width: 42%; opacity: .26; animation-delay: -3.2s; animation-duration: 7.1s; }
.folio-pixel-surround-fireflies { inset: 0; z-index: 4; opacity: .16; transition: opacity 420ms cubic-bezier(.23, 1, .32, 1); }
.folio-pixel-surround-fireflies > i {
  width: 4px;
  height: 4px;
  background: #a5c9ac;
  box-shadow: 0 0 8px rgba(154, 204, 164, .48);
  animation: garden-surround-firefly 4.6s steps(6, end) infinite;
}
.folio-pixel-surround-fireflies > i:nth-child(1) { left: 5%; top: 32%; }
.folio-pixel-surround-fireflies > i:nth-child(2) { left: 13%; top: 48%; animation-delay: -1.4s; }
.folio-pixel-surround-fireflies > i:nth-child(3) { right: 13%; top: 37%; animation-delay: -2.7s; }
.folio-pixel-surround-fireflies > i:nth-child(4) { right: 5%; top: 52%; animation-delay: -3.8s; }
.folio-pixel-vista.is-clear .folio-pixel-surround-fireflies { opacity: .86; }
.folio-pixel-vista.is-clear .folio-pixel-surround-water { opacity: .78; }
.folio-pixel-vista.is-linked .folio-pixel-surround-shore::after { opacity: .62; box-shadow: 0 0 13px rgba(118, 173, 129, .34); }
.folio-pixel-vista.is-signal-active .folio-pixel-surround-shore::after { animation: garden-surround-root-glint 920ms cubic-bezier(.23, 1, .32, 1) both; }
.folio-pixel-vista.is-signal-response .folio-pixel-surround-water > i,
.folio-pixel-vista.is-signal-response .folio-pixel-surround-water > b,
.folio-pixel-vista.is-signal-response .folio-pixel-surround-water > em { animation: garden-surround-water-response 680ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes garden-surround-reed-a { to { transform: rotate(2deg); } }
@keyframes garden-surround-reed-b { to { transform: rotate(-4deg); } }
@keyframes garden-surround-water {
  0%, 100% { transform: translateX(-50%) scaleX(.78); }
  50% { transform: translateX(-50%) scaleX(1); }
}
@keyframes garden-surround-firefly {
  0%, 100% { opacity: .18; transform: translate3d(0, 0, 0); }
  45% { opacity: 1; transform: translate3d(4px, -6px, 0); }
}
@keyframes garden-surround-root-glint {
  0% { opacity: .18; transform: rotate(31deg) scaleY(.18); }
  48% { opacity: .92; transform: rotate(31deg) scaleY(1); }
  100% { opacity: .46; transform: rotate(31deg) scaleY(.74); }
}
@keyframes garden-surround-water-response {
  0% { opacity: .18; transform: translateX(-50%) scaleX(.46); }
  50% { opacity: .88; transform: translateX(-50%) scaleX(1.12); }
  100% { opacity: .3; transform: translateX(-50%) scaleX(.86); }
}
:root[data-resolved-theme="light"] .folio-pixel-surround {
  --surround-rock: #56695c;
  --surround-rock-face: #819084;
  --surround-rock-edge: #a6b0a8;
  --surround-reed: #3f6649;
  --surround-water: #4b7655;
  opacity: .72;
}
:root[data-resolved-theme="light"] .folio-pixel-surround-shore { filter: drop-shadow(0 11px 12px rgba(53, 67, 56, .2)); }
:root[data-resolved-theme="light"] .folio-pixel-surround-fireflies > i { background: #326a40; box-shadow: 0 0 7px rgba(48, 108, 62, .28); }
@media (max-width: 1000px) {
  .folio-pixel-surround { left: -72px; right: -72px; }
  .folio-pixel-surround-shore { width: 104px; height: 112px; opacity: .78; }
  .folio-pixel-surround-shore > i { left: 18%; }
  .folio-pixel-surround-shore > b { left: 32%; }
  .folio-pixel-surround-shore > em { left: 48%; }
}
@media (max-width: 768px), (hover: none) {
  .folio-pixel-surround { left: -15px; right: -15px; bottom: -24px; }
  .folio-pixel-surround-shore,
  .folio-pixel-surround-fireflies { display: none; }
  .folio-pixel-surround-water { left: 0; right: 0; bottom: 5px; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-surround-shore > i,
  .folio-pixel-surround-shore > b,
  .folio-pixel-surround-shore > em,
  .folio-pixel-surround-water > i,
  .folio-pixel-surround-water > b,
  .folio-pixel-surround-water > em,
  .folio-pixel-surround-fireflies > i,
  .folio-pixel-surround-shore::after { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-surround-shore > i,
html.garden-lite-motion .folio-pixel-surround-shore > b,
html.garden-lite-motion .folio-pixel-surround-shore > em,
html.garden-lite-motion .folio-pixel-surround-water > i,
html.garden-lite-motion .folio-pixel-surround-water > b,
html.garden-lite-motion .folio-pixel-surround-water > em,
html.garden-lite-motion .folio-pixel-surround-fireflies > i,
html.garden-lite-motion .folio-pixel-surround-shore::after { animation: none !important; transition: none !important; }

/* V156 — a wider mist-ridge panorama replaces the narrow reed vignette. */
.folio-pixel-surround {
  --surround-back-x: 0px;
  --surround-back-y: 0px;
  --surround-ridge-x: 0px;
  --surround-ridge-y: 0px;
  left: 50%;
  right: auto;
  top: 30%;
  bottom: -42px;
  width: min(1240px, 96vw);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 92%, transparent 100%);
}
.folio-pixel-surround-ridge,
.folio-pixel-surround-rock,
.folio-pixel-surround-rock > i,
.folio-pixel-surround-rock > b,
.folio-pixel-surround-rock > em { position: absolute; display: block; }
.folio-pixel-surround-ridge {
  left: -3%;
  right: -3%;
  transform-origin: 50% 100%;
}
.folio-pixel-surround-ridge::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -8px;
  height: 18px;
  opacity: .42;
  background: linear-gradient(180deg, rgba(70, 99, 79, .32), transparent);
  filter: blur(7px);
}
.folio-pixel-surround-ridge-back {
  top: 4%;
  z-index: 0;
  height: 39%;
  opacity: .54;
  background: #17271e;
  clip-path: polygon(0 62%, 6% 62%, 6% 51%, 12% 51%, 12% 38%, 18% 38%, 18% 53%, 25% 53%, 25% 66%, 32% 66%, 32% 47%, 39% 47%, 39% 30%, 45% 30%, 45% 49%, 52% 49%, 52% 64%, 59% 64%, 59% 45%, 66% 45%, 66% 27%, 72% 27%, 72% 43%, 79% 43%, 79% 59%, 86% 59%, 86% 39%, 93% 39%, 93% 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-pixel-surround-ridge-front {
  top: 22%;
  z-index: 2;
  height: 35%;
  opacity: .82;
  background: #0b1711;
  box-shadow: inset 0 8px 0 rgba(47, 72, 56, .24);
  clip-path: polygon(0 58%, 7% 58%, 7% 45%, 15% 45%, 15% 61%, 23% 61%, 23% 72%, 32% 72%, 32% 51%, 41% 51%, 41% 65%, 50% 65%, 50% 76%, 60% 76%, 60% 55%, 69% 55%, 69% 68%, 78% 68%, 78% 47%, 87% 47%, 87% 63%, 94% 63%, 94% 53%, 100% 53%, 100% 100%, 0 100%);
  transform: translate3d(var(--surround-ridge-x), var(--surround-ridge-y), 0);
}
.folio-pixel-surround-water {
  left: 0;
  right: 0;
  top: 48%;
  bottom: 0;
  z-index: 1;
  height: auto;
  opacity: .7;
  background:
    linear-gradient(180deg, rgba(19, 48, 34, .38), rgba(4, 17, 11, .08)),
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(69, 104, 78, .055) 14px 16px);
}
.folio-pixel-surround-water::before {
  background: radial-gradient(ellipse 48% 32% at 50% 0, rgba(105, 151, 114, .24), transparent 74%);
}
.folio-pixel-surround-water > i { top: 18%; width: 64%; }
.folio-pixel-surround-water > b { top: 47%; width: 86%; }
.folio-pixel-surround-water > em { top: 73%; width: 48%; }
.folio-pixel-surround-rock {
  bottom: 4px;
  z-index: 3;
  width: 224px;
  height: 164px;
  opacity: .96;
  filter: drop-shadow(0 17px 18px rgba(0, 0, 0, .38));
  transform-origin: 50% 100%;
}
.folio-pixel-surround-rock::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 26%, rgba(63, 87, 69, .6) 26% 31%, transparent 31%),
    linear-gradient(145deg, #19281f, #060e0a 64%);
  clip-path: polygon(0 38%, 13% 38%, 13% 27%, 29% 27%, 29% 13%, 46% 13%, 46% 23%, 63% 23%, 63% 36%, 79% 36%, 79% 49%, 100% 49%, 100% 100%, 0 100%);
}
.folio-pixel-surround-rock::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 24%;
  width: 6px;
  height: 61%;
  opacity: .4;
  background: linear-gradient(180deg, transparent, #7da387 28% 78%, transparent);
  box-shadow: 0 0 11px rgba(119, 168, 130, .2);
  transform: rotate(36deg) scaleY(.72);
  transform-origin: top;
}
.folio-pixel-surround-rock-left { left: 0; transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0); }
.folio-pixel-surround-rock-right { right: 0; transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0) scaleX(-1); }
.folio-pixel-surround-rock > i,
.folio-pixel-surround-rock > b,
.folio-pixel-surround-rock > em {
  height: 5px;
  background: #263a2d;
  box-shadow: 0 5px 0 rgba(3, 10, 6, .66);
}
.folio-pixel-surround-rock > i { left: 16%; top: 48%; width: 36%; transform: rotate(5deg); }
.folio-pixel-surround-rock > b { left: 38%; top: 64%; width: 44%; transform: rotate(-3deg); }
.folio-pixel-surround-rock > em { left: 9%; top: 79%; width: 58%; opacity: .62; }
.folio-pixel-surround-fireflies { transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0); }
.folio-pixel-vista.is-linked .folio-pixel-surround-rock::after { opacity: .68; box-shadow: 0 0 15px rgba(119, 176, 131, .4); }
.folio-pixel-vista.is-signal-active .folio-pixel-surround-rock::after { animation: garden-surround-rock-glint 960ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes garden-surround-rock-glint {
  0% { opacity: .16; transform: rotate(36deg) scaleY(.12); }
  48% { opacity: .94; transform: rotate(36deg) scaleY(1); }
  100% { opacity: .5; transform: rotate(36deg) scaleY(.72); }
}
:root[data-resolved-theme="light"] .folio-pixel-surround-ridge-back { background: #819086; }
:root[data-resolved-theme="light"] .folio-pixel-surround-ridge-front { background: #687a6d; box-shadow: inset 0 8px 0 rgba(214, 222, 216, .22); }
:root[data-resolved-theme="light"] .folio-pixel-surround-water { background: linear-gradient(180deg, rgba(118, 145, 126, .34), rgba(191, 201, 193, .08)), repeating-linear-gradient(180deg, transparent 0 14px, rgba(56, 91, 66, .06) 14px 16px); }
:root[data-resolved-theme="light"] .folio-pixel-surround-rock::before { background: linear-gradient(180deg, transparent 0 26%, rgba(171, 187, 175, .66) 26% 31%, transparent 31%), linear-gradient(145deg, #7c8f81, #4e6355 64%); }
:root[data-resolved-theme="light"] .folio-pixel-surround-rock > i,
:root[data-resolved-theme="light"] .folio-pixel-surround-rock > b,
:root[data-resolved-theme="light"] .folio-pixel-surround-rock > em { background: #47604f; box-shadow: 0 5px 0 rgba(60, 79, 66, .28); }
@media (max-width: 1000px) {
  .folio-pixel-surround { top: 34%; width: 98vw; }
  .folio-pixel-surround-rock { width: 150px; height: 136px; opacity: .8; }
}
@media (max-width: 768px), (hover: none) {
  .folio-pixel-surround { top: 40%; bottom: -24px; width: 100vw; }
  .folio-pixel-surround-rock,
  .folio-pixel-surround-fireflies { display: none; }
  .folio-pixel-surround-ridge-back { opacity: .28; }
  .folio-pixel-surround-ridge-front { opacity: .42; }
  .folio-pixel-surround-water { top: 54%; opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-pixel-surround-rock::after { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-pixel-surround-rock::after { animation: none !important; transition: none !important; }

/* V157 — continuous SVG silhouettes make the outer scene read as a misty mountain lake. */
.folio-pixel-surround {
  left: 50%;
  right: auto;
  top: 24%;
  bottom: -44px;
  width: min(1320px, 98vw);
  overflow: hidden;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 95%, transparent 100%);
}
.folio-pixel-panorama {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.folio-pixel-panorama g,
.folio-panorama-water-line {
  transform-box: fill-box;
  transform-origin: center;
}
.folio-panorama-back {
  fill: #203729;
  opacity: .76;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .18));
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-panorama-front {
  fill: #0d1c14;
  opacity: .94;
  filter: drop-shadow(0 11px 9px rgba(0, 0, 0, .24));
  transform: translate3d(var(--surround-ridge-x), var(--surround-ridge-y), 0);
}
.folio-panorama-fog {
  fill: none;
  stroke: rgba(157, 183, 163, .34);
  stroke-width: 22;
  stroke-linecap: round;
  opacity: .82;
  filter: blur(.65px) drop-shadow(0 0 10px rgba(128, 161, 136, .12));
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-panorama-fog path:nth-child(2) {
  stroke-width: 14;
  opacity: .66;
}
.folio-panorama-water {
  transform: translate3d(var(--surround-water-x), var(--surround-water-y), 0);
}
.folio-panorama-water-fill { fill: rgba(7, 28, 18, .72); }
.folio-panorama-water-line {
  fill: none;
  stroke: rgba(112, 158, 122, .58);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: garden-panorama-water 6.2s cubic-bezier(.37, 0, .63, 1) infinite;
}
.folio-panorama-water-line:nth-child(3) { animation-delay: -2.1s; }
.folio-panorama-water-line:nth-child(4) { animation-delay: -4s; }
.folio-panorama-rocks {
  transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0);
}
.folio-panorama-rock {
  fill: #07110c;
  filter: drop-shadow(0 15px 12px rgba(0, 0, 0, .38));
}
.folio-panorama-root {
  fill: none;
  stroke: #789d80;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .46;
  vector-effect: non-scaling-stroke;
  transition: opacity 320ms ease;
}
.folio-pixel-vista.is-clear .folio-panorama-fog { opacity: .38; }
.folio-pixel-vista.is-clear .folio-panorama-back { opacity: .86; }
.folio-pixel-vista.is-linked .folio-panorama-root { opacity: .82; }
.folio-pixel-vista.is-signal-active .folio-panorama-root {
  animation: garden-panorama-root 900ms cubic-bezier(.23, 1, .32, 1) both;
}
.folio-pixel-vista.is-signal-response .folio-panorama-water-line {
  animation: garden-panorama-water-response 680ms cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes garden-panorama-water {
  0%, 100% { opacity: .32; transform: scaleX(.84); }
  50% { opacity: .76; transform: scaleX(1); }
}
@keyframes garden-panorama-root {
  0% { opacity: .14; }
  48% { opacity: 1; }
  100% { opacity: .68; }
}
@keyframes garden-panorama-water-response {
  0% { opacity: .18; transform: scaleX(.5); }
  50% { opacity: .96; transform: scaleX(1.08); }
  100% { opacity: .42; transform: scaleX(.9); }
}
:root[data-resolved-theme="light"] .folio-panorama-back { fill: #8a9a8e; }
:root[data-resolved-theme="light"] .folio-panorama-front { fill: #617667; }
:root[data-resolved-theme="light"] .folio-panorama-fog { stroke: rgba(238, 242, 239, .78); }
:root[data-resolved-theme="light"] .folio-panorama-water-fill { fill: rgba(116, 145, 124, .5); }
:root[data-resolved-theme="light"] .folio-panorama-water-line { stroke: rgba(43, 91, 56, .56); }
:root[data-resolved-theme="light"] .folio-panorama-rock { fill: #4f6557; }
:root[data-resolved-theme="light"] .folio-panorama-root { stroke: #356d43; }
@media (max-width: 1000px) {
  .folio-pixel-surround { top: 30%; width: 100vw; }
}
@media (max-width: 768px), (hover: none) {
  .folio-pixel-surround { top: 37%; bottom: -24px; }
  .folio-panorama-rocks { opacity: .42; }
  .folio-panorama-fog { opacity: .44; stroke-width: 14; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-panorama-water-line,
  .folio-panorama-root { animation: none !important; transition-duration: .01ms !important; }
}
html.garden-lite-motion .folio-panorama-water-line,
html.garden-lite-motion .folio-panorama-root { animation: none !important; transition: none !important; }

/* V158 — the outer vista becomes a crisp aurora canyon built for pixel art. */
.folio-pixel-surround {
  top: 16%;
  bottom: -52px;
  width: min(1460px, 108vw);
  overflow: hidden;
  opacity: .98;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 96%, transparent 100%);
}
.folio-pixel-panorama {
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .24));
}
.folio-panorama-stars {
  fill: #c7ddd0;
  opacity: .56;
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-panorama-stars rect:nth-child(3n + 1) { animation: garden-pixel-star 3.8s steps(2, end) infinite; }
.folio-panorama-stars rect:nth-child(3n + 2) { animation: garden-pixel-star 4.6s steps(2, end) -1.7s infinite; }
.folio-panorama-stars rect:nth-child(3n) { animation: garden-pixel-star 5.2s steps(2, end) -3.1s infinite; }
.folio-panorama-aurora {
  opacity: .72;
  mix-blend-mode: screen;
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-aurora-ribbon {
  transform-box: fill-box;
  transform-origin: center;
  animation: garden-pixel-aurora 8.4s steps(7, end) infinite;
}
.folio-aurora-ribbon-a { fill: #4b8e68; }
.folio-aurora-ribbon-b { fill: #30664d; opacity: .78; animation-delay: -2.8s; }
.folio-aurora-ribbon-c { fill: #7bb889; opacity: .38; animation-delay: -5.4s; }
.folio-panorama-peaks-back {
  fill: #1a3027;
  opacity: .9;
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-panorama-snow {
  fill: #8ba097;
  opacity: .82;
}
.folio-panorama-peaks-front {
  fill: #10231a;
  opacity: .98;
  transform: translate3d(var(--surround-ridge-x), var(--surround-ridge-y), 0);
}
.folio-panorama-forest {
  fill: #091711;
  opacity: .96;
  transform: translate3d(var(--surround-ridge-x), var(--surround-ridge-y), 0);
}
.folio-panorama-lake {
  transform: translate3d(var(--surround-water-x), var(--surround-water-y), 0);
}
.folio-panorama-ice { fill: #0b271c; opacity: .92; }
.folio-panorama-reflection {
  fill: #4f7760;
  opacity: .54;
  transform-box: fill-box;
  transform-origin: center;
  animation: garden-pixel-ice 6.8s steps(5, end) infinite;
}
.folio-panorama-reflection-b { opacity: .34; animation-delay: -3.4s; animation-direction: reverse; }
.folio-panorama-aurora-reflection {
  fill: #64a77a;
  opacity: .23;
  animation: garden-pixel-reflection 7.6s steps(6, end) infinite;
}
.folio-panorama-foreground {
  fill: #050d09;
  transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0);
}
.folio-panorama-cliff { filter: drop-shadow(0 14px 8px rgba(0, 0, 0, .44)); }
.folio-panorama-pine-near { fill: #07130d; }
.folio-panorama-root {
  fill: none;
  stroke: #659174;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .42;
  vector-effect: non-scaling-stroke;
  transition: opacity 320ms ease;
}
.folio-pixel-vista.is-clear .folio-panorama-stars { opacity: .86; }
.folio-pixel-vista.is-clear .folio-panorama-aurora { opacity: .92; }
.folio-pixel-vista.is-clear .folio-panorama-snow { fill: #b0c2b8; }
.folio-pixel-vista.is-linked .folio-panorama-root { opacity: .9; }
.folio-pixel-vista.is-signal-active .folio-aurora-ribbon-a,
.folio-pixel-vista.is-signal-active .folio-aurora-ribbon-b,
.folio-pixel-vista.is-signal-active .folio-aurora-ribbon-c {
  animation: garden-pixel-aurora-surge 920ms steps(8, end) both;
}
.folio-pixel-vista.is-signal-response .folio-panorama-aurora-reflection {
  animation: garden-pixel-reflection-surge 760ms steps(7, end) both;
}
@keyframes garden-pixel-star {
  0%, 68%, 100% { opacity: .28; }
  70%, 84% { opacity: 1; }
}
@keyframes garden-pixel-aurora {
  0%, 100% { opacity: .48; transform: translate3d(-8px, 0, 0) scaleY(.94); }
  44% { opacity: .94; transform: translate3d(5px, 5px, 0) scaleY(1.04); }
  72% { opacity: .68; transform: translate3d(10px, -2px, 0) scaleY(.98); }
}
@keyframes garden-pixel-ice {
  0%, 100% { opacity: .24; transform: translateX(-12px) scaleX(.92); }
  50% { opacity: .62; transform: translateX(10px) scaleX(1.04); }
}
@keyframes garden-pixel-reflection {
  0%, 100% { opacity: .16; transform: scaleX(.82); }
  50% { opacity: .34; transform: scaleX(1); }
}
@keyframes garden-pixel-aurora-surge {
  0% { opacity: .25; transform: scaleY(.72); }
  32% { opacity: 1; transform: translateY(-8px) scaleY(1.18); }
  62% { opacity: .8; transform: translateY(4px) scaleY(.96); }
  100% { opacity: .66; transform: scaleY(1); }
}
@keyframes garden-pixel-reflection-surge {
  0% { opacity: .08; transform: scaleX(.46); }
  45% { opacity: .72; transform: scaleX(1.12); }
  100% { opacity: .27; transform: scaleX(.9); }
}
:root[data-resolved-theme="light"] .folio-panorama-stars { fill: #54705e; opacity: .36; }
:root[data-resolved-theme="light"] .folio-panorama-aurora { opacity: .4; mix-blend-mode: multiply; }
:root[data-resolved-theme="light"] .folio-aurora-ribbon-a { fill: #8cb39a; }
:root[data-resolved-theme="light"] .folio-aurora-ribbon-b { fill: #aec8b6; }
:root[data-resolved-theme="light"] .folio-aurora-ribbon-c { fill: #6f9d7d; }
:root[data-resolved-theme="light"] .folio-panorama-peaks-back { fill: #84958b; }
:root[data-resolved-theme="light"] .folio-panorama-snow { fill: #dce4df; }
:root[data-resolved-theme="light"] .folio-panorama-peaks-front { fill: #61766a; }
:root[data-resolved-theme="light"] .folio-panorama-forest { fill: #405a4a; }
:root[data-resolved-theme="light"] .folio-panorama-ice { fill: #91aa9b; opacity: .72; }
:root[data-resolved-theme="light"] .folio-panorama-reflection { fill: #315f43; }
:root[data-resolved-theme="light"] .folio-panorama-aurora-reflection { fill: #34764a; }
:root[data-resolved-theme="light"] .folio-panorama-foreground { fill: #32493b; }
:root[data-resolved-theme="light"] .folio-panorama-pine-near { fill: #294133; }
:root[data-resolved-theme="light"] .folio-panorama-root { stroke: #9bc1a4; }
@media (max-width: 1000px) {
  .folio-pixel-surround { top: 22%; width: 112vw; }
  .folio-panorama-stars { opacity: .38; }
}
@media (max-width: 768px), (hover: none) {
  .folio-pixel-surround { top: 32%; bottom: -22px; width: 118vw; }
  .folio-panorama-stars { display: none; }
  .folio-panorama-aurora { opacity: .48; }
  .folio-panorama-foreground { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-panorama-stars rect,
  .folio-aurora-ribbon,
  .folio-panorama-reflection,
  .folio-panorama-aurora-reflection { animation: none !important; }
}
html.garden-lite-motion .folio-panorama-stars rect,
html.garden-lite-motion .folio-aurora-ribbon,
html.garden-lite-motion .folio-panorama-reflection,
html.garden-lite-motion .folio-panorama-aurora-reflection { animation: none !important; }

/* V159 — a moss-dark root garden reconnects the panorama to Yggdrasil and the site palette. */
.folio-pixel-surround {
  top: 17%;
  bottom: -50px;
  width: min(1440px, 108vw);
  opacity: .98;
}
.folio-pixel-panorama {
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .22));
}
.folio-rootgarden-motes,
.folio-rootgarden-forest-back {
  transform: translate3d(var(--surround-back-x), var(--surround-back-y), 0);
}
.folio-rootgarden-motes {
  fill: #9dbea3;
  opacity: calc(.58 + var(--rootgarden-energy) * .28);
}
.folio-rootgarden-motes rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: garden-rootgarden-mote 5.4s steps(7, end) infinite;
}
.folio-rootgarden-motes rect:nth-child(3n + 1) { animation-delay: -1.8s; }
.folio-rootgarden-motes rect:nth-child(3n + 2) { animation-delay: -3.7s; }
.folio-rootgarden-forest-back {
  fill: #1b3325;
  opacity: .62;
}
.folio-rootgarden-canopy,
.folio-rootgarden-terraces,
.folio-rootgarden-stones {
  transform: translate3d(var(--surround-ridge-x), var(--surround-ridge-y), 0);
}
.folio-rootgarden-canopy {
  fill: #0c1c13;
  opacity: .96;
}
.folio-rootgarden-moss {
  fill: #3f6848;
  opacity: .7;
}
.folio-rootgarden-terraces { fill: #0b1710; }
.folio-rootgarden-terrace-edge {
  fill: #466b4d;
  opacity: .74;
}
.folio-rootgarden-stones {
  fill: #405548;
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .36));
}
.folio-rootgarden-rune {
  fill: #83aa8a;
  opacity: .52;
  filter: drop-shadow(0 0 4px rgba(119, 173, 129, .24));
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 220ms ease, fill 220ms ease;
}
.folio-rootgarden-stone-heart { opacity: .5; }
.folio-rootgarden-water {
  transform: translate3d(var(--surround-water-x), var(--surround-water-y), 0);
}
.folio-rootgarden-blackwater {
  fill: #071b12;
  opacity: .9;
}
.folio-rootgarden-waterline {
  fill: #50765a;
  opacity: .44;
  transform-box: fill-box;
  transform-origin: center;
  animation: garden-rootgarden-water 6.4s steps(5, end) infinite;
}
.folio-rootgarden-waterline-b {
  opacity: .28;
  animation-delay: -3.1s;
  animation-direction: reverse;
}
.folio-rootgarden-roots,
.folio-rootgarden-foreground {
  transform: translate3d(var(--surround-shore-x), var(--surround-shore-y), 0);
}
.folio-rootgarden-roots {
  fill: none;
  stroke: #6d9875;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .36;
  filter: drop-shadow(0 0 5px rgba(104, 157, 114, .2));
}
.folio-rootgarden-foreground {
  fill: #050d08;
  filter: drop-shadow(0 16px 10px rgba(0, 0, 0, .42));
}
.folio-pixel-vista.is-clear .folio-rootgarden-motes { opacity: .9; }
.folio-pixel-vista.is-clear .folio-rootgarden-forest-back { opacity: .76; }
.folio-pixel-vista.is-linked .folio-rootgarden-roots { opacity: .68; }
.folio-pixel-vista.is-linked .folio-rootgarden-rune { opacity: .76; }
.folio-pixel-vista.is-signal-active .folio-rootgarden-roots path {
  stroke-dasharray: 900;
  animation: garden-rootgarden-root-signal 960ms steps(12, end) both;
}
.folio-pixel-vista.is-signal-active .folio-rootgarden-roots path:nth-child(2) { animation-delay: 70ms; }
.folio-pixel-vista.is-signal-active .folio-rootgarden-roots path:nth-child(3) { animation-delay: 140ms; }
.folio-pixel-vista.is-signal-active .folio-rootgarden-roots path:nth-child(4) { animation-delay: 210ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-rune {
  animation: garden-rootgarden-rune-wake 760ms steps(5, end) both;
}
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(2) .folio-rootgarden-rune { animation-delay: 55ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(3) .folio-rootgarden-rune { animation-delay: 110ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(4) .folio-rootgarden-rune { animation-delay: 165ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(5) .folio-rootgarden-rune { animation-delay: 220ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(6) .folio-rootgarden-rune { animation-delay: 275ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(7) .folio-rootgarden-rune { animation-delay: 330ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(8) .folio-rootgarden-rune { animation-delay: 385ms; }
.folio-pixel-vista.is-signal-response .folio-rootgarden-stone:nth-child(9) .folio-rootgarden-rune { animation-delay: 440ms; }
@keyframes garden-rootgarden-mote {
  0%, 100% { opacity: .14; transform: translate3d(0, 10px, 0) scale(1); }
  42% { opacity: 1; transform: translate3d(4px, -5px, 0) scale(1.4); }
  72% { opacity: .44; transform: translate3d(-3px, -14px, 0) scale(.8); }
}
@keyframes garden-rootgarden-water {
  0%, 100% { opacity: .2; transform: translateX(-10px) scaleX(.92); }
  50% { opacity: .56; transform: translateX(8px) scaleX(1.03); }
}
@keyframes garden-rootgarden-root-signal {
  0% { opacity: .12; stroke-dashoffset: 900; }
  58% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: .62; stroke-dashoffset: 0; }
}
@keyframes garden-rootgarden-rune-wake {
  0% { opacity: .18; fill: #59755e; transform: scale(.78); }
  46% { opacity: 1; fill: #c2e6c8; transform: scale(1.35); }
  100% { opacity: .72; fill: #8fbb96; transform: scale(1); }
}
:root[data-resolved-theme="light"] .folio-rootgarden-motes { fill: #466b4e; opacity: .42; }
:root[data-resolved-theme="light"] .folio-rootgarden-forest-back { fill: #879a8d; }
:root[data-resolved-theme="light"] .folio-rootgarden-canopy { fill: #5e7465; }
:root[data-resolved-theme="light"] .folio-rootgarden-moss { fill: #8fa68f; }
:root[data-resolved-theme="light"] .folio-rootgarden-terraces { fill: #516759; }
:root[data-resolved-theme="light"] .folio-rootgarden-terrace-edge { fill: #9eb09f; }
:root[data-resolved-theme="light"] .folio-rootgarden-stones { fill: #718478; }
:root[data-resolved-theme="light"] .folio-rootgarden-rune { fill: #315f3c; filter: none; }
:root[data-resolved-theme="light"] .folio-rootgarden-blackwater { fill: #89a294; opacity: .72; }
:root[data-resolved-theme="light"] .folio-rootgarden-waterline { fill: #315f43; }
:root[data-resolved-theme="light"] .folio-rootgarden-roots { stroke: #3f7449; filter: none; }
:root[data-resolved-theme="light"] .folio-rootgarden-foreground { fill: #3c5144; }
@media (max-width: 1000px) {
  .folio-pixel-surround { top: 23%; width: 112vw; }
  .folio-rootgarden-forest-back { opacity: .5; }
}
@media (max-width: 768px), (hover: none) {
  .folio-pixel-surround { top: 32%; bottom: -22px; width: 118vw; }
  .folio-rootgarden-motes { display: none; }
  .folio-rootgarden-stones { opacity: .72; }
  .folio-rootgarden-roots { opacity: .26; }
  .folio-rootgarden-foreground { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-rootgarden-motes rect,
  .folio-rootgarden-waterline,
  .folio-rootgarden-roots path,
  .folio-rootgarden-rune { animation: none !important; transition: none !important; }
}
html.garden-lite-motion .folio-rootgarden-motes rect,
html.garden-lite-motion .folio-rootgarden-waterline,
html.garden-lite-motion .folio-rootgarden-roots path,
html.garden-lite-motion .folio-rootgarden-rune { animation: none !important; transition: none !important; }

/* V160 — the root garden reacts across the full vista, not only inside the frame. */
.folio-pixel-surround {
  --rootgarden-pointer-x: 50%;
  --rootgarden-pointer-y: 58%;
  --rootgarden-ripple-x: 50%;
  --rootgarden-ripple-y: 68%;
  --rootgarden-energy: 0;
}
.folio-rootgarden-pointer-light,
.folio-rootgarden-ripple,
.folio-rootgarden-ripple > i,
.folio-rootgarden-ripple > b,
.folio-rootgarden-ripple > em {
  position: absolute;
  display: block;
  pointer-events: none;
}
.folio-rootgarden-pointer-light {
  left: var(--rootgarden-pointer-x);
  top: var(--rootgarden-pointer-y);
  z-index: 6;
  width: 270px;
  height: 170px;
  opacity: calc(.04 + var(--rootgarden-energy) * .44);
  background: radial-gradient(ellipse at center, rgba(132, 190, 143, .34) 0 16%, rgba(91, 145, 102, .18) 17% 34%, transparent 66%);
  clip-path: polygon(18% 0, 82% 0, 82% 7%, 93% 7%, 93% 18%, 100% 18%, 100% 82%, 93% 82%, 93% 93%, 82% 93%, 82% 100%, 18% 100%, 18% 93%, 7% 93%, 7% 82%, 0 82%, 0 18%, 7% 18%, 7% 7%, 18% 7%);
  transform: translate3d(-50%, -50%, 0) scale(calc(.78 + var(--rootgarden-energy) * .28));
  transform-origin: center;
  mix-blend-mode: screen;
  transition: opacity 90ms ease-out;
}
.folio-pixel-vista.is-rootgarden-pressed .folio-rootgarden-pointer-light {
  opacity: .72;
  transform: translate3d(-50%, -50%, 0) scale(.88);
  transition-duration: 70ms;
}
.folio-rootgarden-ripple {
  left: var(--rootgarden-ripple-x);
  top: var(--rootgarden-ripple-y);
  z-index: 7;
  width: 260px;
  height: 82px;
  transform: translate3d(-50%, -50%, 0);
}
.folio-rootgarden-ripple > i,
.folio-rootgarden-ripple > b,
.folio-rootgarden-ripple > em {
  left: 50%;
  top: 50%;
  height: 4px;
  opacity: 0;
  background: #8eb898;
  box-shadow: -8px 0 0 rgba(142, 184, 152, .44), 8px 0 0 rgba(142, 184, 152, .44);
  transform: translate3d(-50%, -50%, 0) scaleX(.18);
}
.folio-rootgarden-ripple > i { width: 54px; }
.folio-rootgarden-ripple > b { width: 112px; margin-top: 12px; }
.folio-rootgarden-ripple > em { width: 176px; margin-top: 24px; }
.folio-pixel-vista.is-rootgarden-ripple .folio-rootgarden-ripple > i {
  animation: garden-rootgarden-ripple 720ms steps(8, end) both;
}
.folio-pixel-vista.is-rootgarden-ripple .folio-rootgarden-ripple > b {
  animation: garden-rootgarden-ripple 820ms steps(9, end) 70ms both;
}
.folio-pixel-vista.is-rootgarden-ripple .folio-rootgarden-ripple > em {
  animation: garden-rootgarden-ripple 920ms steps(10, end) 130ms both;
}
.folio-rootgarden-stone {
  transition: fill 140ms ease-out, filter 140ms ease-out;
}
.folio-rootgarden-stone.is-pointer-lit {
  fill: #78917f;
  filter: drop-shadow(0 0 9px rgba(131, 190, 143, .76));
}
.folio-rootgarden-stone.is-pointer-lit .folio-rootgarden-rune {
  fill: #c1e4c8;
  opacity: 1;
  transform: scale(1.38);
  filter: drop-shadow(0 0 7px rgba(166, 225, 177, .92));
}
.folio-rootgarden-moss {
  animation: garden-rootgarden-moss-breathe 5.6s steps(5, end) infinite;
}
.folio-rootgarden-roots {
  animation: garden-rootgarden-root-breathe 4.8s steps(5, end) infinite;
}
.folio-pixel-vista.is-signal-active .folio-rootgarden-roots {
  opacity: 1;
  animation: none;
}
@keyframes garden-rootgarden-ripple {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(.18); }
  24% { opacity: .94; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(1.42); }
}
@keyframes garden-rootgarden-moss-breathe {
  0%, 100% { opacity: .54; }
  50% { opacity: .82; }
}
@keyframes garden-rootgarden-root-breathe {
  0%, 100% { opacity: .27; }
  52% { opacity: .48; }
}
:root[data-resolved-theme="light"] .folio-rootgarden-pointer-light {
  background: radial-gradient(ellipse at center, rgba(45, 105, 59, .22) 0 16%, rgba(68, 122, 79, .12) 17% 34%, transparent 66%);
  mix-blend-mode: multiply;
}
:root[data-resolved-theme="light"] .folio-rootgarden-ripple > i,
:root[data-resolved-theme="light"] .folio-rootgarden-ripple > b,
:root[data-resolved-theme="light"] .folio-rootgarden-ripple > em {
  background: #376f45;
  box-shadow: -8px 0 0 rgba(55, 111, 69, .34), 8px 0 0 rgba(55, 111, 69, .34);
}
:root[data-resolved-theme="light"] .folio-rootgarden-stone.is-pointer-lit {
  fill: #3f684a;
  filter: drop-shadow(0 0 7px rgba(53, 111, 66, .42));
}
:root[data-resolved-theme="light"] .folio-rootgarden-stone.is-pointer-lit .folio-rootgarden-rune {
  fill: #e6f1e8;
}
@media (max-width: 768px), (hover: none) {
  .folio-rootgarden-pointer-light { display: none; }
  .folio-rootgarden-ripple { width: 190px; }
  .folio-rootgarden-ripple > em { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-rootgarden-pointer-light,
  .folio-rootgarden-ripple { display: none !important; }
  .folio-rootgarden-moss,
  .folio-rootgarden-roots { animation: none !important; }
}
html.garden-lite-motion .folio-rootgarden-pointer-light,
html.garden-lite-motion .folio-rootgarden-ripple { display: none !important; }
html.garden-lite-motion .folio-rootgarden-moss,
html.garden-lite-motion .folio-rootgarden-roots { animation: none !important; }

@media (prefers-contrast: more) {
  .pixel-surface-light { display: none; }
  .pixel-surface-finish { opacity: .55; }
  .pixel-crown-aura { opacity: .2; }
}

@media (max-width: 768px), (hover: none) {
  .folio-pixel-stage { width: min(560px, 86vw); perspective: 820px; }
  .folio-pixel-diorama { transform: rotateX(0deg) rotateY(0deg); }
  .pixel-depth-sky { opacity: 1; transform: translateZ(0) scale(1); }
  .pixel-depth-ridge-back { opacity: 1; filter: none; transform: translateZ(45px) scale(.95); }
  .pixel-depth-ridge-front { filter: none; transform: translateZ(90px) scale(.9); }
  .pixel-depth-water { filter: none; transform: translateZ(135px) scale(.85); }
  .pixel-depth-foreground { filter: none; transform: translateZ(180px) scale(.8); }
  .pixel-frame { transform: translateZ(200px) scale(.76); }
  .pixel-scan { transform: translateZ(202px) scale(.76); }
  .folio-pixel-interaction { width: 76px; height: 76px; }
  .folio-pixel-weather-toggle { width: 58px; }
  .folio-pixel-glass-glint { display: none; }
  .pixel-surface-light { display: none; }
  .folio-pixel-brief { grid-template-columns: 1fr; gap: 10px; width: min(560px, 86vw); margin-bottom: 18px; }
  .folio-pixel-brief p { font-size: 10px; line-height: 1.65; }
  .folio-pixel-shell-right { right: -24px; width: 25px; }
  .folio-pixel-shell-bottom { bottom: -24px; height: 25px; }
  .folio-pixel-zone-copy { display: none; }
  .folio-pixel-vista { padding-bottom: 68px; }
  .pixel-beacon-target { right: 12%; top: 31%; width: 52px; height: 52px; }
  .pixel-tree-target { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .pixel-tree-target::before { inset: 7px; }
  .pixel-tree-target i { display: none; }
  .pixel-heart-burst { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .pixel-beacon-target::before { inset: 7px; }
  .pixel-beacon-target > i { left: -20px; width: 20px; }
  .folio-pixel-actionbar { bottom: -51px; width: 94%; padding: 8px 10px; }
  .folio-pixel-actionbar strong { font-size: 9px; }
  .folio-pixel-actionbar span { font-size: 8px; }
  .folio-pixel-actionbar > b { min-width: 35px; padding-left: 7px; font-size: 7px; }
  .folio-pixel-beacon-callout { right: 12%; top: 31%; width: 52px; height: 52px; }
  .folio-pixel-beacon-callout::before { inset: 7px; }
  .folio-pixel-beacon-callout > i { left: -24px; width: 24px; }
  .folio-pixel-beacon-callout strong,
  .folio-pixel-beacon-callout span { right: calc(100% + 23px); width: 126px; padding: 5px 6px; }
  .folio-pixel-beacon-callout strong { top: 4px; font-size: 7px; }
  .folio-pixel-beacon-callout span { top: 27px; font-size: 6px; }
  .folio-pixel-depth-meter { display: none; }
  .folio-pixel-touch-hint { display: none; }
  .folio-pixel-reticle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .folio-pixel-stage,
  .folio-pixel-diorama,
  .folio-pixel-weather-toggle,
  .folio-pixel-weather-toggle::before,
  .folio-pixel-glass-glint,
  .pixel-signal-bloom,
  .pixel-surface-light,
  .pixel-surface-light i,
  .pixel-crown-aura,
  .pixel-rune-spokes,
  .pixel-root-network i > em,
  .pixel-rune-constellation svg path,
  .pixel-rune-orbit,
  .pixel-rune-realms circle,
  .pixel-rune-reflection,
  .pixel-tree-sap i,
  .pixel-tree-sap b,
  .pixel-lake-signal i,
  .pixel-lake-signal b,
  .pixel-lake-signal em,
  .pixel-tree-target,
  .pixel-heart-burst i,
  .pixel-canopy-echo i,
  .folio-pixel-vista.is-linked .pixel-tree-target::after,
  .folio-pixel-stage .folio-pixel-screen,
  .folio-pixel-beacon-callout::before,
  .pixel-beacon-target::before,
  .folio-pixel-screen.is-lamp-off .pixel-lighthouse i,
  .pixel-depth-layer { animation: none !important; transition-duration: .01ms !important; }
  .folio-pixel-diorama { transform: rotateX(0deg) rotateY(0deg) !important; }
  .folio-pixel-stage .folio-pixel-screen { transform: none !important; }
}

html.garden-lite-motion .folio-pixel-stage,
html.garden-lite-motion .folio-pixel-diorama,
html.garden-lite-motion .folio-pixel-weather-toggle,
html.garden-lite-motion .folio-pixel-weather-toggle::before,
html.garden-lite-motion .folio-pixel-glass-glint,
html.garden-lite-motion .pixel-signal-bloom,
html.garden-lite-motion .pixel-surface-light,
html.garden-lite-motion .pixel-surface-light i,
html.garden-lite-motion .pixel-crown-aura,
html.garden-lite-motion .pixel-rune-spokes,
html.garden-lite-motion .pixel-root-network i > em,
html.garden-lite-motion .pixel-rune-constellation svg path,
html.garden-lite-motion .pixel-rune-orbit,
html.garden-lite-motion .pixel-rune-realms circle,
html.garden-lite-motion .pixel-rune-reflection,
html.garden-lite-motion .pixel-tree-sap i,
html.garden-lite-motion .pixel-tree-sap b,
html.garden-lite-motion .pixel-lake-signal i,
html.garden-lite-motion .pixel-lake-signal b,
html.garden-lite-motion .pixel-lake-signal em,
html.garden-lite-motion .pixel-tree-target,
html.garden-lite-motion .pixel-heart-burst i,
html.garden-lite-motion .pixel-canopy-echo i,
html.garden-lite-motion .folio-pixel-vista.is-linked .pixel-tree-target::after,
html.garden-lite-motion .folio-pixel-stage .folio-pixel-screen,
html.garden-lite-motion .folio-pixel-beacon-callout::before,
html.garden-lite-motion .pixel-beacon-target::before,
html.garden-lite-motion .folio-pixel-screen.is-lamp-off .pixel-lighthouse i,
html.garden-lite-motion .pixel-depth-layer { animation: none !important; transition: none !important; }
html.garden-lite-motion .folio-pixel-diorama { transform: rotateX(0deg) rotateY(0deg) !important; }
html.garden-lite-motion .folio-pixel-stage .folio-pixel-screen { transform: none !important; }

/* Power-aware rendering: keep the scene and deliberate interactions, reduce the
   large composited surfaces and secondary ambient loops on battery power. */
html[data-render-quality="economy"] .garden-particles,
html[data-render-quality="economy"] .garden-noise,
html[data-render-quality="economy"] .garden-scanlines,
html[data-render-quality="economy"] .folio-cover-lens,
html[data-render-quality="economy"] .folio-field-sweep,
html[data-render-quality="economy"] .folio-pixel-glass-glint,
html[data-render-quality="economy"] .pixel-surface-light { display: none !important; }
html[data-render-quality="economy"] .folio-world::before,
html[data-render-quality="economy"] .folio-world-etchings,
html[data-render-quality="economy"] .folio-cover-photo > img,
html[data-render-quality="economy"] .folio-cover::before,
html[data-render-quality="economy"] .folio-rainfield::before,
html[data-render-quality="economy"] .folio-pixel-ambient > *,
html[data-render-quality="economy"] .folio-rootgarden-motes rect,
html[data-render-quality="economy"] .folio-rootgarden-moss,
html[data-render-quality="economy"] .folio-rootgarden-roots { animation: none !important; will-change: auto; }
html[data-render-quality="economy"] .folio-rainfield i:nth-child(even) { display: none; }
html[data-render-quality="economy"] .folio-rainfield { filter: none; will-change: auto; }
html[data-render-quality="economy"] .pixel-depth-layer,
html[data-render-quality="economy"] .folio-pixel-vista { filter: none !important; }
html[data-render-quality="economy"] .is-home .g-nav,
html[data-render-quality="economy"] .is-home .garden-settings,
html[data-render-quality="economy"] .folio-pixel-hud {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-render-quality="economy"] .is-home .g-nav { background: var(--g-bg); }
html[data-render-quality="economy"].garden-is-scrolling .folio-world::before,
html[data-render-quality="economy"].garden-is-scrolling .folio-world *,
html[data-render-quality="economy"].garden-is-scrolling .folio-world *::before,
html[data-render-quality="economy"].garden-is-scrolling .folio-world *::after { animation-play-state: paused !important; }
html.garden-overrun [data-motion-section],
html.garden-overrun [data-motion-section] *,
html.garden-overrun [data-motion-section] *::before,
html.garden-overrun [data-motion-section] *::after { animation-play-state: paused !important; }