html, body { margin: 0; height: 100%; overflow: hidden; background: var(--color-bg); color: var(--color-text); }
a { text-decoration: none; }

.stage { position: relative; width: 100%; height: 100vh; min-height: 520px; overflow: hidden; background: var(--color-bg); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 2.4s ease; }
.scene.is-ready { opacity: 1; }

/* invisible ping target; scene.js repositions it each frame from the outpost geometry */
.hit { position: absolute; left: calc(60% - 44px); top: calc(66% - 64px); width: 88px; height: 70px; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; }

/* logo */
.logo { position: absolute; top: 22px; left: 36px; display: flex; align-items: center; padding: 6px 4px; color: var(--color-text); }
.logo-box { position: relative; display: flex; align-items: center; font-size: 22px; font-weight: 700; line-height: 1; }
.logo-l { display: inline-block; margin-right: 0.16em; color: color-mix(in srgb, var(--color-text) 92%, transparent); transition: color 0.45s ease; transform-origin: 0% 60%; will-change: transform; }
.logo-l.is-o { color: transparent; }
.logo-box.is-hover .logo-l:not(.is-o) { color: var(--color-accent-200); }
.logo-planet { position: absolute; left: 0; top: 0; width: 150px; height: 150px; pointer-events: none; }
.logo-pad { position: absolute; left: 0; top: -10px; bottom: -10px; right: -100px; }
.logo-pad[hidden] { display: none; }

/* clock */
.clock { position: absolute; top: 30px; right: 40px; display: flex; align-items: center; gap: 10px; }
.clock-ring { position: relative; width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--color-accent-300) 0deg, var(--color-neutral-700) 0); }
.clock-ring > span { position: absolute; inset: 2px; border-radius: 50%; background: var(--color-bg); }
.clock-time { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-text) 82%, transparent); font-feature-settings: 'tnum' 1; }
.clock-tz { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* sound toggle */
.sound { position: absolute; left: 36px; bottom: 28px; }
.sound .btn { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.sound svg[hidden] { display: none; }

/* visitors link */
.visitors-link { position: absolute; right: 40px; bottom: 30px; display: flex; align-items: center; gap: 10px; padding: 6px 2px; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 62%, transparent); transition: color 0.3s ease; }
.visitors-link:hover { color: var(--color-text); }
.visitors-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-300); box-shadow: 0 0 8px var(--color-accent); }

/* visitor panel */
.panel-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow: auto; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 24px; background: var(--color-bg); box-shadow: var(--shadow-lg); }
.panel[hidden], .panel-overlay[hidden] { display: none; }
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head h2 { font-size: 22px; margin: 0 auto 0 0; }
.panel-note { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.panel-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel-total { display: flex; flex-direction: column; gap: 4px; }
.panel-big { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-feature-settings: 'tnum' 1; }
.panel-sub { font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.panel .table { width: 100%; }
.panel .table th.num, .panel .table td.num { text-align: right; width: 70px; font-feature-settings: 'tnum' 1; }
.panel .table th.barcol { width: 96px; }
.cty { display: flex; align-items: center; gap: 10px; }
.flag { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--color-divider); }
.flag-none { display: block; width: 20px; height: 15px; border-radius: 2px; background: var(--color-neutral-800); }
.cc { width: 22px; font-size: 10px; letter-spacing: 0.06em; color: var(--color-accent-300); }
.bar { display: block; height: 3px; border-radius: 2px; background: var(--color-neutral-800); }
.bar > span { display: block; height: 100%; border-radius: 2px; background: var(--color-accent); }
.arrivals { display: flex; flex-direction: column; gap: 4px; }
.eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 6px; }
.arrival { display: grid; grid-template-columns: 112px 20px 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--color-divider); }
.arrival .when { font-feature-settings: 'tnum' 1; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.arrival .cc { width: auto; }
.arrival .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .table th.num.bots, .panel .table td.num.bots { width: 56px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.botrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--color-divider); }
.botrow .nm { margin-right: auto; }
.botrow .n { font-feature-settings: 'tnum' 1; }
.tag-sm { padding: 1px 7px; font-size: 10px; letter-spacing: 0.06em; }