:root {
  color-scheme: light;
  --wl-ink: #191d3b;
  --wl-muted: #666986;
  --wl-line: #dadbed;
  --wl-page: #f3f3fa;
  --wl-paper: #ffffff;
  --wl-violet: #7167cf;
  --wl-violet-dark: #342d78;
  --wl-coral: #ff826f;
  --wl-mint: #a8e9d4;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--wl-ink);
  background: var(--wl-page);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(52,45,120,.10) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--wl-page);
  color: var(--wl-ink);
}

.b35-brand,
.b35-navigation,
main,
.b35-footer {
  width: min(1220px, calc(100% - 42px));
  margin-inline: auto;
}

.b35-brand { padding: 25px 0 14px; font-size: 21px; font-weight: 800; letter-spacing: .06em; }
.b35-brand a { color: var(--wl-ink); text-decoration: none; }
.b35-navigation { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 19px; white-space: nowrap; }
.b35-navigation a { padding: 8px 13px; border: 1px solid var(--wl-line); border-radius: 5px; background: white; color: var(--wl-violet-dark); text-decoration: none; font-size: 13px; }
.b35-navigation a:hover, .b35-navigation a:focus-visible { background: var(--wl-mint); }
.b35-skip:focus { left: 18px; top: 15px; z-index: 10; background: white; padding: 10px; }
main { padding-bottom: 66px; }

.wl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 32px;
  align-items: end;
  padding: clamp(28px, 5vw, 58px);
  color: white;
  background: var(--wl-violet-dark);
  border-radius: 30px 5px 5px 5px;
  position: relative;
  overflow: hidden;
}

.wl-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 190px;
  right: 90px;
  top: -115px;
  border: 1px solid rgba(168,233,212,.35);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 22px rgba(168,233,212,.05), 0 0 0 45px rgba(168,233,212,.035);
}

.wl-hero-copy { position: relative; z-index: 1; }
.wl-hero h1 { max-width: 850px; margin: 0 0 18px; font-size: clamp(30px, 5vw, 57px); line-height: 1.15; letter-spacing: -.04em; }
.wl-hero-description { max-width: 900px; margin: 0; color: #e0def8; font-size: 15px; line-height: 2; }
.wl-event-index { position: relative; z-index: 1; padding: 17px; background: rgba(20,17,65,.42); border: 1px solid rgba(255,255,255,.2); border-radius: 5px 20px 5px 5px; }
.wl-event-index h2 { margin: 0 0 10px; color: #c9c5f5; font-size: 12px; font-weight: 600; }
.wl-event-index p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.16); align-items: baseline; }
.wl-event-index strong { color: var(--wl-mint); font-size: 22px; font-variant-numeric: tabular-nums; }
.wl-event-index span { color: #e5e3fa; font-size: 11px; }

.wl-brand,
.wl-preview,
.wl-news,
.wl-scores,
.wl-standings,
.wl-deep,
.wl-schedule,
.wl-faq { margin-top: 18px; padding: clamp(22px, 3vw, 34px); background: var(--wl-paper); border: 1px solid var(--wl-line); }
.wl-brand { border-radius: 5px 28px 5px 5px; }
.wl-brand > header { display: flex; align-items: center; gap: 18px; }
.wl-brand > header span { min-width: 85px; color: var(--wl-violet); font-size: 13px; font-weight: 800; }
.wl-brand > header h2 { margin: 0; font-size: clamp(19px, 2.5vw, 28px); }
.wl-brand-pair { display: grid; grid-template-columns: .92fr 1.08fr; gap: 13px; margin-top: 21px; }
.wl-brand-pair article { padding: 19px 21px; background: #f1f0fb; border-radius: 4px 19px 4px 4px; }
.wl-brand-pair article + article { margin-top: 22px; background: #f3f8f5; }
.wl-brand-pair h3 { margin: 0 0 9px; font-size: 17px; }
.wl-brand-pair p { margin: 0; color: var(--wl-muted); line-height: 1.9; }

.wl-preview { border-radius: 22px 5px 5px 5px; }
.wl-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wl-preview > header > div { display: flex; align-items: center; gap: 13px; }
.wl-preview h2, .wl-news h2, .wl-community h2, .wl-scores h2, .wl-standings h2, .wl-deep h2, .wl-schedule h2, .wl-faq h2 { margin: 0; font-size: clamp(21px, 2.5vw, 29px); }
.wl-preview header p { margin: 5px 0 0; color: var(--wl-muted); font-size: 13px; }
.wl-preview header a, .wl-index-link { color: var(--wl-violet-dark); text-underline-offset: 4px; font-size: 13px; font-weight: 700; }
.wl-mark { width: auto; height: auto; max-width: 58px; max-height: 58px; object-fit: contain; border-radius: 8px; }
.wl-copyline { max-width: 980px; color: var(--wl-muted); line-height: 1.9; margin: 18px 0; }
.wl-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.wl-preview-match { display: grid; gap: 7px; padding: 15px; background: #f0f0fa; border-left: 3px solid var(--wl-violet); }
.wl-preview-match span, .wl-preview-match small { color: var(--wl-muted); font-size: 10px; line-height: 1.5; }
.wl-preview-match strong { font-size: 15px; }
.wl-preview-match i { color: var(--wl-violet); font-style: normal; }

.wl-news { border-radius: 5px 5px 28px 5px; }
.wl-news > header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.wl-news > header p { margin: 0; color: var(--wl-muted); font-size: 12px; }
.wl-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 17px 0; }
.wl-story { padding: 17px; border: 1px solid var(--wl-line); background: #fcfcff; border-radius: 4px 17px 4px 4px; }
.wl-story-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.wl-story-meta time { color: #6f728d; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-story h3 { margin: 14px 0 8px; font-size: 16px; line-height: 1.55; }
.wl-story h3 a { color: var(--wl-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wl-story p { margin: 0; color: var(--wl-muted); font-size: 12px; line-height: 1.85; }

.wl-community { margin-top: 18px; padding: clamp(22px, 3vw, 34px); border-left: 5px solid var(--wl-coral); background: #faf8f7; }
.wl-community > header { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.wl-community > header p { margin: 0; color: var(--wl-muted); font-size: 12px; }
.wl-note-stack { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-note { position: relative; padding: 18px 18px 18px 57px; background: white; border: 1px solid #e7e3e0; }
.wl-note-1 { grid-column: 1 / -1; }
.wl-note-index { position: absolute; left: 18px; top: 17px; color: var(--wl-coral); font-size: 12px; }
.wl-note h3 { margin: 0 0 8px; font-size: 16px; }
.wl-note p { margin: 0; color: var(--wl-muted); line-height: 1.85; font-size: 13px; }

.wl-scores { display: grid; grid-template-columns: .78fr 1.22fr; gap: 25px; align-items: center; color: white; background: var(--wl-ink); border: 0; border-radius: 5px 26px 5px 5px; }
.wl-scores-heading h3 { margin: 13px 0 8px; color: var(--wl-mint); font-size: 18px; }
.wl-scores-heading p { color: #c8c9dd; line-height: 1.85; font-size: 13px; }
.wl-score-rail { display: grid; gap: 7px; }
.wl-score-rail article { display: grid; grid-template-columns: 1.1fr 1fr 65px 1fr; gap: 12px; align-items: center; padding: 13px; background: rgba(255,255,255,.08); border-left: 2px solid var(--wl-coral); }
.wl-score-rail small { grid-column: 1 / -1; color: #c8c9dd; font-size: 10px; }
.wl-score-rail strong { font-size: 13px; }
.wl-score-rail b { color: var(--wl-mint); text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; }

.wl-standings { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 25px; border-radius: 5px; }
.wl-standings h3 { margin: 14px 0 8px; font-size: 18px; }
.wl-standings p { margin: 0; color: var(--wl-muted); line-height: 1.9; }
.wl-rank-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.wl-rank-fields span { display: grid; gap: 5px; padding: 13px; background: #efeff9; border-radius: 4px; }
.wl-rank-fields span:first-child { grid-column: 1 / -1; background: #e4e2f7; }
.wl-rank-fields b { color: var(--wl-violet-dark); font-size: 15px; }
.wl-rank-fields small { color: var(--wl-muted); font-size: 10px; }

.wl-deep { background: var(--wl-mint); border: 0; border-radius: 5px 5px 5px 25px; }
.wl-deep > header { display: flex; align-items: baseline; gap: 17px; }
.wl-deep > header p { margin: 0; font-weight: 700; }
.wl-deep-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; margin-top: 17px; }
.wl-deep-body > p { margin: 0; color: #3f5a51; line-height: 1.95; }
.wl-deep-body dl { margin: 0; padding: 16px 18px; background: rgba(255,255,255,.63); }
.wl-deep-body dl div { display: grid; grid-template-columns: 55px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(52,45,120,.14); }
.wl-deep-body dl div:last-child { border: 0; }
.wl-deep-body dt { color: var(--wl-violet-dark); font-weight: 700; }
.wl-deep-body dd { margin: 0; color: var(--wl-muted); }

.wl-schedule { border-radius: 25px 5px 5px 5px; }
.wl-schedule > header { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 17px; }
.wl-schedule header > div > p { margin: 7px 0 0; color: var(--wl-violet); font-weight: 700; }
.wl-schedule header > p { margin: 0; color: var(--wl-muted); line-height: 1.8; font-size: 13px; }
.wl-table-scroll { overflow-x: auto; }
.wl-schedule table, .wl-data-ledger table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; font-size: 12px; }
.wl-schedule th, .wl-data-ledger th { padding: 11px 13px; background: #eeedf8; color: #666986; font-weight: 600; }
.wl-schedule td, .wl-data-ledger td { padding: 12px 13px; border-bottom: 1px solid #e9e8f1; }
.wl-schedule td:first-child time, .wl-data-ledger td:first-child time { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-schedule td:first-child small, .wl-data-ledger td:first-child small { display: block; margin-top: 3px; color: var(--wl-muted); font-size: 9px; }
.wl-league { display: block; margin-bottom: 4px; color: var(--wl-muted); font-size: 10px; }
.wl-schedule td strong, .wl-data-ledger td strong { font-size: 12px; white-space: nowrap; }
.wl-schedule td i, .wl-data-ledger td i { font-style: normal; color: var(--wl-violet); padding: 0 4px; }
.wl-numerals { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wl-state { display: inline-block; padding: 5px 8px; background: #eeedf8; border-radius: 99px; color: #626581; white-space: nowrap; }
.wl-state-completed { background: #def5eb; color: #2f6b54; }

.wl-faq { border-radius: 5px 25px 5px 5px; }
.wl-faq > header { display: flex; justify-content: space-between; align-items: baseline; }
.wl-faq > header p { margin: 0; color: var(--wl-muted); font-size: 12px; }
.wl-faq-grid { margin-top: 15px; border-top: 1px solid var(--wl-line); }
.wl-question { padding: 14px 3px; border-bottom: 1px solid var(--wl-line); }
.wl-question summary { cursor: pointer; font-weight: 700; line-height: 1.6; }
.wl-question p { max-width: 990px; margin: 11px 0 0; color: var(--wl-muted); line-height: 1.9; }

.wl-interior { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 8px 0 18px; padding: 30px clamp(20px, 4vw, 43px); color: white; background: var(--wl-violet-dark); border-radius: 5px 27px 5px 5px; }
.wl-interior > div { min-width: 0; }
.wl-interior p { margin: 0 0 7px; color: #d4d0f4; font-size: 12px; }
.wl-interior h1 { margin: 0; font-size: clamp(27px, 4vw, 42px); }
.wl-interior > strong { color: var(--wl-mint); font-size: 46px; line-height: 1; }
.wl-interior-about { justify-content: flex-start; }
.wl-interior-news { align-items: end; }
.wl-interior-data { background: var(--wl-ink); }
.wl-interior-language { background: #e9eff5; color: var(--wl-ink); }
.wl-interior-language p { color: var(--wl-muted); }
.wl-hanzi { color: var(--wl-violet); font-size: 20px; font-weight: 800; border: 1px solid #c8c8e3; border-radius: 50%; width: 62px; height: 62px; display: grid; place-items: center; }
.wl-interior-mobile { justify-content: flex-start; color: var(--wl-ink); background: #f8e9e5; }
.wl-interior-mobile p { color: #805c59; }

.wl-about-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.wl-about-body article { padding: 25px; border: 1px solid var(--wl-line); background: white; }
.wl-about-body article:nth-child(2) { margin-top: 35px; background: #f0f0fb; }
.wl-about-body article span, .wl-data-explain article span { color: var(--wl-violet); font-size: 11px; font-weight: 700; }
.wl-about-body h2 { margin: 13px 0 9px; font-size: 20px; }
.wl-about-body p { margin: 0; color: var(--wl-muted); line-height: 1.9; }
.wl-cross-links { display: flex; gap: 10px; margin-top: 17px; }
.wl-cross-links a { padding: 9px 13px; background: white; border: 1px solid var(--wl-line); color: var(--wl-violet-dark); text-decoration: none; font-size: 13px; }

.wl-article-index { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 28px; align-items: start; }
.wl-article-intro { padding: 16px 0; border-top: 4px solid var(--wl-coral); position: sticky; top: 15px; }
.wl-article-intro h2 { margin: 0 0 8px; font-size: 18px; }
.wl-article-intro p { margin: 0; color: var(--wl-muted); font-size: 12px; line-height: 1.85; }
.wl-article-list { display: grid; gap: 10px; }
.wl-article-list .wl-story { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 15px; }
.wl-article-list .wl-story-meta { grid-row: span 2; align-items: start; flex-direction: column; justify-content: start; }
.wl-article-list .wl-story h3 { margin: 0 0 8px; }
.wl-article-list .wl-story p { grid-column: 2; }

.wl-data-ledger { padding: 23px; background: white; border: 1px solid var(--wl-line); border-radius: 5px 25px 5px 5px; }
.wl-data-ledger > header { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 15px; }
.wl-data-ledger h2 { margin: 0; font-size: 21px; }
.wl-data-ledger header p { margin: 0; color: var(--wl-muted); font-size: 12px; }
.wl-data-explain { display: grid; grid-template-columns: 1.1fr .9fr; gap: 13px; margin-top: 16px; }
.wl-data-explain article { padding: 22px; background: #f1f0fb; border-top: 3px solid var(--wl-violet); }
.wl-data-explain article h2 { margin: 8px 0; font-size: 18px; }
.wl-data-explain article p { margin: 0; color: var(--wl-muted); line-height: 1.9; }

.wl-language-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.wl-language-cards article { padding: 24px; background: white; border: 1px solid var(--wl-line); border-radius: 24px 4px 4px 4px; }
.wl-language-cards article:nth-child(2) { margin-top: 29px; background: #eff5f2; }
.wl-language-cards b { color: var(--wl-violet); font-size: 13px; }
.wl-language-cards h2 { margin: 14px 0 9px; font-size: 19px; }
.wl-language-cards p { margin: 0; color: var(--wl-muted); line-height: 1.9; }
.wl-glossary { margin-top: 17px; padding: 24px; background: var(--wl-ink); color: white; border-radius: 5px 5px 25px 5px; }
.wl-glossary h2 { margin: 0 0 12px; font-size: 20px; }
.wl-glossary dl { margin: 0; }
.wl-glossary dl div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2); }
.wl-glossary dt { color: var(--wl-mint); font-weight: 700; }
.wl-glossary dd { margin: 0; color: #d2d3e3; line-height: 1.8; }

.wl-pocket-reading { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wl-pocket-reading article { padding: 25px; background: white; border: 1px solid var(--wl-line); border-radius: 4px 20px 4px 4px; }
.wl-pocket-reading article:first-child { background: #f1f0fb; }
.wl-pocket-reading span { color: var(--wl-violet); font-size: 11px; font-weight: 700; }
.wl-pocket-reading h2 { margin: 10px 0; font-size: 20px; }
.wl-pocket-reading p { margin: 0; color: var(--wl-muted); line-height: 1.9; }
.wl-phone-example { display: grid; grid-template-columns: minmax(250px,.8fr) 1.2fr; gap: 20px; align-items: center; margin-top: 16px; padding: 20px 23px; border: 1px dashed #b3afdd; background: #fafaff; }
.wl-phone-example div { display: grid; gap: 7px; }
.wl-phone-example small, .wl-phone-example span { color: var(--wl-muted); font-size: 10px; }
.wl-phone-example strong { font-size: 19px; }
.wl-phone-example i { color: var(--wl-violet); font-style: normal; padding: 0 7px; }
.wl-phone-example p { margin: 0; color: var(--wl-muted); line-height: 1.8; }

.b35-footer { border-top: 1px solid var(--wl-line); padding: 22px 0 34px; color: var(--wl-muted); font-size: 12px; line-height: 1.8; }
.b35-footer p { margin: 5px 0; }
.b35-footer a { margin-right: 15px; color: var(--wl-violet-dark); }

@media (max-width: 780px) {
  .b35-brand, .b35-navigation, main, .b35-footer { width: min(100% - 24px, 640px); }
  .wl-hero { grid-template-columns: 1fr; gap: 20px; padding: 27px 21px; border-radius: 21px 4px 4px 4px; }
  .wl-hero::before { right: -200px; top: -115px; }
  .wl-hero-description { font-size: 14px; line-height: 1.9; }
  .wl-event-index { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .wl-event-index h2 { grid-column: 1 / -1; }
  .wl-event-index p { display: grid; gap: 1px; padding: 8px 5px; }
  .wl-event-index strong { font-size: 17px; }
  .wl-brand-pair, .wl-preview-grid, .wl-news-grid, .wl-data-explain, .wl-language-cards, .wl-pocket-reading { grid-template-columns: 1fr; }
  .wl-brand-pair article + article, .wl-language-cards article:nth-child(2), .wl-about-body article:nth-child(2) { margin-top: 0; }
  .wl-preview > header { align-items: flex-start; }
  .wl-preview > header a { display: none; }
  .wl-news > header, .wl-community > header { display: block; }
  .wl-news > header p, .wl-community > header p { margin-top: 7px; }
  .wl-note-stack { grid-template-columns: 1fr; }
  .wl-note-1 { grid-column: auto; }
  .wl-scores, .wl-standings, .wl-deep-body, .wl-schedule > header, .wl-about-body, .wl-article-index, .wl-phone-example { grid-template-columns: 1fr; }
  .wl-article-intro { position: static; }
  .wl-article-list .wl-story { grid-template-columns: 1fr; }
  .wl-article-list .wl-story-meta { grid-row: auto; flex-direction: row; align-items: center; }
  .wl-article-list .wl-story p { grid-column: auto; }
  .wl-data-ledger > header, .wl-interior-news { align-items: flex-start; }
  .wl-data-ledger > header { display: block; }
  .wl-data-ledger header p { margin-top: 7px; }
  .wl-interior { padding: 23px 19px; }
  .wl-glossary dl div { grid-template-columns: 68px 1fr; gap: 10px; }
}