:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #181a1e; color: #fff; overflow: hidden; }
#viewer { position: fixed; inset: 0; }
canvas { display: block; touch-action: none; }
[hidden] { display: none !important; }
#loader-bg { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; background: #181a1ef5; }
#loader { text-align: center; max-width: 30rem; padding: 24px; }
#status { line-height: 1.7; }
progress { width: min(260px, 70vw); accent-color: #d8b981; }
.toolbar { position: fixed; z-index: 2; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 10px; background: #111c; border: 1px solid #ffffff29; border-radius: 12px; white-space: nowrap; }
button, .toolbar a { font: inherit; font-size: 14px; color: #fff; border: 1px solid #ffffff40; border-radius: 6px; background: #ffffff0c; padding: 10px 12px; text-decoration: none; cursor: pointer; }
button:hover, .toolbar a:hover { background: #ffffff20; }
button:disabled { opacity: .45; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid #e8c991; outline-offset: 3px; }
.hint { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; margin: 0; padding: 8px 12px; background: #111b; border-radius: 6px; font-size: 12px; pointer-events: none; }
@media (max-width: 480px) { .toolbar { gap: 5px; padding: 7px; } button, .toolbar a { font-size: 12px; padding: 10px 8px; } }