:root{--zc-background:#eeefe2;--zc-ink:#354b35;--zc-muted:#6b7861;--zc-surface:#e1e7d6;--zc-border:#c6ceba;--zc-accent:#4d6d3e;--zc-accent-ink:#f4f0d9;--zc-light:#f3efce;--zc-caption:#233d2a;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px Arial,sans-serif}main{max-width:1120px;margin:auto;padding:26px 32px}header{display:flex;justify-content:space-between;gap:14px;font-size:10px;color:var(--zc-muted)}.eyebrow{font-size:9px;letter-spacing:.18em;line-height:1.8}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:27px 0 23px}.heading .eyebrow{margin:0 0 6px}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.04em}h1{font-size:49px;margin:0}.heading>p{font:italic 14px/1.8 Georgia,serif;color:var(--zc-muted)}.scene{height:550px;position:relative;overflow:hidden;border-radius:120px 120px 18px 18px;border:1px solid var(--zc-border);box-shadow:0 15px 35px color-mix(in srgb,var(--zc-ink) 10%,transparent)}canvas{width:100%;height:100%;display:block;cursor:pointer;touch-action:pan-y}.scene-caption{position:absolute;top:28px;left:20px;right:20px;text-align:center;pointer-events:none;color:var(--zc-light);text-shadow:0 1px 10px var(--zc-caption)}.scene-caption h2{font-size:30px;margin:5px 0}.scene-caption .eyebrow{font-size:8px}#activity{position:absolute;left:25px;bottom:23px;color:var(--zc-light);font-size:10px;pointer-events:none}.controls{text-align:center;margin:20px 0 24px}.controls>p{font-size:12px;color:var(--zc-muted);line-height:1.7}.actions,.secondary{display:flex;justify-content:center;gap:10px}.secondary{margin-top:10px}button{min-height:46px;padding:12px 20px;border:1px solid var(--zc-border);border-radius:8px;font:inherit;background:var(--zc-surface);color:var(--zc-ink);cursor:pointer}#walk{background:var(--zc-accent);color:var(--zc-accent-ink);min-width:230px}button:disabled{opacity:.55;cursor:default}button:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.controls .note{font-size:10px}.journey{border-top:1px solid var(--zc-border);padding-top:18px}.journey>div{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--zc-muted)}progress{width:100%;height:7px;margin-top:15px;accent-color:var(--zc-accent)}.journey p,#status{font-size:11px;line-height:1.7;color:var(--zc-muted)}#status{min-height:22px}footer{font-size:9px;color:var(--zc-muted)}@media(max-width:600px){main{padding:16px}header{font-size:8px}.eyebrow{font-size:8px}.heading{display:block;margin:23px 0 18px}h1{font-size:39px}.heading>p{font-size:12px;margin:8px 0}.heading>p br{display:none}.scene{height:440px;border-radius:88px 88px 15px 15px}.scene-caption{top:30px;left:16px;right:16px}.scene-caption h2{font-size:24px}.actions{display:grid;grid-template-columns:1.7fr 1fr;gap:8px}#walk{min-width:0}button{font-size:12px;padding:11px 10px}.secondary button{flex:1}.controls>p{font-size:11px}.journey>div{font-size:10px}#activity{left:19px;bottom:20px}}
/* The grove reads as a long path receding through an opening in the trees. */
body{background:radial-gradient(ellipse at 50% -10%,var(--zc-soft),transparent 58%),var(--zc-background)}
header{border-bottom:1px solid var(--zc-border);padding-bottom:13px;text-transform:uppercase}
.heading{margin:25px 0 19px;align-items:end}
.heading>p{max-width:235px;border-left:1px solid var(--zc-border);padding-left:19px}
.scene{height:min(65vw,630px);min-height:480px;border-radius:46% 46% 12px 12px / 21% 21% 12px 12px;outline:9px solid color-mix(in srgb,var(--zc-surface) 70%,transparent);outline-offset:-10px;box-shadow:0 20px 55px color-mix(in srgb,var(--zc-ink) 20%,transparent)}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 72% at 50% 44%,transparent 52%,color-mix(in srgb,var(--zc-ink) 29%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--zc-ink) 18%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,var(--zc-ink) 31%,transparent))}
.scene-caption{top:38px;text-shadow:0 2px 12px var(--zc-ink)}
.scene-caption h2{font-size:clamp(30px,3vw,43px);line-height:1.12}
#activity{z-index:1;left:32px;bottom:30px;letter-spacing:.12em;text-transform:uppercase}
.controls{margin:26px auto 28px;max-width:740px}
.controls>p:first-child{font:italic 17px/1.5 Georgia,serif;color:var(--zc-ink)}
.actions button{border-radius:999px;min-height:54px;transition:transform .2s,background .2s}
.actions button:active,.secondary button:active{transform:scale(.98)}
.secondary button{border-radius:999px;background:transparent}
.journey{position:relative;padding-top:27px;border-top:1px solid var(--zc-border)}
.journey::before{content:"THE PATH / 01";position:absolute;top:-19px;left:0;padding:0 9px 0 0;background:var(--zc-background);font-size:9px;letter-spacing:.17em;color:var(--zc-muted)}
progress{height:9px;border-radius:99px;overflow:hidden}
@media(max-width:600px){main{padding:18px 16px 24px}.heading{margin:20px 0 18px}.heading>p{border:0;padding:0;max-width:none}.scene{height:510px;min-height:0;border-radius:43% 43% 11px 11px / 14% 14% 11px 11px;outline-width:6px;outline-offset:-7px}.scene-caption{top:31px}.scene-caption h2{font-size:26px}.controls{margin:19px 0 25px}.controls>p:first-child{font-size:15px}.actions button{min-height:48px}#activity{left:20px;bottom:21px}.journey::before{background:var(--zc-background)}}
@media(prefers-reduced-motion:reduce){.actions button,.secondary button{transition:none!important}}
.scene{height:clamp(360px,48vh,480px);min-height:0}
@media(max-width:600px){main{padding:12px 14px 20px}.heading{margin:11px 0 12px}.heading>p{margin:3px 0;font-size:11px}.scene{height:320px;min-height:0}.scene-caption{top:17px}.scene-caption h2{font-size:23px}.controls{margin:12px 0 20px}.controls>p:first-child{margin:0 0 8px;font-size:13px}.secondary{margin-top:7px}}
[data-motion=reduced] .actions button,[data-motion=reduced] .secondary button{transition:none!important}

/* Round two: a vertical forest corridor beside a narrow trail rail. */
:root{--zc-grove-paper:#e7e7d3;--zc-grove-deep:#1e412e;--zc-grove-line:#9cae8e}
body{background:repeating-linear-gradient(90deg,transparent 0 37px,color-mix(in srgb,var(--zc-grove-line) 7%,transparent) 38px 39px),var(--zc-grove-paper)}
main{max-width:1400px;display:grid;grid-template-columns:minmax(215px,270px) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto;gap:0 28px;padding:17px 22px 25px}
header{grid-column:1/-1;grid-row:1;padding:6px 0 12px}
.heading{grid-column:1;grid-row:2;margin:0;padding:25px 3px 0;display:block}
.heading h1{font:500 clamp(41px,4vw,57px)/1.02 "Segoe UI",Arial,sans-serif;letter-spacing:-.055em;color:var(--zc-grove-deep)}
.heading>p{border:0;padding:0;margin:20px 0 0;max-width:20ch;color:var(--zc-grove-deep)}
.scene{grid-column:2;grid-row:2/5;height:clamp(560px,75vh,760px);min-height:0;border:0;outline:0;border-radius:0;box-shadow:0 18px 42px color-mix(in srgb,var(--zc-grove-deep) 23%,transparent)}
.scene::before{content:"";position:absolute;z-index:2;inset:14px;border:1px solid color-mix(in srgb,var(--zc-light) 38%,transparent);pointer-events:none}
.scene::after{background:radial-gradient(ellipse at 50% 57%,transparent 29%,color-mix(in srgb,var(--zc-grove-deep) 34%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--zc-grove-deep) 28%,transparent),transparent 31%,transparent 69%,color-mix(in srgb,var(--zc-grove-deep) 33%,transparent))}
.scene-caption{top:33px;text-align:left;left:38px;right:20px}
.scene-caption h2{font-size:clamp(30px,3vw,42px);max-width:14ch}
#activity{left:39px;bottom:30px}
.controls{grid-column:1;grid-row:3;align-self:start;text-align:left;margin:0;padding:19px 3px 0;max-width:none}
.controls>p:first-child{font:15px/1.4 Georgia,serif;color:var(--zc-grove-deep);margin:0 0 15px}
.actions,.secondary{display:grid;grid-template-columns:1fr;gap:7px}
.actions button,.secondary button{width:100%;border-radius:2px;text-align:left;min-height:44px}
#walk{min-width:0;background:var(--zc-grove-deep);color:var(--zc-grove-paper)}
.secondary{margin-top:7px}
.controls .note{font-size:10px;line-height:1.5}
.journey{grid-column:1;grid-row:4;margin:25px 3px 0;padding-top:20px;border-color:var(--zc-grove-line)}
.journey::before{background:var(--zc-grove-paper)}
.journey>div{display:block}
.journey>div span{display:block;margin:3px 0}
#status{grid-column:1/-1;grid-row:5}
footer{grid-column:1/-1;grid-row:6}
@media(max-width:700px){main{display:block;padding:9px 13px 20px}header{padding:4px 0 6px}.heading{padding:8px 0 9px}.heading h1{font-size:35px}.heading>p{max-width:none;margin:4px 0;font-size:11px}.scene{height:315px}.scene::before{inset:7px}.scene-caption{top:16px;left:17px}.scene-caption h2{font-size:23px}.controls{padding:9px 0 0}.controls>p:first-child{margin:0 0 7px;font-size:12px}.actions{grid-template-columns:1.7fr 1fr}.actions button,.secondary button{text-align:center}.secondary{grid-template-columns:1fr 1fr}.controls .note{margin:7px 0}.journey{margin:13px 0 0;padding-top:15px}.journey>div{display:flex}.journey>div span{margin:0}#activity{left:17px;bottom:17px}}
@media(max-width:700px){.journey::before{display:none}}
body,header,.heading .eyebrow,.controls .note,.journey,.journey>div,.journey p,#status,footer{color:var(--zc-grove-deep)}
.actions button:not(#walk),.secondary button{background:var(--zc-grove-paper);color:var(--zc-grove-deep);border-color:var(--zc-grove-line)}

/* The grove occupies the elastic row; journey details use a local scroll. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;overflow:hidden;padding-bottom:8px}
.scene{height:100%;min-height:0}
.controls{padding-top:8px}
.journey{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:7px 3px 0;padding-top:8px}
.journey:focus-visible{outline:2px solid var(--zc-grove-deep);outline-offset:-2px}
#status,footer{margin:1px 0}
@media(max-width:700px){main{display:flex;flex-direction:column;padding:6px 10px 5px}.heading{flex:none;padding:3px 0 5px}.heading h1{font-size:clamp(28px,8vw,34px)}.heading>p{margin:1px 0}.scene{flex:1 1 0;height:auto;min-height:0}.controls{flex:none;padding:5px 0 0}.controls>p:first-child{margin:0 0 4px}.actions button,.secondary button{min-height:38px;padding:5px}.secondary{margin-top:4px}.journey{flex:0 1 83px;min-height:42px;margin:5px 0 0;padding-top:5px}.journey progress{margin-top:5px}.journey p{margin:3px 0}#status,footer{flex:none}}
@media(min-width:701px) and (max-height:760px){.heading{padding-top:10px}.heading>p{margin:8px 0 0;line-height:1.35}.controls{padding-top:8px}.controls>p:first-child{margin-bottom:7px;font-size:13px;line-height:1.3}.actions button,.secondary button{min-height:38px;padding:6px 12px}.controls .note{margin:5px 0;line-height:1.3}.journey{margin-top:7px;padding-top:8px}}