:root {
  color-scheme: dark;
  --space: #03040b;
  --space-soft: #080a17;
  --ink: #f5f2e9;
  --ink-soft: #a5acc1;
  --ink-faint: #697188;
  --violet: #aaa2ff;
  --violet-strong: #7c72ef;
  --warm: #fff1bd;
  --line: rgba(225, 228, 255, .14);
  --glass: rgba(12, 14, 29, .56);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: var(--space);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { color: inherit; font: inherit; }

.cosmos-home {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 25%, rgba(87, 68, 154, .22), transparent 23%),
    radial-gradient(circle at 47% 75%, rgba(38, 74, 128, .16), transparent 30%),
    radial-gradient(ellipse at 50% 118%, #11152d 0%, transparent 43%),
    linear-gradient(145deg, #02030a 0%, #050612 46%, #09091a 100%);
}

.cosmos-home::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 3, 10, .42), transparent 36%, transparent 76%, rgba(2, 3, 10, .08)),
    radial-gradient(ellipse at center, transparent 46%, rgba(1, 2, 7, .34) 100%);
}

.cosmos-home::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .45) .45px, transparent .6px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.cosmos-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  touch-action: none;
  cursor: default;
}
.cosmos-scene.is-interactive { cursor: pointer; }
.cosmos-scene canvas { width: 100%; height: 100%; display: block; outline: none; }

.cosmos-brand {
  position: absolute;
  z-index: 5;
  top: max(28px, env(safe-area-inset-top));
  left: max(32px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.cosmos-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221, 221, 255, .24);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, rgba(137, 126, 244, .94), rgba(80, 72, 178, .82));
  box-shadow: 0 10px 32px rgba(69, 56, 171, .3), inset 0 1px rgba(255, 255, 255, .25);
  font-size: 15px;
  font-weight: 800;
}
.cosmos-brand-copy { display: flex; flex-direction: column; gap: 4px; }
.cosmos-brand strong { font-size: 12px; font-weight: 780; letter-spacing: .19em; }
.cosmos-brand small { color: var(--ink-faint); font-size: 8px; font-weight: 700; letter-spacing: .16em; }

.cosmos-story {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: clamp(34px, 7.2vw, 112px);
  width: min(470px, calc(50vw - 36px));
  transform: translateY(-43%);
  pointer-events: none;
}
.cosmos-signal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 21px;
  color: var(--violet);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .19em;
}
.cosmos-signal i {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c83ff;
  box-shadow: 0 0 0 5px rgba(140, 131, 255, .09), 0 0 18px rgba(140, 131, 255, .72);
}
.cosmos-signal i::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(161, 154, 255, .25);
  border-radius: 50%;
  animation: signal-ring 2.4s ease-out infinite;
}
@keyframes signal-ring { 70%, 100% { opacity: 0; transform: scale(1.75); } }

.cosmos-story h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(48px, 6.2vw, 82px);
  font-weight: 820;
  line-height: .98;
  letter-spacing: -.075em;
  text-shadow: 0 8px 42px rgba(0, 0, 0, .44);
}
.cosmos-story h1 em {
  color: transparent;
  background: linear-gradient(98deg, #f6f2e8 0%, #c8c2ff 52%, #9991f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}
.cosmos-copy {
  margin: 23px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .015em;
  text-shadow: 0 3px 15px rgba(0, 0, 0, .6);
}

.cosmos-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  pointer-events: auto;
}
.cosmos-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  color: #d8dbea;
  background: var(--glass);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cosmos-action:hover {
  color: #fff;
  border-color: rgba(190, 185, 255, .33);
  background: rgba(24, 26, 48, .7);
  transform: translateY(-2px);
}
.cosmos-action:focus-visible { box-shadow: 0 0 0 3px rgba(137, 127, 247, .28), 0 12px 34px rgba(0, 0, 0, .22); }
.cosmos-action.is-primary {
  color: #171426;
  border-color: rgba(255, 245, 207, .68);
  background: linear-gradient(135deg, rgba(255, 247, 218, .98), rgba(214, 207, 255, .92));
  box-shadow: 0 10px 30px rgba(159, 143, 235, .19), 0 0 28px rgba(255, 240, 190, .08);
}
.cosmos-action.is-primary:hover { color: #0e0c18; background: #fff9e7; }
.cosmos-action[aria-pressed="true"] { border-color: rgba(160, 151, 255, .46); color: #fff; background: rgba(94, 83, 197, .55); }
.cosmos-action.is-primary[aria-pressed="true"] { color: #171426; background: linear-gradient(135deg, #fff5cd, #c3baff); }
.cosmos-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cosmos-action span { font-size: 11px; font-weight: 700; white-space: nowrap; }

.cosmos-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 19px 0 0;
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .04em;
}
.cosmos-hint b { width: 3px; height: 3px; border-radius: 50%; background: #555d73; }
.cosmos-mouse { position: relative; width: 13px; height: 18px; border: 1px solid #666f88; border-radius: 7px; }
.cosmos-mouse::after { content: ""; position: absolute; top: 3px; left: 50%; width: 2px; height: 4px; border-radius: 2px; background: #7f88a2; transform: translateX(-50%); }

.cosmos-now-playing {
  position: absolute;
  z-index: 4;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(25px, env(safe-area-inset-bottom));
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(220, 224, 255, .1);
  border-radius: 13px;
  color: var(--ink-soft);
  background: rgba(9, 11, 23, .42);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  opacity: .66;
  pointer-events: none;
  transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
.cosmos-now-playing.is-playing { opacity: 1; border-color: rgba(159, 151, 255, .25); background: rgba(17, 18, 39, .65); }
.cosmos-now-playing > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.cosmos-now-playing small { color: var(--violet); font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.cosmos-now-playing strong { color: #dce0ed; font-size: 10px; font-weight: 650; }
.equalizer { width: 24px; height: 23px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 4px; border-radius: 7px; color: var(--violet); background: rgba(132, 120, 240, .12); }
.equalizer i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; transform-origin: bottom; }
.cosmos-now-playing.is-playing .equalizer i { animation: equalize .75s ease-in-out infinite alternate; }
.cosmos-now-playing.is-playing .equalizer i:nth-child(2) { animation-delay: -.36s; }
.cosmos-now-playing.is-playing .equalizer i:nth-child(3) { animation-delay: -.18s; }
.cosmos-now-playing.is-playing .equalizer i:nth-child(4) { animation-delay: -.52s; }
@keyframes equalize { to { height: 14px; } }

.cosmos-coordinate {
  position: absolute;
  z-index: 4;
  left: max(32px, env(safe-area-inset-left));
  bottom: max(27px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(143, 150, 174, .62);
  font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  pointer-events: none;
}
.cosmos-coordinate i { width: 24px; height: 1px; background: rgba(143, 150, 174, .3); }

.cosmos-loading {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--ink);
  background: radial-gradient(circle at 50% 46%, #141329, #05060e 48%, #020309 100%);
  transition: opacity .85s ease, visibility .85s ease;
}
.cosmos-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-orbit { position: relative; width: 62px; height: 62px; margin-bottom: 22px; border: 1px solid rgba(166, 157, 255, .2); border-radius: 50%; animation: orbit-spin 3s linear infinite; }
.loading-orbit::before, .loading-orbit::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 241, 190, .12); border-radius: 50%; }
.loading-orbit::after { inset: 23px; border: 0; background: #d8d1ff; box-shadow: 0 0 22px rgba(184, 175, 255, .7); }
.loading-orbit i { position: absolute; top: 5px; left: 28px; width: 6px; height: 6px; border-radius: 50%; background: #fff0b7; box-shadow: 0 0 13px #ffe9a0; }
.loading-orbit span { position: absolute; right: 4px; bottom: 10px; width: 4px; height: 4px; border-radius: 50%; background: #8075e6; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.cosmos-loading strong { font-size: 20px; font-weight: 760; letter-spacing: .08em; }
.cosmos-loading > span { margin-top: 9px; color: var(--ink-faint); font-size: 10px; letter-spacing: .04em; }

.cosmos-fallback {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  justify-items: center;
  place-content: center;
  padding: 30px;
  color: var(--ink);
  background: radial-gradient(circle at 60% 25%, #1a1838, #04050c 58%);
  text-align: center;
}
.cosmos-fallback[hidden] { display: none; }
.fallback-star { display: block; color: #d4ceff; font-size: 50px; text-shadow: 0 0 30px rgba(178, 168, 255, .65); }
.cosmos-fallback h2 { margin: 14px 0 7px; font-size: 32px; letter-spacing: -.04em; }
.cosmos-fallback p { max-width: 380px; margin: 0 auto; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.cosmos-fallback small { display: block; margin-top: 10px; color: var(--ink-faint); font-size: 9px; letter-spacing: .08em; }
.cosmos-fallback button {
  min-height: 42px;
  margin-top: 20px;
  padding: 0 16px;
  border: 1px solid rgba(197, 190, 255, .28);
  border-radius: 11px;
  color: #f2efff;
  background: rgba(112, 99, 220, .28);
  cursor: pointer;
}
.cosmos-fallback button:hover { background: rgba(112, 99, 220, .46); }

@media (max-width: 900px) {
  .cosmos-brand { top: max(19px, env(safe-area-inset-top)); left: max(19px, env(safe-area-inset-left)); }
  .cosmos-brand-mark { width: 39px; height: 39px; border-radius: 12px; }
  .cosmos-story { top: 46%; left: 22px; width: min(390px, calc(52vw - 22px)); }
  .cosmos-story h1 { font-size: clamp(43px, 7.2vw, 64px); }
}

@media (max-width: 700px) {
  .cosmos-home { min-height: 530px; }
  .cosmos-home::before { background: radial-gradient(ellipse at center, transparent 44%, rgba(1, 2, 7, .24) 100%); }
  .cosmos-story {
    top: max(105px, calc(env(safe-area-inset-top) + 91px));
    left: max(18px, env(safe-area-inset-left));
    width: min(238px, 62vw);
    transform: none;
  }
  .cosmos-signal { margin-bottom: 14px; font-size: 7px; }
  .cosmos-story h1 { font-size: clamp(35px, 10.5vw, 46px); line-height: 1.02; }
  .cosmos-copy { max-width: 215px; margin-top: 14px; font-size: 10px; line-height: 1.75; }
  .cosmos-actions { align-items: flex-start; flex-direction: column; gap: 7px; margin-top: 18px; }
  .cosmos-action { min-height: 40px; padding: 0 12px; border-radius: 11px; }
  .cosmos-action svg { width: 15px; height: 15px; }
  .cosmos-action span { font-size: 10px; }
  .cosmos-hint { display: none; }
  .cosmos-now-playing { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: 132px; padding: 8px 10px; }
  .cosmos-coordinate { display: none; }
}

@media (max-width: 430px) {
  .cosmos-brand-copy strong { font-size: 10px; }
  .cosmos-brand-copy small { font-size: 6px; }
  .cosmos-story { width: min(205px, 56vw); }
  .cosmos-story h1 { font-size: clamp(32px, 9.7vw, 41px); }
  .cosmos-copy { max-width: 188px; }
  .cosmos-copy br { display: none; }
}

@media (max-height: 690px) and (max-width: 700px) {
  .cosmos-story { top: 86px; }
  .cosmos-copy { display: none; }
  .cosmos-actions { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-signal i::after,
  .loading-orbit,
  .cosmos-now-playing.is-playing .equalizer i { animation: none; }
  .cosmos-loading,
  .cosmos-action,
  .cosmos-now-playing { transition: none; }
}