*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#09120f;color:#e8eade;font-family:"Segoe UI","Microsoft YaHei",sans-serif}body{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 24px;background:radial-gradient(ellipse at 50% 10%,#203429 0,#0c1712 48%,#070f0c 100%)}button,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #d5e5a6;outline-offset:5px}button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.shell{width:min(1440px,calc((100svh - 148px)*16/9),100%)}.masthead{display:flex;justify-content:space-between;align-items:center;padding:0 2px 17px;font-size:11px;color:#89988a;letter-spacing:.19em}.brand{display:flex;align-items:center;gap:10px;color:#d0d6c7}.brand svg{width:22px;height:22px;stroke:#d4df9c;stroke-width:1.2;fill:none}.masthead span:last-child{letter-spacing:.1em}.stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#284137;isolation:isolate;box-shadow:0 25px 90px #0008,inset 0 0 0 1px #ffffff12}.stage>canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 49% 42%,transparent 42%,#00190b50 100%);z-index:1}.shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#07150d4d,transparent 18%,transparent 67%,#04110dea)}.topline{position:absolute;top:28px;left:32px;right:28px;z-index:3;display:flex;align-items:center;justify-content:space-between}.label{display:flex;align-items:center;gap:9px;color:#f0f0d4b0;font-size:10px;letter-spacing:.22em}.label i{width:5px;height:5px;background:#dfe5ad;border-radius:50%;box-shadow:0 0 10px #d8e2af80}.utilities{display:flex;gap:8px}.utility{border:1px solid #e2efc126;border-radius:8px;color:#eaf0d5;background:#102b1b38;padding:8px 12px;font-size:11px;display:flex;align-items:center;gap:7px;backdrop-filter:blur(9px)}.utility:hover{background:#153b2580}.playback{position:absolute;left:30px;right:30px;bottom:20px;z-index:4}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.tools{display:flex;align-items:center;gap:12px}.icon{background:transparent;border:0;color:#e6eacf;display:grid;place-items:center;width:28px;height:30px;border-radius:6px;padding:4px}.icon:hover{background:#ffffff18}.icon[aria-pressed=true]{color:#dceca2;background:#cadc7b17}.main-play{border:1px solid #dce8b652;border-radius:50%;width:36px;height:36px;padding:8px;background:#c6d79e0a}.main-play:hover{background:#d9e8b326}.text-button{background:none;border:none;color:#d8dfc5c9;font-size:11px;letter-spacing:.06em;padding:7px 3px}.text-button[aria-pressed=true]{color:#e0edb0}.divider{height:15px;width:1px;background:#d5e5ba30;margin:0 4px}.time{display:flex;gap:18px;align-items:center;font-size:10px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#e1e6d0a8}.phase{font-size:10px;display:flex;gap:8px;align-items:center;color:#e3ecc9}.phase:before{content:"";width:4px;height:4px;border-radius:50%;background:#d1de9e}.track{position:relative;height:12px;display:flex;align-items:center}.track::before{content:"";position:absolute;left:0;right:0;height:2px;background:#ecf1d329}.progress{position:absolute;height:2px;width:0;background:#d6e2a5;pointer-events:none;box-shadow:0 0 7px #d6e2a52b}.track input{position:absolute;inset:0;width:100%;height:12px;margin:0;cursor:pointer;opacity:.001}.track:hover::before{height:3px}.track:hover .progress{height:3px}.footnote{display:flex;justify-content:space-between;gap:16px;margin:18px 2px 0;color:#6f8271;font-size:10px;letter-spacing:.05em}.footnote strong{font-weight:400;color:#a6b49a}.footnote kbd{font:inherit;color:#aebaa1;border:1px solid #96a3832b;border-radius:3px;padding:1px 5px;margin:0 2px}.reference-panel{position:absolute;z-index:10;inset:25px 25px 85px;background:#0b1b14f2;border:1px solid #dbe9b83b;border-radius:12px;backdrop-filter:blur(15px);display:flex;flex-direction:column;box-shadow:0 15px 50px #0009;overflow:hidden}.reference-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;color:#d7e4bb;font-size:11px;letter-spacing:.1em}.reference-panel img{width:100%;height:calc(100% - 47px);object-fit:contain;min-height:0;background:#07100b}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#183024;z-index:20;font-size:12px;letter-spacing:.1em;color:#cddbc2;text-align:center;padding:30px}.spinner{width:28px;height:28px;border-radius:50%;border:1px solid #d6e7ab25;border-top-color:#d6e7ab;animation:spin 1s linear infinite}.loading.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}.stage:fullscreen{border-radius:0;width:100vw;height:100vh;aspect-ratio:auto;max-width:none}.stage:fullscreen .playback{bottom:30px}.note{color:#94a68d}
@media(max-width:700px){body{padding:20px 12px}.shell{width:100%}.masthead{font-size:9px;padding-bottom:12px}.masthead span:last-child{font-size:8px}.stage{aspect-ratio:4/3;border-radius:10px}.topline{top:15px;left:17px;right:14px}.label{font-size:8px;letter-spacing:.1em}.utility{font-size:9px;padding:6px 8px}.utility svg{width:15px;height:15px}.playback{left:16px;right:16px;bottom:13px}.tools{gap:7px}.time{gap:8px;font-size:8px;letter-spacing:0}.phase{font-size:8px}.divider{margin:0}.text-button{font-size:9px}.footnote{font-size:8px;line-height:1.8;align-items:flex-start;margin-top:12px}.keyboard{display:none}.reference-panel{inset:12px 12px 78px}.main-play{width:32px;height:32px}.toolbar{margin-bottom:6px}}
.stage>canvas{cursor:grab;touch-action:none}.stage>canvas.dragging{cursor:grabbing}.stage>canvas:focus-visible{outline:1px solid #d5e5a65c;outline-offset:-3px}.touch-help{display:none}@media(max-width:700px){.desktop-help{display:none}.touch-help{display:inline}.label{max-width:35%;line-height:1.7}.utilities{gap:5px}.utility{padding:6px}.footnote .note{display:block}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.shell{width:min(1440px,calc((100svh - 215px)*16/9),100%)}.masthead{color:#a0af94}.brand{color:#e0e4cc}.story-chapters{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:15px}.chapter{display:flex;justify-content:center;align-items:center;gap:7px;border:1px solid #a7be8320;border-radius:8px;color:#a8b69c;background:#21352124;padding:10px 4px;font-size:10px;letter-spacing:.025em}.chapter span{font-size:16px}.chapter:hover{background:#40552d45;border-color:#c0d69c55}.chapter.active{color:#eff3cb;background:#546a304a;border-color:#d4e3a75c}.footnote{margin-top:13px}.loading{background:#213b28}@media(max-width:700px){.shell{width:100%}.story-chapters{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:10px}.chapter{font-size:9px;padding:7px 3px}.chapter span{font-size:14px}.label{max-width:30%;font-size:8px}}
.label-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1.4}.label{font-size:11px}.label i{align-self:flex-start;margin-top:5px}.label-owner{font-size:10px;color:#bdcbaa;letter-spacing:.12em}@media(max-width:700px){.topline{gap:8px;align-items:flex-start}.label{max-width:none;min-width:0;flex:1;gap:6px}.label-copy{gap:4px;font-size:9px;letter-spacing:.04em;white-space:nowrap}.label-owner{font-size:8px;letter-spacing:.04em}.label i{flex-shrink:0;margin-top:4px}.utilities{flex-shrink:0}}
.home-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 7px;color:#c8d4bb;text-decoration:none;letter-spacing:.05em;border-radius:6px}.home-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.home-link:hover{color:#eef3d9;background:#ffffff0c}.home-link:focus-visible{outline:2px solid #d5e5a6;outline-offset:3px}@media(max-width:700px){.home-link{min-height:44px;padding-left:0}.masthead{padding-bottom:5px}}

/* Keep the forest visible under the controls, especially on small displays. */
.stage::after{background:radial-gradient(ellipse at 49% 42%,transparent 48%,#00190b24 100%)}
.shade{background:linear-gradient(#07150d26,transparent 17%,transparent 76%,#04110da0)}
.landscape-toggle{display:none}
@media(pointer:coarse),(max-width:700px),(max-height:520px){
  .landscape-toggle{display:flex}
  .stage::after{background:radial-gradient(ellipse at 49% 42%,transparent 55%,#00190b14 100%)}
  .shade{background:linear-gradient(#07150d20,transparent 20%,transparent 78%,#04110d78)}
  .playback{padding:8px 10px 2px;background:#10241980;border-radius:10px}
  .utility{min-height:34px;background:#102b1b80}
}
@media(max-width:360px){.utilities{gap:3px}.utility{padding:5px 4px;font-size:8px}.label-copy{font-size:8px}.label-owner{font-size:7px}}
@media(orientation:landscape) and (max-height:520px){
  body{padding:6px max(12px,env(safe-area-inset-left))}
  .shell{width:100%}.masthead{font-size:9px;padding-bottom:4px}.home-link{min-height:32px}
  .stage{height:calc(100dvh - 56px);aspect-ratio:auto}.story-chapters,.footnote{display:none}
  .topline{top:12px;left:16px;right:16px}.playback{left:16px;right:16px;bottom:12px}
}
body.wide-view-active{overflow:hidden}
.viewing-frame{width:100%}
.viewing-frame.wide-frame{position:fixed;inset:0;z-index:50;width:var(--view-width,100vw);height:var(--view-height,100vh);height:var(--view-height,100dvh);overflow:hidden;background:#09120f}
.viewing-frame:fullscreen,.viewing-frame:-webkit-full-screen{margin:0;padding:0;border:0;background:#09120f}
.stage.wide-view{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
.stage.wide-view.rotated-view{width:var(--view-height,100vh);height:var(--view-width,100vw);left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%) rotate(90deg)}
.wide-view .topline{top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));align-items:flex-start}
.wide-view .playback{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.wide-view .landscape-toggle{display:flex}
.footnote .release-info{display:block;margin-top:5px;line-height:1.7;font-size:9px;letter-spacing:0;color:#8c9d86}.release-version{font-variant-numeric:tabular-nums}