@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;900&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --mx: 0;
  --my: 0;
  --bg: #060403;
  --panel: rgba(31, 20, 11, .68);
  --panel-strong: rgba(48, 30, 14, .78);
  --gold: #f7d88d;
  --amber: #ffb94d;
  --blue: #58dfff;
  --violet: #8c6bff;
  --text: #fff4d4;
  --muted: rgba(255, 235, 195, .7);
  --line: rgba(247, 216, 141, .26);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(247, 216, 141, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(247, 216, 141, .02) 1px, transparent 1px),
    radial-gradient(circle at calc(20% + var(--mx) * 10%) calc(18% + var(--my) * 8%), rgba(255, 185, 77, .14), transparent 28%),
    radial-gradient(circle at calc(82% + var(--mx) * -8%) 30%, rgba(88, 223, 255, .12), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(140, 107, 255, .12), transparent 32%),
    linear-gradient(180deg, #0b0704, #020202 70%);
  background-size: 92px 92px, 92px 92px, auto, auto, auto, auto;
}

/* 图片与特效统一启动：图片完成后由 script.js 同时释放动画 */
body:not(.effects-ready) main,
body:not(.effects-ready) #ambientCanvas,
body:not(.effects-ready) #magicCanvas {
  opacity: 0;
}

body main,
body #ambientCanvas,
body #magicCanvas {
  transition: opacity .7s cubic-bezier(.2,.75,.25,1);
}

body:not(.effects-ready) *,
body:not(.effects-ready) *::before,
body:not(.effects-ready) *::after {
  animation-play-state: paused !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255, 232, 174, .12), transparent 42%),
    linear-gradient(90deg, rgba(0,0,0,.7), transparent 18%, transparent 82%, rgba(0,0,0,.62));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
textarea {
  font: inherit;
}

#ambientCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 5vw, 76px);
  border-bottom: 1px solid rgba(247, 216, 141, .12);
  background: rgba(7, 5, 3, .66);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(247, 216, 141, .42);
  border-radius: 50%;
  color: var(--gold);
  box-shadow: 0 0 18px rgba(255, 185, 77, .22);
  animation: spinMark 9s linear infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(247, 216, 141, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

.site-nav a {
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .06em;
  transition: .22s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: #241609;
  background: linear-gradient(135deg, #ffe8ae, #d99f43);
  box-shadow: 0 0 22px rgba(255, 185, 77, .18);
}

main {
  position: relative;
  z-index: 1;
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(360px, .82fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: center;
  min-height: calc(100svh - 82px);
  padding: clamp(58px, 8vw, 118px) clamp(20px, 5vw, 76px) 72px;
}

.hero-copy {
  max-width: 860px;
  transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -8px), 0);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 1.08;
  letter-spacing: .035em;
  text-shadow: 0 20px 70px rgba(0, 0, 0, .72);
}

h2 {
  font-size: clamp(28px, 3.1vw, 48px);
  line-height: 1.2;
  letter-spacing: .035em;
}

h3 {
  margin-bottom: 12px;
  color: #ffe9b2;
  font-size: clamp(20px, 1.7vw, 28px);
}

.lead {
  max-width: 780px;
  color: var(--muted);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 2;
  letter-spacing: .05em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-visual {
  position: relative;
  min-height: clamp(500px, 58vw, 720px);
  transform:
    translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0)
    rotateX(calc(var(--my) * -3deg))
    rotateY(calc(var(--mx) * 4deg));
  transform-style: preserve-3d;
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-visual::before {
  left: 2%;
  right: 2%;
  bottom: 2%;
  height: 38%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(255, 185, 77, .22), transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(247, 216, 141, .08) 39px 40px);
  transform: rotateX(72deg);
  filter: blur(.2px);
}

.hero-visual::after {
  inset: 12% 2% 6%;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 26%, rgba(88, 223, 255, .045));
  border: 1px solid rgba(247, 216, 141, .16);
  box-shadow: inset 0 0 90px rgba(255, 185, 77, .04), 0 44px 120px rgba(0,0,0,.45);
  backdrop-filter: blur(5px);
  transform: translateZ(-60px);
}

.window-arch {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 2%;
  height: 72%;
  overflow: hidden;
  border: 2px solid rgba(247, 216, 141, .26);
  border-bottom-width: 8px;
  border-radius: 50% 50% 18% 18% / 46% 46% 14% 14%;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(247, 216, 141, .18) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(0deg, transparent 53%, rgba(247, 216, 141, .16) 53% 54%, transparent 54%),
    radial-gradient(circle at 55% 22%, rgba(255, 242, 188, .24), transparent 8%),
    radial-gradient(circle at 48% 70%, rgba(140, 107, 255, .22), transparent 32%),
    linear-gradient(155deg, rgba(13, 57, 91, .72), rgba(13, 13, 38, .78) 54%, rgba(5, 4, 10, .94));
  box-shadow: inset 0 0 80px rgba(88, 223, 255, .1), 0 30px 90px rgba(0,0,0,.45);
}

.moon-core {
  position: absolute;
  right: 23%;
  top: 15%;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d7, #f2d689 58%, #9d6b32);
  box-shadow: 0 0 70px rgba(255, 237, 176, .56);
  animation: pulse 5.4s ease-in-out infinite;
}

.star {
  position: absolute;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe8ae;
  box-shadow: 0 0 16px #ffcf6d;
  animation: twinkle 3s ease-in-out infinite;
}

.s1 { left: 20%; top: 22%; }
.s2 { left: 72%; top: 42%; animation-delay: -1s; }
.s3 { left: 34%; top: 64%; animation-delay: -2s; }

.astrolabe {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(68%, 430px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 42px rgba(0,0,0,.46));
}

.ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(247, 216, 141, .62);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(255, 185, 77, .12), inset 0 0 28px rgba(255, 185, 77, .05);
  animation: orbitSpin 12s linear infinite;
}

.ring-two {
  inset: 12%;
  border-color: rgba(88, 223, 255, .46);
  transform: rotateX(66deg) rotateY(24deg);
  animation-duration: 8s;
  animation-direction: reverse;
}

.ring-three {
  inset: 25%;
  border-color: rgba(140, 107, 255, .5);
  transform: rotateX(74deg) rotateZ(38deg);
  animation-duration: 6.5s;
}

.core-orb {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(247, 216, 141, .42);
  color: #2a1708;
  background:
    radial-gradient(circle at 35% 25%, #fff7d5, transparent 12%),
    radial-gradient(circle, #f8d98e, #ab7430 64%, #1b1008);
  box-shadow: 0 0 46px rgba(255, 185, 77, .38), inset 0 0 25px rgba(255,255,255,.18);
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 900;
}

.floating-note {
  position: absolute;
  z-index: 3;
  min-width: 210px;
  padding: 16px 18px;
  border: 1px solid rgba(247, 216, 141, .25);
  border-radius: 18px;
  background: rgba(9, 6, 3, .72);
  box-shadow: 0 22px 50px rgba(0,0,0,.38), inset 0 0 22px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

.floating-note strong,
.floating-note span {
  display: block;
}

.floating-note strong {
  color: var(--gold);
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: .18em;
  font-size: 12px;
}

.floating-note span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.note-physics {
  left: 0;
  top: 45%;
}

.note-ai {
  right: 0;
  top: 24%;
  border-color: rgba(88, 223, 255, .25);
}

.wood-base {
  position: absolute;
  z-index: 4;
  left: 17%;
  right: 17%;
  bottom: 9%;
  padding: 18px;
  border: 1px solid rgba(247, 216, 141, .34);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(87, 48, 18, .8), rgba(40, 22, 11, .92)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 22px rgba(255, 185, 77, .08), 0 24px 50px rgba(0,0,0,.4);
  text-align: center;
}

.wood-base span,
.wood-base small {
  display: block;
}

.wood-base span {
  color: #ffe8ae;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(255, 185, 77, .32);
}

.wood-base small {
  margin-top: 5px;
  color: rgba(255, 226, 171, .62);
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.visual-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0 clamp(20px, 5vw, 76px) 58px;
  margin-top: -38px;
}

.exhibit {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(247, 216, 141, .22);
  border-radius: 32px;
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 185, 77, .22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 26%),
    rgba(25, 15, 8, .72);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
}

.exhibit-ai {
  background:
    radial-gradient(circle at 15% 50%, rgba(88, 223, 255, .18), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(140, 107, 255, .16), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 26%),
    rgba(14, 17, 31, .72);
}

.exhibit-math {
  background:
    radial-gradient(circle at 15% 50%, rgba(140, 107, 255, .2), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(247, 216, 141, .13), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 26%),
    rgba(22, 12, 26, .72);
}

.exhibit::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,216,141,.5), transparent);
}

.exhibit-icon {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(247, 216, 141, .32);
  color: var(--gold);
  background: radial-gradient(circle, rgba(255, 185, 77, .18), rgba(9, 6, 3, .84));
  box-shadow: 0 0 44px rgba(255,185,77,.16), inset 0 0 30px rgba(255,255,255,.06);
  font-size: 52px;
}

.exhibit-ai .exhibit-icon {
  color: var(--blue);
  border-color: rgba(88, 223, 255, .32);
  background: radial-gradient(circle, rgba(88, 223, 255, .16), rgba(9, 6, 3, .84));
}

.exhibit-math .exhibit-icon {
  color: #d9bdff;
  border-color: rgba(140, 107, 255, .36);
  background: radial-gradient(circle, rgba(140, 107, 255, .18), rgba(9, 6, 3, .84));
}

.exhibit p {
  color: var(--muted);
  line-height: 1.9;
}

.primary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  letter-spacing: .08em;
  transition: .22s ease;
}

.primary-btn {
  color: #261609;
  background: linear-gradient(135deg, #ffe8ae, #d69d43);
  box-shadow: 0 0 34px rgba(255, 185, 77, .2);
}

.ghost-btn {
  border: 1px solid rgba(247, 216, 141, .32);
  color: #ffe8b4;
  background: rgba(255, 255, 255, .035);
}

.primary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.magic-card,
.knowledge-card,
.article-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 30%),
    linear-gradient(180deg, var(--panel), rgba(11, 7, 4, .78));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 28px 80px rgba(0, 0, 0, .36);
  backdrop-filter: blur(18px);
}

.magic-card::before,
.knowledge-card::before,
.article-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 185, 77, .12), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(88, 223, 255, .08), transparent 22%);
}

.hero-card {
  min-height: 420px;
  padding: clamp(26px, 3vw, 40px);
  transform:
    translate3d(calc(var(--mx) * 12px), calc(var(--my) * 10px), 0)
    rotateX(calc(var(--my) * -3deg))
    rotateY(calc(var(--mx) * 4deg));
}

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.orb-gold {
  right: 12%;
  top: 14%;
  width: 120px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 231, 171, .44), transparent 68%);
  animation: pulse 5s ease-in-out infinite;
}

.orb-blue {
  left: 8%;
  bottom: 9%;
  width: 180px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(88, 223, 255, .22), transparent 70%);
  animation: pulse 6.5s ease-in-out infinite reverse;
}

.map-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(247, 216, 141, .15);
}

.map-row strong {
  color: var(--gold);
}

.map-row span,
.magic-card p {
  color: var(--muted);
  line-height: 1.8;
}

.section-block {
  padding: 70px clamp(20px, 5vw, 76px);
}

.section-title {
  max-width: 920px;
  margin-bottom: 30px;
}

.section-title p {
  color: var(--muted);
  line-height: 1.9;
  font-size: 17px;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.ornate-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.knowledge-card {
  padding: 28px;
}

.feature-card {
  min-height: 420px;
  padding-top: 74px;
}

.feature-card::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(247,216,141,.55), transparent);
}

.card-mark {
  position: absolute;
  left: 26px;
  top: 20px;
  color: rgba(247, 216, 141, .62);
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  letter-spacing: .18em;
}

.feature-card h3 {
  min-height: 66px;
}

.ai-feature::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 223, 255, .1), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(140, 107, 255, .1), transparent 22%);
}

.knowledge-card p,
.knowledge-card li,
.article-card p,
.article-card li {
  color: var(--muted);
  line-height: 1.95;
  letter-spacing: .035em;
}

.knowledge-card ul,
.article-card ul,
.article-card ol,
.method-list {
  padding-left: 1.25em;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.two-column .magic-card {
  padding: 30px;
}

.article-page {
  padding: 70px clamp(20px, 5vw, 76px);
}

.article-hero {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin-bottom: 42px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(247, 216, 141, .2);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(6, 4, 2, .86), rgba(6, 4, 2, .54)),
    url("./assets/home-knowledge-hall.png") center / cover no-repeat;
  box-shadow: 0 36px 100px rgba(0,0,0,.44), inset 0 0 80px rgba(255,185,77,.04);
}

.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 42%, rgba(140, 107, 255, .18), transparent 28%),
    radial-gradient(circle at 78% 38%, rgba(88, 223, 255, .13), transparent 24%),
    linear-gradient(0deg, rgba(0,0,0,.24), transparent);
  mix-blend-mode: screen;
}

.article-hero > * {
  position: relative;
  z-index: 1;
}

.physics-body .article-hero {
  background:
    linear-gradient(90deg, rgba(6, 4, 2, .86), rgba(6, 4, 2, .5)),
    url("./assets/physics-lab-bg.png") center / cover no-repeat;
}

.ai-body .article-hero {
  background:
    linear-gradient(90deg, rgba(6, 4, 2, .86), rgba(6, 4, 2, .5)),
    url("./assets/ai-studio-bg.png") center / cover no-repeat;
}

.math-body .article-hero {
  background:
    linear-gradient(90deg, rgba(6, 4, 2, .86), rgba(6, 4, 2, .48)),
    url("./assets/home-knowledge-hall.png") center / cover no-repeat;
}

.article-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 96px;
  padding: 22px;
}

.toc h2 {
  margin-bottom: 16px;
  font-size: 24px;
}

.toc a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid rgba(247, 216, 141, .13);
  color: var(--muted);
}

.toc a:hover {
  color: var(--gold);
}

.article-content {
  display: grid;
  gap: 22px;
}

.article-card {
  padding: clamp(24px, 3vw, 38px);
  scroll-margin-top: 110px;
}

.article-card h2 {
  color: #ffe8ad;
}

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 28px clamp(20px, 5vw, 76px);
  border-top: 1px solid rgba(247, 216, 141, .13);
  color: rgba(255, 235, 195, .58);
  font-size: 13px;
  letter-spacing: .08em;
}

/* 首页改成下载页同类的高质量场景图风格 */
.hero-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100svh - 74px);
  margin: 0;
  border-bottom: 1px solid rgba(247, 216, 141, .18);
  background: #050302;
}

.hero-shell::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: -3;
  background: url("./assets/home-knowledge-hall.png") center / cover no-repeat;
  filter: saturate(1.08) contrast(1.04) brightness(.78);
  transform:
    translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0)
    scale(1.08);
}

.hero-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 45%, rgba(146, 83, 255, .24), transparent 23%),
    radial-gradient(circle at 74% 43%, rgba(69, 216, 255, .2), transparent 23%),
    linear-gradient(90deg, rgba(3, 2, 1, .88), rgba(3, 2, 1, .42) 42%, rgba(3, 2, 1, .22) 72%, rgba(3, 2, 1, .78)),
    linear-gradient(0deg, rgba(3, 2, 1, .88), transparent 35%, rgba(3, 2, 1, .28));
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(247, 216, 141, .26);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .09), transparent 32%),
    rgba(8, 5, 3, .56);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .48),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset 0 0 50px rgba(255, 185, 77, .04);
  backdrop-filter: blur(16px);
}

.hero-copy h1 {
  color: #fff1c4;
  text-shadow:
    0 0 22px rgba(255, 185, 77, .24),
    0 22px 70px rgba(0, 0, 0, .88);
}

.hero-copy .lead {
  color: rgba(255, 238, 202, .84);
}

.hero-visual {
  z-index: 2;
  min-height: clamp(460px, 48vw, 640px);
}

.hero-visual::after {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, rgba(88, 223, 255, .06)),
    rgba(8, 5, 3, .28);
  border-color: rgba(247, 216, 141, .22);
  backdrop-filter: blur(8px);
}

.window-arch {
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(247, 216, 141, .18) 49.6% 50.4%, transparent 50.4%),
    linear-gradient(0deg, transparent 53%, rgba(247, 216, 141, .16) 53% 54%, transparent 54%),
    radial-gradient(circle at 55% 22%, rgba(255, 242, 188, .24), transparent 8%),
    linear-gradient(155deg, rgba(13, 57, 91, .46), rgba(13, 13, 38, .5) 54%, rgba(5, 4, 10, .78));
  backdrop-filter: blur(2px);
}

.visual-strip {
  padding-top: 62px;
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(3,2,1,.1), rgba(3,2,1,.62)),
    radial-gradient(circle at 28% 0%, rgba(255, 185, 77, .12), transparent 26%),
    radial-gradient(circle at 74% 0%, rgba(88, 223, 255, .1), transparent 24%);
}

.section-block {
  position: relative;
  overflow: hidden;
}

.section-block::before {
  content: "";
  position: absolute;
  inset: 24px clamp(20px, 5vw, 76px);
  z-index: -1;
  border: 1px solid rgba(247, 216, 141, .08);
  border-radius: 38px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 185, 77, .1), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(88, 223, 255, .08), transparent 22%),
    rgba(12, 7, 3, .26);
  box-shadow: inset 0 0 80px rgba(255, 185, 77, .025);
}

.feature-card {
  background:
    linear-gradient(180deg, rgba(255, 220, 143, .08), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.075), transparent 30%),
    rgba(26, 15, 7, .76);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(247, 216, 141, .42);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 36px 100px rgba(0,0,0,.46),
    0 0 44px rgba(255,185,77,.09);
}

.download-body {
  overflow: hidden;
}

.download-header {
  position: fixed;
  left: 0;
  right: 0;
}

.download-stage {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: 76px;
  background:
    radial-gradient(circle at 50% 48%, rgba(61, 104, 149, .22), transparent 42%),
    radial-gradient(circle at 15% 82%, rgba(255, 161, 50, .12), transparent 26%),
    linear-gradient(180deg, #060402, #020202);
}

.artboard {
  position: relative;
  width: min(100vw, calc((100svh - 76px) * 1672 / 941));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: clamp(0px, 1.1vw, 26px);
  box-shadow:
    0 44px 110px rgba(0, 0, 0, .72),
    0 0 90px rgba(255, 178, 61, .08);
  transform:
    translate3d(calc(var(--mx) * -8px), calc(var(--my) * -5px), 0)
    scale(1.002);
}

.scene-image {
  position: absolute;
  inset: 0;
  background: url("./assets/fantasy-house.jpg.png") center / cover no-repeat;
  transform:
    translate3d(calc(var(--mx) * -10px), calc(var(--my) * -7px), 0)
    scale(1.018);
  filter: saturate(1.06) contrast(1.03) brightness(.98);
  transition: transform .16s ease-out;
  animation: downloadSceneDrift 15s ease-in-out infinite alternate;
}

.scene-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 42% 53%, rgba(146, 83, 255, .18), transparent 18%),
    radial-gradient(circle at 73% 50%, rgba(69, 216, 255, .16), transparent 17%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.18));
  mix-blend-mode: screen;
  animation: downloadColorBreath 6s ease-in-out infinite;
}

#magicCanvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.scene-motion {
  position: absolute;
  z-index: 6;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.magic-shaft {
  position: absolute;
  left: -42%;
  width: 56%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,234,174,.15) 34%, rgba(255,250,222,.9) 72%, transparent);
  box-shadow: 0 0 12px rgba(255,215,124,.45), 0 0 34px rgba(171,111,255,.2);
  transform: rotate(-12deg);
  animation: downloadLightFlight 7.8s cubic-bezier(.2,.7,.25,1) infinite;
}

.magic-shaft-one { top: 73%; }
.magic-shaft-two { top: 49%; animation-delay:-2.7s; animation-duration:9.4s; filter:hue-rotate(70deg); }
.magic-shaft-three { top: 88%; animation-delay:-5.4s; animation-duration:11s; opacity:.4; }

.energy-plume {
  position: absolute;
  width: 24%;
  height: 38%;
  border-radius: 50%;
  filter: blur(13px);
  opacity: .34;
  transform-origin: 50% 100%;
  animation: downloadPlume 3.8s ease-in-out infinite;
}

.book-plume {
  left: 30%;
  top: 43%;
  background: radial-gradient(ellipse at 50% 75%, rgba(118,81,255,.58), rgba(169,111,255,.14) 38%, transparent 71%);
}

.globe-plume {
  left: 67%;
  top: 38%;
  width: 21%;
  background: radial-gradient(ellipse at 50% 72%, rgba(74,221,255,.62), rgba(53,160,255,.12) 40%, transparent 72%);
  animation-delay:-1.7s;
}

.energy-bridge {
  position: absolute;
  left: 43%;
  top: 53%;
  width: 34%;
  height: 16%;
  border-top: 1px solid rgba(168,218,255,.45);
  border-radius: 50%;
  filter: drop-shadow(0 0 9px rgba(103,211,255,.5));
  transform: rotate(-8deg) scaleX(.7);
  transform-origin: left center;
  animation: downloadBridge 4.8s ease-in-out infinite;
}

.star-flare {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background:#fff8dd;
  box-shadow:0 0 10px #fff1bd,0 0 24px rgba(255,195,80,.8);
  animation: downloadFlare 2.6s ease-in-out infinite;
}

.star-flare::before,.star-flare::after { content:""; position:absolute; left:50%; top:50%; background:linear-gradient(90deg,transparent,#fff7d9,transparent); transform:translate(-50%,-50%); }
.star-flare::before { width:34px; height:1px; }
.star-flare::after { width:1px; height:34px; background:linear-gradient(transparent,#fff7d9,transparent); }
.flare-one { left:20%; top:38%; animation-delay:-.4s; }
.flare-two { left:48%; top:64%; animation-delay:-1.6s; scale:.7; }
.flare-three { left:62%; top:31%; animation-delay:-2.1s; scale:.65; }
.flare-four { left:84%; top:59%; animation-delay:-.9s; }
.flare-five { left:34%; top:76%; animation-delay:-2.4s; scale:.55; }
.flare-six { left:72%; top:70%; animation-delay:-1.2s; scale:.7; }

.moon-bloom {
  position: absolute;
  z-index: 3;
  left: 53.4%;
  top: 18.7%;
  width: 7.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 190, .58), rgba(255, 245, 190, .2) 34%, transparent 70%);
  filter: blur(4px);
  animation: moonBreath 5.4s ease-in-out infinite;
  pointer-events: none;
}

.book-aura,
.globe-aura {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform-style: preserve-3d;
}

.book-aura {
  left: 33%;
  top: 51%;
  width: 23%;
  height: 18%;
  transform:
    translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0)
    rotateX(62deg);
}

.globe-aura {
  left: 74.8%;
  top: 37.8%;
  width: 11.2%;
  aspect-ratio: 1;
  transform:
    translate3d(calc(var(--mx) * 13px), calc(var(--my) * 8px), 0)
    rotateX(62deg)
    rotateY(20deg);
}

.book-aura span,
.globe-aura span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 219, 139, .65);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 188, 70, .22),
    inset 0 0 18px rgba(255, 188, 70, .08);
  animation: orbitSpin 7s linear infinite;
}

.book-aura span:nth-child(2) {
  inset: 16% 10%;
  border-color: rgba(135, 102, 255, .55);
  animation-duration: 5.5s;
  animation-direction: reverse;
}

.book-aura span:nth-child(3) {
  inset: 30% 20%;
  border-color: rgba(87, 223, 255, .45);
  animation-duration: 4.8s;
}

.globe-aura span {
  border-color: rgba(85, 219, 255, .75);
  box-shadow:
    0 0 24px rgba(85, 219, 255, .34),
    inset 0 0 16px rgba(85, 219, 255, .12);
}

.globe-aura span:nth-child(2) {
  transform: rotate(64deg);
  border-color: rgba(255, 213, 119, .6);
  animation-duration: 4.7s;
  animation-direction: reverse;
}

.globe-aura span:nth-child(3) {
  transform: rotate(-54deg);
  animation-duration: 6.4s;
}

.hotspots {
  position: absolute;
  z-index: 8;
  inset: 0;
}

.hotspot {
  position: absolute;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  outline: none;
  border-radius: 24px;
}

.translate-hotspot {
  left: 4%;
  top: 27%;
  width: 47.5%;
  height: 65%;
  clip-path: polygon(25% 0, 88% 0, 100% 38%, 100% 100%, 0 100%, 0 48%);
}

.live-hotspot {
  left: 52%;
  top: 26%;
  width: 44%;
  height: 66%;
  clip-path: polygon(9% 0, 75% 0, 100% 42%, 100% 100%, 0 100%, 0 36%);
}

.hotspot-ring {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2%;
  height: 31%;
  border: 1px solid rgba(255, 221, 143, 0);
  border-radius: 28px 28px 46% 46% / 34px 34px 25% 25%;
  background: radial-gradient(ellipse at center, rgba(255, 198, 75, 0), transparent 62%);
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease, transform .28s ease;
}

.hotspot-tip {
  position: absolute;
  left: 50%;
  bottom: 4%;
  translate: -50% 10px;
  padding: 9px 14px;
  border: 1px solid rgba(246, 207, 126, .38);
  border-radius: 999px;
  color: #ffe8b4;
  background: rgba(8, 5, 3, .78);
  box-shadow: 0 0 24px rgba(255, 178, 67, .14);
  backdrop-filter: blur(12px);
  font-family: "Space Grotesk", "Noto Serif SC", sans-serif;
  font-size: clamp(10px, .78vw, 13px);
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .24s ease, translate .24s ease;
}

.hotspot:hover .hotspot-ring,
.hotspot:focus-visible .hotspot-ring {
  border-color: rgba(255, 225, 151, .84);
  background: radial-gradient(ellipse at center, rgba(255, 189, 66, .16), transparent 64%);
  box-shadow:
    0 0 28px rgba(255, 190, 69, .24),
    inset 0 0 22px rgba(255, 231, 171, .1);
  transform: scale(1.04);
}

.live-hotspot:hover .hotspot-ring,
.live-hotspot:focus-visible .hotspot-ring {
  border-color: rgba(94, 226, 255, .82);
  background: radial-gradient(ellipse at center, rgba(86, 213, 255, .14), transparent 64%);
  box-shadow:
    0 0 30px rgba(86, 213, 255, .22),
    inset 0 0 22px rgba(255, 231, 171, .08);
}

.hotspot:hover .hotspot-tip,
.hotspot:focus-visible .hotspot-tip {
  opacity: 1;
  translate: -50% 0;
}

.edge-vignette {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), transparent 16%, transparent 84%, rgba(0,0,0,.58)),
    linear-gradient(0deg, rgba(0,0,0,.58), transparent 18%, transparent 88%, rgba(0,0,0,.35));
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  translate: -50% 16px;
  min-width: min(86vw, 360px);
  padding: 13px 20px;
  border: 1px solid rgba(246, 207, 126, .44);
  border-radius: 999px;
  color: #ffe8b4;
  background: rgba(9, 6, 3, .86);
  box-shadow: 0 0 34px rgba(255, 178, 67, .16);
  text-align: center;
  font-size: 14px;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(16px);
  transition: opacity .25s ease, translate .25s ease;
}

.toast.show {
  opacity: 1;
  translate: -50% 0;
}

/* 翻译工具独立下载页 */
.translation-download-body {
  min-height: 100svh;
  overflow: hidden;
  color: #fff1c8;
  background: #050302;
}

.translation-download-header {
  position: fixed;
  left: 0;
  right: 0;
}

.translation-download-main {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 110px 24px 34px;
  overflow: hidden;
}

.translation-download-scene {
  position: absolute;
  z-index: -3;
  inset: -3%;
  background:
    linear-gradient(90deg, rgba(4,2,1,.7), rgba(4,2,1,.22) 50%, rgba(4,2,1,.7)),
    url("./assets/fantasy-house.jpg.png") center / cover no-repeat;
  filter: saturate(.9) brightness(.53) contrast(1.08);
  transform: scale(1.04);
  animation: translationSceneBreath 14s ease-in-out infinite alternate;
}

.translation-download-main::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 42% 54%, rgba(128,82,255,.18), transparent 25%),
    radial-gradient(circle at 53% 44%, rgba(255,191,75,.16), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(2,1,1,.58));
}

.translation-download-glow {
  position: absolute;
  z-index: -1;
  width: min(72vw, 880px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,215,128,.18);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(117,88,255,.08), 0 0 100px rgba(255,178,56,.08);
  animation: translationOrbit 20s linear infinite;
}

.translation-download-glow i {
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(132,210,255,.17);
  border-radius: 50%;
  transform: rotateX(68deg);
}

.translation-download-glow i:nth-child(2) { inset: 23%; transform: rotateY(68deg); border-color: rgba(185,125,255,.22); }
.translation-download-glow i:nth-child(3) { inset: 34%; border-color: rgba(255,211,118,.23); transform: rotate(38deg); }

.translation-download-card {
  position: relative;
  width: min(92vw, 680px);
  padding: clamp(38px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(255,220,145,.3);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(25,14,7,.91), rgba(7,6,12,.94));
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 0 80px rgba(91,63,171,.08),
    0 45px 120px rgba(0,0,0,.68),
    0 0 54px rgba(255,175,56,.1);
  text-align: center;
  backdrop-filter: blur(24px);
}

.translation-download-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 43%, transparent 55%);
  translate: -130% 0;
  animation: translationSheen 7s ease-in-out infinite;
}

.translation-download-close {
  position: absolute;
  z-index: 4;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255,220,145,.24);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(8,5,8,.58);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28);
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.translation-download-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 1px;
  border-radius: 1px;
  background: #ffe9b5;
  box-shadow: 0 0 8px rgba(255,212,126,.34);
  transform: translate(-50%,-50%) rotate(45deg);
}

.translation-download-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }
.translation-download-close:hover,
.translation-download-close:focus-visible {
  transform: rotate(90deg) scale(1.08);
  border-color: rgba(255,226,164,.7);
  background: rgba(79,42,22,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 24px rgba(255,181,67,.16);
  outline: none;
}

.translation-download-closing .translation-download-card {
  opacity: 0;
  transform: scale(.94) translateY(12px);
  transition: opacity .26s ease, transform .26s ease;
}

.translation-download-closing .translation-download-glow { opacity: 0; transition: opacity .26s ease; }

.translation-download-mark {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(255,219,139,.36);
  border-radius: 50%;
  color: #fff0c8;
  background: radial-gradient(circle at 40% 35%, rgba(255,239,190,.38), rgba(106,69,173,.2) 38%, rgba(7,6,12,.92) 72%);
  box-shadow: 0 0 38px rgba(179,117,255,.2), inset 0 0 28px rgba(255,203,101,.12);
  font: 400 34px/1 "Noto Serif SC", serif;
}

.translation-download-card > p {
  margin: 0 0 15px;
  color: #c59cff;
  font: 600 11px/1.4 Arial, sans-serif;
  letter-spacing: .38em;
}

.translation-download-card h1 {
  margin: 0 0 36px;
  color: #fff2cd;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 450;
  letter-spacing: .08em;
  text-shadow: 0 0 28px rgba(255,194,83,.24);
}

.baidu-download-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7px 18px;
  padding: 22px 68px 22px 26px;
  overflow: hidden;
  border: 1px solid rgba(255,220,143,.4);
  border-radius: 18px;
  color: #fff0c7;
  background: linear-gradient(120deg, rgba(111,61,174,.3), rgba(119,73,24,.34));
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 18px 42px rgba(0,0,0,.35);
  text-align: left;
  text-decoration: none;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.baidu-download-link span { font-size: clamp(16px, 2vw, 20px); letter-spacing: .08em; }
.baidu-download-link strong { color: #d9b5ff; font-size: 13px; font-weight: 500; letter-spacing: .12em; }
.baidu-download-link i { position: absolute; right: 25px; top: 50%; translate: 0 -50%; color: #ffe4a5; font: normal 26px/1 Arial, sans-serif; }
.baidu-download-link:hover,
.baidu-download-link:focus-visible { transform: translateY(-5px); border-color: rgba(255,228,163,.78); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 26px 58px rgba(0,0,0,.46), 0 0 28px rgba(183,116,255,.14); }
.translation-download-card small { display: block; margin-top: 20px; color: rgba(236,216,178,.48); font-size: 11px; letter-spacing: .08em; }

/* AI 直播下载页：保留同一构造，使用仪器侧的蓝色能量语言 */
.ai-live-download-body .translation-download-main::before {
  background:
    radial-gradient(circle at 72% 50%, rgba(53,210,255,.23), transparent 27%),
    radial-gradient(circle at 52% 46%, rgba(85,104,255,.13), transparent 31%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(1,5,9,.63));
}

.ai-live-download-body .translation-download-scene {
  background:
    linear-gradient(90deg, rgba(1,5,9,.74), rgba(2,7,12,.25) 50%, rgba(1,5,9,.65)),
    url("./assets/fantasy-house.jpg.png") center / cover no-repeat;
  filter: saturate(.92) brightness(.52) contrast(1.1) hue-rotate(4deg);
}

.ai-live-download-body .translation-download-glow {
  border-color: rgba(104,224,255,.24);
  box-shadow: inset 0 0 100px rgba(58,161,255,.1), 0 0 110px rgba(66,211,255,.1);
  animation-direction: reverse;
}

.ai-live-download-body .translation-download-card {
  border-color: rgba(116,222,255,.34);
  background: linear-gradient(145deg, rgba(5,25,37,.94), rgba(3,7,17,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 0 84px rgba(48,130,255,.09), 0 45px 120px rgba(0,0,0,.7), 0 0 62px rgba(52,207,255,.12);
}

.ai-live-download-body .translation-download-mark {
  color:#eafcff;
  border-color:rgba(105,225,255,.42);
  background:radial-gradient(circle at 40% 35%,rgba(212,251,255,.52),rgba(45,168,255,.24) 38%,rgba(3,9,18,.94) 72%);
  box-shadow:0 0 42px rgba(57,218,255,.28),inset 0 0 30px rgba(110,228,255,.15);
  font:600 24px/1 Arial,sans-serif;
}

.ai-live-download-body .translation-download-card > p { color:#78e5ff; }
.ai-live-download-body .translation-download-card h1 { color:#effdff; text-shadow:0 0 32px rgba(88,221,255,.28); }
.ai-live-download-body .baidu-download-link {
  color:#eafdff;
  border-color:rgba(106,222,255,.43);
  background:linear-gradient(120deg,rgba(21,100,143,.38),rgba(30,52,112,.34));
}
.ai-live-download-body .baidu-download-link strong { color:#91eaff; }
.ai-live-download-body .baidu-download-link i { color:#b9f4ff; }
.ai-live-download-body .baidu-download-link:hover,
.ai-live-download-body .baidu-download-link:focus-visible { border-color:rgba(154,239,255,.8); box-shadow:inset 0 1px rgba(255,255,255,.15),0 26px 58px rgba(0,0,0,.48),0 0 32px rgba(58,214,255,.19); }
.ai-live-download-body .translation-download-close:hover,
.ai-live-download-body .translation-download-close:focus-visible { border-color:rgba(124,230,255,.72); background:rgba(10,67,89,.7); box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 26px rgba(63,218,255,.18); }

@keyframes translationSceneBreath { to { transform: scale(1.075) translate3d(-.5%, -.5%, 0); filter: saturate(1) brightness(.58) contrast(1.1); } }
@keyframes translationOrbit { to { rotate: 360deg; } }
@keyframes translationSheen { 0%,52% { translate:-130% 0; } 78%,100% { translate:130% 0; } }

@media (max-width: 680px) {
  .translation-download-main { padding: 154px 14px 24px; }
  .translation-download-card { padding: 34px 20px; border-radius: 25px; }
  .translation-download-mark { width: 70px; height: 70px; font-size: 28px; }
  .translation-download-close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .baidu-download-link { grid-template-columns: 1fr; padding: 20px 52px 20px 20px; }
}

/* 全站移动端导航与下载页竖屏重构 */
@media (max-width: 760px) {
  .site-header {
    position: relative;
    gap: 12px;
    padding: 12px 14px;
    overflow: hidden;
  }

  .brand {
    justify-content: center;
    min-height: 36px;
    font-size: 14px;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; white-space: nowrap; }

  .download-body { overflow-y: auto; }
  .download-header { position: relative; }
  .download-stage {
    min-height: auto;
    display: block;
    padding: 14px 0 max(28px,env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .download-stage .artboard {
    width: 100%;
    min-height: 148vw;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .download-stage .scene-image {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: auto 100%;
    background-position: center;
    opacity: .3;
    filter: blur(7px) saturate(.85) brightness(.55);
    transform: scale(1.08);
  }

  .download-stage .hotspots {
    position: relative;
    z-index: 8;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 14px;
  }

  .download-stage .hotspot {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: min(69vw,360px);
    flex: 0 0 auto;
    clip-path: none;
    overflow: hidden;
    border: 1px solid rgba(255,224,158,.24);
    border-radius: 25px;
    background-image: url("./assets/fantasy-house.jpg.png");
    background-repeat: no-repeat;
    background-size: 205% auto;
    box-shadow: inset 0 1px rgba(255,255,255,.1),0 24px 58px rgba(0,0,0,.46);
  }

  .download-stage .translate-hotspot { background-position: left 65%; }
  .download-stage .live-hotspot { background-position: right 65%; border-color: rgba(99,220,255,.25); }

  .download-stage .hotspot::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 48%,rgba(3,2,2,.24));
    pointer-events:none;
  }

  .download-stage .hotspot-ring {
    left: 7%;
    right: 7%;
    bottom: 5%;
    height: 27%;
  }

  .download-stage .hotspot-tip {
    bottom: 7%;
    translate: -50% 0;
    opacity: 1;
    color: #ffedbf;
    background: rgba(8,5,3,.68);
  }

  .download-stage .moon-bloom,
  .download-stage .book-aura,
  .download-stage .globe-aura { display:none; }

  .download-stage #magicCanvas,
  .download-stage .scene-motion { position:absolute; inset:0; width:100%; height:100%; }
  .download-stage .edge-vignette { position:fixed; }
}

@keyframes spinMark {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { transform: scale(1.14); opacity: .7; }
}

@keyframes twinkle {
  50% { transform: scale(.45); opacity: .45; }
}

@keyframes moonBreath {
  50% { transform: scale(1.28); opacity: .96; filter: blur(7px) brightness(1.35); }
}

@keyframes orbitSpin {
  to { rotate: 360deg; }
}

@keyframes downloadLightFlight {
  0% { translate:-8% 20%; opacity:0; scale:.35 1; }
  14% { opacity:.8; }
  58% { opacity:.5; }
  100% { translate:260% -55%; opacity:0; scale:1.35 1; }
}

@keyframes downloadPlume {
  0%,100% { transform:scale(.86, .78) translateY(9%); opacity:.2; }
  48% { transform:scale(1.12, 1.18) translateY(-5%); opacity:.55; }
}

@keyframes downloadBridge {
  0%,100% { transform:rotate(-8deg) scaleX(.58); opacity:.14; }
  45% { transform:rotate(-8deg) scaleX(1.08); opacity:.72; }
}

@keyframes downloadFlare {
  0%,100% { opacity:.16; transform:scale(.35) rotate(0deg); }
  42% { opacity:1; transform:scale(1.45) rotate(45deg); }
  58% { opacity:.72; transform:scale(.9) rotate(55deg); }
}

@keyframes downloadSceneDrift {
  0% { background-position:49.2% 49.5%; }
  100% { background-position:50.8% 50.5%; }
}

@keyframes downloadColorBreath {
  0%,100% { opacity:.55; filter:saturate(.9); }
  50% { opacity:1; filter:saturate(1.35) brightness(1.18); }
}

@media (max-width: 960px) {
  .site-header {
    position: relative;
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav {
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 24px;
  }

  .hero-shell,
  .knowledge-grid,
  .ornate-grid,
  .two-column,
  .article-grid,
  .visual-strip {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 560px;
  }

  .visual-strip {
    margin-top: 0;
  }

  .feature-card {
    min-height: auto;
  }

  .toc {
    position: relative;
    top: 0;
  }

  .download-header {
    position: relative;
  }

  .download-stage {
    padding-top: 0;
  }
}

@media (max-aspect-ratio: 1/1) {
  .download-body {
    overflow-y: auto;
  }

  .download-stage {
    min-height: calc(100svh - 1px);
    place-items: start center;
    padding-bottom: max(44px, env(safe-area-inset-bottom));
  }

  .artboard {
    width: 138vw;
    max-width: none;
    margin-left: -38vw;
    border-radius: 0;
  }

  .edge-vignette {
    background:
      linear-gradient(90deg, rgba(0,0,0,.34), transparent 18%, transparent 82%, rgba(0,0,0,.26)),
      linear-gradient(0deg, rgba(0,0,0,.72), transparent 22%, rgba(0,0,0,.15));
  }

  .hotspot-tip {
    display: none;
  }
}

@media (max-width: 680px) {
  .site-header,
  .section-block,
  .article-page,
  .site-footer {
    padding-inline: 18px;
  }

  .site-nav a {
    padding: 8px 11px;
    font-size: 13px;
  }

  .hero-shell {
    padding-inline: 18px;
    padding-top: 44px;
  }

  .hero-visual {
    min-height: 500px;
  }

  .window-arch {
    left: 4%;
    right: 4%;
  }

  .astrolabe {
    width: 82%;
  }

  .floating-note {
    min-width: 0;
    width: 45%;
    padding: 12px;
  }

  .floating-note span {
    font-size: 12px;
  }

  .note-physics {
    left: 2%;
    top: 50%;
  }

  .note-ai {
    right: 2%;
    top: 20%;
  }

  .wood-base {
    left: 6%;
    right: 6%;
  }

  .visual-strip {
    padding-inline: 18px;
  }

  .exhibit {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .exhibit-icon {
    width: 86px;
    font-size: 40px;
  }

  h1 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .knowledge-card,
  .article-card,
  .magic-card {
    border-radius: 22px;
  }

  .site-footer {
    flex-direction: column;
  }

  .artboard {
    width: 168vw;
    margin-left: -55vw;
  }

  .translate-hotspot {
    left: 4%;
    top: 27%;
    width: 47.5%;
    height: 65%;
  }

  .live-hotspot {
    left: 52%;
    top: 26%;
    width: 44%;
    height: 66%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 物理世界动态星云层 */
.physics-nebula-motion {
  position: absolute;
  inset: -12%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0);
}

.nebula-cloud,
.nebula-spiral,
.nebula-stream {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.nebula-cloud {
  border-radius: 50%;
  filter: blur(42px);
}

.cloud-blue {
  left: 16%;
  top: 30%;
  width: 62vw;
  height: 24vw;
  opacity: .34;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(75, 183, 255, .42), rgba(54, 94, 224, .18) 36%, transparent 72%),
    conic-gradient(from 40deg, transparent, rgba(107, 225, 255, .22), transparent 30%, rgba(92, 126, 255, .2), transparent 68%);
  transform: rotate(-15deg) scale(1.02);
  animation: nebulaBlueDrift 20s ease-in-out infinite alternate;
}

.cloud-violet {
  right: -4%;
  top: 6%;
  width: 48vw;
  height: 32vw;
  opacity: .32;
  background:
    radial-gradient(ellipse at 44% 48%, rgba(167, 87, 255, .42), rgba(76, 73, 201, .16) 42%, transparent 72%),
    conic-gradient(from 190deg, transparent, rgba(199, 114, 255, .2), transparent 34%, rgba(77, 182, 255, .18), transparent 72%);
  transform: rotate(12deg);
  animation: nebulaVioletDrift 26s ease-in-out infinite alternate;
}

.cloud-gold {
  left: 52%;
  top: 35%;
  width: 38vw;
  height: 20vw;
  opacity: .27;
  background: radial-gradient(ellipse, rgba(255, 205, 114, .52), rgba(255, 151, 59, .14) 34%, transparent 72%);
  filter: blur(34px);
  transform: rotate(-22deg);
  animation: nebulaGoldPulse 11s ease-in-out infinite;
}

.nebula-spiral {
  left: 67%;
  top: 51%;
  border-radius: 50%;
  translate: -50% -50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 5%, rgba(145, 217, 255, .34) 8%, transparent 12% 28%,
      rgba(255, 211, 128, .3) 31%, transparent 35% 52%,
      rgba(151, 108, 255, .25) 56%, transparent 61% 78%,
      rgba(116, 220, 255, .32) 82%, transparent 88% 100%);
  -webkit-mask: radial-gradient(ellipse, transparent 0 46%, #000 51% 58%, transparent 64%);
  mask: radial-gradient(ellipse, transparent 0 46%, #000 51% 58%, transparent 64%);
  filter: blur(3px) drop-shadow(0 0 20px rgba(120, 205, 255, .28));
}

.spiral-outer {
  width: 61vw;
  height: 35vw;
  opacity: .68;
  transform: rotate(-10deg);
  animation: nebulaSpiralTurn 28s linear infinite;
}

.spiral-inner {
  width: 38vw;
  height: 19vw;
  opacity: .72;
  transform: rotate(17deg);
  animation: nebulaSpiralTurnReverse 17s linear infinite;
}

.nebula-stream {
  left: -24%;
  width: 48vw;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(189, 234, 255, .16), rgba(255,255,255,.8), rgba(112, 196, 255, .28), transparent);
  box-shadow: 0 0 14px rgba(116, 207, 255, .44);
  transform: rotate(-13deg) scaleX(.2);
  animation: nebulaEnergyFlow 7s ease-in-out infinite;
}

.stream-one { top: 34%; }
.stream-two { top: 55%; animation-delay: -2.4s; animation-duration: 8.6s; }
.stream-three { top: 72%; animation-delay: -5.1s; animation-duration: 10.2s; }

@keyframes nebulaBlueDrift {
  0% { transform: translate3d(-5%, 5%, 0) rotate(-18deg) scale(.92); opacity: .2; }
  48% { transform: translate3d(4%, -3%, 0) rotate(-10deg) scale(1.08); opacity: .42; }
  100% { transform: translate3d(9%, 2%, 0) rotate(-4deg) scale(1); opacity: .3; }
}

@keyframes nebulaVioletDrift {
  0% { transform: translate3d(6%, -5%, 0) rotate(8deg) scale(.94); opacity: .2; }
  55% { transform: translate3d(-6%, 5%, 0) rotate(18deg) scale(1.12); opacity: .4; }
  100% { transform: translate3d(-2%, 9%, 0) rotate(26deg) scale(1.02); opacity: .28; }
}

@keyframes nebulaGoldPulse {
  0%, 100% { transform: rotate(-22deg) scale(.82); opacity: .16; }
  50% { transform: rotate(-15deg) scale(1.18); opacity: .38; }
}

@keyframes nebulaSpiralTurn {
  from { rotate: 0deg; scale: .96; }
  50% { scale: 1.04; }
  to { rotate: 360deg; scale: .96; }
}

@keyframes nebulaSpiralTurnReverse {
  from { rotate: 360deg; }
  to { rotate: 0deg; }
}

@keyframes nebulaEnergyFlow {
  0% { opacity: 0; transform: translate3d(-20vw, 16vh, 0) rotate(-13deg) scaleX(.12); }
  18% { opacity: .82; }
  72% { opacity: .35; }
  100% { opacity: 0; transform: translate3d(150vw, -24vh, 0) rotate(-13deg) scaleX(1.35); }
}

@media (max-width: 760px) {
  .physics-nebula-motion { inset: -18%; opacity: .82; }
  .spiral-outer { width: 118vw; height: 68vw; }
  .spiral-inner { width: 74vw; height: 38vw; }
  .nebula-spiral { left: 62%; top: 52%; }
  .cloud-blue { width: 120vw; height: 58vw; }
  .cloud-violet { width: 92vw; height: 68vw; }
}

/* 人工智能世界：与首页、物理、数学统一的全屏神经空间 */
.ai-body .article-page {
  padding: 0;
  background: #020818;
}

.ai-world-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 88px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(2,8,24,.28), transparent 32%, transparent 78%, rgba(1,7,20,.14)),
    linear-gradient(0deg, rgba(1,7,20,.38), transparent 36%),
    url("./assets/ai-neural-cathedral.png") center / cover no-repeat !important;
  box-shadow: none;
  animation: aiWorldDrift 12s ease-in-out infinite alternate;
}

.ai-world-hero > .eyebrow,
.ai-world-hero > h1,
.ai-world-hero > .lead { display: none; }

.ai-world-hero::before,
.ai-world-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ai-world-hero::before {
  z-index: 1;
  background:
    linear-gradient(118deg, transparent 22%, rgba(172,227,255,.1) 40%, transparent 48%),
    radial-gradient(ellipse at 67% 44%, rgba(159,218,255,.18), transparent 29%),
    radial-gradient(ellipse at 82% 72%, rgba(177,135,255,.13), transparent 24%);
  mix-blend-mode: screen;
  animation: aiFieldPulse 3.2s ease-in-out infinite;
}

.ai-world-hero::after {
  z-index: 7;
  background: linear-gradient(90deg, rgba(0,5,16,.2), transparent 22%, transparent 86%, rgba(0,5,16,.15));
}

.ai-neural-motion {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ai-data-stream {
  position: absolute;
  top: -35%;
  width: 1px;
  height: 72%;
  background: linear-gradient(to bottom, transparent, rgba(223,250,255,.96), rgba(91,190,255,.35), transparent);
  box-shadow: 0 0 9px #c8f4ff, 0 0 22px rgba(89,170,255,.55);
  animation: aiDataFall var(--stream-time, 5s) linear infinite;
}

.stream-1 { left: 17%; --stream-time: 4.8s; }
.stream-2 { left: 39%; --stream-time: 6.4s; animation-delay: -2.4s; }
.stream-3 { left: 71%; --stream-time: 5.6s; animation-delay: -4s; }
.stream-4 { left: 88%; --stream-time: 7.2s; animation-delay: -1.5s; }

.ai-neural-line {
  position: absolute;
  left: -26%;
  width: 44vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,226,255,.38), #fff, rgba(121,145,255,.35), transparent);
  box-shadow: 0 0 11px rgba(144,218,255,.55);
  opacity: 0;
  animation: aiNeuralSignal var(--signal-time, 8s) ease-in-out infinite;
}

.neural-line-1 { top: 22%; rotate: -7deg; }
.neural-line-2 { top: 42%; rotate: 5deg; --signal-time: 10s; animation-delay: -3s; }
.neural-line-3 { top: 63%; rotate: -3deg; --signal-time: 7s; animation-delay: -5s; }
.neural-line-4 { top: 79%; rotate: 8deg; --signal-time: 12s; animation-delay: -7s; }

.ai-energy-ribbon {
  position: absolute;
  left: -35%;
  top: 44%;
  width: 68vw;
  height: 18px;
  border-top: 2px solid rgba(210,246,255,.72);
  border-bottom: 1px solid rgba(116,169,255,.25);
  border-radius: 50%;
  box-shadow: 0 -3px 18px rgba(153,225,255,.64), inset 0 5px 18px rgba(121,116,255,.18);
  transform: rotate(-11deg) skewX(-18deg);
  opacity: 0;
  animation: aiRibbonSurge 6.5s cubic-bezier(.18,.62,.25,1) infinite;
}

.ribbon-2 { top: 68%; transform: rotate(7deg) skewX(22deg); animation-delay: -3.4s; animation-duration: 8.2s; }

.ai-scan-plane {
  position: absolute;
  top: -24%;
  left: -28%;
  width: 26vw;
  height: 150%;
  transform: skewX(-17deg);
  background: linear-gradient(90deg, transparent, rgba(123,205,255,.025) 28%, rgba(221,249,255,.3) 50%, rgba(136,112,255,.1) 56%, transparent 72%);
  filter: drop-shadow(0 0 18px rgba(121,202,255,.42));
  opacity: 0;
  animation: aiScanSweep 5.8s ease-in-out infinite;
}

.scan-plane-2 { width: 16vw; transform: skewX(24deg); animation-delay: -3s; animation-duration: 7.4s; }

.ai-spark {
  --spark-size: 5px;
  position: absolute;
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 22px #9de7ff, 0 0 42px rgba(103,121,255,.82);
  opacity: 0;
  animation: aiSparkFlash var(--spark-time, 3.4s) ease-in-out infinite;
}

.ai-spark::before,
.ai-spark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%; translate: -50% -50%;
  width: calc(var(--spark-size) * 10); height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.ai-spark::after { rotate: 90deg; width: calc(var(--spark-size) * 15); }
.spark-1 { left: 8%; top: 21%; --spark-time: 2.8s; }
.spark-2 { left: 27%; top: 52%; --spark-size: 7px; --spark-time: 4.2s; animation-delay: -1.5s; }
.spark-3 { left: 43%; top: 18%; --spark-size: 4px; animation-delay: -2.1s; }
.spark-4 { left: 56%; top: 68%; --spark-size: 6px; --spark-time: 3.8s; animation-delay: -.8s; }
.spark-5 { left: 66%; top: 39%; --spark-size: 8px; --spark-time: 4.6s; animation-delay: -3s; }
.spark-6 { left: 81%; top: 23%; --spark-size: 4px; --spark-time: 2.6s; animation-delay: -1.8s; }
.spark-7 { left: 92%; top: 59%; --spark-size: 6px; animation-delay: -2.4s; }
.spark-8 { left: 34%; top: 84%; --spark-size: 3px; --spark-time: 2.4s; animation-delay: -1.1s; }
.spark-9 { left: 76%; top: 82%; --spark-size: 5px; --spark-time: 3.9s; animation-delay: -2.7s; }

.ai-world-nav {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.ai-node {
  --ai-glow: rgba(126,214,255,.68);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: clamp(138px, 11vw, 196px);
  height: clamp(112px, 9vw, 160px);
  color: #f5fcff;
  text-decoration: none;
  pointer-events: auto;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.4));
  animation: aiNodeFloat var(--ai-float, 8s) ease-in-out infinite;
  transition: scale .35s ease, filter .35s ease;
}

.ai-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5%;
  width: 78%;
  height: 68%;
  translate: -50% 0;
  clip-path: polygon(50% 0, 88% 20%, 100% 52%, 76% 100%, 24% 100%, 0 52%, 12% 20%);
  border: 1px solid rgba(224,248,255,.52);
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.78) 0 2%, var(--ai-glow) 4%, transparent 20%),
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(206,242,255,.11) 13% 14%, transparent 15% 25%),
    conic-gradient(from 20deg, rgba(220,247,255,.22), rgba(62,118,199,.04), rgba(175,127,255,.18), rgba(214,244,255,.2));
  box-shadow: inset 0 0 28px rgba(159,220,255,.22), 0 0 5px rgba(255,255,255,.5), 0 0 34px var(--ai-glow);
  backdrop-filter: blur(8px) saturate(1.5);
  animation: aiCoreBreath 3.5s ease-in-out infinite;
}

.ai-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  width: 102%;
  height: 46%;
  translate: -50% 0;
  border: 1px solid color-mix(in srgb, var(--ai-glow) 75%, white 12%);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-16deg);
  box-shadow: 0 0 14px var(--ai-glow);
  animation: aiNodeOrbit 6s linear infinite;
}

.ai-node span {
  position: relative;
  z-index: 2;
  margin-top: 21%;
  font: 300 clamp(22px, 1.7vw, 34px)/1 Georgia, serif;
  letter-spacing: .03em;
  text-shadow: 0 0 10px #fff, 0 0 26px var(--ai-glow);
}

.ai-node b {
  position: absolute;
  z-index: 2;
  bottom: 3%;
  font-size: clamp(12px, .9vw, 16px);
  font-weight: 400;
  letter-spacing: .14em;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 15px var(--ai-glow);
}

.ai-node:hover,
.ai-node:focus-visible { scale: 1.1; filter: brightness(1.35) drop-shadow(0 0 24px var(--ai-glow)); outline: none; }
.ai-node:hover::after,
.ai-node:focus-visible::after { animation-duration: 1.8s; }

.ai-overview::before { clip-path: polygon(50% 0, 91% 26%, 78% 100%, 22% 100%, 9% 26%); }
.ai-overview::after { transform: rotate(-25deg); }
.ai-ml::before { clip-path: polygon(12% 8%, 88% 8%, 100% 50%, 78% 92%, 22% 92%, 0 50%); }
.ai-ml::after { transform: rotate(18deg); }
.ai-dl::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 18% 50%); }
.ai-dl::after { transform: rotate(-42deg); }
.ai-llm::before { clip-path: polygon(8% 18%, 76% 4%, 100% 48%, 76% 94%, 8% 82%, 20% 50%); }
.ai-llm::after { transform: rotate(9deg); }
.ai-agent::before { clip-path: polygon(50% 0, 72% 18%, 100% 25%, 82% 51%, 91% 87%, 55% 78%, 22% 100%, 18% 62%, 0 35%, 34% 28%); }
.ai-agent::after { transform: rotate(34deg); }
.ai-practice::before { clip-path: polygon(0 30%, 65% 8%, 100% 50%, 65% 92%, 0 70%, 26% 50%); }
.ai-practice::after { transform: rotate(-8deg); }
.ai-overview { left: 7%; top: 21%; --ai-float: 7s; }
.ai-ml { left: 20%; top: 64%; --ai-glow: rgba(121,201,255,.72); --ai-float: 8.5s; animation-delay: -3s; scale: .9; }
.ai-dl { left: 42%; top: 15%; --ai-glow: rgba(177,150,255,.68); --ai-float: 7.8s; animation-delay: -5s; scale: .86; }
.ai-llm { right: 8%; top: 18%; --ai-glow: rgba(255,216,142,.6); --ai-float: 7.2s; animation-delay: -1.5s; }
.ai-agent { right: 10%; top: 62%; --ai-glow: rgba(118,231,255,.72); --ai-float: 9s; animation-delay: -4s; scale: 1.05; }
.ai-practice { left: 49%; top: 73%; --ai-glow: rgba(183,132,255,.68); --ai-float: 8s; animation-delay: -6s; scale: .92; }

.ai-body .article-grid {
  display: none;
}

.ai-body .site-footer { display: none; }

.ai-body .toc,
.ai-body .article-card {
  border-color: rgba(167,220,255,.15);
  background: linear-gradient(145deg, rgba(17,39,75,.68), rgba(3,12,30,.8));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 26px 70px rgba(0,0,0,.3);
}

.ai-body .article-card h2,
.ai-body .article-card h3 { color: #dff5ff; }

@keyframes aiWorldDrift {
  from { background-size: auto, auto, 100%; background-position: center; filter: saturate(1.05) contrast(1.02) brightness(.98); }
  to { background-size: auto, auto, 112%; background-position: 53% 47%; filter: saturate(1.28) contrast(1.09) brightness(1.1); }
}
@keyframes aiFieldPulse { 0%,100% { opacity:.46; } 50% { opacity:1; filter:brightness(1.5); } }
@keyframes aiDataFall { from { translate:0 -25vh; opacity:0; } 15% { opacity:.8; } 80% { opacity:.25; } to { translate:0 150vh; opacity:0; } }
@keyframes aiNeuralSignal { 0% { translate:-15vw 10vh; scale:.2 1; opacity:0; } 18% { opacity:.75; } 100% { translate:155vw -18vh; scale:1.4 1; opacity:0; } }
@keyframes aiRibbonSurge { 0% { translate:-30vw 12vh; scale:.25 1; opacity:0; } 20% { opacity:.72; } 72% { opacity:.28; } 100% { translate:175vw -22vh; scale:1.35 1; opacity:0; } }
@keyframes aiScanSweep { 0% { translate:-22vw 0; opacity:0; } 18% { opacity:.2; } 50% { opacity:.76; } 82% { opacity:.12; } 100% { translate:160vw 0; opacity:0; } }
@keyframes aiSparkFlash { 0%,72%,100% { opacity:0; scale:.2; } 82% { opacity:1; scale:1.8; filter:brightness(2); } 92% { opacity:.15; scale:.7; } }
@keyframes aiNodeFloat { 0%,100% { translate:0 0; rotate:-1deg; } 48% { translate:5px -18px; rotate:1deg; } 72% { translate:-5px -8px; rotate:0; } }
@keyframes aiCoreBreath { 0%,100% { filter:brightness(.86); } 50% { filter:brightness(1.42); box-shadow:inset 0 0 38px rgba(177,232,255,.32),0 0 9px #fff,0 0 48px var(--ai-glow); } }
@keyframes aiNodeOrbit { to { rotate:360deg; } }

@media (max-width: 760px) {
  .ai-world-hero { min-height: calc(100svh - 72px); background-position: 60% center !important; }
  .ai-node { width: clamp(96px, 28vw, 124px); height: clamp(88px, 26vw, 116px); }
  .ai-node b { font-size: 11px; }
  .ai-node span { font-size: 26px; }
  .ai-overview { left: 3%; top: 16%; }
  .ai-dl { left: 39%; top: 9%; }
  .ai-llm { right: 3%; top: 22%; }
  .ai-ml { left: 8%; top: 59%; }
  .ai-practice { left: 39%; top: 72%; }
  .ai-agent { right: 4%; top: 57%; }
  .ai-body .article-grid { width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-neural-motion *, .ai-node, .ai-world-hero { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
  .physics-nebula-motion * { animation-play-state: paused !important; }
}

/* 银河整体绕光核旋转，光核保持固定直射 */
.physics-world-hero {
  isolation: isolate;
}

.physics-galaxy-rotor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1,7,18,.16), transparent 38%, transparent 78%, rgba(1,7,18,.08)),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
  transform-origin: 67% 52%;
  transform: scale(1.2) rotate(0deg);
  -webkit-mask: radial-gradient(circle at 67% 52%, #000 0 48%, rgba(0,0,0,.96) 56%, rgba(0,0,0,.38) 68%, transparent 78%);
  mask: radial-gradient(circle at 67% 52%, #000 0 48%, rgba(0,0,0,.96) 56%, rgba(0,0,0,.38) 68%, transparent 78%);
  animation: galaxyWholeOrbit 84s linear infinite;
  will-change: transform;
}

.physics-nebula-motion {
  opacity: .38;
}

.physics-core-beacon {
  position: absolute;
  left: 67%;
  top: 52%;
  z-index: 4;
  width: 1px;
  height: 1px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.physics-core-beacon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(42px, 5vw, 90px);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(circle, #fff 0 4%, rgba(234,252,255,.98) 8%, rgba(109,219,255,.78) 23%, rgba(68,126,255,.28) 46%, transparent 72%);
  box-shadow:
    0 0 18px rgba(255,255,255,.95),
    0 0 58px rgba(111,224,255,.82),
    0 0 120px rgba(81,139,255,.48),
    0 0 210px rgba(166,108,255,.26);
  animation: coreBeaconBurn 2.8s ease-in-out infinite;
}

.physics-core-beacon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 132vh;
  translate: -50% -50%;
  background: linear-gradient(180deg, transparent, rgba(191,233,255,.3) 20%, #fff 49%, rgba(190,231,255,.36) 80%, transparent);
  box-shadow: 0 0 11px rgba(211,244,255,.72), 0 0 34px rgba(83,172,255,.42);
  opacity: .74;
  animation: directBeamBurn 3.4s ease-in-out infinite;
}

.core-beam {
  position: absolute;
  left: 0;
  top: -1px;
  width: 58vw;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(178,228,255,.48) 18%, rgba(99,158,255,.15) 54%, transparent 100%);
  box-shadow: 0 0 12px rgba(208,242,255,.66), 0 0 32px rgba(87,169,255,.32);
  opacity: .64;
  animation: directBeamBurn 3.4s ease-in-out infinite;
}

.beam-up { transform: rotate(-90deg); }
.beam-down { transform: rotate(90deg); animation-delay: -.8s; }
.beam-left { transform: rotate(194deg); animation-delay: -1.6s; opacity: .42; }
.beam-right { transform: rotate(14deg); animation-delay: -2.4s; opacity: .42; }

@keyframes galaxyWholeOrbit {
  from { transform: scale(1.2) rotate(0deg); filter: saturate(1.04) brightness(.98); }
  50% { transform: scale(1.23) rotate(180deg); filter: saturate(1.22) brightness(1.08); }
  to { transform: scale(1.2) rotate(360deg); filter: saturate(1.04) brightness(.98); }
}

@keyframes coreBeaconBurn {
  0%, 100% { scale: .9; opacity: .82; filter: brightness(1); }
  50% { scale: 1.16; opacity: 1; filter: brightness(1.32); }
}

@keyframes directBeamBurn {
  0%, 100% { filter: brightness(.9); opacity: .48; }
  48% { filter: brightness(1.5); opacity: .92; }
  60% { filter: brightness(1.15); opacity: .74; }
}

@media (max-width: 760px) {
  .physics-galaxy-rotor {
    transform-origin: 62% 52%;
    -webkit-mask: radial-gradient(circle at 62% 52%, #000 0 45%, rgba(0,0,0,.9) 57%, transparent 76%);
    mask: radial-gradient(circle at 62% 52%, #000 0 45%, rgba(0,0,0,.9) 57%, transparent 76%);
  }

  .physics-core-beacon { left: 62%; top: 52%; }
  .core-beam { width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
  .physics-galaxy-rotor,
  .physics-core-beacon::before,
  .physics-core-beacon::after,
  .core-beam { animation-play-state: paused !important; }
}

/* 取消物理世界整片银河旋转 */
.physics-galaxy-rotor {
  display: none !important;
  animation: none !important;
}

/* 数学世界：与首页、物理世界统一的水晶宇宙首屏 */
.math-body .article-page {
  padding: 0;
  background: #020713;
}

.math-world-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 88px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(1,7,18,.34), rgba(1,7,18,.05) 34%, transparent 72%, rgba(1,7,18,.12)),
    linear-gradient(0deg, rgba(1,7,18,.5), transparent 38%, rgba(1,7,18,.08)),
    url("./assets/math-crystal-universe.png") center / cover no-repeat !important;
  box-shadow: none;
  animation: mathWorldBreath 20s ease-in-out infinite alternate;
}

.math-world-hero > .eyebrow,
.math-world-hero > h1,
.math-world-hero > .lead {
  display: none;
}

.math-world-hero::before,
.math-world-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.math-world-hero::before {
  z-index: 1;
  background:
    linear-gradient(108deg, transparent 51%, rgba(210,245,255,.11) 62%, transparent 72%),
    radial-gradient(circle at 78% 62%, rgba(255,222,154,.14), transparent 21%),
    radial-gradient(ellipse at 50% 105%, rgba(66,145,255,.24), transparent 48%);
  mix-blend-mode: screen;
  animation: mathCrystalPulse 3.8s ease-in-out infinite;
}

.math-world-hero::after {
  z-index: 6;
  background: linear-gradient(90deg, rgba(1,6,16,.22), transparent 24%, transparent 82%, rgba(1,6,16,.12));
}

.math-geometry-motion {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  perspective: 1200px;
  mix-blend-mode: screen;
}

.math-shockwave {
  display: none;
  position: absolute;
  left: 64%;
  top: 48%;
  width: 8vw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(218,248,255,.9);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(137,218,255,.45), 0 0 24px rgba(138,211,255,.55);
  opacity: 0;
  animation: mathShockwave 5s cubic-bezier(.12,.55,.2,1) infinite;
}

.shockwave-b { animation-delay: -2.5s; }

.math-ray-crown {
  position: absolute;
  left: 64%;
  top: 48%;
  width: 150vw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 4deg,
    transparent 0deg 5.2deg,
    rgba(208,244,255,.32) 5.35deg 5.48deg,
    transparent 5.65deg 12deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 3%, #000 9%, rgba(0,0,0,.45) 34%, transparent 66%);
  mask-image: radial-gradient(circle, transparent 0 3%, #000 9%, rgba(0,0,0,.45) 34%, transparent 66%);
  filter: drop-shadow(0 0 7px rgba(131,210,255,.65));
  opacity: .68;
  animation: mathRayCrown 28s linear infinite;
}

.math-power-beam {
  position: absolute;
  left: 64%;
  top: 48%;
  width: 72vw;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(139,220,255,.58) 12%, rgba(98,135,255,.16) 46%, transparent 88%);
  box-shadow: 0 0 9px rgba(210,245,255,.9), 0 0 24px rgba(93,166,255,.52);
  opacity: .35;
  animation: mathBeamCharge 4.6s ease-in-out infinite;
}

.beam-a { transform: rotate(-24deg); }
.beam-b { transform: rotate(18deg); animation-delay: -1.8s; }
.beam-c { transform: rotate(153deg); animation-delay: -3.2s; }
.beam-d { transform: rotate(197deg); animation-delay: -.8s; animation-duration: 3.8s; }
.beam-e { transform: rotate(73deg); animation-delay: -2.5s; animation-duration: 5.4s; }
.beam-f { transform: rotate(-68deg); animation-delay: -4.1s; animation-duration: 4.2s; }

.math-spectrum-sweep {
  position: absolute;
  top: -25%;
  left: -22%;
  width: 38vw;
  height: 150%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(129,206,255,.035) 35%, rgba(234,252,255,.34) 49%, rgba(148,114,255,.11) 54%, transparent 72%);
  filter: blur(.3px) drop-shadow(0 0 16px rgba(130,206,255,.34));
  opacity: 0;
  animation: mathSpectrumSweep 7.4s cubic-bezier(.2,.55,.3,1) infinite;
}

.sweep-b { animation-delay: -3.8s; transform: skewX(24deg); width: 24vw; }

.math-prism-shard {
  position: absolute;
  width: clamp(34px, 4vw, 78px);
  height: clamp(95px, 13vw, 220px);
  clip-path: polygon(50% 0, 100% 78%, 58% 100%, 0 72%);
  background: linear-gradient(115deg, transparent 12%, rgba(222,250,255,.2) 35%, rgba(144,191,255,.08) 55%, rgba(255,217,151,.24) 78%, transparent);
  border: 1px solid rgba(220,248,255,.18);
  box-shadow: 0 0 28px rgba(127,203,255,.18);
  backdrop-filter: blur(2px);
  animation: mathShardDrift 8s ease-in-out infinite;
}

.shard-a { left: 31%; top: 18%; rotate: -28deg; }
.shard-b { left: 72%; top: 12%; rotate: 24deg; animation-delay: -3s; scale: .72; }
.shard-c { left: 78%; top: 68%; rotate: 58deg; animation-delay: -5s; scale: 1.25; }
.shard-d { left: 12%; top: 66%; rotate: -62deg; animation-delay: -1.8s; scale: .58; }

.math-flare {
  --flare-size: 5px;
  position: absolute;
  width: var(--flare-size);
  height: var(--flare-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 20px #a6e7ff, 0 0 42px rgba(116,151,255,.9);
  opacity: 0;
  animation: mathFlareFlash var(--flare-time, 3.6s) ease-in-out infinite;
}

.math-flare::before,
.math-flare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--flare-size) * 9);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215,247,255,.9), transparent);
}

.math-flare::after { rotate: 90deg; width: calc(var(--flare-size) * 13); }
.flare-1 { left: 9%; top: 15%; --flare-size: 4px; --flare-time: 2.7s; }
.flare-2 { left: 23%; top: 45%; --flare-size: 7px; --flare-time: 4.2s; animation-delay: -1.4s; }
.flare-3 { left: 35%; top: 12%; --flare-size: 3px; --flare-time: 2.1s; animation-delay: -.8s; }
.flare-4 { left: 46%; top: 58%; --flare-size: 6px; --flare-time: 3.2s; animation-delay: -2.2s; }
.flare-5 { left: 57%; top: 22%; --flare-size: 4px; --flare-time: 2.4s; animation-delay: -1.7s; }
.flare-6 { left: 68%; top: 34%; --flare-size: 8px; --flare-time: 4.5s; animation-delay: -3s; }
.flare-7 { left: 79%; top: 16%; --flare-size: 5px; --flare-time: 3.1s; animation-delay: -.5s; }
.flare-8 { left: 91%; top: 49%; --flare-size: 4px; --flare-time: 2.8s; animation-delay: -1.2s; }
.flare-9 { left: 16%; top: 78%; --flare-size: 3px; --flare-time: 2.2s; animation-delay: -1.6s; }
.flare-10 { left: 41%; top: 83%; --flare-size: 6px; --flare-time: 4s; animation-delay: -2.8s; }
.flare-11 { left: 70%; top: 78%; --flare-size: 4px; --flare-time: 2.6s; animation-delay: -.9s; }
.flare-12 { left: 88%; top: 84%; --flare-size: 7px; --flare-time: 3.8s; animation-delay: -2s; }

.math-depth-grid {
  position: absolute;
  left: 35%;
  right: -18%;
  bottom: -32%;
  height: 72%;
  transform: perspective(720px) rotateX(68deg);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(134,212,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,212,255,.16) 1px, transparent 1px);
  background-size: 72px 58px;
  -webkit-mask-image: linear-gradient(to top, #000 18%, transparent 86%);
  mask-image: linear-gradient(to top, #000 18%, transparent 86%);
  opacity: .5;
  animation: mathGridSurge 3.2s linear infinite;
}

.math-orbit {
  position: absolute;
  left: 63%;
  top: 48%;
  border-radius: 50%;
  translate: -50% -50%;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(223,249,255,.72) 13%, transparent 15% 38%, rgba(255,225,163,.48) 40%, transparent 43% 68%, rgba(179,225,255,.56) 70%, transparent 73% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 9px rgba(191,236,255,.4));
  opacity: .66;
}

.orbit-a {
  width: 42vw;
  aspect-ratio: 1;
  transform: rotateY(10deg) rotateZ(-8deg);
  animation: mathOrbitTurn 24s linear infinite;
}

.orbit-b {
  width: 34vw;
  height: 17vw;
  transform: rotateX(58deg) rotateY(22deg) rotateZ(28deg);
  animation: mathOrbitTurnReverse 15s linear infinite;
}

.orbit-c {
  width: 24vw;
  height: 11vw;
  transform: rotateX(66deg) rotateY(-35deg) rotateZ(-22deg);
  animation: mathOrbitTurn 9s linear infinite;
}

.math-light-trace {
  position: absolute;
  left: -32%;
  width: 42vw;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(211,245,255,.24), #fff, rgba(126,199,255,.28), transparent);
  box-shadow: 0 0 13px rgba(151,220,255,.45);
  animation: mathTracePass 8s ease-in-out infinite;
}

.trace-a { top: 28%; transform: rotate(-9deg); }
.trace-b { top: 52%; transform: rotate(6deg); animation-delay: -2.8s; animation-duration: 10s; }
.trace-c { top: 72%; transform: rotate(-4deg); animation-delay: -5.6s; animation-duration: 12s; }

.math-world-nav {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.math-node {
  --node-glow: rgba(128, 220, 255, .72);
  --node-line: rgba(211, 244, 255, .7);
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: clamp(116px, 9vw, 156px);
  height: clamp(120px, 9.5vw, 164px);
  color: rgba(246,253,255,.98);
  text-decoration: none;
  pointer-events: auto;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--node-glow) 42%, transparent));
  animation: mathNodeFloat var(--float-time, 8s) ease-in-out infinite;
  transition: filter .35s ease, scale .35s ease;
}

.math-node::before {
  content: "";
  position: absolute;
  top: 7%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  translate: -50% 0;
  border: 1px solid var(--node-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.9) 0 2%, rgba(255,255,255,.25) 4%, transparent 17%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--node-glow) 22%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(169,222,255,.025) 48%, rgba(4,15,34,.12));
  box-shadow:
    inset 0 0 0 6px rgba(210,241,255,.025),
    inset 0 0 24px color-mix(in srgb, var(--node-glow) 22%, transparent),
    0 0 5px rgba(255,255,255,.42),
    0 0 24px color-mix(in srgb, var(--node-glow) 48%, transparent);
  backdrop-filter: blur(5px) saturate(1.35);
}

.math-node::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  width: 88%;
  height: 52%;
  translate: -50% 0;
  border: 1px solid color-mix(in srgb, var(--node-line) 62%, transparent);
  border-radius: 50%;
  transform: rotate(-22deg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--node-glow) 45%, transparent);
  opacity: .75;
  animation: mathInstrumentOrbit 7s linear infinite;
}

.math-node span {
  position: relative;
  z-index: 3;
  margin-top: 22%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 2.6vw, 44px);
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 0 8px #fff, 0 0 22px var(--node-glow);
}

.math-node b {
  position: absolute;
  z-index: 3;
  bottom: 2%;
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 400;
  letter-spacing: .2em;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.92), 0 0 13px var(--node-glow);
}

.math-node:hover,
.math-node:focus-visible {
  filter: brightness(1.28) saturate(1.15) drop-shadow(0 0 25px var(--node-glow));
  scale: 1.1;
  outline: none;
}

.math-node:hover::after,
.math-node:focus-visible::after { animation-duration: 2.2s; opacity: 1; }

.math-linear::before { border-radius: 30% 70% 34% 66% / 62% 35% 65% 38%; }
.math-linear::after { transform: rotate(28deg); }
.math-analysis::before { border-radius: 44% 56% 63% 37% / 40% 44% 56% 60%; }
.math-analysis::after { transform: rotate(-38deg); }
.math-topology::before { border-radius: 50% 30% 50% 30%; transform: rotate(45deg); }
.math-topology::after { transform: rotate(18deg); }
.math-probability::before { border-radius: 62% 38% 54% 46% / 44% 60% 40% 56%; }
.math-probability::after { transform: rotate(-12deg); }
.math-number::before { border-radius: 38% 62% 42% 58% / 58% 40% 60% 42%; }
.math-number::after { transform: rotate(36deg); }

.math-calculus { left: 7%; top: 24%; --float-time: 6.8s; scale: 1.12; }
.math-linear { left: 20%; top: 65%; --node-glow: rgba(155,132,255,.7); --float-time: 7.8s; animation-delay: -3s; scale: .92; }
.math-analysis { left: 43%; top: 15%; --node-glow: rgba(255,218,142,.68); --float-time: 7.2s; animation-delay: -5s; scale: .88; }
.math-topology { right: 10%; top: 61%; --node-glow: rgba(121,214,255,.75); --float-time: 8.6s; animation-delay: -2s; scale: 1.08; }
.math-probability { right: 7%; top: 18%; --node-glow: rgba(188,130,255,.72); --float-time: 6.9s; animation-delay: -6s; scale: .96; }
.math-number { left: 50%; top: 72%; --node-glow: rgba(255,210,117,.7); --float-time: 8.1s; animation-delay: -4s; scale: 1.16; }

@keyframes mathInstrumentOrbit {
  to { rotate: 360deg; }
}

.math-body .article-grid {
  display: none;
}

.math-body .site-footer { display: none; }

/* 数学三级知识页 */
.math-topic-body {
  --math-accent: #a8e8ff;
  --math-accent-2: #7b8dff;
  min-height: 100vh;
  color: #f3f9ff;
  background: #020817;
}

.math-topic-body.topic-linear { --math-accent: #d2bdff; --math-accent-2: #765cff; }
.math-topic-body.topic-analysis { --math-accent: #ffe0a1; --math-accent-2: #bc84ff; }
.math-topic-body.topic-topology { --math-accent: #93f2ff; --math-accent-2: #4d9dff; }
.math-topic-body.topic-probability { --math-accent: #e6b5ff; --math-accent-2: #7b7cff; }
.math-topic-body.topic-number { --math-accent: #ffe29c; --math-accent-2: #77cfff; }

.math-topic-main {
  min-height: 100vh;
  padding: 128px clamp(24px, 6vw, 104px) 84px;
  background:
    radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--math-accent-2) 22%, transparent), transparent 24%),
    linear-gradient(120deg, rgba(1,8,24,.97), rgba(3,14,38,.5)),
    url("./assets/math-crystal-universe.png") center / cover fixed;
}

.math-topic-main .topic-breadcrumb a { color: var(--math-accent); }
.math-topic-main .topic-heading .eyebrow { color: var(--math-accent); }
.math-topic-main .topic-heading h1 { text-shadow: 0 0 46px color-mix(in srgb, var(--math-accent) 50%, transparent); }

.math-object {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(28vw, 390px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--math-accent) 58%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.8), transparent 5%),
    radial-gradient(circle, color-mix(in srgb, var(--math-accent-2) 22%, transparent), rgba(4,15,42,.15) 62%);
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--math-accent) 16%, transparent), 0 0 80px color-mix(in srgb, var(--math-accent-2) 35%, transparent);
  backdrop-filter: blur(8px) saturate(1.4);
  animation: topicPlanetFloat 9s ease-in-out infinite;
}

.math-object::before,
.math-object::after {
  content: "";
  position: absolute;
  width: 142%;
  height: 42%;
  border: 1px solid color-mix(in srgb, var(--math-accent) 55%, transparent);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--math-accent) 24%, transparent);
}

.math-object::after { transform: rotate(42deg); animation: mathInstrumentOrbit 12s linear infinite; }

.math-object span {
  position: relative;
  z-index: 2;
  font: 300 clamp(80px, 10vw, 150px)/1 Georgia, serif;
  text-shadow: 0 0 16px #fff, 0 0 46px var(--math-accent);
}

.math-topic-main .topic-card { border-color: color-mix(in srgb, var(--math-accent) 18%, transparent); }
.math-topic-main .topic-card span { color: var(--math-accent); }
.math-topic-main .topic-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 820px) {
  .math-topic-main { padding-top: 110px; }
  .math-object { width: min(62vw, 320px); }
  .math-topic-main .topic-sections { grid-template-columns: 1fr; }
}

@keyframes mathWorldBreath {
  from { background-size: auto, auto, 100%; background-position: center; filter: saturate(1.1) contrast(1.03) brightness(.98); }
  to { background-size: auto, auto, 110%; background-position: 52% 48%; filter: saturate(1.3) contrast(1.1) brightness(1.1); }
}

@keyframes mathCrystalPulse {
  0%, 100% { opacity: .52; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.65); }
}

@keyframes mathShockwave {
  0% { scale: .15; opacity: 0; }
  12% { opacity: .85; }
  80%, 100% { scale: 11; opacity: 0; }
}

@keyframes mathRayCrown {
  to { rotate: 360deg; }
}

@keyframes mathBeamCharge {
  0%, 100% { opacity: .08; scale: .35 1; filter: brightness(.8); }
  45% { opacity: .58; scale: 1 1; filter: brightness(1.8); }
  60% { opacity: .16; scale: .72 1; }
}

@keyframes mathSpectrumSweep {
  0% { translate: -18vw 0; opacity: 0; }
  16% { opacity: .22; }
  48% { opacity: .66; }
  72% { opacity: .14; }
  100% { translate: 155vw 0; opacity: 0; }
}

@keyframes mathShardDrift {
  0%, 100% { translate: 0 0; filter: brightness(.75); opacity: .3; }
  42% { translate: 18px -32px; filter: brightness(1.8); opacity: .8; }
  68% { translate: -8px -16px; filter: brightness(1.1); opacity: .46; }
}

@keyframes mathFlareFlash {
  0%, 76%, 100% { opacity: 0; scale: .2; filter: brightness(.8); }
  82% { opacity: .36; scale: .7; }
  87% { opacity: 1; scale: 1.7; filter: brightness(2.2); }
  92% { opacity: .18; scale: .75; }
}

@keyframes mathGridSurge {
  to { background-position: 0 58px, 72px 0; }
}

@keyframes mathOrbitTurn { to { rotate: 360deg; } }
@keyframes mathOrbitTurnReverse { to { rotate: -360deg; } }

@keyframes mathTracePass {
  0% { opacity: 0; translate: -10vw 12vh; scale: .15 1; }
  18% { opacity: .78; }
  76% { opacity: .28; }
  100% { opacity: 0; translate: 160vw -18vh; scale: 1.3 1; }
}

@keyframes mathNodeFloat {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  46% { translate: 5px -17px; rotate: 1deg; }
  72% { translate: -4px -7px; rotate: 0deg; }
}

@media (max-width: 760px) {
  .math-world-hero { min-height: calc(100svh - 72px); background-position: 61% center !important; }
  .orbit-a { width: 88vw; }
  .orbit-b { width: 72vw; height: 38vw; }
  .orbit-c { width: 54vw; height: 25vw; }
  .math-orbit { left: 60%; top: 47%; }
  .math-node { width: clamp(78px, 23vw, 106px); }
  .math-node b { font-size: 12px; }
  .math-node span { font-size: 31px; }
  .math-calculus { left: 5%; top: 18%; }
  .math-linear { left: 7%; top: 58%; }
  .math-analysis { left: 39%; top: 13%; }
  .math-topology { right: 4%; top: 58%; }
  .math-probability { right: 4%; top: 20%; }
  .math-number { left: 39%; top: 73%; }
}

@media (prefers-reduced-motion: reduce) {
  .math-world-hero,
  .math-geometry-motion *,
  .math-node { animation-play-state: paused !important; }
}

/* 物理世界：三维空间展示 */
.physics-world-hero {
  position: relative;
  min-height: calc(100svh - 120px);
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
  overflow: hidden;
  margin-bottom: 42px;
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid rgba(247, 216, 141, .18);
  border-radius: 38px;
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .92), rgba(4, 3, 2, .48)),
    url("./assets/physics-lab-bg.png") center / cover no-repeat;
  box-shadow: 0 42px 120px rgba(0,0,0,.52), inset 0 0 90px rgba(88,223,255,.05);
  perspective: 1400px;
}

.physics-world-hero::before,
.physics-world-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.physics-world-hero::before {
  inset: 0;
  background:
    radial-gradient(circle at 66% 42%, rgba(88,223,255,.2), transparent 28%),
    radial-gradient(circle at 42% 50%, rgba(255,185,77,.16), transparent 24%),
    linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%, rgba(0,0,0,.28));
  mix-blend-mode: screen;
}

.physics-world-hero::after {
  left: 45%;
  right: 4%;
  bottom: -16%;
  height: 42%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(88,223,255,.18), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(247,216,141,.08) 43px 44px);
  transform: rotateX(72deg);
}

.physics-world-copy {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(247,216,141,.23);
  border-radius: 30px;
  background: rgba(8,5,3,.58);
  box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 0 48px rgba(255,185,77,.04);
  backdrop-filter: blur(16px);
}

.physics-world-copy h1 {
  color: #fff0c2;
  text-shadow: 0 0 28px rgba(255,185,77,.28), 0 22px 70px rgba(0,0,0,.85);
}

.physics-orbit-space {
  position: relative;
  z-index: 2;
  min-height: clamp(520px, 48vw, 720px);
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--mx) * 12px), calc(var(--my) * 8px), 0)
    rotateX(calc(var(--my) * -5deg))
    rotateY(calc(var(--mx) * 7deg));
}

.space-window {
  position: absolute;
  inset: 3% 7% 10%;
  border: 1px solid rgba(247,216,141,.2);
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 42%, rgba(88,223,255,.16), transparent 24%),
    radial-gradient(circle at 64% 58%, rgba(140,107,255,.12), transparent 28%),
    rgba(4,5,12,.34);
  box-shadow: inset 0 0 90px rgba(88,223,255,.08), 0 40px 100px rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
}

.spacetime-grid {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 6%;
  height: 48%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,185,77,.14), transparent 46%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(88,223,255,.12) 35px 36px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(247,216,141,.08) 35px 36px);
  transform: rotateX(68deg) translateZ(-80px);
  transform-origin: center;
  filter: drop-shadow(0 0 24px rgba(88,223,255,.16));
}

.physics-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(30vw, 260px);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.physics-core strong {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #241407;
  background:
    radial-gradient(circle at 35% 25%, #fff8d4, transparent 12%),
    radial-gradient(circle, #f7d88d, #ac7430 65%, #160d06);
  box-shadow: 0 0 46px rgba(255,185,77,.38), inset 0 0 24px rgba(255,255,255,.18);
  font-size: clamp(24px, 3vw, 46px);
  letter-spacing: .08em;
}

.core-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(247,216,141,.58);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(255,185,77,.14);
  animation: orbitSpin 10s linear infinite;
}

.core-ring.r2 {
  inset: 14%;
  border-color: rgba(88,223,255,.5);
  transform: rotateX(66deg) rotateY(24deg);
  animation-duration: 7s;
  animation-direction: reverse;
}

.core-ring.r3 {
  inset: 27%;
  border-color: rgba(140,107,255,.5);
  transform: rotateX(72deg) rotateZ(42deg);
  animation-duration: 5.5s;
}

.physics-node {
  position: absolute;
  z-index: 4;
  width: 172px;
  min-height: 94px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 14px;
  border: 1px solid rgba(247,216,141,.34);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.1), transparent 28%),
    rgba(8,5,3,.72);
  box-shadow: 0 24px 60px rgba(0,0,0,.42), inset 0 0 32px rgba(255,185,77,.05);
  backdrop-filter: blur(12px);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.physics-node::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(247,216,141,.16);
  border-radius: 50%;
  opacity: .7;
}

.physics-node b {
  color: #ffe8ae;
  font-size: 24px;
  letter-spacing: .12em;
}

.physics-node small {
  margin-top: 6px;
  color: rgba(255,235,195,.68);
  font-size: 12px;
}

.physics-node:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: rgba(255,232,174,.72);
  box-shadow: 0 34px 90px rgba(0,0,0,.52), 0 0 42px rgba(88,223,255,.15);
}

.node-mechanics { left: 10%; top: 18%; }
.node-em { right: 10%; top: 18%; border-color: rgba(88,223,255,.36); }
.node-thermal { left: 2%; top: 52%; }
.node-relativity { right: 2%; top: 52%; }
.node-quantum { left: 30%; bottom: 4%; border-color: rgba(140,107,255,.38); }
.node-cosmos { right: 30%; bottom: 4%; border-color: rgba(88,223,255,.38); }

@media (max-width: 1050px) {
  .physics-world-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .physics-world-hero {
    padding: 18px;
    border-radius: 24px;
  }

  .physics-orbit-space {
    min-height: 620px;
  }

  .physics-core {
    width: 230px;
  }

  .physics-node {
    width: 145px;
  }

  .node-mechanics { left: 2%; top: 15%; }
  .node-em { right: 2%; top: 15%; }
  .node-thermal { left: 0; top: 45%; }
  .node-relativity { right: 0; top: 45%; }
  .node-quantum { left: 6%; bottom: 5%; }
  .node-cosmos { right: 6%; bottom: 5%; }
}

/* 物理世界星系版：覆盖原室内实验室风格 */
.physics-world-hero {
  background:
    linear-gradient(90deg, rgba(1, 3, 10, .94), rgba(1, 4, 13, .36) 44%, rgba(1, 3, 10, .14)),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
  border-color: rgba(88,223,255,.18);
  box-shadow: 0 42px 150px rgba(0,0,0,.68), inset 0 0 120px rgba(88,223,255,.08);
}

.physics-world-hero::before {
  background:
    radial-gradient(circle at 66% 42%, rgba(88,223,255,.22), transparent 30%),
    radial-gradient(circle at 48% 36%, rgba(255,185,77,.16), transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(140,107,255,.18), transparent 24%),
    linear-gradient(0deg, rgba(0,0,0,.66), transparent 48%, rgba(0,0,0,.28));
}

.physics-world-copy {
  border-color: rgba(88,223,255,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%),
    rgba(2,8,18,.58);
  box-shadow: 0 30px 100px rgba(0,0,0,.58), inset 0 0 58px rgba(88,223,255,.06);
}

.physics-world-copy .eyebrow {
  color: #7fe9ff;
}

.physics-world-copy h1 {
  color: #f6fbff;
  text-shadow: 0 0 30px rgba(88,223,255,.34), 0 22px 74px rgba(0,0,0,.9);
}

.space-window {
  inset: 1% 3% 5%;
  border-color: rgba(88,223,255,.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(88,223,255,.12), transparent 22%),
    conic-gradient(from 180deg, transparent, rgba(88,223,255,.16), transparent, rgba(247,216,141,.12), transparent);
  box-shadow: inset 0 0 110px rgba(88,223,255,.06), 0 40px 120px rgba(0,0,0,.46);
  animation: orbitSpin 32s linear infinite;
}

.spacetime-grid {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(88,223,255,.18), transparent 46%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(88,223,255,.12) 35px 36px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(140,107,255,.08) 35px 36px);
}

.physics-core strong {
  color: #05111c;
  background:
    radial-gradient(circle at 35% 25%, #ffffff, transparent 12%),
    radial-gradient(circle, #8ff0ff, #2d72ff 48%, #05081b 72%);
  box-shadow: 0 0 54px rgba(88,223,255,.52), 0 0 100px rgba(140,107,255,.24), inset 0 0 24px rgba(255,255,255,.18);
}

.core-ring {
  border-color: rgba(88,223,255,.58);
  box-shadow: 0 0 36px rgba(88,223,255,.2);
}

.core-ring.r2 {
  border-color: rgba(247,216,141,.42);
}

.core-ring.r3 {
  border-color: rgba(140,107,255,.55);
}

.physics-node {
  width: 178px;
  min-height: 88px;
  border-color: rgba(88,223,255,.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(88,223,255,.12), transparent 42%),
    rgba(2,7,16,.74);
  box-shadow: 0 24px 72px rgba(0,0,0,.55), inset 0 0 38px rgba(88,223,255,.07);
  backdrop-filter: blur(14px);
}

.physics-node::before {
  inset: -18px;
  border-color: rgba(88,223,255,.18);
}

.physics-node b {
  color: #dffaff;
}

.physics-node small {
  color: rgba(210,242,255,.7);
}

.physics-node:hover {
  border-color: rgba(128,239,255,.82);
  box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 58px rgba(88,223,255,.24);
}

/* 震撼极简首页 */
.home-body {
  overflow: hidden;
  background: #02030a;
}

.home-body::before {
  display: none;
}

.home-header {
  position: fixed;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(2,3,10,.78), rgba(2,3,10,.18));
  border-bottom-color: rgba(127, 233, 255, .14);
}

.home-main {
  min-height: 100svh;
}

.home-cinematic {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 118px clamp(18px, 5vw, 82px) 44px;
  background: #02030a;
}

.home-bg-layer {
  position: absolute;
  inset: -4%;
  z-index: -5;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.08) 42%, rgba(0,0,0,.28)),
    url("./assets/home-knowledge-hall.png") center / cover no-repeat;
  filter: saturate(1.18) contrast(1.08) brightness(.78);
  transform:
    translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0)
    scale(1.08);
}

.home-cinematic::before,
.home-cinematic::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-cinematic::before {
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 62% 45%, rgba(88,223,255,.22), transparent 26%),
    radial-gradient(circle at 72% 58%, rgba(140,107,255,.2), transparent 24%),
    radial-gradient(circle at 48% 38%, rgba(255,196,90,.16), transparent 20%),
    linear-gradient(0deg, rgba(0,0,0,.86), transparent 36%, rgba(0,0,0,.32));
  mix-blend-mode: screen;
}

.home-cinematic::after {
  inset: 0;
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(0,0,0,.75), transparent 20%, transparent 78%, rgba(0,0,0,.56)),
    linear-gradient(0deg, rgba(0,0,0,.82), transparent 30%);
}

.home-vortex {
  position: absolute;
  z-index: -1;
  right: clamp(20px, 9vw, 160px);
  top: 49%;
  width: min(46vw, 720px);
  aspect-ratio: 1;
  translate: 0 -50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.vortex-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(127,233,255,.34);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(88,223,255,.18), inset 0 0 42px rgba(88,223,255,.08);
  animation: orbitSpin 18s linear infinite;
}

.vr-1 {
  transform: rotateX(68deg) rotateZ(8deg);
}

.vr-2 {
  inset: 12%;
  border-color: rgba(247,216,141,.32);
  transform: rotateX(72deg) rotateY(36deg);
  animation-duration: 12s;
  animation-direction: reverse;
}

.vr-3 {
  inset: 25%;
  border-color: rgba(140,107,255,.42);
  transform: rotateX(62deg) rotateZ(-44deg);
  animation-duration: 8s;
}

.vortex-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, #fff, transparent 10%),
    radial-gradient(circle, rgba(255,224,148,.96), rgba(71,204,255,.72) 36%, rgba(42,45,180,.36) 58%, transparent 74%);
  box-shadow: 0 0 70px rgba(88,223,255,.55), 0 0 130px rgba(255,185,77,.24);
  animation: pulse 4s ease-in-out infinite;
}

.home-rays {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.home-rays span {
  position: absolute;
  left: 42%;
  top: 48%;
  width: 58vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127,233,255,.45), rgba(255,211,122,.32), transparent);
  box-shadow: 0 0 28px rgba(88,223,255,.28);
  transform-origin: left center;
  animation: beamSweep 7s ease-in-out infinite;
}

.home-rays span:nth-child(1) { rotate: -18deg; }
.home-rays span:nth-child(2) { rotate: 6deg; animation-delay: -2s; }
.home-rays span:nth-child(3) { rotate: 23deg; animation-delay: -4s; }

.home-title-block {
  position: absolute;
  z-index: 10;
  left: clamp(22px, 6vw, 96px);
  top: 50%;
  translate: 0 -50%;
  max-width: min(560px, 46vw);
}

.home-title-block h1 {
  margin: 0;
  color: #fff7dc;
  font-size: clamp(82px, 10vw, 170px);
  line-height: .86;
  letter-spacing: .04em;
  text-shadow:
    0 0 34px rgba(255,185,77,.28),
    0 34px 110px rgba(0,0,0,.9);
}

.home-tagline {
  margin: 28px 0 0;
  color: rgba(229, 246, 255, .78);
  font-size: clamp(17px, 1.5vw, 24px);
  letter-spacing: .24em;
  text-shadow: 0 0 18px rgba(88,223,255,.22);
}

.home-gates {
  position: absolute;
  z-index: 11;
  left: 50%;
  right: clamp(22px, 5vw, 82px);
  bottom: clamp(34px, 7vh, 76px);
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.gate-card {
  position: relative;
  min-height: 142px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(127,233,255,.28);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 30%),
    rgba(2, 8, 18, .64);
  box-shadow: 0 28px 72px rgba(0,0,0,.5), inset 0 0 40px rgba(88,223,255,.05);
  backdrop-filter: blur(16px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gate-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: conic-gradient(from 0deg, transparent, rgba(127,233,255,.24), transparent, rgba(255,211,122,.2), transparent);
  opacity: .42;
  animation: orbitSpin 8s linear infinite;
}

.gate-orbit {
  position: absolute;
  width: 72px;
  aspect-ratio: 1;
  border: 1px solid rgba(127,233,255,.32);
  border-radius: 50%;
  opacity: .55;
  animation: orbitSpin 5s linear infinite reverse;
}

.gate-card b,
.gate-card small {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
}

.gate-card b {
  color: #effcff;
  font-size: clamp(24px, 2.3vw, 38px);
  letter-spacing: .12em;
}

.gate-card small {
  margin-top: 7px;
  color: rgba(210,242,255,.68);
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: .28em;
}

.gate-card:hover {
  transform: translateY(-10px) scale(1.025);
  border-color: rgba(127,233,255,.82);
  box-shadow: 0 38px 100px rgba(0,0,0,.62), 0 0 54px rgba(88,223,255,.18);
}

.gate-math {
  border-color: rgba(180,145,255,.3);
}

.gate-ai {
  border-color: rgba(255,211,122,.28);
}

.download-gate {
  position: absolute;
  z-index: 12;
  right: clamp(22px, 5vw, 82px);
  top: 118px;
  display: grid;
  place-items: center;
  min-width: 138px;
  min-height: 58px;
  padding: 10px 18px;
  border: 1px solid rgba(255,211,122,.34);
  border-radius: 999px;
  background: rgba(2, 8, 18, .52);
  box-shadow: 0 20px 54px rgba(0,0,0,.44), inset 0 0 28px rgba(255,211,122,.06);
  backdrop-filter: blur(14px);
}

.download-gate span,
.download-gate small {
  display: block;
  text-align: center;
}

.download-gate span {
  color: #ffe6a4;
  letter-spacing: .14em;
}

.download-gate small {
  margin-top: 2px;
  color: rgba(255,230,164,.55);
  font-size: 11px;
  letter-spacing: .24em;
}

@media (max-width: 960px) {
  .home-body {
    overflow-y: auto;
  }

  .home-cinematic {
    min-height: 1000px;
  }

  .home-title-block {
    top: 26%;
    max-width: 86vw;
  }

  .home-vortex {
    right: 50%;
    top: 55%;
    width: 78vw;
    translate: 50% -50%;
  }

  .home-gates {
    left: 22px;
    right: 22px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .home-title-block h1 {
    font-size: clamp(68px, 20vw, 112px);
  }

  .home-tagline {
    letter-spacing: .12em;
  }

  .download-gate {
    top: auto;
    bottom: 24px;
    right: 22px;
  }
}

/* 物理世界星系版修正：去掉廉价大遮罩，保留星系背景本体 */
.physics-world-hero {
  min-height: calc(100svh - 92px);
  grid-template-columns: minmax(320px, .56fr) minmax(620px, 1fr);
  background:
    linear-gradient(90deg, rgba(0, 2, 8, .9), rgba(0, 4, 14, .22) 38%, rgba(0, 3, 12, .02) 72%),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
}

.physics-world-hero::before {
  background:
    radial-gradient(circle at 68% 42%, rgba(88,223,255,.12), transparent 24%),
    linear-gradient(0deg, rgba(0,0,0,.56), transparent 42%, rgba(0,0,0,.12));
}

.physics-world-hero::after {
  display: none;
}

.physics-world-copy {
  max-width: 620px;
  background: rgba(1, 7, 18, .54);
  border-color: rgba(88,223,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 0 42px rgba(88,223,255,.04);
}

.physics-world-copy h1 {
  font-size: clamp(58px, 7vw, 120px);
  line-height: .95;
}

.physics-world-copy .lead {
  max-width: 540px;
  color: rgba(222, 235, 238, .72);
}

.physics-world-actions {
  gap: 10px;
}

.physics-world-actions .primary-btn,
.physics-world-actions .ghost-btn {
  min-height: 42px;
  padding: 10px 17px;
  font-size: 14px;
}

.physics-orbit-space {
  min-height: clamp(560px, 50vw, 760px);
}

.space-window {
  display: none;
}

.spacetime-grid {
  left: 8%;
  right: 4%;
  bottom: 4%;
  height: 28%;
  opacity: .38;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(88,223,255,.18) 43px 44px),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(88,223,255,.08) 43px 44px);
  filter: drop-shadow(0 0 18px rgba(88,223,255,.14));
}

.physics-core {
  left: 56%;
  top: 44%;
  width: min(24vw, 310px);
  opacity: .88;
  pointer-events: none;
}

.physics-core strong {
  width: 34%;
  color: transparent;
  font-size: 0;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), transparent 12%),
    radial-gradient(circle, rgba(106,236,255,.85), rgba(45,114,255,.36) 45%, transparent 72%);
  box-shadow: 0 0 44px rgba(88,223,255,.42), 0 0 90px rgba(140,107,255,.18);
}

.core-ring {
  opacity: .5;
}

.physics-node {
  width: auto;
  min-width: 142px;
  min-height: 58px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(1, 8, 18, .52);
  border-color: rgba(120,235,255,.26);
  box-shadow: 0 16px 46px rgba(0,0,0,.38), inset 0 0 24px rgba(88,223,255,.035);
}

.physics-node::before {
  inset: -10px;
  opacity: .28;
}

.physics-node b {
  font-size: 20px;
  color: #effcff;
}

.physics-node small {
  font-size: 11px;
}

.node-mechanics { left: 18%; top: 17%; }
.node-em { right: 9%; top: 18%; }
.node-thermal { left: 9%; top: 58%; }
.node-relativity { right: 4%; top: 56%; }
.node-quantum { left: 34%; bottom: 8%; }
.node-cosmos { right: 25%; bottom: 7%; }

@media (max-width: 1050px) {
  .physics-world-hero {
    grid-template-columns: 1fr;
  }

  .physics-orbit-space {
    min-height: 560px;
  }
}

@media (max-width: 680px) {
  .physics-world-hero {
    background-position: 58% center;
  }

  .physics-node {
    min-width: 126px;
    padding: 9px 12px;
  }

  .node-mechanics { left: 4%; top: 13%; }
  .node-em { right: 4%; top: 14%; }
  .node-thermal { left: 2%; top: 50%; }
  .node-relativity { right: 2%; top: 50%; }
  .node-quantum { left: 8%; bottom: 8%; }
  .node-cosmos { right: 8%; bottom: 8%; }
}

/* 首页增强版：更接近下载页的炫酷入口感 */
.hero-shell {
  grid-template-areas:
    "copy visual"
    "portals portals";
}

.hero-energy {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-energy::before,
.hero-energy::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.hero-energy::before {
  left: 48%;
  top: 30%;
  width: min(44vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(247, 216, 141, .22);
  background:
    radial-gradient(circle, rgba(255, 207, 109, .2), transparent 24%),
    conic-gradient(from 120deg, transparent, rgba(88, 223, 255, .24), transparent, rgba(255, 185, 77, .22), transparent);
  filter: drop-shadow(0 0 42px rgba(88, 223, 255, .16));
  transform: translate(-50%, -50%) rotateX(66deg);
  animation: orbitSpin 18s linear infinite;
}

.hero-energy::after {
  right: -8%;
  top: 14%;
  width: min(38vw, 540px);
  aspect-ratio: 1;
  border: 1px solid rgba(88, 223, 255, .26);
  background: radial-gradient(circle, rgba(88, 223, 255, .16), transparent 62%);
  animation: pulse 5.8s ease-in-out infinite;
}

.beam {
  position: absolute;
  height: 1px;
  width: 62vw;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 146, .54), rgba(88, 223, 255, .38), transparent);
  box-shadow: 0 0 24px rgba(88, 223, 255, .24);
  opacity: .72;
  animation: beamSweep 6.8s ease-in-out infinite;
}

.beam-one {
  left: 34%;
  top: 43%;
  rotate: -14deg;
}

.beam-two {
  left: 16%;
  top: 64%;
  rotate: 9deg;
  animation-delay: -2.6s;
}

.energy-dot {
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe8ae;
  box-shadow: 0 0 18px #ffcf6d, 0 0 46px rgba(88, 223, 255, .28);
  animation: floatDot 5.5s ease-in-out infinite;
}

.dot-one { left: 55%; top: 24%; }
.dot-two { left: 76%; top: 47%; animation-delay: -1.8s; background: #74e8ff; }
.dot-three { left: 40%; top: 68%; animation-delay: -3.2s; }

.hero-copy {
  grid-area: copy;
}

.hero-visual {
  grid-area: visual;
}

.hero-portals {
  grid-area: portals;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(18px, 3vw, 38px);
  margin-top: -34px;
  padding-inline: clamp(0px, 4vw, 72px);
}

.home-portal {
  position: relative;
  min-height: 168px;
  display: grid;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(247, 216, 141, .35);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(255, 185, 77, .2), transparent 35%),
    rgba(9, 5, 3, .72);
  box-shadow:
    0 34px 80px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 60px rgba(255, 185, 77, .06);
  backdrop-filter: blur(16px);
  transform:
    translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0)
    rotateX(calc(var(--my) * -2deg));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-portal::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: conic-gradient(from 0deg, transparent, rgba(247, 216, 141, .24), transparent, rgba(88, 223, 255, .18), transparent);
  opacity: .38;
  animation: orbitSpin 9s linear infinite;
}

.home-portal::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 216, 141, .7), transparent);
  box-shadow: 0 0 20px rgba(255, 185, 77, .3);
}

.ai-portal {
  border-color: rgba(88, 223, 255, .34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(88, 223, 255, .16), transparent 35%),
    rgba(6, 8, 15, .72);
}

.math-portal {
  border-color: rgba(140, 107, 255, .38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(140, 107, 255, .18), transparent 35%),
    rgba(13, 7, 18, .72);
}

.portal-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(42%, 180px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(247, 216, 141, .32);
  border-radius: 50%;
  opacity: .55;
  box-shadow: 0 0 28px rgba(255, 185, 77, .12);
  animation: orbitSpin 7s linear infinite;
}

.ai-portal .portal-orbit {
  border-color: rgba(88, 223, 255, .34);
  box-shadow: 0 0 28px rgba(88, 223, 255, .14);
  animation-direction: reverse;
}

.math-portal .portal-orbit {
  border-color: rgba(140, 107, 255, .36);
  box-shadow: 0 0 28px rgba(140, 107, 255, .14);
}

.home-portal strong,
.home-portal small {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
}

.home-portal strong {
  color: #ffe8ae;
  font-size: clamp(28px, 3vw, 46px);
  letter-spacing: .12em;
  text-shadow: 0 0 22px rgba(255, 185, 77, .3);
}

.home-portal small {
  margin-top: 10px;
  color: rgba(255, 235, 195, .72);
  font-size: 14px;
  letter-spacing: .08em;
}

.home-portal:hover {
  transform: translateY(-8px) scale(1.018);
  border-color: rgba(255, 232, 174, .72);
  box-shadow:
    0 42px 110px rgba(0,0,0,.58),
    0 0 50px rgba(255, 185, 77, .16),
    inset 0 0 70px rgba(255, 185, 77, .08);
}

.ai-portal:hover {
  border-color: rgba(88, 223, 255, .72);
  box-shadow:
    0 42px 110px rgba(0,0,0,.58),
    0 0 50px rgba(88, 223, 255, .15),
    inset 0 0 70px rgba(88, 223, 255, .08);
}

.math-portal:hover {
  border-color: rgba(180, 145, 255, .76);
  box-shadow:
    0 42px 110px rgba(0,0,0,.58),
    0 0 50px rgba(140, 107, 255, .18),
    inset 0 0 70px rgba(140, 107, 255, .08);
}

@keyframes beamSweep {
  0%, 100% { transform: translateX(-4%) scaleX(.72); opacity: .24; }
  50% { transform: translateX(4%) scaleX(1.08); opacity: .86; }
}

@keyframes floatDot {
  50% { transform: translateY(-18px) scale(1.3); opacity: .58; }
}

@media (max-width: 960px) {
  .hero-shell {
    grid-template-areas:
      "copy"
      "visual"
      "portals";
  }

  .hero-portals {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-inline: 0;
  }
}

@media (max-width: 680px) {
  .home-portal {
    min-height: 138px;
    border-radius: 24px;
  }

  .hero-energy::before {
    width: 92vw;
    left: 58%;
    top: 48%;
  }
}

/* 首页炫酷动效增强 */
.home-body {
  --space-cyan: #68eaff;
  --space-gold: #ffd275;
  --space-violet: #9b72ff;
  cursor: default;
}

.home-header {
  z-index: 50;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .32);
}

.home-bg-layer {
  animation: homeBgDrift 24s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.home-nebula {
  position: absolute;
  inset: -16%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 66% 38%, rgba(104, 234, 255, .38), transparent 18%),
    radial-gradient(circle at 77% 56%, rgba(155, 114, 255, .28), transparent 20%),
    radial-gradient(circle at 52% 62%, rgba(255, 210, 117, .22), transparent 16%),
    conic-gradient(from 240deg at 67% 50%, transparent, rgba(104, 234, 255, .14), transparent 24%, rgba(255, 210, 117, .16), transparent 52%, rgba(155, 114, 255, .16), transparent);
  filter: blur(18px) saturate(1.35);
  mix-blend-mode: screen;
  transform:
    translate3d(calc(var(--mx) * -26px), calc(var(--my) * -18px), 0)
    rotate(calc(var(--mx) * 4deg))
    scale(1.05);
  animation: nebulaBreath 10s ease-in-out infinite;
}

.home-star-streams {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.home-star-streams span {
  position: absolute;
  left: 56%;
  top: 50%;
  width: min(50vw, 760px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), rgba(104, 234, 255, .65), transparent);
  box-shadow: 0 0 24px rgba(104, 234, 255, .7);
  transform-origin: left center;
  opacity: 0;
  animation: starWarp 3.6s cubic-bezier(.2,.72,.18,1) infinite;
}

.home-star-streams span:nth-child(1) { top: 32%; rotate: -22deg; animation-delay: -.2s; }
.home-star-streams span:nth-child(2) { top: 42%; rotate: -8deg; animation-delay: -.9s; width: min(42vw, 620px); }
.home-star-streams span:nth-child(3) { top: 55%; rotate: 6deg; animation-delay: -1.6s; }
.home-star-streams span:nth-child(4) { top: 66%; rotate: 20deg; animation-delay: -2.4s; width: min(46vw, 680px); }
.home-star-streams span:nth-child(5) { top: 75%; rotate: 34deg; animation-delay: -3.1s; width: min(36vw, 540px); }

.home-grid-floor {
  position: absolute;
  left: 34%;
  right: -8%;
  bottom: -9%;
  height: 34%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(104,234,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,234,255,.2) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(104,234,255,.22), transparent 58%);
  background-size: 100% 34px, 58px 100%, 100% 100%;
  transform: perspective(560px) rotateX(68deg) translate3d(calc(var(--mx) * 16px), calc(var(--my) * -10px), 0);
  transform-origin: top center;
  filter: drop-shadow(0 0 22px rgba(104,234,255,.18));
  opacity: .5;
  animation: gridFlow 2.2s linear infinite;
}

.home-vortex {
  filter: drop-shadow(0 0 42px rgba(104,234,255,.24));
  transform:
    translate3d(calc(var(--mx) * 20px), calc(var(--my) * 14px), 0)
    rotateY(calc(var(--mx) * -8deg))
    rotateX(calc(var(--my) * 5deg));
}

.home-vortex::before,
.home-vortex::after {
  content: "";
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.home-vortex::before {
  background:
    conic-gradient(from 0deg, transparent, rgba(104,234,255,.24), transparent 20%, rgba(255,210,117,.2), transparent 38%, rgba(155,114,255,.2), transparent 58%),
    radial-gradient(circle, transparent 42%, rgba(104,234,255,.14), transparent 68%);
  animation: orbitSpin 9s linear infinite;
}

.home-vortex::after {
  inset: 17%;
  border: 1px solid rgba(255, 210, 117, .32);
  box-shadow:
    0 0 58px rgba(255,210,117,.22),
    inset 0 0 58px rgba(104,234,255,.14);
  animation: shockPulse 3.4s ease-out infinite;
}

.vortex-ring {
  border-width: 1.5px;
  box-shadow:
    0 0 44px rgba(104,234,255,.22),
    inset 0 0 58px rgba(104,234,255,.1);
}

.vr-1 { animation-duration: 13s; }
.vr-2 { animation-duration: 8.5s; }
.vr-3 { animation-duration: 5.8s; }

.vr-4 {
  inset: 37%;
  border-color: rgba(255, 210, 117, .55);
  transform: rotateX(78deg) rotateY(-50deg) rotateZ(18deg);
  animation-duration: 3.8s;
  box-shadow: 0 0 36px rgba(255,210,117,.28);
}

.vortex-core {
  width: 27%;
  background:
    radial-gradient(circle at 32% 22%, #fff 0 5%, transparent 12%),
    radial-gradient(circle at 50% 50%, #fff6cf 0 9%, #76efff 24%, #255dff 43%, rgba(155,114,255,.52) 57%, transparent 74%);
  box-shadow:
    0 0 44px rgba(255,255,255,.42),
    0 0 92px rgba(104,234,255,.78),
    0 0 180px rgba(155,114,255,.34),
    0 0 240px rgba(255,210,117,.2);
  animation: coreSurge 2.8s ease-in-out infinite;
}

.home-rays span {
  height: 2px;
  animation-duration: 4.8s;
}

.home-title-block {
  transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -8px), 0);
}

.home-title-block h1 {
  background: linear-gradient(180deg, #ffffff 0%, #fff1bd 44%, #79edff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 210, 117, .18));
  animation: titleGlow 4.5s ease-in-out infinite;
}

.home-gates {
  perspective: 1000px;
}

.gate-card {
  isolation: isolate;
  transform:
    translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0)
    rotateX(calc(var(--my) * -4deg))
    rotateY(calc(var(--mx) * 5deg));
  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    0 0 38px rgba(104,234,255,.08),
    inset 0 0 54px rgba(104,234,255,.07);
}

.gate-card::before {
  opacity: .62;
  animation-duration: 4.6s;
}

.gate-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.22) 48%, transparent 58%),
    radial-gradient(circle at 50% 0%, rgba(104,234,255,.16), transparent 40%);
  translate: -120% 0;
  opacity: .72;
  animation: cardScan 4.2s ease-in-out infinite;
}

.gate-card:nth-child(2)::after { animation-delay: -1.4s; }
.gate-card:nth-child(3)::after { animation-delay: -2.8s; }

.gate-card:hover {
  transform: translateY(-16px) scale(1.045) rotateX(0deg) rotateY(0deg);
  box-shadow:
    0 48px 120px rgba(0,0,0,.72),
    0 0 80px rgba(104,234,255,.28),
    inset 0 0 82px rgba(104,234,255,.12);
}

.gate-orbit {
  width: 92px;
  border-color: rgba(255, 210, 117, .34);
  box-shadow: 0 0 34px rgba(104,234,255,.18);
}

.download-gate {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.download-gate:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 210, 117, .74);
  box-shadow:
    0 26px 70px rgba(0,0,0,.56),
    0 0 42px rgba(255,210,117,.18),
    inset 0 0 36px rgba(255,210,117,.1);
}

@keyframes homeBgDrift {
  from { filter: saturate(1.18) contrast(1.08) brightness(.74); }
  to { filter: saturate(1.4) contrast(1.16) brightness(.88); }
}

@keyframes nebulaBreath {
  0%, 100% { opacity: .7; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes starWarp {
  0% {
    opacity: 0;
    transform: translateX(-18%) scaleX(.04);
  }
  22% { opacity: .95; }
  100% {
    opacity: 0;
    transform: translateX(34%) scaleX(1.32);
  }
}

@keyframes gridFlow {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 34px, 58px 0, 0 0; }
}

@keyframes shockPulse {
  0% {
    opacity: .82;
    transform: scale(.72);
  }
  78%, 100% {
    opacity: 0;
    transform: scale(1.42);
  }
}

@keyframes coreSurge {
  0%, 100% {
    transform: scale(.96);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: hue-rotate(-10deg) brightness(1.28);
  }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 34px rgba(255,185,77,.24),
      0 34px 110px rgba(0,0,0,.9);
  }
  50% {
    text-shadow:
      0 0 48px rgba(104,234,255,.32),
      0 0 82px rgba(255,210,117,.22),
      0 34px 110px rgba(0,0,0,.9);
  }
}

@keyframes cardScan {
  0%, 42% { translate: -135% 0; }
  66%, 100% { translate: 135% 0; }
}

@media (max-width: 960px) {
  .home-grid-floor {
    left: -16%;
    right: -16%;
    bottom: 10%;
    opacity: .36;
  }

  .home-star-streams span {
    left: 24%;
    width: 76vw;
  }
}

@media (max-width: 680px) {
  .home-nebula {
    inset: -10%;
  }

  .home-grid-floor {
    display: none;
  }

  .gate-card {
    min-height: 118px;
  }
}

/* 首页高级透亮版 */
.home-body {
  background:
    radial-gradient(circle at 70% 42%, rgba(116, 238, 255, .2), transparent 30%),
    radial-gradient(circle at 24% 24%, rgba(255, 231, 174, .1), transparent 28%),
    #020712;
}

.home-header {
  background: linear-gradient(180deg, rgba(5, 12, 24, .46), rgba(5, 12, 24, .08));
  border-bottom-color: rgba(210, 245, 255, .18);
}

.home-header .brand,
.home-header .site-nav a {
  color: rgba(244, 252, 255, .86);
}

.home-bg-layer {
  filter: saturate(1.08) contrast(1.02) brightness(1.02);
  opacity: .82;
}

.home-cinematic {
  background:
    radial-gradient(circle at 68% 48%, rgba(146, 242, 255, .18), transparent 28%),
    linear-gradient(90deg, rgba(1, 5, 13, .72), rgba(3, 11, 24, .18) 48%, rgba(1, 5, 13, .42)),
    #020712;
}

.home-cinematic::before {
  background:
    radial-gradient(circle at 65% 47%, rgba(203, 250, 255, .24), transparent 18%),
    radial-gradient(circle at 75% 59%, rgba(151, 195, 255, .16), transparent 24%),
    radial-gradient(circle at 50% 35%, rgba(255, 235, 182, .12), transparent 20%),
    linear-gradient(0deg, rgba(255,255,255,.02), transparent 44%, rgba(255,255,255,.04));
}

.home-cinematic::after {
  background:
    linear-gradient(90deg, rgba(1, 5, 13, .62), transparent 24%, transparent 78%, rgba(1, 5, 13, .34)),
    linear-gradient(0deg, rgba(1, 5, 13, .58), transparent 34%);
}

.home-nebula {
  opacity: .72;
  filter: blur(28px) saturate(1.12) brightness(1.18);
  background:
    radial-gradient(circle at 67% 43%, rgba(192, 250, 255, .38), transparent 18%),
    radial-gradient(circle at 80% 56%, rgba(124, 164, 255, .22), transparent 20%),
    radial-gradient(circle at 48% 60%, rgba(255, 229, 163, .15), transparent 16%),
    conic-gradient(from 230deg at 66% 50%, transparent, rgba(196, 250, 255, .18), transparent 28%, rgba(255, 230, 174, .1), transparent 56%, rgba(154, 178, 255, .14), transparent);
}

.home-grid-floor {
  opacity: .28;
  background:
    linear-gradient(rgba(198,248,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,248,255,.16) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(198,248,255,.18), transparent 58%);
  filter: drop-shadow(0 0 26px rgba(198,248,255,.18));
}

.home-star-streams span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), rgba(190, 249, 255, .78), transparent);
  box-shadow: 0 0 18px rgba(198,248,255,.58);
}

.home-vortex {
  filter:
    drop-shadow(0 0 34px rgba(198,248,255,.28))
    drop-shadow(0 0 80px rgba(109,174,255,.12));
}

.home-vortex::before {
  opacity: .7;
  background:
    conic-gradient(from 0deg, transparent, rgba(207,250,255,.32), transparent 22%, rgba(255,234,178,.16), transparent 42%, rgba(148,172,255,.18), transparent 62%),
    radial-gradient(circle, transparent 44%, rgba(210,250,255,.12), transparent 68%);
}

.home-vortex::after {
  border-color: rgba(224, 251, 255, .32);
  box-shadow:
    0 0 64px rgba(206,248,255,.22),
    inset 0 0 64px rgba(206,248,255,.1);
}

.vortex-ring {
  border-color: rgba(215, 250, 255, .4);
  box-shadow:
    0 0 28px rgba(206,248,255,.24),
    inset 0 0 42px rgba(206,248,255,.1);
}

.vr-2 {
  border-color: rgba(255, 235, 178, .34);
}

.vr-3 {
  border-color: rgba(159, 185, 255, .38);
}

.vr-4 {
  border-color: rgba(255, 245, 209, .46);
  box-shadow: 0 0 28px rgba(255,245,209,.2);
}

.vortex-core {
  background:
    radial-gradient(circle at 31% 22%, #fff 0 6%, transparent 13%),
    radial-gradient(circle at 50% 50%, #ffffff 0 8%, #dffcff 18%, #7defff 36%, rgba(106,154,255,.46) 55%, transparent 74%);
  box-shadow:
    0 0 34px rgba(255,255,255,.6),
    0 0 86px rgba(198,248,255,.68),
    0 0 160px rgba(113,170,255,.28);
}

.home-title-block h1 {
  background: linear-gradient(180deg, #ffffff 0%, #f6fdff 35%, #d8faff 62%, #ffe9ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(211, 250, 255, .2));
}

.home-tagline {
  color: rgba(235, 252, 255, .72);
  text-shadow: 0 0 20px rgba(198,248,255,.18);
}

.gate-card {
  border-color: rgba(221, 250, 255, .34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 36%, rgba(255,255,255,.09)),
    radial-gradient(circle at 50% 0%, rgba(219,250,255,.18), transparent 46%),
    rgba(9, 18, 34, .34);
  box-shadow:
    0 30px 95px rgba(0,0,0,.42),
    0 0 42px rgba(198,248,255,.1),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -24px 50px rgba(198,248,255,.04);
  backdrop-filter: blur(24px) saturate(1.25);
}

.gate-card::before {
  opacity: .42;
  background: conic-gradient(from 0deg, transparent, rgba(220,250,255,.32), transparent, rgba(255,235,178,.18), transparent);
}

.gate-card::after {
  background:
    linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.3) 48%, transparent 58%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 42%);
  opacity: .58;
}

.gate-card b {
  color: rgba(250, 254, 255, .95);
  text-shadow: 0 0 20px rgba(215,250,255,.22);
}

.gate-card small {
  color: rgba(226, 250, 255, .58);
}

.gate-card:hover {
  border-color: rgba(236, 253, 255, .78);
  box-shadow:
    0 46px 125px rgba(0,0,0,.48),
    0 0 76px rgba(198,248,255,.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -26px 70px rgba(198,248,255,.08);
}

.gate-orbit {
  border-color: rgba(235, 253, 255, .32);
  box-shadow: 0 0 28px rgba(198,248,255,.16);
}

.download-gate {
  border-color: rgba(255, 240, 196, .38);
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    rgba(9, 18, 34, .3);
  box-shadow:
    0 22px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(22px) saturate(1.18);
}

.download-gate span {
  color: rgba(255, 238, 190, .92);
}

@keyframes homeBgDrift {
  from { filter: saturate(1.02) contrast(1.02) brightness(.98); }
  to { filter: saturate(1.18) contrast(1.06) brightness(1.12); }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 28px rgba(210,250,255,.22),
      0 28px 90px rgba(0,0,0,.72);
  }
  50% {
    text-shadow:
      0 0 44px rgba(220,252,255,.38),
      0 0 72px rgba(255,232,174,.16),
      0 28px 90px rgba(0,0,0,.72);
  }
}

/* 首页去廉价化：真实质感背景 + 克制玻璃界面 */
.home-body {
  background: #050b14;
}

.home-body #ambientCanvas {
  opacity: .28;
  mix-blend-mode: screen;
}

.home-bg-layer {
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .64) 0%, rgba(2, 8, 18, .2) 36%, rgba(2, 8, 18, .1) 62%, rgba(2, 8, 18, .3) 100%),
    linear-gradient(0deg, rgba(2, 8, 18, .56) 0%, transparent 36%, rgba(2, 8, 18, .18) 100%),
    url("./assets/home-premium-crystal-portal.png") center / cover no-repeat;
  filter: none;
  transform:
    translate3d(calc(var(--mx) * -8px), calc(var(--my) * -5px), 0)
    scale(1.025);
  animation: premiumBackgroundFloat 28s ease-in-out infinite alternate;
}

.home-cinematic {
  background: #050b14;
}

.home-cinematic::before {
  z-index: -3;
  background:
    radial-gradient(circle at 73% 40%, rgba(226, 249, 255, .14), transparent 24%),
    radial-gradient(circle at 20% 42%, rgba(255, 235, 190, .08), transparent 22%);
  mix-blend-mode: screen;
}

.home-cinematic::after {
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .52), rgba(2, 8, 18, .08) 38%, rgba(2, 8, 18, .08) 74%, rgba(2, 8, 18, .24)),
    linear-gradient(0deg, rgba(2, 8, 18, .58), transparent 38%);
}

.home-nebula,
.home-vortex,
.home-rays,
.home-grid-floor {
  display: none;
}

.home-star-streams {
  opacity: .22;
}

.home-star-streams span {
  height: 1px;
  width: min(34vw, 520px);
  background: linear-gradient(90deg, transparent, rgba(240, 252, 255, .46), transparent);
  box-shadow: none;
  animation-duration: 7s;
}

.home-title-block {
  top: 48%;
  max-width: min(500px, 42vw);
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0);
}

.home-title-block .eyebrow {
  color: rgba(230, 246, 255, .64);
  letter-spacing: .42em;
  font-size: 12px;
}

.home-title-block h1 {
  font-size: clamp(76px, 8vw, 132px);
  line-height: .92;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #ffffff 0%, #eefbff 50%, #dac38b 110%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
  animation: none;
  text-shadow:
    0 1px 0 rgba(255,255,255,.2),
    0 24px 80px rgba(0,0,0,.58);
}

.home-tagline {
  margin-top: 24px;
  color: rgba(231, 245, 250, .62);
  font-size: clamp(15px, 1.1vw, 18px);
  letter-spacing: .22em;
  text-shadow: none;
}

.home-header {
  background: linear-gradient(180deg, rgba(4, 10, 20, .48), rgba(4, 10, 20, .04));
  border-bottom: 1px solid rgba(235, 249, 255, .1);
  box-shadow: none;
}

.home-header .brand {
  color: rgba(247, 252, 255, .86);
}

.home-header .brand-mark {
  color: rgba(255, 226, 162, .9);
  filter: drop-shadow(0 0 14px rgba(255, 226, 162, .18));
}

.home-header .site-nav a {
  color: rgba(236, 247, 250, .62);
}

.home-header .site-nav a.active,
.home-header .site-nav a:hover {
  color: rgba(255, 255, 255, .94);
  background: rgba(255,255,255,.06);
}

.home-gates {
  left: auto;
  right: clamp(30px, 5vw, 86px);
  bottom: clamp(42px, 7vh, 82px);
  width: min(650px, 46vw);
  gap: 14px;
}

.gate-card {
  min-height: 112px;
  border-radius: 24px;
  border: 1px solid rgba(230, 247, 255, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.045) 46%, rgba(255,255,255,.08)),
    rgba(8, 16, 30, .22);
  box-shadow:
    0 22px 72px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(26px) saturate(1.12);
  transform:
    translate3d(calc(var(--mx) * 4px), calc(var(--my) * 3px), 0);
}

.gate-card::before,
.gate-card::after,
.gate-orbit {
  display: none;
}

.gate-card b {
  color: rgba(252, 254, 255, .93);
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 600;
  letter-spacing: .16em;
  text-shadow: 0 14px 34px rgba(0,0,0,.32);
}

.gate-card small {
  color: rgba(222, 242, 248, .45);
  font-size: 11px;
  letter-spacing: .32em;
}

.gate-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 253, 255, .36);
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 48%, rgba(255,255,255,.1)),
    rgba(10, 20, 36, .26);
  box-shadow:
    0 28px 88px rgba(0,0,0,.42),
    0 0 34px rgba(214, 248, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.download-gate {
  top: 116px;
  right: clamp(30px, 5vw, 86px);
  min-width: 124px;
  min-height: 50px;
  border-color: rgba(255, 236, 190, .22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(8, 16, 30, .2);
  box-shadow:
    0 18px 54px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.download-gate span {
  color: rgba(255, 238, 196, .86);
  font-size: 14px;
}

.download-gate small {
  color: rgba(255, 238, 196, .42);
}

.download-gate:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 239, 198, .4);
  box-shadow:
    0 24px 66px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.2);
}

@keyframes premiumBackgroundFloat {
  from {
    transform:
      translate3d(calc(var(--mx) * -8px), calc(var(--my) * -5px), 0)
      scale(1.025);
  }
  to {
    transform:
      translate3d(calc(var(--mx) * -8px + 10px), calc(var(--my) * -5px - 6px), 0)
      scale(1.04);
  }
}

@media (max-width: 960px) {
  .home-bg-layer {
    background:
      linear-gradient(0deg, rgba(2, 8, 18, .7), rgba(2, 8, 18, .12) 52%, rgba(2, 8, 18, .28)),
      url("./assets/home-premium-crystal-portal.png") 62% center / cover no-repeat;
  }

  .home-title-block {
    top: 27%;
    max-width: 86vw;
  }

  .home-gates {
    left: 22px;
    right: 22px;
    bottom: 74px;
    width: auto;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .home-cinematic {
    min-height: 100svh;
    padding-top: 106px;
  }

  .home-title-block h1 {
    font-size: clamp(58px, 17vw, 92px);
  }

  .home-tagline {
    max-width: 300px;
    line-height: 1.8;
  }

  .download-gate {
    bottom: 18px;
    right: 18px;
  }
}

/* 首页清澈动态修正：去灰、增加高级慢动感 */
.home-body #ambientCanvas {
  opacity: .42;
}

.home-bg-layer {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .38) 0%, rgba(2, 8, 18, .04) 34%, rgba(2, 8, 18, .02) 68%, rgba(2, 8, 18, .18) 100%),
    linear-gradient(0deg, rgba(2, 8, 18, .34) 0%, transparent 42%, rgba(2, 8, 18, .08) 100%),
    url("./assets/home-premium-crystal-portal.png") center / cover no-repeat;
  filter: saturate(1.18) contrast(1.08) brightness(1.12);
  animation: premiumBackgroundFloat 18s ease-in-out infinite alternate;
}

.home-bg-layer::before,
.home-bg-layer::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.home-bg-layer::before {
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.18) 45%, rgba(186,241,255,.14) 50%, transparent 60%),
    radial-gradient(circle at 74% 42%, rgba(215, 250, 255, .22), transparent 22%);
  transform: translateX(-34%) rotate(-3deg);
  animation: crystalSheen 8.5s ease-in-out infinite;
}

.home-bg-layer::after {
  background:
    radial-gradient(circle at 72% 42%, rgba(235, 253, 255, .18), transparent 16%),
    radial-gradient(circle at 56% 58%, rgba(255, 228, 168, .08), transparent 18%);
  opacity: .82;
  animation: glassBreath 5.6s ease-in-out infinite;
}

.home-cinematic::before {
  opacity: .58;
  background:
    radial-gradient(circle at 72% 42%, rgba(232, 253, 255, .14), transparent 20%),
    radial-gradient(circle at 18% 38%, rgba(255, 234, 190, .07), transparent 20%);
  animation: atmosphereDrift 9s ease-in-out infinite alternate;
}

.home-cinematic::after {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .38), rgba(2, 8, 18, .02) 36%, rgba(2, 8, 18, .02) 76%, rgba(2, 8, 18, .14)),
    linear-gradient(0deg, rgba(2, 8, 18, .36), transparent 44%);
}

.home-star-streams {
  opacity: .46;
}

.home-star-streams span {
  width: min(28vw, 420px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), rgba(202,248,255,.46), transparent);
  animation-duration: 5.8s;
}

.home-title-block {
  animation: titleFloat 7s ease-in-out infinite;
}

.gate-card {
  animation: glassPanelFloat 6.4s ease-in-out infinite;
}

.gate-card:nth-child(2) {
  animation-delay: -1.6s;
}

.gate-card:nth-child(3) {
  animation-delay: -3.2s;
}

.gate-card:hover {
  animation-play-state: paused;
}

.download-gate {
  animation: glassPanelFloat 7.2s ease-in-out infinite -2.4s;
}

@keyframes crystalSheen {
  0%, 18% {
    opacity: 0;
    transform: translateX(-38%) rotate(-3deg);
  }
  45% {
    opacity: .72;
  }
  78%, 100% {
    opacity: 0;
    transform: translateX(34%) rotate(-3deg);
  }
}

@keyframes glassBreath {
  0%, 100% {
    opacity: .58;
    transform: scale(1);
  }
  50% {
    opacity: .92;
    transform: scale(1.035);
  }
}

@keyframes atmosphereDrift {
  from {
    transform: translate3d(-1.2%, 0, 0);
  }
  to {
    transform: translate3d(1.2%, -1%, 0);
  }
}

@keyframes titleFloat {
  0%, 100% {
    translate: 0 -50%;
  }
  50% {
    translate: 0 calc(-50% - 8px);
  }
}

@keyframes glassPanelFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}

@media (max-width: 960px) {
  .home-bg-layer {
    background:
      linear-gradient(0deg, rgba(2, 8, 18, .42), rgba(2, 8, 18, .02) 52%, rgba(2, 8, 18, .12)),
      url("./assets/home-premium-crystal-portal.png") 62% center / cover no-repeat;
  }
}

/* 首页可见高级动态层 */
.home-lux-motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.lux-ribbon {
  position: absolute;
  width: min(56vw, 880px);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.56), rgba(188,244,255,.36), rgba(255,230,176,.22), transparent);
  box-shadow:
    0 0 18px rgba(213, 250, 255, .26),
    0 0 48px rgba(213, 250, 255, .12);
  opacity: .46;
  transform-origin: center;
  filter: blur(.15px);
}

.ribbon-one {
  left: 42%;
  top: 34%;
  rotate: -18deg;
  animation: ribbonOrbitOne 9s ease-in-out infinite;
}

.ribbon-two {
  left: 48%;
  top: 50%;
  width: min(44vw, 700px);
  rotate: 9deg;
  opacity: .38;
  animation: ribbonOrbitTwo 11s ease-in-out infinite -3s;
}

.ribbon-three {
  left: 36%;
  top: 66%;
  width: min(50vw, 780px);
  rotate: 21deg;
  opacity: .3;
  animation: ribbonOrbitThree 13s ease-in-out infinite -6s;
}

.lux-crystal {
  position: absolute;
  width: 9px;
  height: 44px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.72), rgba(186,244,255,.36), transparent);
  box-shadow:
    0 0 22px rgba(220,250,255,.26),
    inset 0 0 8px rgba(255,255,255,.36);
  opacity: .42;
  transform: rotate(12deg);
}

.crystal-one {
  left: 57%;
  top: 24%;
  animation: crystalFloat 7.5s ease-in-out infinite;
}

.crystal-two {
  left: 76%;
  top: 31%;
  height: 58px;
  opacity: .34;
  animation: crystalFloat 9s ease-in-out infinite -2.5s;
}

.crystal-three {
  left: 66%;
  top: 72%;
  height: 34px;
  opacity: .3;
  animation: crystalFloat 8.2s ease-in-out infinite -5s;
}

.home-gates {
  animation: gateClusterDrift 8s ease-in-out infinite;
}

.home-header {
  animation: headerGlassShift 10s ease-in-out infinite;
}

@keyframes ribbonOrbitOne {
  0%, 100% {
    opacity: .18;
    transform: translate3d(-4%, 8px, 0) scaleX(.78);
  }
  38% {
    opacity: .58;
    transform: translate3d(4%, -10px, 0) scaleX(1.08);
  }
  70% {
    opacity: .32;
    transform: translate3d(10%, 4px, 0) scaleX(.9);
  }
}

@keyframes ribbonOrbitTwo {
  0%, 100% {
    opacity: .14;
    transform: translate3d(8%, -6px, 0) scaleX(.74);
  }
  46% {
    opacity: .48;
    transform: translate3d(-5%, 9px, 0) scaleX(1.14);
  }
}

@keyframes ribbonOrbitThree {
  0%, 100% {
    opacity: .1;
    transform: translate3d(-8%, -4px, 0) scaleX(.68);
  }
  50% {
    opacity: .38;
    transform: translate3d(7%, 8px, 0) scaleX(1.06);
  }
}

@keyframes crystalFloat {
  0%, 100% {
    opacity: .22;
    transform: translate3d(0, 10px, 0) rotate(12deg) scale(.92);
  }
  50% {
    opacity: .58;
    transform: translate3d(12px, -18px, 0) rotate(18deg) scale(1.08);
  }
}

@keyframes gateClusterDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes headerGlassShift {
  0%, 100% {
    background: linear-gradient(180deg, rgba(4, 10, 20, .44), rgba(4, 10, 20, .04));
  }
  50% {
    background: linear-gradient(180deg, rgba(8, 18, 32, .58), rgba(8, 18, 32, .08));
  }
}

@media (max-width: 960px) {
  .lux-ribbon {
    left: 12%;
    width: 86vw;
  }

  .crystal-one,
  .crystal-two,
  .crystal-three {
    display: none;
  }
}

@media (max-width: 680px) {
  .home-lux-motion {
    opacity: .7;
  }

  .ribbon-three {
    display: none;
  }
}

/* 首页星门圆圈光斑闪烁 */
.home-portal-flares {
  position: absolute;
  left: 63.5%;
  top: 42%;
  width: min(34vw, 560px);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--mx) * 7px), calc(var(--my) * 5px), 0);
  mix-blend-mode: screen;
  opacity: 1;
}

.home-portal-flares span {
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 18%, #e8fbff 24%, rgba(143,230,255,.72) 42%, transparent 72%);
  opacity: .18;
  filter: blur(.05px);
  box-shadow:
    0 0 14px rgba(255,255,255,1),
    0 0 34px rgba(196,244,255,.95),
    0 0 78px rgba(118,220,255,.5),
    0 0 110px rgba(255,224,164,.28);
  animation: portalFlareTwinkle 2.75s ease-in-out infinite;
}

.home-portal-flares span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent);
  transform: translate(-50%, -50%) rotate(28deg);
  box-shadow: 0 0 18px rgba(208,248,255,.65);
}

.home-portal-flares span:nth-child(1) { left: 49%; top: 8%; animation-delay: -.2s; }
.home-portal-flares span:nth-child(2) { left: 70%; top: 15%; width: 8px; animation-delay: -.7s; }
.home-portal-flares span:nth-child(3) { left: 86%; top: 35%; width: 12px; animation-delay: -1.4s; }
.home-portal-flares span:nth-child(4) { left: 83%; top: 61%; width: 8px; animation-delay: -2.1s; }
.home-portal-flares span:nth-child(5) { left: 63%; top: 82%; width: 11px; animation-delay: -1s; }
.home-portal-flares span:nth-child(6) { left: 37%; top: 79%; width: 7px; animation-delay: -1.8s; }
.home-portal-flares span:nth-child(7) { left: 17%; top: 58%; width: 9px; animation-delay: -.45s; }
.home-portal-flares span:nth-child(8) { left: 15%; top: 33%; width: 7px; animation-delay: -2.35s; }
.home-portal-flares span:nth-child(9) { left: 31%; top: 16%; width: 9px; animation-delay: -1.25s; }
.home-portal-flares span:nth-child(10) { left: 54%; top: 50%; width: 8px; animation-delay: -2.65s; }

@keyframes portalFlareTwinkle {
  0%, 100% {
    opacity: .12;
    transform: scale(.55);
  }
  12% {
    opacity: 1;
    transform: scale(2.25);
  }
  24% {
    opacity: .42;
    transform: scale(1);
  }
  38% {
    opacity: .86;
    transform: scale(1.48);
  }
  58% {
    opacity: .22;
    transform: scale(.78);
  }
  78% {
    opacity: .62;
    transform: scale(1.18);
  }
}

@media (max-width: 960px) {
  .home-portal-flares {
    left: 61%;
    top: 47%;
    width: min(62vw, 520px);
  }
}

@media (max-width: 680px) {
  .home-portal-flares {
    left: 60%;
    top: 47%;
    width: 78vw;
    opacity: .82;
  }
}

/* 物理世界高级化重构 */
.physics-body {
  background:
    radial-gradient(circle at 68% 18%, rgba(105, 190, 255, .12), transparent 28%),
    radial-gradient(circle at 18% 42%, rgba(255, 223, 172, .07), transparent 22%),
    #030915;
  color: rgba(236, 247, 250, .88);
}

.physics-body #ambientCanvas {
  opacity: .34;
  mix-blend-mode: screen;
}

.physics-body .site-header {
  background: linear-gradient(180deg, rgba(4, 10, 22, .62), rgba(4, 10, 22, .12));
  border-bottom: 1px solid rgba(226, 247, 255, .1);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.physics-body .article-page {
  background:
    linear-gradient(180deg, rgba(3, 9, 21, 0), #030915 720px),
    radial-gradient(circle at 72% 8%, rgba(120, 210, 255, .1), transparent 24%);
}

.physics-world-hero {
  margin: 24px auto 42px;
  width: min(1560px, calc(100% - 40px));
  min-height: calc(100svh - 116px);
  border-radius: 34px;
  border: 1px solid rgba(221, 246, 255, .12);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1, 7, 18, .72) 0%, rgba(1, 7, 18, .24) 34%, rgba(1, 7, 18, .06) 74%, rgba(1, 7, 18, .18) 100%),
    linear-gradient(0deg, rgba(1, 7, 18, .7), rgba(1, 7, 18, .08) 48%, rgba(1, 7, 18, .24)),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
  box-shadow:
    0 50px 140px rgba(0,0,0,.54),
    inset 0 1px 0 rgba(255,255,255,.08);
  isolation: isolate;
}

.physics-world-hero::before {
  opacity: .72;
  background:
    radial-gradient(circle at 72% 44%, rgba(205, 248, 255, .16), transparent 22%),
    radial-gradient(circle at 47% 32%, rgba(255, 225, 164, .08), transparent 20%);
  mix-blend-mode: screen;
  animation: physicsAtmosphere 10s ease-in-out infinite alternate;
}

.physics-world-hero::after {
  display: block;
  inset: 0;
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,8,18,.34), transparent 32%, transparent 76%, rgba(2,8,18,.16)),
    linear-gradient(0deg, rgba(2,8,18,.56), transparent 38%);
}

.physics-lux-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.physics-orbital-line {
  position: absolute;
  left: 52%;
  top: 48%;
  width: min(50vw, 820px);
  height: min(18vw, 280px);
  border: 1px solid rgba(218, 249, 255, .18);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 224, 168, .13);
  border-radius: 50%;
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(180, 240, 255, .12));
  animation: physicsOrbitDrift 16s linear infinite;
}

.line-a {
  rotate: -18deg;
}

.line-b {
  width: min(42vw, 700px);
  height: min(13vw, 220px);
  rotate: 24deg;
  animation-duration: 22s;
  animation-direction: reverse;
  opacity: .72;
}

.line-c {
  width: min(58vw, 940px);
  height: min(22vw, 350px);
  rotate: 4deg;
  animation-duration: 28s;
  opacity: .42;
}

.physics-spark {
  position: absolute;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #dffbff 42%, transparent 72%);
  box-shadow:
    0 0 14px rgba(255,255,255,.82),
    0 0 40px rgba(154,230,255,.42);
  animation: physicsSpark 4.4s ease-in-out infinite;
}

.spark-a { left: 70%; top: 29%; animation-delay: -.4s; }
.spark-b { left: 83%; top: 48%; width: 5px; animation-delay: -1.7s; }
.spark-c { left: 61%; top: 67%; width: 6px; animation-delay: -2.6s; }
.spark-d { left: 48%; top: 42%; width: 4px; animation-delay: -3.2s; }

.physics-world-copy {
  max-width: 540px;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(230, 248, 255, .14);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 46%, rgba(255,255,255,.07)),
    rgba(4, 12, 26, .34);
  box-shadow:
    0 34px 110px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(26px) saturate(1.12);
}

.physics-world-copy .eyebrow {
  color: rgba(205, 244, 255, .72);
  letter-spacing: .36em;
}

.physics-world-copy h1 {
  color: transparent;
  background: linear-gradient(180deg, #ffffff, #e6fbff 54%, #d9bd7a 118%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  font-size: clamp(72px, 8vw, 138px);
  letter-spacing: .02em;
}

.physics-world-copy .lead {
  max-width: 500px;
  color: rgba(229, 241, 245, .68);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 2;
}

.physics-world-actions .primary-btn,
.physics-world-actions .ghost-btn {
  border-radius: 999px;
  border: 1px solid rgba(235, 249, 255, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
    rgba(7, 16, 32, .22);
  color: rgba(245, 252, 255, .88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.physics-world-actions .primary-btn {
  border-color: rgba(255, 225, 164, .32);
  color: rgba(255, 237, 194, .94);
}

.physics-world-actions .primary-btn:hover,
.physics-world-actions .ghost-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 253, 255, .36);
  box-shadow:
    0 20px 52px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
}

.physics-orbit-space {
  z-index: 3;
  min-height: clamp(520px, 46vw, 720px);
  transform:
    translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0);
}

.space-window,
.spacetime-grid,
.physics-core,
.core-ring {
  display: none;
}

.physics-node {
  border: 1px solid rgba(230, 248, 255, .16);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 48%, rgba(255,255,255,.065)),
    rgba(4, 12, 26, .24);
  box-shadow:
    0 24px 72px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(22px) saturate(1.08);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
  animation: physicsNodeFloat 7s ease-in-out infinite;
}

.physics-node::before {
  display: none;
}

.physics-node b {
  color: rgba(250, 254, 255, .94);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .15em;
  text-shadow: 0 16px 38px rgba(0,0,0,.34);
}

.physics-node small {
  color: rgba(222, 242, 248, .52);
  letter-spacing: .05em;
}

.physics-node:hover {
  transform: translateY(-8px);
  border-color: rgba(235, 251, 255, .38);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 48%, rgba(255,255,255,.09)),
    rgba(6, 16, 34, .3);
  box-shadow:
    0 30px 92px rgba(0,0,0,.45),
    0 0 36px rgba(187, 244, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.node-em,
.node-quantum {
  animation-delay: -1.8s;
}

.node-thermal,
.node-cosmos {
  animation-delay: -3.6s;
}

.physics-body .article-grid {
  width: min(1380px, calc(100% - 40px));
  margin-inline: auto;
  gap: 26px;
}

.physics-body .toc.magic-card,
.physics-body .article-card {
  border: 1px solid rgba(225, 246, 255, .12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 42%, rgba(255,255,255,.05)),
    rgba(5, 14, 30, .5);
  box-shadow:
    0 30px 90px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(1.08);
}

.physics-body .article-card {
  border-radius: 28px;
  padding: clamp(24px, 3vw, 42px);
}

.physics-body .article-card h2 {
  color: rgba(247, 253, 255, .95);
  letter-spacing: .04em;
}

.physics-body .article-card h3 {
  color: rgba(221, 247, 255, .86);
}

.physics-body .article-card p,
.physics-body .article-card li {
  color: rgba(225, 236, 240, .72);
}

.physics-body .article-card strong {
  color: rgba(255, 232, 182, .9);
}

.physics-body .toc a {
  color: rgba(226, 243, 248, .62);
  border-color: rgba(226, 243, 248, .08);
}

.physics-body .toc a:hover {
  color: rgba(255, 239, 198, .94);
  background: rgba(255,255,255,.055);
}

@keyframes physicsAtmosphere {
  from { transform: translate3d(-1%, 0, 0); opacity: .52; }
  to { transform: translate3d(1%, -1%, 0); opacity: .84; }
}

@keyframes physicsOrbitDrift {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes physicsSpark {
  0%, 100% { opacity: .18; transform: scale(.7); }
  42% { opacity: .95; transform: scale(1.8); }
  66% { opacity: .3; transform: scale(.95); }
}

@keyframes physicsNodeFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@media (max-width: 1050px) {
  .physics-world-hero {
    width: min(100% - 28px, 920px);
    grid-template-columns: 1fr;
  }

  .physics-world-copy {
    max-width: 100%;
  }

  .physics-orbital-line {
    left: 50%;
    width: 86vw;
    height: 28vw;
  }
}

@media (max-width: 680px) {
  .physics-world-hero {
    width: calc(100% - 24px);
    border-radius: 24px;
    padding: 16px;
    background-position: 60% center;
  }

  .physics-world-copy {
    padding: 24px;
    border-radius: 24px;
  }

  .physics-world-copy h1 {
    font-size: clamp(56px, 18vw, 84px);
  }

  .physics-world-copy .lead {
    font-size: 15px;
  }

  .physics-node {
    min-width: 126px;
    min-height: 56px;
    padding: 9px 12px;
  }

  .physics-node b {
    font-size: 18px;
  }

  .physics-body .article-grid {
    width: calc(100% - 24px);
  }
}

/* 物理世界强力动感版 */
.physics-world-hero {
  background:
    linear-gradient(90deg, rgba(1, 7, 18, .64) 0%, rgba(1, 7, 18, .18) 34%, rgba(1, 7, 18, .03) 74%, rgba(1, 7, 18, .14) 100%),
    linear-gradient(0deg, rgba(1, 7, 18, .58), rgba(1, 7, 18, .04) 48%, rgba(1, 7, 18, .18)),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
  animation: physicsHeroPush 14s ease-in-out infinite alternate;
}

.physics-lux-layer {
  opacity: 1;
}

.physics-orbital-line {
  border-color: rgba(221, 250, 255, .34);
  border-left-color: rgba(255, 230, 174, .2);
  border-bottom-color: rgba(113, 222, 255, .28);
  box-shadow:
    0 0 18px rgba(196, 246, 255, .22),
    inset 0 0 22px rgba(196, 246, 255, .08);
  animation-duration: 7.5s;
}

.line-b {
  animation-duration: 10s;
}

.line-c {
  animation-duration: 13s;
}

.physics-energy-ring {
  position: absolute;
  left: 70%;
  top: 44%;
  width: min(30vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(216, 250, 255, .32);
  box-shadow:
    0 0 50px rgba(142, 232, 255, .24),
    inset 0 0 70px rgba(142, 232, 255, .1);
  transform: translate(-50%, -50%) scale(.62);
  opacity: 0;
  animation: physicsShockRing 3.2s ease-out infinite;
}

.energy-b {
  border-color: rgba(255, 230, 174, .28);
  animation-delay: -1.6s;
}

.physics-warp {
  position: absolute;
  left: 58%;
  top: 48%;
  width: min(46vw, 760px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.86), rgba(116,224,255,.62), transparent);
  box-shadow:
    0 0 18px rgba(196,246,255,.65),
    0 0 48px rgba(116,224,255,.28);
  opacity: 0;
  transform-origin: left center;
  animation: physicsWarpLine 2.6s cubic-bezier(.16,.8,.2,1) infinite;
}

.warp-a { top: 28%; rotate: -21deg; animation-delay: -.15s; }
.warp-b { top: 39%; rotate: -8deg; width: min(38vw, 620px); animation-delay: -.75s; }
.warp-c { top: 52%; rotate: 8deg; animation-delay: -1.35s; }
.warp-d { top: 64%; rotate: 22deg; width: min(42vw, 680px); animation-delay: -1.95s; }
.warp-e { top: 74%; rotate: 36deg; width: min(34vw, 560px); animation-delay: -2.35s; }

.physics-spark {
  width: 10px;
  box-shadow:
    0 0 18px rgba(255,255,255,1),
    0 0 50px rgba(154,230,255,.72),
    0 0 95px rgba(255,224,164,.26);
  animation-duration: 2.2s;
}

.physics-world-copy {
  animation: physicsCopyFloat 6s ease-in-out infinite;
}

.physics-node {
  animation: physicsNodeStrongFloat 3.6s ease-in-out infinite;
}

.node-em,
.node-quantum {
  animation-delay: -1.2s;
}

.node-thermal,
.node-cosmos {
  animation-delay: -2.4s;
}

.physics-node:hover {
  transform: translateY(-14px) scale(1.035);
}

@keyframes physicsHeroPush {
  from {
    background-size: auto, auto, 100%;
    filter: saturate(1.08) brightness(1);
  }
  to {
    background-size: auto, auto, 106%;
    filter: saturate(1.24) brightness(1.08);
  }
}

@keyframes physicsShockRing {
  0% {
    opacity: .78;
    transform: translate(-50%, -50%) scale(.46);
  }
  72%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes physicsWarpLine {
  0% {
    opacity: 0;
    transform: translateX(-24%) scaleX(.05);
  }
  18% {
    opacity: .92;
  }
  100% {
    opacity: 0;
    transform: translateX(42%) scaleX(1.35);
  }
}

@keyframes physicsCopyFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@keyframes physicsNodeStrongFloat {
  0%, 100% {
    translate: 0 0;
    box-shadow:
      0 24px 72px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  50% {
    translate: 0 -14px;
    box-shadow:
      0 34px 96px rgba(0,0,0,.46),
      0 0 42px rgba(188,246,255,.14),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
}

@media (max-width: 960px) {
  .physics-energy-ring {
    left: 55%;
    top: 58%;
    width: min(70vw, 520px);
  }

  .physics-warp {
    left: 20%;
    width: 86vw;
  }
}

@media (max-width: 680px) {
  .physics-warp {
    left: 8%;
    width: 100vw;
  }

  .physics-energy-ring {
    width: 82vw;
  }
}

/* 首页三大入口高级图标重构 */
.home-gates {
  align-items: stretch;
}

.gate-card {
  min-height: 172px;
  padding: 22px 24px 20px;
  gap: 10px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.045) 44%, rgba(255,255,255,.09)),
    radial-gradient(circle at 50% 18%, rgba(220, 249, 255, .22), transparent 38%),
    rgba(7, 17, 32, .24);
  border-color: rgba(235, 250, 255, .22);
  box-shadow:
    0 34px 100px rgba(0,0,0,.36),
    0 0 38px rgba(195, 245, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -32px 70px rgba(195, 245, 255, .045);
}

.gate-card::before {
  display: block;
  opacity: .34;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.3) 44%, rgba(196,245,255,.18) 50%, transparent 62%);
  translate: -130% 0;
  animation: premiumGateSheen 5.2s ease-in-out infinite;
}

.gate-card::after {
  display: block;
  z-index: 0;
  opacity: .8;
  translate: 0 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 230, 178, .14), transparent 42%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.12));
  animation: none;
}

.gate-card:nth-child(2)::before {
  animation-delay: -1.7s;
}

.gate-card:nth-child(3)::before {
  animation-delay: -3.4s;
}

.gate-sigil {
  position: relative;
  z-index: 2;
  width: 72px;
  aspect-ratio: 1;
  margin-bottom: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), transparent 10%),
    radial-gradient(circle, rgba(222, 252, 255, .92) 0 12%, rgba(120, 226, 255, .4) 34%, rgba(35, 80, 160, .18) 58%, transparent 72%);
  box-shadow:
    0 0 24px rgba(222,252,255,.36),
    0 0 62px rgba(122,226,255,.18),
    inset 0 0 16px rgba(255,255,255,.28);
  animation: gateSigilPulse 4s ease-in-out infinite;
}

.gate-sigil::before,
.gate-sigil::after,
.gate-sigil i {
  content: "";
  position: absolute;
  pointer-events: none;
}

.gate-sigil::before {
  inset: -12px;
  border: 1px solid rgba(226, 252, 255, .34);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(196,245,255,.12);
  animation: sigilOrbit 5s linear infinite;
}

.gate-sigil::after {
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,236,190,.38), transparent 26%, rgba(172,236,255,.34), transparent 56%);
  mask: radial-gradient(circle, transparent 58%, #000 61%);
  animation: sigilOrbit 3.2s linear infinite reverse;
}

.sigil-physics i:nth-child(1) {
  width: 88px;
  height: 28px;
  border: 1px solid rgba(230, 252, 255, .42);
  border-radius: 50%;
  rotate: -22deg;
}

.sigil-physics i:nth-child(2) {
  width: 88px;
  height: 28px;
  border: 1px solid rgba(255, 231, 178, .38);
  border-radius: 50%;
  rotate: 38deg;
}

.sigil-physics i:nth-child(3) {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3c8;
  box-shadow: 0 0 18px rgba(255,231,178,.9);
  animation: electronDrift 2.8s linear infinite;
}

.sigil-math {
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(167, 222, 255, .18) 38%, rgba(141, 120, 255, .28)),
    radial-gradient(circle, rgba(221,252,255,.76), transparent 62%);
}

.sigil-math i:nth-child(1) {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.62);
  rotate: 45deg;
  box-shadow: 0 0 20px rgba(180, 210, 255, .26);
}

.sigil-math i:nth-child(2) {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  rotate: -28deg;
}

.sigil-math i:nth-child(3) {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,232,178,.72), transparent);
  rotate: 28deg;
}

.sigil-ai {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), transparent 10%),
    radial-gradient(circle, rgba(230, 252, 255, .9) 0 10%, rgba(128, 224, 255, .38) 32%, rgba(106, 154, 255, .28) 52%, transparent 72%);
}

.sigil-ai i {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(245, 254, 255, .95);
  box-shadow: 0 0 16px rgba(204, 248, 255, .72);
}

.sigil-ai i:nth-child(1) {
  left: 20px;
  top: 22px;
}

.sigil-ai i:nth-child(2) {
  right: 18px;
  top: 30px;
}

.sigil-ai i:nth-child(3) {
  left: 32px;
  bottom: 18px;
}

.sigil-ai::before {
  background:
    linear-gradient(28deg, transparent 45%, rgba(226,252,255,.48) 48% 52%, transparent 55%),
    linear-gradient(145deg, transparent 45%, rgba(255,231,178,.32) 48% 52%, transparent 55%);
}

.gate-card b {
  font-size: clamp(26px, 2vw, 36px);
  letter-spacing: .18em;
}

.gate-card small {
  font-size: 12px;
  color: rgba(232, 247, 252, .55);
}

.gate-card:hover .gate-sigil {
  transform: translateY(-4px) scale(1.08);
  box-shadow:
    0 0 34px rgba(222,252,255,.5),
    0 0 84px rgba(122,226,255,.26),
    inset 0 0 18px rgba(255,255,255,.36);
}

@keyframes premiumGateSheen {
  0%, 42% { translate: -140% 0; opacity: 0; }
  55% { opacity: .44; }
  76%, 100% { translate: 140% 0; opacity: 0; }
}

@keyframes gateSigilPulse {
  0%, 100% {
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.22);
    transform: translateY(-5px);
  }
}

@keyframes sigilOrbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes electronDrift {
  0% { transform: translate(31px, 0); }
  25% { transform: translate(0, 14px); }
  50% { transform: translate(-31px, 0); }
  75% { transform: translate(0, -14px); }
  100% { transform: translate(31px, 0); }
}

@media (max-width: 960px) {
  .gate-card {
    min-height: 150px;
    grid-template-columns: auto 1fr;
    justify-items: start;
    column-gap: 22px;
    padding-inline: 24px;
  }

  .gate-card b,
  .gate-card small {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .gate-sigil {
    width: 58px;
  }

  .gate-card {
    min-height: 126px;
    border-radius: 24px;
  }
}

/* 首页三入口改为伪三维飞船 */
.home-gates {
  bottom: clamp(58px, 9vh, 108px);
  gap: clamp(20px, 2.5vw, 34px);
  perspective: 1200px;
}

.gate-card {
  min-height: 126px;
  padding: 18px 30px 18px 118px;
  border: 0;
  border-radius: 999px 40px 40px 999px;
  overflow: visible;
  display: grid;
  place-items: start;
  justify-content: start;
  align-content: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.23), rgba(255,255,255,.075) 35%, rgba(255,255,255,.035) 68%, rgba(255,255,255,.13)),
    linear-gradient(180deg, rgba(214,247,255,.14), rgba(7,16,31,.18)),
    rgba(7, 17, 32, .22);
  box-shadow:
    0 34px 95px rgba(0,0,0,.38),
    0 0 40px rgba(194,244,255,.1),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset -26px -22px 58px rgba(0,0,0,.18);
  backdrop-filter: blur(24px) saturate(1.18);
  transform-style: preserve-3d;
  animation: shipCruiseA 12s ease-in-out infinite;
}

.gate-card:nth-child(2) {
  animation-name: shipCruiseB;
  animation-delay: -3.8s;
}

.gate-card:nth-child(3) {
  animation-name: shipCruiseC;
  animation-delay: -7.2s;
}

.gate-card::before {
  display: block;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.38) 45%, rgba(196,245,255,.18) 52%, transparent 63%);
  opacity: .42;
  translate: -120% 0;
  animation: shipHullSheen 5s ease-in-out infinite;
}

.gate-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 15%;
  right: 10%;
  bottom: -16px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 68%);
  filter: blur(8px);
  opacity: .52;
}

.ship-body {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  width: 132px;
  height: 86px;
  transform: translate(-18px, -50%) rotateY(-18deg) rotateX(8deg);
  transform-style: preserve-3d;
  pointer-events: none;
}

.ship-body::before {
  content: "";
  position: absolute;
  inset: 10px 16px 10px 26px;
  border-radius: 56% 34% 34% 56%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.92), transparent 10%),
    linear-gradient(135deg, rgba(242,253,255,.82), rgba(117,181,220,.26) 44%, rgba(18,42,72,.22)),
    rgba(220,250,255,.18);
  border: 1px solid rgba(238,252,255,.34);
  box-shadow:
    0 0 24px rgba(211,250,255,.26),
    inset 0 1px 0 rgba(255,255,255,.54),
    inset -18px -12px 30px rgba(12,28,52,.22);
}

.ship-nose {
  position: absolute;
  right: 4px;
  top: 28px;
  width: 38px;
  height: 30px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background:
    linear-gradient(90deg, rgba(222,250,255,.34), rgba(255,255,255,.76), rgba(255,232,178,.36));
  filter: drop-shadow(0 0 14px rgba(213,250,255,.28));
}

.ship-wing {
  position: absolute;
  left: 42px;
  width: 56px;
  height: 28px;
  background:
    linear-gradient(135deg, rgba(231,252,255,.44), rgba(110,170,220,.18));
  border: 1px solid rgba(232,252,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}

.wing-left {
  top: 2px;
  clip-path: polygon(12% 100%, 100% 70%, 74% 0, 0 28%);
}

.wing-right {
  bottom: 2px;
  clip-path: polygon(0 72%, 74% 100%, 100% 30%, 12% 0);
}

.ship-window {
  position: absolute;
  left: 56px;
  top: 32px;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #fff, transparent 18%),
    radial-gradient(circle, rgba(220,252,255,.95), rgba(101,223,255,.54) 54%, rgba(68,108,255,.22));
  box-shadow:
    0 0 18px rgba(214,250,255,.9),
    0 0 48px rgba(105,223,255,.35),
    inset 0 0 10px rgba(255,255,255,.38);
}

.ship-engine {
  position: absolute;
  left: 17px;
  top: 32px;
  width: 20px;
  height: 22px;
  border-radius: 50% 20% 20% 50%;
  background: rgba(10,24,44,.46);
  border: 1px solid rgba(228,250,255,.22);
  box-shadow: inset 0 0 16px rgba(100,220,255,.18);
}

.ship-trail {
  position: absolute;
  left: -58px;
  top: 40px;
  width: 82px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(100,224,255,.2), rgba(255,255,255,.62));
  box-shadow:
    0 0 18px rgba(116,226,255,.5),
    0 0 44px rgba(255,230,174,.16);
  opacity: .72;
  animation: shipTrailPulse 2.6s ease-in-out infinite;
}

.gate-card .gate-sigil {
  position: absolute;
  left: 41px;
  top: 50%;
  width: 46px;
  z-index: 2;
  transform: translateY(-50%) scale(.72);
  opacity: .86;
  mix-blend-mode: screen;
}

.gate-card b,
.gate-card small {
  z-index: 2;
  text-align: left;
}

.gate-card b {
  font-size: clamp(24px, 1.7vw, 32px);
  letter-spacing: .14em;
  white-space: nowrap;
}

.gate-card small {
  margin-top: 4px;
  letter-spacing: .28em;
}

.gate-card:hover {
  transform: translateY(-14px) rotateY(-6deg) rotateX(4deg) scale(1.035);
}

.gate-card:hover .ship-body {
  filter: brightness(1.12);
}

.gate-card:hover .ship-trail {
  opacity: 1;
  width: 112px;
}

@keyframes shipCruiseA {
  0%, 100% { translate: 0 0; transform: rotateY(-8deg) rotateX(3deg); }
  25% { translate: 18px -10px; transform: rotateY(-13deg) rotateX(6deg); }
  50% { translate: 6px -22px; transform: rotateY(-4deg) rotateX(2deg); }
  75% { translate: -14px -8px; transform: rotateY(-11deg) rotateX(5deg); }
}

@keyframes shipCruiseB {
  0%, 100% { translate: 0 -6px; transform: rotateY(-5deg) rotateX(4deg); }
  30% { translate: -20px -20px; transform: rotateY(-10deg) rotateX(7deg); }
  58% { translate: 14px -12px; transform: rotateY(-2deg) rotateX(2deg); }
  82% { translate: 22px 2px; transform: rotateY(-8deg) rotateX(5deg); }
}

@keyframes shipCruiseC {
  0%, 100% { translate: 0 2px; transform: rotateY(-9deg) rotateX(2deg); }
  28% { translate: 20px -18px; transform: rotateY(-4deg) rotateX(6deg); }
  56% { translate: -8px -24px; transform: rotateY(-14deg) rotateX(4deg); }
  84% { translate: -22px -4px; transform: rotateY(-7deg) rotateX(2deg); }
}

@keyframes shipHullSheen {
  0%, 38% { translate: -140% 0; opacity: 0; }
  52% { opacity: .5; }
  76%, 100% { translate: 140% 0; opacity: 0; }
}

@keyframes shipTrailPulse {
  0%, 100% { opacity: .42; scale: .82 1; }
  50% { opacity: .9; scale: 1.1 1; }
}

@media (max-width: 960px) {
  .home-gates {
    bottom: 70px;
  }

  .gate-card {
    min-height: 116px;
    padding-left: 112px;
  }

  .ship-body {
    width: 122px;
    height: 80px;
  }
}

@media (max-width: 680px) {
  .gate-card {
    min-height: 106px;
    padding: 16px 18px 16px 96px;
  }

  .ship-body {
    scale: .82;
    left: -6px;
  }

  .gate-card .gate-sigil {
    left: 34px;
    width: 38px;
  }

  .gate-card b {
    white-space: normal;
  }
}

/* 三艘飞船差异化精修 */
.gate-card {
  min-height: 138px;
  padding-left: 136px;
  border-radius: 48px 28px 28px 48px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.24), rgba(255,255,255,.07) 34%, rgba(6,18,36,.26) 66%, rgba(255,255,255,.12)),
    radial-gradient(ellipse at 18% 50%, rgba(221,252,255,.24), transparent 36%),
    rgba(8, 19, 36, .24);
}

.gate-card .ship-body {
  width: 160px;
  height: 104px;
  left: -8px;
}

.gate-card .ship-body::after {
  content: "";
  position: absolute;
  inset: 22px 22px 22px 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.1),
    0 0 26px rgba(196,245,255,.14);
  pointer-events: none;
}

.gate-card .gate-sigil {
  left: 54px;
  width: 50px;
}

.gate-physics {
  border-radius: 70px 30px 30px 70px;
}

.gate-physics .ship-body::before {
  inset: 18px 22px 18px 24px;
  border-radius: 58% 32% 32% 58%;
  clip-path: polygon(0 50%, 18% 18%, 58% 8%, 100% 50%, 58% 92%, 18% 82%);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.98), transparent 10%),
    linear-gradient(135deg, rgba(245,254,255,.88), rgba(135,206,235,.28) 42%, rgba(19,42,75,.3)),
    rgba(225,250,255,.18);
}

.gate-physics .ship-nose {
  right: -2px;
  top: 37px;
  width: 48px;
  height: 30px;
}

.gate-physics .ship-wing {
  left: 46px;
  width: 78px;
  height: 30px;
}

.gate-physics .wing-left {
  top: 4px;
  clip-path: polygon(8% 100%, 100% 68%, 78% 0, 0 30%);
}

.gate-physics .wing-right {
  bottom: 4px;
  clip-path: polygon(0 70%, 78% 100%, 100% 32%, 8% 0);
}

.gate-physics .ship-body::after {
  inset: 8px 36px 8px 28px;
  border-radius: 50%;
  border-color: rgba(216,250,255,.28);
  transform: rotate(-18deg);
}

.gate-math {
  border-radius: 36px;
  padding-left: 126px;
  background:
    linear-gradient(118deg, rgba(255,255,255,.22), rgba(199,215,255,.07) 38%, rgba(31,20,68,.22) 66%, rgba(255,255,255,.1)),
    radial-gradient(ellipse at 20% 50%, rgba(206,218,255,.26), transparent 38%),
    rgba(9, 16, 38, .25);
}

.gate-math .ship-body {
  width: 150px;
  left: -3px;
}

.gate-math .ship-body::before {
  inset: 10px 18px;
  border-radius: 14px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(191,215,255,.34) 40%, rgba(100,80,190,.28)),
    radial-gradient(circle at 50% 50%, rgba(235,252,255,.58), transparent 48%);
  border-color: rgba(235,242,255,.36);
}

.gate-math .ship-nose {
  right: 4px;
  top: 37px;
  width: 40px;
  height: 30px;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 50%);
  background: linear-gradient(90deg, rgba(213,224,255,.28), rgba(255,255,255,.72));
}

.gate-math .ship-wing {
  left: 32px;
  width: 82px;
  height: 28px;
  background: linear-gradient(135deg, rgba(232,238,255,.42), rgba(130,120,220,.18));
}

.gate-math .wing-left {
  top: 1px;
  clip-path: polygon(50% 100%, 100% 30%, 72% 0, 0 38%);
}

.gate-math .wing-right {
  bottom: 1px;
  clip-path: polygon(0 62%, 72% 100%, 100% 70%, 50% 0);
}

.gate-math .ship-window {
  left: 61px;
  top: 38px;
  width: 22px;
  border-radius: 8px;
  rotate: 45deg;
  background:
    radial-gradient(circle at 35% 25%, #fff, transparent 18%),
    linear-gradient(135deg, rgba(231,252,255,.94), rgba(160,170,255,.38));
}

.gate-math .ship-body::after {
  inset: 22px 46px;
  border-radius: 10px;
  rotate: 45deg;
  border-color: rgba(255,255,255,.24);
}

.gate-ai {
  border-radius: 999px 34px 999px 34px;
  padding-left: 142px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.22), rgba(184,242,255,.07) 34%, rgba(5,28,48,.24) 66%, rgba(255,255,255,.12)),
    radial-gradient(ellipse at 18% 50%, rgba(161,235,255,.28), transparent 38%),
    rgba(4, 18, 35, .25);
}

.gate-ai .ship-body {
  width: 166px;
}

.gate-ai .ship-body::before {
  inset: 18px 18px 18px 20px;
  border-radius: 999px;
  clip-path: polygon(0 50%, 20% 24%, 58% 10%, 86% 28%, 100% 50%, 86% 72%, 58% 90%, 20% 76%);
  background:
    radial-gradient(circle at 40% 32%, rgba(255,255,255,.96), transparent 9%),
    linear-gradient(135deg, rgba(238,253,255,.84), rgba(97,221,255,.28) 42%, rgba(33,74,130,.3)),
    rgba(212,250,255,.16);
}

.gate-ai .ship-nose {
  right: -4px;
  top: 36px;
  width: 54px;
  height: 32px;
  clip-path: polygon(0 8%, 100% 50%, 0 92%, 18% 50%);
}

.gate-ai .ship-wing {
  left: 40px;
  width: 96px;
  height: 24px;
}

.gate-ai .wing-left {
  top: 8px;
  clip-path: polygon(0 100%, 100% 64%, 78% 0, 28% 18%);
}

.gate-ai .wing-right {
  bottom: 8px;
  clip-path: polygon(28% 82%, 78% 100%, 100% 36%, 0 0);
}

.gate-ai .ship-window {
  left: 60px;
  top: 36px;
  width: 14px;
  box-shadow:
    24px 0 0 rgba(230,252,255,.86),
    0 0 18px rgba(214,250,255,.9),
    24px 0 18px rgba(214,250,255,.7);
}

.gate-ai .ship-body::after {
  inset: 20px 38px 20px 28px;
  border-radius: 999px;
  border-color: rgba(190,246,255,.24);
}

.gate-physics .ship-trail {
  background: linear-gradient(90deg, transparent, rgba(96,225,255,.24), rgba(255,255,255,.72));
}

.gate-math .ship-trail {
  background: linear-gradient(90deg, transparent, rgba(156,150,255,.22), rgba(255,255,255,.68));
}

.gate-ai .ship-trail {
  background: linear-gradient(90deg, transparent, rgba(86,235,255,.28), rgba(255,255,255,.74));
}

.gate-card:hover .ship-body {
  transform: translate(-18px, -50%) rotateY(-24deg) rotateX(10deg) translateZ(18px);
}

@media (max-width: 960px) {
  .gate-card,
  .gate-math,
  .gate-ai {
    padding-left: 130px;
  }
}

@media (max-width: 680px) {
  .gate-card,
  .gate-math,
  .gate-ai {
    padding-left: 104px;
  }

  .gate-card .ship-body {
    width: 138px;
    scale: .74;
  }
}

/* 首页取消左侧标题文字 */
.home-title-block {
  display: none;
}

/* 首页大型横向宇宙飞船穿梭版 */
.home-gates {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 100%;
  z-index: 14;
  display: block;
  perspective: 1600px;
  pointer-events: none;
}

.home-gates .gate-card {
  position: absolute;
  left: -560px;
  width: clamp(420px, 36vw, 620px);
  height: clamp(118px, 10vw, 168px);
  min-height: 0;
  padding: 0;
  display: block;
  overflow: visible;
  pointer-events: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform-style: preserve-3d;
  animation: starshipPassA 24s cubic-bezier(.45,0,.55,1) infinite;
}

.home-gates .gate-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 10% 4% 12% 16%;
  display: block;
  border: 1px solid rgba(230, 246, 255, .22);
  clip-path: polygon(0 58%, 12% 22%, 68% 0, 100% 30%, 92% 72%, 24% 100%);
  background:
    linear-gradient(150deg, rgba(255,255,255,.22), transparent 18%),
    linear-gradient(18deg, rgba(8,16,30,.94), rgba(44,58,78,.94) 38%, rgba(7,13,25,.98) 70%, rgba(215,232,245,.62)),
    repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 2px, transparent 2px 24px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    0 0 34px rgba(108,213,255,.18),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset -34px -18px 48px rgba(0,0,0,.46);
  animation: battleshipSheen 5.8s ease-in-out infinite;
}

.home-gates .gate-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -18%;
  top: 59%;
  width: 34%;
  height: 16%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(58, 195, 255, .16), rgba(126, 229, 255, .86), rgba(255,255,255,.75));
  box-shadow:
    0 0 18px rgba(106,222,255,.72),
    0 0 70px rgba(106,222,255,.4),
    0 0 110px rgba(86,100,255,.2);
  filter: blur(.2px);
  animation: battleshipTrail 1.8s ease-in-out infinite;
}

.home-gates .ship-body {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: none;
  scale: 1;
  pointer-events: none;
}

.home-gates .ship-body::before {
  content: "";
  position: absolute;
  inset: 23% 16% 22% 26%;
  border: 1px solid rgba(238, 250, 255, .18);
  border-radius: 8px;
  clip-path: polygon(0 50%, 16% 18%, 68% 10%, 100% 50%, 68% 90%, 16% 82%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 22%),
    linear-gradient(90deg, rgba(11,20,36,.94), rgba(35,52,78,.88) 48%, rgba(7,14,27,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset -18px -12px 34px rgba(0,0,0,.4);
}

.home-gates .ship-body::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 35%;
  width: 18%;
  aspect-ratio: 1.45;
  border-radius: 50%;
  border: 1px solid rgba(225,250,255,.32);
  background:
    radial-gradient(circle at 35% 25%, #fff, transparent 12%),
    radial-gradient(circle, rgba(119,232,255,.92), rgba(79,91,255,.54) 44%, rgba(18,28,58,.34) 70%, transparent);
  box-shadow:
    0 0 22px rgba(200,250,255,.7),
    0 0 74px rgba(93,215,255,.38),
    inset 0 0 18px rgba(255,255,255,.34);
}

.home-gates .ship-nose {
  position: absolute;
  z-index: 4;
  right: 1%;
  top: 21%;
  width: 29%;
  height: 58%;
  clip-path: polygon(0 5%, 100% 50%, 0 95%, 16% 50%);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(99,122,152,.42) 46%, rgba(8,15,28,.86)),
    repeating-linear-gradient(120deg, rgba(0,0,0,.18) 0 2px, transparent 2px 26px);
  border: 1px solid rgba(236,248,255,.22);
  filter: drop-shadow(0 0 18px rgba(204,240,255,.18));
}

.home-gates .ship-wing {
  position: absolute;
  z-index: 1;
  left: 26%;
  width: 43%;
  height: 28%;
  border: 1px solid rgba(226,246,255,.16);
  background:
    linear-gradient(135deg, rgba(216,235,250,.3), rgba(13,26,48,.82)),
    repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.home-gates .wing-left {
  top: 6%;
  clip-path: polygon(10% 100%, 100% 62%, 84% 0, 0 32%);
}

.home-gates .wing-right {
  bottom: 7%;
  clip-path: polygon(0 68%, 84% 100%, 100% 38%, 10% 0);
}

.home-gates .ship-window {
  position: absolute;
  z-index: 5;
  left: 52%;
  top: 38%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #fff, transparent 18%),
    radial-gradient(circle, rgba(227,252,255,.95), rgba(107,225,255,.55) 54%, rgba(77,88,255,.28));
  box-shadow:
    0 0 16px rgba(214,250,255,.95),
    0 0 54px rgba(105,223,255,.42);
}

.home-gates .ship-engine {
  position: absolute;
  z-index: 5;
  left: 5%;
  top: 44%;
  width: 18%;
  height: 17%;
  border-radius: 999px 20% 20% 999px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.76), rgba(50,72,98,.78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 2px, transparent 2px 13px);
  border: 1px solid rgba(226,246,255,.16);
  box-shadow:
    inset 0 0 16px rgba(100,220,255,.18),
    -6px 0 22px rgba(74,210,255,.22);
}

.home-gates .ship-trail {
  position: absolute;
  z-index: -1;
  left: -28%;
  top: 48%;
  width: 36%;
  height: 9%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(54,192,255,.18), rgba(120,230,255,.85), rgba(255,255,255,.72));
  box-shadow:
    0 0 18px rgba(116,226,255,.68),
    0 0 64px rgba(96,145,255,.28);
  animation: battleshipTrail 1.8s ease-in-out infinite;
}

.home-gates .gate-sigil {
  z-index: 6;
  left: 52%;
  top: 42%;
  width: 12%;
  transform: none;
  opacity: .95;
}

.home-gates .gate-card b {
  position: absolute;
  z-index: 6;
  left: 24%;
  top: 45%;
  transform: translateY(-50%) skewX(-7deg);
  display: block;
  max-width: 34%;
  color: rgba(246,253,255,.96);
  font-size: clamp(22px, 2vw, 34px);
  letter-spacing: .08em;
  line-height: 1.1;
  text-shadow:
    0 0 12px rgba(207,244,255,.46),
    0 3px 10px rgba(0,0,0,.7);
  white-space: nowrap;
}

.home-gates .gate-card small {
  display: none;
}

.home-gates .gate-physics {
  top: 20%;
  animation-name: starshipPassA;
}

.home-gates .gate-math {
  top: 47%;
  animation-name: starshipPassB;
  animation-duration: 29s;
  animation-delay: -10s;
}

.home-gates .gate-ai {
  top: 68%;
  animation-name: starshipPassC;
  animation-duration: 26s;
  animation-delay: -17s;
}

.home-gates .gate-math::before {
  background:
    linear-gradient(150deg, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(18deg, rgba(12,12,35,.96), rgba(62,58,98,.9) 38%, rgba(8,12,28,.98) 70%, rgba(232,224,255,.62)),
    repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 2px, transparent 2px 24px);
}

.home-gates .gate-ai::before {
  background:
    linear-gradient(150deg, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(18deg, rgba(4,18,32,.96), rgba(28,78,106,.86) 38%, rgba(4,13,26,.98) 70%, rgba(190,250,255,.62)),
    repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 2px, transparent 2px 24px);
}

.home-gates .gate-card:hover {
  animation-play-state: paused;
  filter: brightness(1.14);
}

@keyframes starshipPassA {
  0%, 100% {
    transform: translate3d(-18vw, 0, 0) rotateZ(-5deg) rotateY(-10deg) scale(.92);
    opacity: .08;
  }
  8%, 92% { opacity: 1; }
  48% {
    transform: translate3d(calc(100vw + 620px), -7vh, 0) rotateZ(-5deg) rotateY(-10deg) scale(1.04);
    opacity: 1;
  }
  50% {
    transform: translate3d(calc(100vw + 620px), -7vh, 0) rotateZ(-5deg) rotateY(-10deg) scale(1.04);
    opacity: .88;
  }
  98% {
    transform: translate3d(-18vw, 0, 0) rotateZ(-5deg) rotateY(-10deg) scale(.92);
    opacity: 1;
  }
}

@keyframes starshipPassB {
  0%, 100% {
    transform: translate3d(calc(100vw + 620px), 0, 0) rotateZ(-4deg) rotateY(-10deg) scale(.82);
    opacity: .08;
  }
  10%, 90% { opacity: .9; }
  47% {
    transform: translate3d(-26vw, -5vh, 0) rotateZ(-4deg) rotateY(-10deg) scale(.95);
    opacity: .95;
  }
  50% {
    transform: translate3d(-26vw, -5vh, 0) rotateZ(-4deg) rotateY(-10deg) scale(.95);
  }
  96% {
    transform: translate3d(calc(100vw + 620px), 0, 0) rotateZ(-4deg) rotateY(-10deg) scale(.82);
    opacity: .9;
  }
}

@keyframes starshipPassC {
  0%, 100% {
    transform: translate3d(-24vw, 0, 0) rotateZ(4deg) rotateY(-8deg) scale(.74);
    opacity: .08;
  }
  9%, 91% { opacity: .82; }
  48% {
    transform: translate3d(calc(100vw + 620px), 4vh, 0) rotateZ(4deg) rotateY(-8deg) scale(.9);
  }
  50% {
    transform: translate3d(calc(100vw + 620px), 4vh, 0) rotateZ(4deg) rotateY(-8deg) scale(.9);
  }
  97% {
    transform: translate3d(-24vw, 0, 0) rotateZ(4deg) rotateY(-8deg) scale(.74);
  }
}

@keyframes battleshipSheen {
  0%, 100% { filter: brightness(.96) saturate(1.05); }
  50% { filter: brightness(1.18) saturate(1.22); }
}

@keyframes battleshipTrail {
  0%, 100% { opacity: .48; transform: scaleX(.82); }
  50% { opacity: 1; transform: scaleX(1.16); }
}

@media (max-width: 960px) {
  .home-gates .gate-card {
    width: min(78vw, 520px);
    height: 122px;
  }

  .home-gates .gate-card b {
    font-size: clamp(20px, 4vw, 30px);
  }
}

@media (max-width: 680px) {
  .home-gates .gate-card {
    width: 420px;
    height: 102px;
  }

  .home-gates .gate-card b {
    left: 25%;
    font-size: 20px;
  }

  .home-gates .gate-physics { top: 24%; }
  .home-gates .gate-math { top: 50%; }
  .home-gates .gate-ai { top: 70%; }
}

/* 物理世界极简大气版：接近首页首屏 */
.physics-body .article-page {
  background: #030915;
}

.physics-world-hero {
  width: 100%;
  min-height: calc(100svh - 90px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1, 7, 18, .42), rgba(1, 7, 18, .08) 34%, rgba(1, 7, 18, .02) 70%, rgba(1, 7, 18, .18)),
    linear-gradient(0deg, rgba(1, 7, 18, .62), transparent 42%, rgba(1, 7, 18, .12)),
    url("./assets/physics-galaxy-world.png") center / cover no-repeat;
  box-shadow: none;
  animation: physicsCleanDrift 22s ease-in-out infinite alternate;
}

.physics-world-hero::before {
  opacity: .7;
  background:
    radial-gradient(circle at 70% 46%, rgba(232, 253, 255, .12), transparent 22%),
    radial-gradient(circle at 46% 50%, rgba(255, 226, 172, .1), transparent 20%);
}

.physics-world-hero::after {
  background:
    linear-gradient(90deg, rgba(1, 7, 18, .34), transparent 28%, transparent 78%, rgba(1, 7, 18, .14)),
    linear-gradient(0deg, rgba(1, 7, 18, .56), transparent 40%);
}

.physics-world-copy {
  display: none;
}

.physics-lux-layer {
  z-index: 2;
}

.physics-orbital-line {
  left: 62%;
  top: 48%;
  width: min(72vw, 1180px);
  height: min(30vw, 460px);
  border-color: rgba(220, 249, 255, .2);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 226, 172, .14);
  opacity: .58;
  animation-duration: 18s;
}

.line-b {
  width: min(56vw, 900px);
  height: min(21vw, 340px);
  animation-duration: 24s;
}

.line-c {
  width: min(88vw, 1360px);
  height: min(36vw, 560px);
  animation-duration: 32s;
  opacity: .32;
}

.physics-energy-ring,
.physics-warp {
  opacity: .72;
}

.physics-orbit-space {
  position: absolute;
  inset: 0;
  z-index: 5;
  min-height: 0;
  pointer-events: none;
  transform: none;
}

.physics-node {
  pointer-events: auto;
  min-width: 176px;
  min-height: 54px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(230, 248, 255, .18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035) 48%, rgba(255,255,255,.07)),
    rgba(5, 14, 30, .22);
  box-shadow:
    0 24px 72px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(1.08);
  animation: physicsCleanFloat 8s ease-in-out infinite;
}

.physics-node b {
  font-size: 22px;
  letter-spacing: .18em;
}

.physics-node small {
  display: none;
}

.node-mechanics { left: 13%; top: 30%; }
.node-em { left: auto; right: 14%; top: 28%; }
.node-thermal { left: 18%; top: 62%; }
.node-relativity { left: auto; right: 12%; top: 61%; }
.node-quantum { left: 44%; top: 73%; }
.node-cosmos { left: 48%; top: 18%; }

.physics-body .article-grid {
  margin-top: 64px;
}

@keyframes physicsCleanDrift {
  from {
    background-size: auto, auto, 100%;
    filter: saturate(1.08) brightness(1);
  }
  to {
    background-size: auto, auto, 106%;
    filter: saturate(1.22) brightness(1.08);
  }
}

@keyframes physicsCleanFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}

@media (max-width: 960px) {
  .physics-world-hero {
    min-height: calc(100svh - 82px);
  }

  .node-mechanics { left: 8%; top: 28%; }
  .node-em { right: 8%; top: 36%; }
  .node-thermal { left: 10%; top: 58%; }
  .node-relativity { right: 8%; top: 66%; }
  .node-quantum { left: 34%; top: 76%; }
  .node-cosmos { left: 34%; top: 18%; }
}

@media (max-width: 680px) {
  .physics-node {
    min-width: 126px;
    min-height: 48px;
    padding: 8px 14px;
  }

  .physics-node b {
    font-size: 17px;
  }
}

/* 物理世界星系导航：六颗不同体量与材质的行星 */
.physics-body .article-grid,
.physics-body .site-footer,
.physics-world-copy,
.physics-orbit-space .space-window,
.physics-orbit-space .spacetime-grid,
.physics-orbit-space .physics-core {
  display: none !important;
}

.physics-body .article-page {
  min-height: calc(100svh - 88px);
  padding: 0;
}

.physics-world-hero {
  min-height: calc(100svh - 88px);
  isolation: isolate;
}

.physics-orbit-space {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.physics-orbit-space::before,
.physics-orbit-space::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(174, 222, 255, .16);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: 0 0 42px rgba(79, 167, 255, .08);
  pointer-events: none;
}

.physics-orbit-space::before {
  width: 82vw;
  height: 42vw;
}

.physics-orbit-space::after {
  width: 58vw;
  height: 27vw;
  transform: translate(-50%, -50%) rotate(18deg);
}

.physics-node {
  --planet-a: #83d8ff;
  --planet-b: #173d7b;
  --planet-c: #071326;
  --planet-glow: rgba(91, 203, 255, .7);
  position: absolute;
  display: grid !important;
  place-items: center;
  width: var(--planet-size) !important;
  height: var(--planet-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(230, 248, 255, .3) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.9) 0 2%, transparent 8%),
    radial-gradient(ellipse at 67% 58%, rgba(255,255,255,.16) 0 8%, transparent 30%),
    repeating-linear-gradient(168deg, transparent 0 12%, rgba(255,255,255,.045) 13% 15%, transparent 17% 26%),
    radial-gradient(circle at 36% 31%, var(--planet-a), var(--planet-b) 42%, var(--planet-c) 78%) !important;
  box-shadow:
    inset -22px -28px 44px rgba(0,0,0,.58),
    inset 12px 10px 24px rgba(255,255,255,.13),
    0 0 22px var(--planet-glow),
    0 0 70px rgba(56, 132, 255, .17) !important;
  backdrop-filter: none !important;
  transform-style: preserve-3d;
  animation: planetFloat var(--float-speed, 9s) ease-in-out infinite !important;
  pointer-events: auto;
  transition: filter .35s ease, box-shadow .35s ease;
}

.physics-node::before {
  content: "" !important;
  position: absolute !important;
  inset: -15% -42% !important;
  width: auto !important;
  height: auto !important;
  border: 2px solid rgba(205, 238, 255, .38) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: 0 0 16px rgba(116, 209, 255, .18) !important;
  transform: rotate(-15deg) !important;
  opacity: .72 !important;
  animation: planetRing 12s linear infinite !important;
  pointer-events: none;
}

.physics-node::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: linear-gradient(122deg, rgba(255,255,255,.24), transparent 28% 68%, rgba(0,0,0,.22));
  mix-blend-mode: screen;
  pointer-events: none;
}

.physics-node b {
  position: relative;
  z-index: 3;
  color: rgba(250, 254, 255, .97);
  font-size: clamp(17px, 1.7vw, 27px) !important;
  font-weight: 500;
  letter-spacing: .15em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.72), 0 0 20px rgba(214,243,255,.72);
  transform: translateX(.08em);
}

.physics-node small { display: none !important; }

.physics-node:hover,
.physics-node:focus-visible {
  filter: brightness(1.3) saturate(1.18);
  box-shadow:
    inset -22px -28px 44px rgba(0,0,0,.48),
    inset 12px 10px 24px rgba(255,255,255,.2),
    0 0 38px var(--planet-glow),
    0 0 100px var(--planet-glow) !important;
  outline: none;
}

.node-mechanics {
  --planet-size: clamp(108px, 10vw, 164px);
  --planet-a: #a7e8ff; --planet-b: #326895; --planet-c: #07162b;
  --planet-glow: rgba(92, 204, 255, .56);
  --float-speed: 8.6s;
  left: 11%; top: 22%;
}

.node-em {
  --planet-size: clamp(82px, 7.2vw, 120px);
  --planet-a: #e4c5ff; --planet-b: #7047b8; --planet-c: #160e36;
  --planet-glow: rgba(179, 111, 255, .66);
  --float-speed: 7.3s;
  left: auto; right: 13%; top: 18%;
  animation-delay: -2.2s !important;
}

.node-thermal {
  --planet-size: clamp(92px, 8.5vw, 140px);
  --planet-a: #ffe1a0; --planet-b: #b34f2e; --planet-c: #38100d;
  --planet-glow: rgba(255, 140, 70, .58);
  --float-speed: 10.5s;
  left: 17%; top: 64%;
  animation-delay: -4.7s !important;
}

.node-relativity {
  --planet-size: clamp(128px, 12vw, 196px);
  --planet-a: #93dbff; --planet-b: #2858a4; --planet-c: #071329;
  --planet-glow: rgba(69, 167, 255, .7);
  --float-speed: 11.2s;
  left: auto; right: 9%; top: 57%;
  animation-delay: -6.5s !important;
}

.node-quantum {
  --planet-size: clamp(72px, 6.4vw, 106px);
  --planet-a: #ffc9f3; --planet-b: #7e3f96; --planet-c: #180c2e;
  --planet-glow: rgba(231, 105, 255, .62);
  --float-speed: 6.7s;
  left: 43%; top: 69%;
  animation-delay: -1.4s !important;
}

.node-cosmos {
  --planet-size: clamp(154px, 15vw, 240px);
  --planet-a: #e6f7ff; --planet-b: #4773a8; --planet-c: #07162e;
  --planet-glow: rgba(127, 196, 255, .72);
  --float-speed: 13s;
  left: 45%; top: 24%;
  animation-delay: -8s !important;
}

@keyframes planetFloat {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  38% { translate: 9px -20px; rotate: 1deg; }
  70% { translate: -7px -7px; rotate: 0deg; }
}

@keyframes planetRing {
  to { rotate: 360deg; }
}

@media (max-width: 760px) {
  .physics-body .article-page,
  .physics-world-hero { min-height: calc(100svh - 72px); }

  .physics-orbit-space::before { width: 130vw; height: 92vw; }
  .physics-orbit-space::after { width: 92vw; height: 58vw; }

  .node-mechanics { left: 8%; top: 20%; }
  .node-em { right: 8%; top: 17%; }
  .node-thermal { left: 12%; top: 61%; }
  .node-relativity { right: 6%; top: 57%; }
  .node-quantum { left: 39%; top: 76%; }
  .node-cosmos { left: 38%; top: 34%; }
}

/* 物理三级知识页 */
.physics-topic-body {
  --topic-a: #8edcff;
  --topic-b: #24558d;
  --topic-glow: rgba(77, 181, 255, .4);
  background: #020713;
  color: #eef8ff;
}

.physics-topic-body.topic-em { --topic-a: #d6b4ff; --topic-b: #6540a7; --topic-glow: rgba(168, 98, 255, .45); }
.physics-topic-body.topic-thermo { --topic-a: #ffd48d; --topic-b: #a94429; --topic-glow: rgba(255, 117, 57, .42); }
.physics-topic-body.topic-relativity { --topic-a: #7fcfff; --topic-b: #244998; --topic-glow: rgba(56, 131, 255, .48); }
.physics-topic-body.topic-quantum { --topic-a: #ffc1f3; --topic-b: #713987; --topic-glow: rgba(224, 84, 255, .43); }
.physics-topic-body.topic-cosmos { --topic-a: #d9f2ff; --topic-b: #38699c; --topic-glow: rgba(109, 191, 255, .45); }

.physics-topic-main {
  min-height: 100vh;
  padding: 128px clamp(24px, 6vw, 104px) 80px;
  background:
    radial-gradient(circle at 74% 24%, var(--topic-glow), transparent 22%),
    linear-gradient(120deg, rgba(1,6,17,.97), rgba(4,15,34,.8)),
    url("./assets/physics-galaxy-world.png") center / cover fixed;
}

.topic-breadcrumb {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(218, 237, 251, .66);
  font-size: 14px;
  letter-spacing: .12em;
}

.topic-breadcrumb a { color: #f3d890; }

.topic-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 42vw);
  align-items: center;
  min-height: 60vh;
  gap: 5vw;
}

.topic-heading .eyebrow {
  margin: 0 0 20px;
  color: var(--topic-a);
  letter-spacing: .38em;
}

.topic-heading h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(64px, 10vw, 156px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: .06em;
  text-shadow: 0 0 46px var(--topic-glow);
}

.topic-heading p {
  max-width: 620px;
  margin: 30px 0 0;
  color: rgba(226, 240, 250, .72);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 2;
}

.topic-planet {
  position: relative;
  justify-self: center;
  width: min(30vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95), transparent 8%),
    repeating-linear-gradient(165deg, transparent 0 11%, rgba(255,255,255,.055) 12% 14%, transparent 16% 24%),
    radial-gradient(circle at 36% 31%, var(--topic-a), var(--topic-b) 45%, #050c1b 80%);
  box-shadow: inset -55px -70px 90px rgba(0,0,0,.64), inset 24px 18px 38px rgba(255,255,255,.14), 0 0 60px var(--topic-glow), 0 0 150px rgba(46,112,255,.13);
  animation: topicPlanetFloat 9s ease-in-out infinite;
}

.topic-planet::before {
  content: "";
  position: absolute;
  width: min(42vw, 580px);
  aspect-ratio: 2.8;
  margin: 28% 0 0 50%;
  border: 2px solid rgba(208, 239, 255, .35);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-14deg);
}

.topic-sections {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1500px;
  margin: 20px auto 0;
}

.topic-card {
  min-height: 230px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(214, 239, 255, .13);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 70px rgba(0,0,0,.28);
  backdrop-filter: blur(24px) saturate(1.2);
}

.topic-card span {
  color: var(--topic-a);
  font: 600 12px/1 sans-serif;
  letter-spacing: .24em;
}

.topic-card h2 {
  margin: 20px 0 14px;
  font-size: clamp(23px, 2vw, 34px);
  font-weight: 500;
}

.topic-card p {
  margin: 0;
  color: rgba(219, 235, 247, .68);
  line-height: 1.9;
}

@keyframes topicPlanetFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -22px, 0) rotate(2deg); }
}

@media (max-width: 820px) {
  .physics-topic-main { padding-top: 110px; }
  .topic-hero { grid-template-columns: 1fr; padding: 48px 0; text-align: center; }
  .topic-heading p { margin-inline: auto; }
  .topic-planet { width: min(64vw, 330px); }
  .topic-planet::before { width: min(86vw, 470px); }
  .topic-sections { grid-template-columns: 1fr; }
}

/* 真实电影级行星素材：替换CSS塑料球 */
.physics-node {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.46)) drop-shadow(0 0 16px var(--planet-glow));
  overflow: visible !important;
}

.physics-node::before,
.physics-node::after {
  display: none !important;
}

.physics-node b {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(1, 6, 17, .26);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  backdrop-filter: blur(5px);
  font-size: clamp(16px, 1.45vw, 25px) !important;
  letter-spacing: .17em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.96), 0 0 22px rgba(210,242,255,.68);
}

.physics-node:hover,
.physics-node:focus-visible {
  filter: brightness(1.14) saturate(1.12) drop-shadow(0 22px 26px rgba(0,0,0,.5)) drop-shadow(0 0 30px var(--planet-glow));
  box-shadow: none !important;
}

.node-mechanics {
  --planet-size: clamp(150px, 13vw, 220px);
  background-image: url("./assets/physics-planet-mechanics.png") !important;
}

.node-em {
  --planet-size: clamp(132px, 11vw, 188px);
  background-image: url("./assets/physics-planet-em.png") !important;
}

.node-thermal {
  --planet-size: clamp(116px, 9.5vw, 162px);
  background-image: url("./assets/physics-planet-thermal.png") !important;
}

.node-relativity {
  --planet-size: clamp(170px, 15vw, 252px);
  background-image: url("./assets/physics-planet-relativity.png") !important;
}

.node-quantum {
  --planet-size: clamp(92px, 7.5vw, 128px);
  background-image: url("./assets/physics-planet-quantum.png") !important;
}

.node-cosmos {
  --planet-size: clamp(210px, 19vw, 320px);
  background-image: url("./assets/physics-planet-cosmos.png") !important;
}

.topic-planet {
  border-radius: 0;
  background: center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.48)) drop-shadow(0 0 44px var(--topic-glow));
}

.topic-planet::before { display: none; }
.topic-mechanics .topic-planet { background-image: url("./assets/physics-planet-mechanics.png"); }
.topic-em .topic-planet { background-image: url("./assets/physics-planet-em.png"); }
.topic-thermo .topic-planet { background-image: url("./assets/physics-planet-thermal.png"); }
.topic-relativity .topic-planet { background-image: url("./assets/physics-planet-relativity.png"); }
.topic-quantum .topic-planet { background-image: url("./assets/physics-planet-quantum.png"); }
.topic-cosmos .topic-planet { background-image: url("./assets/physics-planet-cosmos.png"); }

@media (max-width: 760px) {
  .node-mechanics { --planet-size: clamp(112px, 31vw, 150px); }
  .node-em { --planet-size: clamp(94px, 26vw, 128px); }
  .node-thermal { --planet-size: clamp(88px, 23vw, 112px); }
  .node-relativity { --planet-size: clamp(124px, 34vw, 166px); }
  .node-quantum { --planet-size: clamp(72px, 19vw, 94px); }
  .node-cosmos { --planet-size: clamp(154px, 42vw, 210px); }
  .physics-node b { font-size: 15px !important; padding: 4px 8px; }
}

/* 首页传送门动态：移除下载入口，让玻璃圆环真正旋转 */
.home-body .download-gate {
  display: none !important;
}

.home-body .home-vortex {
  display: block !important;
  left: 77%;
  right: auto;
  top: 49%;
  z-index: 1;
  width: min(48vw, 760px);
  translate: -50% -50%;
  opacity: .92;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgba(199, 242, 255, .22));
}

.home-body .home-vortex::before {
  inset: -5%;
  opacity: .68;
  background:
    conic-gradient(from 30deg,
      transparent 0 8%, rgba(236,251,255,.72) 9%, transparent 10% 27%,
      rgba(255,224,157,.46) 28%, transparent 30% 52%,
      rgba(185,232,255,.58) 53%, transparent 55% 76%,
      rgba(255,255,255,.76) 77%, transparent 79% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: portalGlassTurn 18s linear infinite;
}

.home-body .home-vortex::after {
  inset: 9%;
  border: 0;
  background:
    conic-gradient(from 120deg,
      transparent 0 13%, rgba(255,236,188,.72) 14%, transparent 16% 38%,
      rgba(207,247,255,.7) 39%, transparent 41% 68%,
      rgba(255,255,255,.72) 69%, transparent 71% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  box-shadow: none;
  animation: portalGlassTurnReverse 12s linear infinite;
}

.home-body .vortex-ring {
  border: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.08), rgba(217,247,255,.72) 3%, transparent 5% 21%,
      rgba(255,226,166,.48) 23%, transparent 26% 47%,
      rgba(198,239,255,.72) 49%, transparent 52% 73%,
      rgba(255,255,255,.56) 75%, transparent 78% 96%, rgba(225,249,255,.58));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
  box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(199, 241, 255, .64));
  opacity: .82;
  animation-name: portalGlassTurn;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.home-body .vr-1 {
  inset: 2%;
  transform: rotateY(7deg) rotateZ(-5deg);
  animation-duration: 16s;
}

.home-body .vr-2 {
  inset: 14%;
  transform: rotateX(58deg) rotateY(26deg) rotateZ(18deg);
  animation-name: portalGlassTurnReverse;
  animation-duration: 10s;
  opacity: .7;
}

.home-body .vr-3 {
  inset: 25%;
  transform: rotateX(72deg) rotateY(-18deg) rotateZ(-28deg);
  animation-duration: 6.5s;
  opacity: .88;
}

.home-body .vr-4 {
  inset: 34%;
  transform: rotateX(30deg) rotateY(62deg) rotateZ(12deg);
  animation-name: portalGlassTurnReverse;
  animation-duration: 4.8s;
  opacity: .76;
}

.home-body .vortex-core {
  display: none;
}

.home-body .home-portal-flares { z-index: 2; }
.home-body .home-gates { z-index: 3; }

@keyframes portalGlassTurn {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes portalGlassTurnReverse {
  from { rotate: 360deg; }
  to { rotate: 0deg; }
}

@media (max-width: 960px) {
  .home-body .home-vortex {
    left: 62%;
    top: 49%;
    width: min(72vw, 680px);
  }
}

@media (max-width: 680px) {
  .home-body .home-vortex {
    left: 60%;
    top: 48%;
    width: 92vw;
    opacity: .78;
  }
}

/* 首页透明WebM圆环视频 */
.home-portal-video {
  position: absolute;
  left: 77%;
  top: 49%;
  z-index: 1;
  width: min(50vw, 790px);
  aspect-ratio: 1;
  translate: -50% -50%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(198, 244, 255, .24));
  transition: opacity 1.4s ease;
}

.home-body.portal-video-ready .home-portal-video {
  opacity: .96;
}

.home-body.portal-video-ready .home-vortex {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

@media (max-width: 960px) {
  .home-portal-video {
    left: 62%;
    top: 49%;
    width: min(74vw, 700px);
  }
}

@media (max-width: 680px) {
  .home-portal-video {
    left: 60%;
    top: 48%;
    width: 94vw;
    opacity: 0;
  }

  .home-body.portal-video-ready .home-portal-video { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .home-portal-video { display: none !important; }
  .home-body.portal-video-ready .home-vortex {
    opacity: .72;
    visibility: visible;
  }
  .home-body .home-vortex *,
  .home-body .home-vortex::before,
  .home-body .home-vortex::after {
    animation-play-state: paused !important;
  }
}

/* 数学与人工智能入口：实体化悬浮装置，避免复杂背景中的透明丢失 */
.math-node {
  --node-metal-a: #18345b;
  --node-metal-b: #07101f;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.72)) drop-shadow(0 0 18px var(--node-glow));
}

.math-node::before {
  width: 78%;
  border: 2px solid rgba(220,244,255,.82);
  background:
    radial-gradient(circle at 34% 23%, rgba(255,255,255,.92) 0 2%, rgba(255,255,255,.22) 3% 9%, transparent 16%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 28%, rgba(91,159,224,.12) 48%, transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 16px, rgba(133,192,244,.07) 17px 18px, transparent 19px 31px),
    linear-gradient(150deg, var(--node-metal-a), var(--node-metal-b) 65%, #020611);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 10px 12px 22px rgba(93,163,225,.18),
    inset -18px -20px 32px rgba(0,0,0,.72),
    0 0 0 4px rgba(8,19,39,.76),
    0 0 0 5px rgba(205,238,255,.2),
    0 0 34px var(--node-glow);
  backdrop-filter: none;
}

.math-node::after {
  border-width: 2px;
  border-color: rgba(238,249,255,.86);
  border-left-color: rgba(245,208,132,.72);
  border-right-color: rgba(114,201,255,.72);
  opacity: .9;
  box-shadow: 0 0 8px #d9f5ff, 0 0 20px var(--node-glow);
}

.math-node span {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 2px #000, 0 0 8px #fff, 0 0 25px var(--node-glow);
}

.math-node b {
  min-width: 74%;
  padding: 5px 10px 6px;
  color: #f8fbff;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(3,10,24,.92) 18% 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--node-glow) 65%, white 18%);
  text-shadow: 0 2px 5px #000, 0 0 10px var(--node-glow);
}

.math-linear { --node-metal-a: #292657; --node-metal-b: #09091d; }
.math-analysis { --node-metal-a: #45371f; --node-metal-b: #100b05; }
.math-topology { --node-metal-a: #123753; --node-metal-b: #06101e; }
.math-probability { --node-metal-a: #352455; --node-metal-b: #0c081c; }
.math-number { --node-metal-a: #493819; --node-metal-b: #100b04; }

.ai-node {
  --ai-metal-a: #17365b;
  --ai-metal-b: #06101f;
  filter: drop-shadow(0 17px 22px rgba(0,0,0,.74)) drop-shadow(0 0 18px var(--ai-glow));
}

.ai-node::before {
  width: 82%;
  height: 72%;
  border: 2px solid rgba(222,246,255,.86);
  background:
    radial-gradient(circle at 50% 48%, #fff 0 2%, color-mix(in srgb, var(--ai-glow) 76%, white 12%) 4%, transparent 15%),
    linear-gradient(134deg, rgba(255,255,255,.2), transparent 25%, rgba(92,167,231,.13) 48%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(208,241,255,.1) 14% 15%, transparent 16% 25%),
    linear-gradient(150deg, var(--ai-metal-a), var(--ai-metal-b) 66%, #020611);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 12px 12px 22px rgba(103,179,238,.18),
    inset -18px -20px 32px rgba(0,0,0,.76),
    0 0 0 4px rgba(5,14,31,.82),
    0 0 0 5px rgba(211,241,255,.22),
    0 0 36px var(--ai-glow);
  backdrop-filter: none;
}

.ai-node::after {
  border-width: 2px;
  border-color: rgba(224,247,255,.9);
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow: 0 0 8px #daf7ff, 0 0 22px var(--ai-glow);
  opacity: .94;
}

.ai-node span {
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 2px #000, 0 0 8px #fff, 0 0 24px var(--ai-glow);
}

.ai-node b {
  min-width: 78%;
  padding: 5px 10px 6px;
  color: #f7fbff;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(2,9,22,.94) 18% 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ai-glow) 68%, white 18%);
  text-shadow: 0 2px 5px #000, 0 0 10px var(--ai-glow);
}

.ai-ml { --ai-metal-a: #153a58; --ai-metal-b: #05101e; }
.ai-dl { --ai-metal-a: #30265b; --ai-metal-b: #0a081d; }
.ai-llm { --ai-metal-a: #49391e; --ai-metal-b: #100b05; }
.ai-agent { --ai-metal-a: #113b52; --ai-metal-b: #05111d; }
.ai-practice { --ai-metal-a: #342554; --ai-metal-b: #0b081c; }

@media (max-width: 760px) {
  .math-node::before,
  .ai-node::before { border-width: 1px; }
  .math-node b,
  .ai-node b { padding-inline: 5px; }
}

/* 人工智能入口改用电影级真实渲染装置 */
.ai-node {
  --ai-icon: none;
  width: clamp(164px, 13vw, 232px);
  height: clamp(142px, 11vw, 196px);
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.76)) drop-shadow(0 0 18px var(--ai-glow));
  isolation: isolate;
}

.ai-node::before {
  z-index: 2;
  top: -4%;
  width: 100%;
  height: 88%;
  border: 0;
  clip-path: none !important;
  background: var(--ai-icon) center / contain no-repeat;
  box-shadow: none;
  backdrop-filter: none;
  filter: saturate(1.08) contrast(1.05) brightness(1.05) drop-shadow(0 0 11px var(--ai-glow));
  animation: aiArtifactPulse 3.8s ease-in-out infinite;
}

.ai-node::after {
  z-index: 1;
  top: 28%;
  width: 108%;
  height: 24%;
  opacity: .68;
  border-width: 1px;
  box-shadow: 0 0 9px var(--ai-glow);
}

.ai-node span { display: none; }

.ai-node b {
  z-index: 4;
  bottom: 0;
  min-width: 70%;
  padding: 6px 15px 7px;
  font-size: clamp(13px, .92vw, 16px);
  background: linear-gradient(90deg, transparent, rgba(1,7,18,.98) 16% 84%, transparent);
  border-bottom-color: rgba(183,230,255,.78);
}

.ai-overview { --ai-icon: url("./assets/ai-icon-overview.png"); }
.ai-ml { --ai-icon: url("./assets/ai-icon-ml.png"); }
.ai-dl { --ai-icon: url("./assets/ai-icon-dl.png"); }
.ai-llm { --ai-icon: url("./assets/ai-icon-llm.png"); width: clamp(188px, 15vw, 272px); }
.ai-agent { --ai-icon: url("./assets/ai-icon-agent.png"); }
.ai-practice { --ai-icon: url("./assets/ai-icon-practice.png"); width: clamp(190px, 15.5vw, 280px); }

@keyframes aiArtifactPulse {
  0%, 100% { filter: saturate(1.02) contrast(1.04) brightness(.94) drop-shadow(0 0 8px var(--ai-glow)); }
  48% { filter: saturate(1.2) contrast(1.08) brightness(1.18) drop-shadow(0 0 22px var(--ai-glow)); }
}

@media (max-width: 760px) {
  .ai-node,
  .ai-llm,
  .ai-practice { width: clamp(112px, 31vw, 146px); height: clamp(104px, 29vw, 138px); }
  .ai-node b { font-size: 11px; padding: 4px 6px 5px; }
}

/* 数学入口改为高对比度黑金符文舱，不再使用透明圆形仪器 */
.math-node {
  width: clamp(172px, 13vw, 230px);
  height: clamp(84px, 7vw, 118px);
  filter: drop-shadow(0 17px 18px rgba(0,0,0,.78)) drop-shadow(0 0 14px var(--node-glow));
}

.math-node::before {
  top: 0;
  width: 100%;
  height: 78%;
  translate: -50% 0;
  border: 2px solid rgba(230,244,255,.72);
  border-radius: 0 !important;
  clip-path: polygon(9% 0, 86% 0, 100% 50%, 87% 100%, 8% 100%, 0 72%, 0 22%);
  background:
    linear-gradient(112deg, rgba(255,255,255,.2), transparent 23%, rgba(77,146,211,.12) 48%, transparent 70%),
    linear-gradient(180deg, #1c3658 0%, #091426 48%, #020711 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    inset 0 -18px 24px rgba(0,0,0,.6),
    inset 16px 0 24px rgba(91,172,235,.12),
    0 0 0 4px rgba(2,8,18,.86),
    0 0 0 5px rgba(214,239,255,.19),
    0 0 28px var(--node-glow);
}

.math-node::after {
  top: 72%;
  left: 8%;
  width: 84%;
  height: 2px;
  translate: 0 0;
  border: 0;
  border-radius: 0;
  transform: none !important;
  background: linear-gradient(90deg, transparent, #fff 18%, color-mix(in srgb, var(--node-glow) 80%, white 10%) 50%, #f1c977 82%, transparent);
  box-shadow: 0 0 8px #fff, 0 0 18px var(--node-glow);
  animation: mathSigilScan 3.8s ease-in-out infinite;
}

.math-node span {
  position: absolute;
  left: 16%;
  top: 19%;
  margin: 0;
  font-size: clamp(28px, 2.3vw, 42px);
  line-height: 1;
}

.math-node b {
  left: 41%;
  top: 27%;
  bottom: auto;
  min-width: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(13px, .92vw, 16px);
  text-align: left;
  background: none;
  border: 0;
}

.math-linear::before { clip-path: polygon(0 30%, 12% 0, 88% 0, 100% 30%, 94% 100%, 8% 100%); }
.math-analysis::before { clip-path: polygon(13% 0, 100% 0, 92% 100%, 0 100%, 7% 50%); }
.math-topology::before { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 10% 50%); }
.math-probability::before { clip-path: polygon(12% 0, 88% 0, 100% 25%, 94% 100%, 0 100%, 0 26%); }
.math-number::before { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); }

@keyframes mathSigilScan {
  0%, 100% { opacity: .45; scale: .55 1; transform-origin: left center; }
  50% { opacity: 1; scale: 1 1; filter: brightness(1.8); }
}

@media (max-width: 760px) {
  .math-node { width: clamp(126px, 36vw, 158px); height: clamp(72px, 21vw, 90px); }
  .math-node span { left: 14%; top: 19%; font-size: 28px; }
  .math-node b { left: 39%; top: 28%; font-size: 11px; letter-spacing: .1em; }
}

/* 物理知识卡片升级为可进入的深度入口 */
a.topic-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: translate .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

a.topic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 45%, rgba(203,239,255,.12) 50%, transparent 55%);
  translate: -120% 0;
  transition: translate .65s ease;
}

a.topic-card::after {
  content: "进入详解  →";
  position: absolute;
  right: 28px;
  bottom: 22px;
  color: var(--topic-a);
  font-size: 12px;
  letter-spacing: .14em;
  opacity: .72;
}

a.topic-card:hover,
a.topic-card:focus-visible {
  translate: 0 -10px;
  border-color: color-mix(in srgb, var(--topic-a) 48%, transparent);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 32px 80px rgba(0,0,0,.42), 0 0 34px var(--topic-glow);
  outline: none;
}

a.topic-card:hover::before,
a.topic-card:focus-visible::before { translate: 120% 0; }

/* 第四级物理知识详解 */
.physics-detail-body {
  min-height: 100vh;
  color: #edf8ff;
  background: #020713;
}

.physics-detail-main {
  min-height: 100vh;
  padding: 124px clamp(24px, 6vw, 104px) 90px;
  background:
    radial-gradient(circle at 78% 18%, rgba(73,165,255,.2), transparent 25%),
    linear-gradient(120deg, rgba(1,7,20,.97), rgba(4,18,42,.72)),
    url("./assets/physics-galaxy-world.png") center / cover fixed;
}

.detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: rgba(217,236,249,.62);
  font-size: 14px;
  letter-spacing: .1em;
}

.detail-breadcrumb a { color: #f2d48b; text-decoration: none; }

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .72fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  min-height: 58vh;
}

.detail-heading .eyebrow {
  margin: 0 0 22px;
  color: #8ddfff;
  letter-spacing: .34em;
}

.detail-heading h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(58px, 8vw, 128px);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(83,178,255,.35);
}

.detail-heading > p:last-child {
  max-width: 820px;
  margin: 30px 0 0;
  color: rgba(223,238,249,.74);
  font-size: clamp(16px, 1.28vw, 20px);
  line-height: 2;
}

.detail-formula {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 36px;
  border: 1px solid rgba(187,228,255,.26);
  clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%);
  background: linear-gradient(145deg, rgba(26,62,108,.82), rgba(3,13,31,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.26), inset 0 0 70px rgba(90,174,255,.1), 0 30px 80px rgba(0,0,0,.42), 0 0 55px rgba(73,159,255,.2);
  text-align: center;
}

.detail-formula span {
  color: #8edfff;
  font-size: 11px;
  letter-spacing: .28em;
}

.detail-formula strong {
  display: block;
  margin: 22px 0;
  color: #fff;
  font: 500 clamp(28px, 3.6vw, 58px)/1.25 Georgia, "Times New Roman", serif;
  text-shadow: 0 0 12px #fff, 0 0 30px rgba(91,188,255,.72);
}

.detail-formula small { color: rgba(222,238,249,.66); line-height: 1.7; }

.detail-chapters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1600px;
  margin: 10px auto 0;
}

.detail-chapter {
  position: relative;
  min-height: 330px;
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid rgba(191,229,255,.14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(24,52,91,.76), rgba(3,12,29,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 28px 72px rgba(0,0,0,.32);
  overflow: hidden;
}

.detail-chapter > span {
  position: absolute;
  right: 26px;
  top: 16px;
  color: rgba(139,217,255,.13);
  font: 600 clamp(54px, 6vw, 94px)/1 Georgia, serif;
}

.detail-chapter h2 {
  position: relative;
  margin: 0 0 18px;
  color: #effaff;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
}

.detail-chapter p,
.detail-chapter li {
  position: relative;
  color: rgba(219,235,247,.72);
  font-size: 15px;
  line-height: 1.9;
}

.detail-chapter ul { margin: 20px 0 0; padding-left: 1.2em; }
.detail-chapter li::marker { color: #79d8ff; }

.detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1600px;
  margin: 38px auto 0;
}

.detail-summary > div {
  padding: 28px 30px;
  border-top: 1px solid rgba(129,211,255,.38);
  background: linear-gradient(180deg, rgba(38,79,127,.16), transparent);
}

.detail-summary span { color: #91ddff; font-size: 12px; letter-spacing: .2em; }
.detail-summary p { margin: 14px 0 0; color: rgba(219,235,247,.7); line-height: 1.85; }

@media (max-width: 880px) {
  .detail-hero { grid-template-columns: 1fr; padding: 60px 0; }
  .detail-formula { min-height: 220px; }
  .detail-chapters, .detail-summary { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .physics-detail-main { padding: 106px 14px 60px; }
  .detail-heading h1 { font-size: clamp(50px, 18vw, 76px); }
  .detail-chapter { min-height: 0; border-radius: 22px; }
}

/* 人工智能三级知识页 */
.ai-detail-body { min-height: 100vh; color: #eefaff; background: #020818; }

.ai-detail-main {
  min-height: 100vh;
  padding: 124px clamp(24px, 6vw, 104px) 90px;
  background:
    radial-gradient(circle at 75% 20%, rgba(73,165,255,.2), transparent 25%),
    linear-gradient(120deg, rgba(1,7,20,.96), rgba(3,18,43,.62)),
    url("./assets/ai-neural-cathedral.png") center / cover fixed;
}

.ai-detail-breadcrumb { display:flex; align-items:center; gap:10px; color:rgba(216,237,250,.62); font-size:14px; letter-spacing:.1em; }
.ai-detail-breadcrumb a { color:#f1d287; text-decoration:none; }

.ai-detail-hero {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  align-items:center;
  gap:clamp(36px,7vw,110px);
  min-height:60vh;
}

.ai-detail-heading .eyebrow { margin:0 0 22px; color:#8be3ff; letter-spacing:.34em; }
.ai-detail-heading h1 { margin:0; font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(56px,8vw,126px); font-weight:500; line-height:1; letter-spacing:.04em; text-shadow:0 0 42px rgba(88,188,255,.4); }
.ai-detail-heading > p:last-child { max-width:800px; margin:30px 0 0; color:rgba(222,239,250,.75); font-size:clamp(16px,1.3vw,20px); line-height:2; }

.ai-detail-artifact {
  position:relative;
  display:grid;
  place-items:center;
  min-height:390px;
  isolation:isolate;
}

.ai-detail-artifact::before,
.ai-detail-artifact::after {
  content:"";
  position:absolute;
  width:92%;
  height:34%;
  border:1px solid rgba(170,228,255,.55);
  border-left-color:transparent;
  border-right-color:transparent;
  border-radius:50%;
  rotate:-15deg;
  box-shadow:0 0 20px rgba(105,195,255,.35);
  animation:aiDetailOrbit 11s linear infinite;
}
.ai-detail-artifact::after { width:72%; height:55%; rotate:47deg; animation-direction:reverse; animation-duration:8s; }
.ai-detail-artifact img { position:relative; z-index:2; width:min(33vw,440px); max-height:420px; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(0,0,0,.65)) drop-shadow(0 0 24px rgba(85,183,255,.52)); animation:aiDetailArtifactFloat 7s ease-in-out infinite; }
.ai-detail-artifact span { position:absolute; z-index:3; bottom:2%; padding:7px 20px; color:#a5e8ff; font-size:11px; letter-spacing:.28em; border-bottom:1px solid rgba(139,220,255,.55); background:linear-gradient(90deg,transparent,rgba(2,10,25,.92),transparent); }

.ai-detail-chapters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:1600px; margin:10px auto 0; }
.ai-detail-chapter { position:relative; min-height:320px; padding:clamp(28px,3vw,46px); overflow:hidden; border:1px solid rgba(174,224,255,.16); border-radius:28px; background:linear-gradient(145deg,rgba(19,51,91,.82),rgba(3,12,29,.92)); box-shadow:inset 0 1px rgba(255,255,255,.11),0 28px 72px rgba(0,0,0,.34); }
.ai-detail-chapter > span { position:absolute; right:25px; top:15px; color:rgba(129,213,255,.13); font:600 clamp(54px,6vw,92px)/1 Georgia,serif; }
.ai-detail-chapter h2 { position:relative; margin:0 0 18px; color:#f1fbff; font-size:clamp(24px,2vw,34px); font-weight:500; }
.ai-detail-chapter p,.ai-detail-chapter li { position:relative; color:rgba(219,236,248,.72); font-size:15px; line-height:1.9; }
.ai-detail-chapter ul { margin:20px 0 0; padding-left:1.2em; }
.ai-detail-chapter li::marker { color:#79dcff; }

.ai-detail-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1600px; margin:38px auto 0; }
.ai-detail-summary > div { padding:28px 30px; border-top:1px solid rgba(126,214,255,.4); background:linear-gradient(180deg,rgba(38,84,133,.18),transparent); }
.ai-detail-summary span { color:#91e2ff; font-size:12px; letter-spacing:.2em; }
.ai-detail-summary p { margin:14px 0 0; color:rgba(219,236,248,.7); line-height:1.85; }

@keyframes aiDetailOrbit { to { rotate:345deg; } }
@keyframes aiDetailArtifactFloat { 0%,100% { translate:0 0; filter:drop-shadow(0 24px 28px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(85,183,255,.42)); } 50% { translate:0 -20px; filter:drop-shadow(0 32px 34px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(99,195,255,.72)); } }

@media (max-width:880px) {
  .ai-detail-hero { grid-template-columns:1fr; padding:58px 0; }
  .ai-detail-artifact { min-height:300px; }
  .ai-detail-artifact img { width:min(72vw,390px); max-height:330px; }
  .ai-detail-chapters,.ai-detail-summary { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .ai-detail-main { padding:106px 14px 60px; }
  .ai-detail-heading h1 { font-size:clamp(48px,17vw,72px); }
  .ai-detail-chapter { min-height:0; border-radius:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .ai-detail-artifact::before,.ai-detail-artifact::after,.ai-detail-artifact img { animation-play-state:paused !important; }
}

/* 数学与 AI 三级章节升级为四级入口 */
.math-topic-body a.topic-card,
a.ai-detail-chapter {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: translate .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
}

.math-topic-body a.topic-card::after,
a.ai-detail-chapter::after {
  content: "进入四级详解  →";
  position: absolute;
  right: 26px;
  bottom: 20px;
  color: #91e2ff;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .72;
}

.math-topic-body a.topic-card:hover,
.math-topic-body a.topic-card:focus-visible,
a.ai-detail-chapter:hover,
a.ai-detail-chapter:focus-visible {
  translate: 0 -9px;
  border-color: rgba(139,222,255,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 34px 82px rgba(0,0,0,.44), 0 0 32px rgba(80,176,255,.18);
  filter: brightness(1.1);
  outline: none;
}

/* 第四级知识界面 */
.concept-body { min-height:100vh; color:#eff9ff; background:#020713; }
.concept-main { min-height:100vh; padding:124px clamp(24px,6vw,104px) 90px; }
.math-concept-main { background:radial-gradient(circle at 76% 22%,rgba(103,137,255,.2),transparent 25%),linear-gradient(120deg,rgba(1,7,20,.96),rgba(5,18,43,.64)),url("./assets/math-crystal-universe.png") center/cover fixed; }
.ai-concept-main { background:radial-gradient(circle at 76% 22%,rgba(83,177,255,.2),transparent 25%),linear-gradient(120deg,rgba(1,7,20,.96),rgba(4,20,45,.62)),url("./assets/ai-neural-cathedral.png") center/cover fixed; }
.concept-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:rgba(218,237,250,.62); font-size:14px; letter-spacing:.1em; }
.concept-breadcrumb a { color:#f0d28a; text-decoration:none; }
.concept-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.72fr); align-items:center; gap:clamp(40px,7vw,110px); min-height:58vh; }
.concept-hero .eyebrow { margin:0 0 22px; color:#8de3ff; letter-spacing:.32em; }
.concept-hero h1 { margin:0; font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(52px,7.5vw,116px); font-weight:500; line-height:1.05; letter-spacing:.04em; text-shadow:0 0 42px rgba(87,185,255,.38); }
.concept-hero > div:first-child > p:last-child { max-width:800px; margin:28px 0 0; color:rgba(222,238,249,.74); font-size:clamp(16px,1.25vw,20px); line-height:2; }

.concept-symbol {
  justify-self:center;
  display:grid;
  place-items:center;
  width:min(28vw,360px);
  aspect-ratio:1;
  clip-path:polygon(50% 0,88% 18%,100% 55%,76% 100%,24% 100%,0 55%,12% 18%);
  border:2px solid rgba(229,246,255,.76);
  background:linear-gradient(145deg,#203b63,#091426 58%,#020611);
  box-shadow:inset 0 1px rgba(255,255,255,.5),inset -30px -32px 48px rgba(0,0,0,.62),0 0 0 6px rgba(4,12,27,.78),0 0 60px rgba(89,174,255,.38);
  color:#fff;
  font:500 clamp(62px,9vw,130px)/1 Georgia,serif;
  text-shadow:0 0 12px #fff,0 0 34px #79cfff;
  animation:conceptSymbolFloat 7s ease-in-out infinite;
}

.concept-artifact { position:relative; justify-self:center; display:grid; place-items:center; width:min(34vw,430px); aspect-ratio:1; }
.concept-artifact::before { content:""; position:absolute; width:110%; height:34%; border:1px solid rgba(169,228,255,.58); border-left-color:transparent; border-right-color:transparent; border-radius:50%; rotate:-18deg; box-shadow:0 0 18px rgba(97,195,255,.36); animation:aiDetailOrbit 9s linear infinite; }
.concept-artifact img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(0,0,0,.7)) drop-shadow(0 0 24px rgba(86,188,255,.5)); animation:aiDetailArtifactFloat 7s ease-in-out infinite; }

.concept-sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1600px; margin:10px auto 0; }
.concept-section { position:relative; min-height:360px; padding:clamp(28px,3vw,44px); overflow:hidden; border:1px solid rgba(183,227,255,.16); border-radius:28px; background:linear-gradient(145deg,rgba(22,54,94,.8),rgba(3,12,29,.92)); box-shadow:inset 0 1px rgba(255,255,255,.11),0 28px 72px rgba(0,0,0,.34); }
.concept-section > span { position:absolute; right:24px; top:16px; color:rgba(133,218,255,.13); font:600 clamp(50px,5vw,82px)/1 Georgia,serif; }
.concept-section h2 { position:relative; margin:0 0 18px; color:#effaff; font-size:clamp(23px,1.8vw,32px); font-weight:500; }
.concept-section p,.concept-section li { position:relative; color:rgba(219,236,248,.72); font-size:15px; line-height:1.9; }
.concept-section ul { margin:20px 0 0; padding-left:1.2em; }
.concept-section li::marker { color:#79dcff; }

/* Level 04 entry portals */
a.detail-chapter,
a.concept-section {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease;
}
a.detail-chapter::after,
a.concept-section::after {
  content: "进入五级界面  →";
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: #9be3ff;
  font-size: 12px;
  letter-spacing: .18em;
}
a.detail-chapter:hover,
a.concept-section:hover {
  transform: translateY(-8px);
  border-color: rgba(142,224,255,.48);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 34px 84px rgba(0,0,0,.48), 0 0 34px rgba(63,181,255,.12);
}

/* Recursive level 05—09 knowledge interface */
.deep-body {
  min-height: 100vh;
  overflow-x: hidden;
  color: #eef8ff;
  background: #020713;
}
.deep-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  filter: saturate(1.08) brightness(.42);
  transform: scale(1.035);
}
.deep-physics::before { background-image: linear-gradient(100deg,rgba(1,7,20,.9),rgba(2,9,25,.2)),url("./assets/physics-galaxy-world.png"); }
.deep-math::before { background-image: linear-gradient(100deg,rgba(1,7,20,.86),rgba(5,15,40,.18)),url("./assets/math-crystal-universe.png"); }
.deep-ai::before { background-image: linear-gradient(100deg,rgba(1,7,20,.88),rgba(3,16,34,.2)),url("./assets/ai-neural-cathedral.png"); }
.deep-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 72% 34%,rgba(101,206,255,.15),transparent 24%), linear-gradient(180deg,rgba(2,7,18,.22),#020713 110%);
}
.deep-light-field { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.deep-light-field i { position:absolute; width:1px; height:70vh; left:30%; top:-20%; background:linear-gradient(transparent,rgba(148,224,255,.72),transparent); transform:rotate(36deg); opacity:.32; animation:deepRay 9s ease-in-out infinite; }
.deep-light-field i:nth-child(2) { left:65%; top:-8%; height:100vh; animation-delay:-3s; transform:rotate(57deg); }
.deep-light-field i:nth-child(3) { left:86%; top:12%; height:65vh; animation-delay:-6s; transform:rotate(18deg); }
@keyframes deepRay { 0%,100% { opacity:.08; filter:blur(1px); } 48% { opacity:.65; filter:drop-shadow(0 0 12px #6ed9ff); } }
.deep-main { width:min(1720px,calc(100% - 80px)); margin:0 auto; padding:132px 0 60px; }
.deep-breadcrumb { display:flex; gap:14px; align-items:center; margin:0 0 26px; color:rgba(218,235,248,.5); font-size:13px; letter-spacing:.12em; }
.deep-breadcrumb a { color:#a8dff5; text-decoration:none; }
.deep-hero { position:relative; min-height:315px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:46px clamp(28px,5vw,82px); overflow:hidden; border:1px solid rgba(157,218,255,.2); border-radius:34px; background:linear-gradient(115deg,rgba(4,15,35,.96),rgba(12,40,69,.7) 58%,rgba(10,31,57,.4)); box-shadow:inset 0 1px rgba(255,255,255,.13),0 45px 110px rgba(0,0,0,.45); }
.deep-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,rgba(119,218,255,.1)),repeating-linear-gradient(90deg,transparent 0 89px,rgba(150,218,255,.035) 90px); }
.deep-level-number { position:absolute; right:6%; top:-32%; color:rgba(124,213,255,.07); font:700 clamp(260px,31vw,540px)/1 Arial,sans-serif; letter-spacing:-.09em; }
.deep-heading { position:relative; z-index:1; max-width:900px; }
.deep-heading > p:first-child { margin:0 0 18px; color:#76d8ff; font:600 12px/1.4 Arial,sans-serif; letter-spacing:.38em; }
.deep-heading h1 { margin:0; color:#f5fbff; font-size:clamp(44px,6vw,96px); font-weight:450; letter-spacing:.04em; text-shadow:0 0 36px rgba(125,218,255,.17); }
.deep-heading > p:last-child { max-width:720px; margin:22px 0 0; color:rgba(219,236,247,.67); font-size:clamp(14px,1.2vw,18px); line-height:1.9; }
.deep-level-rail { position:relative; z-index:1; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid rgba(157,218,255,.18); border-radius:999px; background:rgba(2,9,23,.58); backdrop-filter:blur(16px); }
.deep-level-rail span { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; color:rgba(219,239,250,.33); font:600 11px/1 Arial,sans-serif; letter-spacing:.08em; }
.deep-level-rail .passed { color:#8ddfff; }
.deep-level-rail .active { color:#02101e; background:linear-gradient(135deg,#eefcff,#68d7ff); box-shadow:0 0 28px rgba(96,216,255,.48); }
.deep-math .deep-level-rail .active { background:linear-gradient(135deg,#fff5d8,#9ccfff); }
.deep-ai .deep-level-rail .active { background:linear-gradient(135deg,#eaffff,#68efd4); }
.deep-path { display:flex; gap:28px; align-items:center; min-height:70px; padding:0 8px; border-bottom:1px solid rgba(157,218,255,.13); color:rgba(219,236,248,.45); font-size:12px; letter-spacing:.18em; }
.deep-path strong { color:#cfeeff; font-weight:400; letter-spacing:.08em; }
.deep-branches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:28px 0; }
.deep-branch { position:relative; min-height:330px; display:flex; flex-direction:column; padding:clamp(30px,3vw,48px); overflow:hidden; color:inherit; text-decoration:none; border:1px solid rgba(155,218,255,.16); border-radius:28px; background:linear-gradient(145deg,rgba(15,41,70,.96),rgba(3,13,30,.97)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 30px 72px rgba(0,0,0,.34); transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s; }
.deep-branch::before { content:""; position:absolute; width:240px; height:240px; right:-110px; top:-115px; border:1px solid rgba(118,218,255,.22); border-radius:50%; box-shadow:0 0 60px rgba(78,184,255,.08),inset 0 0 40px rgba(78,184,255,.07); }
.deep-branch::after { content:""; position:absolute; left:0; top:0; width:3px; height:0; background:#71dcff; box-shadow:0 0 18px #71dcff; transition:height .55s ease; }
a.deep-branch:hover { transform:translateY(-9px) scale(1.008); border-color:rgba(134,224,255,.48); box-shadow:inset 0 1px rgba(255,255,255,.14),0 42px 100px rgba(0,0,0,.5),0 0 40px rgba(74,190,255,.09); }
a.deep-branch:hover::after { height:100%; }
.deep-branch-code { color:#75d9ff; font:600 12px/1 Arial,sans-serif; letter-spacing:.3em; }
.deep-branch h2 { margin:28px 0 14px; color:#f3faff; font-size:clamp(28px,2.6vw,43px); font-weight:450; letter-spacing:.05em; }
.deep-branch p,.deep-branch li { color:rgba(217,234,246,.65); font-size:14px; line-height:1.85; }
.deep-branch ul { margin:18px 0 30px; padding-left:1.15em; }
.deep-branch li::marker { color:#70d8ff; }
.deep-branch strong { margin-top:auto; color:#a9e7ff; font-size:12px; font-weight:500; letter-spacing:.14em; }
.deep-branches article.deep-branch { border-color:rgba(238,199,113,.22); background:linear-gradient(145deg,rgba(32,42,64,.97),rgba(10,17,31,.98)); }
.deep-branches article.deep-branch::after { height:100%; background:#f0c978; box-shadow:0 0 20px rgba(240,201,120,.65); }
.deep-branches article.deep-branch strong { color:#f0ce87; }
.deep-footer { display:flex; justify-content:space-between; align-items:center; padding:22px 8px 0; color:rgba(211,231,245,.35); font:500 11px/1.4 Arial,sans-serif; letter-spacing:.18em; }
.deep-footer a { color:#a8def3; text-decoration:none; }

@media (max-width: 900px) {
  .deep-main { width:min(100% - 28px,720px); padding-top:100px; }
  .deep-hero { grid-template-columns:1fr; gap:30px; min-height:0; padding:36px 25px; border-radius:25px; }
  .deep-level-number { right:-2%; top:-5%; font-size:230px; }
  .deep-level-rail { width:max-content; max-width:100%; }
  .deep-level-rail span { width:39px; height:39px; }
  .deep-path { align-items:flex-start; flex-direction:column; gap:8px; padding:18px 6px; }
  .deep-branches { grid-template-columns:1fr; }
  .deep-branch { min-height:280px; border-radius:23px; }
}
.concept-route { max-width:1600px; margin:38px auto 0; padding:28px 32px; border-top:1px solid rgba(130,214,255,.42); background:linear-gradient(180deg,rgba(37,82,130,.18),transparent); }
.concept-route span { color:#91e2ff; font-size:12px; letter-spacing:.2em; }
.concept-route p { margin:14px 0 0; color:rgba(219,236,248,.72); line-height:1.9; }

@keyframes conceptSymbolFloat { 0%,100% { translate:0 0; rotate:-1deg; filter:brightness(.94); } 50% { translate:0 -20px; rotate:1deg; filter:brightness(1.2); } }

@media (max-width:960px) {
  .concept-hero { grid-template-columns:1fr; padding:58px 0; }
  .concept-symbol { width:min(68vw,320px); }
  .concept-artifact { width:min(76vw,380px); }
  .concept-sections { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .concept-main { padding:106px 14px 60px; }
  .concept-hero h1 { font-size:clamp(44px,15vw,68px); }
  .concept-section { min-height:0; border-radius:22px; }
}

/* 最终移动端覆盖：放在样式表末尾，确保不被旧桌面规则反向覆盖 */
@media (max-width:760px) {
  .site-header { position:relative; gap:12px; padding:12px 14px; overflow:hidden; }
  .brand { justify-content:center; min-height:36px; font-size:14px; }
  .site-nav { width:100%; justify-content:flex-start; flex-wrap:nowrap; gap:5px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav a { flex:0 0 auto; padding:10px 14px; font-size:13px; white-space:nowrap; }

  .download-body { overflow-y:auto; }
  .download-header { position:relative; }
  .download-stage { min-height:auto; display:block; place-items:initial; padding:14px 0 max(28px,env(safe-area-inset-bottom)); overflow:hidden; }
  .download-stage .artboard { width:100%; min-height:148vw; max-height:none; aspect-ratio:auto; margin:0; overflow:visible; border-radius:0; box-shadow:none; transform:none; }
  .download-stage .scene-image { position:fixed; inset:0; z-index:-2; background-size:auto 100%; background-position:center; opacity:.3; filter:blur(7px) saturate(.85) brightness(.55); transform:scale(1.08); }
  .download-stage .hotspots { position:relative; z-index:8; inset:auto; display:flex; flex-direction:column; gap:16px; padding:0 14px; }
  .download-stage .hotspot { position:relative; left:auto; top:auto; width:100%; height:min(69vw,360px); flex:0 0 auto; clip-path:none; overflow:hidden; border:1px solid rgba(255,224,158,.24); border-radius:25px; background-image:url("./assets/fantasy-house.jpg.png"); background-repeat:no-repeat; background-size:205% auto; box-shadow:inset 0 1px rgba(255,255,255,.1),0 24px 58px rgba(0,0,0,.46); }
  .download-stage .translate-hotspot { left:auto; top:auto; width:100%; height:min(69vw,360px); background-position:left 65%; }
  .download-stage .live-hotspot { left:auto; top:auto; width:100%; height:min(69vw,360px); background-position:right 65%; border-color:rgba(99,220,255,.25); }
  .download-stage .hotspot::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(3,2,2,.24)); pointer-events:none; }
  .download-stage .hotspot-ring { left:7%; right:7%; bottom:5%; height:27%; }
  .download-stage .hotspot-tip { bottom:7%; translate:-50% 0; opacity:1; color:#ffedbf; background:rgba(8,5,3,.68); }
  .download-stage .moon-bloom,.download-stage .book-aura,.download-stage .globe-aura { display:none; }
  .download-stage #magicCanvas,.download-stage .scene-motion { position:absolute; inset:0; width:100%; height:100%; }
  .download-stage .edge-vignette { position:fixed; }
}
/* 备案期间隐藏下载入口；保留下载页面，备案完成后删除本段即可恢复 */
.site-nav a[href="./downloads.html"],
a.download-gate[href="./downloads.html"] {
  display: none !important;
}