:root {
  --surface: #fff;
  --slate: #52627a;
  --eyebrow: #92a1b7;
  --faint: #a0aec0;
  --badge-ink: #596e8e;
  --badge-bg: #f0f4fa;
  --subtle-bg: #fbfcfe;
  --subtle-ink: #718096;
  --gold-ink: #79551c;
  --gold-bg: #fff8e8;
  --silver-bg: #edf1f6;
  --bronze-ink: #885b3b;
  --bronze-bg: #faf0e7;
  --crown: #b58a32;
  --champion-fallback: #73519c;
  --extra-ink: #91a0b6;
  --button-hover: #275ccc;
  --button-border: #d9e1ec;
  --button-ink: #53647e;
  --button-subtle: #f2f6fc;
  --danger-bg: #b44f53;
  --table-head: #fafbfd;
  --empty-ink: #c7d0dd;
  --my-row: #f6f9ff;
  --error-ink: #b45353;
  --notice-border: #dbe6f6;
  --error-border: #efd8d8;
  --error-bg: #fff9f9;
  --success-border: #d3e8df;
  --success-bg: #f6fbf8;
  --empty-bg: #fcfdff;
  --empty-mark: #abc0e5;
  --withdraw-ink: #65748b;
  --input-border: #ccd6e4;
  --sync-error: #a1694b;
  --footer-ink: #8b98ab;
  --button-text: #fff;
  --champion-gradient: linear-gradient(105deg, #b54056, #9c620d, #327650, #3264a0, #784ca3, #b54056);
  color-scheme: light;
  --ink: #25334a;
  --muted: #758197;
  --line: #e6ebf1;
  --blue: #346cdd;
  --light: #f7f9fc;
  --green: #25866e;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--blue);
}

button,
input {
  font: inherit;
}

button,
a,
input {
  outline-offset: 4px;
}

button {
  cursor: pointer;
}

.container {
  width: min(1080px,calc(100% - 48px));
  margin: auto;
}

header {
  border-bottom: 1px solid var(--line);
}

nav {
  height: 82px;
  display: flex;
  align-items: center;
  gap: 56px;
}

.brand {
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-symbol {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nav-links,
.nav-account {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links {
  font-size: 14px;
}

.nav-links a {
  white-space: nowrap;
}

.nav-links [aria-current="page"] {
  color: var(--blue);
}

.nav-account {
  margin-left: auto;
  font-size: 13px;
  gap: 20px;
}

.login-link {
  color: var(--blue);
}

main {
  min-height: calc(100vh - 183px);
  padding-top: 52px;
  padding-bottom: 75px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.35;
  letter-spacing: -1.2px;
  margin-bottom: 12px;
  font-weight: 720;
}

h2 {
  font-size: 18px;
  letter-spacing: -.5px;
  font-weight: 650;
}

p {
  margin-bottom: 18px;
}

.eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 2px;
  color: var(--blue);
  margin-bottom: 14px;
}

.muted {
  color: var(--muted);
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
}

.page-heading p:last-child {
  margin-bottom: 0;
}

.week-date {
  font-size: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.badge {
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.round-meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 15px 0 30px;
  font-size: 12px;
  color: var(--muted);
  gap: 12px;
}

.round-meta strong {
  color: var(--ink);
  font-weight: 500;
  margin-left: 8px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  gap: 15px;
}

.section-heading h2 {
  margin: 0;
}

.section-heading>.muted {
  font-size: 12px;
}

.problem-list {
  border-top: 2px solid var(--slate);
  border-bottom: 1px solid var(--line);
}

.problem {
  display: flex;
  align-items: center;
  min-height: 83px;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.problem:last-child {
  border-bottom: 0;
}

.problem-number {
  color: var(--eyebrow);
  font-size: 18px;
  font-weight: 500;
  width: 28px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.problem-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 550;
}

.problem-name a {
  overflow-wrap: anywhere;
}

.cf-id {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  display: inline-block;
  min-width: 66px;
  margin-right: 8px;
}

.external {
  color: var(--faint);
  margin-left: 8px;
  font-size: 14px;
}

small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-top: 3px;
}

.problem-rating {
  width: 56px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}

.rating {
  font-size: 12px;
  border-radius: 4px;
  color: var(--badge-ink);
  background: var(--badge-bg);
  padding: 4px 9px;
  font-variant-numeric: tabular-nums;
}

.problem-check {
  width: 26px;
  text-align: center;
}

.solved {
  color: var(--green);
  font-weight: 700;
}

.locked {
  background: var(--subtle-bg);
}

.locked .problem-name {
  color: var(--subtle-ink);
  font-weight: 500;
}

.award-summary {
  margin-bottom: 32px;
}

.profile-statistics {
  margin-bottom: 32px;
}

.profile-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 14px 0 0;
}

.inline-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

.solve-icon {
  color: var(--green);
}

.empty-mark .inline-icon {
  width: 48px;
  height: 48px;
}

.post-icon,
.post-count {
  color: #b65b15;
}

.post-count {
  font-size: 10px;
  white-space: nowrap;
}

.completion-cell .post-count {
  grid-row: 1;
}

.official-rank {
  display: block;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.board-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.board-views {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border-radius: 6px;
  background: var(--light);
  font-size: 12px;
}

.board-views a {
  padding: 5px 10px;
  color: var(--muted);
}

.board-views a[aria-current] {
  background: var(--surface);
  border-radius: 4px;
  color: var(--ink);
}

.post-action {
  width: 240px;
  min-width: 0;
  flex-shrink: 0;
}

.post-action .action-feedback {
  white-space: nowrap;
  font-size: 11px;
}

:root[data-theme="dark"] .post-icon,
:root[data-theme="dark"] .post-count {
  color: #ffb967;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post-icon,
  :root:not([data-theme]) .post-count {
    color: #ffb967;
  }
}

.profile-stat dt {
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
}

.profile-stat dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 13px;
}

.profile-stat strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.award-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.reward-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

.reward-icon-gold {
  color: #a57924;
}

.reward-icon-silver {
  color: #6d8099;
}

.reward-icon-bronze {
  color: #a36a41;
}

.reward-icon-most_first_solves {
  color: var(--gold-ink);
}

.reward-icon-champion {
  color: var(--crown);
}

.reward-label,
.reward-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root[data-theme="dark"] .reward-icon-gold {
  color: #edcb83;
}

:root[data-theme="dark"] .reward-icon-silver {
  color: #bdcce0;
}

:root[data-theme="dark"] .reward-icon-bronze {
  color: #dfaa84;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .reward-icon-gold {
    color: #edcb83;
  }

  :root:not([data-theme]) .reward-icon-silver {
    color: #bdcce0;
  }

  :root:not([data-theme]) .reward-icon-bronze {
    color: #dfaa84;
  }
}

.award-badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--light);
  font-size: 11px;
}

.reward-guide-link {
  text-underline-offset: 3px;
}

.reward-guide-link:hover,
.reward-guide-link:focus-visible {
  text-decoration: underline;
}

.award-gold,
.award-most_first_solves {
  color: var(--gold-ink);
  background: var(--gold-bg);
}

.award-silver {
  color: var(--slate);
  background: var(--silver-bg);
}

.award-efficiency_king,
.award-efficiency_solver {
  color: var(--green);
  background: var(--light);
}

.reward-icon-efficiency_king,
.reward-icon-efficiency_solver {
  color: var(--green);
}

.award-bronze {
  color: var(--bronze-ink);
  background: var(--bronze-bg);
}

.award-ondal,
.reward-icon-ondal {
  color: var(--slate);
}

.award-ondal {
  background: var(--silver-bg);
}

.award-pyeonggang,
.reward-icon-pyeonggang {
  color: var(--blue);
}

.award-pyeonggang {
  background: var(--light);
}

.reward-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 110px;
  max-width: 260px;
  white-space: normal;
  margin: 0 auto;
}

.buff-record {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px;
  max-width: 100%;
}

.buff-period {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.buff-period time {
  white-space: nowrap;
}

.round-tabs {
  display: flex;
  height: auto;
  align-items: stretch;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.round-tabs a {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.round-tabs a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

.round-tabs + .warmup-section {
  margin-top: 0;
}

.round-results {
  min-width: 560px;
}

.round-results tbody th {
  min-width: 130px;
  max-width: 180px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.champion-name {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 5px;
  max-width: 100%;
}

.champion-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nav-username {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-username .champion-name {
  display: flex;
}

.nav-username .champion-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-heading .champion-crown {
  width: .8em;
  height: .8em;
}

.champion-crown {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--crown);
}

.champion-profile {
  position: relative;
}

.champion-profile h1 {
  overflow-wrap: anywhere;
}

.champion-profile .champion-crown {
  width: 27px;
  height: 27px;
}

.champion-text {
  color: var(--champion-fallback);
  background: var(--champion-gradient);
  background-size: 230% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: champion-rainbow 6s ease-in-out infinite alternate;
}

.champion-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 360px;
  pointer-events: none;
  z-index: 2;
}

.effects-paused .champion-text {
  animation-play-state: paused;
}

@keyframes champion-rainbow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .champion-text {
    animation: none;
    background-size: 100% 100%;
  }
}

@media (forced-colors: active) {
  .champion-text {
    background: none;
    -webkit-text-fill-color: LinkText;
  }
}

.extra-problem {
  background: var(--light);
}

.extra-number {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
}

.extra-label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--extra-ink);
}

.participation-bar {
  padding: 22px 24px;
  margin: 24px 0 48px;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
}

.participation-bar strong {
  font-weight: 600;
}

.button {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--button-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 550;
  border-radius: 5px;
  padding: 10px 18px;
  white-space: nowrap;
  line-height: 1.6;
}

.button:hover {
  color: var(--button-text);
  background: var(--button-hover);
}

.button.secondary {
  background: var(--surface);
  border-color: var(--button-border);
  color: var(--button-ink);
}

.button.secondary:hover {
  background: var(--button-subtle);
}

.button.danger {
  background: var(--danger-bg);
  border-color: var(--danger-bg);
}

.count {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.table-scroll {
  overflow: auto;
  border-top: 1px solid var(--line);
}

.badge-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.badge-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.badge-choice:hover {
  background: var(--light);
}

.badge-choice[aria-current="page"] {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--my-row);
}

.badge-personal-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 28px;
}

.badge-personal-summary strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.badge-ranking-heading {
  gap: 12px;
}

.badge-ranking-heading .text-link {
  font-size: 13px;
  white-space: nowrap;
}

.badge-ranking {
  table-layout: fixed;
}

.badge-ranking .badge-rank-column {
  width: 70px;
}

.badge-ranking .badge-count-column {
  width: 100px;
}

.badge-ranking .badge-user-link {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.badge-ranking .my-row {
  background: var(--my-row);
}

.badge-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
  font-size: 13px;
}

.badge-pagination .text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-page-previous .inline-icon {
  transform: rotate(180deg);
}

@media (max-width: 680px) {
  .badge-ranking .badge-rank-column {
    width: 48px;
  }

  .badge-ranking .badge-count-column {
    width: 72px;
  }

  .badge-ranking th,
  .badge-ranking td {
    padding: 12px 8px;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

th,
td {
  padding: 16px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

thead {
  background: var(--table-head);
  color: var(--muted);
}

thead th {
  font-size: 11px;
  font-weight: 500;
}

tbody th {
  font-weight: 500;
}

.left {
  text-align: left;
}

.rank {
  color: var(--muted);
}

.profile-completion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.first-solve-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--gold-ink);
  background: var(--gold-bg);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .participation-records th,
  .participation-records td {
    padding: 12px 6px;
  }

  .profile-completion {
    flex-direction: column;
    gap: 5px;
  }
}

.time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.empty-cell {
  color: var(--empty-ink);
}

.leaderboard-scroll {
  --summary-padding: 12px;
  --rank-padding: 16px;
  --participant-right-padding: 20px;
  --total-width: 48px;
  container-type: inline-size;
  background: linear-gradient(to bottom, var(--table-head) 47px, var(--line) 47px, var(--line) 48px, transparent 48px);
}

.leaderboard-heading,
.leaderboard-actions {
  flex-wrap: wrap;
}

.leaderboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.leaderboard-refresh {
  min-width: 84px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--blue);
  font-size: 12px;
  cursor: pointer;
}

.leaderboard-refresh:hover {
  background: var(--light);
}

.leaderboard-refresh:disabled {
  color: var(--muted);
  cursor: wait;
}

.leaderboard-feedback {
  font-size: 12px;
}

.leaderboard {
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
}

.leaderboard th,
.leaderboard td {
  background: var(--surface);
}

.leaderboard thead th {
  height: 48px;
  background: var(--table-head);
}

.leaderboard .extra-label {
  font-size: 8px;
  line-height: 9px;
}

.problem-header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--blue);
  text-underline-offset: 3px;
}

.problem-header-link:hover,
.problem-header-link:focus-visible {
  text-decoration: underline;
}

.leaderboard .my-row th,
.leaderboard .my-row td {
  background: var(--my-row);
}

.leaderboard td.first-solve {
  background: var(--gold-bg);
}

.leaderboard .my-row {
  position: relative;
}

.leaderboard .my-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  left: 100%;
  width: max(0px, calc(100cqw - 100%));
  background: var(--my-row);
  pointer-events: none;
}

.leaderboard .rank-column,
.leaderboard .participant-column {
  padding: 6px var(--summary-padding);
}

.leaderboard .rank-column {
  position: relative;
  padding-inline: var(--rank-padding);
  font-variant-numeric: tabular-nums;
}

.leaderboard .participant-column {
  padding-right: var(--participant-right-padding);
}

.leaderboard tbody .rank-column::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100cqw;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.participant-name {
  width: max-content;
  max-width: max(1ch, calc(100cqw - var(--rank-width, 48px) - var(--total-width) - 64px - var(--summary-padding) - var(--participant-right-padding)));
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 14px;
}

.leaderboard[data-sticky-ready] .rank-column,
.leaderboard[data-sticky-ready] .participant-column,
.leaderboard[data-sticky-ready] .total-column {
  position: sticky;
  z-index: 1;
}

.leaderboard[data-sticky-ready] .rank-column {
  left: 0;
}

.leaderboard[data-sticky-ready] .participant-column {
  left: var(--rank-width);
}

.leaderboard[data-sticky-ready] .total-column {
  left: calc(var(--rank-width) + var(--participant-width));
}

.leaderboard .problem-column,
.leaderboard .solved-column,
.leaderboard .total-column {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding: 6px 4px;
}

.leaderboard .total-column {
  position: relative;
  width: var(--total-width);
  min-width: var(--total-width);
  max-width: var(--total-width);
}

.leaderboard .solved-column {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.leaderboard .total-column::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

.attempt-cell,
.score-cell,
.completion-cell {
  display: grid;
  grid-template-rows: 12px 18px 14px;
  justify-items: center;
  align-items: center;
  width: 56px;
  margin: 0 auto;
  line-height: 1;
}

.completion-cell {
  width: 72px;
}

.score-cell {
  width: 100%;
}

.score-cell strong,
.completion-cell .solved-count {
  grid-row: 2;
}

.completion-cell > small {
  grid-row: 3;
}

.completion-cell .solved-count {
  font-weight: 400;
}

.completion-cell .post-count {
  grid-row: 1;
}

.attempt-count,
.attempt-time {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.attempt-failed {
  color: var(--error-ink);
}

.my-row {
  background: var(--my-row);
}

.empty-row {
  padding: 40px 20px;
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}

.footnote {
  font-size: 11px;
  color: var(--muted);
  margin: 14px 0 0;
  line-height: 1.9;
}

.notice {
  padding: 13px 18px;
  border: 1px solid var(--notice-border);
  background: var(--my-row);
  border-radius: 5px;
  margin-bottom: 25px;
  font-size: 13px;
}

.notice.error {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error-ink);
}

.notice.success {
  border-color: var(--success-border);
  background: var(--success-bg);
}

.empty-state {
  text-align: center;
  border: 1px solid var(--line);
  background: var(--empty-bg);
  border-radius: 8px;
  padding: 76px 24px;
  margin: 36px 0 70px;
}

.empty-state h2 {
  font-size: 21px;
}

.empty-state p {
  font-size: 14px;
  color: var(--muted);
}

.empty-mark {
  color: var(--empty-mark);
  font-size: 38px;
  font-weight: 300;
  margin-bottom: 22px;
}

.text-link {
  color: var(--blue);
  font-size: 13px;
}

.archive-list {
  border-top: 1px solid var(--line);
}

.archive-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
}

.archive-row>div {
  flex: 1;
}

.archive-row strong {
  font-size: 15px;
  font-weight: 550;
}

.account-panel {
  max-width: 480px;
  margin: 48px auto;
  padding: 0 16px;
}

.account-panel.wide {
  max-width: 640px;
}

.account-panel h1 {
  font-size: 28px;
}

.account-panel>p {
  line-height: 1.9;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.account-danger {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 22px;
  font-size: 12px;
  color: var(--muted);
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.profile-personal-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
}

.profile-personal-link > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-link-form {
  margin-top: 32px;
}

.profile-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#profile-link-feedback {
  font-size: 12px;
  white-space: nowrap;
}

.withdraw-notice {
  font-size: 13px;
  line-height: 1.9;
  color: var(--withdraw-ink);
  padding-left: 20px;
  margin-bottom: 30px;
}

.withdraw-notice li {
  margin-bottom: 8px;
}

label {
  display: block;
  font-size: 13px;
}

input {
  display: block;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  padding: 10px 12px;
  margin-top: 10px;
}

.sync-error {
  color: var(--sync-error);
}

footer {
  height: 100px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--footer-ink);
  font-size: 11px;
}

.skip {
  position: absolute;
  top: -60px;
  background: var(--surface);
  padding: 10px;
  z-index: 10;
}

.skip:focus {
  top: 0;
}

@media (max-width: 680px) {
  .leaderboard-scroll {
    --summary-padding: 8px;
    --rank-padding: 8px;
    --participant-right-padding: 8px;
  }

  .container {
    width: calc(100% - 32px);
  }

  nav {
    height: 70px;
    gap: 25px;
  }

  .brand {
    font-size: 22px;
  }

  .nav-links {
    gap: 18px;
    font-size: 12px;
  }

  .nav-account {
    gap: 12px;
    font-size: 11px;
  }

  .nav-account>a:first-child:not(.login-link) {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  main {
    padding-top: 32px;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
    gap: 18px;
  }

  h1 {
    font-size: 27px;
  }

  .week-date {
    font-size: 12px;
  }

  .round-meta {
    flex-direction: column;
    gap: 5px;
    padding-bottom: 25px;
  }

  .section-heading>.muted {
    font-size: 10px;
  }

  .section-heading h2 {
    font-size: 16px;
  }

  .problem {
    padding: 15px 10px;
    gap: 12px;
    min-height: 88px;
  }

  .problem-number {
    width: 23px;
    font-size: 15px;
  }

  .problem-name {
    font-size: 13px;
  }

  .cf-id {
    display: block;
    font-size: 10px;
    margin-bottom: 3px;
  }

  .problem-rating {
    width: 43px;
  }

  .rating {
    padding: 3px 6px;
    font-size: 11px;
  }

  .problem-check {
    width: 16px;
  }

  .external {
    display: none;
  }

  .participation-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
    margin-bottom: 34px;
  }

  .participation-bar>.button,
  .participation-bar>form {
    align-self: flex-end;
  }

  .empty-state {
    padding: 55px 20px;
  }

  .account-panel {
    margin: 25px auto;
  }

  footer {
    font-size: 10px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
  }

  .time {
    font-size: 10px;
  }

  th,
  td {
    padding: 14px 12px;
  }

}

.theme-name {
  color: var(--blue);
  font-weight: 600;
}

.theme-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
}

.theme-toggle:hover {
  background: var(--light);
}

.action-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
}

.action-feedback {
  min-height: 20px;
  max-width: 320px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.action-feedback[data-state="success"] {
  color: var(--green);
}

.action-feedback[data-state="error"] {
  color: var(--error-ink);
}

.leaderboard-heading {
  align-items: flex-start;
}

.submit-action button:disabled {
  color: var(--muted);
  cursor: default;
}

#back-top {
  position: fixed;
  z-index: 6;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 12px #0002;
}

@media (max-width: 680px) {
  header nav {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-block: 10px;
  }

  header .nav-links {
    order: 3;
    flex-basis: 100%;
  }

  .nav-account {
    gap: 8px;
  }

  .submit-action {
    align-self: stretch;
  }

  .leaderboard-heading > .action-group {
    width: 100%;
  }

  footer {
    padding-right: 52px;
  }
}

.warmup-section {
  margin-top: 32px;
}


:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #141b26;
  --ink: #dce5f3;
  --muted: #a0adc1;
  --line: #303c50;
  --blue: #8ab4ff;
  --light: #1b2534;
  --green: #74d3b5;
  --slate: #c4d0e1;
  --eyebrow: #a0adc1;
  --faint: #a0adc1;
  --badge-ink: #bfd0eb;
  --badge-bg: #27344a;
  --subtle-bg: #1b2534;
  --subtle-ink: #a0adc1;
  --gold-ink: #edcb83;
  --gold-bg: #352d20;
  --silver-bg: #2b3545;
  --bronze-ink: #e1b396;
  --bronze-bg: #382b26;
  --crown: #edcb83;
  --champion-fallback: #c7a7ee;
  --champion-gradient: linear-gradient(105deg, #f49baa, #edc184, #91d7ac, #91bdf4, #c7a7ee, #f49baa);
  --extra-ink: #a0adc1;
  --button-hover: #a8c7ff;
  --button-border: #303c50;
  --button-ink: #dce5f3;
  --button-subtle: #1b2534;
  --button-text: #141b26;
  --danger-bg: #f1a0a7;
  --table-head: #1b2534;
  --empty-ink: #a0adc1;
  --my-row: #202f46;
  --error-ink: #f1a0a7;
  --notice-border: #354b6b;
  --error-border: #634148;
  --error-bg: #302229;
  --success-border: #305849;
  --success-bg: #1b2c28;
  --empty-bg: #182130;
  --empty-mark: #91a7ca;
  --withdraw-ink: #a0adc1;
  --input-border: #46546a;
  --sync-error: #e1b396;
  --footer-ink: #a0adc1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface: #141b26;
    --ink: #dce5f3;
    --muted: #a0adc1;
    --line: #303c50;
    --blue: #8ab4ff;
    --light: #1b2534;
    --green: #74d3b5;
    --slate: #c4d0e1;
    --eyebrow: #a0adc1;
    --faint: #a0adc1;
    --badge-ink: #bfd0eb;
    --badge-bg: #27344a;
    --subtle-bg: #1b2534;
    --subtle-ink: #a0adc1;
    --gold-ink: #edcb83;
    --gold-bg: #352d20;
    --silver-bg: #2b3545;
    --bronze-ink: #e1b396;
    --bronze-bg: #382b26;
    --crown: #edcb83;
    --champion-fallback: #c7a7ee;
    --champion-gradient: linear-gradient(105deg, #f49baa, #edc184, #91d7ac, #91bdf4, #c7a7ee, #f49baa);
    --extra-ink: #a0adc1;
    --button-hover: #a8c7ff;
    --button-border: #303c50;
    --button-ink: #dce5f3;
    --button-subtle: #1b2534;
    --button-text: #141b26;
    --danger-bg: #f1a0a7;
    --table-head: #1b2534;
    --empty-ink: #a0adc1;
    --my-row: #202f46;
    --error-ink: #f1a0a7;
    --notice-border: #354b6b;
    --error-border: #634148;
    --error-bg: #302229;
    --success-border: #305849;
    --success-bg: #1b2c28;
    --empty-bg: #182130;
    --empty-mark: #91a7ca;
    --withdraw-ink: #a0adc1;
    --input-border: #46546a;
    --sync-error: #e1b396;
    --footer-ink: #a0adc1;
  }
}