:root{color-scheme:light;font-family:Noto Sans SC,Microsoft YaHei UI,system-ui,sans-serif;color:#17303a;background:#9cb8c4;font-synthesis:none;--ink: #17303a;--muted: #55717b;--glass: rgba(239, 247, 247, .68);--glass-border: rgba(255, 255, 255, .56)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}button:focus-visible{outline:3px solid rgba(238,166,111,.8);outline-offset:3px}#app{position:relative;isolation:isolate;background:linear-gradient(#9fc1cc,#d9e4e0)}#town-canvas{width:100%;height:100%;display:block;touch-action:none}.atmosphere{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 42%,rgba(20,53,64,.08))}.glass-panel{background:var(--glass);border:1px solid var(--glass-border);box-shadow:0 18px 60px #21414a29;backdrop-filter:blur(18px)}.brand-panel{position:absolute;z-index:3;top:clamp(18px,4vw,48px);left:clamp(18px,5vw,72px);padding:17px 21px 18px;border-radius:4px 24px 24px}.eyebrow{margin:0 0 5px;letter-spacing:.18em;font-size:10px;font-weight:800;color:#5b7881}h1{margin:0;font:500 clamp(28px,4vw,48px)/1.2 Georgia,"Noto Serif SC",serif;letter-spacing:.08em}.subtitle{margin:7px 0 0;color:var(--muted);font-size:13px;letter-spacing:.1em}.camera-controls{position:absolute;z-index:4;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}.camera-control{min-width:106px;height:50px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.24);border-radius:15px;color:#eff7f6;background:#16272ed1;box-shadow:0 12px 34px #0a181e38;backdrop-filter:blur(16px);cursor:pointer;transition:background .2s,transform .2s,border-color .2s}.camera-control:hover{background:#233c44e6;border-color:#ffffff6b;transform:translateY(-1px)}.camera-control span:first-child{font-size:18px}.camera-control.icon-control{width:50px;min-width:50px;padding:0;border-radius:50%}.camera-control.icon-control svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.camera-control.icon-control.active{color:#f1d8b6;border-color:#f1d8b685}.control-label{font-size:12px;font-weight:700}.brand-panel,.camera-controls,.loading,.notice,.build-mark{transition-property:opacity,visibility,transform;transition-duration:.32s;transition-timing-function:ease}#app.ui-hidden .brand-panel,#app.ui-hidden .camera-controls,#app.ui-hidden .loading,#app.ui-hidden .notice,#app.ui-hidden .build-mark{opacity:0;visibility:hidden;pointer-events:none}.camera-panel-backdrop{position:absolute;z-index:5;inset:0;visibility:hidden;opacity:0;border:0;background:#13262d14;cursor:default;transition:opacity .24s,visibility .24s}.camera-panel-backdrop.open{visibility:visible;opacity:1}.camera-panel{position:absolute;z-index:6;right:max(18px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 64px);width:min(350px,calc(100% - 36px));max-height:min(68vh,520px);padding:18px;overflow-y:auto;overscroll-behavior:contain;border-radius:22px;opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);transform-origin:right bottom;transition:opacity .24s,visibility .24s,transform .3s cubic-bezier(.22,.7,.2,1)}.camera-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.panel-heading{display:flex;justify-content:space-between;gap:18px;align-items:center}.panel-heading h2{margin:0;font:600 21px/1.25 Georgia,"Noto Serif SC",serif}#close-camera-panel{width:34px;height:34px;border-radius:50%;border:1px solid rgba(53,86,95,.18);background:#ffffff5c;font-size:22px;line-height:1;color:#42616a;cursor:pointer}.camera-group{margin-top:15px}.camera-group h3{margin:0 0 7px;color:#58737c;font-size:10px;letter-spacing:.12em}.scene-camera-group{padding:11px 13px;border:1px solid rgba(255,255,255,.52);border-radius:14px;color:#5d7881;background:#eff7f78f;box-shadow:0 9px 24px #21414a17;backdrop-filter:blur(14px)}.scene-camera-group summary{color:#35545d;font-size:11px;font-weight:800;cursor:pointer;list-style:none}.scene-camera-group summary::-webkit-details-marker{display:none}.scene-camera-group summary:before{content:"▸";display:inline-block;margin-right:6px;transition:transform .2s ease}.scene-camera-group[open] summary:before{transform:rotate(90deg)}.scene-camera-group .camera-options{margin-top:7px;grid-template-columns:1fr}.camera-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.camera-options button{min-height:42px;padding:10px 13px;text-align:left;border:1px solid transparent;border-radius:13px;color:#48656f;background:#ffffff4d;font-size:13px;font-weight:750;cursor:pointer}.camera-options button:hover{background:#ffffff80}.camera-options button.active{border-color:#41697357;background:#ffffffb8;color:#1f414b}.character-model-option{display:grid;grid-template-columns:minmax(0,1fr) 42px;overflow:hidden;border:1px solid transparent;border-radius:13px;background:#ffffff4d;transition:background .16s ease,border-color .16s ease}.character-model-option:hover{background:#ffffff80}.character-model-option:has(>[data-camera-mode].active){border-color:#41697357;background:#ffffffb8}.camera-options .character-model-option>button{border:0;border-radius:0;background:transparent}.camera-options .character-model-option>button:hover{background:#ffffff3d}.character-model-option>[data-camera-mode]{min-width:0}.camera-options .model-switch{width:42px;padding:0;display:grid;place-items:center;border-left:1px solid rgba(65,105,115,.14);text-align:center}.model-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}.camera-options .model-switch[aria-pressed=true]{color:#1f5361;background:#fff3}.model-switch[aria-pressed=true] svg{transform:rotate(90deg)}.model-switch[aria-busy=true] svg{animation:model-switch-spin .75s linear infinite}@keyframes model-switch-spin{to{transform:rotate(360deg)}}.asset-credits{margin-top:14px;color:#5d7881;font-size:10px;line-height:1.5}.asset-credits summary{display:flex;align-items:center;justify-content:space-between;min-height:32px;color:#58737c;font-size:10px;font-weight:800;letter-spacing:.12em;cursor:pointer;list-style:none}.asset-credits summary::-webkit-details-marker{display:none}.asset-credits summary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}.asset-credits[open] summary svg{transform:rotate(180deg)}.asset-credits p{margin:7px 0 0}.asset-credits a{color:#3d6975;text-underline-offset:2px}.loading{position:absolute;z-index:8;inset:auto 50% 50%;transform:translate(50%,50%);width:min(320px,calc(100vw - 40px));padding:16px 18px;border-radius:18px;transition:opacity .4s,visibility .4s}.loading.done{opacity:0;visibility:hidden}.loading-bar{display:block;height:3px;border-radius:9px;background:#2f545e24;overflow:hidden;margin-bottom:11px}.loading-bar i{display:block;width:38%;height:100%;background:#739ba5;border-radius:inherit;animation:load 1.2s ease-in-out infinite alternate}@keyframes load{to{transform:translate(165%)}}#loading-label{font-size:12px;color:#55717b}.notice{position:absolute;z-index:8;top:18px;left:50%;transform:translate(-50%,-20px);opacity:0;background:#1d3a42d9;color:#eef7f5;border-radius:999px;padding:10px 16px;font-size:12px;pointer-events:none;transition:opacity .25s,transform .25s}.notice.show{opacity:1;transform:translate(-50%)}.build-mark{position:absolute;z-index:2;left:16px;bottom:10px;margin:0;color:#1f3d458c;font:700 9px ui-monospace,monospace;letter-spacing:.12em}@media(max-width:700px){.brand-panel{padding:13px 16px 14px}h1{font-size:28px}.subtitle{font-size:11px}.camera-controls{right:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:8px}.camera-control{min-width:92px;height:46px;padding:0 12px}.camera-control.icon-control{width:46px;min-width:46px}.camera-control span:first-child{font-size:17px}.control-label{font-size:10px}.camera-panel{right:8px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 58px);width:calc(100% - 16px);max-height:62vh;padding:15px;border-radius:20px}.build-mark{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
