@charset "UTF-8";
:root { color-scheme: dark; --ink: #e8e5df; --muted: #a3a2a5; --gold: #d5b990; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050609; }
body { color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
[hidden] { display: none !important; }
#universe { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
canvas:active { cursor: grabbing; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 38%, #02030788 100%); z-index: 1; }
.header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; padding: 34px 48px; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 15px; pointer-events: auto; }
.brand > span:last-child { font-size: 22px; letter-spacing: 5px; line-height: 1; }
.brand-caption { display: block; color: var(--muted); font-size: 10px; letter-spacing: 3px; margin-top: 9px; }
.brand-mark { display: block; position: relative; width: 30px; height: 30px; border: 1px solid #b3ada0; border-radius: 50%; box-shadow: inset 7px 0 0 #d4cdc0; transform: rotate(-28deg); }
.brand-mark::after { content: ""; position: absolute; width: 44px; height: 12px; border: 1px solid #d4cdc078; border-radius: 50%; left: -8px; top: 7px; transform: rotate(-16deg); }
.brand-mark i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ded5c6; right: -6px; top: 8px; }
.scene-heading { position: absolute; top: 16%; left: 50%; width: max-content; text-align: center; transform: translateX(-50%); pointer-events: none; }
.eyebrow { font-size: 9px; letter-spacing: 4px; color: #aaa2a0; }
.scene-heading p { margin: 14px 0 0; font-size: 14px; letter-spacing: 6px; color: #cdc7c0; }
.orbit-guide { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(64vh, 56vw); height: min(64vh, 56vw); border: 1px solid #d5c2a710; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-guide::before, .orbit-guide::after { content: ""; position: absolute; top: 50%; height: 1px; width: 9px; background: #d5c2a745; }
.orbit-guide::before { left: -5px; } .orbit-guide::after { right: -5px; }
.orbit-north { position: absolute; left: 50%; top: -23px; transform: translateX(-50%); color: #928a7e; font-size: 8px; }
.orbit-guide i { position: absolute; width: 1px; height: 9px; left: 50%; bottom: -5px; background: #d5c2a745; }
.footer a:hover { color: var(--gold); }
.footer { position: absolute; left: 48px; right: 48px; bottom: 28px; display: flex; justify-content: flex-end; align-items: center; color: #8a8685; font-size: 8px; letter-spacing: 2px; pointer-events: none; }
.footer a { font-size: 9px; letter-spacing: 1px; }
.credits { display: flex; gap: 20px; pointer-events: auto; }
#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; white-space: nowrap; }
#loading p { font-size: 12px; letter-spacing: 2px; color: #c1b8ab; }
.loader { display: inline-block; width: 35px; height: 35px; border: 1px solid #bfa98930; border-top-color: var(--gold); border-radius: 50%; animation: spin 1.5s linear infinite; }
#retry { padding: 9px 18px; border: 1px solid #ffffff30; background: #161619; border-radius: 8px; }
.noscript { position: absolute; top: 50%; width: 100%; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .header { padding: 26px 30px; } .footer { left: 30px; right: 30px; } }
@media (max-width: 600px) {
  .header { padding: max(24px, env(safe-area-inset-top)) 24px 20px; }
  .brand { gap: 12px; } .brand > span:last-child { font-size: 18px; letter-spacing: 4px; }
  .brand-caption { font-size: 8px; letter-spacing: 2px; margin-top: 8px; }
  .brand-mark { width: 25px; height: 25px; } .brand-mark::after { width: 36px; left: -6px; top: 5px; }
  .scene-heading { top: 20%; } .eyebrow { font-size: 7px; letter-spacing: 2.5px; } .scene-heading p { font-size: 12px; letter-spacing: 4px; }
  .orbit-guide { width: 88vw; height: 88vw; }
  .footer { left: 24px; right: 24px; bottom: max(22px, env(safe-area-inset-bottom)); font-size: 6px; letter-spacing: 1px; } .footer a { font-size: 7px; letter-spacing: .5px; }
  .credits { gap: 10px; }
  #loading p { max-width: 80vw; white-space: normal; line-height: 1.8; }
}
@media (max-height: 580px) and (min-width: 601px) { .header { padding: 18px 30px; } .scene-heading { top: 19%; } .scene-heading p { display: none; } .footer { bottom: 14px; } }
@media (max-height: 700px) and (max-width: 600px) { .scene-heading { top: 18%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }