@font-face {font-family:"HarmonyOS Sans SC";src:url("fonts/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face {font-family:"HarmonyOS Sans SC";src:url("fonts/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;color:#152c40;background:#f7f9fa;font-family:"HarmonyOS Sans SC","Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #1673ad;outline-offset:4px}header{position:sticky;top:10px;z-index:4;margin:12px auto;width:min(94%,1360px);height:62px;border-radius:35px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:linear-gradient(125deg,#ffffffed,#e8eff3c9);backdrop-filter:blur(20px) saturate(150%);border:1px solid white;box-shadow:0 4px 20px #263d5010,inset 0 -1px 2px #96aab94a}header img{display:block;width:224px}nav{display:flex;gap:30px;font-size:14px}.hero{margin:0 auto;width:min(96%,1440px);min-height:490px;border-radius:22px;padding:68px 7%;background:#ddeafa}.hero h1{font-size:clamp(47px,5.3vw,82px);line-height:1.16;letter-spacing:-.06em;margin:22px 0}.hero p{font-size:16px;color:#264053}.pill{display:inline-block;margin-top:16px;padding:13px 23px;border:1px solid #fffd;border-radius:50px;background:#ffffffad;backdrop-filter:blur(14px);box-shadow:0 4px 14px #1233;font-size:14px}small{font-size:11px;letter-spacing:.18em;font-weight:650;color:#35576e}#journal,footer{width:min(86%,1250px);margin:52px auto}h2{margin:8px 0 23px;font-size:34px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{padding:24px;border:1px solid #d7e0e6;border-radius:16px;background:linear-gradient(135deg,white,#edf3f6);display:flex;align-items:flex-start;flex-direction:column}.card:hover{border-color:#91adbd}.card h3{font-size:23px;line-height:1.45;margin:15px 0 0}.card p,.read p{line-height:1.85;color:#4b606c}.card b{margin-top:auto;align-self:flex-end;font-size:22px}.read{max-width:760px;margin:76px auto;padding:0 24px}.read h1{font-size:clamp(34px,5vw,58px);line-height:1.2}.read .lead{font-size:21px}.read h2{margin-top:40px;font-size:24px}.read a{display:inline-block;margin-top:24px}footer{border-top:1px solid #ccd9e0;padding:24px 0;font:12px Georgia,serif;letter-spacing:.09em}footer span{float:right}@media(max-width:700px){header{padding:0 14px;height:53px}header img{width:156px}nav{gap:12px;font-size:12px}.hero{padding:54px 7%;min-height:400px;background-position:42% center}.hero p{max-width:240px}.grid{grid-template-columns:1fr}.card h3{font-size:22px}footer span{float:none;display:block;margin-top:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

footer span{font-family:"HarmonyOS Sans SC",sans-serif}

/* Lightweight glass surfaces keep scrolling compositing inexpensive. */
header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(92%, 1320px);
  height: 80px;
  padding: 0 26px;
  border-radius: 42px;
  background: linear-gradient(120deg, #ffffffa6, #eff8ff75 55%, #ffffff94);
  border: 1px solid #ffffffe0;
  box-shadow: 0 5px 18px #17364f18,
    inset 0 2px 2px #fff, inset 0 -2px 3px #7293ac59;
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
header::after, .pill::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  pointer-events: none;
  border-top: 1px solid #ffffffc9;
  border-bottom: 1px solid #d8edff8c;
}
header img { width: 300px; max-width: 100%; }
header > a { flex-shrink: 0; }
nav { gap: 12px; align-items: center; }
nav a, .read > a {
  border-radius: 24px;
  padding: 12px 19px;
  text-decoration: none;
  transition: background 220ms ease, box-shadow 220ms ease;
}
nav a:hover, nav a:focus-visible, .read > a:hover {
  text-decoration: none;
  background: #ffffff50;
  box-shadow: 0 0 12px 3px #ffffff80, 0 0 18px 4px #8bb7d52b;
}
.hero {
  margin-top: 16px;
  min-height: 590px;
  padding-top: 140px;
}
.pill {
  position: relative;
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  backdrop-filter: blur(4px) saturate(110%);
  background: linear-gradient(145deg, #ffffff57, #ffffff1a 55%, #b9dbf02e);
  border: 1px solid #ffffffd9;
  box-shadow: 0 8px 22px #123a5b30, inset 0 2px 2px #ffffffed,
    inset 0 -2px 3px #5b89ac63;
  transition: box-shadow 220ms ease;
}
.pill:hover, .pill:focus-visible {
  box-shadow: 0 0 20px 6px #ffffff8c, 0 10px 28px #507fa442,
    inset 0 2px 2px #fff, inset 0 -2px 3px #7b9dbd66;
}
.card { transition: box-shadow 220ms ease, border-color 220ms ease; }
.card:hover, .card:focus-visible {
  box-shadow: 0 0 24px 5px #bed4e352;
  border-color: #a3bfce;
}
.read { margin-top: 145px; }
@media (max-width: 700px) {
  header { top: 12px; height: 67px; padding: 0 15px; width: 94%; }
  header img { width: 190px; }
  nav { gap: 2px; }
  nav a { padding: 11px 9px; }
  .hero { padding-top: 120px; min-height: 490px; }
  .hero h1 { font-size: clamp(32px, 10vw, 44px); }
}
@media (max-width: 390px) {
  header img { width: clamp(140px, 44vw, 170px); }
  nav a { padding: 10px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  nav a, .read > a, .pill, .card { transition: none; }
}