:root {
  --ink: #e8f5ef;
  --mute: rgba(210, 232, 222, 0.74);
  --glow: #7dd3c0;
  --glow2: #a78bfa;
  --card: rgba(8, 22, 18, 0.42);
  --line: rgba(125, 211, 192, 0.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background: var(--bg, linear-gradient(165deg, #050a09, #0b1a16 42%, #0a1420));
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  overflow-x: hidden;
  display: grid;
  place-items: center;
  padding: 48px 20px 72px;
  transition: background 0.6s ease;
}

body[data-theme="mist"] {
  --glow: #7dd3c0; --glow2: #a78bfa; --ink: #e8f5ef;
  --mute: rgba(210, 232, 222, 0.74); --line: rgba(125, 211, 192, 0.28);
  --card: rgba(8, 22, 18, 0.42);
  --bg: radial-gradient(1200px 700px at 20% -10%, rgba(125,211,192,.22), transparent 55%),
        radial-gradient(900px 600px at 110% 10%, rgba(167,139,250,.18), transparent 50%),
        linear-gradient(165deg, #050a09, #0b1a16 45%, #0a1420);
}
body[data-theme="ember"] {
  --glow: #fdba74; --glow2: #fb7185; --ink: #fff7ed;
  --mute: rgba(255, 237, 213, 0.72); --line: rgba(251, 146, 60, 0.3);
  --card: rgba(28, 12, 10, 0.48);
  --bg: radial-gradient(1000px 600px at 15% 0%, rgba(251,146,60,.2), transparent 55%),
        radial-gradient(800px 500px at 90% 20%, rgba(244,63,94,.16), transparent 50%),
        linear-gradient(160deg, #120806, #1a0d12 50%, #0c0a12);
}
body[data-theme="ink"] {
  --glow: #93c5fd; --glow2: #e2e8f0; --ink: #f8fafc;
  --mute: rgba(203, 213, 225, 0.75); --line: rgba(147, 197, 253, 0.28);
  --card: rgba(8, 14, 28, 0.5);
  --bg: radial-gradient(900px 500px at 30% -5%, rgba(59,130,246,.18), transparent 50%),
        radial-gradient(700px 500px at 100% 30%, rgba(148,163,184,.12), transparent 45%),
        linear-gradient(170deg, #04060d, #0b1220 55%, #111827);
}
body[data-theme="lotus"] {
  --glow: #f9a8d4; --glow2: #c4b5fd; --ink: #fdf2f8;
  --mute: rgba(251, 207, 232, 0.78); --line: rgba(244, 114, 182, 0.28);
  --card: rgba(24, 10, 28, 0.46);
  --bg: radial-gradient(1000px 600px at 10% 10%, rgba(244,114,182,.18), transparent 55%),
        radial-gradient(800px 500px at 95% 0%, rgba(167,139,250,.16), transparent 50%),
        linear-gradient(155deg, #100814, #1a0f22 48%, #0c1020);
}
body[data-theme="tide"] {
  --glow: #67e8f9; --glow2: #38bdf8; --ink: #ecfeff;
  --mute: rgba(207, 250, 254, 0.74); --line: rgba(34, 211, 238, 0.3);
  --card: rgba(6, 24, 32, 0.48);
  --bg: radial-gradient(1100px 650px at 0% 0%, rgba(34,211,238,.18), transparent 55%),
        radial-gradient(900px 500px at 100% 40%, rgba(14,165,233,.14), transparent 50%),
        linear-gradient(165deg, #031018, #08222c 50%, #071525);
}
body[data-theme="bamboo"] {
  --glow: #86efac; --glow2: #bef264; --ink: #f0fdf4;
  --mute: rgba(220, 252, 231, 0.76); --line: rgba(74, 222, 128, 0.28);
  --card: rgba(8, 24, 14, 0.46);
  --bg: radial-gradient(1000px 600px at 20% -10%, rgba(74,222,128,.16), transparent 55%),
        radial-gradient(700px 500px at 90% 15%, rgba(163,230,53,.1), transparent 50%),
        linear-gradient(165deg, #06110a, #0c1c12 48%, #0a1612);
}

#fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.75; }
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(5,10,9,.22) 55%, rgba(5,10,9,.7) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.01) 3px);
  mix-blend-mode: soft-light;
}

.stage {
  position: relative; z-index: 2; width: min(720px, 100%);
  padding: 56px 48px 48px; border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.06), transparent 40%), var(--card);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 40px 100px rgba(0,0,0,.45), 0 0 80px color-mix(in srgb, var(--glow) 18%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  text-align: center;
  animation: rise 1s ease-out both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.seal {
  margin: 0 0 28px; display: inline-block; padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  border-radius: 999px; color: var(--glow); letter-spacing: .45em; font-size: 12px;
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif; text-indent: .45em;
  background: color-mix(in srgb, var(--glow) 8%, transparent);
}
h1 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-indent: .18em; }
h1 .line {
  display: block; font-size: clamp(2.3rem, 7vw, 3.5rem);
  background: linear-gradient(120deg, #fff 8%, var(--glow) 48%, var(--glow2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--glow) 22%, transparent));
}
h1 .line.soft {
  margin-top: .18em; opacity: .94; font-size: clamp(1.9rem, 5.8vw, 2.9rem);
  background: linear-gradient(120deg, #eef2ff 0%, var(--glow2) 55%, var(--glow) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.verse {
  margin: 28px auto 0; max-width: 30em; color: var(--mute);
  font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 2; letter-spacing: .08em;
}
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px 0 22px; }
.divider span {
  width: min(120px, 22vw); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glow) 65%, transparent), transparent);
}
.divider i {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--glow));
  box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 75%, transparent);
}
.epigraph {
  margin: 0; color: color-mix(in srgb, var(--ink) 90%, transparent);
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem); letter-spacing: .28em; text-indent: .28em;
}
.domain {
  margin: 26px 0 0; color: color-mix(in srgb, var(--mute) 85%, transparent);
  font-size: .9rem; letter-spacing: .28em; text-indent: .28em;
  font-family: "Segoe UI", system-ui, sans-serif;
}
footer {
  position: fixed; left: 0; right: 0; bottom: 18px; z-index: 2; text-align: center;
  color: color-mix(in srgb, var(--mute) 70%, transparent); font-size: 12px;
  letter-spacing: .28em; text-indent: .28em;
}
@media (max-width: 560px) {
  .stage { padding: 40px 22px 36px; border-radius: 22px; }
  .seal, h1, .epigraph { letter-spacing: .14em; text-indent: .14em; }
  footer { position: static; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
  #fx { display: none; }
}