:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body, #viewer { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #111411; color: #f7f3e8; }
#viewer { position: relative; background: radial-gradient(circle at 50% 35%, #394039 0, #1d221e 48%, #101210 100%); }
#scene { display: block; width: 100%; height: 100%; touch-action: none; }
.title-card { position: absolute; left: clamp(18px, 4vw, 52px); top: clamp(18px, 4vw, 45px); pointer-events: none; text-shadow: 0 2px 18px #000; }
.title-card h1 { margin: .08em 0 0; font-family: Georgia, serif; font-size: clamp(32px, 6vw, 66px); font-weight: 400; letter-spacing: -.04em; }
.title-card p { margin: .3em 0; color: #dad8cd; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.title-card .eyebrow { color: #d3b66b; font-size: 11px; letter-spacing: .19em; }
.controls { position: absolute; right: 18px; top: 18px; display: flex; gap: 8px; }
button { border: 1px solid #ffffff35; border-radius: 999px; padding: 10px 15px; background: #0b0d0bbd; color: white; cursor: pointer; backdrop-filter: blur(8px); }
button:hover, button:focus-visible { border-color: #d3b66b; background: #292c26; outline: none; }
.help { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 18px; padding: 10px 18px; border: 1px solid #ffffff24; border-radius: 999px; background: #0b0d0bbd; color: #d6d7d1; font-size: 12px; white-space: nowrap; backdrop-filter: blur(8px); transition: opacity .5s; }
.help b { color: #fff; font-weight: 600; }
#loading, #error { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; background: #121512; text-align: center; }
#loading[hidden], #error[hidden] { display: none; }
.mark { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid #d3b66b; border-radius: 50%; color: #d3b66b; font-family: Georgia, serif; font-size: 25px; }
.progress { width: min(260px, 65vw); height: 3px; overflow: hidden; background: #ffffff18; }
#progress-bar { display: block; width: 0; height: 100%; background: #d3b66b; transition: width .2s; }
#error { padding: 30px; }
#error h1 { font-family: Georgia, serif; font-weight: 400; }
@media (max-width: 640px) { .help span:nth-child(3) { display: none; } .controls { top: auto; bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }