*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;color:#bdcfcc;background:transparent;font:15px Arial,"Malgun Gothic",sans-serif}body{background:radial-gradient(ellipse at 50% 75%,#39545238,transparent 65%)}#viewport{position:absolute;inset:0 0 33px}canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-3px}canvas:focus-visible,button:focus-visible{outline:2px solid #e6b477}#status{position:absolute;inset:0 0 33px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:12px;text-align:center;background:#14252aef;font-size:15px}#status[hidden],#retry[hidden]{display:none}button{font:inherit;color:#bcd1ce;border:1px solid #56757066;background:#16302b66;border-radius:6px;cursor:pointer;min-width:30px;min-height:27px}button:hover{background:#4e78704d;color:white}#retry{padding:7px 12px}#tools{position:absolute;bottom:0;width:100%;height:33px;padding:2px 9px;display:flex;align-items:center;justify-content:flex-end;gap:4px;color:#8ca5a2;font-size:14px}#tools button{font-size:19px;line-height:1}#tools button:disabled{opacity:.35}.spinner{width:19px;height:19px;border:2px solid #577d7380;border-top-color:#b6d6c6;border-radius:50%;animation:spin .9s linear infinite}body[data-state=error] .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.zoom{display:none;gap:5px}body[data-expanded=true] .zoom{display:flex}body[data-expanded=true] #tools{justify-content:flex-end;gap:8px}body[data-expanded=true] #tools{height:40px}body[data-expanded=true] #viewport{bottom:40px}