*{box-sizing:border-box}html,body{margin:0;height:100%;color:#2d2923;background:#f7f4ed;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid #d9d0c3;background:transparent;min-height:42px;padding:8px 16px;cursor:pointer;border-radius:3px;white-space:nowrap}button:hover{border-color:#7f674d}button[aria-pressed=true]{background:#2e2a24;color:#fff;border-color:#2e2a24}button:disabled{opacity:.35;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #936c41;outline-offset:3px}#viewer{height:100dvh;min-height:570px;display:flex;flex-direction:column}header{display:flex;gap:24px;align-items:center;padding:14px 18px;border-bottom:1px solid #ded7cc}.wordmark{font:23px Georgia,serif;letter-spacing:.18em}.wordmark span{font:10px sans-serif;letter-spacing:.05em;color:#716655}nav{display:flex;gap:6px}.expand{margin-left:auto;color:#5c5141;text-decoration:none;font-size:12px;white-space:nowrap}#stage{position:relative;flex:1;min-height:280px;overflow:hidden;background:#e9e3d9}#stage canvas{display:block;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;background:#e9e3d9}#loading[hidden]{display:none}.spinner{border:2px solid #d7cdbd;border-top-color:#665844;border-radius:50%;width:30px;height:30px;margin:auto;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.zooms{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:6px;z-index:1}.zooms button{padding:0;min-width:42px;background:#faf8f1ee;font-size:21px}.controls{padding:12px 18px 8px;border-top:1px solid #d9d0c3}.modes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}.modes>span{color:#796b58;font-size:11px;margin-right:8px}.modes button{min-height:38px;padding:5px 13px;font-size:12px}.switches{display:flex;flex-wrap:wrap;gap:4px 16px}.switches label{display:flex;align-items:center;gap:7px;min-height:36px;cursor:pointer;white-space:nowrap;font-size:13px}input{accent-color:#5e6e4d;width:17px;height:17px;margin:0}details{margin-top:7px}summary{font-size:12px;color:#766b5c;cursor:pointer;min-height:34px;padding:7px 0}details .switches{padding:4px 0 8px;border-top:1px solid #e4ddd3}footer{display:flex;justify-content:space-between;color:#857a6b;border-top:1px solid #e3dccf;padding-top:7px;font-size:10px}#status{color:#534a3e}@media(max-width:600px){header{padding:10px 12px;gap:8px;flex-wrap:wrap}.wordmark{font-size:19px}.expand{font-size:11px}nav{order:3;flex-basis:100%;display:grid;grid-template-columns:repeat(4,1fr)}nav button{padding:6px 8px;font-size:12px;min-height:40px}.controls{padding:8px 12px}.modes>span{display:none}.modes{gap:5px}.modes button{flex:1;padding:5px 8px;min-height:38px}.switches{gap:2px 13px}.switches label{font-size:12px}.zooms{bottom:12px;right:12px}footer{font-size:9px}.controls details[open]{max-height:180px;overflow:auto}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}