:root{color-scheme:dark;font-family:monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080b16;color:#e8e4d5;font-family:monospace}
body{padding:10px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#th{width:min(100%,960px);margin:0 auto}
.th-title{margin:0 0 8px;font-size:16px;color:#a8e0f5;letter-spacing:.08em;text-align:center}
.th-stage{width:100%;max-width:960px;margin:auto;line-height:0}
.th-stage canvas{width:100%;height:auto;max-height:calc(100vh - 200px);object-fit:contain;image-rendering:pixelated;display:block;margin:auto;touch-action:none;cursor:grab;background:#080b16}
.th-stage canvas.th-drag{cursor:grabbing}
.th-count{min-height:15px;margin:6px 0 0;color:#ffd166;font-size:12px;text-align:right}
.th-caption{min-height:34px;margin:4px 0 0;color:#e8e4d5;font-size:12px;line-height:1.5;text-align:center}
.th-hud{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px auto 0;width:min(100%,960px)}
.th-btn{display:inline-block;padding:7px 12px;border:2px solid #3d4a74;border-radius:0;background:#141a2e;color:#e8e4d5;font:12px monospace;text-decoration:none;cursor:pointer}
.th-btn:hover,.th-btn:focus{background:#222c4a;color:#ffd166}
@media (prefers-reduced-motion: reduce){.th-stage canvas{}}