:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
* { box-sizing: border-box; }
html { background: #101a2a; }
body { margin: 0; color: #edf5f7; background: radial-gradient(circle at 93% 0%, #203a4e 0, transparent 28rem), #101a2a; }
.page { max-width: 1160px; margin: 0 auto; padding: 0 28px 100px; }
.header { padding: 67px 0 48px; border-bottom: 1px solid #334456; }
.header-line { display: flex; align-items: center; gap: 10px; color: #74d4df; font-size: 14px; font-weight: 600; letter-spacing: .16em; }
.mark { width: 9px; height: 9px; background: #74d4df; transform: rotate(45deg); }
h1 { margin: 23px 0 12px; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.16; letter-spacing: -.04em; font-weight: 700; }
.count { margin: 0; color: #a7b6c2; font-size: 16px; }
.section { margin-top: 40px; }
.section-heading { display: flex; align-items: baseline; gap: 13px; margin-bottom: 18px; }
h2 { margin: 0; font-size: 22px; line-height: 1.35; }
.section-heading span { color: #74d4df; font-size: 14px; font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.card { min-width: 0; padding: 8px 8px 0; background: #1b2a3b; border: 1px solid #34485b; border-radius: 10px; overflow: hidden; }
.card video, .image-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; background: #080d14; }
.card video { object-fit: contain; }
.card h3 { margin: 0; padding: 17px 9px 18px; font-size: 16px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.image-frame { display: grid; place-items: center; overflow: hidden; }
.image-frame img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 680px) {
  .page { padding: 0 16px 64px; }
  .header { padding: 36px 0 31px; }
  h1 { margin-top: 18px; }
  .section { margin-top: 31px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .card h3 { padding: 13px 7px 15px; }
}