/* 首页时间主题、章节分页与全幅地球主视觉 */
html {
  --chapter-nav-top:224px;
  --chapter-nav-height:54px;
  scroll-snap-type:y mandatory; scroll-behavior:smooth; overscroll-behavior-y:contain;
}
:root {
  --canvas:#ffffff;
  --canvas-2:#ffffff;
  --page-bg:#ffffff;
  --home-wallpaper:url('./backgrounds/home-light-6787.jpg');
  --star-opacity:0;
  --glow-opacity:0;
}
html[data-theme="dark"] {
  --canvas:#000000;
  --canvas-2:#000000;
  --page-bg:#000000;
  --home-wallpaper:url('./backgrounds/home-dark-6788.jpg');
  --star-opacity:0;
  --glow-opacity:0;
}
body { max-width:100%; overflow-x:clip; background:#ffffff!important; background-image:none!important; }
html[data-theme="dark"] body { background:#000000!important; background-image:none!important; }
body > .bg { background:var(--canvas)!important; }
body > .bg::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:100vw;
  height:100vh;
  background-image:var(--home-wallpaper);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
body > .bg::after,
body > .bg :is(.stars,.stars2,.glow,.earth-visual) { display:none!important; }

@media (orientation:landscape) {
  html[data-theme="light"] body > .bg::before {
    width:100vh;
    height:100vw;
    transform:translate(-50%,-50%) rotate(-90deg);
  }
  html[data-theme="dark"] body > .bg::before {
    width:100vw;
    height:100vh;
    background-position:center;
    transform:translate(-50%,-50%);
  }
}
.time-pill {
  position: fixed; top: 14px; left: 16px; z-index: 61;
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px;
  color:var(--ink-muted); background:color-mix(in srgb,var(--surface-1) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--edge) 66%,transparent); border-radius:15px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 52%,transparent),0 14px 36px -25px rgba(15,40,90,.58);
  -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%);
}
.time-pill__dot { width: 9px; height: 9px; border-radius: 50%; background: #f6ad34; box-shadow: 0 0 0 5px rgba(246,173,52,.12),0 0 16px rgba(246,173,52,.5); }
html[data-theme="dark"] .time-pill__dot { background:#a9c8ff; box-shadow:0 0 0 5px rgba(169,200,255,.10),0 0 16px rgba(113,159,255,.46); }
.time-pill__copy { display:grid; gap:1px; }
.time-pill__clock { color:var(--ink); font:700 14px/1.2 var(--font-num); letter-spacing:.35px; }
.time-pill__date { font-size:11px; line-height:1.25; }

.theme-choice {
  position:fixed; top:12px; right:16px; z-index:61;
  display:grid; grid-template-columns:repeat(2,58px); gap:5px; padding:5px;
  background:color-mix(in srgb,var(--surface-1) 58%,transparent); border:1px solid color-mix(in srgb,var(--edge) 66%,transparent); border-radius:18px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 52%,transparent),0 14px 36px -25px rgba(15,40,90,.62); -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%);
}
.theme-choice__button {
  min-height:58px; display:grid; justify-items:center; align-content:center; gap:3px;
  color:var(--ink-subtle); font:700 12px/1 var(--font-cn); cursor:pointer;
  border:1px solid transparent; border-radius:13px; background:transparent;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.theme-choice__button:hover { transform:translateY(-1px); color:var(--ink); }
.theme-choice__button:focus-visible { outline:3px solid rgba(14,159,132,.32); outline-offset:2px; }
.theme-choice__button[aria-pressed="true"] { color:var(--ink); border-color:var(--hairline-strong); background:var(--surface-2); box-shadow:inset 0 1px 0 var(--edge),0 5px 14px -10px rgba(14,159,132,.7); }
.theme-choice__orb { width:28px; height:28px; display:block; border-radius:50%; background-position:center; background-size:cover; }
.theme-choice__orb--sun { background-image:radial-gradient(circle at 35% 30%,#fff4bd 0 8%,#ffd266 29%,#f49a25 70%,#d85b17 100%); box-shadow:inset -5px -3px 7px rgba(95,24,0,.28),0 0 12px rgba(255,172,56,.58); }
.theme-choice__orb--moon { background-image:url('./home-orbit-assets/moon-2k.jpg'); box-shadow:inset -7px -3px 8px rgba(0,8,30,.7),0 0 10px rgba(151,192,255,.42); }

body > .bg { z-index:0; pointer-events:none; }
body > .bg::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--canvas) 83%,transparent) 96%); }
.earth-visual { display:none!important; }
.earth-visual.is-dragging { cursor:grabbing; }
#earthHeroCanvas { width:100%; height:100%; display:block; touch-action:none; }
.earth-visual.is-fallback { background:url('../donghua/earth-motion/assets/earth-day.jpg') center 112% / min(64vw,760px) auto no-repeat; }
html[data-theme="dark"] .earth-visual.is-fallback { background-image:url('../donghua/earth-motion/assets/earth-night.jpg'); }

.wrap { position:relative; z-index:2; width:100%; max-width:1200px; padding:0 26px; }
.welcome-stage {
  position:fixed; top:76px; left:50%; z-index:40; transform:translateX(-50%);
  min-height:0; width:min(720px,calc(100vw - 160px)); padding:0;
  display:flex; justify-content:center; border:0; background:transparent; box-shadow:none;
}
.welcome-stage .hero-inner {
  width:max-content; max-width:100%; padding:12px 22px 14px; align-items:center; text-align:center;
  border:1px solid color-mix(in srgb,var(--edge) 58%,transparent); border-radius:20px;
  background:color-mix(in srgb,var(--surface-1) 38%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,white 46%,transparent),0 18px 55px -34px rgba(5,22,54,.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
}
html[data-theme="dark"] .welcome-stage .hero-inner { background:rgba(5,15,34,.28); }
.welcome-stage h1 { margin-bottom:5px; }
.welcome-stage .hero-inner .lead { margin:0 auto; }

.catnav {
  position:fixed; top:224px; left:50%; z-index:39; transform:translateX(-50%);
  width:min(1120px,calc(100vw - 52px)); margin:0; padding:8px 12px;
  display:grid; grid-template-columns:repeat(7,minmax(96px,1fr)); align-items:stretch; gap:8px;
  background:color-mix(in srgb,var(--catnav-bg) 54%,transparent);
  border:1px solid color-mix(in srgb,var(--edge) 62%,transparent); border-radius:16px; box-shadow:inset 0 1px 0 color-mix(in srgb,white 44%,transparent),0 14px 38px -29px rgba(5,22,54,.8);
  -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%);
}
.catnav a {
  min-width:0; min-height:36px; padding:7px 8px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal; line-height:1.25;
}

section {
  height:100vh; height:100svh; min-height:640px; box-sizing:border-box;
  scroll-margin-top:0;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:calc(var(--chapter-nav-top) + var(--chapter-nav-height) - 24px) 0 36px; margin:0;
}
.sec-head { justify-content:center; margin:0 auto 18px; padding:9px 18px; width:max-content; max-width:100%; border:1px solid color-mix(in srgb,var(--edge) 55%,transparent); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface-1) 48%,transparent),color-mix(in srgb,var(--surface-2) 27%,transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb,white 46%,transparent),0 16px 38px -28px rgba(6,24,58,.75); -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%); }
.sec-head .sec-rule { display:none; }
.grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; align-content:center; justify-content:center; width:100%; margin-inline:auto; }
.grid--compact { grid-template-columns:repeat(3,minmax(0,1fr)); width:min(880px,100%); align-self:center; }
a.card { min-height:138px; min-width:0; align-items:center; text-align:center; justify-content:center; border-color:color-mix(in srgb,var(--edge) 52%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--surface-1) 49%,transparent),color-mix(in srgb,var(--surface-2) 26%,transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb,white 44%,transparent),0 18px 44px -34px rgba(5,21,55,.82); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); }
a.card .tag { align-self:center; }
a.card .no { font-size:clamp(9px,.72vw,11px); }
a.card .t { font-size:clamp(14px,1.22vw,18px); line-height:1.3; }
a.card .d { font-size:clamp(11.5px,.94vw,13px); line-height:1.55; }
a.card .tag { font-size:clamp(10px,.78vw,12px); }
html[data-theme="light"] a.card { background:linear-gradient(145deg,rgba(255,255,255,.50),rgba(232,244,255,.27)); }
html[data-theme="dark"] a.card { background:linear-gradient(145deg,rgba(10,27,56,.43),rgba(5,15,34,.25)); }
a.card .t { text-shadow:0 1px 12px color-mix(in srgb,var(--canvas) 18%,transparent); }
a.card .t,a.card .d { max-width:100%; overflow-wrap:anywhere; }
a.card .d { color:color-mix(in srgb,var(--ink) 80%,var(--ink-muted)); }

/* 浅色液态玻璃：提取 liquid-glass-react 的折射边缘、色差高光与指针反馈，
   用原生 CSS 保持当前静态站、离线资源与无构建流程。 */
html[data-theme="light"] {
  --liquid-glass:linear-gradient(118deg,rgba(255,255,255,.82) 0%,rgba(237,250,255,.56) 52%,rgba(201,237,255,.32) 100%);
  --liquid-edge:linear-gradient(118deg,rgba(255,255,255,.98),rgba(73,226,198,.48) 38%,rgba(83,136,255,.32) 72%,rgba(255,255,255,.94));
  --liquid-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 18px 34px -16px rgba(10,51,107,.22),0 2px 8px -5px rgba(12,107,143,.28);
}
html[data-theme="light"] body > .bg::after {
  background:linear-gradient(180deg,rgba(238,248,255,.08) 42%,rgba(238,247,255,.72) 92%,rgba(244,249,253,.94) 100%);
}
html[data-theme="light"] :is(.time-pill,.theme-choice,.welcome-stage .hero-inner,.catnav,.sec-head,a.card) {
  border-color:transparent;
  background:var(--liquid-glass) padding-box,var(--liquid-edge) border-box;
  box-shadow:var(--liquid-shadow);
  -webkit-backdrop-filter:blur(28px) saturate(138%);
  backdrop-filter:blur(28px) saturate(138%);
}
html[data-theme="light"] .time-pill { border-width:1.5px; border-radius:22px; }
html[data-theme="light"] .theme-choice { border-width:1.5px; border-radius:22px; }
html[data-theme="light"] .theme-choice__button { border-radius:16px; }
html[data-theme="light"] .theme-choice__button[aria-pressed="true"] {
  color:#0d5c61; border-color:rgba(79,199,219,.38);
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -15px rgba(34,130,167,.54);
}
html[data-theme="light"] .welcome-stage .hero-inner {
  border-width:1.5px; border-radius:28px; padding:16px 28px 18px;
}
.home-eyebrow {
  margin:0 0 7px; color:var(--primary); font:700 11px/1.2 var(--font-num);
  letter-spacing:.9px; text-transform:uppercase;
}
html[data-theme="light"] .welcome-stage .lead { color:#456180 !important; }
html[data-theme="light"] .catnav { border-width:1.5px; border-radius:23px; padding:8px 12px; }
html[data-theme="light"] .catnav a { padding:8px 10px; border-radius:15px; font-weight:600; }
html[data-theme="light"] .catnav a.active {
  color:#087a66; background:linear-gradient(90deg,rgba(222,255,247,.9),rgba(224,242,255,.76));
  border-color:rgba(23,163,140,.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .sec-head { border-width:1.5px; border-radius:20px; padding:10px 16px; }
html[data-theme="light"] .sec-icon {
  border-color:rgba(255,255,255,.72);
  background:linear-gradient(135deg,#17bca0,#2b7ce8);
  color:white; box-shadow:0 8px 18px -10px rgba(14,159,132,.72),inset 0 1px 0 rgba(255,255,255,.42);
}
html[data-theme="light"] a.card {
  border-width:1.5px; border-radius:26px;
  background:var(--liquid-glass) padding-box,var(--liquid-edge) border-box;
  box-shadow:var(--liquid-shadow);
  transform-style:preserve-3d; will-change:transform;
}
html[data-theme="light"] a.card::before {
  background:
    radial-gradient(250px circle at var(--spot-x,50%) var(--spot-y,0%),rgba(255,255,255,.78),transparent 58%),
    radial-gradient(340px circle at calc(var(--spot-x,50%) + 24px) calc(var(--spot-y,0%) + 8px),rgba(46,210,188,.18),transparent 68%),
    radial-gradient(330px circle at calc(var(--spot-x,50%) - 22px) calc(var(--spot-y,0%) - 6px),rgba(72,124,255,.14),transparent 69%);
}
html[data-theme="light"] a.card::after {
  opacity:.42;
  background:linear-gradient(112deg,rgba(255,255,255,.7),transparent 18% 76%,rgba(91,138,255,.12));
}
html[data-theme="light"] a.card:hover {
  transform:translateY(-5px) perspective(900px) rotateX(var(--glass-tilt-x,0deg)) rotateY(var(--glass-tilt-y,0deg));
  background:linear-gradient(118deg,rgba(255,255,255,.9),rgba(234,250,255,.63),rgba(207,240,255,.4)) padding-box,var(--liquid-edge) border-box;
  border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 24px 42px -20px rgba(10,72,132,.34),0 0 30px -18px rgba(14,159,132,.5);
}
html[data-theme="light"] a.card .tag {
  color:#087866; background:rgba(10,145,122,.1); border-color:rgba(10,145,122,.22);
}
#lab .grid { grid-template-columns:repeat(3,minmax(0,1fr)); width:min(900px,100%); justify-content:center; }
#lab a.card { min-height:156px; padding:20px 16px 18px; align-items:center; text-align:center; }
#lab a.card .tag { align-self:center; padding:6px 13px; font-weight:700; }
footer { min-height:100vh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; text-align:center; }

@media (max-width:900px) {
  .catnav { grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #lab .grid { grid-template-columns:repeat(3,minmax(0,1fr)); width:min(900px,100%); }
}
@media (min-width:901px) and (max-height:760px) {
  html { --chapter-nav-top:168px; }
  .welcome-stage { top:58px; }
  .welcome-stage .hero-inner { padding:8px 18px 10px; }
  .welcome-stage h1 { font-size:27px; }
  .catnav { top:168px; }
  section { min-height:560px; padding-bottom:24px; }
  .sec-head { margin-bottom:12px; padding:7px 15px; }
  .grid { gap:11px; }
  a.card { min-height:116px; padding:13px 14px; }
  a.card .d { line-height:1.45; }
}
@media (max-width:560px) and (orientation:portrait) {
  html { --chapter-nav-top:194px; }
  html { scroll-snap-type:none; overscroll-behavior-y:auto; }
  .time-pill { top:8px; left:8px; min-height:48px; padding:7px 10px; border-radius:13px; }
  .time-pill__date { display:none; }
  .theme-choice { top:7px; right:8px; grid-template-columns:repeat(2,48px); padding:4px; }
  .theme-choice__button { min-height:48px; font-size:11px; }
  .theme-choice__orb { width:23px; height:23px; }
  .welcome-stage { top:72px; width:calc(100vw - 28px); }
  .welcome-stage .hero-inner { padding:10px 14px 12px; border-radius:17px; }
  .welcome-stage h1 { font-size:24px; }
  .catnav { top:194px; width:calc(100vw - 20px); padding:7px 9px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .catnav a { min-height:34px; padding:6px 7px; font-size:11px; }
  .wrap { width:100%; max-width:100vw; padding:0 14px; overflow-x:clip; }
  section { height:auto; min-height:100svh; padding-bottom:42px; }
  .sec-head { margin-bottom:14px; padding:8px 13px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .grid--compact { grid-template-columns:1fr; }
  a.card { min-height:132px; padding:13px 10px; }
  #lab .grid { grid-template-columns:1fr; width:min(360px,100%); }
  #lab a.card { min-height:126px; padding:15px 14px 14px; }
  .t { font-size:14px; }
  .d { font-size:11.5px; }
  .earth-visual { height:100vh; }
  /* 竖屏让完整地球回到画面正中。 */
  .earth-visual.is-fallback { background-position:center; background-size:min(88vw,520px) auto; }
  html[data-theme="light"] :is(.time-pill,.theme-choice,.welcome-stage .hero-inner,.catnav,.sec-head,a.card),
  :is(.time-pill,.theme-choice,.welcome-stage .hero-inner,.catnav,.sec-head,a.card) {
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html[data-theme="light"] a.card { transform-style:flat; will-change:auto; }
}
@media (prefers-reduced-motion:reduce) { .theme-choice__button { transition:none; } }