:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #65717d;
  --line: #d8dee4;
  --soft: #f4f6f8;
  --paper: #ffffff;
  --accent: #176b87;
  --accent-soft: #e5f2f5;
  --positive: #177245;
  --negative: #b43a3a;
  --shadow: 0 12px 32px rgb(23 32 42 / 8%);
  font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--soft); line-height: 1.5; }
button, input, select { font: inherit; }
button, .link-button { color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgb(23 107 135 / 35%); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .6rem 1rem; transform: translateY(-150%); background: var(--ink); color: white; }
.skip-link:focus { transform: none; }
.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; padding: 2rem clamp(1rem, 4vw, 4rem) 1.4rem; color: white; background: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .15rem; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.045em; }
.site-brand { display: flex; align-items: center; gap: .25em; }
.site-logo { display: block; flex: 0 0 auto; width: 1.15em; height: 1.15em; }
.site-subtitle { margin: 0; color: #c8d0d8; font-size: .9rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.site-rating-note { margin: 1rem 0 0; color: #aebcc8; font-size: .82rem; text-align: right; white-space: nowrap; }
.site-links { display: grid; justify-items: end; gap: .35rem; margin-top: .2rem; }
.site-links a { display: inline-flex; align-items: center; gap: .4rem; color: #d4edf4; font-size: .86rem; font-weight: 600; text-decoration-color: rgb(212 237 244 / 60%); text-underline-offset: 3px; }
.site-links a:hover { color: white; }
.site-link-icon { display: inline-flex; width: .95rem; height: .95rem; }
.site-link-icon svg { width: 100%; height: 100%; fill: currentColor; }
.eyebrow { margin-bottom: .25rem; color: #86c7d8; font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
main { width: min(1600px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }
.app-layout { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.app-content { min-width: 0; }
.series-sidebar { position: sticky; top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.series-sidebar .eyebrow { color: var(--muted); }
.series-list { display: grid; gap: .35rem; }
.series-link { width: 100%; padding: .7rem .8rem; border: 0; border-radius: 5px; color: var(--ink); background: transparent; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.series-link:hover { background: var(--soft); }
.series-link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.series-mode-switch { display: inline-flex; margin-bottom: 1rem; padding: .25rem; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: var(--shadow); }
.series-mode-switch button { padding: .55rem .9rem; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-weight: 650; cursor: pointer; }
.series-mode-switch button[aria-selected="true"] { color: white; background: var(--accent); }
.controls { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 14rem) auto; align-items: end; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
label, .search-label { display: grid; gap: .35rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
input, select { width: 100%; min-height: 2.6rem; padding: .55rem .7rem; border: 1px solid #aeb8c1; border-radius: 4px; color: var(--ink); background: white; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.search-field { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 2.6rem; padding: .3rem .45rem; border: 1px solid #aeb8c1; border-radius: 4px; background: white; }
.search-field:focus-within { outline: 3px solid rgb(23 107 135 / 35%); outline-offset: 2px; }
.search-field input { flex: 1 1 12rem; width: auto; min-width: 8rem; min-height: 1.9rem; padding: .2rem; border: 0; outline: 0; }
.search-field input::-webkit-search-cancel-button { appearance: none; }
.clear-search-button { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.clear-search-button:hover:not(:disabled) { color: var(--ink); background: var(--soft); }
.clear-search-button:disabled { opacity: .3; cursor: default; }
.school-tags { display: contents; }
.school-tag { display: inline-flex; align-items: center; gap: .25rem; max-width: 18rem; padding: .2rem .3rem .2rem .5rem; border-radius: 999px; color: #124f63; background: var(--accent-soft); font-size: .8rem; font-weight: 650; }
.school-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school-tag-remove { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; line-height: 1; cursor: pointer; }
.school-tag-remove:hover { background: rgb(23 107 135 / 14%); }
.school-filter { position: relative; }
.control-label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.school-filter-button { width: 100%; min-height: 2.6rem; padding: .55rem 2rem .55rem .7rem; border: 1px solid #aeb8c1; border-radius: 4px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.school-filter-button::after { position: absolute; right: .75rem; content: "▾"; color: var(--muted); }
.school-filter-menu { position: absolute; z-index: 10; top: calc(100% + .35rem); right: 0; width: min(24rem, calc(100vw - 2rem)); padding: .65rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); }
.school-options { max-height: 18rem; margin-top: .5rem; overflow-y: auto; }
.school-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 3px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.school-option:hover, .school-option[aria-selected="true"] { background: var(--accent-soft); }
.school-option-mark { color: var(--accent); font-weight: 800; }
.school-options-empty { margin: .8rem .5rem; color: var(--muted); font-size: .85rem; }
.result-count { margin: 0 0 .55rem; color: var(--muted); white-space: nowrap; }
.status { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.section-heading, .detail-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: 1.5rem 0 1rem; }
.section-heading h2, .detail-header h2 { margin-bottom: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.section-note { margin-bottom: .25rem; color: var(--muted); }
.table-shell { position: relative; height: min(68vh, 760px); overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); container-type: inline-size; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.fixed-table, .wide-table { table-layout: fixed; }
.data-table th, .data-table td { height: 44px; padding: .5rem .75rem; border-right: 1px solid #edf0f2; border-bottom: 1px solid #e5e9ed; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.data-table thead th { position: sticky; z-index: 3; top: 0; height: 58px; color: #3d4852; background: #eef2f4; font-size: .78rem; }
.data-table tbody tr:hover td, .data-table tbody tr:focus-within td { background-color: #f3f9fa; }
.wide-table { --series-rank-width: 62px; --series-person-width: 220px; width: calc(180px + var(--series-rank-width) + var(--series-person-width) + var(--series-contest-width, 0px)); }
.wide-table col:nth-child(1) { width: var(--series-rank-width) !important; }
.wide-table col:nth-child(2) { width: var(--series-person-width) !important; }
.wide-table .contest-heading { overflow: visible; white-space: normal; }
.wide-table th:nth-child(1), .wide-table td:nth-child(1) { position: sticky; z-index: 2; left: 0; text-align: center; background: var(--paper); }
.wide-table th:nth-child(2), .wide-table td:nth-child(2) { position: sticky; z-index: 2; left: var(--series-rank-width); text-align: left; background: var(--paper); }
.wide-table th:nth-child(3), .wide-table td:nth-child(3) { position: sticky; z-index: 2; left: calc(var(--series-rank-width) + var(--series-person-width)); background: var(--paper); }
.wide-table th:nth-child(4), .wide-table td:nth-child(4) { position: sticky; z-index: 2; left: calc(var(--series-rank-width) + var(--series-person-width) + 104px); background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.wide-table thead th:nth-child(-n+4) { z-index: 5; background: #eef2f4; }
.wide-table tbody tr:hover td:nth-child(-n+4), .wide-table tbody tr:focus-within td:nth-child(-n+4) { background: #f3f9fa; }
.wide-table tbody td:nth-child(odd):nth-child(n+5) { border-right: 0; }
.contest-table { min-width: 616px; }
.contest-table th:nth-child(2), .contest-table td:nth-child(2) { text-align: left; }
.contest-button, .link-button { padding: 0; border: 0; background: none; text-decoration: underline; text-decoration-color: rgb(23 107 135 / 35%); text-underline-offset: 3px; cursor: pointer; }
.contest-button { display: inline-block; max-width: none; font-weight: 650; line-height: 1.3; white-space: normal; }
.person { display: grid; width: 100%; min-width: 0; overflow: hidden; line-height: 1.25; text-align: left; }
.person small { margin-top: .2rem; overflow: hidden; color: var(--muted); font-weight: 400; text-overflow: ellipsis; }
.mobile-rank, .mobile-column-label, .identity-secondary, .problem-identity-name { display: none; }
.person-context-rank-only { display: none; }
.virtual-spacer td { height: var(--spacer-height); padding: 0; border: 0; }
.rating-value { font-weight: 700; }
.rating-gray { color: #808080; }
.rating-green { color: #008000; }
.rating-cyan { color: #03a89e; }
.rating-blue { color: #0000ff; }
.rating-purple { color: #aa00aa; }
.rating-orange { color: #ffc000; }
.rating-red, .rating-legendary-first { color: #ff0000; }
.rating-legendary { color: #000000; }
.rating-participated { box-shadow: inset 0 -2px var(--accent); }
.rating-absent { background: #fafbfc; }
.rating-absent .rating-value { opacity: .48; }
.rating-delta { text-align: right; }
.delta-zero { color: var(--muted); font-weight: 650; }
.positive { color: var(--positive); font-weight: 650; }
.negative { color: var(--negative); font-weight: 650; }
.detail-header { align-items: start; }
.back-button { padding: .55rem .85rem; border: 1px solid #aeb8c1; border-radius: 4px; color: var(--ink); background: white; cursor: pointer; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: .4rem 0 0; color: var(--muted); }
.unrated-note { color: #b45309; font-weight: 650; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.panel { min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: var(--shadow); }
.panel h3 { margin-bottom: 1rem; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.panel-heading h3 { margin-bottom: .25rem; }
.panel-heading p { margin-bottom: .8rem; color: var(--muted); font-size: .85rem; }
.problem-chart-panel { margin-bottom: 1.25rem; }
.problem-chart-figure { margin: 0; }
.problem-chart-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fbfcfd; }
.problem-rating-chart { display: block; width: 100%; height: auto; }
.problem-chart-empty { border: 1px solid var(--line); border-radius: 5px; background: #fbfcfd; }
.problem-curve-line { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: opacity .12s, stroke-width .12s; }
.problem-curve-line:focus { outline: none; stroke-width: 4; }
.problem-curve-hover-target { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: crosshair; }
.problem-curve-point { transition: opacity .12s; pointer-events: none; }
.problem-curve-hit { fill: transparent; cursor: crosshair; }
.problem-curve-line.is-muted, .problem-curve-point.is-muted, .problem-curve-hit.is-muted { opacity: .12; }
.problem-curve-line.is-active { stroke-width: 4; }
.problem-chart-tooltip { display: grid; gap: .15rem; min-width: 12rem; transform: translateY(-10%); }
.problem-chart-tooltip strong { color: var(--accent); }
.problem-chart-tooltip > span { display: block; }
.problem-chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .75rem; }
.problem-legend-actions { display: inline-flex; gap: .35rem; margin-right: .2rem; }
.problem-legend-action { padding: .3rem .55rem; border: 1px solid #aeb8c1; border-radius: 4px; color: var(--ink); background: white; font-size: .78rem; cursor: pointer; }
.problem-legend-action:disabled { color: var(--muted); opacity: .45; cursor: default; }
.problem-legend-item { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); font-size: .78rem; cursor: pointer; transition: opacity .12s; }
.problem-legend-swatch { width: .8rem; height: .8rem; border-radius: 50%; }
.problem-legend-item.is-muted { opacity: .28; }
.problem-legend-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(23 107 135 / 15%); }
.problem-legend-item.is-unselected { opacity: .38; filter: grayscale(1); }
.problem-table-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.problem-table-heading h3 { margin-bottom: .75rem; }
.problem-table-heading .result-count { margin: 0; }
.problem-table-shell { max-height: min(68vh, 760px); overflow: auto; border: 1px solid var(--line); border-radius: 5px; container-type: inline-size; }
.problem-table { min-width: 850px; table-layout: fixed; }
.problem-contest-col { width: 340px; }
.problem-index-col { width: 72px; }
.problem-rating-col { width: 92px; }
.problem-team-count-col { width: 190px; }
.table-sort-button { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
.preview-sources { display: grid; gap: .2rem; margin-bottom: .8rem; color: var(--muted); font-size: .82rem; }
.preview-sources p { margin: 0; }
.preview-sources strong { color: var(--ink); }
.preview-sources .review-ranking-note { color: inherit; }
.preview-sources a { color: var(--accent); text-underline-offset: 3px; }
.preview-school-rank-note { font-size: .78rem; }
.preview-contest-picker { width: min(24rem, 100%); }
.review-pickers { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 100%; }
.review-pickers label { min-width: 0; max-width: 100%; }
.review-pickers select { max-width: 100%; }
.review-summary { margin: 1rem 0; padding: .75rem 1rem; background: #eef2f4; border-radius: .4rem; container-type: inline-size; }
.review-summary p { margin: .25rem 0; }
.review-summary strong { font-variant-numeric: tabular-nums; }
.review-summary h3 { margin: .25rem 0; font-size: 1rem; }
.review-summary h3 small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.review-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: .85rem 0; }
.review-metric-card { display: flex; flex-direction: column; align-items: stretch; gap: .45rem; padding: .7rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: .35rem; text-align: left; cursor: pointer; }
.review-metric-card:hover { border-color: var(--accent); }
.review-metric-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #e5f2f5; }
.review-metric-title { font-size: .8rem; font-weight: 650; }
.review-metric-coefficient { font-size: 1.45rem; line-height: 1.25; }
.review-metric-card small { color: var(--muted); font-size: .7rem; }
.review-metric-bar { display: block; position: relative; height: 6px; background: #dbe3e8; border-radius: 3px; }
.review-metric-bar::after { content: ""; position: absolute; left: 50%; top: -2px; height: 10px; width: 1px; background: var(--muted); }
.review-metric-fill { position: absolute; left: var(--agreement-start); width: var(--agreement-width); height: 100%; background: var(--accent); border-radius: 3px; }
.review-metric-fill.negative-fill { background: var(--negative); }
@container (max-width: 900px) { .review-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 450px) { .review-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review-table td:nth-child(n+4) { font-variant-numeric: tabular-nums; }
.review-rank-change { display: inline-grid; grid-template-columns: 1rem 4ch; column-gap: .2rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.review-change-arrow { text-align: center; }
.review-change-number { text-align: left; }
.review-rank-pair { display: inline-grid; grid-template-columns: 5ch 6ch; align-items: baseline; column-gap: .25rem; font-variant-numeric: tabular-nums; }
.review-rank-pair > span { text-align: right; }
.review-rank-pair > .review-original-rank { text-align: right; }
.review-original-rank { color: var(--muted); font-size: .72rem; font-weight: 400; }
.table-sort-button.review-rank-sort { flex-direction: column; gap: .1rem; }
.review-table th { text-align: center; }
.preview-table.review-table { min-width: 100%; --review-column-extra: 0px; }
.review-table col:nth-child(4) { width: calc(150px + var(--review-column-extra)) !important; }
.review-table col:nth-child(n+5) { width: calc(110px + var(--review-column-extra)) !important; }
.preview-table-shell { height: min(72vh, 820px); }
.preview-table { --preview-school-width: min(200px, 24cqw); --preview-team-width: min(170px, calc(40cqw - var(--preview-school-width))); width: calc(var(--preview-non-frozen-width) + var(--preview-school-width) + var(--preview-team-width)); table-layout: fixed; }
.preview-table col:nth-child(1) { width: var(--preview-school-width) !important; }
.preview-table col:nth-child(2) { width: var(--preview-team-width) !important; }
.preview-table th:nth-child(-n+3), .preview-table td:nth-child(-n+3) { text-align: left; }
.preview-table th:nth-child(1), .preview-table td:nth-child(1) { position: sticky; z-index: 2; left: 0; background: var(--paper); }
.preview-table th:nth-child(2), .preview-table td:nth-child(2) { position: sticky; z-index: 2; left: var(--preview-school-width); background: var(--paper); }
.preview-table th:nth-child(3), .preview-table td:nth-child(3) { position: sticky; z-index: 2; left: calc(var(--preview-school-width) + var(--preview-team-width)); background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.preview-table thead th:nth-child(-n+3) { z-index: 5; background: #eef2f4; }
.preview-table tbody tr:hover td:nth-child(-n+3), .preview-table tbody tr:focus-within td:nth-child(-n+3) { background: #f3f9fa; }
.preview-table .preview-metric-cell { overflow: visible; }
.preview-table tbody tr.preview-excluded td,
.preview-table tbody tr.preview-excluded:hover td,
.preview-table tbody tr.preview-excluded:focus-within td { background: #f5efff; }
.preview-excluded .preview-team-identity,
.preview-excluded-label { color: #7440a0; font-weight: 600; }
.preview-table .table-sort-button { min-width: 0; justify-content: center; }
.preview-table td.preview-school-cell { padding-right: .45rem; padding-left: .45rem; }
.preview-school-content { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .125rem; min-width: 0; }
.preview-school-content > span { overflow: hidden; text-overflow: ellipsis; }
.preview-school-rank { color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; font-weight: 500; text-align: left; }
.preview-team-identity, .identity-primary { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.preview-team-identity { width: 100%; color: inherit; line-height: 1.2; cursor: default; }
.preview-value-control { position: relative; display: block; width: 100%; color: inherit; text-align: right; cursor: default; }
.preview-table td.preview-metric-cell { padding-right: .45rem; padding-left: .45rem; }
.preview-ranked-value { display: grid; grid-template-columns: minmax(0, 1fr) 1.9rem; align-items: baseline; gap: .125rem; width: 100%; white-space: nowrap; }
.preview-ranked-value > :first-child { min-width: 0; justify-self: end; }
.preview-global-rank { width: 1.9rem; color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; font-weight: 500; text-align: left; }
.preview-rating { font-weight: 700; font-variant-numeric: tabular-nums; }
.preview-rating-xcpcrating { color: #274c77; }
.preview-rating-xcpc-elo.rating-orange { color: #ff8c00; }
.preview-rating-xcpc-elo-legendary { color: #ff0000; }
.preview-rating-xcpc-elo-first { color: #000000; }
.preview-member-tooltip { position: fixed; z-index: 30; visibility: hidden; min-width: 13rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper); text-align: left; opacity: 0; pointer-events: none; box-shadow: var(--shadow); }
.preview-member-tooltip > strong { display: block; margin-bottom: .2rem; color: var(--accent); }
.preview-member-tooltip > span:not(.preview-achievement-list) { display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; }
.preview-member-tooltip > span > strong { font-weight: 650; }
.preview-member-tooltip.preview-tooltip-visible { visibility: visible; opacity: 1; }
.preview-history-tooltip { display: grid; grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr); column-gap: .45em; max-width: min(46rem, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; font-weight: 400; }
.preview-history-tooltip > strong, .preview-history-tooltip > span { grid-column: 1 / -1; }
.preview-history-tooltip > span.preview-history-row { display: grid; grid-template-columns: subgrid; gap: 0 .45em; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.preview-history-rank { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.preview-history-rank.gold { color: #e99a00; }
.preview-history-rank.silver { color: #808080; }
.preview-history-rank.bronze { color: #a56836; }
.preview-members-cell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preview-member-control { position: relative; display: inline-block; color: inherit; cursor: default; outline-offset: 2px; }
.preview-member-name { position: relative; display: inline-block; line-height: 1.05; }
.preview-member-name::before, .preview-member-name::after { position: absolute; right: 0; left: 0; height: 3px; border-radius: 1.5px; content: ""; }
.preview-member-name.has-noi::after { bottom: -5px; background: var(--noi-achievement-color); }
.preview-member-name.has-ioi::before { bottom: -10px; background: var(--ioi-achievement-color); }
.preview-member-name.noi-gold { --noi-achievement-color: #d6a800; }
.preview-member-name.noi-silver { --noi-achievement-color: #708090; }
.preview-member-name.noi-bronze { --noi-achievement-color: #a6532d; }
.preview-member-name.ioi-gold { --ioi-achievement-color: #d6a800; }
.preview-member-name.ioi-silver { --ioi-achievement-color: #708090; }
.preview-member-name.ioi-bronze { --ioi-achievement-color: #a6532d; }
.preview-member-name.ioi-participant { --ioi-achievement-color: #57514d; }
.preview-achievement-tooltip { width: max-content; max-width: calc(100vw - 1rem); }
.preview-achievement-list { display: grid; grid-template-columns: repeat(5, max-content); align-items: baseline; column-gap: .25rem; white-space: nowrap; }
.preview-achievement-row { display: contents; }
.preview-achievement-row > span { line-height: 1.55; }
.preview-achievement-separator { color: var(--muted); }
.preview-achievement-result, .preview-achievement-score { font-variant-numeric: tabular-nums; }
.preview-power-control { position: relative; display: block; width: 100%; padding: .2rem 0; color: var(--accent); font-weight: 700; text-align: right; cursor: default; }
.preview-power-tooltip { position: fixed; z-index: 31; visibility: hidden; width: 300px; padding: .7rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper); text-align: left; opacity: 0; pointer-events: none; box-shadow: var(--shadow); }
.preview-power-tooltip > strong { display: block; }
.preview-power-tooltip > strong { color: var(--accent); }
.preview-power-radar { display: block; width: 100%; height: auto; margin: .15rem 0; overflow: visible; }
.preview-power-grid, .preview-power-axis { fill: none; stroke: #cbd5dc; stroke-width: 1; }
.preview-power-shape { fill: rgb(23 107 135 / 22%); stroke: var(--accent); stroke-width: 2; }
.preview-power-label { fill: var(--muted); font-size: 9px; font-weight: 600; }
.preview-power-tooltip.preview-tooltip-visible { visibility: visible; opacity: 1; }
.preview-medals { font-variant-numeric: tabular-nums; }
.medal-values { display: inline-grid; grid-template-columns: repeat(3, 1em 2ch); column-gap: .15em; align-items: center; font-variant-numeric: tabular-nums; }
.medal-icon { text-align: center; }
.medal-count { text-align: right; }
.review-table .medal-values { grid-template-columns: 1em 2ch 1.6em 2ch 1.6em 2ch; column-gap: .2em; }
.review-table .medal-icon:not(:first-child) { text-align: right; }
.preview-missing { color: var(--muted); }
.problem-table #problem-contest-column { text-align: left; }
.problem-table #problem-contest-column .table-sort-button { justify-content: flex-start; }
.problem-identity-content { display: block; overflow: hidden; text-overflow: ellipsis; }
.problem-name-column { text-align: left !important; }
.problem-table td:nth-child(1) { text-align: left; }
.problem-table td:nth-child(2) { text-align: center; }
.problem-name-cell { text-align: left !important; }
.problem-team-counts > span:first-child, .problem-team-counts > span:last-child { display: inline-block; width: 7ch; text-align: right; }
.problem-team-count-separator { display: inline-block; width: 2ch; color: var(--muted); text-align: center; }
.problem-table-empty td { height: 8rem; color: var(--muted); text-align: center !important; }
.chart-wrap { position: relative; overflow-x: auto; }
.rating-chart { display: block; width: 100%; min-width: 560px; height: auto; }
.chart-grid { stroke: #dce2e6; stroke-width: 1; }
.chart-axis { fill: var(--muted); font-size: 11px; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.chart-dot { fill: var(--paper); stroke-width: 2; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-focus { stroke: #80909b; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-tooltip { position: absolute; z-index: 4; max-width: 22rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper); font-size: .8rem; pointer-events: none; box-shadow: var(--shadow); }
.chart-note { margin: .75rem 0 0; color: var(--muted); font-size: .82rem; }
.compact-table th:first-child, .compact-table td:first-child { text-align: left; }
.compact-table-wrap { max-height: 480px; overflow: auto; border: 1px solid var(--line); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.error-panel { max-width: 36rem; margin: 4rem auto; padding: 1.5rem; border-left: 4px solid var(--negative); background: white; box-shadow: var(--shadow); }
.error-panel button { padding: .5rem .8rem; }
@media (max-width: 850px) {
  .site-header, .section-heading, .detail-header { align-items: start; flex-direction: column; gap: .7rem; }
  .site-links { justify-items: start; }
  .site-rating-note { text-align: left; white-space: normal; }
  .app-layout { grid-template-columns: 1fr; }
  .series-sidebar { position: static; }
  .series-list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .controls { grid-template-columns: 1fr; }
  .result-count { margin: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .preview-contest-picker { width: 100%; }
}
@container (max-width: 924px) {
  .wide-table { --series-rank-width: min(62px, 20cqw); --series-person-width: min(220px, 30cqw); }
  .wide-table th:nth-child(2), .wide-table td:nth-child(2) { box-shadow: 1px 0 0 var(--line); }
  .wide-table tbody td:nth-child(3), .wide-table tbody td:nth-child(4) { position: static; left: auto; z-index: auto; box-shadow: none; }
  .wide-table thead th:nth-child(3), .wide-table thead th:nth-child(4) { left: auto; z-index: 3; box-shadow: none; }
}
@container (max-width: 1120px) {
  .preview-table th:nth-child(2), .preview-table td:nth-child(2) { left: var(--preview-school-width); box-shadow: 1px 0 0 var(--line); }
  .preview-table tbody td:nth-child(3) { position: static; left: auto; z-index: auto; box-shadow: none; }
  .preview-table thead th:nth-child(3) { left: auto; z-index: 3; box-shadow: none; }
}
@container (max-width: 600px) {
  .desktop-column-label { display: none; }
  .mobile-column-label, .mobile-rank { display: inline; }

  .wide-table { --mobile-identity-width: clamp(150px, 42cqw, 176px); width: calc(var(--mobile-identity-width) + 180px + var(--series-contest-width, 0px)); }
  .wide-table col:nth-child(1), .wide-table th:nth-child(1), .wide-table tr:not(.virtual-spacer) td:nth-child(1) { display: none; }
  .wide-table col:nth-child(2) { width: var(--mobile-identity-width) !important; }
  .wide-table th:nth-child(2), .wide-table td:nth-child(2) { left: 0; width: var(--mobile-identity-width); padding: .25rem .5rem; box-shadow: 2px 0 5px rgb(23 32 42 / 10%); }
  .wide-table thead th:nth-child(2) { z-index: 5; }
  .person { line-height: 1.1; }
  .person small { margin-top: .1rem; font-size: .68rem; white-space: nowrap; }
  .person-context { display: flex; min-width: 0; gap: .3rem; }
  .person-school { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mobile-rank { flex: 0 0 auto; }

  .contest-table { --mobile-identity-width: clamp(150px, 42cqw, 176px); width: calc(var(--mobile-identity-width) + 270px); min-width: calc(var(--mobile-identity-width) + 270px); }
  .contest-table col:nth-child(1), .contest-table th:nth-child(1), .contest-table tr:not(.virtual-spacer) td:nth-child(1) { display: none; }
  .contest-table col:nth-child(2) { width: var(--mobile-identity-width) !important; }
  .contest-table th:nth-child(2), .contest-table td:nth-child(2) { position: sticky; z-index: 2; left: 0; width: var(--mobile-identity-width); padding: .25rem .5rem; background: var(--paper); box-shadow: 2px 0 5px rgb(23 32 42 / 10%); }
  .contest-table thead th:nth-child(2) { z-index: 5; background: #eef2f4; }

  .preview-table { --mobile-identity-width: clamp(150px, 42cqw, 176px); width: calc(var(--mobile-identity-width) + var(--preview-non-frozen-width)); }
  .preview-table col:nth-child(1), .preview-table th:nth-child(1), .preview-table tr:not(.virtual-spacer) td:nth-child(1) { display: none; }
  .preview-table col:nth-child(2) { width: var(--mobile-identity-width) !important; }
  .preview-table th:nth-child(2), .preview-table td:nth-child(2) { left: 0; width: var(--mobile-identity-width); padding: .25rem .5rem; box-shadow: 2px 0 5px rgb(23 32 42 / 10%); }
  .preview-table thead th:nth-child(2) { z-index: 5; }
  .preview-table .identity-secondary { display: block; margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .68rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

  .problem-table { --mobile-identity-width: clamp(150px, 42cqw, 176px); width: calc(var(--mobile-identity-width) + 282px); min-width: calc(var(--mobile-identity-width) + 282px); }
  .problem-table col.problem-contest-col, .problem-table col.problem-name-col,
  .problem-table tbody td:first-child, .problem-table .problem-name-cell,
  .problem-table #problem-name-column { display: none; }
  .problem-table col.problem-index-col { width: var(--mobile-identity-width) !important; }
  .problem-table #problem-contest-column, .problem-table .problem-identity-cell { position: sticky; left: 0; width: var(--mobile-identity-width); box-shadow: 2px 0 5px rgb(23 32 42 / 10%); }
  .problem-table #problem-contest-column { z-index: 5; background: #eef2f4; }
  .problem-table td.problem-identity-cell { z-index: 2; padding: .25rem .5rem; background: var(--paper); text-align: left; }
  .problem-identity-content { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0; line-height: 1.1; }
  .problem-identity-name { display: block; overflow: hidden; text-overflow: ellipsis; }
  .problem-identity-name::before { content: " · "; }
  .problem-table .identity-secondary { display: block; grid-column: 1 / -1; margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .68rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
@media (forced-colors: active) { .chart-line, .chart-dot, .problem-curve-line { stroke: CanvasText; } }
