:root{color:#24362d;font-synthesis:none;--panel:#fffbead1;--ink:#24362d;--muted:#5d7165;--sun:#e6ad43;--rain:#627f9e;--night:#243b77;background:#dce7dd;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}body{background:radial-gradient(circle at 16% 9%,#ffffe8cc,#0000 32%),linear-gradient(145deg,#dfeadc 0%,#b8d1c6 48%,#8eacb5 100%)}.app-shell{min-height:100%;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));place-items:center;display:grid}.experience{aspect-ratio:16/10;isolation:isolate;background:#d8e8d2;border-radius:clamp(16px,2vw,30px);width:min(100%,160vh - 32px);position:relative;overflow:hidden;box-shadow:0 22px 70px #1f363147,inset 0 0 0 1px #ffffffb3}.garden-host,.garden-canvas{width:100%;height:100%;position:absolute;inset:0}.garden-canvas{object-fit:contain;display:block}.topbar{z-index:20;pointer-events:none;justify-content:flex-end;align-items:flex-start;gap:16px;display:flex;position:absolute;top:clamp(12px,1.7vw,28px);left:clamp(14px,2vw,34px);right:clamp(14px,2vw,34px)}.tools{pointer-events:auto;gap:8px;display:flex}.audio-control{position:relative}.icon-button{color:#395146;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;background:#fffdefcc;border:1px solid #ffffffbf;border-radius:50%;place-items:center;width:clamp(46px,4.5vw,58px);height:clamp(46px,4.5vw,58px);display:grid;box-shadow:0 7px 22px #263d3326}.icon-button:disabled{opacity:.62;cursor:default}.icon-button svg{width:52%;height:52%}.volume-popover{color:#365047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;background:#fffdefe6;border:1px solid #ffffffc7;border-radius:15px;width:210px;padding:10px 12px 12px;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;top:calc(100% + 9px);right:0;transform:translateY(-5px);box-shadow:0 10px 26px #1e352d2e}.audio-control.is-open .volume-popover{opacity:1;visibility:visible;transform:translateY(0)}.volume-popover span{margin-bottom:6px;font-size:12px;font-weight:700;display:block}.volume-row{align-items:center;gap:9px;display:flex}.volume-popover input{accent-color:#71906f;flex:1;min-width:0}.mute-button{color:#395146;cursor:pointer;background:#fffff8e0;border:1px solid #566f6238;border-radius:50%;flex:0 0 31px;place-items:center;width:31px;height:31px;padding:0;display:grid;box-shadow:0 3px 9px #233a301f}.mute-button svg{width:18px;height:18px}.icon-button:focus-visible,.mute-button:focus-visible,.node-button:focus-visible,.timeline-input:focus-visible{outline-offset:3px;outline:3px solid #fff7c5}.timeline-panel{z-index:30;-webkit-backdrop-filter:blur(14px)saturate(1.06);backdrop-filter:blur(14px)saturate(1.06);background:#fffbeac2;border:1px solid #fffc;border-radius:19px;padding:3px clamp(12px,1.45vw,21px) 2px;position:absolute;bottom:clamp(7px,1vw,14px);left:clamp(12px,2vw,34px);right:clamp(12px,2vw,34px);box-shadow:0 7px 24px #1e352d2e}.timeline-track-wrap{touch-action:none;cursor:grab;height:clamp(38px,3.4vw,44px);position:relative}.timeline-track-wrap.is-dragging{cursor:grabbing}.timeline-gradient{background:linear-gradient(90deg,#efbd58 0%,#c9c8ae 30%,#7794ad 60%,#384d86 86%,#233467 100%);border-radius:999px;height:8px;position:absolute;top:50%;left:1%;right:1%;transform:translateY(-50%);box-shadow:inset 0 2px 5px #1c272c3d,0 1px #ffffffbf}.timeline-progress{height:8px;width:calc(var(--progress,0) * 0.98%);pointer-events:none;background:#ffffff80;border-radius:999px;position:absolute;top:50%;left:1%;transform:translateY(-50%)}.timeline-input{opacity:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;inset:0}.timeline-thumb{z-index:2;top:50%;left:calc(var(--progress,0) * 1%);color:#fff;background:color-mix(in srgb, var(--phase-color,var(--sun)) 88%, #fff 12%);pointer-events:none;border:2px solid #ffffffe6;border-radius:50%;place-items:center;width:clamp(32px,3.15vw,40px);height:clamp(32px,3.15vw,40px);transition:background .3s;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px 10px #1e2f2a47}.timeline-thumb svg{width:56%}.nodes{grid-template-columns:30fr 30fr 25fr 15fr;align-items:start;margin:-4px 0 0;display:grid}.node-button{color:#5d6d65;cursor:pointer;background:0 0;border:0;justify-content:flex-start;align-items:center;gap:5px;min-height:29px;padding:1px 0 0;font-size:clamp(10px,.92vw,13px);display:flex}.node-button:nth-child(2),.node-button:nth-child(3){transform:translate(-7px)}.node-button:last-child{justify-self:end}.node-dot{background:#fffbe7;border:2px solid;border-radius:50%;flex:none;width:8px;height:8px}.node-button.is-active{color:var(--phase-color,var(--sun));font-weight:800}.node-button.is-active .node-dot{background:currentColor;box-shadow:0 0 0 4px #ffffff94}.loading{z-index:100;color:#355145;background:linear-gradient(145deg,#eff4df,#c7ddd2);place-items:center;transition:opacity .45s,visibility .45s;display:grid;position:absolute;inset:0}.loading.is-done{opacity:0;visibility:hidden}.loading-card{text-align:center}.loading-bloom{border:6px solid #4f745d2e;border-top-color:#73956e;border-radius:50%;width:62px;height:62px;margin:0 auto 14px;animation:1s linear infinite spin}.loading strong{font-family:STKaiti,KaiTi,serif;font-size:24px;display:block}.loading span{color:#6c8075;margin-top:6px;font-size:13px;display:block}.rotate-message{z-index:999;color:#f9f4da;text-align:center;background:#1c3b4d;place-items:center;padding:28px;display:none;position:fixed;inset:0}.rotate-message svg{width:56px;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}@media (orientation:portrait) and (width<=900px){.rotate-message{display:grid}}@media (height<=650px){.app-shell{padding:4px}.experience{width:min(100%,160vh - 12.8px)}.timeline-panel{padding-top:2px;padding-bottom:1px;bottom:5px}.timeline-track-wrap{height:36px}.node-button{min-height:27px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}