/* Gelasio has Georgia's metrics, so the fallback barely shifts the layout
   while the font loads. Atkinson is a bit narrower than Arial, enough to wrap
   a paragraph onto an extra line, so Arial stands in for it scaled to the
   same average width and line metrics (the fallback faces after it).
   Both families are OFL (assets/fonts/OFL-*.txt). */
@font-face { font-family: Gelasio; src: url(/assets/fonts/gelasio-400-1.008.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gelasio; src: url(/assets/fonts/gelasio-400-italic-1.008.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Gelasio; src: url(/assets/fonts/gelasio-700-1.008.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url(/assets/fonts/atkinson-hyperlegible-next-400-2.001.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url(/assets/fonts/atkinson-hyperlegible-next-600-2.001.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Atkinson Fallback'; src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'); font-weight: 400; size-adjust: 99.11%; ascent-override: 99.29%; descent-override: 31.89%; line-gap-override: 0%; }
@font-face { font-family: 'Atkinson Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Liberation Sans Bold'); font-weight: 600 700; size-adjust: 97.76%; ascent-override: 100.65%; descent-override: 32.32%; line-gap-override: 0%; }
:root {
  /* Day or night: two space toggles. The active one is `initial`, which makes
     var(--day, …) or var(--night, …) fall back to its value; the other one is
     empty. So every colour below is written once, day and night side by side,
     and works in every browser. The switch is at "Day and night" further on.
     Keep the empty values (`--night: ;`): a minifier that drops them breaks
     the palette. theme_css_test.go checks that every pair is complete. */
  --day: initial;
  --night: ;
  color-scheme: light;
  --paper: var(--day, #f7f5ec) var(--night, #121e1a);
  --ink: var(--day, #233e30) var(--night, #efe9d8);
  --muted: var(--day, #5f685c) var(--night, #aab3a3);
  --red: var(--day, #b5442d) var(--night, #ea8468);
  --line: var(--day, #d6d8c9) var(--night, #293a32);
  --soft: var(--day, #e9ecdf) var(--night, #172620);
  --card: var(--day, #fffdf6) var(--night, #1b2b24);
  --edge: var(--day, #65705d) var(--night, #566b5f);
  --shadow: var(--day, #233e3012) var(--night, #00000047);
  --bar-line: var(--day, #d4d1bf) var(--night, #2c3e36);
  --screen: var(--day, #f3ead2) var(--night, #2b2c22);
  --thread: var(--day, #b9a98a) var(--night, #58796a);
  --wash: var(--day, #233e300d) var(--night, #efe9d812);
  --label: var(--day, #f7f5ecdb) var(--night, #121e1ad6);
  --label-shadow: var(--day, #233e301a) var(--night, #0000005c);
  /* Colours in the inline pictures. */
  --cap: var(--day, #b5442d) var(--night, #cf5a42);
  --spot: var(--day, #f7f5ec) var(--night, #e3f5ea);
  --stem: var(--day, #e8dcc4) var(--night, #b9bdb0);
  --stem-line: var(--day, #233e30) var(--night, #0d171b);
  --gills: var(--day, #dfd2b3) var(--night, #a3a898);
  --badge-mark: var(--day, #fffdf6) var(--night, #fff6ea);
  /* Behind a zone's word mark at night, when it has no dark version: the
     day paper of the zakelijk preset (zone_marks.go). */
  --plate: var(--day, transparent) var(--night, #f6f7f9);
  --stripe: var(--day, var(--red)) var(--night, #c0604a80);
  --plus: var(--day, currentColor) var(--night, #a9ebc2b3);
  /* The main button; at night a lantern with a foxfire glow. */
  --button: var(--day, var(--ink)) var(--night, linear-gradient(#3d7157, #2f5c45));
  --button-text: var(--day, var(--paper)) var(--night, #fffbf0);
  --button-hover: var(--day, #355440) var(--night, linear-gradient(#467d61, #356650));
  --button-ring: var(--day, none) var(--night, inset 0 1px 0 #ffffff26, 0 0 0 1px #a9ebc2b3, 0 0 24px 2px #a9ebc259, 0 0 60px 8px #a9ebc21f);
  --if-day: var(--day, block) var(--night, none);
  --if-night: var(--day, none) var(--night, block);
  /* Forms (create.css, feedback.css). */
  --on-ink: var(--day, #fff) var(--night, #121e1a);
  --input: var(--day, #fff) var(--night, #0f1916);
  --input-edge: var(--day, #bfc6b7) var(--night, #4e6356);
  --placeholder: var(--day, #788071) var(--night, #8f998b);
  --drop-edge: var(--day, #8a9883) var(--night, #5f7568);
  --picked: var(--day, #edf0e5) var(--night, #1f3129);
  --error-text: var(--day, #872d21) var(--night, #f3a894);
  --error-bg: var(--day, #f8e7df) var(--night, #3a1f1a);
  --feedback-error: var(--day, #7c2a19) var(--night, #f3a894);
  --feedback-error-bg: var(--day, #f6e3dc) var(--night, #3a1f1a);
  --error-edge: var(--day, #e3b9ab) var(--night, #6b3a2f);
  --over-limit: var(--day, #a33020) var(--night, #f3a894);
  /* Mijn paddenstoelen: states and the "done" notice (web/mijn.css). */
  --ok-bg: var(--day, #dcefdf) var(--night, #1f4a33);
  --ok-text: var(--day, #1f5132) var(--night, #c9f2d6);
  --ok-mark: var(--day, #2f8a4f) var(--night, #7fe0a3);
  --ok-mark-text: var(--day, #fff) var(--night, #12301f);
  --wait-bg: var(--day, #f7e7b5) var(--night, #4a3d17);
  --wait-text: var(--day, #5c4508) var(--night, #f4dc93);
  --pause-bg: var(--day, #e3e5dd) var(--night, #33423b);
  --bar: var(--day, #6f9a7b) var(--night, #7fe0a3);
  /* Night only: foxfire, moonlight and the sun of the toggle. */
  --foxfire: #a9ebc2;
  --foxfire-core: #e2fbe9;
  --spore: #effff4;
  --moonlight: #f3ecd2;
  --moon-halo: #f3ecd24d;
  --card-shadow: var(--day, #233e3005) var(--night, #00000040);
  --sun: #f2c75c;
  --spot-asleep: #56655d;
  /* The hyphae (thread.js): a quiet line by day, foxfire at night. */
  --hypha: var(--day, #b9a98a) var(--night, #e2fbe9);
  --hypha-root: var(--day, #9a8866) var(--night, #e2fbe9);
  --hypha-width: var(--day, .75) var(--night, 1);
  --hypha-opacity: var(--day, 1) var(--night, .9);
  --hypha-side: var(--day, .85) var(--night, .5);
  --hypha-faint: var(--day, .5) var(--night, .2);
  --hypha-trace: var(--day, 0) var(--night, .2);
  --hypha-tip: var(--day, #8a7858) var(--night, #f2fff5);
  --hypha-tip-glow: var(--day, none) var(--night, 0 0 6px 2px #a9ebc2cc, 0 0 20px 7px #a9ebc24d);
  --hypha-halo: var(--day, none) var(--night, drop-shadow(0 0 3px #a9ebc266));
  --spot-glow: var(--day, none) var(--night, drop-shadow(0 0 1.5px #cdf7dc) drop-shadow(0 0 4px #a9ebc299));
  --serif: Gelasio, Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', Arial, Helvetica, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--day, var(--paper)) var(--night, linear-gradient(#0d171b, #0f1a1c 480px, var(--paper) 1100px) no-repeat var(--paper));
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
summary:focus-visible { outline-offset: -3px; }
.wrap { width: min(1240px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 15px; background: var(--ink); color: white; z-index: 10; }
.skip-link:focus { top: 10px; }
.site-header { height: 112px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 26px; font-weight: bold; letter-spacing: -1px; text-decoration: none; }
.wordmark img { object-fit: contain; }
/* A zone's own identity (zone_marks.go, web/brand-parts.html). Its word mark
   sits in a box 32 px high and at most 180 px wide, by the ratio of its width
   and height attributes; a wider one is letterboxed to the left. At night the
   dark version takes its place, or the day one stands on a light plate.
   Without a word mark: its icon mark or monogram, and its name in the sans. */
.wordmark.is-zone { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: 0; min-width: 0; }
.zone-mark { display: block; height: 32px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; font: 600 16px/1 var(--sans); }
.zone-mark-day:not(.zone-mark-plate) { display: var(--day, block) var(--night, none); }
.zone-mark-night { display: var(--day, none) var(--night, block); }
.zone-mark-plate { box-sizing: content-box; padding: var(--day, 0) var(--night, 4px 8px); border-radius: 6px; background: var(--plate); forced-color-adjust: none; }
.zone-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; }
.wordmark .monogram { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; background: var(--zone-mark, var(--red)); color: var(--zone-on-mark, var(--card)); font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; forced-color-adjust: none; }
.wordmark .zone-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; }
.status > .zone-dot { background: var(--zone-dot, var(--zone-mark, var(--red))); }
.site-footer .wordmark.is-zone { font-size: 17px; }
.site-footer .zone-mark { height: 24px; max-width: 140px; }
.site-footer :is(.zone-icon, .monogram) { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Inline pictures take their colours from the palette, so the night can recolour them. */
.i-cap { fill: var(--cap); }
.i-spot { fill: var(--spot); }
.i-spot-line { stroke: var(--spot); }
.i-stem { fill: var(--stem); stroke: var(--stem-line); }
.i-light { fill: var(--badge-mark); }
.domain { font-weight: normal; }
nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
nav a { text-decoration: none; padding-block: 12px; }
nav a[aria-current="page"] { color: var(--red); text-decoration: underline 2px; text-underline-offset: 8px; }
.status { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 10px 14px; border-radius: 24px; font-size: 12px; }
.status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
/* The Proefversie pill opens a notice on hover, keyboard focus or click
   (trial-notice.js adds .is-open for clicks and .is-dismissed for Escape). */
.trial { position: relative; display: inline-block; }
.trial-toggle { margin: 0; background: transparent; color: inherit; font-family: inherit; line-height: inherit; cursor: help; }
.trial-toggle:hover, .trial.is-open .trial-toggle { border-color: var(--edge); }
.trial-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.trial-icon { display: block; flex: 0 0 auto; }
.trial-note { position: absolute; top: calc(100% + 14px); right: 0; z-index: 20; display: flex; gap: 14px; align-items: flex-start; width: min(330px, calc(100vw - 40px)); padding: 18px 20px 18px 16px; background: var(--card); border: 1px solid var(--edge); border-radius: 7px; box-shadow: 5px 7px 0 var(--shadow); text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
/* Bridges the gap so the pointer can travel from the pill into the notice. */
.trial-note::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 15px; }
.trial-note::after { content: ''; position: absolute; top: -6px; right: 30px; width: 10px; height: 10px; background: var(--card); border-top: 1px solid var(--edge); border-left: 1px solid var(--edge); transform: rotate(45deg); }
.trial-toggle:focus-visible + .trial-note, .trial.is-open .trial-note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Touch screens keep :hover on the last tapped element; there .is-open alone decides. */
@media (hover: hover) { .trial:hover .trial-note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
/* For a pill at the start of a column rather than at the end of the header. */
.trial.is-dismissed .trial-note { opacity: 0; visibility: hidden; }
.trial-note-icon { flex: 0 0 auto; margin-top: 2px; }
.trial-note p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.trial-note .trial-note-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
.trial-note .trial-note-title { margin: 4px 0 6px; font-family: var(--serif); font-size: 19px; letter-spacing: -.4px; line-height: 1.25; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .trial-note { transform: none; transition: none; } }

.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; line-height: 1.6; text-transform: uppercase; }
h1 { font-family: var(--serif); font-size: clamp(58px, 5.6vw, 82px); font-weight: normal; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 25px; }
h1 em { color: var(--red); font-weight: normal; }
h2 { font-family: var(--serif); font-weight: normal; font-size: 44px; letter-spacing: -1.3px; line-height: 1.15; margin: 16px 0; }
h3 { font-family: var(--serif); font-size: 30px; font-weight: normal; letter-spacing: -.5px; margin: 18px 0 12px; }
.intro { max-width: 470px; font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; }
.button { display: inline-flex; align-items: center; gap: 20px; padding: 18px 24px; background: var(--button); color: var(--button-text); box-shadow: var(--button-ring); font-size: 16px; text-decoration: none; border-radius: 4px; }
.button:hover { background: var(--button-hover); }
.button span { font-size: 21px; line-height: 1; }

/* Homepage */
/* Keep the illustration aligned with the beginning of the hero copy. */
.hero { display: grid; grid-template-columns: 1fr 1fr; padding-block: 64px; align-items: start; }
.hero-copy { position: relative; z-index: 1; }
/* Only the hero link grows mushrooms. Keep the existing button surface and
   native navigation: no click handler, moving target or extra focus stop. */
.button--sprout { position: relative; isolation: isolate; margin-top: 14px; }
/* An opaque face masks the extended roots. Its inherited background follows
   the normal button hover colour; the label and focus outline stay on top. */
.button--sprout::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: inherit; pointer-events: none; }
.button--sprout .button-label, .button--sprout .button-arrow { position: relative; z-index: 2; }
.button--sprout .button-label { font-size: inherit; line-height: inherit; }
.cta-sprouts { position: absolute; top: 4px; left: 12px; right: 12px; height: 0; z-index: 0; pointer-events: none; user-select: none; }
/* Fixed sizes, including on full-width mobile buttons. Matching the viewBox
   ratio removes SVG letterboxing. Every transform pivots at the buried root. */
.cta-sprout { position: absolute; bottom: 0; width: var(--sprout-width); aspect-ratio: 40 / 52; transform-origin: 50% 100%; }
.cta-sprout:nth-child(1) { left: 5%; --sprout-width: 14px; --sprout-delay: 0s; --sprout-lean: -8deg; }
.cta-sprout:nth-child(2) { left: 24%; --sprout-width: 22px; --sprout-delay: .12s; --sprout-lean: -3deg; }
.cta-sprout:nth-child(3) { left: 65%; --sprout-width: 18px; --sprout-delay: .24s; --sprout-lean: 5deg; }
.cta-sprout:nth-child(4) { left: 85%; --sprout-width: 16px; --sprout-delay: .08s; --sprout-lean: 9deg; }
.cta-sprout svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.cta-sprout-drawing { transform-box: view-box; transform-origin: 20px 52px; transform: rotate(var(--sprout-lean)); }
.cta-sprout-stem { fill: var(--stem); stroke: var(--stem-line); stroke-width: .8; }
.cta-sprout-cap { fill: var(--cap); }
.cta-sprout-gills { fill: var(--gills); }
.cta-sprout-spots { fill: var(--spot); filter: var(--spot-glow); }
/* One short sprout, then still. Hover/focus adds one settling sway rather
   than an endless attention loop. Reduced motion gets the static baseline. */
@media (prefers-reduced-motion: no-preference) {
  .cta-sprout { animation: cta-sprout-grow .8s ease-out var(--sprout-delay) both; }
  .button--sprout:focus-visible .cta-sprout svg { animation: cta-sprout-sway .65s ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .button--sprout:hover .cta-sprout svg { animation: cta-sprout-sway .65s ease-out; }
}
@keyframes cta-sprout-grow {
  from { transform: scale(.35, 0); }
  75% { transform: scale(1.03, 1.04); }
  to { transform: scale(1); }
}
@keyframes cta-sprout-sway {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(3deg); }
}
@media (forced-colors: active) { .cta-sprouts { display: none; } }

.hero-sub { font-family: var(--serif); font-style: italic; font-size: 26px; letter-spacing: -.4px; margin: -6px 0 22px; }
.launch-note { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 15px; max-width: 470px; }
.launch-note em { font-family: var(--serif); font-size: 16px; color: var(--red); }
/* The sizes attribute of the garden pictures in index.html follows the width
   of .hero-art and .garden here and in the media queries below. */
.hero-art { position: relative; margin: 18px -24px 0 -32px; height: 530px; }
.garden { position: absolute; width: 100%; aspect-ratio: 1200 / 900; bottom: 0; left: 0; }
.garden picture, .garden img { display: block; width: 100%; height: auto; }
/* The night picture is a <source> of the day one (theme.js follows a stored
   choice); the foxfire layer on top is lazy, so a day visit never loads it. */
.garden .garden-glow { display: var(--if-night); position: absolute; top: 0; left: 0; }
/* The example is a picture of the start screen of the real game
   (examples/egeltje-hop), so the two always look alike. */
.browser-example { position: absolute; width: 350px; top: 90px; left: 4%; transform: rotate(-7deg); background: var(--card); color: inherit; text-decoration: none; border: 1px solid var(--edge); border-radius: 7px; box-shadow: 5px 7px 0 var(--shadow); overflow: hidden; transition: transform .2s ease; }
.browser-example:hover { transform: rotate(-5deg) translateY(-4px); }
.browser-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 11px 10px; border-bottom: 1px solid var(--bar-line); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; }
.browser-dots { font-size: 7px; letter-spacing: 1px; color: var(--red); white-space: nowrap; }
.browser-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.game-shot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--screen); }
.example-label { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 12px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.play-badge { flex: 0 0 auto; transition: transform .2s ease; }
.browser-example:hover .play-badge { transform: scale(1.12); }
.browser-example:hover .example-label { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }
.browser-example:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.agent-prompt-field { position: relative; margin: 0 0 14px; }
.agent-prompt-tools:not([hidden]) { position: absolute; top: 8px; right: 8px; display: flex; }
.agent-copy { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.agent-copy:hover { border-color: var(--line); background: var(--paper); color: var(--ink); }
.agent-copy:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.agent-copy[aria-disabled="true"] { cursor: wait; opacity: .6; }
.agent-copy-status { margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: var(--ink); }
.agent-copy-status:empty { display: none; }
/* rows is the roomy fallback for browsers without content-sized form controls. */
.agent-prompt { display: block; width: 100%; field-sizing: content; margin: 0; padding: 14px 42px 14px 16px; border: 0; border-left: 2px solid var(--line); border-radius: 0; background: var(--soft); color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; resize: vertical; }
.agent-prompt:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.agent-prompt::selection { background: var(--ink); color: var(--paper); }

/* The name explanation stays secondary to the hero and its publishing link.
   Its opaque panel sits above the existing thread, keeping the copy clear.
   The original small illustration uses the existing day/night palette. */
.why { position: relative; z-index: 1; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 38px; padding: 32px 40px; margin-top: 8px; margin-bottom: 38px; background: var(--soft); border-radius: 8px; scroll-margin-top: 24px; }
.why-art svg { display: block; width: 100%; height: auto; pointer-events: none; }
.why-ground { stroke: var(--edge); }
.why-outline { stroke: var(--stem-line); }
.why-gills { fill: var(--gills); }
.why-kicker { text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 700; color: var(--red); margin: 0 0 10px; }
.why h2 { font: 400 clamp(24px, 2.7vw, 34px)/1.2 var(--serif); margin: 0 0 13px; letter-spacing: -.025em; }
.why-text { max-width: 640px; font-size: 16px; line-height: 1.65; margin: 0; color: var(--muted); }
@media (min-width: 900px) { .why { max-width: 1040px; } }
@media (max-width: 650px) {
  .why { grid-template-columns: 1fr; gap: 16px; padding: 25px; margin-bottom: 24px; }
  .why-art { width: 105px; }
  .why-break { display: none; }
  .why-text { font-size: 15px; }
}

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin-block: 0; padding: 26px 0; border-block: 1px solid var(--line); }
.facts li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 22px; font-size: 14px; color: var(--muted); }
.facts li::before { content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50% 50% 20% 20%; background: var(--red); }
.facts strong { font-family: var(--serif); font-size: 19px; font-weight: normal; letter-spacing: -.3px; color: var(--ink); }

.steps-section { padding-block: 88px 90px; scroll-margin-top: 28px; }
.section-heading > p:last-child { font-size: 17px; line-height: 1.7; color: var(--muted); }
/* A thread of mycelium connects the steps; the mushroom grows along it. */
.steps-wrap { position: relative; margin-top: 44px; }
.mycelium { position: absolute; top: 50px; left: 0; width: 100%; height: 60px; fill: none; stroke: var(--thread); stroke-width: 1.6; stroke-linecap: round; }
.mycelium-pulse { display: none; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; }
.steps li { padding-right: 34px; }
.steps li + li { padding-left: 34px; }
.step-mark { display: flex; align-items: flex-end; gap: 10px; height: 76px; }
.step-mark svg { display: block; margin-bottom: -4px; }
.step-number { color: var(--red); font-family: var(--serif); font-size: 20px; font-style: italic; }
.steps p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 21px; }
.step-note { font-size: 14px; font-style: italic; }

.seeds-section { background: var(--soft); padding-block: 84px 76px; }
.seeds-heading { max-width: 780px; }
.seeds-heading h2 { margin-top: 0; }
.seeds-heading p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.seeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; padding: 0; margin: 38px 0 0; }
.seed { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 22px 22px; background: var(--card); border: 1px solid var(--edge); border-radius: 4px 4px 10px 10px; box-shadow: 5px 7px 0 var(--shadow); }
.seed::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(90deg, var(--stripe) 0 10px, transparent 10px 14px); border-radius: 4px 4px 0 0; }
.seed-label { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; padding-bottom: 12px; border-bottom: 1px dashed var(--thread); font: italic 15px var(--serif); color: var(--red); }
.seed h3 { margin: 6px 0 0; font-size: 25px; }
.seed-prompt { margin: 0; padding: 12px 14px; background: var(--soft); border-left: 2px solid var(--line); font-size: 14px; line-height: 1.65; }
.seed-copy { align-self: flex-start; margin-top: auto; padding: 10px 14px; background: transparent; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.seed-copy:hover { background: var(--wash); }
.seed-copy:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.questions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; padding-block: 88px 80px; }
.questions > div > p:last-child { font-size: 16px; color: var(--muted); line-height: 1.8; }
.question-list { padding-top: 14px; }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; gap: 20px; justify-content: space-between; align-items: center; cursor: pointer; font-size: 17px; padding: 21px 0; list-style: none; line-height: 1.5; }
summary::-webkit-details-marker { display: none; }
summary > span { font-size: 23px; font-weight: normal; }
.question-list summary > span { color: var(--plus); }
details[open] summary > span { transform: rotate(45deg); }
details > p, details > .answer { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 560px; margin: 0 28px 22px 0; }
/* A zone's own answer (zone_questions.go) may have paragraphs and a list. */
.answer > p, .answer > ul { margin: 0 0 .75em; }
.answer > :last-child { margin-bottom: 0; }
.answer > ul { padding-left: 1.25em; list-style: disc; }
.answer li + li { margin-top: .25em; }
/* A link in a list sits close to the words beside it. */
.answer a:focus-visible { outline-offset: 2px; }
.closing { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 64px 90px; border-top: 1px solid var(--line); text-align: center; }
.closing h2 { margin: 10px 0 20px; }

/* Equal outer columns keep the tagline centred on the page, however wide the
   wordmark and the links on either side of it are. */
.site-footer { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-block: 30px; }
.site-footer .wordmark { font-size: 20px; justify-self: start; }
.site-footer p { font-family: var(--serif); font-size: 14px; font-style: italic; text-align: center; }
.site-footer > span { font-size: 13px; color: var(--muted); justify-self: end; text-align: right; text-wrap: balance; }
.site-footer > span > span { margin-left: 10px; }
.site-footer > span > a { color: inherit; text-underline-offset: 3px; white-space: nowrap; }

@media (min-width: 1440px) { .hero-art { height: 565px; } }
/* Below 1100px the example card would run into the text: one column. */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .hero-copy { max-width: 560px; }
  .hero-art { width: 100%; max-width: 540px; height: 460px; margin: 28px 0 0; justify-self: center; }
  .browser-example { width: 300px; top: 70px; left: 5%; }
  .browser-bar { font-size: 9px; gap: 6px; }
}
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px); }
  nav > a { display: none; }
  /* Owners need their way in on a phone too. */
  nav > a.nav-mine { display: inline-flex; white-space: nowrap; }
  h1 { font-size: 64px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .steps li { padding-right: 20px; }
  .steps li + li { padding-left: 20px; }
  .seeds { grid-template-columns: 1fr; max-width: 560px; }
  .questions { gap: 35px; }
}
@media (max-width: 740px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 86px; }
  .wordmark { font-size: 23px; }
  .wordmark .logo-mark { width: 27px; }
  .site-header .zone-mark { height: 28px; max-width: 200px; }
  .wordmark .zone-name { max-width: 9em; }
  nav { gap: 10px; }
  .status { font-size: 11px; padding: 8px 10px; }
  .trial-toggle { gap: 6px; padding-inline: 8px; }
  .hero { padding-block: 28px; }
  h1 { font-size: clamp(46px, 12vw, 64px); }
  .hero-sub { font-size: 21px; }
  .hero .button, .closing .button { width: 100%; justify-content: space-between; }
  .launch-note { max-width: none; }
  .hero-art { margin: 12px 0 0; height: 390px; max-width: 480px; width: 100%; justify-self: center; }
  .garden { width: 110%; left: -5%; }
  .browser-example { top: 30px; width: 270px; left: 6%; }
  .facts { gap: 18px 14px; padding-block: 22px; }
  .facts li { font-size: 13px; }
  .facts strong { font-size: 17px; }
  .steps-section { padding-block: 56px; }
  h2 { font-size: 34px; }
  .mycelium { display: none; }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 0 0 26px 22px; border-left: 1.6px solid var(--thread); }
  .steps li:last-child { padding-bottom: 0; }
  .step-mark { height: auto; margin-left: -44px; }
  .step-mark svg { background: var(--paper); padding-block: 4px; }
  .steps p { max-width: 450px; }
  .seeds-section { padding-block: 56px; }
  .questions { grid-template-columns: 1fr; gap: 10px; padding-block: 56px 48px; }
  .closing { padding-block: 48px 60px; }
  .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 25px; }
  .site-footer p { width: 100%; order: 3; margin: 7px 0 0; text-align: left; }
  .site-footer > span { line-height: 1.7; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .browser-example, .play-badge { transition: none; } }


/* Day and night. The system setting decides, unless the sun/moon buttons
   stored a choice; theme.js (blocking, in <head>) puts that choice on <html>
   as data-theme before the first paint. Without JavaScript the media query
   alone still gives the night palette. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --day: ; --night: initial; color-scheme: dark; } }
:root[data-theme="dark"] { --day: ; --night: initial; color-scheme: dark; }

.theme-toggle { display: none; }
[data-theme] .theme-toggle { display: inline-flex; }
.nav-mine-icon { display: none; }
/* The word in the pill is text, not the dot that .status > span draws. */
.status > .trial-word { width: auto; height: auto; border-radius: 0; background: none; }
.site-header .theme-toggle { align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -14px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.site-header .theme-toggle:hover { border-color: var(--edge); }
.theme-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.theme-toggle svg { display: block; overflow: visible; }
/* The icon follows aria-pressed, which flips on click, before the page does. */
.tt-body, .tt-bite, .tt-rays { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.5, -.4, .3, 1.4), opacity .35s ease; }
.tt-rays { opacity: 0; transform: scale(.3) rotate(-90deg); }
.site-header .theme-toggle[aria-pressed="true"] { color: var(--sun); }
.theme-toggle[aria-pressed="true"] .tt-body { transform: scale(.6); }
.theme-toggle[aria-pressed="true"] .tt-bite { transform: translate(9px, -9px); }
.theme-toggle[aria-pressed="true"] .tt-rays { opacity: 1; transform: none; }
/* The sun in the garden picture (at 1055, 90 of 1200 × 900) is a button too;
   for mouse and touch, the header button is the one for the keyboard. */
.sky-toggle { position: absolute; z-index: 2; left: 87.9%; top: 9.9%; width: 9.8%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: box-shadow .3s ease; }
.sky-toggle:hover { box-shadow: 0 0 0 7px #e2b04a1f, 0 0 34px 10px #e2b04a33; }
[data-theme="dark"] .sky-toggle:hover { box-shadow: 0 0 0 7px #f3ecd214, 0 0 40px 12px #f3ecd21f; }
/* Dusk and dawn (theme.js): the new theme shows through a growing circle
   from the clicked sun or moon. Only its edge mixes the two: there both
   views fade and the light behind them shows, golden at dusk, pale at dawn. */
@property --dusk-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root { --band: 1; }
@media (max-width: 500px) { :root { --band: .8; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { -webkit-mask: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #000 calc(var(--dusk-r) - 80px * var(--band)), #0000 calc(var(--dusk-r) - 36px * var(--band))); mask: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #000 calc(var(--dusk-r) - 80px * var(--band)), #0000 calc(var(--dusk-r) - 36px * var(--band))); }
::view-transition-old(root) { -webkit-mask: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #0000 calc(var(--dusk-r) - 44px * var(--band)), #000 var(--dusk-r)); mask: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #0000 calc(var(--dusk-r) - 44px * var(--band)), #000 var(--dusk-r)); }
:root.to-night::view-transition { background: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #f3b563 calc(var(--dusk-r) - 70px * var(--band)), #d98876 calc(var(--dusk-r) - 30px * var(--band)), #b76a86 var(--dusk-r)); }
:root.to-day::view-transition { background: radial-gradient(circle at var(--dusk-x) var(--dusk-y), #fff4d6 calc(var(--dusk-r) - 60px * var(--band)), #f6dcc0 var(--dusk-r)); }
.vt-clip::view-transition-new(root) { -webkit-mask: none; mask: none; clip-path: circle(max(0px, calc(var(--dusk-r) - 60px)) at var(--dusk-x) var(--dusk-y)); }
.vt-clip::view-transition-old(root) { -webkit-mask: none; mask: none; }
:root.vt-clip::view-transition { background: none; }
@media (max-width: 740px) { .site-header .theme-toggle { margin-left: -4px; } }
@media (max-width: 420px) {
  [data-theme] nav { gap: 8px; }
  [data-theme] .site-header:has(nav) .wordmark { font-size: clamp(18px, 5.6vw, 23px); gap: 7px; }
  [data-theme] .site-header:has(nav) .wordmark .logo-mark { width: clamp(22px, 6.6vw, 27px); }
  [data-theme] .site-header:has(nav) .wordmark:has(.zone-name) { font-size: 18px; }
  [data-theme] .trial-toggle { padding-inline: 7px; }
}
/* Small phones: at least 8px between the logo and the Proefversie pill, and
   at 320px wide a smaller logo and sun/moon button so the menu still fits. */
@media (max-width: 400px) { [data-theme] .site-header { column-gap: 8px; } }
/* On phones the notice would stick out past the left edge: anchor it to the
   menu's right edge, past the sun/moon button, with the arrow still under
   the pill (button width + gap - its -4px margin + the arrow's 30px). */
@media (max-width: 740px) {
  .site-header nav { position: relative; }
  .site-header .trial { position: static; }
  [data-theme] .site-header .trial-note::after { right: 76px; }
}
@media (max-width: 420px) { [data-theme] .site-header .trial-note::after { right: 74px; } }
@media (max-width: 360px) {
  [data-theme] .site-header .trial-note::after { right: 66px; }
  [data-theme] nav { gap: 6px; }
  [data-theme] .site-header:has(nav) .wordmark { font-size: 16px; gap: 5px; }
  [data-theme] .site-header:has(nav) .wordmark .logo-mark { width: 19px; }
  .site-header .zone-mark { height: 24px; max-width: 176px; }
  [data-theme] .site-header:has(nav) .wordmark:has(.zone-name) { font-size: 17px; }
  .site-header :is(.zone-icon, .monogram) { width: 24px; height: 24px; font-size: 14px; }
  [data-theme] .site-header .theme-toggle { width: 34px; height: 34px; }
}

/* Phones: on the right two round buttons of one size, "Mijn paddenstoelen"
   and the sun/moon; the trial notice becomes a small label under the logo,
   word included, opening the same note. The current page is marked as on
   desktop: red, with a short line under it. */
@media (max-width: 740px) {
  .site-header { position: relative; }
  .site-header nav { position: static; gap: 8px; }
  [data-theme] nav { gap: 8px; }
  .site-header .wordmark { margin-bottom: 14px; }
  nav > a.nav-mine, .site-header .theme-toggle, [data-theme] .site-header .theme-toggle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; }
  nav > a.nav-mine { position: relative; color: var(--ink); text-decoration: none; }
  nav > a.nav-mine[aria-current="page"] { color: var(--red); text-decoration: none; }
  nav > a.nav-mine[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 2px; margin-left: -8px; background: var(--red); border-radius: 1px; }
  .nav-mine-icon { display: block; }
  .nav-mine-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header .trial-toggle, [data-theme] .site-header .trial-toggle { position: absolute; left: 0; bottom: 8px; min-height: 24px; gap: 5px; padding: 0; border: 0; border-radius: 0; font-size: 11px; color: var(--muted); }
  .site-header .trial-toggle .trial-icon { width: 12px; height: 13px; }
  .site-header .trial-toggle::after { content: 'ⓘ'; font-size: 11px; }
  .site-header .trial-note { left: 0; right: auto; top: calc(100% + 10px); }
  [data-theme] .site-header .trial-note::after, .site-header .trial-note::after { left: 20px; right: auto; }
}
@media (max-width: 360px) {
  .site-header nav, [data-theme] nav { gap: 6px; }
}

/* ------------------------------------------------------------------------
   Nachttuin: the same garden after sunset. The moon takes the place of the
   sun, stars come out (sky.js) and the mushrooms glow, as real foxfire fungi
   do: the spots in the pictures, and one thread of hyphae that grows down
   the page as you scroll (thread.js), from the soil of the garden to the
   last mushroom, which then grows up. The garden answers a touch (garden.js). */
.garden-glow { display: var(--if-night); mix-blend-mode: plus-lighter; }
[data-theme="dark"] .garden-glow { animation: glow-breathe 6s ease-in-out infinite alternate; }
@keyframes glow-breathe { from { opacity: .62; } to { opacity: .95; } }

/* The moon, where the sun was. */
.garden::before, .garden::after { content: ''; display: none; position: absolute; pointer-events: none; }
.garden::after { display: var(--if-night); left: 87.9%; top: 9.9%; width: 9.4%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(assets/moon.webp) center / contain no-repeat; }
.garden::before { display: var(--if-night); left: 86.4%; top: 11.4%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #f3ecd230, #f3ecd214 42%, #f3ecd200); }

[data-theme="dark"] .skip-link { color: var(--paper); }
[data-theme="dark"] h1 em { text-shadow: 0 0 34px #ea846833; }
[data-theme="dark"] .facts li::before { box-shadow: 0 0 9px #ea846859; }
[data-theme="dark"] .button { text-shadow: 0 1px 1px #0000004d; }
[data-theme="dark"] .button:hover { --button-ring: inset 0 1px 0 #ffffff33, 0 0 0 1px #c9f5d8, 0 0 30px 4px #a9ebc280, 0 0 70px 10px #a9ebc229; }
/* The homepage: the hyphae hang from main, and the moonlight may reach past
   the edge of a narrow screen without widening it. */
main:has(> .hero) { position: relative; overflow-x: clip; }
/* Pages that still show the logo as a picture. */
[data-theme="dark"] .wordmark img { filter: brightness(1.2); }

/* Foxfire on the spots of the mushrooms drawn on the page. */
[data-theme="dark"] :is(.site-header .logo-mark, .step-mark, .closing-mark) .i-spot { filter: url(#foxfire); }

/* The example game is a lit screen in the dark garden. */
[data-theme="dark"] .browser-example { box-shadow: 0 26px 50px -20px #000d, 0 0 90px 6px #f7e6b31c; }
[data-theme="dark"] .browser-example:hover { box-shadow: 0 30px 56px -20px #000d, 0 0 110px 12px #f7e6b329; }
[data-theme="dark"] .game-shot { filter: brightness(.94); }

/* The sky: two canvases behind the header and the top of every public page (sky.js). */
.night-sky { display: none; }
[data-theme="dark"] .night-sky { display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }

/* Fireflies (garden.js adds them). They stay clear of links and buttons:
   the garden ones fly behind the example card, the one in the hero of a
   phone keeps to the sky beside the title. */
.fireflies { display: none; }
[data-theme="dark"] .fireflies { display: block; position: absolute; inset: 0; pointer-events: none; }
[data-theme="dark"] .fireflies-hero { display: none; }
.fireflies i, .firefly-visit { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fffbe0; box-shadow: 0 0 6px 2px #ffe9a3b3, 0 0 26px 10px #f5d77a33; pointer-events: none; }
.fireflies i { opacity: .9; animation: ff-drift-a var(--drift, 18s) ease-in-out var(--delay, 0s) infinite alternate, ff-blink var(--blink, 7s) ease-in-out var(--delay, 0s) infinite; }
.fireflies i:nth-child(1) { left: 61%; top: 44%; --drift: 22s; --blink: 7.5s; --delay: -4s; }
.fireflies i:nth-child(2) { left: 75%; top: 17%; width: 10px; height: 10px; animation-name: ff-wander-out, ff-blink; --drift: 26s; --blink: 8.5s; --delay: -9s; }
.fireflies i:nth-child(3) { left: 71%; top: 86%; animation-name: ff-drift-b, ff-blink; --drift: 19s; --blink: 6.5s; --delay: -2s; }
.fireflies i:nth-child(4) { left: 94%; top: 56%; width: 9px; height: 9px; animation-name: ff-drift-b, ff-blink; --drift: 21s; --blink: 9s; --delay: -5.5s; }
.fireflies i:nth-child(5) { left: 64%; top: 70%; animation-name: ff-wander-up, ff-blink; --drift: 28s; --blink: 7s; --delay: -6s; }
@media (max-width: 1100px) {
  [data-theme="dark"] .fireflies-hero { display: block; }
  .fireflies.fireflies-hero i:first-child { left: auto; right: 14px; top: 72px; width: 7px; height: 7px; animation-name: ff-hover, ff-blink; }
}
@keyframes ff-drift-a { 0% { transform: translate(0, 0); } 35% { transform: translate(22px, -18px); } 70% { transform: translate(6px, -38px); } 100% { transform: translate(-18px, -14px); } }
@keyframes ff-drift-b { 0% { transform: translate(0, 0); } 40% { transform: translate(-24px, -12px); } 75% { transform: translate(-8px, 18px); } 100% { transform: translate(18px, 6px); } }
@keyframes ff-wander-out { 0% { transform: translate(0, 0); } 30% { transform: translate(-60px, -40px); } 65% { transform: translate(-150px, -90px); } 100% { transform: translate(-210px, -60px); } }
@keyframes ff-wander-up { 0% { transform: translate(0, 0); } 40% { transform: translate(30px, -80px); } 100% { transform: translate(-20px, -150px); } }
@keyframes ff-hover { 0% { transform: translate(0, 0); } 50% { transform: translate(-5px, -4px); } 100% { transform: translate(3px, 3px); } }
@keyframes ff-blink { 0%, 100% { opacity: .2; } 35% { opacity: .3; } 50% { opacity: 1; } 66% { opacity: .9; } 82% { opacity: .2; } }

/* A garden you can touch: hover or tap a big mushroom (garden.js). Its
   spots flare, spores drift up to the stars and a firefly comes to look. */
.garden-touch { position: absolute; border-radius: 50%; }
.garden-touch, .garden-flare { display: none; }
[data-theme="dark"] .garden-touch { display: block; }
[data-theme="dark"] .garden-flare { display: block; position: absolute; inset: 0; background: url(assets/mushroom-garden-glow.webp) 0 0 / 100% 100%; mix-blend-mode: plus-lighter; clip-path: var(--clip); pointer-events: none; animation: flare 1.8s ease-out both; }
[data-theme="dark"] .garden-flare.is-shimmer { -webkit-mask: linear-gradient(100deg, #0000 38%, #000 50%, #0000 62%) 100% 0 / 300% 100%; mask: linear-gradient(100deg, #0000 38%, #000 50%, #0000 62%) 100% 0 / 300% 100%; animation: shimmer 2.8s ease-in-out both; }
@keyframes shimmer { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes flare { 0% { opacity: 0; } 14% { opacity: 1; filter: brightness(1.7); } 100% { opacity: 0; } }
.spore { position: absolute; width: var(--s, 4px); height: var(--s, 4px); translate: -50% -50%; border-radius: 50%; background: var(--spore); box-shadow: 0 0 6px 2px #a9ebc299; pointer-events: none; animation: spore-rise var(--t, 3s) cubic-bezier(.2, .6, .4, 1) var(--d, 0s) both; }
@keyframes spore-rise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(.4); } }
.firefly-visit { margin: -4px; animation: visit 3.4s ease-in-out both, ff-blink 1.7s ease-in-out infinite; }
@keyframes visit { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 15% { opacity: 1; } 55%, 72% { transform: translate(0, 0); } 100% { opacity: 0; transform: translate(calc(var(--fx) * -.4), -60px); } }

/* The mycelium between the steps glows. A pulse runs along it (four times,
   then it rests) and each mushroom lights up as the pulse passes: --at is
   where it stands on the thread (0 to 1; the columns keep it at any width). */
.steps { --pulse: 8s; --travel: .55; --pulses: 4; }
.steps li:nth-child(2) { --at: .37; }
.steps li:nth-child(3) { --at: .72; }
[data-theme="dark"] .mycelium { filter: drop-shadow(0 0 3px #a9ebc266); }
[data-theme="dark"] .mycelium-pulse { display: inline; stroke: var(--foxfire-core); stroke-width: 3; stroke-dasharray: .09 2; stroke-dashoffset: .09; opacity: 0; animation: thread-pulse var(--pulse) linear var(--pulses); }
/* The pulse crosses the thread in the first 55% (--travel) of each round. */
@keyframes thread-pulse { 0% { stroke-dashoffset: .09; opacity: 0; } 3% { opacity: 1; } 51% { opacity: 1; } 55%, 100% { stroke-dashoffset: -1; opacity: 0; } }
[data-theme="dark"] .step-mark { position: relative; isolation: isolate; }
[data-theme="dark"] .step-mark::before { content: ''; position: absolute; z-index: -1; left: -27px; bottom: -30px; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(closest-side, #a9ebc238, #a9ebc214 55%, transparent); opacity: .45; animation: spore-glow var(--pulse) ease-out calc(var(--pulse) * var(--travel) * var(--at, 0)) var(--pulses); }
@keyframes spore-glow { 0%, 100% { opacity: .45; } 5% { opacity: 1; } 24% { opacity: .45; } }
@media (max-width: 740px) {
  [data-theme="dark"] .step-mark svg { position: relative; }
  [data-theme="dark"] .step-mark::before { display: none; }
  [data-theme="dark"] .steps::before { content: ''; position: absolute; top: 0; bottom: 0; left: -.7px; width: 3px; background: linear-gradient(#e2fbe900, var(--foxfire-core), #e2fbe900) no-repeat 0 -90px / 100% 90px; animation: thread-drop 7s linear var(--pulses); }
  @keyframes thread-drop { 0% { background-position: 0 -90px; } 60%, 100% { background-position: 0 calc(100% + 90px); } }
}

/* The hyphae through the whole page (thread.js draws them, by day and by
   night; --along runs from 0 at the soil to 1 at the tip, for the taper). */
.thread { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hypha-trace { stroke: var(--thread); opacity: var(--hypha-trace); }
.hypha { stroke: color-mix(in srgb, var(--hypha), var(--hypha-root) calc(70% - var(--along) * 70%)); stroke-width: calc((2.7 - 1.7 * var(--along)) * var(--hypha-width)); opacity: var(--hypha-opacity); }
.hypha-glow { display: var(--if-night); stroke: var(--foxfire); stroke-width: calc((2.7 - 1.7 * var(--along)) * 4); opacity: .11; }
.hypha-side { stroke: var(--hypha); opacity: var(--hypha-side); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .3, 1); }
.hypha-faint { opacity: var(--hypha-faint); }
.thread.is-new .hypha-side { transition: none; }
.hypha-stop { stop-color: var(--hypha); }
.hypha-side.hypha-fade { opacity: var(--hypha-opacity); stroke-width: calc(1.9 * var(--hypha-width)); }
.hypha-under, .hypha-under * { opacity: 0; }
@media (max-width: 740px) { [data-theme="dark"] .hypha-faint { opacity: .25; } [data-theme="dark"] .hypha { opacity: 1; } }
.hypha-tip { position: absolute; top: 0; left: 0; z-index: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--hypha-tip); box-shadow: var(--hypha-tip-glow); pointer-events: none; transition: opacity .4s; }

/* The last mushroom waits as a sprout until the hyphae reach it. Then, once
   a session (thread.js), it grows out of the thread the way the mushroom of
   the confirmation page does (page.css). At night (64px) its spots ignite,
   spores rise (garden.js) and the light runs down into the button, which
   stays lit. The second time, or with reduced motion, it is simply there.
   thread.js sets --glow-y (the mushroom) and --drop (down to the button). */
[data-theme="dark"] .closing { position: relative; isolation: isolate; --lit: 3.2s; }
[data-theme="dark"] .closing-mark { width: 64px; height: 72px; overflow: visible; }
.closing-ground, .closing-roots { fill: none; stroke: var(--hypha); stroke-width: .9; stroke-linecap: round; opacity: .85; }
.closing-mark .logo-stem, .closing-mark .logo-cap { transform-box: fill-box; transform-origin: 50% 100%; }
.thread-live .closing-mark:not(.is-grown) .logo-stem { transform: scale(.7, .5); }
.thread-live .closing-mark:not(.is-grown) .logo-cap { transform: translateY(8px) scale(.55, .6); }
[data-theme="dark"].thread-live .closing-mark:not(.is-grown) .i-spot { fill: var(--spot-asleep); }
.thread-live .closing-mark:not(.is-grown) :is(.closing-ground, .closing-roots) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.closing.is-lit:not(.is-settled) .closing-ground { stroke-dasharray: 1; animation: hypha-draw .7s cubic-bezier(.3, .6, .3, 1) both; }
.closing.is-lit:not(.is-settled) .closing-roots { stroke-dasharray: 1; animation: hypha-draw .5s .4s ease-out both; }
.closing.is-lit:not(.is-settled) .logo-stem { animation: closing-stem 1.1s .5s cubic-bezier(.25, .8, .25, 1) both; }
.closing.is-lit:not(.is-settled) .logo-cap { animation: closing-cap 1.1s .5s cubic-bezier(.25, .8, .25, 1) both; }
[data-theme="dark"] .closing.is-lit:not(.is-settled) .closing-mark .i-spot { animation: spot-ignite 1.6s 1.4s ease-out both; }
@keyframes hypha-draw { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; } }
@keyframes closing-stem { from { transform: scale(.7, .5); } }
@keyframes closing-cap { from { transform: translateY(8px) scale(.55, .6); } }
@keyframes spot-ignite { 0% { fill: var(--spot-asleep); } 30% { fill: #fff; } }
/* A glow around the mushroom, and the drop of light that runs down behind
   the heading into the button. */
[data-theme="dark"] .closing::before, [data-theme="dark"] .closing::after { content: ''; position: absolute; z-index: -1; left: 50%; top: var(--glow-y, 60px); border-radius: 50%; translate: -50% -50%; opacity: 0; pointer-events: none; }
[data-theme="dark"] .closing::before { width: 220px; height: 170px; background: radial-gradient(closest-side, #a9ebc233, #a9ebc212 55%, #a9ebc200); }
[data-theme="dark"] .closing::after { width: 76px; height: 76px; background: radial-gradient(closest-side, #f2fff5 0 7%, #cdf7dcaa 18%, #a9ebc240 50%, #a9ebc200); }
[data-theme="dark"] .closing.is-lit::before { opacity: 1; }
.closing.is-lit:not(.is-settled)::before { animation: fade-in 1.5s 1.4s both; }
.closing.is-lit:not(.is-settled)::after { animation: light-drop 1.1s 2.3s cubic-bezier(.2, .6, .35, 1) both; }
@keyframes light-drop { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: translateY(var(--drop, 120px)) scale(1.2, .9); } 100% { opacity: 0; transform: translateY(var(--drop, 120px)) scale(3.2, .7); } }
[data-theme="dark"] .closing.is-lit .button { --button-ring: inset 0 1px 0 #ffffff40, 0 0 0 1px #d7fbe3, 0 0 34px 6px #a9ebc299, 0 0 90px 22px #a9ebc238; filter: brightness(1.14); }
[data-theme="dark"] .closing.is-lit:not(.is-settled) .button { animation: lantern 2s var(--lit) ease-out both; }
@keyframes lantern {
  0% { box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 1px #a9ebc2b3, 0 0 24px 2px #a9ebc259, 0 0 60px 8px #a9ebc21f; filter: none; }
  25% { box-shadow: inset 0 1px 0 #ffffff4d, 0 0 0 2px #c9f5d8, 0 0 44px 12px #a9ebc2b3, 0 0 120px 36px #7fd9a052; filter: brightness(1.25); }
}

/* Nightfall: when the night comes (on a click, or on the first dark visit
   of a session) the moon rises, the stars light up one by one (sky.js), the
   fireflies wake and the spots light up one mushroom after the other. */
.nightfall .garden::after { animation: moon-rise 1.5s cubic-bezier(.2, .7, .2, 1) .15s both; }
.nightfall .garden::before { animation: fade-in 2s ease-out .3s both; }
.nightfall .garden-glow { animation: fade-in 1.6s ease-out .6s both; }
.nightfall .fireflies { animation: fade-in 1.4s ease-out 1s both; }
.nightfall :is(.site-header .logo-mark, .step-mark) .i-spot { animation: spot-wake 1s ease-out var(--wake, .8s) both; }
.nightfall .step-mark { --wake: calc(1.1s + var(--at, 0) * .5s); }
@keyframes moon-rise { from { opacity: 0; translate: 0 18px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes spot-wake { from { fill: var(--spot-asleep); } }

/* Nothing moves where nobody looks (garden.js marks what is off screen). */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

@media (forced-colors: active) {
  .night-sky, .fireflies, .thread, .hypha-tip, .garden-glow, .garden-flare, .garden::before, .spore, .firefly-visit { display: none !important; }
}
/* With reduced motion the night stands still: grown, glowing, no drifting. */
@media (prefers-reduced-motion: reduce) {
  .tt-body, .tt-bite, .tt-rays, .sky-toggle, .hypha-side { transition: none; }
  :is(.garden-glow, .garden::before, .garden::after, .fireflies, .fireflies i, .mycelium-pulse, .step-mark::before, .steps::before, .thread, .hypha-tip, .closing *, .closing::before, .closing::after, .spore, .firefly-visit, .garden-flare, .i-spot) { animation: none !important; }
  .closing .button { transition: none !important; }
  [data-theme="dark"] .fireflies i { opacity: .85; }
  [data-theme="dark"] :is(.mycelium-pulse, .steps::before, .spore, .firefly-visit) { display: none; }
  [data-theme="dark"] .step-mark::before { opacity: .75; }
}


/* "Draait op Mycelium van Hyphae" (zone_parts.go): a quiet line of its own
   under the footer of a zone; paddenstoel has none. */
.site-footer .powered-by { grid-column: 1 / -1; margin: -8px 0 0; font-family: var(--sans); font-size: 12px; font-style: normal; color: var(--muted); text-align: center; }
.site-footer .powered-by a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 740px) { .site-footer .powered-by { order: 4; margin: 0; text-align: left; } }