:root{font-family:Avenir Next,Trebuchet MS,PingFang SC,Microsoft YaHei,sans-serif;color:#f1f1df;background:#23372f;font-synthesis:none;--night: 0;--ui-bg: rgba(20, 34, 28, .46);--ui-border: rgba(241, 241, 223, .22)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-height:100dvh}button{font:inherit}button:focus-visible{outline:2px solid #f3d893;outline-offset:4px}#app{position:relative;isolation:isolate;background:#71877a}.scene-poster{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 30% 18%,rgba(242,220,158,.7),transparent 36%),linear-gradient(155deg,#92a48b,#4f6c5c 42%,#203b34)}#scene-container,#scene-container canvas{position:absolute;inset:0;width:100%;height:100%}#scene-container canvas{display:block;touch-action:none;cursor:default}.vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 44%,transparent 42%,rgba(6,18,15,.14) 76%,rgba(5,14,13,.38) 120%)}.brand{position:absolute;z-index:2;top:max(28px,env(safe-area-inset-top));left:max(34px,env(safe-area-inset-left));display:flex;align-items:center;gap:13px;pointer-events:none;color:#f4f1d9;text-shadow:0 2px 20px rgba(5,20,15,.34)}.brand-mark{width:34px;height:34px;opacity:.9}.brand-mark svg{width:100%;height:100%}.brand-en{margin:0 0 3px;font-size:9px;letter-spacing:.28em;font-weight:600;opacity:.74}.brand h1{margin:0;font-family:"Noto Serif SC",Songti SC,serif;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:.13em}.cycle-button{position:absolute;z-index:3;top:max(28px,env(safe-area-inset-top));right:max(34px,env(safe-area-inset-right));display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px 8px 14px;border:1px solid var(--ui-border);border-radius:999px;color:#f3f0da;background:var(--ui-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;box-shadow:0 8px 30px #0614101f;transition:background .18s ease-out,border-color .18s ease-out,transform .18s ease-out}.cycle-button:hover{background:#1f3128ad;border-color:#f3d89385}.cycle-button:active{transform:scale(.97)}.cycle-icon{display:grid;place-items:center;width:20px;height:20px;color:#f3d893}.cycle-icon svg{grid-area:1 / 1;width:20px;height:20px;transition:opacity .22s ease-out,transform .22s ease-out}.moon-icon{opacity:0;transform:rotate(-30deg) scale(.8)}body.is-night .sun-icon{opacity:0;transform:rotate(30deg) scale(.8)}body.is-night .moon-icon{opacity:1;transform:rotate(0) scale(1)}#cycle-label{font-size:12px;letter-spacing:.08em}.key{display:inline-grid;place-items:center;border:1px solid rgba(244,241,217,.26);color:#f4f1d9;background:#f0f0d714}.key-small{width:25px;height:25px;border-radius:50%;font-size:10px}.loading{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:15px;padding:17px 22px;min-width:245px;border:1px solid rgba(244,241,217,.24);border-radius:14px;background:#12221cbd;backdrop-filter:blur(16px);box-shadow:0 16px 60px #05140e3d;transition:opacity .24s ease-out,transform .24s ease-out}.loading.is-done{opacity:0;transform:translate(-50%,-46%);pointer-events:none}.loading-ring{width:27px;height:27px;border:1.5px solid rgba(243,216,147,.24);border-top-color:#f3d893;border-radius:50%;animation:spin 1s linear infinite}.loading strong,.loading span{display:block}.loading strong{font-family:"Noto Serif SC",Songti SC,serif;font-size:15px;font-weight:500;letter-spacing:.08em}.loading div span{margin-top:4px;color:#d4dac7;font-size:11px}@keyframes spin{to{transform:rotate(360deg)}}.controls{position:absolute;z-index:2;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;align-items:center;gap:18px;padding:10px 16px;white-space:nowrap;border:1px solid var(--ui-border);border-radius:13px;background:var(--ui-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#e8ead8;transition:opacity .24s ease-out,transform .24s ease-out}.controls.is-quiet{opacity:.62;transform:translate(-50%) translateY(4px)}.controls:hover{opacity:1}.control-group{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.03em}.keys{display:flex;gap:3px}kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border:1px solid rgba(241,241,223,.28);border-radius:5px;background:#f1f1df14;box-shadow:inset 0 -2px #0000001f;color:#f4f1d9;font:500 10px/1 Outfit,sans-serif}.control-divider{width:1px;height:18px;background:#f1f1df29}.mouse-icon{position:relative;width:15px;height:21px;border:1.3px solid currentColor;border-radius:8px;opacity:.8}.mouse-icon:before{content:"";position:absolute;top:3px;left:6px;width:1px;height:5px;background:currentColor}.toast{position:absolute;z-index:3;left:50%;bottom:100px;transform:translate(-50%,8px);padding:9px 15px;border-radius:999px;background:#101f19a3;border:1px solid rgba(243,216,147,.22);backdrop-filter:blur(12px);color:#f3e8bd;font-family:"Noto Serif SC",Songti SC,serif;font-size:12px;letter-spacing:.08em;opacity:0;pointer-events:none;transition:opacity .18s ease-out,transform .18s ease-out}.toast.is-visible{opacity:1;transform:translate(-50%)}.mobile-note{display:none}.error-panel{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(420px,calc(100% - 40px));padding:22px;border-radius:14px;background:#243b33;border:1px solid #9f8e62;color:#f4f1d9}.error-panel strong{font-family:"Noto Serif SC",serif}.error-panel p{margin:8px 0 0;color:#e0e3d2;font-size:14px;line-height:1.6}@media(max-width:700px){.brand{top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left))}.brand h1{font-size:20px}.brand-en{font-size:8px}.brand-mark{width:29px;height:29px}.cycle-button{top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));padding-left:11px}#cycle-label{display:none}.controls{bottom:max(52px,env(safe-area-inset-bottom));gap:12px;padding:9px 12px}.control-group{font-size:10px}.control-divider,.controls .control-group:last-child{display:none}.mobile-note{display:block;position:absolute;z-index:2;bottom:max(20px,env(safe-area-inset-bottom));left:0;right:0;margin:0;text-align:center;color:#e2e5d4;font-size:11px;letter-spacing:.04em;pointer-events:none}.toast{bottom:116px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}