/* One world, six ways of looking. No external fonts or dependencies. */
:root {
  color-scheme:dark;
  --cream:#f4f1df;
  --muted:#c2c9b8;
  --gold:#e0dba1;
  --green:#b9cf99;
  --line:rgba(232,238,211,.22);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  font-size:15px;
  color:var(--cream);
  background:#172d24
}
* {
  box-sizing:border-box
}
body {
  margin:0;
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer;
  color:inherit
}
button {
  border:0
}
a {
  color:inherit
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px
}
#chapter-title:focus-visible,#ending-title:focus-visible {
  outline:1px solid #e0dba188;
  outline-offset:8px;
  border-radius:2px
}
button:focus:not(:focus-visible) {
  outline:0
}
[hidden] {
  display:none!important
}
svg {
  display:block
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.world {
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1;
  background:#17352b
}
.forest {
  position:absolute;
  inset:-2.3%;
  background:url("assets/forest.jpg") center center/cover no-repeat;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.015);
  transition:filter 3s,opacity 3s,background-position 3s;
  will-change:transform
}
.scene-tint {
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(10,35,25,.18),transparent 62%);
  transition:background 3s,opacity 3s;
  mix-blend-mode:multiply
}
.world-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,27,20,.58),rgba(8,27,20,.25) 33%,transparent 65%),linear-gradient(0deg,rgba(8,25,19,.92),transparent 25%,transparent 83%,rgba(8,23,18,.2));
  pointer-events:none
}
.sunbeam {
  position:absolute;
  top:-35%;
  height:145%;
  width:14%;
  background:linear-gradient(180deg,rgba(255,239,169,.11),transparent);
  filter:blur(14px);
  transform:rotate(28deg);
  transform-origin:top;
  mix-blend-mode:screen;
  animation:light-breathe 12s ease-in-out infinite alternate;
  pointer-events:none
}
.sunbeam-one {
  right:1%
}
.sunbeam-two {
  right:8%;
  width:5%;
  animation-delay:-5s;
  opacity:.7
}
#atmosphere {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}
.cosmic-sky {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 68% 26%,rgba(115,165,185,.64),transparent 44%),radial-gradient(ellipse at 95% 65%,rgba(233,174,140,.26),transparent 55%),linear-gradient(#1e2947,#40526b 65%,#8d9b98);
  opacity:0;
  transition:opacity 3s
}
.foreground-branch {
  position:absolute;
  right:-90px;
  bottom:12%;
  width:330px;
  opacity:.75;
  filter:drop-shadow(0 4px 14px #12362780);
  transform-origin:right bottom;
  animation:branch-sway 11s ease-in-out infinite alternate;
  pointer-events:none;
  transition:opacity 2s
}
.experience-shell {
  width:100%;
  min-height:100svh;
  padding:30px 4.2vw 0;
  display:flex;
  flex-direction:column;
  transition:opacity .7s
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:52px;
  position:relative;
  z-index:3
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:.23em;
  white-space:nowrap
}
.brand-mark {
  width:39px;
  height:42px
}
.brand-mark svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--cream);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.brand-caption {
  display:block;
  font-size:8px;
  font-weight:400;
  letter-spacing:.21em;
  margin-top:7px;
  color:#d8deca
}
.header-controls {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:12px
}
.text-button {
  padding:9px 0;
  background:transparent;
  color:var(--cream);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:1.4;
  text-decoration:none;
  transition:color .2s,opacity .2s
}
.text-button:hover {
  color:var(--gold)
}
.header-divider {
  width:1px;
  height:18px;
  background:var(--line)
}
.sound-button {
  display:flex;
  align-items:center;
  gap:9px;
  background:transparent;
  font-size:11px;
  padding:10px 0
}
.sound-button .icon {
  width:18px;
  height:18px
}
.sound-controls {
  position:relative
}
.volume-control {
  position:absolute;
  top:100%;
  right:-12px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#19372fef;
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px 16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s,visibility .2s;
  font-size:10px
}
.sound-controls:hover .volume-control,.sound-controls:focus-within .volume-control {
  opacity:1;
  visibility:visible
}
.volume-control input {
  width:85px;
  accent-color:var(--gold);
  height:20px;
  cursor:pointer
}
.icon-button {
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  padding:10px;
  border-radius:50%
}
.icon-button:hover {
  background:#edf0d91a
}
.restart-button .icon {
  width:18px;
  height:18px
}
main {
  flex:1;
  display:flex;
  align-items:center;
  position:relative
}
.landing {
  position:relative;
  width:100%;
  padding:60px 0 56px;
  min-height:580px;
  display:flex;
  align-items:center
}
.landing-copy {
  position:relative;
  z-index:1
}
.eyebrow {
  font-size:10px;
  line-height:1.7;
  font-weight:500;
  letter-spacing:.23em;
  display:flex;
  align-items:center;
  gap:12px;
  color:#dce3ca;
  margin:0 0 22px
}
.little-line {
  width:28px;
  height:1px;
  background:var(--gold);
  display:inline-block
}
h1,h2,p {
  margin-top:0
}
h1,h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.055em
}
h1 em,h2 em {
  font-weight:400;
  color:var(--gold)
}
.landing h1 {
  font-size:clamp(95px,9.15vw,150px);
  line-height:.88;
  margin:0 0 27px;
  letter-spacing:-.067em;
  text-shadow:0 5px 40px #0b251d33
}
.landing h1 em {
  padding-right:.12em
}
.landing-subtitle {
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  letter-spacing:-.025em;
  margin-bottom:18px
}
.landing-description {
  font-size:12px;
  line-height:1.95;
  color:#d4ddcd;
  max-width:390px;
  margin-bottom:31px
}
.primary-button {
  min-height:52px;
  background:var(--gold);
  border:1px solid var(--gold);
  color:#243b2e;
  border-radius:3px;
  padding:8px 9px 8px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  font-size:12px;
  font-weight:600;
  transition:background .25s,transform .25s,box-shadow .25s
}
.primary-button:hover {
  background:#eeebbc;
  transform:translateY(-2px);
  box-shadow:0 6px 26px #071d1b3b
}
.primary-button:active {
  transform:translateY(0)
}
.primary-button:disabled {
  background:#a5b29222;
  border-color:#c7d4b233;
  color:#c9d2bd;
  box-shadow:none;
  transform:none
}
.button-arrow {
  border-left:1px solid #25412e30;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  width:40px
}
.button-arrow .icon {
  width:20px;
  height:20px
}
.sound-invitation {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  letter-spacing:.015em;
  color:#c4d1be;
  margin:17px 0 0
}
.sound-invitation .icon {
  width:14px;
  height:14px
}
.landing-discovery {
  position:absolute;
  left:72%;
  top:42%;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:17px;
  text-align:center;
  font-size:8px;
  letter-spacing:.16em;
  line-height:1.9;
  background:transparent;
  color:#fffef0;
  text-shadow:0 2px 8px #062a20
}
.discovery-ring {
  width:62px;
  height:62px;
  border:1px solid #f5f4dca3;
  outline:1px solid #f5f4dc26;
  outline-offset:9px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#284c3e2e;
  backdrop-filter:blur(3px);
  position:relative;
  transition:transform .5s,background .5s;
  animation:ring-breathe 4s ease-in-out infinite
}
.discovery-ring::after {
  content:"";
  position:absolute;
  inset:-18px;
  border:1px solid #f5f4dc24;
  border-radius:50%
}
.discovery-ring .icon {
  width:25px;
  height:25px
}
.landing-discovery:hover .discovery-ring {
  transform:scale(1.13);
  background:#c8d5ad3b
}
.landing-discovery em {
  font-family:Georgia,serif;
  font-size:15px;
  letter-spacing:0;
  font-weight:400
}
.landing-aside {
  position:absolute;
  right:0;
  bottom:35px;
  display:grid;
  grid-template-columns:1px auto;
  gap:0 16px
}
.vertical-line {
  width:1px;
  background:#e1e7cb77;
  grid-row:span 2
}
.landing-aside p {
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.6;
  margin:0 0 13px
}
.landing-aside p em {
  color:#e2e5c8
}
.aside-number {
  font-size:7px;
  letter-spacing:.12em;
  color:#d5dcc8
}
.bottom-area {
  position:relative;
  z-index:2
}
.path-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#d1d8c5;
  font-size:8px;
  letter-spacing:.18em;
  margin-bottom:16px
}
.duration {
  white-space:nowrap
}
.duration span {
  margin:0 10px
}
.chapter-navigation {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.chapter-button {
  display:flex;
  align-items:center;
  gap:13px;
  background:transparent;
  text-align:left;
  padding:21px 9px 20px;
  color:#e0e6ce;
  position:relative;
  min-height:75px;
  transition:background .25s
}
.chapter-button:first-child {
  padding-left:0
}
.chapter-button:not(:disabled):hover {
  background:#edf0d90b
}
.chapter-button:disabled {
  color:#d3dfc6b0
}
.chapter-button::before {
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease);
  content:""
}
.chapter-button[aria-current="step"] {
  color:var(--gold)
}
.chapter-button[aria-current="step"]::before {
  transform:scaleX(1)
}
.chapter-node {
  width:33px;
  height:33px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border:1px solid #d7dfc438;
  border-radius:50%
}
.chapter-node .icon {
  width:17px;
  height:17px;
  stroke-width:1.2
}
.chapter-button[aria-current="step"] .chapter-node {
  border-color:var(--gold);
  background:#dfe4c212
}
.chapter-number {
  font-size:7px;
  letter-spacing:.14em;
  display:block;
  margin-bottom:5px;
  opacity:.8
}
.chapter-name {
  font-size:9px;
  letter-spacing:.07em;
  white-space:nowrap
}
.footer-line {
  display:flex;
  align-items:center;
  min-height:57px;
  gap:26px;
  font-size:9px;
  color:#c5d1bd
}
.footer-note {
  margin-right:auto;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:12px
}
.science-button {
  font-size:10px;
  gap:8px;
  color:#dbe3cf
}
.science-button .icon {
  width:14px;
  height:14px
}
.small-arrow {
  margin-left:9px
}
.look-button {
  font-size:10px;
  color:#dbe3cf
}
.look-button .icon {
  width:14px;
  height:14px
}
.journey {
  width:100%;
  padding:42px 0 35px
}
.journey-layout {
  display:grid;
  grid-template-columns:minmax(330px,43%) minmax(0,1fr);
  gap:3%;
  align-items:center;
  min-height:510px
}
.story-content {
  position:relative;
  z-index:2;
  max-width:490px
}
.story-content>.eyebrow {
  margin-bottom:18px;
  font-size:9px
}
.story-content h1 {
  font-size:clamp(42px,4.8vw,76px);
  line-height:1.03;
  margin-bottom:22px;
  max-width:510px
}
.narration-rule {
  display:flex;
  align-items:center;
  gap:12px;
  width:80px;
  color:var(--gold);
  margin-bottom:24px
}
.narration-rule span {
  height:1px;
  background:#e0dba14d;
  flex:1
}
.narration-rule .icon {
  width:15px;
  height:15px
}
.narrative {
  font-family:Georgia,serif;
  font-size:22px;
  line-height:1.55;
  letter-spacing:-.012em;
  min-height:155px;
  max-width:425px;
  outline:0
}
.narrative p {
  margin-bottom:14px
}
.narrative .narrative-detail {
  display:block;
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  font-size:12px;
  line-height:1.9;
  color:#d4ddcd;
  letter-spacing:0;
  margin-top:15px
}
.narrative-actions {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:23px;
  min-height:52px
}
.skip-button {
  font-size:10px;
  color:#c4d0bd
}
.story-meta {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:21px;
  color:#c0cfb7;
  font-size:9px
}
.step-progress {
  display:flex;
  gap:5px
}
.step-progress i {
  display:block;
  width:13px;
  height:2px;
  background:#cfdbbf40
}
.step-progress i.current {
  background:var(--gold)
}
.step-progress i.past {
  background:#cfdbbf99
}
.choices {
  display:grid;
  gap:9px;
  margin:20px 0 5px;
  max-width:430px
}
.choice-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  text-align:left;
  background:#1b372d8c;
  border:1px solid #cad6b34d;
  border-radius:3px;
  color:#edf0df;
  padding:15px 17px;
  font-size:12px;
  line-height:1.5;
  backdrop-filter:blur(14px);
  transition:border .3s,background .3s,transform .3s
}
.choice-button .icon {
  width:16px;
  height:16px;
  color:var(--gold)
}
.choice-button:hover {
  border-color:var(--gold);
  background:#476047a8;
  transform:translateX(4px)
}
.choice-button[aria-pressed="true"] {
  border-color:var(--gold);
  background:#61714766
}
.choice-button:disabled:not([aria-pressed="true"]) {
  opacity:.48
}
.exploration-area {
  position:relative;
  align-self:stretch;
  min-height:475px;
  isolation:isolate
}
.environment-caption {
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:8px;
  letter-spacing:.17em;
  color:#f0f0db;
  text-shadow:0 2px 6px #112e22
}
.caption-dot {
  width:4px;
  height:4px;
  background:#e9eac5;
  border-radius:50%;
  box-shadow:0 0 10px #e9eac5
}
.hotspots {
  position:absolute;
  inset:0
}
.hotspot {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#fffde7;
  min-width:90px;
  max-width:170px;
  padding:8px;
  text-align:center;
  opacity:1;
  transition:opacity .6s;
  z-index:2
}
.hotspot-orb {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  background:#1a423566;
  border:1px solid #f6efd3b3;
  border-radius:50%;
  box-shadow:0 0 0 7px #dce3bc13,0 0 25px #d5f8ac18;
  backdrop-filter:blur(5px);
  position:relative;
  transition:background .4s,transform .4s;
  animation:ring-breathe 4s ease-in-out infinite
}
.hotspot-orb::after {
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid #e5e8be33;
  border-radius:50%;
  transition:inset .4s
}
.hotspot:hover .hotspot-orb,.hotspot:focus-visible .hotspot-orb {
  background:#c7d99c55;
  transform:scale(1.1)
}
.hotspot:hover .hotspot-orb::after {
  inset:-19px
}
.hotspot-orb .icon {
  width:24px;
  height:24px;
  stroke-width:1.2
}
.hotspot-label {
  font-size:10px;
  font-weight:500;
  background:#12352ce0;
  border:1px solid #d4ddba33;
  border-radius:3px;
  padding:6px 9px;
  line-height:1.4;
  box-shadow:0 3px 15px #153c282b
}
.hotspot.visited .hotspot-orb {
  border-color:#d9eaa7;
  background:#8fba6255;
  animation:none
}
.hotspot.visited .hotspot-orb::after {
  border-color:#e5e8be66
}
.hotspot.element .hotspot-orb {
  font-family:Georgia,serif;
  font-size:29px;
  width:67px;
  height:67px;
  color:#fff3c7;
  background:#8cabc21c;
  box-shadow:0 0 40px #c8e6ff33
}
.hotspot.breath .hotspot-orb {
  width:90px;
  height:90px;
  border-color:#e6e5ab;
  background:#c0d09122;
  animation:breathing 9s ease-in-out infinite
}
.hotspot.breath .icon {
  width:35px;
  height:35px
}
.scene-illustration {
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:opacity 1s
}
.scene-illustration>svg {
  overflow:visible
}
.scene-illustration>svg:not(.botanical-sprig):not(.flying-butterfly):not(.refuge-grass) {
  width:100%;
  height:100%
}
.botanical-sprig {
  position:absolute;
  width:260px;
  right:3%;
  top:20%;
  filter:drop-shadow(0 10px 20px #14362399);
  transform-origin:bottom right;
  animation:branch-sway 8s ease-in-out infinite alternate
}
.flying-butterfly {
  position:absolute;
  left:54%;
  top:27%;
  width:55px;
  filter:drop-shadow(0 4px 4px #142e1e55);
  animation:butterfly-drift 14s ease-in-out infinite
}
.flying-butterfly .wing-left {
  transform-origin:30px 27px;
  animation:wing 1s ease-in-out infinite alternate
}
.flying-butterfly .wing-right {
  transform-origin:30px 27px;
  animation:wing 1s ease-in-out -.6s infinite alternate
}
.signal-ring {
  position:absolute;
  width:190px;
  height:190px;
  left:55%;
  top:30%;
  border:1px solid #d9f79b;
  border-radius:50%;
  opacity:0
}
.signals-active .signal-ring {
  animation:signal-wave 4s ease-out infinite
}
.signals-active .signal-ring:nth-child(2) {
  animation-delay:1.3s
}
.signals-active .signal-ring:nth-child(3) {
  animation-delay:2.6s
}
.root-diagram {
  filter:drop-shadow(0 0 10px #bbdc9b33)
}
.root-line {
  fill:none;
  stroke:#bfb882;
  stroke-width:2;
  opacity:.6
}
.fungal-line {
  fill:none;
  stroke:#9edcca;
  stroke-width:1.3;
  opacity:.52
}
.flow-line {
  fill:none;
  stroke:#f0d68d;
  stroke-width:2.5;
  stroke-dasharray:3 24;
  stroke-linecap:round;
  opacity:0;
  animation:nutrient-flow 7s linear infinite
}
.network-active .flow-line {
  opacity:1
}
.mineral-flow .flow-line {
  stroke:#b4f2e5;
  animation-direction:reverse
}
.root-label {
  font-family:"Avenir Next",sans-serif;
  font-size:10px;
  fill:#d5e5c5;
  letter-spacing:3px
}
.root-caption {
  font-family:Georgia,serif;
  font-size:15px;
  fill:#ecebd6;
  font-style:italic
}
.garden-flower {
  position:absolute;
  bottom:8%;
  width:70px;
  transform-origin:bottom;
  animation:branch-sway 5s ease-in-out infinite alternate;
  transition:opacity 2s,transform 2s
}
.garden-flower svg {
  width:100%;
  height:100%
}
.garden-flower:nth-child(2n) {
  animation-delay:-3s
}
.garden-flower.unbloomed {
  transform:scale(.3);
  opacity:.15
}
.garden-flower.bloomed {
  opacity:1
}
.refuge-grass {
  position:absolute;
  inset:15% 0 0;
  opacity:0;
  transition:opacity 2s
}
.refuge-active .refuge-grass {
  opacity:1
}
.constellation-diagram {
  fill:none;
  stroke:#e4ecc7;
  stroke-width:1;
  opacity:.55
}
.star-point {
  fill:#fff4cb;
  stroke:none
}
.constellation-label {
  font-family:Georgia,serif;
  fill:#f4ecd0;
  stroke:none;
  font-size:14px;
  font-style:italic
}
.return-lines {
  fill:none;
  stroke:#e4dba3;
  stroke-width:1;
  stroke-dasharray:3 9;
  opacity:0;
  transition:opacity 2s
}
.return-active .return-lines {
  opacity:.65;
  animation:nutrient-flow 18s linear infinite
}
.breath-aura {
  position:absolute;
  inset:3% 8% 7%;
  border:1px solid #e3e7b323;
  border-radius:50%;
  opacity:0;
  transition:opacity 2s
}
.return-active .breath-aura {
  opacity:1;
  animation:breathing 9s ease-in-out infinite
}
.ripple {
  position:fixed;
  width:16px;
  height:16px;
  border:1px solid #f5edb2;
  border-radius:50%;
  pointer-events:none;
  z-index:5
}
body[data-theme="signals"] .scene-tint {
  background:linear-gradient(110deg,#12443255,#9dad5822);
  mix-blend-mode:soft-light
}
body[data-theme="underground"] .forest {
  filter:saturate(.65) brightness(.55);
  background-position:center 25%
}
body[data-theme="underground"] .scene-tint {
  background:linear-gradient(110deg,#1e473a,transparent);
  mix-blend-mode:normal;
  opacity:.35
}
body[data-theme="underground"] .foreground-branch {
  opacity:0
}
body[data-theme="dusk"] .forest {
  filter:sepia(.26) saturate(.85)
}
body[data-theme="dusk"] .scene-tint {
  background:linear-gradient(60deg,#2d443a44,#efb76d55);
  mix-blend-mode:soft-light
}
body[data-theme="cosmos"] .cosmic-sky {
  opacity:.9
}
body[data-theme="cosmos"] .forest {
  filter:saturate(.5) brightness(.65)
}
body[data-theme="cosmos"] .foreground-branch {
  opacity:.13
}
body[data-theme="cosmos"] .sunbeam {
  opacity:0
}
body[data-theme="return"] .cosmic-sky {
  opacity:.28
}
body[data-theme="return"] .scene-tint {
  background:linear-gradient(110deg,#203b2b55,#e5c98e33);
  mix-blend-mode:soft-light
}
body[data-theme="return"] .forest {
  filter:sepia(.1) saturate(.85)
}
.ending {
  padding:66px 0 45px;
  max-width:720px;
  min-height:570px
}
body[data-screen="ending"] .path-heading { display:none; }
body[data-screen="ending"] .chapter-navigation { display:none; }
.ending h1 {
  font-size:clamp(60px,6.7vw,106px);
  line-height:1.03;
  margin:20px 0 26px
}
.ending-reflection {
  font-family:Georgia,serif;
  font-size:19px;
  line-height:1.7;
  max-width:460px;
  color:#e4e8d4
}
.ending-thanks {
  font-size:12px;
  color:#cddac1;
  margin:20px 0 26px
}
.ending-actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}
.ending-actions>.text-button {
  font-size:11px
}
.ending-actions .icon {
  width:17px;
  height:17px
}
.ending-credit {
  font-size:7px;
  letter-spacing:.14em;
  line-height:2.2;
  color:#c5d1b8;
  margin:32px 0 0
}
.info-dialog {
  border:1px solid #d4ddbb40;
  background:#19382ef5;
  color:var(--cream);
  width:min(700px,calc(100% - 32px));
  max-height:85svh;
  padding:0;
  border-radius:8px;
  box-shadow:0 30px 100px #031c1ac9;
  backdrop-filter:blur(25px)
}
.info-dialog::backdrop {
  background:#081f1bd1;
  backdrop-filter:blur(9px)
}
.dialog-inner {
  padding:44px 46px 35px;
  position:relative
}
.dialog-close {
  position:absolute;
  top:16px;
  right:16px
}
.info-dialog h2 {
  font-size:46px;
  line-height:1.1;
  margin:0 0 23px
}
.info-dialog p {
  font-size:12px;
  line-height:1.9;
  color:#d4dfcd
}
.info-dialog .eyebrow {
  font-size:8px;
  letter-spacing:.19em;
  color:var(--gold);
  margin-bottom:17px
}
.reference {
  padding:22px 0;
  border-top:1px solid var(--line)
}
.reference-tag {
  font-size:7px;
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:10px;
  display:block
}
.reference h3 {
  font-family:Georgia,serif;
  font-size:21px;
  font-weight:400;
  margin:0 0 10px
}
.reference p {
  margin-bottom:11px
}
.reference a {
  font-size:11px;
  line-height:1.6;
  display:block;
  margin:6px 0;
  color:#e1e3b5;
  text-underline-offset:4px
}
.reference-current {
  border-left:2px solid var(--gold);
  padding-left:17px
}
.about-quote {
  font-family:Georgia,serif!important;
  font-size:25px!important;
  line-height:1.6!important;
  letter-spacing:-.02em;
  color:#e5e4c8!important
}
.credit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:24px
}
.credit-grid span {
  display:block;
  font-size:8px;
  letter-spacing:.1em;
  color:#b9cdb4;
  margin-bottom:9px
}
.credit-grid strong {
  font-weight:400;
  font-family:Georgia,serif;
  font-size:19px
}
.about-note {
  margin-top:25px!important;
  font-size:10px!important
}
.toast {
  position:fixed;
  left:50%;
  bottom:35px;
  transform:translate(-50%,20px);
  background:#173a30ed;
  border:1px solid #cdddac55;
  border-radius:4px;
  padding:13px 20px;
  font-size:11px;
  color:#e9edcf;
  opacity:0;
  pointer-events:none;
  z-index:10;
  transition:opacity .4s,transform .4s;
  max-width:calc(100% - 32px);
  text-align:center;
  box-shadow:0 8px 30px #0a251944
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.return-button {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#183a2cd9;
  border:1px solid #dce2b755;
  border-radius:40px;
  padding:14px 21px;
  backdrop-filter:blur(12px);
  font-size:11px;
  z-index:10;
  white-space:nowrap
}
.return-button .icon {
  width:17px;
  height:17px
}
.return-button span {
  font-size:8px;
  color:#bdc9af;
  border:1px solid #d2dfb533;
  border-radius:3px;
  padding:3px 5px;
  margin-left:8px
}
body.contemplating .experience-shell {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
body.contemplating .world-shade {
  opacity:.4;
  transition:opacity 1s
}
.noscript-message {
  position:fixed;
  inset:30% 10% auto;
  background:#18372f;
  padding:40px;
  border:1px solid var(--gold);
  text-align:center;
  z-index:20
}
@keyframes ring-breathe {
  0%,100% {
    box-shadow:0 0 0 7px #dce3bc13,0 0 25px #d5f8ac18
  }
  50% {
    box-shadow:0 0 0 12px #dce3bc08,0 0 35px #d5f8ac33
  }
}
@keyframes branch-sway {
  from {
    transform:rotate(-2deg)
  }
  to {
    transform:rotate(3deg)
  }
}
@keyframes light-breathe {
  from {
    opacity:.35;
    transform:rotate(28deg)
  }
  to {
    opacity:.8;
    transform:rotate(32deg)
  }
}
@keyframes butterfly-drift {
  0%,100% {
    transform:translate(0,0) rotate(-8deg)
  }
  30% {
    transform:translate(45px,-30px) rotate(9deg)
  }
  65% {
    transform:translate(-35px,35px) rotate(-4deg)
  }
}
@keyframes wing {
  from {
    transform:scaleX(.35)
  }
  to {
    transform:scaleX(1)
  }
}
@keyframes signal-wave {
  0% {
    transform:translate(-50%,-50%) scale(.2);
    opacity:0
  }
  15% {
    opacity:.6
  }
  100% {
    transform:translate(-50%,-50%) scale(1.8);
    opacity:0
  }
}
@keyframes nutrient-flow {
  to {
    stroke-dashoffset:-270
  }
}
@keyframes breathing {
  0%,100% {
    transform:scale(.86);
    box-shadow:0 0 20px #d8e9b11a
  }
  45% {
    transform:scale(1.12);
    box-shadow:0 0 65px #d8e9b144
  }
}
@media(min-width:1600px) {
  .experience-shell {
    padding-left:6vw;
    padding-right:6vw
  }
  .landing {
    min-height:650px
  }
  .landing h1 {
    font-size:155px
  }
  .journey-layout {
    min-height:600px
  }
  .landing-description {
    font-size:14px
  }
  .landing-subtitle {
    font-size:27px
  }
  .chapter-name {
    font-size:10px
  }
  .chapter-number {
    font-size:8px
  }
  .chapter-button {
    padding-top:25px;
    padding-bottom:25px
  }
  .chapter-node {
    width:37px;
    height:37px
  }
  .eyebrow {
    font-size:11px
  }
  .environment-caption {
    bottom:30px
  }}
@media(max-width:1100px) {
  .experience-shell {
    padding:25px 4vw 0
  }
  .header-controls {
    gap:18px
  }
  .landing {
    min-height:530px;
    padding:60px 0 50px
  }
  .landing h1 {
    font-size:112px
  }
  .landing-description {
    max-width:335px
  }
  .landing-aside {
    right:0;
    bottom:40px
  }
  .chapter-button {
    gap:8px;
    padding:18px 5px
  }
  .chapter-node {
    width:28px;
    height:28px
  }
  .chapter-node .icon {
    width:15px;
    height:15px
  }
  .chapter-name {
    font-size:7.5px;
    letter-spacing:.02em
  }
  .journey-layout {
    gap:2%;
    grid-template-columns:45% 53%
  }
  .narrative {
    font-size:20px
  }
  .story-content h1 {
    font-size:52px
  }
  .foreground-branch {
    width:250px;
    right:-100px
  }
  .duration {
    font-size:7px
  }}
@media(max-width:760px) {
  .experience-shell {
    padding:20px 6vw 0
  }
  .topbar {
    gap:10px;
    align-items:flex-start;
    min-height:48px
  }
  .brand {
    font-size:10px;
    letter-spacing:.18em;
    gap:9px
  }
  .brand-mark {
    width:30px;
    height:35px
  }
  .brand-caption {
    font-size:6px;
    letter-spacing:.13em;
    margin-top:6px
  }
  .header-controls {
    gap:12px;
    align-items:center
  }
  .about-button,.header-divider {
    display:none
  }
  .sound-button {
    font-size:9px;
    gap:5px;
    padding:5px 0
  }
  .sound-button .icon {
    width:16px;
    height:16px
  }
  .restart-button {
    padding:4px
  }
  .restart-button .icon {
    width:16px;
    height:16px
  }
  .forest {
    background-position:60% center
  }
  .world-shade {
    background:linear-gradient(90deg,#08271c85,transparent),linear-gradient(0deg,#0d291fe8,transparent 35%,#0d291f30)
  }
  .foreground-branch {
    opacity:.4;
    width:200px;
    right:-120px;
    bottom:24%
  }
  .landing {
    padding:67px 0 70px;
    min-height:620px;
    align-items:center
  }
  .landing h1 {
    font-size:clamp(88px,18vw,128px);
    margin-bottom:24px
  }
  .landing .eyebrow {
    font-size:8px;
    letter-spacing:.17em;
    margin-bottom:22px
  }
  .landing-subtitle {
    font-size:22px
  }
  .landing-description {
    font-size:11px;
    max-width:310px;
    line-height:1.95
  }
  .desktop-break {
    display:none
  }
  .landing-discovery {
    left:auto;
    right:-7px;
    top:35%;
    gap:0;
    transform:scale(.8)
  }
  .landing-discovery>span:last-child {
    display:none
  }
  .landing-discovery .discovery-ring {
    width:50px;
    height:50px
  }
  .landing-aside {
    display:none
  }
  .primary-button {
    min-height:51px;
    padding-left:18px;
    font-size:11px;
    gap:23px
  }
  .sound-invitation {
    font-size:8px;
    gap:6px
  }
  .path-heading {
    font-size:7px;
    letter-spacing:.1em;
    gap:10px;
    line-height:1.7;
    margin-bottom:12px
  }
  .path-heading>span:first-child {
    max-width:190px
  }
  .duration {
    font-size:6px;
    text-align:right;
    max-width:100px;
    white-space:normal;
    line-height:1.7
  }
  .duration span {
    margin:0 2px
  }
  .chapter-navigation {
    grid-template-columns:repeat(6,1fr)
  }
  .chapter-button {
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:16px 0 14px!important;
    gap:9px;
    min-height:94px
  }
  .chapter-node {
    width:28px;
    height:28px
  }
  .chapter-number {
    font-size:6px;
    margin-bottom:4px;
    letter-spacing:.04em
  }
  .chapter-name {
    font-size:6px;
    letter-spacing:0;
    white-space:normal;
    display:block;
    line-height:1.4;
    max-width:58px
  }
  .footer-line {
    min-height:62px;
    gap:12px;
    flex-wrap:wrap;
    padding:11px 0
  }
  .footer-note {
    font-size:10px;
    line-height:1.5;
    max-width:150px
  }
  .science-button {
    font-size:9px;
    margin-left:auto
  }
  .science-button .icon {
    width:12px;
    height:12px
  }
  .small-arrow {
    margin-left:0
  }
  .look-button {
    font-size:9px
  }
  .journey {
    padding:10px 0 30px
  }
  .journey-layout {
    display:flex;
    flex-direction:column;
    gap:0;
    min-height:0
  }
  .story-content {
    width:100%;
    max-width:none;
    order:2
  }
  .story-content h1 {
    font-size:clamp(39px,9vw,62px);
    margin-bottom:18px;
    max-width:450px
  }
  .story-content>.eyebrow {
    font-size:8px;
    margin-bottom:12px
  }
  .narration-rule {
    margin-bottom:19px
  }
  .narrative {
    font-size:20px;
    min-height:130px;
    max-width:500px
  }
  .narrative .narrative-detail {
    font-size:11px;
    line-height:1.8
  }
  .exploration-area {
    min-height:245px;
    height:245px;
    flex:none;
    width:100%;
    order:1;
    margin:4px 0 22px
  }
  .environment-caption {
    bottom:0;
    font-size:6px;
    letter-spacing:.14em
  }
  .hotspot {
    gap:9px;
    padding:4px;
    min-width:70px;
    max-width:125px
  }
  .hotspot-orb {
    width:43px;
    height:43px
  }
  .hotspot-orb::after {
    inset:-9px
  }
  .hotspot-orb .icon {
    width:21px;
    height:21px
  }
  .hotspot-label {
    font-size:8px;
    padding:5px 7px
  }
  .hotspot.element .hotspot-orb {
    width:51px;
    height:51px;
    font-size:23px
  }
  .hotspot.breath .hotspot-orb {
    width:65px;
    height:65px
  }
  .botanical-sprig {
    width:170px;
    right:7%;
    top:-8%
  }
  .flying-butterfly {
    width:40px;
    top:25%
  }
  .narrative-actions {
    margin-top:20px;
    gap:15px
  }
  .choices {
    max-width:100%;
    margin-top:15px
  }
  .choice-button {
    font-size:11px;
    padding:13px 15px
  }
  .story-meta {
    margin-top:16px;
    font-size:8px
  }
  .root-diagram {
    overflow:visible
  }
  .scene-illustration .root-diagram {
    width:100%;
    height:100%
  }
  .ending {
    min-height:550px;
    padding:60px 0 42px
  }
  .ending h1 {
    font-size:clamp(49px,11vw,75px);
    line-height:1.07
  }
  .ending>.eyebrow {
    font-size:7px
  }
  .ending-reflection {
    font-size:18px;
    max-width:335px
  }
  .ending-actions {
    gap:17px
  }
  .ending-actions>.text-button {
    font-size:10px
  }
  .ending-credit {
    font-size:6px;
    margin-top:30px
  }
  .dialog-inner {
    padding:46px 25px 26px
  }
  .info-dialog h2 {
    font-size:37px
  }
  .info-dialog p {
    font-size:11px
  }
  .info-dialog .about-quote {
    font-size:22px!important
  }
  .credit-grid {
    gap:15px
  }
  .credit-grid strong {
    font-size:17px
  }
  .credit-grid span {
    font-size:7px
  }
  .return-button {
    font-size:10px;
    gap:8px
  }
  .return-button span {
    display:none
  }}
@media(max-width:380px) {
  .brand-caption {
    font-size:5px
  }
  .brand {
    font-size:9px
  }
  .landing {
    padding-top:50px;
    min-height:580px
  }
  .landing h1 {
    font-size:91px
  }
  .landing-discovery {
    right:-12px;
    top:34%;
    transform:scale(.66)
  }
  .footer-note {
    max-width:110px;
    font-size:9px
  }
  .chapter-name {
    font-size:5.5px
  }
  .chapter-node {
    width:25px;
    height:25px
  }
  .chapter-button {
    min-height:91px
  }
  .landing-description {
    max-width:245px
  }
  .sound-invitation {
    font-size:7px
  }}
@media(max-height:800px) and (min-width:761px) {
  .experience-shell {
    padding-top:22px
  }
  .landing {
    padding:35px 0 35px;
    min-height:480px
  }
  .landing h1 {
    font-size:108px;
    margin-bottom:22px
  }
  .landing .eyebrow {
    margin-bottom:18px
  }
  .landing-subtitle {
    font-size:22px;
    margin-bottom:14px
  }
  .landing-description {
    margin-bottom:24px
  }
  .landing-aside {
    bottom:28px
  }
  .journey {
    padding:28px 0 24px
  }
  .journey-layout {
    min-height:450px
  }
  .story-content h1 {
    font-size:54px
  }
  .narrative {
    font-size:20px;
    min-height:130px
  }
  .exploration-area {
    min-height:430px
  }
  .ending {
    min-height:490px;
    padding:35px 0
  }
  .ending h1 {
    font-size:76px
  }
  .ending-credit {
    margin-top:22px
  }
  .chapter-button {
    padding-top:17px;
    padding-bottom:17px
  }
  .footer-line {
    min-height:48px
  }
  .path-heading {
    margin-bottom:13px
  }}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
  .forest {
    transform:none!important;
    will-change:auto
  }
  .sunbeam {
    display:none
  }}
/* Keep help reachable on narrow screens; pause living details offscreen. */
.about-label-mobile {
  display:none
}
body.paused *,body.paused *::before,body.paused *::after {
  animation-play-state:paused!important
}
@media(max-width:760px) {
  .about-button {
    display:inline-flex;
    font-size:9px;
    padding:5px 0
  }
  .about-label {
    display:none
  }
  .about-label-mobile {
    display:inline
  }
  .header-controls {
    gap:10px
  }}
.header-controls {
  background:#18372e78;
  backdrop-filter:blur(12px);
  border:1px solid #e7eccb25;
  border-radius:40px;
  padding:0 16px;
  min-height:42px;
  text-shadow:0 1px 5px #17362955
}
.landing-aside {
  padding:13px 16px;
  background:#15392e57;
  backdrop-filter:blur(8px);
  border-radius:3px
}
.botanical-sprig {
  opacity:.85
}
@media(max-width:760px) {
  .header-controls {
    padding:0 9px;
    gap:8px;
    min-height:30px;
    border-radius:20px
  }
  .topbar {
    gap:5px
  }
  .botanical-sprig {
    opacity:.7
  }}
/* The same landscape, carried through a single day. */
:root {
  --forest-brightness:1;
  --forest-saturation:1;
  --forest-sepia:0;
  --forest-opacity:1;
  --sky-opacity:0;
  --warmth:0;
  --meadow-opacity:0;
  --sun-opacity:1;
  --sun-top:8%
}
body[data-theme] .forest {
  filter:brightness(var(--forest-brightness)) saturate(var(--forest-saturation)) sepia(var(--forest-sepia));
  opacity:var(--forest-opacity);
  background-position:center;
  transition:filter 9s ease,opacity 9s ease,background-position 9s ease
}
body[data-theme] .scene-tint {
  background:linear-gradient(145deg,#efc587,#eab28c 58%,#d18d71);
  mix-blend-mode:soft-light;
  opacity:var(--warmth);
  transition:opacity 8s ease
}
body[data-theme] .cosmic-sky {
  background:radial-gradient(ellipse at 72% 33%,#49667855,transparent 57%),linear-gradient(#102331 0%,#233b4b 52%,#525367 78%,#b88b80 93%,#b5957b);
  opacity:var(--sky-opacity);
  transition:opacity 9s ease
}
body[data-theme] .sunbeam {
  opacity:var(--sun-opacity);
  transition:opacity 7s ease
}
body[data-theme="return"] .foreground-branch,body[data-theme="cosmos"] .foreground-branch {
  opacity:0
}
.cloud-veils {
  position:absolute;
  inset:-15% -10% 45%;
  background:radial-gradient(ellipse at 72% 20%,#eaf3f414,transparent 28%),radial-gradient(ellipse at 48% 42%,#f2e7d519,transparent 27%);
  filter:blur(25px);
  animation:cloud-drift 75s ease-in-out infinite alternate;
  pointer-events:none
}
.sun-orb {
  position:absolute;
  right:9%;
  top:var(--sun-top);
  width:100px;
  height:100px;
  transform:translate(50%,-50%);
  border-radius:50%;
  background:radial-gradient(#fff2c7aa,#ffe7a22b 25%,transparent 70%);
  box-shadow:0 0 140px #f4cf6622;
  opacity:var(--sun-opacity);
  mix-blend-mode:screen;
  transition:top 12s ease,opacity 7s ease;
  pointer-events:none
}
.time-of-day {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:7px;
  letter-spacing:.18em;
  color:#e4e8d0;
  text-shadow:0 2px 7px #183b2c88;
  margin:0 15px
}
.time-of-day>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e6dfa4;
  box-shadow:0 0 12px #f2dfa6
}
.reclining #atmosphere {
  animation:camera-recline-sky 13s cubic-bezier(.22,.65,.25,1) both
}
.root-caption,.constellation-label {
  display:none
}
body[data-theme="underground"] .scene-illustration {
  background:radial-gradient(ellipse at 50% 60%,#193d32cc,#193d3255 60%,transparent 75%);
  border-radius:45% 45% 30% 30%
}
body[data-theme="underground"] .root-line {
  stroke:#e5d49e;
  opacity:.78
}
body[data-theme="underground"] .fungal-line {
  stroke:#ace3d0;
  opacity:.75
}
body[data-theme="underground"] .flow-line {
  filter:drop-shadow(0 0 5px #d9ecb3)
}
body[data-theme="return"] .environment-caption {
  bottom:4px
}
body[data-theme="return"] .hotspot:not(.breath) .hotspot-orb,body[data-theme="cosmos"] .hotspot-orb {
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
  outline:0;
  border-color:#f4f0cb70
}
body[data-theme="cosmos"] .hotspot-orb::after,body[data-theme="return"] .hotspot:not(.breath) .hotspot-orb::after {
  display:none
}
body[data-theme="cosmos"] .hotspot-label,body[data-theme="return"] .hotspot-label {
  background:#142b36a3;
  border-color:#d8e2c923
}
.dream-caption {
  position:fixed;
  z-index:9;
  left:15%;
  right:15%;
  bottom:18%;
  text-align:center;
  pointer-events:none;
  animation:dream-words 12.5s ease both;
  text-shadow:0 2px 15px #0b1e2a
}
.dream-caption .eyebrow {
  justify-content:center;
  font-size:8px;
  letter-spacing:.2em;
  color:#d4dcc9;
  margin-bottom:15px
}
.dream-caption h2 {
  font-size:clamp(36px,4.2vw,65px);
  line-height:1.2;
  letter-spacing:-.04em;
  margin-bottom:12px;
  color:#f1ebd4
}
.dream-caption p {
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.7;
  color:#dce5da
}
.starlight-button {
  position:fixed;
  right:7%;
  bottom:34px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  color:#e9ebd8;
  font-size:7px;
  letter-spacing:.15em;
  z-index:9;
  text-shadow:0 2px 6px #102833
}
.starlight-button .icon {
  width:17px;
  height:17px;
  filter:drop-shadow(0 0 8px #f1deb299)
}
.sky-targets {
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none
}
.sky-star {
  position:absolute;
  left:var(--x);
  top:var(--y);
  padding:20px;
  transform:translate(-50%,-50%);
  background:transparent;
  pointer-events:auto;
  color:#f2ebcf;
  outline-offset:2px!important
}
.sky-star .icon {
  width:11px;
  height:11px;
  stroke-width:1;
  fill:#f1eac1;
  filter:drop-shadow(0 0 4px #e2edd6);
  transition:transform 1s,filter 1s
}
.sky-star:hover .icon,.sky-star:focus-visible .icon {
  transform:scale(1.7);
  filter:drop-shadow(0 0 12px #f1eac1)
}
.sky-star span {
  position:absolute;
  left:50%;
  top:55px;
  width:150px;
  transform:translateX(-50%);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:13px;
  line-height:1.5;
  text-shadow:0 2px 7px #10202a;
  opacity:0;
  transition:opacity .6s;
  pointer-events:none
}
.sky-star:hover span,.sky-star:focus-visible span {
  opacity:.9
}
body.contemplating {
  overflow:hidden
}
body.contemplating .world-shade {
  opacity:.2
}
body[data-theme="return"] .toast {
  bottom:95px;
  background:#182f3ed9;
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.7;
  width:min(500px,80vw);
  border-color:#d7dfc333;
  padding:18px 25px
}
@keyframes cloud-drift {
  from {
    transform:translateX(-3%)
  }
  to {
    transform:translateX(4%)
  }
}
@keyframes camera-recline-sky {
  from {
    transform:translateY(-35px) scale(1.06)
  }
  to {
    transform:translateY(0) scale(1)
  }
}
@keyframes dream-words {
  0%,5% {
    opacity:0;
    translate:0 10px
  }
  18%,80% {
    opacity:1;
    translate:0 0
  }
  100% {
    opacity:0;
    translate:0 -5px
  }
}
@media(max-width:1100px) {
  .time-of-day {
    display:none
  }}
@media(max-width:760px) {
  body[data-theme] .forest {
    background-position:60% center
  }
  .dream-caption {
    left:8%;
    right:8%;
    bottom:24%
  }
  .dream-caption h2 {
    font-size:37px
  }
  .dream-caption p {
    font-size:14px
  }
  .dream-caption .eyebrow {
    font-size:6px;
    letter-spacing:.14em
  }
  .starlight-button {
    right:50%;
    transform:translateX(50%);
    bottom:92px;
    white-space:nowrap
  }
  .sky-star span {
    font-size:11px;
    width:100px
  }
  .sky-star {
    padding:18px
  }
  body[data-theme="return"] .toast {
    font-size:14px;
    bottom:140px
  }
  .return-button {
    bottom:27px
  }
  body[data-theme="return"] .story-content h1 {
    font-size:43px
  }}
@media(prefers-reduced-motion:reduce) {
  .reclining #atmosphere {
    transform:none
  }
  .dream-caption {
    opacity:1;
    translate:none
  }
  .cloud-veils {
    display:none
  }}
/* Original night artwork keeps the last view a place, rather than a backdrop effect. */
body[data-theme] .cosmic-sky {
  background:linear-gradient(90deg,#0e25362e,transparent 45%),url("assets/night.jpg") center/cover no-repeat;
  will-change:opacity,transform
}
.reclining .cosmic-sky {
  animation:camera-recline-sky 13s cubic-bezier(.22,.65,.25,1) both
}
.botanical-sprig {
  translate:calc(var(--px,0px)*-1.2) calc(var(--py,0px)*-.5)
}
.foreground-branch {
  translate:calc(var(--px,0px)*-1.7) 0
}
@media(max-width:760px) {
  .world-shade {
    background:linear-gradient(90deg,#08271cb3,transparent),linear-gradient(0deg,#0d291fe8,transparent 35%,#0d291f30)
  }
  .landing h1 {
    font-size:clamp(58px,16.8vw,110px);
    white-space:nowrap
  }
  .cosmic-sky {
    background-position:center bottom!important
  }}
@media(prefers-reduced-motion:reduce) {
  .reclining .cosmic-sky {
    transform:none
  }
  .botanical-sprig,.foreground-branch {
    translate:none
  }}
@media(prefers-reduced-motion:reduce) {
  .dream-caption {
    animation:none!important;
    opacity:1;
    translate:none
  }}
body[data-dream="earth"] .forest {
  opacity:.8;
  filter:brightness(.7) saturate(.85);
  transition:opacity 2.5s ease,filter 2.5s ease
}
body[data-dream="earth"] .cosmic-sky {
  opacity:.3;
  transition:opacity 2.5s ease
}
.sky-star:focus-visible {
  outline:1px solid #e0dba188;
  outline-offset:0!important;
  border-radius:50%;
  box-shadow:0 0 25px #c9e4d01c
}
/* Story-game refinement: the landscape owns the stage; the words arrive as a companion. */
.macro-glade,.soil-plate {
  position:absolute;
  inset:-2%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 2.8s var(--ease),transform 5s var(--ease);
  transform:translate3d(calc(var(--px,0px)*.7),calc(var(--py,0px)*.6),0) scale(1.025);
  pointer-events:none
}
.macro-glade {
  background-image:url("assets/understory.jpg")
}
.soil-plate {
  background-image:url("assets/soil.jpg");
  background-position:center 24%
}
.scene-veil {
  position:absolute;
  inset:0;
  background:#17342c;
  opacity:0;
  pointer-events:none;
  z-index:1
}
body[data-screen="journey"][data-chapter="1"] .macro-glade {
  opacity:1
}
body[data-screen="journey"][data-chapter="1"] .forest,body[data-screen="journey"][data-chapter="2"] .forest {
  opacity:0
}
body[data-screen="journey"][data-chapter="2"] .soil-plate {
  opacity:1
}
body[data-screen="journey"][data-chapter="2"] .cosmic-sky {
  opacity:0
}
body[data-screen="journey"][data-chapter="2"] .sunbeam {
  opacity:.15
}
body[data-screen="journey"][data-chapter="2"] .sun-orb {
  opacity:0
}
body[data-screen="journey"][data-chapter="3"] .forest {
  background-position:72% 65%;
  background-size:115% auto;
  filter:brightness(.83) saturate(.88) sepia(.42)
}
body[data-screen="journey"][data-chapter="4"] .cosmic-sky {
  background-size:118% auto;
  background-position:50% 4%;
  filter:saturate(.85)
}
body[data-screen="journey"][data-chapter="4"] .forest {
  background-position:center 8%;
  filter:brightness(.55) saturate(.7) sepia(.2)
}
body[data-screen="journey"] .foreground-branch {
  display:none
}
.map-button {
  font-size:12px;
  gap:7px
}
.map-button .icon {
  width:17px;
  height:17px
}
body[data-screen="journey"] .experience-shell {
  padding-top:21px
}
body[data-screen="journey"] main {
  display:block;
  flex:1;
  min-height:0
}
body[data-screen="journey"] .journey {
  position:relative;
  padding:0;
  width:100%;
  height:calc(100svh - 177px);
  min-height:520px
}
body[data-screen="journey"] .journey-layout {
  display:block;
  min-height:0;
  height:100%;
  position:relative
}
body[data-screen="journey"] .exploration-area {
  position:absolute;
  inset:0;
  min-height:0;
  height:auto;
  isolation:auto
}
body[data-screen="journey"] .scene-illustration {
  inset:0 0 0 40%;
  opacity:1
}
body[data-screen="journey"] .story-content {
  position:absolute;
  left:0;
  bottom:28px;
  width:44%;
  max-width:600px;
  z-index:4;
  margin:0;
  transition:opacity .8s,translate 1s var(--ease)
}
body[data-screen="journey"] .story-content::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-55px -65px -40px -5vw;
  background:radial-gradient(ellipse at 25% 65%,#102c24a8,transparent 72%);
  pointer-events:none
}
body[data-screen="journey"][data-chapter="2"] .story-content::before {
  background:radial-gradient(ellipse at 25% 65%,#251d16c9,transparent 75%)
}
body[data-screen="journey"] .story-content>.eyebrow,body[data-screen="journey"] .story-content>h1 {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  margin:-1px!important
}
body[data-screen="journey"] .narration-rule {
  display:none
}
.speaker-label {
  font-size:9px;
  letter-spacing:.21em;
  font-weight:500;
  color:#e6dfb7;
  margin:0 0 15px;
  line-height:1.6
}
body[data-screen="journey"] .narrative {
  font-size:clamp(26px,2.35vw,36px);
  line-height:1.34;
  min-height:0;
  max-width:100%;
  letter-spacing:-.025em;
  text-wrap:pretty
}
body[data-screen="journey"] .narrative p {
  margin-bottom:18px
}
body[data-screen="journey"] .narrative .narrative-detail {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,1.4vw,21px);
  line-height:1.65;
  color:#e2e7d7;
  letter-spacing:0;
  margin-top:17px;
  font-weight:400
}
body[data-screen="journey"] .narrative-actions {
  margin-top:24px;
  gap:22px
}
body[data-screen="journey"] .primary-button {
  min-height:49px;
  font-size:12px
}
body[data-screen="journey"] .story-meta {
  margin-top:17px;
  font-size:9px;
  color:#d1dcc9;
  gap:13px
}
body[data-screen="journey"] .skip-button {
  font-size:11px
}
.back-to-story {
  font-size:11px;
  color:#e2dfb7;
  margin-top:-2px;
  margin-bottom:5px;
  min-height:40px
}
.back-to-story .icon {
  width:14px;
  height:14px
}
.scene-heading {
  position:absolute;
  left:0;
  top:24px;
  z-index:3;
  display:flex;
  gap:14px;
  align-items:center;
  text-shadow:0 2px 9px #102b23a6;
  transition:opacity .7s
}
.scene-heading>span {
  font-family:Georgia,serif;
  font-size:43px;
  font-style:italic;
  line-height:1;
  color:#dcdbaa8a;
  font-weight:400
}
.scene-heading p {
  font-family:Georgia,serif;
  font-size:22px;
  line-height:1.2;
  margin:0 0 5px;
  color:#f1efdb;
  letter-spacing:-.025em
}
.scene-heading small {
  font-size:7px;
  line-height:1.4;
  letter-spacing:.19em;
  color:#d5dec9
}
body[data-screen="journey"] .environment-caption {
  left:49%;
  right:0;
  bottom:13px;
  font-size:7px;
  letter-spacing:.18em;
  opacity:.8
}
body[data-screen="journey"] .hotspots {
  z-index:2;
  transition:opacity .8s
}
body[data-screen="journey"] .hotspot {
  padding:12px 10px;
  min-width:100px;
  max-width:185px;
  gap:5px;
  transition:opacity .65s,filter .5s;
  filter:drop-shadow(0 3px 8px #102b2688)
}
body[data-screen="journey"] .hotspot-orb {
  width:39px;
  height:39px;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  background:transparent;
  animation:none;
  position:relative;
  transition:transform .65s var(--ease),filter .6s
}
body[data-screen="journey"] .hotspot-orb::before {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  left:50%;
  top:-5px;
  background:#f3efc4;
  border-radius:50%;
  box-shadow:0 0 13px #fff1b8
}
body[data-screen="journey"] .hotspot-orb::after {
  inset:-4px;
  border:0;
  border-top:1px solid #eee7c380;
  border-bottom:1px solid #eee7c380;
  transform:scaleX(.28);
  opacity:.55;
  border-radius:0;
  transition:transform .6s,opacity .6s
}
body[data-screen="journey"] .hotspot-orb .icon {
  width:22px;
  height:22px;
  stroke-width:1.1
}
body[data-screen="journey"] .hotspot-label {
  border:0;
  border-radius:0;
  background:#102f2980;
  font-size:10.5px;
  line-height:1.4;
  font-weight:400;
  padding:4px 6px;
  color:#f0f1dc;
  box-shadow:none;
  text-shadow:0 1px 5px #17382a
}
body[data-screen="journey"] .hotspot:hover .hotspot-orb,body[data-screen="journey"] .hotspot:focus-visible .hotspot-orb {
  transform:translateY(-3px) scale(1.1);
  background:transparent;
  filter:drop-shadow(0 0 13px #ebedb1)
}
body[data-screen="journey"] .hotspot:hover .hotspot-orb::after,body[data-screen="journey"] .hotspot:focus-visible .hotspot-orb::after {
  transform:scaleX(.8);
  opacity:1;
  inset:-4px
}
body[data-screen="journey"] .hotspot.visited .hotspot-orb {
  background:transparent;
  border:0;
  color:#eddda3
}
body[data-screen="journey"] .hotspot.visited .hotspot-orb::before {
  background:#e7db9d;
  box-shadow:0 0 12px #fff1b838
}
body[data-screen="journey"] .hotspot.element .hotspot-orb {
  width:46px;
  height:46px;
  font-size:34px;
  font-style:italic;
  background:transparent;
  box-shadow:none;
  border:0;
  color:#f4e6b2
}
body[data-screen="journey"] .hotspot.breath .hotspot-orb {
  width:57px;
  height:57px;
  border:0;
  background:transparent;
  animation:breathing 10s ease-in-out infinite
}
body[data-screen="journey"] .hotspot.breath .icon {
  width:31px;
  height:31px
}
body[data-screen="journey"][data-presentation="choice"] .hotspots {
  opacity:.55
}
body[data-screen="journey"][data-presentation="choice"] .story-content {
  width:46%;
  max-width:640px
}
body[data-screen="journey"] .choices {
  max-width:100%;
  gap:8px;
  margin:20px 0 8px
}
body[data-screen="journey"] .choice-button {
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.4;
  padding:13px 17px;
  border-color:#e0deb25c;
  background:#132e2dbd;
  backdrop-filter:blur(10px)
}
body[data-screen="journey"] .choice-button[aria-pressed="true"] {
  font-size:12px;
  font-family:"Avenir Next",Avenir,sans-serif;
  background:transparent;
  border:0;
  padding:0;
  color:#d8d9ae;
  min-height:25px
}
body[data-screen="journey"] .choice-button[aria-pressed="true"] .icon {
  display:none
}
body[data-screen="journey"][data-presentation="response"] .choices {
  margin:5px 0 0
}
body[data-screen="journey"] .bottom-area {
  z-index:5
}
body[data-screen="journey"] .path-heading {
  display:none
}
body[data-screen="journey"] .chapter-navigation {
  border-top-color:#e1e5c337;
  border-bottom-color:#e1e5c31c;
  grid-template-columns:repeat(6,1fr)
}
body[data-screen="journey"] .chapter-button {
  min-height:44px;
  padding:8px 10px;
  gap:12px;
  justify-content:center;
  transition:background .4s
}
body[data-screen="journey"] .chapter-node {
  width:26px;
  height:26px;
  border-color:transparent
}
body[data-screen="journey"] .chapter-number {
  font-size:8px;
  letter-spacing:.12em;
  margin:0;
  white-space:nowrap
}
body[data-screen="journey"] .chapter-name {
  display:none
}
body[data-screen="journey"] .footer-line {
  min-height:43px
}
body[data-screen="journey"] .footer-note {
  display:none
}
body[data-screen="journey"] .science-button {
  margin-right:auto
}
body[data-screen="journey"].map-open .chapter-button {
  min-height:70px
}
body[data-screen="journey"].map-open .chapter-name {
  display:block;
  font-size:9px;
  margin-top:5px
}
body[data-screen="journey"] .botanical-sprig {
  display:none
}
body[data-screen="journey"] .flying-butterfly {
  width:31px;
  left:73%;
  top:24%;
  opacity:.9
}
body[data-screen="journey"][data-chapter="2"] .scene-illustration {
  inset:0 0 0 36%;
  background:none;
  border-radius:0
}
body[data-screen="journey"][data-chapter="2"] .root-diagram {
  opacity:.85;
  filter:drop-shadow(0 0 5px #e3d5a54d)
}
body[data-screen="journey"][data-chapter="2"] .root-diagram>path:first-of-type {
  fill:transparent
}
body[data-screen="journey"][data-chapter="2"] .root-line {
  stroke:#e1d2a3;
  stroke-width:1.3;
  opacity:.45
}
body[data-screen="journey"][data-chapter="2"] .fungal-line {
  stroke:#c2d9b0;
  stroke-width:1;
  opacity:.35
}
body[data-screen="journey"][data-chapter="2"].network-active .flow-line {
  stroke-width:2;
  opacity:.95
}
body[data-screen="journey"][data-chapter="2"].whole-network .root-line,body[data-screen="journey"][data-chapter="2"].whole-network .fungal-line {
  opacity:.85;
  transition:opacity 2s
}
body[data-screen="journey"][data-chapter="3"] .scene-illustration {
  inset:0 0 -8% 34%;
  overflow:visible
}
body[data-screen="journey"] .garden-flower {
  filter:drop-shadow(0 3px 7px #0a281f66);
  width:38px!important;
  height:95px!important;
  bottom:5%;
  transform-origin:bottom
}
body[data-screen="journey"] .garden-flower:nth-child(2n) {
  height:120px!important;
  width:45px!important
}
body[data-screen="journey"] .garden-flower.unbloomed {
  opacity:.08;
  scale:.45
}
body[data-screen="journey"] .garden-flower.bloomed {
  opacity:.9;
  scale:1;
  transition:opacity 1.6s,scale 2s var(--ease)
}
body[data-screen="journey"] .refuge-grass {
  inset:23% 0 0;
  opacity:0;
  filter:drop-shadow(0 0 5px #c9bf7622)
}
body[data-screen="journey"].refuge-active .refuge-grass {
  opacity:.8
}
.chapter-curtain {
  position:absolute;
  inset:0;
  z-index:7;
  display:flex;
  align-items:center;
  padding:35px 6%;
  background:linear-gradient(90deg,#132f2680,transparent 95%);
  isolation:isolate
}
.curtain-copy {
  max-width:950px
}
.chapter-curtain .eyebrow {
  font-size:10px;
  letter-spacing:.24em;
  line-height:1.8;
  margin:0 0 30px;
  color:#e3e2bd
}
.curtain-title {
  font-family:Georgia,serif;
  font-size:clamp(65px,8.1vw,122px);
  font-weight:400;
  line-height:.99;
  letter-spacing:-.06em;
  margin:0 0 28px;
  color:#f0f0dc;
  text-shadow:0 5px 30px #092b2355
}
.curtain-title em {
  color:#e1dca4;
  font-weight:400
}
.curtain-line {
  font-family:Georgia,serif;
  font-size:clamp(21px,2.1vw,29px);
  line-height:1.5;
  color:#ececd6;
  max-width:650px;
  margin:0 0 20px;
  text-shadow:0 2px 10px #14392c
}
.chapter-curtain .text-button {
  font-size:11px;
  min-height:44px;
  color:#f0e8c2;
  gap:15px
}
body[data-presentation="opening"] .scene-heading,body[data-presentation="opening"] .story-content,body[data-presentation="opening"] .hotspots,body[data-presentation="opening"] .environment-caption {
  opacity:0;
  pointer-events:none
}
body[data-presentation="opening"] .bottom-area {
  visibility:hidden
}
.stewardship-memory {
  position:absolute;
  right:0;
  bottom:0;
  width:24%;
  height:20%;
  opacity:0;
  pointer-events:none;
  transition:opacity 3s;
  z-index:2
}
body[data-chapter="5"] .stewardship-memory { display:none; }
.stewardship-memory svg {
  width:100%;
  height:100%
}
@media(min-width:1650px) {
  body[data-screen="journey"] .narrative .narrative-detail {
    font-size:22px
  }
  body[data-screen="journey"] .story-content {
    bottom:7%;
    width:43%;
    max-width:680px
  }
  body[data-screen="journey"] .journey {
    min-height:650px
  }}
@media(max-width:1100px) and (min-width:761px) {
  body[data-screen="journey"] .story-content {
    width:48%;
    bottom:15px
  }
  body[data-screen="journey"] .narrative {
    font-size:28px
  }
  body[data-screen="journey"] .narrative .narrative-detail {
    font-size:17px
  }
  body[data-screen="journey"] .scene-illustration {
    left:40%
  }
  .scene-heading p {
    font-size:20px
  }
  .header-controls {
    gap:15px
  }
  .map-button span {
    display:none
  }}
@media(max-width:760px) {
  body[data-screen="journey"] .experience-shell {
    padding:17px 6vw 0
  }
  body[data-screen="journey"] .journey {
    height:auto;
    min-height:0;
    padding-bottom:27px
  }
  body[data-screen="journey"] .journey-layout {
    height:auto;
    min-height:0;
    display:block
  }
  body[data-screen="journey"] .exploration-area {
    position:absolute;
    inset:0 0 auto;
    height:43svh;
    min-height:285px;
    max-height:420px;
    margin:0;
    width:100%
  }
  body[data-screen="journey"] .scene-illustration {
    inset:0!important
  }
  body[data-screen="journey"] .story-content {
    position:relative;
    left:auto;
    bottom:auto;
    width:100%!important;
    max-width:none;
    margin:45svh 0 0;
    padding-top:5px
  }
  body[data-screen="journey"] .story-content::before {
    inset:-55px -6vw -35px;
    background:linear-gradient(0deg,#102b29e6 30%,#102b29a8 77%,transparent)
  }
  body[data-screen="journey"][data-chapter="2"] .story-content::before {
    background:linear-gradient(0deg,#241c15ef 25%,#241c15b8 75%,transparent)
  }
  body[data-screen="journey"] .narrative {
    font-size:26px;
    line-height:1.35;
    max-width:none
  }
  body[data-screen="journey"] .narrative .narrative-detail {
    font-size:17px;
    line-height:1.6;
    color:#e0e6d6;
    margin-top:16px
  }
  .speaker-label {
    font-size:8px;
    letter-spacing:.17em;
    margin-bottom:13px
  }
  .scene-heading {
    top:21px;
    left:0;
    gap:10px
  }
  .scene-heading>span {
    font-size:34px
  }
  .scene-heading p {
    font-size:19px
  }
  .scene-heading small {
    font-size:6px;
    letter-spacing:.12em
  }
  body[data-screen="journey"] .hotspot {
    min-width:85px;
    max-width:145px;
    padding:10px 7px;
    gap:4px
  }
  body[data-screen="journey"] .hotspot-label {
    font-size:10px;
    padding:5px 6px
  }
  body[data-screen="journey"] .hotspot-orb {
    width:34px;
    height:34px
  }
  body[data-screen="journey"] .hotspot.element .hotspot-orb {
    font-size:29px;
    width:41px;
    height:41px
  }
  body[data-screen="journey"] .hotspot.breath .hotspot-orb {
    width:45px;
    height:45px
  }
  body[data-screen="journey"] .environment-caption {
    left:0;
    right:0;
    bottom:0;
    font-size:6px;
    letter-spacing:.12em
  }
  body[data-screen="journey"] .narrative-actions {
    margin-top:21px;
    flex-wrap:wrap;
    gap:12px
  }
  body[data-screen="journey"] .story-meta {
    font-size:8px;
    margin-top:17px;
    line-height:1.6
  }
  body[data-screen="journey"] .choices {
    margin-top:18px;
    gap:9px
  }
  body[data-screen="journey"] .choice-button {
    font-size:17px;
    padding:14px 15px;
    line-height:1.45
  }
  body[data-screen="journey"] .chapter-button {
    flex-direction:row;
    min-height:43px!important;
    padding:8px 0!important;
    gap:3px
  }
  body[data-screen="journey"] .chapter-node {
    width:21px;
    height:21px
  }
  body[data-screen="journey"] .chapter-node .icon {
    width:14px;
    height:14px
  }
  body[data-screen="journey"] .chapter-number {
    font-size:0
  }
  body[data-screen="journey"] .chapter-number::after {
    content:attr(data-number);
    font-size:8px
  }
  body[data-screen="journey"] .footer-line {
    min-height:49px;
    padding:4px 0
  }
  body[data-screen="journey"] .science-button,body[data-screen="journey"] .look-button {
    font-size:10px;
    min-height:44px
  }
  body[data-screen="journey"].map-open .chapter-button {
    flex-direction:column;
    min-height:86px!important;
    gap:6px
  }
  body[data-screen="journey"].map-open .chapter-name {
    font-size:7px;
    max-width:56px;
    line-height:1.4
  }
  .map-button {
    min-height:28px;
    padding:2px
  }
  .map-button .icon {
    width:15px;
    height:15px
  }
  .map-button span {
    display:none
  }
  .chapter-curtain {
    position:fixed;
    inset:73px 0 0;
    padding:35px 7vw 120px;
    align-items:center;
    background:linear-gradient(90deg,#123328bd,transparent 100%)
  }
  .chapter-curtain .eyebrow {
    font-size:8px;
    letter-spacing:.16em;
    margin-bottom:25px
  }
  .curtain-title {
    font-size:clamp(49px,11.8vw,78px);
    line-height:1.05;
    letter-spacing:-.055em;
    margin-bottom:24px
  }
  .curtain-line {
    font-size:23px;
    line-height:1.5;
    max-width:340px;
    margin-bottom:22px
  }
  body[data-screen="journey"][data-chapter="3"] .forest {
    background-size:auto 115%;
    background-position:60% 50%
  }
  body[data-screen="journey"][data-chapter="4"] .cosmic-sky {
    background-size:auto 120%;
    background-position:60% top
  }
  .soil-plate {
    background-size:auto 78svh;
    background-position:center top;
    background-color:#302218
  }
  .stewardship-memory {
    width:40%;
    height:16%
  }}
@media(prefers-reduced-motion:reduce) {
  .macro-glade,.soil-plate {
    transform:none
  }
  .chapter-curtain {
    scroll-behavior:auto
  }
  .hotspot:hover .hotspot-orb {
    transform:none!important
  }}
body[data-presentation="opening"] .scene-heading,body[data-presentation="opening"] .story-content,body[data-presentation="opening"] .hotspots,body[data-presentation="opening"] .environment-caption {
  visibility:hidden;
  opacity:0!important
}
body[data-chapter="2"] .soil-plate {
  animation:soil-descent 3.5s var(--ease) both
}
@keyframes soil-descent {
  from {
    translate:0 -3%;
    filter:brightness(.7)
  }
  to {
    translate:0 0;
    filter:brightness(1)
  }
}
body[data-chapter="3"].season-active .garden-flower {
  filter:sepia(.5) drop-shadow(0 0 12px #ead9a12b)
}
@media(prefers-reduced-motion:reduce) {
  body[data-chapter="2"] .soil-plate {
    animation:none;
    translate:none
  }}
body[data-screen="journey"] .forest {
  transition:opacity 2.8s ease,filter 7s ease,background-position 5s ease
}
body[data-screen="journey"][data-chapter="3"] .scene-illustration {
  left:58%
}
.seed-head-art {
  position:absolute;
  left:65%;
  bottom:8%;
  width:80px!important;
  height:210px!important;
  transform-origin:bottom;
  animation:branch-sway 9s ease-in-out infinite alternate;
  opacity:.75
}
.exploration-area:has([data-object="season"]:is(:hover,:focus-visible)) .seed-head-art {
  filter:drop-shadow(0 0 8px #ebdb9440)
}
@media(max-width:760px) {
  .seed-head-art {
    height:135px!important;
    width:52px!important;
    bottom:6%;
    left:65%
  }
  body[data-screen="journey"][data-chapter="3"] .garden-flower {
    bottom:3%
  }}
/* Twilight keeps one coherent horizon: light changes over the sky plate. */
body[data-screen="journey"][data-chapter="4"] .cosmic-sky,body[data-screen="journey"][data-chapter="5"] .cosmic-sky {
  opacity:1
}
body[data-screen="journey"][data-chapter="4"] .forest,body[data-screen="journey"][data-chapter="5"] .forest {
  opacity:0
}
.twilight-sheen {
  position:absolute;
  inset:0;
  background:linear-gradient(#9e9fb2c2,#c5a19580 65%,#e2a77c7a);
  mix-blend-mode:screen;
  opacity:var(--twilight-veil,0);
  transition:opacity 8s ease;
  pointer-events:none
}
.golden-clearing {
  position:absolute;
  inset:-2%;
  background:url("assets/clearing.jpg") center/cover no-repeat;
  opacity:0;
  transition:opacity 3s ease,transform 7s ease;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.025);
  pointer-events:none
}
body[data-screen="journey"][data-chapter="3"] .golden-clearing {
  opacity:1
}
body[data-screen="journey"][data-chapter="3"] .forest {
  opacity:0
}
body[data-screen="journey"][data-dream="earth"] .forest {
  opacity:.8;
  filter:brightness(.7) saturate(.85);
  transition:opacity 2.5s ease,filter 2.5s ease
}
body[data-screen="journey"][data-dream="earth"] .cosmic-sky {
  opacity:.3;
  transition:opacity 2.5s ease
}
@media(max-width:760px) {
  .golden-clearing {
    background-position:65% center;
    transform:none
  }}
.seed-head-art {
  height:155px!important;
  width:59px!important
}
.info-dialog p {
  font-size:15px;
  line-height:1.8
}
.reference a {
  font-size:14px;
  line-height:1.6
}
.info-dialog .about-note {
  font-size:12px!important
}
@media(max-width:760px) {
  .macro-glade {
    background-position:85% center
  }
  .soil-plate {
    background-position:74% top
  }
  body[data-screen="journey"][data-chapter="0"] .forest {
    background-size:auto 65svh;
    background-position:90% top;
    background-color:#123126
  }
  .seed-head-art {
    height:125px!important;
    width:48px!important
  }
  .info-dialog p {
    font-size:14px
  }
  .reference a {
    font-size:13px
  }}
@media(max-width:760px) {
  body[data-screen="journey"] .journey-layout {
    display:flow-root;
    padding-top:45svh
  }
  body[data-screen="journey"] .story-content {
    margin-top:0
  }}
/* On a phone the physical scene occupies the upper stage. Quiet view opens it
   with one composited camera move, carrying the companions with the ground. */
@media(max-width:760px) {
  body[data-screen="journey"][data-chapter="0"] .forest {
    transition:opacity 2.8s ease,filter 7s ease;
    background-position:90% top;
    mask-image:linear-gradient(#000 0 48svh,transparent 68svh)
  }
  .golden-clearing {
    background-size:auto 65svh;
    background-position:85% top;
    background-color:#20372a;
    mask-image:linear-gradient(#000 0 48svh,transparent 68svh)
  }
  body[data-chapter="4"] .world,body[data-chapter="5"] .world {
    background:#122734
  }
  body[data-screen="journey"][data-chapter="4"] .cosmic-sky,body[data-screen="journey"][data-chapter="5"] .cosmic-sky {
    left:-50vw;
    right:auto;
    top:0;
    width:200vw;
    height:100svh;
    background-size:cover;
    background-position:center top!important;
    transform:scale(.5);
    transform-origin:center top;
    transition:opacity 6s ease,transform 8s var(--ease);
    animation:none
  }
  body[data-screen="journey"].contemplating[data-chapter="4"] .cosmic-sky,body[data-screen="journey"].contemplating[data-chapter="5"] .cosmic-sky {
    transform:scale(1)
  }
  body[data-screen="journey"][data-chapter="5"].reclining #atmosphere {
    animation:none
  }
  body[data-screen="journey"][data-chapter="4"] .story-content::before,body[data-screen="journey"][data-chapter="5"] .story-content::before {
    background:linear-gradient(0deg,#102635ef 25%,#102635a8 77%,transparent)
  }}
body[data-screen="journey"] .hotspot:focus-visible {
  outline:0
}
body[data-screen="journey"] .hotspot:focus-visible .hotspot-label {
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  color:#f2e7b4
}
@media(max-width:760px) {
  .topbar {
    position:sticky;
    top:12px
  }}
@media(max-width:760px) {
  body[data-chapter="5"] .cosmic-sky {
    left:-50vw;
    right:auto;
    top:0;
    width:200vw;
    height:100svh;
    background-size:cover;
    background-position:center top!important;
    transform:scale(.5);
    transform-origin:center top;
    transition:opacity 6s ease,transform 8s var(--ease);
    animation:none;
    mask-image:linear-gradient(#000 0 78%,transparent 100%)
  }
  body[data-screen="journey"][data-chapter="4"] .cosmic-sky {
    mask-image:linear-gradient(#000 0 78%,transparent 100%)
  }
  body[data-chapter="5"].contemplating .cosmic-sky,body[data-screen="ending"][data-chapter="5"] .cosmic-sky {
    transform:scale(1)
  }}
@media(max-width:380px) {
  .brand-caption {
    display:none
  }
  .brand {
    font-size:8px;
    letter-spacing:.12em;
    gap:6px
  }
  .brand-mark {
    width:24px;
    height:29px
  }
  .header-controls {
    gap:7px
  }}
.quiet-sound-button {
  position:fixed;
  left:4vw;
  bottom:28px;
  z-index:11;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #dce2b733;
  border-radius:50%;
  background:#14332c99;
  backdrop-filter:blur(10px);
  color:#e9ebd3
}
.quiet-sound-button .icon {
  width:18px;
  height:18px
}
.quiet-sound-button:hover {
  background:#315043bb
}
@media(max-width:760px) {
  .quiet-sound-button {
    left:5vw;
    bottom:25px;
    width:40px;
    height:40px
  }
  .return-button {
    font-size:9px;
    gap:7px;
    padding:13px 14px
  }
  .return-button .icon {
    width:15px;
    height:15px
  }}

/* V3 NATIVE OPAL CURSORS — two original local designs; no DOM follower. */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("assets/cursor-opal-normal.png") 4 3, default;
  }
  body * {
    cursor: inherit;
  }
  :is(p, h1, h2, h3, h4, h5, h6, .narrative, .narrative-detail, .curtain-line, [contenteditable="true"], textarea, input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"])) {
    cursor: text;
  }
  :is(button, a[href], [role="button"], summary, select, label[for], input[type="button"], input[type="submit"], input[type="reset"], input[type="range"], input[type="checkbox"], input[type="radio"], input[type="color"]) {
    cursor: url("assets/cursor-opal-interactive.png") 15 3, pointer;
  }
  :is(button, a[href], [role="button"], summary, label[for]) * {
    cursor: inherit;
  }
  :is(button:disabled, input:disabled, select:disabled, [aria-disabled="true"]),
  :is(button:disabled, [aria-disabled="true"]) * {
    cursor: not-allowed;
  }}
@media (forced-colors: active) {
  html, body, body * {
    cursor: auto !important;
  }
  :is(button, a[href], [role="button"], summary, select, label[for], input[type="button"], input[type="submit"], input[type="reset"], input[type="range"], input[type="checkbox"], input[type="radio"], input[type="color"]),
  :is(button, a[href], [role="button"], summary, label[for]) * {
    cursor: pointer !important;
  }
  :is(p, h1, h2, h3, h4, h5, h6, .narrative, [contenteditable="true"], textarea, input[type="text"], input[type="email"], input[type="search"]) {
    cursor: text !important;
  }
  :is(button:disabled, input:disabled, select:disabled, [aria-disabled="true"]),
  :is(button:disabled, [aria-disabled="true"]) * {
    cursor: not-allowed !important;
  }}
/* END V3 NATIVE OPAL CURSORS */

/* V3 shared camera: every anchored layer receives the SAME base translation.
   Near framing and far atmosphere add restrained depth without moving targets. */
:root { --camera-x:0px; --camera-y:0px; }
.forest,.macro-glade,.soil-plate,.golden-clearing {
  transform:scale(1.025);
  translate:var(--camera-x) var(--camera-y);
  transition:opacity 2.8s ease,filter 6s ease;
}
body[data-theme] .cosmic-sky {
  inset:-16px;
  translate:var(--camera-x) var(--camera-y);
  will-change:transform,translate;
}
body[data-screen="journey"] .hotspots,
body[data-screen="journey"] .scene-illustration,.stewardship-memory{
  translate:var(--camera-x) var(--camera-y);
}
.foreground-branch { translate:calc(var(--camera-x)*1.6) calc(var(--camera-y)*1.4); }
.sunbeam,.sun-orb { translate:calc(var(--camera-x)*.45) calc(var(--camera-y)*.35); }
.cloud-veils { translate:calc(var(--camera-x)*.2) calc(var(--camera-y)*.2); }
.sky-targets { translate:calc(var(--camera-x)*.35) calc(var(--camera-y)*.35); }
body.reclining .cosmic-sky,body.reclining #atmosphere { animation:none; }
body[data-screen="journey"][data-chapter="4"] .cosmic-sky {
  background:linear-gradient(90deg,#102b3425,transparent 45%),url("assets/twilight.jpg") center/cover no-repeat;
  filter:none;
  animation:none;
}
body[data-chapter="4"] .twilight-sheen { opacity:0; }
body[data-screen="journey"] .hotspot:hover .hotspot-orb,
body[data-screen="journey"] .hotspot:focus-visible .hotspot-orb {
  transform:none;
  filter:drop-shadow(0 0 8px #ecddc378);
}
.presence-note {
  position:absolute;
  left:55%;
  top:48%;
  width:min(290px,36%);
  padding:8px 0 8px 17px;
  border-left:1px solid #e4e1ba70;
  opacity:0;
  translate:0 6px;
  transition:opacity .7s ease,translate 1.1s var(--ease);
  pointer-events:none;
  text-shadow:0 2px 12px #0a221be6,0 1px 4px #0a221b;
}
.presence-note::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-10px -22px;
  background:radial-gradient(ellipse at left,#152e2399,transparent 78%);
}
.presence-note.visible { opacity:1; translate:0 0; }
.presence-note span { font-size:7px; letter-spacing:.17em; color:#e5e2c6; }
.presence-note p { font:20px/1.4 Georgia,serif; color:#f3eddb; margin:9px 0 0; }
body[data-chapter="0"] .presence-note { top:36%;left:57%; }
body[data-chapter="1"] .presence-note { top:62%;left:51%; }
body[data-chapter="2"] .presence-note { top:43%;left:51%; }
body[data-chapter="3"] .presence-note { top:33%;left:52%; }
body[data-chapter="4"] .presence-note { top:64%;left:55%; }
body[data-chapter="5"] .presence-note { top:41%;left:56%; }
body[data-presentation="opening"] .presence-note,
body[data-presentation="discovery"] .presence-note,
body.contemplating .presence-note { opacity:0; }
body[data-chapter="2"] .soil-plate { animation:soil-descent-v3 3.5s var(--ease) both; }
@keyframes soil-descent-v3 {
  from { transform:scale(1.045) translateY(-1%);filter:brightness(.75); }
  to { transform:scale(1.025);filter:brightness(1); }
}
body[data-chapter="2"] .flow-line { opacity:.13; animation:nutrient-flow 11s linear infinite;filter:none; }
body[data-chapter="2"][data-presence="root"] .root-line,
body[data-chapter="2"][data-presence="fungus"] .fungal-line { opacity:.72;transition:opacity 1.2s; }
.garden-flower svg { transform-origin:50% 100%;animation:meadow-wind 8.7s ease-in-out infinite; }
.garden-flower:nth-child(2n) svg { animation-duration:11.3s;animation-delay:-3.7s; }
.garden-flower:nth-child(3n) svg { animation-duration:9.9s;animation-delay:-6.1s; }
body[data-screen="journey"] .garden-flower.unbloomed { opacity:.45;transform:translateY(4px) scale(.82); }
.garden-flower svg>g { transition:opacity 1.6s ease; }
.garden-flower.unbloomed svg>g { opacity:0; }
@keyframes meadow-wind {
  0%,100% { rotate:-.9deg; }
  43% { rotate:1.8deg; }
  71% { rotate:.3deg; }
}
body[data-presence="season"] .seed-head-art { filter:drop-shadow(0 0 5px #dcd0a250); }
body[data-presence="flowers"] .garden-flower svg { filter:brightness(1.12); }
body[data-screen="journey"] .narrative-detail { text-shadow:0 2px 9px #0d251daa; }
.landing-subtitle { max-width:520px; }
.landing-aside,body[data-screen="landing"] .foreground-branch { display:none; }
.landing-discovery .discovery-ring {
  width:48px;height:48px;background:#172e2233;border:1px solid #e4e4c775;
  box-shadow:none;backdrop-filter:none;
}
@media(min-width:761px) and (max-width:1100px) {
  .presence-note { width:240px; }
  .presence-note p { font-size:17px; }}
@media(max-width:760px) {
  .world { position:absolute;bottom:auto;height:100svh; }
  body.contemplating .world { position:fixed; }
  .macro-glade {
    background-size:auto 65svh;background-position:85% top;background-color:#17362b;
    mask-image:linear-gradient(#000 0 48svh,transparent 68svh);
  }
  body[data-theme] .cosmic-sky {
    left:-50vw;right:auto;top:-12px;width:200vw;height:calc(100svh + 24px);
  }
  .forest,.macro-glade,.golden-clearing { transform:scale(1.025); }
  .presence-note { display:none; }}
@media(prefers-reduced-motion:reduce) {
.forest,.macro-glade,.soil-plate,.golden-clearing,body[data-theme] .cosmic-sky,.hotspots,.scene-illustration,.foreground-branch,.sky-targets,
  .stewardship-memory,.sunbeam,.sun-orb,.cloud-veils{ translate:none!important; }
  body[data-chapter="2"] .soil-plate,.garden-flower svg { animation:none!important; }
  .presence-note { transition:none;translate:none; }}
/* Companion staging — one pose per scene, on the same camera plane as terrain.
   The mentor's plain dark-green mantle is consistent across all three paintings. */
#night-stage {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:1;
  translate:var(--camera-x) var(--camera-y);
  transition:opacity 1.6s ease;
}
#night-stage .companions {
  display:none;
  position:absolute;
  right:var(--companions-right,7vw);
  bottom:var(--companions-bottom,18vh);
  top:auto;
  width:var(--companions-width,min(32vw,410px));
  height:auto;
  overflow:visible;
  transform-origin:center bottom;
  filter:drop-shadow(0 3px 3px #0b211c24);
}
body[data-chapter="0"] #night-stage .companion-pose-walk,
body[data-chapter="3"] #night-stage .companion-pose-seated,
body[data-chapter="4"] #night-stage .companion-pose-rest,
body[data-chapter="5"] #night-stage .companion-pose-rest { display:block; }
body[data-screen="landing"] #night-stage { opacity:0; }
body[data-chapter="1"] #night-stage,
body[data-chapter="2"] #night-stage { display:none; }
body[data-dream] #night-stage { opacity:.45; }
.companion-painting {
  transform-box:fill-box;
  transform-origin:50% 94%;
  animation:companion-stillness 13s ease-in-out infinite;
}
@keyframes companion-stillness {
  0%,100% { scale:1 1; }
  46% { scale:1 1.003; }
}
body[data-chapter="0"] {
  --companions-width:min(34vw,430px);
  --companions-right:36vw;
  --companions-bottom:22vh;
}
body[data-chapter="1"] {
  --companions-width:180px;
  --companions-right:38vw;
  --companions-bottom:45.5vh;
}
body[data-chapter="1"] #night-stage { opacity:.94;filter:blur(.7px); }
body[data-chapter="3"] {
  --companions-width:min(37vw,420px);
  --companions-right:35vw;
  --companions-bottom:24vh;
}
body[data-chapter="4"] {
  --companions-width:min(45vw,570px);
  --companions-right:6vw;
  --companions-bottom:4vh;
}
body[data-chapter="4"] #night-stage { filter:brightness(.88) saturate(.88); }
body[data-chapter="5"] {
  --companions-width:min(45vw,570px);
  --companions-right:6vw;
  --companions-bottom:4vh;
}
body[data-chapter="5"] #night-stage { filter:brightness(.64) saturate(.7); }
body[data-chapter="4"] #night-stage .companion-pose-rest .companion-painting,
body[data-chapter="5"] #night-stage .companion-pose-rest .companion-painting { transform:scaleX(-1); }
body[data-chapter="4"] .companion-painting,
body[data-chapter="5"] .companion-painting { animation-duration:11.7s; }
body[data-chapter="4"] .presence-note { width:200px; }
body[data-chapter="5"] .presence-note { top:54%; }
@media(max-width:760px) {
  #night-stage .companions {
    width:var(--companions-mobile-width,230px);
    right:var(--companions-mobile-right,4vw);
    bottom:auto;
    top:calc(var(--companions-mobile-ground,38svh) - var(--companions-mobile-width,230px)*.53);
  }
  body[data-chapter="0"] {
    --companions-mobile-width:min(72vw,208px);
    --companions-mobile-right:24vw;
    --companions-mobile-ground:46svh;
  }
  body[data-chapter="0"] #night-stage .companions {
    top:calc(var(--companions-mobile-ground) - var(--companions-mobile-width)*.6);
  }
  body[data-chapter="1"] #night-stage { opacity:.84;filter:blur(.7px); }
  body[data-chapter="1"] #night-stage .companions {
    width:130px;
    right:65vw;
    top:calc(35svh - 90px);
  }
  body[data-chapter="3"] {
    --companions-mobile-width:min(82vw,236px);
    --companions-mobile-right:18vw;
    --companions-mobile-ground:43svh;
  }
  body[data-chapter="3"] #night-stage .companions {
    top:calc(var(--companions-mobile-ground) - var(--companions-mobile-width)*.6);
    translate:0 0;
    transition:translate 8s var(--ease);
  }
  body.contemplating[data-chapter="3"] #night-stage .companions { translate:0 39svh; }
  body[data-chapter="4"],body[data-chapter="5"] {
    --companions-mobile-width:min(78vw,300px);
  }
  body[data-chapter="4"] #night-stage .companions,
  body[data-chapter="5"] #night-stage .companions {
    width:var(--companions-mobile-width,300px);
    right:0;
    top:calc(55svh - var(--companions-mobile-width,300px)*.42);
    translate:0 0;
    transition:translate 8s var(--ease);
  }
  body.contemplating[data-chapter="5"] #night-stage .companions,
  body[data-screen="ending"][data-chapter="5"] #night-stage .companions { translate:0 39svh; }
}
body[data-presentation="opening"] #night-stage { opacity:0; }
body[data-screen="journey"]:not([data-chapter="2"]) .environment-caption { display:none; }
@media(max-width:320px) {
  .experience-shell { padding-left:16px;padding-right:16px; }
  .header-controls { gap:6px;padding-left:8px;padding-right:8px; }
  .sound-button #sound-label { display:none; }
}
@media (min-width:761px) and (max-height:760px) {
  body[data-chapter="4"],body[data-chapter="5"] { --companions-bottom:6vh; }
}
@media(prefers-reduced-motion:reduce) {
  #night-stage { translate:none!important;transition:none; }
  #night-stage .companion-painting { animation:none!important;scale:none; }
  #night-stage .companions { transition:none;transform:none; }
}