:root{--ink:#102c2c;--paper:#ebe5d2;--muted:#b9c4b4;--gold:#d1c495;--edge:clamp(24px,4.5vw,80px);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper)}body,button{font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:1px solid var(--gold);outline-offset:7px}button[hidden],[hidden]{display:none!important}button:disabled{cursor:wait;opacity:.55}button:active{transform:translateY(1px)}
#garden{position:absolute;inset:0;background:#102b30}.garden-scene{position:absolute;inset:0;overflow:hidden}.garden-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.garden-scene canvas:active{cursor:grabbing}.garden-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#071c2359,transparent 40%,transparent 76%,#0b23252b),linear-gradient(0deg,#061c268c,transparent 26%,transparent 80%,#071d2733)}#hotspots{position:absolute;inset:0;pointer-events:none}
.site-header{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:30px var(--edge);gap:20px;pointer-events:none}.site-header button{pointer-events:auto}.brand{display:flex;align-items:center;gap:21px;padding:0;text-align:left}.brand-seal{display:grid;place-items:center;writing-mode:vertical-rl;width:58px;height:74px;border:1px solid #d1d1ba77;font-size:27px;line-height:1.2;letter-spacing:3px}.brand-text>span{font-size:16px;letter-spacing:.18em}.brand-text small{display:block;color:var(--muted);font-size:11px;letter-spacing:.24em;margin-top:12px}.header-actions{display:flex;align-items:center;gap:30px}.text-control,.sound-control,.menu-control{display:flex;align-items:center;gap:11px;padding:10px 0;font-size:13px;letter-spacing:.15em;white-space:nowrap}.text-control{color:#d9dfcd}.text-control:hover,.menu-control:hover{color:#fff1c3}.text-control>span{font-size:20px}.sound-control{gap:13px}.sound-wave{height:25px;display:flex;align-items:center;gap:4px}.sound-wave i{width:1px;height:10px;background:currentColor;opacity:.75}.sound-wave i:nth-child(2){height:25px}.sound-wave i:nth-child(3){height:18px}.sound-wave i:nth-child(4){height:12px}.sound-control[aria-pressed=true] .sound-wave i{animation:sound-wave 1.2s ease-in-out infinite alternate}.sound-control[aria-pressed=true] .sound-wave i:nth-child(2){animation-delay:-.4s}.sound-control[aria-pressed=true] .sound-wave i:nth-child(3){animation-delay:-.8s}.menu-control{gap:14px}.menu-control i,.menu-control i:before{display:block;width:22px;height:1px;background:currentColor}.menu-control i:before{content:"";transform:translateY(7px);width:14px;margin-left:auto}
.garden-copy{position:absolute;z-index:2;left:var(--edge);top:clamp(180px,25vh,285px);pointer-events:none;text-shadow:0 2px 22px #071c2255}.eyebrow{font-size:11px;letter-spacing:.3em;color:var(--gold);margin:0}.garden-copy h1{font-weight:400;font-size:clamp(42px,4vw,68px);letter-spacing:.2em;line-height:1.4;margin:24px 0 27px}.garden-verse{font-size:16px;line-height:2.1;letter-spacing:.18em;margin:0;color:#d5ddc9}.garden-footer{position:absolute;z-index:3;left:var(--edge);right:var(--edge);bottom:max(34px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:20px}.garden-tools{display:flex;align-items:center;gap:16px}.round-control{width:46px;height:46px;border:1px solid #c9d3b877;border-radius:50%;font-size:28px;line-height:1;padding:0}.garden-tools p{font-size:12px;letter-spacing:.15em;margin:0}.garden-tools p span{display:block;font-size:10px;margin-top:8px;color:var(--muted)}.garden-guide{font-size:12px;letter-spacing:.24em;color:#d6dfc9;text-align:center}.create-entry{display:flex;align-items:center;gap:17px;text-align:left;padding:12px 0;letter-spacing:.2em;font-size:16px}.create-entry small{display:block;margin-top:8px;font-size:10px;letter-spacing:.12em;color:var(--muted)}.create-entry b{font-weight:400;font-size:25px;margin-left:10px}.book-symbol{font-size:36px;transform:rotate(-8deg);display:inline-block;color:var(--gold)}.garden-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:12px 18px;background:#102b30b3;font-size:12px;letter-spacing:.2em;pointer-events:none;transition:opacity .8s}.garden-status.loaded{opacity:0}
.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;color:#f9e7b2;text-shadow:0 1px 8px #051b1c}.hotspot:active{transform:translate(-50%,-50%)}.hotspot:before,.hotspot:after{content:"";position:absolute;inset:1px;border:1px solid #efdea655;border-radius:50%;animation:breathe 3.6s ease-in-out infinite;pointer-events:none}.hotspot:after{inset:-11px;animation:ripple 3.6s ease-out infinite}.hotspot .point{width:9px;height:9px;border-radius:50%;background:#ffedb8;box-shadow:0 0 12px 5px #ffe7a966,0 0 30px 12px #ffe3a72b;transition:transform .3s}.hotspot:hover .point{transform:scale(1.35)}.hotspot .label{position:absolute;left:49px;top:8px;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;letter-spacing:.16em;padding:4px 0}.hotspot .label small{font-size:9px;letter-spacing:.1em;opacity:.75}.hotspot.label-left .label{left:auto;right:49px}.hotspot.visited .point{background:#e3e9cf}.hotspot.visited .label:after{content:"·";color:#d7ddb8}.hotspot[data-id="paving"] .label{top:14px}.hotspot:nth-child(2):after{animation-delay:-.8s}.hotspot:nth-child(3):after{animation-delay:-1.6s}.hotspot:nth-child(4):after{animation-delay:-2.4s}.hotspot:nth-child(5):after{animation-delay:-3.1s}
.chapter-view{position:absolute;inset:78px 0 0;z-index:10;background:#10272c}.chapter-view iframe{width:100%;height:100%;display:block;border:0;background:#10272c}.chapter-loading{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:19px;background:#10272c;color:#dad8bf;transition:opacity .4s;font-size:13px;letter-spacing:.2em}.chapter-view.ready .chapter-loading{opacity:0;pointer-events:none}.chapter-loading p{margin:0}.chapter-loading button{border-bottom:1px solid #d2ca9e66;padding:10px}.loading-ring{height:42px;width:42px;border:1px solid #d4c89326;border-top-color:#d4c89399;border-radius:50%;animation:spin 1.8s linear infinite}.viewing-chapter .site-header{height:78px;padding:13px 28px;background:#10272c;border-bottom:1px solid #c9cbb51c}.viewing-chapter .brand{gap:13px}.viewing-chapter .brand-seal{width:34px;height:47px;font-size:18px;letter-spacing:1px}.viewing-chapter .brand-text>span{font-size:12px;letter-spacing:.14em}.viewing-chapter .brand-text small{font-size:10px;margin-top:7px;letter-spacing:.15em}.viewing-chapter .header-actions{gap:24px}.viewing-chapter .text-control,.viewing-chapter .menu-control{font-size:11px}.viewing-chapter #garden{visibility:hidden}
.chapter-menu{position:fixed;inset:0 0 0 auto;margin:0;height:100svh;max-height:100svh;max-width:100vw;width:min(480px,92vw);padding:46px 38px 30px;border:0;border-left:1px solid #d5cba54d;background:linear-gradient(155deg,#173b3d,#102829);color:var(--paper);box-shadow:-30px 0 100px #06171d66}.chapter-menu::backdrop{background:#071d2677;backdrop-filter:blur(5px)}.menu-head{display:flex;justify-content:space-between;align-items:flex-start}.menu-head h2{font-size:33px;letter-spacing:.2em;font-weight:400;margin:14px 0 0}.close-menu{font-size:32px;font-weight:300;line-height:1;padding:0 0 8px 12px}.menu-note{font-size:11px;color:var(--muted);line-height:1.9;letter-spacing:.08em;margin:24px 0 28px}#chapter-links{display:flex;flex-direction:column}.menu-row{display:flex;align-items:center;border-top:1px solid #c5cdb92c;min-height:76px}.menu-route{display:flex;align-items:center;gap:19px;text-align:left;padding:18px 0;flex:1}.menu-number{font-size:10px;color:var(--gold);width:21px;letter-spacing:.08em}.menu-name{font-size:22px;letter-spacing:.18em;display:block}.menu-description{font-size:10px;line-height:1.6;color:var(--muted);letter-spacing:.05em;display:block;margin-top:7px}.menu-locate{border:1px solid #d1d9ba33;border-radius:50%;height:32px;width:32px;margin-left:8px;display:grid;place-items:center;font-size:18px;color:#d9d5b5}.menu-locate:hover{background:#c8c9a817}.menu-row.visited .menu-number:after{content:" ·"}.menu-row.active .menu-name{color:#f3df9e}.menu-foot{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.1em;border-top:1px solid #c5cdb92c;padding-top:24px;margin-top:5px;color:var(--muted)}.menu-foot button{font-size:11px;color:#e7dfbb}.no-script{position:fixed;inset:0;z-index:50;background:#102c2c;padding:20vh 10vw;font-size:20px;line-height:2}.no-script a{display:block;color:var(--gold)}
@keyframes breathe{50%{opacity:.35;transform:scale(.85)}}@keyframes ripple{0%{opacity:0;transform:scale(.55)}25%{opacity:.8}100%{opacity:0;transform:scale(1.25)}}@keyframes sound-wave{to{transform:scaleY(.4)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){:root{--edge:22px}.site-header{padding-top:max(22px,env(safe-area-inset-top));gap:12px}.brand{gap:12px}.brand-seal{width:37px;height:49px;font-size:18px;letter-spacing:2px}.brand-text>span{font-size:10px;letter-spacing:.08em}.brand-text small{font-size:8px;margin-top:8px;letter-spacing:.1em}.header-actions{gap:18px}.sound-control{font-size:10px;gap:6px}.sound-wave{transform:scale(.75);gap:4px}.menu-control>span{display:none}.menu-control i{width:20px}.garden-copy{top:clamp(135px,21svh,190px)}.garden-copy h1{font-size:36px;line-height:1.35;margin:17px 0 18px;letter-spacing:.16em}.garden-copy .eyebrow{font-size:9px}.garden-verse{font-size:11px;line-height:1.9;letter-spacing:.13em}.garden-footer{bottom:max(23px,env(safe-area-inset-bottom));gap:9px}.garden-tools{gap:9px}.round-control{height:33px;width:33px;font-size:21px}.garden-tools p{font-size:9px}.garden-tools p span{font-size:8px;margin-top:5px}.garden-guide{position:absolute;left:0;right:0;bottom:64px;font-size:9px;letter-spacing:.13em;pointer-events:none}.create-entry{font-size:12px;gap:9px}.create-entry small{font-size:8px;margin-top:6px}.book-symbol{font-size:26px}.create-entry b{font-size:18px;margin-left:1px}.hotspot{width:40px;height:40px}.hotspot .label{font-size:11px;left:42px;gap:6px;letter-spacing:.1em}.hotspot .label small{font-size:8px}.hotspot.label-left .label{right:42px}.hotspot:after{inset:-7px}.hotspot .point{height:8px;width:8px}.chapter-menu{padding:32px 26px 26px}.menu-head h2{font-size:28px}.menu-note{margin:20px 0}.menu-row{min-height:74px}.menu-name{font-size:20px}.viewing-chapter .site-header{height:72px;padding:11px 17px;gap:9px}.viewing-chapter .brand-text>span{display:none}.viewing-chapter .brand-text small{max-width:100px;font-size:10px;line-height:1.7;margin:0}.viewing-chapter .brand-seal{height:43px;width:31px;font-size:16px}.viewing-chapter .header-actions{gap:15px}.viewing-chapter #chapter-garden{display:none}.viewing-chapter .text-control{font-size:10px;letter-spacing:.05em;gap:5px}.viewing-chapter .text-control>span{font-size:17px}.chapter-view{top:72px}}
@media(max-height:650px) and (min-width:761px){.garden-copy{top:155px}.garden-copy h1{font-size:40px;margin:17px 0}.garden-verse{font-size:12px}.site-header{padding-top:22px}.brand-seal{height:56px;width:44px;font-size:22px}.chapter-menu{padding-top:24px}.menu-note{margin:14px 0}.menu-row{min-height:64px}.menu-route{padding:12px 0}.menu-name{font-size:20px}.menu-foot{padding-top:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.garden-footer{pointer-events:none}.garden-footer button{pointer-events:auto}
.garden-footer .garden-guide{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.garden-experiences {
  --experience-width: clamp(123px, 10.5vw, 166px);
  position: absolute;
  z-index: 4;
  right: max(clamp(22px, 3vw, 56px), env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, var(--experience-width));
  gap: clamp(16px, 2vw, 30px);
  pointer-events: none;
}
/* Center the visible artwork within each icon frame, including the shorter book. */
#garden-studio {
  --experience-art: url('/assets/garden-studio-isometric.webp');
  --experience-art-offset: -2.2%;
}
#garden-paper {
  --experience-art: url('/assets/garden-book-only.webp');
  --experience-art-offset: -7.3%;
}
#garden-book { --experience-art: url('/assets/garden-archive.svg?v=2'); }
.garden-experience {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0;
  isolation: isolate;
  text-align: left;
  text-shadow: 0 2px 10px #062125, 0 0 5px #062125;
  touch-action: manipulation;
  pointer-events: auto;
}
.garden-experience:active { transform: scale(.98); }
.garden-experience__caption { display: grid; justify-items: start; gap: 5px; }
.garden-experience__caption strong {
  color: #fff1bf;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 400;
  letter-spacing: .17em;
  white-space: nowrap;
}
.garden-experience__action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid #e9cf896e;
  color: #f2dfaa;
  font-size: 11px;
  letter-spacing: .12em;
  white-space: nowrap;
}
.garden-experience__action b { font-size: 14px; font-weight: 400; transition: transform .5s; }
.garden-experience__art {
  position: relative;
  display: block;
  aspect-ratio: 7 / 5;
  transform: translateY(var(--experience-art-offset, 0%));
}
.garden-experience__object, .garden-experience__glow { position: absolute; inset: 0; pointer-events: none; }
.garden-experience__object {
  filter: drop-shadow(0 5px 5px #06212599);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.garden-experience__object img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.garden-experience__glow {
  z-index: -1;
  filter: drop-shadow(0 0 4px #ffe2a3) drop-shadow(0 0 8px #edc778aa);
  animation: experience-outline 5s ease-in-out infinite;
}
.garden-experience__glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffeac0;
  mask: var(--experience-art) left center / contain no-repeat;
}
.garden-book__leaf{position:absolute;left:50%;top:63%;width:30%;height:23%;background:linear-gradient(140deg,#f3ecd1df,#dad0ad33);clip-path:polygon(0 25%,75% 0,100% 70%,10% 100%);transform:perspective(180px) rotateY(-65deg) rotateZ(-12deg);transform-origin:left;opacity:0;transition:transform .9s,opacity .7s}
.garden-experience:is(:hover,:focus-visible) .garden-experience__object { transform: translateY(-4px); }
.garden-experience:is(:hover,:focus-visible) .garden-experience__action b { transform: translate(3px,-3px); }
#garden-paper:is(:hover,:focus-visible) .garden-book__leaf { transform: perspective(180px) rotateY(-120deg) rotateZ(-12deg); opacity: .85; }
@keyframes experience-outline {
  0%,100% { opacity: .35; transform: translateY(1px) scale(1.015); }
  50% { opacity: .67; transform: translateY(-3px) scale(1.04); }
}
@media (max-height: 650px) and (min-width: 761px) {
  .garden-experiences { --experience-width: clamp(112px, 10.5vw, 142px); bottom: 17px; }
}
@media (max-width: 760px) {
  .garden-experiences {
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(65px, calc(env(safe-area-inset-bottom) + 50px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 414px;
    margin-left: auto;
    gap: 10px;
  }
  .garden-experience__caption strong { font-size: clamp(12px, 3.6vw, 15px); letter-spacing: .08em; }
  .garden-experience__action { font-size: 9px; }
  .garden-footer .garden-guide {
    left: auto;
    right: 0;
    bottom: 0;
    transform: none;
    margin: 0;
    text-align: right;
  }
}

#chapter-place { color: #f6e0ad; }
#chapter-place:disabled { opacity: .45; }
.placement-dialog { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #10282b; }
.placement-dialog iframe { display: block; width: 100%; height: 100%; border: 0; }


.viewing-atlas .site-header { visibility: hidden; }
.viewing-atlas .chapter-view { top: 0; }

.site-sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .12em;
  color: inherit;
}
.site-sound svg { flex-shrink: 0; }
.site-sound[aria-pressed="true"] .site-sound-waves,
.site-sound[aria-pressed="false"] .site-sound-cross { display: none; }
.viewing-atlas #hub-sound {
  position: fixed;
  top: calc(clamp(78px, 22svh, 155px) / 2);
  right: calc(5% + 118px);
  transform: translateY(-50%);
  color: #385144;
  visibility: visible;
}
.viewing-stone-garden #hub-sound, .placement-dialog .site-sound--placement {
  position: absolute;
  transform: none;
  z-index: 2;
  top: 22px;
  right: max(116px, calc(5% + 98px));
  padding: 7px;
  color: #eee6d0;
  background: #112722db;
  border-radius: 4px;
}
@media (max-width: 680px) {
  #hub-sound { gap: 4px; padding-inline: 1px; font-size: 10px; }
  .viewing-atlas #hub-sound { top: 50px; right: calc(7% + 94px); }
  .viewing-stone-garden #hub-sound, .placement-dialog .site-sound--placement { top: 14px; right: 106px; font-size: 10px; }
}

.placement-dialog[data-studio="true"] .site-sound--placement {
  top: 42px;
  right: calc(4.5% + 164px);
}
@media (max-width: 680px) {
  .placement-dialog[data-studio="true"] .site-sound--placement {
    top: 23px;
    right: calc(6% + 107px);
  }
}

.chapter-loading.with-preview {
  background: linear-gradient(#0b202747, #0b202777 58%, #0b2027bf), var(--chapter-poster) center / cover no-repeat #10272c;
}
.chapter-loading.with-preview p,
.chapter-loading.with-preview button { text-shadow: 0 1px 8px #0b2027; }

.chapter-loading.stalled .loading-ring { display: none; }
.chapter-loading #open-book-directly {
  color: inherit;
  padding: .65rem;
  text-underline-offset: .35em;
}
.chapter-loading #read-chapter {
  background: #10272cdf;
  border: 1px solid #d2ca9e88;
  padding: .75rem 1.1rem;
}