*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Microsoft YaHei,sans-serif;color:#334638;background:#e9ecec;overflow:hidden}#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:absolute;left:24px;top:28px;pointer-events:none;padding-right:110px}header small{font-size:9px;letter-spacing:2px;color:#819086}h1{font-size:20px;font-weight:500;margin:7px 0}header p{font-size:10px;color:#77867b;margin:0}.toolbar{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:7px;background:#ffffffed;border:1px solid #5b765329;border-radius:4px;box-shadow:0 8px 24px #344a3910}.toolbar span{border-left:1px solid #bbcbbd;margin:5px}button{font:inherit;font-size:11px;min-width:36px;height:35px;border:0;color:#516b54;background:transparent;cursor:pointer;border-radius:3px;padding:0 8px}button:hover{background:#e5ecdf}button[aria-pressed=true]{background:#d9e8ca;color:#2f542c}button:focus-visible{outline:2px solid #478360;outline-offset:2px}.status{position:absolute;bottom:77px;width:100%;text-align:center;font-size:9px;color:#748675;pointer-events:none}#error{position:absolute;top:40%;left:12%;right:12%;padding:22px;background:#f5f6ee;font-size:13px}#error[hidden]{display:none}@media(max-width:450px){header{left:18px;top:22px}h1{font-size:18px}.toolbar{gap:1px;padding:6px}button{padding:0 6px;min-width:33px}.toolbar span{margin:5px 2px}}