:root{--zc-background:#f3f1ea;--zc-surface:#fcfbf6;--zc-ink:#2a332f;--zc-muted:#6c7670;--zc-accent:#3f6153;--zc-accent-ink:#fafcf6;--zc-border:#d8dcd3;--zc-soft:#e7eae2;--zc-radius:12px;--zc-font:Georgia,"Times New Roman",serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--zc-background:#171b19;--zc-surface:#202523;--zc-ink:#e5e8e2;--zc-muted:#9ba49e;--zc-accent:#8fb8a3;--zc-accent-ink:#132019;--zc-border:#343b37;--zc-soft:#262c29;color-scheme:dark}}
/* pale: moonlight, mist and white feathers stay light against either mode */
:root{--zc-fv-pale:var(--zc-surface)}
:root[data-mode=dark]{--zc-fv-pale:color-mix(in srgb,var(--zc-ink) 72%,var(--zc-soft))}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--zc-accent);outline-offset:3px}
[hidden]{display:none!important}
.fv{width:min(640px,100%);margin:0 auto;padding:18px 16px 28px;min-height:100dvh;display:flex;flex-direction:column}
.screen{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--zc-muted);font-weight:600}
h1,h2{font-family:var(--zc-font);font-weight:400;margin:0;letter-spacing:.01em}
h1{font-size:clamp(28px,7vw,36px);line-height:1.2;margin-top:6px}
h2{font-size:clamp(22px,5.6vw,28px);line-height:1.25}
.lede{margin:8px 0 0;color:var(--zc-muted);font-size:14px;line-height:1.65}
.preview-banner{margin:0 0 14px;padding:8px 12px;border:1px dashed var(--zc-border);border-radius:var(--zc-radius);background:var(--zc-soft);color:var(--zc-muted);font-size:12.5px;text-align:center;letter-spacing:.02em}

/* road */
.road-art{border-radius:var(--zc-radius);background:var(--zc-soft);overflow:hidden;border:1px solid var(--zc-border)}
.road-svg{display:block;width:100%;height:auto}
.road-line{fill:none;stroke:var(--zc-muted);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 6;opacity:.8}
.road-line.later{opacity:.35}
.road-node circle{fill:var(--zc-surface);stroke:var(--zc-muted);stroke-width:1.5}
.road-node text{font-size:10px;fill:var(--zc-muted);font-family:inherit}
.road-node.done circle{fill:var(--zc-accent);stroke:var(--zc-accent)}
.road-node .tick{fill:none;stroke:var(--zc-accent-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.road-node.next circle{stroke:var(--zc-accent);stroke-width:2.5}
.road-node.next text{fill:var(--zc-accent);font-weight:700}
.road-later{fill:var(--zc-muted);opacity:.45}
.visit-list,.notebook-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.visit-row{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:9px 14px 9px 10px;text-align:left;background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:var(--zc-radius);transition:border-color .2s,background .2s}
.visit-row:hover:not(:disabled){border-color:var(--zc-accent)}
.visit-row:disabled{cursor:default;opacity:.55;background:transparent}
.visit-row .num{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--zc-border);font-size:13px;color:var(--zc-muted);font-variant-numeric:tabular-nums}
.visit-row.done .num{background:var(--zc-accent);border-color:var(--zc-accent);color:var(--zc-accent-ink)}
.visit-row.next{border-color:var(--zc-accent);box-shadow:inset 3px 0 0 var(--zc-accent)}
.visit-row.next .num{border-color:var(--zc-accent);color:var(--zc-accent);font-weight:700}
.visit-row .names{flex:1;min-width:0;display:flex;flex-direction:column}
.visit-row strong{font-weight:600;font-size:14.5px}
.visit-row small{color:var(--zc-muted);font-size:12.5px}
.row-state{font-size:11.5px;color:var(--zc-muted);letter-spacing:.04em}
.visit-row.next .row-state{color:var(--zc-accent);font-weight:600}
.later-note{font-size:12.5px;color:var(--zc-muted);padding:4px 4px 0;font-style:italic}
.road-actions{display:flex;gap:8px;flex-wrap:wrap}
.road-actions button,.controls button,.solved-actions button{min-height:44px;padding:10px 18px;border-radius:var(--zc-radius);border:1px solid var(--zc-border);background:var(--zc-surface);font-size:14px}
.road-actions button{flex:1 1 150px}
#sound-toggle[aria-pressed=false]{color:var(--zc-muted)}
.about{font-size:13px;color:var(--zc-muted);border-top:1px solid var(--zc-border);padding-top:10px}
.about summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--zc-ink)}
.about p{margin:0 0 6px;line-height:1.7}

/* visit */
.visit-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
button.quiet{min-height:44px;padding:8px 12px 8px 4px;border:0;background:none;color:var(--zc-muted);font-size:14px}
button.quiet:hover{color:var(--zc-ink)}
.greeting{margin:-4px 0 0;font-size:14px;line-height:1.6;color:var(--zc-muted)}
#visit-host{color:var(--zc-ink);font-weight:600}
.greeting q{font-family:var(--zc-font);font-style:italic;quotes:"\201C" "\201D"}
.scene-wrap{border-radius:var(--zc-radius);overflow:hidden;border:1px solid var(--zc-border);background:var(--zc-soft);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.scene-svg{display:block;width:100%;height:auto;max-height:min(58vh,480px)}
.status{margin:0;min-height:1.6em;font-size:14px;line-height:1.6}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.controls button{flex:1 1 140px}
#hint.waiting{color:var(--zc-muted)}
button:disabled{cursor:default;opacity:.55}
.hint-text{margin:0;padding:10px 14px;border-left:3px solid var(--zc-accent);background:var(--zc-surface);border-radius:0 var(--zc-radius) var(--zc-radius) 0;font-size:14px;line-height:1.6}
.solved{padding:18px 18px 16px;border:1px solid var(--zc-accent);border-radius:var(--zc-radius);background:var(--zc-surface);display:flex;flex-direction:column;gap:8px;animation:rise .6s ease-out}
.solved:focus{outline:none}
.solved:focus-visible{outline:2px solid var(--zc-accent)}
blockquote{margin:0;font-family:var(--zc-font);font-size:clamp(18px,4.8vw,21px);line-height:1.5;font-style:italic}
.chapter-note{margin:4px 0 0;font-size:13.5px;color:var(--zc-muted);line-height:1.6}
.solved-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.solved-actions button{flex:1 1 140px}
button.primary{background:var(--zc-accent);border-color:var(--zc-accent);color:var(--zc-accent-ink);font-weight:600}
.notebook-list li{padding:14px 16px;background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:var(--zc-radius);display:flex;flex-direction:column;gap:6px}
.notebook-list blockquote{font-size:17px}
.save-status{margin:auto 0 0;padding-top:18px;font-size:12px;color:var(--zc-muted);text-align:center;min-height:1.5em}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

/* scene palette: everything derives from the platform tokens */
.sky{fill:color-mix(in srgb,var(--zc-soft) 70%,var(--zc-surface))}
.far{fill:color-mix(in srgb,var(--zc-muted) 32%,var(--zc-soft))}
.near{fill:color-mix(in srgb,var(--zc-accent) 30%,var(--zc-soft))}
.water{fill:color-mix(in srgb,var(--zc-accent) 16%,var(--zc-surface))}
.mist{fill:var(--zc-fv-pale);opacity:.55;filter:blur(1.5px)}
[data-mode=dark] .mist{opacity:.32}
.mist-layer{animation:drift 26s ease-in-out infinite alternate}
.mist-front{animation-duration:34s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translateX(38px)}}
.path-line{fill:none;stroke:color-mix(in srgb,var(--zc-muted) 45%,transparent);stroke-width:1.5}
.hit{cursor:pointer;outline:none}
.hit-area{fill:transparent}
.no-hit{pointer-events:none}
.focus-ring{fill:none;stroke:none;pointer-events:none}
.hit:focus-visible .focus-ring{stroke:var(--zc-accent);stroke-width:2.5;stroke-dasharray:5 4}
.moon{fill:var(--zc-fv-pale);stroke:color-mix(in srgb,var(--zc-muted) 45%,transparent);stroke-width:1}
.stone{fill:color-mix(in srgb,var(--zc-muted) 55%,var(--zc-soft))}
.dim{fill:color-mix(in srgb,var(--zc-ink) 55%,var(--zc-soft))}
.lit{fill:color-mix(in srgb,var(--zc-accent) 35%,#f6d98a);opacity:0}
.glow{fill:color-mix(in srgb,var(--zc-accent) 20%,#f6d98a);opacity:0;filter:blur(4px)}
[data-fade=in]{opacity:0}
.crane,.bud{fill:var(--zc-fv-pale);stroke:color-mix(in srgb,var(--zc-ink) 55%,transparent);stroke-width:1}
.crane-tail{fill:var(--zc-ink)}
.crane-neck{fill:none;stroke:var(--zc-fv-pale);stroke-width:4;stroke-linecap:round}
.beak{fill:var(--zc-ink)}
.leg,.stem{stroke:color-mix(in srgb,var(--zc-ink) 60%,transparent);stroke-width:1.5;fill:none}
.hut{fill:var(--zc-fv-pale);stroke:color-mix(in srgb,var(--zc-ink) 40%,transparent);stroke-width:.8}
.roof{fill:color-mix(in srgb,var(--zc-ink) 70%,var(--zc-soft))}
.petal{fill:var(--zc-fv-pale);stroke:color-mix(in srgb,var(--zc-accent) 60%,transparent);stroke-width:1}
.flower-heart{fill:color-mix(in srgb,var(--zc-accent) 40%,#f6d98a)}
/* harbour */
.pagoda,.pine,.pavilion{fill:color-mix(in srgb,var(--zc-ink) 72%,var(--zc-soft))}
.pavilion circle{fill:var(--zc-fv-pale);stroke:color-mix(in srgb,var(--zc-muted) 50%,transparent)}
.reflection{opacity:.42}
.band-line{stroke:var(--zc-surface);stroke-width:1.2;stroke-dasharray:3 6;opacity:.7;transition:opacity 1.2s}
.still .band-line{opacity:0}
.arrow-bg{fill:var(--zc-surface);stroke:var(--zc-border)}
.chevron{fill:none;stroke:var(--zc-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.still .hit .arrow-bg,.still .hit .chevron{opacity:.35}
[data-band]{transition:transform .45s ease}
/* grove */
.grove-floor{fill:color-mix(in srgb,var(--zc-accent) 14%,var(--zc-soft))}
.bamboo{fill:color-mix(in srgb,var(--zc-accent) 55%,var(--zc-soft))}
.node{stroke:color-mix(in srgb,var(--zc-accent) 70%,var(--zc-ink));stroke-width:1.2}
.bamboo-leaf{fill:color-mix(in srgb,var(--zc-accent) 70%,var(--zc-soft))}
.stalk-foot{fill:var(--zc-ink);opacity:.12}
.grove-row-0{opacity:.55}.grove-row-1{opacity:.8}
.ring{fill:none;stroke:var(--zc-ink);stroke-width:1.4;opacity:.7}
.chime .string{stroke:var(--zc-ink);stroke-width:.8}
.chime-cap{fill:var(--zc-ink)}
.chime-tube{fill:color-mix(in srgb,#f6d98a 55%,var(--zc-surface));stroke:var(--zc-ink);stroke-width:.6}
/* stones */
.sand{fill:color-mix(in srgb,var(--zc-surface) 80%,var(--zc-soft))}
.rake{fill:none;stroke:var(--zc-border);stroke-width:1.2}
.shadow{fill:var(--zc-ink);opacity:.17}
.stone-top{fill:var(--zc-surface);opacity:.35}
.selected-ring{fill:none;stroke:var(--zc-accent);stroke-width:2.5;stroke-dasharray:4 3}
.slot-number,.scene-note,.bell-label{font-size:12px;fill:var(--zc-muted);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sun-mark{fill:color-mix(in srgb,#f6d98a 60%,var(--zc-surface));stroke:var(--zc-muted);stroke-width:1}
.arrow-hint{fill:none;stroke:var(--zc-border);stroke-width:1.2}
/* orchard */
.crown circle{fill:color-mix(in srgb,var(--zc-accent) 22%,var(--zc-soft))}
.trunk{fill:color-mix(in srgb,var(--zc-ink) 60%,var(--zc-soft))}
.leaf-shape{fill:color-mix(in srgb,var(--zc-accent) 72%,var(--zc-soft));stroke:color-mix(in srgb,var(--zc-accent) 50%,var(--zc-ink));stroke-width:.6}
.leaf-shape.moving{transform-box:view-box;transform-origin:0 0;animation:sway 2.8s ease-in-out infinite}
.leaf-shape.found{fill:color-mix(in srgb,#f6d98a 60%,var(--zc-accent));animation:none}
@keyframes sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
/* bells */
.post,.beam{fill:color-mix(in srgb,var(--zc-ink) 65%,var(--zc-soft))}
.rope{stroke:var(--zc-ink);stroke-width:1.5}
.bell{fill:color-mix(in srgb,var(--zc-accent) 45%,var(--zc-muted));stroke:color-mix(in srgb,var(--zc-ink) 60%,transparent);stroke-width:1}
.bell-band{stroke:var(--zc-surface);stroke-width:1.5;opacity:.6}
.clapper{fill:var(--zc-ink)}
.bell-label{font-size:13px;fill:var(--zc-ink)}
.bell-waves path{fill:none;stroke:var(--zc-accent);stroke-width:2;stroke-linecap:round;opacity:0}
.ringing .bell-waves path{animation:waves 1.05s ease-out}
.ringing .bell-body{animation:swing 1.05s ease-in-out}
@keyframes waves{15%{opacity:.9}100%{opacity:0}}
@keyframes swing{25%{transform:rotate(7deg)}55%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
.dot{fill:none;stroke:var(--zc-muted);stroke-width:1.5}
.dot.filled{fill:var(--zc-accent);stroke:var(--zc-accent)}
/* gate */
.wall{fill:color-mix(in srgb,var(--zc-surface) 82%,var(--zc-muted))}
.wall-cap{fill:color-mix(in srgb,var(--zc-ink) 68%,var(--zc-soft))}
.tile-lines line{stroke:var(--zc-surface);stroke-width:1;opacity:.4}
.wall-marks line{stroke:var(--zc-border);stroke-width:1}
.path-shape{fill:color-mix(in srgb,var(--zc-surface) 70%,var(--zc-soft))}
.door{transition:opacity .4s linear}
.door-frame{fill:none;stroke:color-mix(in srgb,var(--zc-ink) 70%,transparent);stroke-width:2}
.door-leaf path{fill:color-mix(in srgb,var(--zc-accent) 30%,var(--zc-surface));stroke:color-mix(in srgb,var(--zc-ink) 55%,transparent);stroke-width:1}
.ring-handle{fill:none;stroke:var(--zc-ink);stroke-width:1}
.door-light{fill:color-mix(in srgb,#f6d98a 55%,var(--zc-surface))}
.door-leaf{transition:transform 1.4s ease-in-out;transform-box:fill-box}
.door-leaf.left{transform-origin:left center}
.door-leaf.right{transform-origin:right center}
.door.open .door-leaf{transform:scaleX(.18)}

@media (min-width:760px){
  .fv{padding:28px 24px 32px}
  .scene-svg{max-height:min(60vh,520px)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
[data-motion=reduced] .mist-layer,[data-motion=reduced] .solved{animation:none}
[data-motion=reduced] .leaf-shape.moving{animation:none}
[data-motion=reduced] .ringing .bell-body{animation:none}
[data-motion=reduced] [data-band],[data-motion=reduced] .door-leaf,[data-motion=reduced] .door{transition:none}

/* A travel folio: the landscape leads, the index opens when it is needed. */
body{background-image:repeating-linear-gradient(90deg,transparent 0 119px,color-mix(in srgb,var(--zc-border) 15%,transparent) 119px 120px)}
.fv{width:min(1080px,100%);padding:32px 28px;gap:18px}.road-head h1{font-size:clamp(36px,6.5vw,74px);line-height:1.02;letter-spacing:-.045em;max-width:7em;margin-top:18px}.lede{font-size:15px;max-width:38em;line-height:1.8}.road-head .lede{margin-top:20px}
.road-art{border-radius:50% 50% var(--zc-radius) var(--zc-radius);border-color:color-mix(in srgb,var(--zc-accent) 24%,var(--zc-border));padding-top:26px;background:var(--zc-soft)}.road-svg{min-height:180px}
.map-contours{fill:none;stroke:var(--zc-accent);stroke-width:.6;opacity:.18}.map-pavilion{fill:var(--zc-accent);stroke:var(--zc-accent);stroke-width:1.5;opacity:.65}.map-pines{stroke:var(--zc-accent);stroke-width:2;fill:none;opacity:.6}.map-label{fill:var(--zc-muted);font:7px sans-serif;letter-spacing:1.5px}
.road-invitation{display:flex;flex-direction:column;gap:10px}.road-invitation button{min-height:58px;padding:14px 22px;text-align:left;border:0;border-radius:var(--zc-radius);font-size:16px;line-height:1.4}.road-invitation .eyebrow{font-size:9px}
.chapter-index{border-top:1px solid var(--zc-border);border-bottom:1px solid var(--zc-border)}.chapter-index>summary{display:flex;min-height:56px;align-items:center;justify-content:space-between;cursor:pointer;font:20px var(--zc-font);list-style:none}.chapter-index>summary span{font:10px sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--zc-muted)}.chapter-index>summary::after{content:'+';font:22px var(--zc-font);margin-left:12px}.chapter-index[open]>summary::after{content:'−'}.chapter-index .visit-list{padding:8px 0 18px}.visit-row{border-width:0 0 1px;border-radius:0;background:transparent;padding:14px 8px}.visit-row.next{border:1px solid var(--zc-accent);border-radius:var(--zc-radius);background:var(--zc-surface);box-shadow:none}.visit-row strong{font-family:var(--zc-font);font-size:19px;font-weight:400}
#visit,#notebook{max-width:760px;width:100%;margin:auto}#visit h2,#notebook h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.025em}.greeting{font-size:16px;max-width:35em}.scene-wrap{border-radius:calc(var(--zc-radius)*1.6);margin-top:8px}.scene-svg{max-height:56vh}.status{font-size:15px;text-align:center;padding:6px 10px}.solved{padding:28px;border-width:1px 0;border-radius:0;background:transparent}.solved blockquote{font-size:26px}.notebook-list li{padding:26px;border-radius:0;border-width:0 0 1px;background:transparent}.notebook-list blockquote{font-size:23px}.about{border:0}
@media(min-width:850px){#road{display:grid;grid-template-columns:1fr 1.08fr;column-gap:48px;align-items:start}.road-head{grid-column:1;grid-row:1 / span 2}.road-art{grid-column:2;grid-row:1}.road-invitation{grid-column:2;grid-row:2}.chapter-index{grid-column:1 / -1}.road-actions{grid-column:1}.about{grid-column:2}.road-head .eyebrow{font-size:9px}}
@media(max-width:600px){.fv{padding:20px 18px 26px;gap:12px}.screen{gap:14px}.road-head h1{font-size:41px;max-width:none;margin-top:10px}.road-head .lede{font-size:13px;line-height:1.6;margin-top:10px}.road-art{padding-top:12px;border-radius:var(--zc-radius)}.road-svg{min-height:0;max-height:210px}.road-invitation button{min-height:52px;font-size:15px}.road-invitation .eyebrow{font-size:8px}.solved{padding:20px 10px}.solved blockquote{font-size:22px}.preview-banner{font-size:10px;padding:5px 8px;margin-bottom:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after{animation:none!important;transition:none!important}
.leaf-vein{fill:none;stroke:var(--zc-surface);stroke-width:1.1;stroke-linecap:round;pointer-events:none}
[data-motion=reduced] .ringing .bell-waves path{opacity:.9}
[data-motion=reduced] .ringing .bell{fill:var(--zc-accent);stroke:var(--zc-ink);stroke-width:2.5}
@media(prefers-reduced-motion:reduce){.ringing .bell-waves path{opacity:.9}.ringing .bell{fill:var(--zc-accent);stroke:var(--zc-ink);stroke-width:2.5}}