:root {
  color-scheme: dark;
  --accent: #5de9ff;
  --accent-rgb: 93, 233, 255;
  --accent-2: #368bff;
  --accent-2-rgb: 54, 139, 255;
  --bg: #020913;
  --surface: rgba(4, 31, 50, .68);
  --muted: #8cb0c2;
  --line: rgba(93, 233, 255, .3);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: #f3fbff; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }

.earth-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 18, 32, .28), rgba(2, 9, 19, .88)),
    radial-gradient(ellipse at 50% 62%, rgba(18, 95, 134, .48), transparent 43%),
    #020913;
}

#earthCanvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#earthCanvas:active { cursor: grabbing; }
.scene-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 9, 19, .74), transparent 18%, transparent 82%, rgba(2, 9, 19, .74)),
    linear-gradient(180deg, rgba(2, 9, 19, .2), transparent 35%, rgba(2, 9, 19, .54));
}

.topbar, .welcome, .business-orbit, .detail-panel, footer { position: absolute; z-index: 3; }
.topbar { inset: 26px 34px auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: #f7fdff; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); color: #e8fdff; font: 700 16px Bahnschrift, "Arial Narrow", Arial, sans-serif; box-shadow: inset 0 0 18px rgba(var(--accent-rgb), .09); }
.brand-name { font: 700 15px Bahnschrift, "Arial Narrow", Arial, sans-serif; letter-spacing: 2px; }
.brand-name small { display: block; margin-top: 4px; color: #9fc2d0; font: 9px "Microsoft YaHei", sans-serif; letter-spacing: 1px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.concept-name { color: var(--accent); font: 600 10px Bahnschrift, Arial, sans-serif; letter-spacing: 3px; }
.lang-switch { display: grid; place-items: center; width: 40px; height: 34px; border: 1px solid var(--line); color: #dcf9ff; text-decoration: none; font: 10px Bahnschrift, Arial, sans-serif; transition: .2s ease; }
.lang-switch:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }

.welcome { left: 50%; top: 11%; z-index: 6; width: min(650px, 90vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.welcome p { margin: 0; color: var(--accent); font: 650 10px Bahnschrift, Arial, sans-serif; letter-spacing: 7px; }
.welcome h1 { margin: 8px 0 0; color: #e7fbff; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(60px, 6.4vw, 100px); font-weight: 400; line-height: .88; letter-spacing: 9px; text-shadow: 0 0 15px rgba(var(--accent-rgb), .5), 0 0 55px rgba(var(--accent-rgb), .18); }
.welcome h2 { margin: 14px 0 18px; font-size: clamp(16px, 1.5vw, 23px); font-weight: 650; letter-spacing: 5px; }
.enter-site { pointer-events: auto; min-width: 166px; min-height: 44px; padding: 0 17px 0 22px; display: inline-flex; align-items: center; justify-content: space-between; border: 1px solid rgba(var(--accent-rgb), .74); border-radius: 2px; background: rgba(2, 27, 44, .72); cursor: pointer; letter-spacing: 2px; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.enter-site span:last-child { color: var(--accent); font-size: 20px; }
.enter-site:hover { transform: translateY(-2px); background: rgba(var(--accent-rgb), .14); box-shadow: 0 0 32px rgba(var(--accent-rgb), .2); }
.enter-site:active { transform: scale(.98); }

.business-orbit { inset: 0; z-index: 4; pointer-events: none; perspective: 1200px; transform-style: preserve-3d; }
.business-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 92px;
  padding: 14px 15px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .48);
  border-radius: 4px;
  background: linear-gradient(140deg, rgba(var(--accent-rgb), .15), var(--surface));
  box-shadow: inset 0 0 25px rgba(var(--accent-rgb), .08), 0 15px 35px rgba(0, 0, 0, .26);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: layout paint;
  isolation: isolate;
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  transform-style: flat;
  will-change: transform, opacity;
  transition: border-color .2s ease, filter .2s ease, box-shadow .2s ease;
}
.business-card::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.business-card em { position: absolute; right: 13px; top: 10px; color: rgba(var(--accent-rgb), .7); font: 700 9px Bahnschrift, Arial, sans-serif; font-style: normal; letter-spacing: 2px; }
.business-card strong { display: block; margin-top: 11px; font-size: 17px; line-height: 1.1; letter-spacing: 1px; }
.business-card small { display: block; margin-top: 6px; color: #9fc4d2; font: 7px Bahnschrift, Arial, sans-serif; letter-spacing: 1.8px; }
.business-card:hover, .business-card.is-active { border-color: #e8fdff; filter: brightness(1.2); box-shadow: 0 0 32px rgba(var(--accent-rgb), .28), inset 0 0 24px rgba(var(--accent-rgb), .12); }
.business-card:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.detail-panel { right: 34px; top: 50%; z-index: 8; width: 300px; padding: 25px; border: 1px solid rgba(var(--accent-rgb), .62); border-radius: 4px; background: rgba(2, 17, 30, .92); box-shadow: 0 28px 70px rgba(0, 0, 0, .42), inset 0 0 32px rgba(var(--accent-rgb), .06); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transform: translate(22px, -50%); transition: opacity .22s ease, transform .22s ease; }
.detail-panel.is-open { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.detail-close { position: absolute; top: 8px; right: 11px; border: 0; background: none; cursor: pointer; font-size: 23px; }
.detail-kicker { margin: 0; color: var(--accent); font: 700 9px Bahnschrift, Arial, sans-serif; letter-spacing: 2px; }
.detail-panel h3 { margin: 14px 0 10px; font-size: 27px; letter-spacing: 2px; }
.detail-panel > p:not(.detail-kicker) { color: #c9e1e9; font-size: 13px; line-height: 1.8; }
.detail-link { margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 650; }
.detail-link span { margin-left: 18px; color: var(--accent); font-size: 19px; }

footer { inset: auto 34px 22px; display: flex; justify-content: space-between; color: #658698; font: 9px Bahnschrift, Arial, sans-serif; letter-spacing: 2px; pointer-events: none; }

body[data-concept="night"] { --accent: #59e7ff; --accent-rgb: 89, 231, 255; --accent-2: #ffae3d; --accent-2-rgb: 255, 174, 61; --surface: rgba(3, 27, 38, .78); --muted: #88aab7; }
body[data-concept="night"] .earth-shell { background: radial-gradient(ellipse at 66% 58%, rgba(5, 80, 94, .38), transparent 38%), #01070c; }
body[data-concept="night"] .welcome { left: 28%; top: 19%; text-align: left; }
body[data-concept="night"] .welcome h1 { color: #f3fbff; text-shadow: none; }
body[data-concept="night"] .welcome h2 { letter-spacing: 3px; }
body[data-concept="night"] .business-card { border-color: rgba(var(--accent-rgb), .36); background: linear-gradient(120deg, rgba(4, 34, 45, .84), rgba(3, 17, 27, .6)); }

body[data-concept="pearl"] { --accent: #b7f3ff; --accent-rgb: 183, 243, 255; --accent-2: #68b4ff; --accent-2-rgb: 104, 180, 255; --surface: rgba(11, 39, 62, .62); --muted: #a9c4d2; }
body[data-concept="pearl"] .earth-shell { background: radial-gradient(ellipse at 50% 61%, rgba(71, 134, 162, .42), transparent 42%), #03101d; }
body[data-concept="pearl"] .welcome h1 { color: #f1fdff; text-shadow: 0 0 24px rgba(183, 243, 255, .28); }
body[data-concept="pearl"] .business-card { background: linear-gradient(145deg, rgba(190, 241, 255, .18), rgba(5, 35, 58, .58)); border-color: rgba(200, 247, 255, .48); }

.webgl-fallback #earthCanvas { display: none; }
.webgl-fallback .earth-shell::before { content: ""; position: absolute; left: 50%; top: 54%; width: min(44vw, 410px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid var(--accent); border-radius: 50%; box-shadow: inset 0 0 80px rgba(var(--accent-rgb), .25), 0 0 80px rgba(var(--accent-rgb), .14); }

@media (max-width: 760px) {
  .topbar { inset: 18px 16px auto; }
  .concept-name, footer { display: none; }
  .welcome, body[data-concept="night"] .welcome { left: 50%; top: 11%; width: 94vw; transform: translateX(-50%); text-align: center; }
  .welcome h1 { font-size: 52px; letter-spacing: 5px; }
  .welcome h2 { margin-top: 12px; font-size: 15px; letter-spacing: 2px; }
  .enter-site { min-width: 148px; min-height: 40px; font-size: 13px; }
  .business-card { width: 124px; height: 72px; padding: 9px 10px; }
  .business-card strong { margin-top: 7px; font-size: 13px; }
  .business-card small { margin-top: 4px; font-size: 5px; }
  .business-card em { top: 7px; right: 8px; font-size: 7px; }
  .detail-panel { left: 12px; right: 12px; top: auto; bottom: 78px; width: auto; transform: translateY(16px); }
  .detail-panel.is-open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}