/* Seeding landing: one day, scrolled. The page runs from dawn to night through the film's sky
   (store-metadata/film), so each section owns a slice of that sky and the ink that reads on it.
   d- = day ink, k- = dusk ink, n- = night ink. Motion layouts live under .motion (set before paint).
   Light: one sun all day; it has fully set before the one moon comes up over the night valley at the end.
   Dark (the default; the header toggle saves light): the same day seen at night, with a full moon where the sun would be.
   One seed grows through the stages into the tree that bends in the afternoon wind. */

.home {
  --s-top: #E7ECE1;
  --s-mid: #F6E6CC;
  --s-horizon: #F7DDB9;
  --s-morning: #E4ECE4;
  --s-noon: #EEEEE0;
  --s-after: #F1EAD8;
  --s-gold: #F5DCB6;
  --s-dusk0: #EFB394;
  --s-dusk1: #D8918A;
  --s-dusk2: #A27590;
  --s-dusk3: #5C5679;
  --s-night0: #2B3249;
  --s-night1: #161D28;
  --s-night2: #0D120F;

  --r1: #B8C6C8; --r2: #9BB0A8; --r3: #7D9A80; --r4: #6A8D62; --r5: #46683F;
  --rim: rgb(255 248 230 / 0.8);
  --predawn: linear-gradient(to bottom, #A3A8BD 0%, #CDB5B8 55%, #E9C3A6 100%);
  --sun-core: #FFF7E2; --sun-edge: #FDE3B2; --sun-glow: rgb(252 224 172 / 0.75); --sun-halo: rgb(252 224 172 / 0.35);
  --sun-size: clamp(96px, 11vw, 176px);
  --sky-glow: rgb(252 224 172 / 0.7); --sky-halo: rgb(252 224 172 / 0.26);

  /* leaves blown off the tree, in the app's stage art greens (src/utils/stageArt.ts) */
  --p-canopy-hi: #74B57F; --p-glow: rgb(255 255 255 / 0.75);

  --d-ink: #1B2418; --d-ink-2: #3B4638; --d-ink-3: #56634F; --d-accent: #2F6A3F;
  --d-btn: #3A7D4C; --d-btn-ink: #FFFFFF; --d-line: rgb(27 36 24 / 0.22);

  --k-ink: #3A1F25; --k-ink-2: #4E2E33;
  --gold-core: #FFF6E4; --gold-mid: #FBD9A8; --gold-edge: #F3AE86;
  --wind: rgb(255 252 244 / 0.85);

  --n-ink: #EEF3EA; --n-ink-2: #C6D0C2; --n-ink-3: #9AA796; --n-accent: #9FD6A9;
  --n-btn: #7FC48F; --n-btn-ink: #0D1A10; --n-line: rgb(238 243 234 / 0.14);

  /* the valley again at sunset, looking west; the near ridge is the colour the nightfall sky starts from */
  --dk1: #C4848A; --dk2: #B37C8D; --dk3: var(--s-dusk2); --dk-rim: rgb(255 226 190 / 0.85);
  --sun-lift: 0.6;

  /* the valley once more at the end, at night */
  --e1: #223230; --e2: #1A2A24; --e3: #15241D; --e4: #111D17; --e5: #0D1811; --e-rim: rgb(214 226 236 / 0.22);
  --e-horizon: #1B2721;

  /* app tokens the HTML components need beyond the shared ones (palette.ts) */
  --faint: #9DA69A; --relapse: #B7791F; --relapse-ink: #895B17; --relapse-soft: #F6EEE2; --amber-bar: #E3C9A2;
  --hm0: #EBEFE6; --hm1: #CFE0C8; --hm2: #A9C9A2; --hm3: #7FAE7D; --hm4: #3A7D4C;
  --bloom-tint: color-mix(in srgb, #D9668A 7%, var(--surface));

  /* the app cards follow the page's theme, not the device's: light here, the app's own dark theme below */
  --bg: #F4F6F1; --surface: #FFFFFF; --subtle: #EBEFE6; --border: #E1E7DA; --fg: #1B2418; --body: #3B4638; --muted: #637060;
  --primary: #3A7D4C; --primary-ink: #2F6A3F; --primary-soft: #E2EDDC; --on-primary: #FFFFFF; --frame: #1B2418;

  background: var(--s-night2);
  overflow-x: clip;
}

/* Dark: the same day seen at night. The sky runs from late evening into deep night, a full moon stands where the sun
   would and crosses the afternoon in its place, and the app's cards switch to the app's own dark theme */
:root[data-theme="dark"] .home {
  --s-top: #0D1218; --s-mid: #141B26; --s-horizon: #212A3B;
  --s-morning: #121A17; --s-noon: #141C1B; --s-after: #161D21; --s-gold: #1A2130;
  --s-dusk0: #1D2335; --s-dusk1: #20273A; --s-dusk2: #1A2030; --s-dusk3: #161C2A; --s-night0: #131925;

  --r1: #2B3545; --r2: #243039; --r3: #1D2A27; --r4: #17231E; --r5: #111C16;
  --rim: rgb(214 226 236 / 0.22);
  --predawn: transparent;
  --sun-core: #F7F3E6; --sun-edge: #E4E1D2; --sun-glow: rgb(243 238 220 / 0.22); --sun-halo: rgb(243 238 220 / 0.08);
  --sky-glow: rgb(243 238 220 / 0.3); --sky-halo: rgb(243 238 220 / 0.1);
  --gold-core: #F7F3E6; --gold-mid: #EDEADF; --gold-edge: #E4E1D2;
  --p-glow: rgb(214 226 236 / 0.22);

  --d-ink: #EEF3EA; --d-ink-2: #C6D0C2; --d-ink-3: #9AA796; --d-accent: #9FD6A9;
  --d-btn: #7FC48F; --d-btn-ink: #0D1A10; --d-line: rgb(238 243 234 / 0.22);
  --k-ink: #EEF3EA; --k-ink-2: #C6D0C2;
  --wind: rgb(214 226 236 / 0.5);
  --dk1: #262E42; --dk2: #20283A; --dk-rim: rgb(214 226 236 / 0.2);

  --faint: #657063; --relapse: #E0A548; --relapse-ink: #E0A548; --relapse-soft: #423B21; --amber-bar: #6E5A2E;
  --hm0: #1E271E; --hm1: #284030; --hm2: #3A6445; --hm3: #5A9A68; --hm4: #7FC48F;
  --bg: #0D120D; --surface: #161D16; --subtle: #1E271E; --border: #253025; --fg: #E7EDE3; --body: #C2CCBE; --muted: #95A391;
  --primary: #7FC48F; --primary-ink: #8FD09E; --primary-soft: #1C2E20; --on-primary: #0D1A10; --frame: #2B362B;
}
/* the moon's face, on the hero's disc and the afternoon's */
:root[data-theme="dark"] .sun, :root[data-theme="dark"] .sky-disc {
  background:
    radial-gradient(ellipse 30% 22% at 37% 40%, rgb(70 80 72 / 0.14), transparent 72%),
    radial-gradient(ellipse 20% 28% at 63% 57%, rgb(70 80 72 / 0.14), transparent 70%),
    radial-gradient(circle at 50% 45%, var(--sun-core) 0 52%, var(--sun-edge) 100%);
}
:root[data-theme="dark"] .hero-sky .stars { opacity: 0.8; }
:root[data-theme="dark"] .haze { opacity: 0.12; }

.home h1, .home h2, .home h3 { color: inherit; }
.home .btn { border-radius: 999px; padding: 0 28px; }

.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Ccircle cx='370' cy='622' r='1.20' fill='%23FFFFFF' fill-opacity='0.71'/%3E%3Ccircle cx='342' cy='14' r='1.73' fill='%23D6E4FF' fill-opacity='0.64'/%3E%3Ccircle cx='106' cy='525' r='1.31' fill='%23FFFFFF' fill-opacity='0.41'/%3E%3Ccircle cx='563' cy='550' r='0.51' fill='%23FFFFFF' fill-opacity='0.56'/%3E%3Ccircle cx='185' cy='479' r='1.16' fill='%23FFFFFF' fill-opacity='0.65'/%3E%3Ccircle cx='806' cy='445' r='1.07' fill='%23FFFFFF' fill-opacity='0.44'/%3E%3Ccircle cx='530' cy='632' r='1.10' fill='%23FFFFFF' fill-opacity='0.83'/%3E%3Ccircle cx='726' cy='651' r='1.17' fill='%23FFFFFF' fill-opacity='0.66'/%3E%3Ccircle cx='130' cy='92' r='0.72' fill='%23FFFFFF' fill-opacity='0.48'/%3E%3Ccircle cx='345' cy='225' r='0.76' fill='%23FFFFFF' fill-opacity='0.91'/%3E%3Ccircle cx='240' cy='588' r='0.50' fill='%23FFFFFF' fill-opacity='0.72'/%3E%3Ccircle cx='852' cy='222' r='0.54' fill='%23D6E4FF' fill-opacity='0.60'/%3E%3Ccircle cx='82' cy='90' r='1.00' fill='%23FFFFFF' fill-opacity='0.87'/%3E%3Ccircle cx='602' cy='348' r='1.00' fill='%23FFFFFF' fill-opacity='0.88'/%3E%3Ccircle cx='346' cy='196' r='0.50' fill='%23FFE9C8' fill-opacity='0.84'/%3E%3Ccircle cx='718' cy='283' r='0.53' fill='%23FFFFFF' fill-opacity='0.75'/%3E%3Ccircle cx='87' cy='690' r='1.19' fill='%23D6E4FF' fill-opacity='0.56'/%3E%3Ccircle cx='488' cy='71' r='0.50' fill='%23FFFFFF' fill-opacity='0.60'/%3E%3Ccircle cx='526' cy='164' r='0.55' fill='%23FFE9C8' fill-opacity='0.62'/%3E%3Ccircle cx='569' cy='272' r='0.59' fill='%23FFE9C8' fill-opacity='0.46'/%3E%3Ccircle cx='454' cy='605' r='0.52' fill='%23FFE9C8' fill-opacity='0.61'/%3E%3Ccircle cx='483' cy='490' r='1.68' fill='%23FFFFFF' fill-opacity='0.51'/%3E%3Ccircle cx='325' cy='553' r='0.83' fill='%23FFFFFF' fill-opacity='0.62'/%3E%3Ccircle cx='317' cy='457' r='1.01' fill='%23FFFFFF' fill-opacity='0.89'/%3E%3Ccircle cx='662' cy='620' r='0.53' fill='%23FFFFFF' fill-opacity='0.50'/%3E%3Ccircle cx='328' cy='190' r='0.71' fill='%23D6E4FF' fill-opacity='0.45'/%3E%3Ccircle cx='153' cy='385' r='0.77' fill='%23FFFFFF' fill-opacity='0.87'/%3E%3Ccircle cx='239' cy='613' r='0.54' fill='%23FFFFFF' fill-opacity='0.63'/%3E%3Ccircle cx='655' cy='642' r='0.52' fill='%23FFFFFF' fill-opacity='0.67'/%3E%3Ccircle cx='37' cy='448' r='1.53' fill='%23FFFFFF' fill-opacity='0.60'/%3E%3Ccircle cx='189' cy='526' r='0.51' fill='%23FFFFFF' fill-opacity='0.96'/%3E%3Ccircle cx='479' cy='567' r='1.09' fill='%23FFFFFF' fill-opacity='0.66'/%3E%3Ccircle cx='44' cy='3' r='1.19' fill='%23FFFFFF' fill-opacity='0.78'/%3E%3Ccircle cx='587' cy='418' r='1.74' fill='%23D6E4FF' fill-opacity='0.89'/%3E%3Ccircle cx='777' cy='25' r='0.52' fill='%23FFFFFF' fill-opacity='0.49'/%3E%3Ccircle cx='249' cy='510' r='0.55' fill='%23FFFFFF' fill-opacity='0.80'/%3E%3Ccircle cx='608' cy='347' r='1.10' fill='%23FFFFFF' fill-opacity='0.47'/%3E%3Ccircle cx='722' cy='472' r='1.08' fill='%23FFFFFF' fill-opacity='0.87'/%3E%3Ccircle cx='727' cy='626' r='0.75' fill='%23FFFFFF' fill-opacity='0.74'/%3E%3Ccircle cx='327' cy='372' r='0.85' fill='%23FFFFFF' fill-opacity='0.41'/%3E%3Ccircle cx='390' cy='567' r='0.57' fill='%23FFFFFF' fill-opacity='0.53'/%3E%3Ccircle cx='653' cy='410' r='0.81' fill='%23FFFFFF' fill-opacity='0.64'/%3E%3Ccircle cx='718' cy='551' r='0.91' fill='%23FFFFFF' fill-opacity='0.77'/%3E%3Ccircle cx='756' cy='370' r='0.51' fill='%23FFFFFF' fill-opacity='0.85'/%3E%3Ccircle cx='101' cy='620' r='0.72' fill='%23FFFFFF' fill-opacity='0.56'/%3E%3Ccircle cx='58' cy='242' r='1.65' fill='%23FFFFFF' fill-opacity='0.95'/%3E%3Ccircle cx='95' cy='637' r='0.53' fill='%23FFFFFF' fill-opacity='0.56'/%3E%3Ccircle cx='48' cy='615' r='0.62' fill='%23FFFFFF' fill-opacity='0.55'/%3E%3Ccircle cx='221' cy='204' r='0.75' fill='%23FFFFFF' fill-opacity='0.99'/%3E%3Ccircle cx='282' cy='28' r='1.01' fill='%23FFFFFF' fill-opacity='0.39'/%3E%3Ccircle cx='568' cy='453' r='0.59' fill='%23FFE9C8' fill-opacity='0.66'/%3E%3Ccircle cx='381' cy='494' r='0.78' fill='%23FFFFFF' fill-opacity='0.97'/%3E%3Ccircle cx='491' cy='0' r='0.81' fill='%23FFFFFF' fill-opacity='0.37'/%3E%3Ccircle cx='835' cy='191' r='0.66' fill='%23D6E4FF' fill-opacity='0.95'/%3E%3Ccircle cx='614' cy='472' r='0.50' fill='%23FFFFFF' fill-opacity='0.92'/%3E%3Ccircle cx='799' cy='613' r='0.50' fill='%23FFFFFF' fill-opacity='0.57'/%3E%3Ccircle cx='25' cy='589' r='1.19' fill='%23FFFFFF' fill-opacity='0.83'/%3E%3Ccircle cx='96' cy='196' r='0.52' fill='%23FFE9C8' fill-opacity='0.91'/%3E%3Ccircle cx='380' cy='524' r='0.50' fill='%23FFFFFF' fill-opacity='0.39'/%3E%3Ccircle cx='14' cy='305' r='0.60' fill='%23FFFFFF' fill-opacity='0.99'/%3E%3Ccircle cx='700' cy='423' r='0.50' fill='%23FFE9C8' fill-opacity='0.99'/%3E%3Ccircle cx='208' cy='492' r='1.09' fill='%23FFFFFF' fill-opacity='0.54'/%3E%3Ccircle cx='875' cy='97' r='0.60' fill='%23D6E4FF' fill-opacity='0.84'/%3E%3Ccircle cx='702' cy='513' r='0.69' fill='%23FFE9C8' fill-opacity='0.56'/%3E%3C/svg%3E");
  background-size: 900px 700px;
}

/* Header sits on the dawn sky */

.home-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.home-header .brand { color: var(--d-ink); }
.home-header nav { display: flex; align-items: center; gap: 18px; }
.home-header nav a { color: var(--d-accent); white-space: nowrap; }
.theme-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--d-line); background: color-mix(in srgb, var(--surface) 45%, transparent); color: var(--d-ink);
}
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ti-sun, :root[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ti-sun { display: block; }

/* Dawn */

.hero {
  --land-h: clamp(280px, 46vh, 520px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 700px);
  display: flex; flex-direction: column;
  color: var(--d-ink-2);
  background: linear-gradient(to bottom, var(--s-top) 0%, var(--s-mid) 42%, var(--s-horizon) 70%, var(--s-horizon) 100%);
  --focus: var(--d-btn);
}
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-sky .stars { opacity: 0; will-change: transform; }
.predawn { position: absolute; inset: 0; background: var(--predawn); opacity: 0; }
.sun {
  position: absolute; right: 31%; bottom: calc(var(--land-h) * var(--sun-lift));
  width: var(--sun-size); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--sun-core) 0 52%, var(--sun-edge) 100%);
  box-shadow: 0 0 60px 24px var(--sun-glow), 0 0 220px 110px var(--sun-halo);
  will-change: transform;
}

.hero-copy { position: relative; z-index: 5; display: grid; gap: 24px; justify-items: start; padding-top: clamp(104px, 15vh, 148px); padding-bottom: calc(var(--land-h) * 0.66); }
.hero h1 {
  color: var(--d-ink);
  font-size: clamp(2.75rem, 0.9rem + 5.6vw, 6.5rem);
  line-height: 1; letter-spacing: -0.03em; font-weight: 300;
  max-width: 10.5em;
}
.hero .lede { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); max-width: 31rem; }
.hero-actions { margin-top: 4px; }
.hero .small { font-size: 0.9375rem; color: var(--d-ink-3); }
.hline-mask { padding-bottom: 0.14em; margin-bottom: -0.14em; }

.land { position: absolute; left: 0; right: 0; bottom: 0; height: var(--land-h); z-index: 2; pointer-events: none; will-change: transform; }
.ridges { position: absolute; inset: 0; }
/* one composited layer per hill: home.js moves and scales the layer, so nothing repaints while the camera flies in */
.ridges .g { position: absolute; inset: 0; will-change: transform; }
.ridges .rs { display: block; width: 100%; height: 100%; overflow: visible; }
.r1 { fill: var(--r1); } .r2 { fill: var(--r2); } .r3 { fill: var(--r3); } .r4 { fill: var(--r4); } .r5 { fill: var(--r5); }
.r1, .r2, .r3 { stroke: var(--rim); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* the morning light that the valley fades into at the end of the dolly: one even fade, no band crossing the hills */
.hero-veil { display: none; }
.motion .hero-veil {
  display: block; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: var(--s-morning); will-change: opacity;
}

@media (max-width: 879px) {
  .hero { --land-h: max(330px, 88vw); }
  .hero-copy { padding-bottom: 0; }
  .land { position: relative; margin-top: -4vw; }
  .sun { right: 10%; bottom: auto; top: calc(100% - var(--land-h) * 0.98); }
}

/* Morning: the seed grows through the fourteen stages */

.growth { position: relative; color: var(--d-ink-2); background: var(--s-morning); --focus: var(--d-btn); }
.growth-noon { position: absolute; inset: 0; background: var(--s-noon); opacity: 0; pointer-events: none; will-change: opacity; }
.growth-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(72px, 12vh, 128px) 0 clamp(72px, 10vh, 112px); overflow: hidden; }
.growth-head { position: relative; z-index: 1; }
.growth h2 { color: var(--d-ink); font-size: clamp(1.5rem, min(1rem + 2.4vw, 6vh), 3rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 16em; }
.growth-note { color: var(--d-ink-3); font-size: 1rem; }

.sprout { display: none; }
.plant-art { position: relative; width: clamp(120px, 28vh, 360px); aspect-ratio: 1; }
/* the app's stage art, one image per stage; only the current one shows */
.stage-art { position: relative; width: 100%; height: 100%; }
.stage-art img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.stage-art img.is-on { visibility: visible; }
.plant-glow {
  position: absolute; inset: -30% -40% 0; border-radius: 50%; opacity: 0.2; transform: scale(0.7);
  background: radial-gradient(closest-side, var(--p-glow) 0%, transparent 100%);
  will-change: transform, opacity;
}

.ruler { position: relative; --stop: 96px; }
.ruler-track {
  list-style: none; margin: 0; padding: 0 24px 6px;
  display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.ruler-track::-webkit-scrollbar { display: none; }
@media (min-width: 1168px) { .ruler-track { padding-left: calc((100vw - 1120px) / 2 + 24px); } }
.ruler-track li {
  --line-x: 0px; --line-w: var(--stop); --tick-x: 0px; --tick-w: var(--stop);
  position: relative; flex: 0 0 auto; width: var(--stop); display: grid; grid-template-rows: 36px 14px auto; justify-items: center; scroll-snap-align: start;
}
/* each stop is the app's art for that stage, standing on the line */
.ruler-track .emo { align-self: end; width: 34px; height: 34px; margin-bottom: 1px; }
.ruler-track li::after {
  content: ""; grid-row: 2; width: 100%; height: 14px;
  background:
    linear-gradient(var(--d-line), var(--d-line)) center / 2px 14px no-repeat,
    linear-gradient(var(--d-line), var(--d-line)) var(--line-x) 50% / var(--line-w) 2px no-repeat,
    repeating-linear-gradient(to right, transparent 0 calc(var(--stop) / 4 - 1px), var(--d-line) calc(var(--stop) / 4 - 1px) calc(var(--stop) / 4)) var(--tick-x) 50% / var(--tick-w) 6px no-repeat;
}
/* the line is the ground: it runs from the seed to the tree */
.ruler-track li:first-child { --line-x: calc(var(--stop) / 2); --line-w: calc(var(--stop) / 2); --tick-x: calc(var(--stop) / 2); --tick-w: calc(var(--stop) / 2); }
.ruler-track li:last-child { --line-w: calc(var(--stop) / 2); --tick-w: calc(var(--stop) / 2); }
.ruler-track .when { grid-row: 3; margin-top: 10px; font-size: 0.875rem; font-weight: 650; color: var(--d-ink-3); white-space: nowrap; transition: color 200ms; }
.needle { display: none; }

.stage-time {
  color: var(--d-accent); white-space: nowrap;
  font-size: clamp(3.25rem, min(0.8rem + 9.5vw, 12vh), 10.5rem); line-height: 0.9; letter-spacing: -0.045em; font-weight: 300;
  margin-top: 0.08em;
}
.stage-name { margin-top: 10px; font-size: 1.0625rem; font-weight: 650; color: var(--d-ink-3); }

.motion .growth-stage { min-height: 100svh; grid-template-rows: auto 1fr auto auto; gap: clamp(10px, 2vh, 28px); padding-top: clamp(48px, 10vh, 120px); padding-bottom: clamp(20px, 4vh, 64px); }
.motion .sprout { display: grid; justify-items: center; align-content: center; gap: clamp(8px, 1.6vh, 22px); text-align: center; min-height: 0; }
.motion .ruler {
  --stop: clamp(76px, 9vw, 120px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}
.motion .ruler-track { overflow: visible; padding: 0; scroll-snap-type: none; will-change: transform; }
.motion .ruler-track li { grid-template-rows: 46px 14px auto; }
/* in the pinned ruler the stages ahead are faded; the one over the needle comes up to full colour and grows */
.motion .ruler-track .emo { transform-origin: 50% 100%; opacity: 0.5; filter: grayscale(0.6); transition: scale 300ms, opacity 200ms, filter 200ms; }
.motion .ruler-track li.is-on .emo { scale: 1.4; opacity: 1; filter: none; }
.motion .ruler-track li.is-on .when { color: var(--d-ink); }
.motion .needle {
  display: block; position: absolute; left: 50%; top: 53px; width: 14px; height: 17px; translate: -50% -50%;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--d-btn);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--d-btn) 20%, transparent);
}
.motion .growth-note { text-align: center; }
/* a phone on its side: the pinned stage has to fit in under 600px of height, so the heading goes to one line and
   the two quiet lines (stage name, note) step aside */
@media (max-height: 600px) {
  .motion .growth-stage { padding-top: 16px; padding-bottom: 12px; gap: 8px; }
  .motion .growth h2 { font-size: 1.25rem; max-width: none; }
  .motion .plant-art { width: 24vh; }
  .motion .stage-time { font-size: 11vh; }
  .motion .stage-name, .motion .growth-note { display: none; }
}

@media (max-width: 560px) {
  .ruler-track { padding: 0 16px 6px; }
}

/* Afternoon: the app */

.tour {
  position: relative; overflow-x: clip; color: var(--d-ink-2); --focus: var(--d-btn);
  background: linear-gradient(to bottom, var(--s-noon), var(--s-after) 55%, var(--s-gold));
  padding: clamp(80px, 12vh, 140px) 0 clamp(96px, 14vh, 160px);
}
.tour-track { position: relative; z-index: 1; display: grid; gap: 72px; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.tour h2 { color: var(--d-ink); font-size: clamp(2.25rem, 0.9rem + 4.6vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 9.5em; }
.tour-item { display: grid; gap: 28px 56px; align-items: center; grid-template-columns: minmax(0, 390px) minmax(0, 24rem); }
.card-slot { width: min(100%, 390px); }
.tour-copy { display: grid; gap: 12px; }
.tour-copy h3 { color: var(--d-ink); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.08; letter-spacing: -0.025em; }

@media (max-width: 879px) {
  .tour-item { grid-template-columns: none; }
}

/* Golden hour: an urge is wind. The tree bends and holds while the app's Ride the wave timer runs */

.urge {
  --dusk-h: clamp(150px, 26vh, 320px);
  position: relative; overflow: hidden; color: var(--k-ink-2); --focus: var(--k-ink);
  background: linear-gradient(to bottom, var(--s-gold) 0%, var(--s-dusk0) 60%, var(--s-dusk1) 100%);
  padding: clamp(88px, 13vh, 150px) 0 calc(clamp(40px, 6vh, 80px) + var(--dusk-h) * 1.6);
}
.urge-grid { position: relative; z-index: 3; display: grid; gap: 32px; justify-items: start; }
.urge-copy { display: grid; gap: 20px; justify-items: start; max-width: 30rem; }
.eyebrow { color: var(--k-ink-2); font-size: 1.0625rem; font-weight: 750; letter-spacing: 0.01em; margin-bottom: -6px; }
.urge h2 { color: var(--k-ink); font-size: clamp(2.25rem, 0.9rem + 4.6vw, 5.25rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 11em; }
.urge .card-slot { width: min(100%, 390px); }

/* the grown tree stands on the far ridge; its foot is behind the near hills */
.urge-tree {
  position: absolute; z-index: 1; right: 14%; bottom: calc(var(--dusk-h) * 0.5);
  height: min(56svh, 520px); aspect-ratio: 84 / 89; pointer-events: none;
  will-change: transform; /* its own layer: the swaying bunches repaint only the tree, not the whole sky */
}
/* the app's full-year stage art tree; the trunk stands, the bunches of leaves move in the wind */
.tree-art { display: block; width: 100%; height: 100%; overflow: visible; }
.leaf {
  position: absolute; left: 50%; top: 22%; width: 16px; height: 9px; margin: -4px 0 0 -8px; opacity: 0;
  border-radius: 0 100% 0 100%; background: var(--p-canopy-hi); will-change: transform, opacity;
}
.leaf:nth-child(odd) { background: #C9A84E; }
.wind { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.wind i {
  position: absolute; left: 0; height: 2px; width: 180px; border-radius: 2px; opacity: 0;
  background: linear-gradient(to right, transparent, var(--wind) 40%, transparent); will-change: transform, opacity;
}
.wind i:nth-child(1) { top: 16%; width: 220px; } .wind i:nth-child(2) { top: 24%; width: 150px; } .wind i:nth-child(3) { top: 31%; width: 260px; }
.wind i:nth-child(4) { top: 39%; width: 170px; } .wind i:nth-child(5) { top: 46%; width: 230px; } .wind i:nth-child(6) { top: 53%; width: 140px; }
.wind i:nth-child(7) { top: 60%; width: 200px; } .wind i:nth-child(8) { top: 67%; width: 160px; }

@media (max-width: 879px) {
  .urge { padding-bottom: calc(clamp(40px, 6vh, 80px) + var(--dusk-h) * 0.5 + min(42svh, 360px) + 24px); }
  .urge-tree { right: 50%; translate: 50% 0; height: min(42svh, 360px); }
}

/* the same valley rises at the bottom of golden hour */
.dusk-land { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--dusk-h); z-index: 2; pointer-events: none; }
.dusk-ridges { display: block; width: 100%; height: 100%; overflow: visible; }
.dr1 { fill: var(--dk1); stroke: var(--dk-rim); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.dr2 { fill: var(--dk2); }
.dr3 { fill: var(--dk3); }

/* Wide screens with motion: the afternoon and golden hour are one pinned scene under one sky. The sun crosses left
   to right while the app goes by and is down before the wind comes up. home.js sets .is-scene and moves everything;
   the sun lives outside both sections so neither can clip its glow. */

.aft-gold, .aft-dusk, .sky-sun { display: none; }
.afternoon.is-scene { position: relative; height: 100svh; overflow-x: clip; background: var(--s-noon); }
.is-scene .aft-gold, .is-scene .aft-dusk { display: block; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
.is-scene .aft-gold { background: var(--s-gold); }
.is-scene .aft-dusk { background: linear-gradient(to bottom, var(--s-gold) 0%, var(--s-dusk0) 60%, var(--s-dusk1) 100%); }
.is-scene .sky-sun {
  --disc: 320px;
  display: block; position: absolute; left: 0; top: 0; z-index: 1;
  width: var(--disc); height: var(--disc); margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.sky-body { position: absolute; inset: 0; }
.sky-halo { position: absolute; inset: -110%; border-radius: 50%; background: radial-gradient(circle, var(--sky-glow) 0%, var(--sky-halo) 26%, transparent 60%); }
.sky-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--sun-core) 0 52%, var(--sun-edge) 100%); }
.sky-gold { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 50% 44%, var(--gold-core) 0%, var(--gold-mid) 55%, var(--gold-edge) 100%); }

.is-scene .tour { position: absolute; inset: 0; z-index: 2; padding: 0; background: none; overflow: visible; }
.is-scene .tour-track {
  display: flex; align-items: center; gap: 0; height: 100%; width: max-content; max-width: none; margin: 0;
  padding: 0 0 0 max(24px, calc((100vw - 1120px) / 2 + 24px)); will-change: transform;
}
.is-scene .tour-track::after { content: ""; flex: 0 0 12vw; }
.is-scene .tour-intro { flex: 0 0 auto; width: min(52vw, 760px); padding-right: 6vw; }
.is-scene .tour-item { flex: 0 0 auto; grid-template-columns: auto minmax(0, 21rem); padding-right: 10vw; }
.is-scene .card-slot { width: clamp(330px, 46svh, 420px); }
.is-scene .urge-copy { max-width: 40rem; }
.is-scene .urge { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; padding: 0 0 calc(var(--dusk-h) * 0.8); background: none; overflow: visible; }

/* Dusk into night: the sky after the sunset darkens and the first stars come out */

.nightfall {
  position: relative; overflow: hidden; height: clamp(300px, 56vh, 600px);
  background: linear-gradient(to bottom, var(--s-dusk2) 0%, var(--s-dusk3) 30%, var(--s-night0) 64%, var(--s-night1) 100%);
}
.stars-dusk { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 80%); mask-image: linear-gradient(to bottom, transparent 20%, #000 80%); }

/* Late night: privacy. A slip of everything Seeding sends: every line is zero. Night in both themes */

.privacy {
  position: relative; overflow: hidden; color: var(--n-ink-2); --focus: var(--n-accent);
  background: linear-gradient(to bottom, var(--s-night1), var(--s-night2) 40%);
  padding: clamp(110px, 18vh, 200px) 0 clamp(72px, 12vh, 140px);
}
.privacy > .wrap { position: relative; z-index: 1; }
.privacy a { color: var(--n-accent); }
/* faint stars that fade in under the night's lights and out again where the ending's sky takes over */
.stars-late { opacity: 0.5; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 60%, transparent 100%); }
.ending-moon {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 22% at 37% 40%, rgb(70 80 72 / 0.14), transparent 72%),
    radial-gradient(ellipse 20% 28% at 63% 57%, rgb(70 80 72 / 0.14), transparent 70%),
    radial-gradient(circle at 50% 45%, #F7F3E6 0 52%, #E4E1D2 100%);
  box-shadow: 0 0 30px 10px rgb(243 238 220 / 0.26), 0 0 90px 40px rgb(243 238 220 / 0.09);
}
.privacy h2 { color: var(--n-ink); font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.03em; }

.slip-stage { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 30rem); align-items: center; justify-content: space-between; gap: 48px 64px; }
.slip-copy { display: grid; gap: 18px; align-content: start; }
.slip {
  margin: 0; padding: clamp(26px, 3.6vw, 40px); border-radius: 6px; rotate: 1.5deg;
  background: #121A14; border: 1px solid var(--n-line); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.9);
  color: var(--n-ink-2); font: 500 1rem/1.4 ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.slip figcaption {
  display: grid; justify-items: center; gap: 8px; padding-bottom: 24px; text-align: center;
  border-bottom: 1px dashed rgb(238 243 234 / 0.24); color: var(--n-ink-3); font-size: 0.8125rem; letter-spacing: 0.24em;
}
.slip figcaption span { font-size: 0.75rem; letter-spacing: 0.16em; }
.slip dl { margin: 10px 0; }
.slip dl div { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: end; gap: 10px; padding: 12px 0; }
/* dotted leaders run from each item to its zero */
.slip dl div::after { content: ""; grid-area: 1 / 2; margin-bottom: 0.3em; border-bottom: 2px dotted rgb(238 243 234 / 0.2); }
.slip dt { grid-area: 1 / 1; }
.slip dd { grid-area: 1 / 3; margin: 0; color: var(--n-ink); }
.slip-total { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px dashed rgb(238 243 234 / 0.24); color: var(--n-ink); font-size: 1.125rem; letter-spacing: 0.1em; }
.slip-total span:last-child { color: var(--n-accent); }
.slip-foot { margin-top: 28px; text-align: center; color: var(--n-ink-3); font-size: 0.75rem; letter-spacing: 0.2em; }
@media (max-width: 879px) {
  .slip-stage { grid-template-columns: minmax(0, 1fr); }
  .slip { rotate: 0.8deg; }
}

/* Still night: questions, answered. Plain details elements, so every answer opens without the script */

.faq {
  position: relative; color: var(--n-ink-2); --focus: var(--n-accent);
  background: var(--s-night2);
  padding: clamp(40px, 8vh, 96px) 0 clamp(64px, 10vh, 120px);
}
.faq-grid { display: grid; gap: 28px 64px; }
.faq h2 { color: var(--n-ink); font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 300; }
.faq h2 b { display: block; font-weight: 900; color: var(--n-accent); }
.faq-list { border-top: 1px solid var(--n-line); }
.faq details { border-bottom: 1px solid var(--n-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 14px 0;
  list-style: none; cursor: pointer; color: var(--n-ink); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 800;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 18px; height: 18px; transition: rotate 200ms;
  background: linear-gradient(var(--n-accent), var(--n-accent)) center / 100% 2px no-repeat, linear-gradient(var(--n-accent), var(--n-accent)) center / 2px 100% no-repeat;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 48px 22px 0; }
@media (min-width: 880px) {
  .faq-grid { grid-template-columns: 5fr 7fr; align-items: start; }
}

/* Night: you, then five thousand more, just before the ending. Tap the sky and the lights answer */

.night {
  position: relative; overflow: hidden; color: var(--n-ink-2); --focus: var(--n-accent);
  background: var(--s-night2);
}
.lights { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.night-inner {
  position: relative; z-index: 1; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding-top: 56px; padding-bottom: 56px;
}
.count-block { display: grid; justify-items: center; }
.you { position: relative; display: inline-grid; justify-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 700; color: var(--n-accent); }
.you::before {
  content: ""; position: absolute; left: 50%; top: 15px; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: radial-gradient(circle, rgb(143 208 158 / 0.36), transparent 64%);
  animation: you-breathe 10s ease-in-out infinite;
}
/* a point of light, not a drawn star: a white core, a soft glow and thin rays that fade out, like the night's brightest lights */
.you-star { position: relative; width: 64px; height: 64px; margin: -17px 0; overflow: visible; animation: you-breathe 10s ease-in-out infinite; }
/* the app's breath: 4 s in, 6 s out */
@keyframes you-breathe { 0%, 100% { transform: scale(0.9); } 40% { transform: scale(1.1); } }
.count { display: grid; justify-items: center; margin-top: clamp(14px, 3vh, 28px); }
.count-num { display: inline-flex; align-items: flex-start; }
.count-n { color: var(--n-ink); font-size: clamp(4.5rem, 1rem + 14vw, 12.5rem); font-weight: 250; line-height: 0.88; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.count-plus { color: var(--n-accent); font-size: clamp(2.6rem, 0.6rem + 8vw, 7rem); font-weight: 300; line-height: 1; margin: 0.06em 0 0 0.04em; }
.count-sub { margin-top: 10px; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); font-weight: 650; }
.alone { margin-top: clamp(14px, 3vh, 26px); color: var(--n-accent); font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; }

/* The ending: the camera settles back in the valley from the dawn, at night. The footer is the ground */

.ending {
  --land-e: clamp(190px, 34vh, 380px);
  position: relative; overflow: hidden; color: var(--n-ink-2); --focus: var(--n-accent);
  min-height: max(100svh, 620px); display: grid; align-content: center;
  background: linear-gradient(to bottom, var(--s-night2) 0%, var(--s-night2) 30%, var(--e-horizon) 80%);
}
/* fades in from the top edge, where the night's lights have thinned out, so the two skies meet without a seam */
.ending-stars { opacity: 0.6; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, transparent 68%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, transparent 68%); }
/* on the right, where the sun went down */
.ending-moon { display: block; right: 14%; top: 18%; width: clamp(34px, 3.6vw, 52px); }
.ending-copy {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center;
  padding-top: clamp(72px, 12vh, 140px); padding-bottom: calc(var(--land-e) * 0.8);
}
.ending h2 { color: var(--n-ink); font-size: clamp(2rem, 1rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; }
.ending-copy p { max-width: 34rem; }
.ending-copy .actions { justify-content: center; margin-top: 10px; }
.ending .btn { background: var(--n-btn); color: var(--n-btn-ink); }
.coffee { color: var(--n-accent); font-weight: 650; }
.ending-land { position: absolute; left: 0; right: 0; bottom: 0; height: var(--land-e); z-index: 1; pointer-events: none; }
.ending-land svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.e1 { fill: var(--e1); stroke: var(--e-rim); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.e2 { fill: var(--e2); } .e3 { fill: var(--e3); } .e4 { fill: var(--e4); } .e5 { fill: var(--e5); }

.ending-foot { margin-top: 0; border-top: 0; background: var(--e5); }
.ending-foot .wrap { justify-content: center; text-align: center; padding-top: 6px; padding-bottom: 36px; color: var(--n-ink-3); }
.ending-foot .note { flex-basis: auto; }
.ending-foot a { color: var(--n-ink-2); }

.home :focus-visible { outline-color: var(--focus, var(--primary)); }

/* Intro: hidden until GSAP takes over, shown anyway after 3.5 s in case the script never runs */
.motion [data-intro] { visibility: hidden; animation: intro-safety 0s 3.5s forwards; }
@keyframes intro-safety { to { visibility: visible; } }
/* The fades that need no script run in CSS, so the first paint is already their starting frame (no snap on reload) */
.motion .predawn { animation: predawn-lift 2.8s cubic-bezier(0.45, 0, 0.55, 1) both; }
.motion .hero-sky .stars { animation: fade-in 2.4s 0.2s ease-in-out backwards; }
.motion .home-header { animation: fade-in 1s 1.4s ease-out backwards; }
@keyframes predawn-lift { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .you::before, .you-star { animation: none; }
}

/* App components: drawn from the app's own cards and tokens, standing in for screenshots */

.ui-card {
  width: 100%; max-width: 390px; padding: 22px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--border); color: var(--body);
  font-size: 15px; line-height: 1.35; text-align: left;
  box-shadow: 0 1px 2px rgb(27 36 24 / 0.05), 0 30px 60px -32px rgb(27 36 24 / 0.42);
}
.ui-card b { font-weight: 800; }
.ui-card p { margin: 0; }

.timer-card { background: var(--bloom-tint); }
.tc-stage { color: var(--fg); font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
.tc-line { margin-top: 4px; color: var(--primary-ink); font-size: 14px; }
.tc-clock { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; margin-top: 18px; text-align: center; }
.tc-clock b { display: block; color: var(--fg); font-size: clamp(28px, 2.4vw, 36px); line-height: 1; font-variant-numeric: tabular-nums; }
.tc-clock div:first-child b { color: var(--primary-ink); }
.tc-clock span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.tc-clock i { width: 4px; height: 14px; margin-top: 9px; background: radial-gradient(circle, var(--faint) 0 1.7px, transparent 2.2px) 0 0 / 4px 7px repeat-y; }
.tc-path { position: relative; list-style: none; display: flex; justify-content: space-between; margin: 20px 0 0; padding: 0; }
.tc-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 15px; height: 2px; background: linear-gradient(to right, var(--primary) 50%, var(--border) 50%); }
.tc-path li { position: relative; z-index: 1; width: 20%; display: grid; justify-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.tc-path span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); }
.tc-path img { display: block; width: 26px; height: 26px; }
.tc-path .is-later img { opacity: 0.35; }
.tc-path .is-done span { border-color: var(--primary); }
.tc-path .is-now { color: var(--primary-ink); font-weight: 800; }
.tc-path .is-now span { width: 40px; height: 40px; margin-top: -4px; border: 2px solid var(--primary); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent); }
.tc-path .is-now img { width: 32px; height: 32px; }
.tc-next { margin-top: 16px; text-align: center; font-size: 14px; }
.tc-next b { color: var(--primary-ink); }

.wave-card { padding-bottom: 18px; }
.wc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wc-title { color: var(--fg); font-size: 18px; font-weight: 800; }
.wc-time { color: var(--fg); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wc-sub { margin-top: 4px; font-size: 14px; }
.wc-curve { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.wc-track { fill: none; stroke: var(--border); stroke-width: 3; stroke-linecap: round; }
.wc-done { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; }
.wc-dot { fill: var(--primary); }
.wc-won {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-ink); font-size: 14px; font-weight: 800;
  transition: opacity 300ms, translate 300ms;
}
.wc-won span { font-family: var(--emoji); }
.wc-won.is-off { opacity: 0; translate: 0 6px; }

.hc-garden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hc-garden li {
  display: grid; grid-template-rows: 112px auto auto; justify-items: center; padding-bottom: 6px;
  color: var(--muted); font-size: 11.5px; border-radius: 12px 12px 0 0;
  background: linear-gradient(var(--border), var(--border)) 0 112px / 100% 2px no-repeat;
}
/* each plant is its stage art on a stem, as in the app's garden */
.hc-garden li span { align-self: end; display: flex; flex-direction: column; align-items: center; }
.hc-garden img { position: relative; z-index: 1; display: block; width: 24px; height: 24px; margin-bottom: -2px; border-radius: 50%; }
.hc-garden i { display: block; width: 3px; height: calc(var(--h) * 1.75px); border-radius: 2px; background: var(--primary); transform-origin: 50% 100%; }
.hc-garden b { margin-top: 7px; color: var(--fg); font-size: 13px; }
.hc-garden .is-now { background-color: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.hc-garden .is-now i { background: repeating-linear-gradient(to top, var(--primary) 0 5px, transparent 5px 9px); }
/* the current streak is also the best one: the app rings the best plant in gold */
.hc-garden .is-now img { box-shadow: 0 0 0 2px #E6BE5E; }
.hc-garden .is-now b { color: var(--primary-ink); }
.hc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 18px; font-size: 14px; }
.hc-head p:first-child { color: var(--fg); font-weight: 800; }
.hc-head p:last-child { color: var(--muted); }
.hc-grid { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; gap: 3px; margin-top: 12px; }
.hc-grid i { aspect-ratio: 1; border-radius: 3px; background: var(--hm0); }
.hc-grid .l1 { background: var(--hm1); } .hc-grid .l2 { background: var(--hm2); } .hc-grid .l3 { background: var(--hm3); } .hc-grid .l4 { background: var(--hm4); }
.hc-grid .rel { background: transparent; box-shadow: inset 0 0 0 1.5px var(--relapse); }
.hc-grid .later { visibility: hidden; }
.hc-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.hc-legend i { width: 11px; height: 11px; border-radius: 3px; }
.hc-legend .l1 { background: var(--hm1); } .hc-legend .l2 { background: var(--hm2); } .hc-legend .l3 { background: var(--hm3); } .hc-legend .l4 { background: var(--hm4); }
.hc-legend > span:first-child { margin-right: 2px; }
.hc-legend > i + span { margin-left: 2px; }
.hc-rel { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.hc-rel i { box-shadow: inset 0 0 0 1.5px var(--relapse); }

.ic-title { color: var(--fg); font-size: 15px; font-weight: 800; }
.ic-week { list-style: none; margin: 10px 0 20px; padding: 0; height: 118px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ic-week li { display: grid; justify-items: center; align-content: end; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.ic-week b { font-size: 11px; font-weight: 700; }
.ic-week i { width: 100%; height: calc(var(--v) * 34px + 3px); border-radius: 999px 999px 5px 5px; background: var(--amber-bar); transform-origin: 50% 100%; }
.ic-week .is-peak { color: var(--fg); }
.ic-week .is-peak i { background: var(--relapse); }
.ic-tod { list-style: none; margin: 4px 0 0; padding: 0; }
.ic-tod li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) 1.2em; align-items: center; gap: 12px; margin-top: 10px; color: var(--fg); font-size: 13.5px; font-weight: 700; }
.ic-tod small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.ic-tod i { position: relative; height: 12px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.ic-tod i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 20%); border-radius: inherit; background: var(--amber-bar); transform-origin: 0 50%; scale: var(--grow, 1) 1; }
.ic-tod b { text-align: right; color: var(--muted); }
.ic-tod .is-peak { color: var(--relapse-ink); }
.ic-tod .is-peak i::after { background: var(--relapse); }
.ic-tod .is-peak b { color: var(--relapse-ink); }
.ic-call { margin-top: 26px; padding: 12px 14px; border-radius: 14px; background: var(--relapse-soft); color: var(--relapse-ink); font-size: 13.5px; }