:root {
  color-scheme: dark;
  --void: #07090c;
  --soil: #10151c;
  --mist: #1a222c;
  --fog: #2a3440;
  --moon: #c9d2dc;
  --silver: #8b97a5;
  --lichen: #7f9e8e;
  --pollen: #c4a574;
  --spore: #a67b7b;
  --paper: #e8e4dc;
  --ink: #0e1218;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  background: var(--void);
  color: var(--moon);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 65% 10%, #17212b 0, var(--void) 42%);
  line-height: 1.55;
}
button,
a,
textarea {
  font: inherit;
}
.skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 20;
  background: var(--paper);
  color: var(--ink);
  padding: 10px;
}
.skip:focus {
  top: 12px;
}
.chrome {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 64px);
  border-bottom: 1px solid var(--fog);
  position: relative;
  z-index: 5;
}
.wordmark {
  color: var(--moon);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-decoration: none;
}
.controls {
  display: flex;
  gap: 8px;
}
.controls button {
  min-height: 44px;
  border: 1px solid var(--fog);
  border-radius: 4px;
  background: var(--soil);
  color: var(--moon);
  padding: 8px 12px;
}
.threshold {
  min-height: calc(100vh - 64px);
  display: grid;
  align-content: center;
  padding: 8vw clamp(20px, 10vw, 160px);
  max-width: 1000px;
}
.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--silver);
  margin: 0 0 12px;
}
.ink {
  color: #58616a;
}
h1,
h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  margin: 0.2em 0;
}
h1 {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  letter-spacing: -0.035em;
}
.threshold > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--silver);
}
button {
  cursor: pointer;
}
.primary,
.link-button {
  display: inline-block;
  width: max-content;
  min-height: 44px;
  padding: 12px 18px;
  border: 0;
  border-radius: 4px;
  background: var(--lichen);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.primary:hover,
.primary:focus-visible {
  background: var(--pollen);
}
:focus-visible {
  outline: 3px solid var(--lichen);
  outline-offset: 3px;
}
.intro-note {
  font-size: 0.78rem;
  color: var(--silver);
  margin-left: 12px;
}
.garden {
  padding: 48px clamp(16px, 4vw, 64px);
}
.garden-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}
.garden-head h2,
.whisper h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}
#status {
  color: var(--silver);
}
.biome {
  height: min(58vh, 620px);
  min-height: 390px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--fog);
  border-radius: 8px;
  background: linear-gradient(#101823, #080b0f 65%, #10151c 66%);
}
.moon {
  position: absolute;
  width: 13vw;
  height: 13vw;
  min-width: 90px;
  min-height: 90px;
  border-radius: 50%;
  right: 12%;
  top: 10%;
  background: #c9d2dc;
  box-shadow: 0 0 60px #9babb755;
}
.mist {
  position: absolute;
  width: 70%;
  height: 20%;
  border-radius: 50%;
  background: #52627020;
  filter: blur(24px);
}
.mist-a {
  left: -10%;
  top: 42%;
}
.mist-b {
  right: -20%;
  top: 68%;
}
.field {
  position: absolute;
  inset: 0;
}
.plant {
  position: absolute;
  left: calc(8% + var(--x) * 4.7%);
  top: calc(52% + var(--z) * 2.8%);
  width: clamp(28px, 4.2vw, 64px);
  height: calc(38px + var(--scale) * 48px);
  border: 0;
  background: transparent;
  transform: scale(calc(0.65 + var(--scale) * 0.45));
  transform-origin: bottom;
  animation: breathe calc(6s + var(--scale) * 5s) ease-in-out infinite alternate;
}
.plant::before,
.plant::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: var(--plant-color);
  opacity: calc(0.5 + var(--glow) * 0.42);
  box-shadow: 0 0 calc(var(--glow) * 18px) var(--plant-color);
}
.plant::before {
  left: 40%;
  width: 20%;
  height: 80%;
  border-radius: 70% 30% 50% 15%;
}
.plant::after {
  left: 5%;
  bottom: 32%;
  width: 90%;
  height: 38%;
  border-radius: 70% 20% 65% 25%;
  transform: rotate(calc(var(--tilt) * 1deg));
}
.plant[data-clade="murmoth"]::after {
  clip-path: polygon(
    0 50%,
    45% 0,
    50% 50%,
    55% 0,
    100% 50%,
    55% 100%,
    50% 55%,
    45% 100%
  );
}
.plant[data-clade="sporeveil"]::after {
  border-radius: 50% 50% 15% 15%;
}
.plant[data-clade="resinbark"]::before {
  width: 34%;
  left: 33%;
  border-radius: 15%;
}
.plant[data-clade="dewstring"]::after {
  height: 10%;
  border-radius: 50%;
}
.plant[data-clade="chorolith"]::after {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@keyframes breathe {
  to {
    transform: scale(calc(0.66 + var(--scale) * 0.45)) rotate(1.2deg);
  }
}
.explore-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.25fr);
  gap: 24px;
  margin-top: 24px;
}
.roster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.roster button {
  width: 100%;
  min-height: 52px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--fog);
  border-radius: 4px;
  background: var(--soil);
  color: var(--moon);
}
.roster button[aria-current="true"] {
  border-color: var(--lichen);
  color: var(--lichen);
}
.journal {
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 16px 40px #0006;
}
.journal h2 {
  font-size: 2rem;
}
.traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.traits dt {
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #59616a;
}
.traits dd {
  margin: 2px 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.whisper {
  margin-top: 64px;
  border-top: 1px solid var(--fog);
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.whisper form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.whisper textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--fog);
  background: var(--soil);
  color: var(--moon);
  border-radius: 4px;
  padding: 12px;
}
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-row output {
  color: var(--silver);
}
#form-result {
  min-height: 1.5em;
}
.receipt {
  padding: 12px;
  border-left: 3px solid var(--pollen);
  background: #20232a;
  color: var(--pollen);
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.return {
  min-height: calc(100vh - 110px);
  padding: 12vw clamp(20px, 10vw, 160px);
}
.return h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
}
.fallback {
  padding: 12px;
  background: var(--soil);
  color: var(--spore);
  margin: 0 0 12px;
}
.fallback-item {
  display: block;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--fog);
  border-radius: 4px;
  background: var(--soil);
  color: var(--silver);
}
footer {
  min-height: 64px;
  padding: 20px clamp(16px, 4vw, 64px);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--fog);
  color: var(--silver);
  font-size: 0.8rem;
}
footer a {
  color: var(--lichen);
}
.still * {
  animation: none !important;
  transition: none !important;
}
.still .mist {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 760px) {
  .chrome {
    padding: 0 12px;
  }
  .wordmark {
    max-width: 110px;
  }
  .controls button {
    font-size: 0.75rem;
    padding: 6px;
  }
  .threshold {
    padding: 40px 20px;
  }
  .intro-note {
    display: block;
    margin: 12px 0;
  }
  .garden {
    padding: 32px 12px;
  }
  .garden-head {
    display: block;
  }
  .biome {
    min-height: 320px;
  }
  .explore-layout,
  .whisper {
    grid-template-columns: 1fr;
  }
  .roster {
    grid-template-columns: 1fr;
  }
  .journal {
    min-width: 0;
  }
  .traits {
    grid-template-columns: 1fr;
  }
  .whisper {
    gap: 16px;
  }
  .plant {
    left: calc(5% + var(--x) * 5.2%);
  }
}