:root {
  color-scheme: dark;
  --ink: #f7f3ff;
  --muted: rgba(229, 221, 255, 0.64);
  --soft: rgba(217, 191, 255, 0.18);
  --accent: #d6b8ff;
  --accent-bright: #f4d8ff;
  --night: #07081d;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-width: 320px;
  background: var(--night);
  color: var(--ink);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(95, 54, 184, 0.3), transparent 58%),
    radial-gradient(ellipse at 95% 12%, rgba(52, 77, 174, 0.18), transparent 44%),
    linear-gradient(135deg, #06071a 0%, #0a0b28 47%, #120c2c 100%);
}

#starfield, .grain, .aurora { position: absolute; inset: 0; pointer-events: none; }
#starfield { z-index: -1; width: 100%; height: 100%; }

.grain {
  z-index: 0;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.aurora { z-index: -1; filter: blur(10px); opacity: .55; transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0); transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.aurora-one { background: radial-gradient(ellipse at 35% 31%, rgba(88, 60, 198, .18), transparent 34%); }
.aurora-two { background: radial-gradient(ellipse at 68% 73%, rgba(195, 84, 203, .11), transparent 34%); }

.content-shell { z-index: 1; width: min(100% - 36px, 900px); margin-top: -2vh; text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 28px;
  color: rgba(228, 211, 255, .62);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
}
.eyebrow-line { width: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 207, 255, .65)); }
.eyebrow-line:last-child { transform: rotate(180deg); }

h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-indent: .16em;
  text-shadow: 0 0 40px rgba(207, 172, 255, .22);
}

.intro { margin: 21px 0 45px; color: var(--muted); font-size: clamp(13px, 2vw, 15px); letter-spacing: .22em; }

.countdown-card {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 52px) clamp(16px, 5vw, 52px) clamp(23px, 4vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(224, 203, 255, .18);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(188, 147, 255, .045));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px);
}
.countdown-card::before, .countdown-card::after { position: absolute; content: ""; width: 76px; height: 76px; border: 1px solid rgba(218, 187, 255, .23); }
.countdown-card::before { top: -55px; left: -55px; border-radius: 50%; box-shadow: 0 0 0 16px rgba(218, 187, 255, .04), 0 0 0 32px rgba(218, 187, 255, .03); }
.countdown-card::after { right: -45px; bottom: -52px; border-radius: 50%; }
.card-glow { position: absolute; inset: -80%; background: radial-gradient(circle at center, rgba(192, 140, 255, .11), transparent 28%); animation: breathing-glow 8s ease-in-out infinite; pointer-events: none; }

.countdown { position: relative; display: flex; align-items: baseline; justify-content: center; gap: clamp(8px, 2.4vw, 28px); }
.time-unit { display: flex; min-width: clamp(48px, 11vw, 108px); flex-direction: column; align-items: center; gap: 8px; }
.time-unit strong { color: var(--accent-bright); font-family: "Noto Sans SC", sans-serif; font-size: clamp(31px, 6.4vw, 68px); font-weight: 500; letter-spacing: .03em; line-height: 1; text-shadow: 0 0 28px rgba(222, 173, 255, .3); font-variant-numeric: tabular-nums; }
.time-unit span { color: rgba(228, 214, 255, .58); font-size: 11px; letter-spacing: .2em; }
.separator { color: rgba(225, 205, 255, .42); font-size: clamp(22px, 4vw, 38px); font-style: normal; line-height: 1; }
.target-time { position: relative; margin: 31px 0 0; color: rgba(231, 217, 255, .55); font-size: 11px; letter-spacing: .33em; }
.target-time span { padding: 0 9px; color: rgba(220, 183, 255, .6); }
.sync-status { margin: 20px 0 0; color: rgba(226, 213, 255, .42); font-size: 11px; letter-spacing: .16em; }
.sync-status.is-fallback { color: rgba(255, 219, 177, .57); }
.meeting-state { position: relative; margin: 0; color: var(--accent-bright); font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(34px, 7vw, 66px); letter-spacing: .16em; text-indent: .16em; text-shadow: 0 0 34px rgba(222, 173, 255, .42); animation: meeting-glow 2.8s ease-in-out infinite; }
.countdown-card.is-complete { border-color: rgba(229, 193, 255, .35); box-shadow: 0 24px 90px rgba(88, 45, 145, .28), inset 0 1px rgba(255, 255, 255, .16); }

.footer-note { position: absolute; z-index: 1; bottom: 24px; margin: 0; color: rgba(215, 205, 246, .34); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }

@keyframes breathing-glow { 0%, 100% { transform: scale(.9); opacity: .48; } 50% { transform: scale(1.1); opacity: .8; } }
@keyframes meeting-glow { 0%, 100% { opacity: .78; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.02); } }

@media (max-width: 520px) {
  .content-shell { width: min(100% - 24px, 900px); }
  .eyebrow { margin-bottom: 22px; font-size: 8px; letter-spacing: .18em; }
  .eyebrow-line { width: 18px; }
  h1 { font-size: clamp(40px, 14vw, 62px); }
  .intro { margin-top: 16px; margin-bottom: 34px; font-size: 12px; letter-spacing: .13em; }
  .countdown-card { border-radius: 19px; padding-right: 9px; padding-left: 9px; }
  .countdown { gap: 3px; }
  .time-unit { min-width: clamp(48px, 18vw, 80px); gap: 7px; }
  .time-unit strong { font-size: clamp(26px, 9.7vw, 45px); }
  .time-unit span { font-size: 9px; letter-spacing: .12em; }
  .separator { font-size: 22px; }
  .target-time { margin-top: 26px; font-size: 9px; letter-spacing: .21em; }
  .target-time span { padding: 0 4px; }
  .footer-note { bottom: 14px; font-size: 8px; letter-spacing: .14em; }
}

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