:root {
  color-scheme: light;
  --wh-night: #10252d;
  --wh-mint: #b9d65b;
  --wh-cyan: #63b9c0;
  --wh-paper: #f1f4f2;
  --wh-white: #ffffff;
  --wh-ink: #182a31;
  --wh-gray: #68787e;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--wh-paper); color: var(--wh-ink); line-height: 1.72; }
a { color: inherit; }
.wh-brand-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 5vw; background: var(--wh-night); color: var(--wh-white); }
.wh-brand { color: white; text-decoration: none; font-size: 25px; font-weight: 900; letter-spacing: .08em; }
.wh-brand span { padding-left: 10px; color: var(--wh-mint); font-size: 13px; }
.wh-brand-bar p { margin: 0; color: #c5d1d1; font-size: 13px; }
.wh-nav { display: flex; flex-wrap: wrap; gap: 7px 15px; padding: 12px 5vw; background: #fff; border-bottom: 1px solid #d6dddc; }
.wh-nav a { text-decoration: none; color: #23434b; font-size: 13px; white-space: nowrap; }
.wh-nav a:hover { color: #167685; text-decoration: underline; }
.wh-court, .wh-inner { width: min(1180px, 92vw); margin: auto; }
.wh-scoreboard { margin: 30px 0 20px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; padding: 36px; background: var(--wh-night); color: white; }
.wh-score-copy h1 { margin: 8px 0 18px; font-size: clamp(32px,4vw,52px); line-height: 1.2; }
.wh-score-copy p { color: #e0e7e4; }
.wh-league-mark { color: var(--wh-mint); font-size: 12px; letter-spacing: .12em; }
.wh-live-box { position: relative; align-self: stretch; min-height: 280px; background: #2c454a; }
.wh-score-photo { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; opacity: .84; }
.wh-score-caption { position: absolute; right: 0; bottom: 0; display: grid; padding: 12px 18px; background: var(--wh-mint); color: var(--wh-night); }
.wh-score-caption span { font-size: 12px; }
.wh-block { padding: 32px 0; border-bottom: 1px solid #cad3d2; }
.wh-block h2 { margin: 0 0 16px; font-size: 25px; }
.wh-chapter { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
.wh-chapter:nth-of-type(odd) { grid-template-columns: 260px 1fr; }
.wh-chapter:nth-of-type(odd) .wh-chapter-copy { order: 2; }
.wh-chapter-copy p { margin: 0; }
.wh-block-image { width: 100%; height: 180px; object-fit: cover; border-radius: 2px 28px 2px 2px; }
.wh-report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.wh-report { background: white; padding: 17px; border-left: 3px solid var(--wh-cyan); }
.wh-report time { color: var(--wh-gray); font-size: 12px; }
.wh-report h3 { line-height: 1.4; }
.wh-report a { color: #126777; font-weight: 700; }
.wh-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-answer-grid details { background: white; border: 1px solid #d5dedd; padding: 15px; }
.wh-answer-grid summary { cursor: pointer; font-weight: 700; }
.wh-talk-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.wh-talk-grid article { padding: 17px; background: #e3ebe8; border-top: 3px solid var(--wh-cyan); }
.wh-inner { padding: 34px 0 60px; }
.wh-inner > header, .wh-mobile-intro, .wh-history-heading { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: center; padding: 26px; background: #dfe8e4; }
.wh-inner h1 { margin: 0 0 10px; font-size: 36px; }
.wh-inner > header p, .wh-mobile-intro p, .wh-history-heading p { margin: 0; }
.wh-inner-cover, .wh-history-cover, .wh-mobile-cover { width: 100%; height: 190px; object-fit: cover; }
.wh-rule-rail { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.wh-detail-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: center; padding: 18px; background: white; border-bottom: 1px solid #d3dbd9; }
.wh-detail-row h2 { margin: 0 0 8px; font-size: 21px; }
.wh-detail-row p { margin: 0; }
.wh-detail-image { width: 190px; height: 145px; object-fit: cover; }
.wh-feature-list { margin-top: 26px; border-left: 3px solid var(--wh-cyan); }
.wh-feature { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 18px 20px; margin-bottom: 14px; background: white; }
.wh-feature-date { display: flex; flex-direction: column; gap: 8px; color: var(--wh-gray); font-size: 12px; }
.wh-feature-date span { color: #21828e; font-size: 27px; font-weight: 800; }
.wh-feature h2 { margin: 0 0 12px; font-size: 22px; }
.wh-feature p { margin-bottom: 0; }
.wh-feature-image { width: 100%; max-height: 220px; object-fit: cover; }
.wh-history-heading { grid-template-columns: 1fr 270px; background: var(--wh-night); color: white; }
.wh-comparison { margin: 25px 0; padding: 22px; background: white; }
.wh-record-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d4dedd; border: 1px solid #d4dedd; }
.wh-record-table div { display: flex; justify-content: space-between; gap: 10px; padding: 12px; background: white; }
.wh-record-table strong { color: #147280; }
.wh-vocabulary { margin-top: 20px; border-top: 4px solid var(--wh-cyan); }
.wh-mobile-intro { background: var(--wh-night); color: white; }
.wh-mobile-stories { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wh-mobile-stories .wh-detail-row { grid-template-columns: 110px 1fr; }
.wh-mobile-stories .wh-detail-image { width: 110px; height: 120px; }
.wh-footer { padding: 26px 5vw; background: var(--wh-night); color: white; font-size: 13px; }
.wh-footer p { margin: 5px 0; }
.wh-footer a { margin-right: 15px; color: white; }
@media(max-width:760px) {
  .wh-brand-bar { align-items: flex-start; flex-direction: column; }
  .wh-scoreboard, .wh-chapter, .wh-chapter:nth-of-type(odd), .wh-inner > header, .wh-mobile-intro, .wh-history-heading { grid-template-columns: 1fr; }
  .wh-chapter:nth-of-type(odd) .wh-chapter-copy { order: initial; }
  .wh-scoreboard { padding: 22px; }
  .wh-report-grid, .wh-answer-grid, .wh-talk-grid, .wh-mobile-stories { grid-template-columns: 1fr; }
  .wh-feature { grid-template-columns: 1fr; }
  .wh-feature-date { flex-direction: row; }
  .wh-detail-row, .wh-mobile-stories .wh-detail-row { grid-template-columns: 90px 1fr; }
  .wh-detail-image, .wh-mobile-stories .wh-detail-image { width: 90px; height: 120px; }
  .wh-record-table { grid-template-columns: 1fr; }
}