:root{--paper: #f7f4ec;--ink: #2b2823;--muted: #6e675c;--cinnabar: #a9433a;--line: rgba(43, 40, 35, .16);--panel: rgba(250, 247, 240, .94);--shadow: 0 18px 60px rgba(43, 40, 35, .12)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Songti SC,STSong,SimSun,"Noto Serif CJK SC","Noto Serif SC",serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.veil{position:fixed;left:0;right:0;z-index:5;pointer-events:none}.veil.top{top:0;height:168px;background:linear-gradient(to bottom,#f7f4ece6,#f7f4ec00)}.veil.bottom{bottom:0;height:186px;background:linear-gradient(to top,#f7f4eceb,#f7f4ec00)}.brand{position:fixed;top:max(22px,env(safe-area-inset-top));left:26px;z-index:10;pointer-events:none}.brand h1{margin:0;font-size:15px;font-weight:400;letter-spacing:.42em;color:var(--ink)}.brand .bar{width:26px;height:1px;margin:10px 0 9px;background:var(--cinnabar);opacity:.85}.name-btn{pointer-events:auto;display:inline-flex;align-items:baseline;gap:8px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.09em;cursor:pointer}.name-btn span{color:var(--cinnabar);font-size:11px;letter-spacing:.05em;opacity:.75}.name-btn:hover span{opacity:1}.tools{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;z-index:10;display:flex;gap:2px}.tool{pointer-events:auto;padding:7px 9px;border:1px solid transparent;border-radius:2px;background:none;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.16em;cursor:pointer;transition:color .16s ease,border-color .16s ease}.tool:hover{color:var(--ink)}.tool[aria-pressed=true]{color:var(--cinnabar);border-color:var(--line)}.tool.danger{color:var(--cinnabar)}.bottom{position:fixed;left:0;right:0;bottom:calc(104px + env(safe-area-inset-bottom));z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;pointer-events:none}.phenology{margin:0;font-size:12px;letter-spacing:.08em;color:var(--muted)}.phenology b{font-weight:400;color:var(--ink);margin-right:10px}.hint{margin:0;font-size:11px;letter-spacing:.06em;color:#6e675cb8;text-align:center;transition:opacity .4s ease}.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:11;display:flex;gap:4px;padding:6px;transform:translate(-50%);border:1px solid var(--line);border-radius:10px;background:#faf7f0e0;backdrop-filter:blur(8px);transition:opacity .2s ease}.dock-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:66px;min-height:54px;border:0;border-radius:7px;background:none;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.14em;cursor:pointer;transition:background .16s ease,color .16s ease}.dock-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.dock-btn:hover,.dock-btn:focus-visible{background:#a9433a14;color:var(--cinnabar);outline:none}.avatar-name{position:fixed;left:0;top:0;z-index:9;padding:2px 8px;border-radius:2px;background:#faf7f0b8;color:var(--ink);font-size:12px;letter-spacing:.12em;white-space:nowrap;pointer-events:none;transition:opacity .2s ease}.sit-panel .activity{margin:0 0 12px;font-size:13px;letter-spacing:.2em;color:var(--cinnabar)}.action{pointer-events:auto;padding:10px 24px 10px 28px;border:1px solid var(--ink);border-radius:2px;background:#faf7f0e0;color:var(--ink);font:inherit;font-size:13px;letter-spacing:.26em;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}.action:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--paper)}.panel{position:fixed;left:50%;top:50%;z-index:20;width:min(430px,calc(100vw - 40px));max-height:calc(100vh - 80px);overflow:auto;padding:30px 30px 26px;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.panel h2{margin:0 0 18px;font-size:14px;font-weight:400;letter-spacing:.3em;color:var(--ink)}.panel p{margin:0 0 14px;font-size:13px;line-height:2;letter-spacing:.04em;color:var(--muted)}.panel .rule{height:1px;margin:20px 0;background:var(--line)}.panel .row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}.panel .row .action{padding:8px 18px 8px 22px;font-size:12px}.panel .ghost{pointer-events:auto;padding:8px 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;letter-spacing:.14em;cursor:pointer}.panel .ghost:hover{color:var(--cinnabar)}.close{position:absolute;top:14px;right:16px;pointer-events:auto;width:26px;height:26px;border:0;background:none;color:var(--muted);font:inherit;font-size:16px;line-height:1;cursor:pointer}.close:hover{color:var(--cinnabar)}.sit-panel{text-align:center}.sit-panel .ring-wrap{position:relative;width:168px;height:168px;margin:6px auto 18px}.sit-panel canvas{display:block;width:168px;height:168px}.sit-panel .ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.3em;color:var(--muted);pointer-events:none}.sit-panel .time{margin:0;font-size:22px;letter-spacing:.18em;color:var(--ink);font-variant-numeric:tabular-nums}.sit-panel .count{margin:6px 0 0;font-size:12px;letter-spacing:.18em;color:var(--muted)}.loading,.fallback{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--paper);color:var(--muted);font-size:13px;letter-spacing:.32em}.loading:after{content:"";width:26px;height:1px;background:var(--cinnabar);animation:breathe 1.8s ease-in-out infinite}@keyframes breathe{0%,to{opacity:.15;transform:scaleX(.6)}50%{opacity:.9;transform:scaleX(1)}}.fallback{padding:32px;text-align:center;line-height:2}.fallback p{max-width:320px;margin:0;letter-spacing:.1em;font-size:13px}.hidden{display:none!important}@media(max-width:560px){.brand{top:max(18px,env(safe-area-inset-top));left:18px}.brand h1{font-size:14px;letter-spacing:.34em}.tools{top:max(14px,env(safe-area-inset-top));right:12px}.tool{padding:6px 7px;font-size:11px}.phenology{font-size:11px}.hint{max-width:240px}.dock{bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);justify-content:space-around}.dock-btn{width:auto;flex:1 1 0;min-height:56px}}@media(orientation:landscape)and (max-height:520px){.veil.top{height:108px}.veil.bottom{height:128px}.brand{top:max(12px,env(safe-area-inset-top));left:16px}.brand .bar{margin:7px 0 6px}.tools{top:max(10px,env(safe-area-inset-top));right:12px}.dock{left:auto;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));width:auto;flex-direction:column;justify-content:flex-start;gap:2px;padding:5px;transform:none}.dock-btn{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:8px;width:92px;min-height:44px;padding:0 8px;font-size:11px;letter-spacing:.08em;white-space:nowrap}.dock-btn svg{width:18px;height:18px}.bottom{left:16px;right:112px;bottom:calc(14px + env(safe-area-inset-bottom));align-items:flex-start;gap:4px;padding:0}.hint{display:none}.panel{width:min(520px,calc(100vw - 120px));max-height:calc(100vh - 20px);padding:18px 24px 16px}.panel h2{margin-bottom:10px}.panel p{margin-bottom:8px;line-height:1.8}.panel .rule{margin:12px 0}.sit-panel .ring-wrap,.sit-panel canvas{width:128px;height:128px}.sit-panel .ring-wrap{margin:2px auto 10px}}@media(prefers-reduced-motion:reduce){.loading:after{animation:none;opacity:.6}}