*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#191c1e;color:#dce0dd;font-family:"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #afbdaa;outline-offset:4px}header{height:88px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #ffffff09;position:relative;z-index:2}h1{margin:0;font-size:21px;font-weight:450;letter-spacing:1px}.settings{display:flex;align-items:center;gap:32px;font-size:11px}.lighting{display:flex;align-items:center;gap:15px;color:#68736f}.lighting>div{display:flex;gap:5px}button{border:0;background:transparent;color:#87928c}.lighting button{padding:7px 10px;font-size:11px;border-radius:4px}.lighting button.active{color:#dce5da;background:#ffffff09}.rotate{display:flex;align-items:center;gap:8px;font-size:11px;padding:8px 0}.rotate-dot{width:6px;height:6px;border:1px solid #68766d;border-radius:50%}.rotate[aria-pressed=true]{color:#d1dfc8}.rotate[aria-pressed=true] .rotate-dot{background:#b9c7a9;border-color:#b9c7a9}#stage{position:relative;width:100%;height:calc(100vh - 88px);height:calc(100svh - 88px);touch-action:none;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#292e2b65,transparent 62%)}#stage:focus{outline:none}canvas{position:absolute;inset:0;display:block;cursor:grab}canvas:active{cursor:grabbing}.views{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;padding:5px 9px;background:#1c201db8;border:1px solid #ffffff0c;border-radius:6px;backdrop-filter:blur(10px)}.views button{padding:9px 22px;font-size:12px;white-space:nowrap;border-radius:3px;color:#89958d}.views button.active{color:#e1e8dc;background:#ffffff0b}.views button:hover,.lighting button:hover{color:#f0f3ec}#loading{position:absolute;z-index:5;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#191c1e;transition:opacity .5s}#loading span{width:24px;height:24px;border:1px solid #bec7b522;border-top-color:#bec7b5;border-radius:50%;animation:spin 1s linear infinite}#loading small{font-size:11px;letter-spacing:2px;color:#8c998f;margin-top:18px}@keyframes spin{to{transform:rotate(360deg)}}#canvas-error{position:absolute;inset:25%;background:#222924;padding:24px;line-height:1.8;font-size:13px}button:disabled{opacity:.4}@media(max-width:650px){header{height:108px;padding:22px 22px 14px;align-items:flex-start;flex-direction:column;gap:15px}h1{font-size:18px}.settings{width:100%;justify-content:space-between;gap:10px;font-size:10px}.lighting{gap:9px}.lighting button{font-size:10px;padding:5px 8px}.rotate{font-size:10px;padding:5px 0}#stage{height:calc(100vh - 108px);height:calc(100svh - 108px)}.views{bottom:22px;gap:4px;padding:4px 7px}.views button{font-size:11px;padding:9px 18px}}@media(prefers-reduced-motion:reduce){#loading span{animation:none}}