:root{color-scheme:dark;font-family:"VP Manrope",Arial,sans-serif;background:#222a20;color:#fffaf1}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
.garden{position:relative;isolation:isolate;height:100vh;height:100dvh;overflow:hidden;background:#242d22}
.garden-surface,.garden-surface canvas,.garden-shade{position:absolute;inset:0;width:100%;height:100%}
.garden-surface{touch-action:pinch-zoom;outline:none}
.garden-surface:focus-visible{outline:1px solid #fff8;outline-offset:-4px}
.garden-surface canvas{display:block}
.garden-surface canvas[hidden]{display:none}
.garden-brand{position:absolute;top:max(23px,env(safe-area-inset-top));left:max(26px,env(safe-area-inset-left));width:156px;filter:drop-shadow(0 2px 10px #1118);pointer-events:none}
.garden-shade{pointer-events:none;background:linear-gradient(0deg,#11170fd9 0%,#11170f68 17%,transparent 43%),linear-gradient(180deg,#151c1263,transparent 21%)}
.garden-caption{position:absolute;left:max(clamp(26px,5vw,84px),env(safe-area-inset-left));bottom:max(111px,calc(90px + env(safe-area-inset-bottom)));max-width:min(560px,calc(100vw - 52px));pointer-events:none;text-shadow:0 2px 18px #1119}
.garden-index{font-size:.65rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:#f1e8d3;margin:0 0 .55rem}
.garden-title{margin:0;font:400 clamp(2rem,5vw,4.15rem)/.99 Georgia,serif;letter-spacing:-.043em;text-wrap:balance}
.garden-detail{margin:.62rem 0 0;color:#f4efdf;font-size:clamp(.83rem,1.35vw,1.02rem);line-height:1.44;text-wrap:balance}
.garden-dock{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(260px,calc(100vw - 44px));height:57px;border:1px solid #fff6;border-radius:999px;display:flex;align-items:center;gap:17px;padding:5px 6px 5px 19px;background:#22271e68;box-shadow:inset 0 1px 2px #fff6,0 6px 30px #0a100e55;backdrop-filter:blur(9px) saturate(1.2)}
.garden-progress{flex:1;min-width:0;height:3px;appearance:none;border:0;border-radius:10px;background:#fff4;color:#f6efd8}
.garden-progress::-webkit-progress-bar{background:#fff4;border-radius:10px}
.garden-progress::-webkit-progress-value{background:#f6efd8;border-radius:10px}
.garden-progress::-moz-progress-bar{background:#f6efd8;border-radius:10px}
.garden-menu{font-family:inherit;font-size:.75rem;font-weight:650;border:1px solid #fff5;border-radius:999px;height:44px;padding:0 18px;display:flex;gap:7px;align-items:center;background:#fff2;color:inherit;cursor:pointer}
.garden-menu svg,.garden-panel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.garden-menu:focus-visible{outline:2px solid #fff;outline-offset:2px}
.garden-panel{width:min(470px,calc(100vw - 28px));max-height:min(70dvh,590px);margin:auto;padding:22px 24px;overflow:auto;color:#fffaf1}
.garden-panel header{display:flex;justify-content:space-between;gap:14px;align-items:center}
.garden-panel h2{margin:0;font:400 clamp(1.42rem,5vw,1.8rem)/1.1 Georgia,serif}
.garden-panel p,.garden-panel dl{font-size:.85rem;line-height:1.48}
.garden-panel dt{font-weight:700}
.garden-panel dd{margin:0;color:#e1dfd5}
.garden-panel dl div+div{margin-top:.7rem}
.garden-panel .garden-credit{font-size:.71rem;color:#d0cbbd}
.garden-fallback{position:absolute;inset:23% 11% auto;margin:0;font-size:1rem;line-height:1.6}
@media(max-width:600px){.garden-brand{width:128px;top:max(18px,env(safe-area-inset-top));left:20px}.garden-caption{left:22px;bottom:max(102px,calc(87px + env(safe-area-inset-bottom)));max-width:calc(100vw - 44px)}.garden-title{font-size:clamp(1.9rem,8.8vw,3rem)}.garden-shade{background:linear-gradient(0deg,#11170feb,transparent 45%),linear-gradient(180deg,#151c1266,transparent 18%)}}
@media(max-height:490px){.garden-brand{width:110px;top:12px}.garden-caption{bottom:70px}.garden-title{font-size:1.8rem}.garden-dock{bottom:9px;height:51px}}