:root {color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:#071019; color:#edf2f3;}
* {box-sizing:border-box;}
html,body {margin:0; min-height:100%;}
.scene {position:relative; isolation:isolate; min-height:100svh; overflow:hidden; background:radial-gradient(ellipse at 62% 41%,#132630 0%,#071019 67%); display:flex; flex-direction:column; justify-content:space-between;}
#garden {position:absolute; inset:0; width:100%; height:100%; z-index:0; touch-action:pan-y;}
/* Fixed branding stays visible while a short/narrow page scrolls. */
.brand {position:fixed; top:max(16px,env(safe-area-inset-top)); left:max(18px,env(safe-area-inset-left)); z-index:3;}
.brand-link {display:inline-flex; align-items:center; min-height:44px; padding:8px 10px; text-decoration:none; color:inherit; background:#0a1722f5; border-radius:8px;}
.brand-logo {display:block; width:93px; height:auto;}
.brand-mark {font-weight:850; font-size:30px; letter-spacing:-.09em; line-height:1;}
[hidden] {display:none!important;}
.intro {position:relative; z-index:1; max-width:420px; margin:clamp(150px,28vh,300px) clamp(24px,7vw,100px) 6vh; padding:24px 0; pointer-events:none; text-shadow:0 2px 24px #071019;}
.eyebrow {font-size:10px; font-weight:700; letter-spacing:.28em; color:#91c8be;}
h1 {font-weight:450; letter-spacing:-.04em; font-size:clamp(32px,4vw,52px); line-height:1.08; margin:14px 0 18px;}
.intro p:last-child {font-size:clamp(14px,1.5vw,17px); line-height:1.65; max-width:340px; color:#c0d3d2;}
/* Solid HTML backing protects the legal links from all canvas effects. */
.footer {display:flex; gap:20px; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; padding:22px clamp(20px,3vw,42px); background:#08121b; font-size:12px; color:#bfcccd;}
.footer-copy {line-height:1.7;}
.footer-copy span {color:#98aaad;}
.footer nav {display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 20px; align-items:center;}
.footer nav a {display:inline-flex; align-items:center; min-height:44px;}
a {color:inherit; text-underline-offset:3px;}
a:hover {color:white;}
button {font:inherit; color:#d9f4e7; background:#1a3940; border:1px solid #477073; border-radius:100px; min-height:44px; padding:8px 17px; cursor:pointer;}
button:hover {background:#24535a;}
:focus-visible {outline:3px solid #c3ffdf; outline-offset:3px;}
.debug {position:fixed; top:16px; right:16px; max-width:50vw; z-index:4; pointer-events:none; white-space:pre-wrap; font:11px/1.5 monospace; background:#08121be8; padding:8px; color:#d6e9df;}
@media(max-width:620px) {
  .intro {margin-right:24px; margin-left:24px; margin-bottom:4vh;}
  .footer {align-items:flex-start; flex-direction:column; gap:8px;}
  .footer nav {justify-content:flex-start; gap:4px 16px;}
}
@media(max-height:480px) {
  .intro {margin:100px 24px 12px; padding:12px 0;}
  h1 {margin:8px 0;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important; transition:none!important;}
}