/* ============================================================================
   usaco-en · usaco-pages.css · "USACO Elite" component library · 2026-07-15
   Cyber-academic terminal system · tokens in chrome.css :root (--el-*)
   Serif display + Hanken body + JetBrains Mono terminal decorators.
   ============================================================================ */

/* subtle blueprint grid background for the whole page canvas */
.usaco-page {
  background-color: var(--el-bg);
  background-image:
    linear-gradient(to right, rgba(0,65,168,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,65,168,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- shared section kit ---- */
.usaco-section { padding: 72px 0; }
.usaco-section + .usaco-section { padding-top: 8px; }

.usaco-kicker {
  display: inline-block; font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--el-primary); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
}
.usaco-kicker--pill {
  background: var(--el-primary-fixed); color: var(--el-primary-ink);
  padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
}
.usaco-kicker--pill svg { display: block; }

.usaco-h1 {
  font-family: var(--f-serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(36px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--el-ink); margin: 6px 0 20px;
}
.usaco-h1 em { font-style: italic; color: var(--el-primary); }
.usaco-h2 {
  font-family: var(--f-serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.14; letter-spacing: -0.01em;
  color: var(--el-ink); margin: 0 0 16px;
}
.usaco-h2 em { font-style: italic; color: var(--el-primary); }
.usaco-lead { font-family: var(--f-sans); font-size: 17.5px; line-height: 1.7; color: var(--el-body); max-width: 560px; margin: 0 0 26px; }
.usaco-copy { font-family: var(--f-sans); font-size: 15.5px; line-height: 1.75; color: var(--el-body); max-width: 720px; margin: 0 0 22px; }
.usaco-source-note { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin: 18px 0 0; letter-spacing: 0.01em; }
.usaco-source-note a { color: var(--el-primary); text-decoration: none; }
.usaco-inline-link-row { font-family: var(--f-sans); font-size: 14.5px; color: var(--el-body); margin: 26px 0 0; }
.usaco-inline-link-row a { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--el-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--el-primary-fixed); }
.usaco-inline-link-row a:hover { border-bottom-color: var(--el-primary); }

/* buttons */
.usaco-btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.usaco-btn-primary {
  display: inline-flex; align-items: center; gap: 9px; background: var(--el-primary); color: #fff;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 14px 26px; border-radius: 3px; text-decoration: none; transition: background .15s;
}
.usaco-btn-primary:hover { background: var(--el-primary-bright); color: #fff; }
.usaco-btn-primary svg { transition: transform .15s; }
.usaco-btn-primary:hover svg { transform: translateX(3px); }
.usaco-btn-ghost {
  display: inline-flex; align-items: center; border: 1.5px solid var(--el-border); color: var(--el-primary);
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 13px 24px; border-radius: 3px; text-decoration: none; transition: border-color .15s;
}
.usaco-btn-ghost:hover { border-color: var(--el-primary); }

/* numbered / bracketed section header: 01 // TITLE  ......  [ LABEL ] */
.usaco-numsec { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--el-border); flex-wrap: wrap; }
.usaco-numsec .n { font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--el-primary); }
.usaco-numsec .usaco-h2 { margin: 0; }
.usaco-numsec .tag { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--el-outline); }

/* section head band: kicker+title left | direct-answer copy right */
.usaco-sechead {
  display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); column-gap: 64px; align-items: start;
  padding-bottom: 30px; margin-bottom: 38px; border-bottom: 1px solid var(--el-border);
}
.usaco-sechead .usaco-h2 { margin-bottom: 0; }
.usaco-sechead > .usaco-copy { margin: 6px 0 0; max-width: none; }

/* figures */
.usaco-figure { margin: 34px 0 0; }
.usaco-figure img { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--el-border); border-radius: 4px; box-sizing: border-box; }
.usaco-figure figcaption { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin-top: 10px; line-height: 1.6; }
.usaco-figure figcaption a { color: var(--el-primary); text-decoration: none; }
.usaco-figure-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
/* 🔴 center the IMAGE, not the figure (fit-content was sized by the long caption,
   stranding small images left with a big empty right). Image block-centered +
   caption centered = a proper centered figure at any image width. */
.usaco-figure-center img { margin-left: auto; margin-right: auto; }
.usaco-figure-center figcaption { text-align: center; }
.usaco-photo-band { margin: 44px 0 0; }
.usaco-photo-band img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 6px; border: 1px solid var(--el-border); }
.usaco-photo-band figcaption { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin-top: 10px; line-height: 1.6; }
.usaco-photo-band figcaption a { color: var(--el-primary); text-decoration: none; }

/* ---- 01 hero ---- */
.usaco-hero { padding: 76px 0 60px; }
.usaco-hero-grid { display: grid; grid-template-columns: minmax(0, 6.5fr) minmax(340px, 5fr); gap: 48px; align-items: center; }
.usaco-hero-main { display: flex; flex-direction: column; align-items: flex-start; }

/* ---- terminal window (schedule log / code panel) ---- */
.usaco-terminal { border: 1px solid var(--el-border); border-radius: 6px; overflow: hidden; background: var(--el-surface); box-shadow: 0 8px 30px rgba(25,27,35,.06); }
.usaco-terminal-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--el-surface-c); border-bottom: 1px solid var(--el-border); }
.usaco-terminal-dots { display: flex; gap: 7px; }
.usaco-terminal-dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.usaco-terminal-dots i:nth-child(1){ background:#e0524a; } .usaco-terminal-dots i:nth-child(2){ background:#e8b74a; } .usaco-terminal-dots i:nth-child(3){ background:var(--el-primary); }
.usaco-terminal-path { font-family: var(--f-mono); font-size: 12px; color: var(--el-outline); }
.usaco-terminal-body { padding: 18px 20px; background: var(--el-surface); overflow-x: auto; }
.usaco-logtable { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12.5px; }
.usaco-logtable th { text-align: left; padding: 0 14px 12px 0; font-weight: 500; color: var(--el-primary); border-bottom: 1px solid var(--el-border); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.usaco-logtable th:last-child, .usaco-logtable td:last-child { text-align: right; padding-right: 0; }
.usaco-logtable td { padding: 11px 14px 11px 0; border-bottom: 1px solid rgba(195,198,215,.4); color: var(--el-body); }
.usaco-logtable tr:last-child td { border-bottom: none; }
.usaco-logtable .ph { color: var(--el-ink); }
.usaco-logtable .st-done { color: var(--el-outline); }
.usaco-logtable .st-up { color: var(--el-primary); font-weight: 600; }
.usaco-logtable tr.is-next { background: var(--el-primary-fixed); }
.usaco-logtable tr.is-next td { color: var(--el-primary-ink); border-color: rgba(0,65,168,.15); }

/* ---- division metal cards (staggered) ---- */
.usaco-metal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 8px; }
.usaco-metal-card { position: relative; border: 1px solid var(--el-border); border-radius: 6px; padding: 24px 22px 26px; background: var(--el-surface); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.usaco-metal-card:hover { border-color: rgba(0,65,168,.5); box-shadow: 0 10px 26px rgba(25,27,35,.08); transform: translateY(-3px); }
.usaco-metal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.usaco-metal-card.bz::before { background: var(--el-bronze); } .usaco-metal-card.sv::before { background: var(--el-silver); }
.usaco-metal-card.gd::before { background: var(--el-gold); } .usaco-metal-card.pt::before { background: var(--el-primary); }
.usaco-metal-card .idx { position: absolute; top: 0; right: 0; background: var(--el-surface-c); color: var(--el-outline); font-family: var(--f-mono); font-size: 10px; padding: 4px 8px; border-bottom-left-radius: 4px; }
.usaco-metal-card .mlabel { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 4px 0 6px; }
.usaco-metal-card.bz .mlabel { color: var(--el-bronze-ink); } .usaco-metal-card.sv .mlabel { color: var(--el-silver-ink); }
.usaco-metal-card.gd .mlabel { color: var(--el-gold-ink); } .usaco-metal-card.pt .mlabel { color: var(--el-primary); }
.usaco-metal-card .cut { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin: 0 0 12px; }
.usaco-metal-card p.topics { font-family: var(--f-sans); font-size: 13.5px; line-height: 1.6; color: var(--el-body); margin: 0; }
@media (min-width: 1024px) {
  .usaco-metal-card.sv { transform: translateY(14px); } .usaco-metal-card.sv:hover { transform: translateY(11px); }
  .usaco-metal-card.gd { transform: translateY(28px); } .usaco-metal-card.gd:hover { transform: translateY(25px); }
  .usaco-metal-card.pt { transform: translateY(42px); } .usaco-metal-card.pt:hover { transform: translateY(39px); }
}

/* ---- stat blocks (big serif number + blue left-border + mono caps) ---- */
.usaco-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.usaco-stat { border-left: 4px solid var(--el-primary); padding: 6px 0 6px 20px; background: var(--el-surface); }
.usaco-stat strong { display: block; font-family: var(--f-serif); font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.01em; color: var(--el-primary); font-variant-numeric: tabular-nums; line-height: 1.05; }
.usaco-stat strong .u { color: var(--el-ink); }
.usaco-stat span { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--el-outline); margin-top: 8px; line-height: 1.5; }
.usaco-stat.plain { border-left-color: var(--el-border); }
.usaco-stat.plain strong { color: var(--el-ink); }

/* ---- format grid cells ---- */
.usaco-format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--el-border); border-radius: 6px; overflow: hidden; margin-top: 30px; background: var(--el-surface); }
.usaco-format-cell { padding: 26px 28px; border-right: 1px solid var(--el-border); }
.usaco-format-cell:last-child { border-right: none; }
.usaco-format-cell h3 { font-family: var(--f-serif); font-weight: 700; font-size: 18px; color: var(--el-ink); margin: 0 0 10px; }
.usaco-format-cell p { font-family: var(--f-sans); font-size: 14px; line-height: 1.7; color: var(--el-body); margin: 0; }
.usaco-format-cell a { color: var(--el-primary); font-weight: 600; text-decoration: none; }
.usaco-cell-icon { display: inline-flex; width: 34px; height: 34px; border-radius: 4px; background: var(--el-primary-fixed); color: var(--el-primary); align-items: center; justify-content: center; margin-bottom: 12px; }
.usaco-cell-icon svg { display: block; }

/* ---- alert / protocol cards ---- */
.usaco-alert { position: relative; border-radius: 6px; padding: 28px 30px; overflow: hidden; margin-bottom: 20px; }
.usaco-alert.crit { background: var(--el-alert-bg); border: 1px solid #f3b7b2; }
.usaco-alert.info { background: rgba(13,87,214,.06); border: 1px solid rgba(13,87,214,.28); }
.usaco-alert .sys { position: absolute; top: 14px; right: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; }
.usaco-alert.crit .sys { color: rgba(143,20,20,.7); } .usaco-alert.info .sys { color: rgba(0,65,168,.6); }
.usaco-alert h3 { display: flex; align-items: center; gap: 12px; font-family: var(--f-serif); font-weight: 700; font-size: 24px; margin: 0 0 12px; }
.usaco-alert.crit h3 { color: var(--el-alert-ink); } .usaco-alert.info h3 { color: var(--el-primary); }
.usaco-alert p { font-family: var(--f-sans); font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
.usaco-alert.crit p { color: #6f2b28; } .usaco-alert.info p { color: var(--el-ink); }
.usaco-sev { display: inline-block; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; color: #fff; }
.usaco-sev.crit { background: var(--el-alert); } .usaco-sev.high { background: var(--el-high); }

/* ---- data / ranking table ---- */
.usaco-ranktable { width: 100%; table-layout: fixed; border-collapse: collapse; }
.usaco-ranktable th { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--el-outline); text-align: left; padding: 0 12px 12px 0; border-bottom: 1px solid var(--el-border); }
.usaco-ranktable th:last-child, .usaco-ranktable td:last-child { text-align: right; padding-right: 0; }
.usaco-ranktable td { font-family: var(--f-mono); font-size: 13px; padding: 13px 12px 13px 0; border-bottom: 1px solid rgba(195,198,215,.5); color: var(--el-body); }
.usaco-ranktable td.div { color: var(--el-ink); font-weight: 600; }
.usaco-ranktable tr:last-child td { border-bottom: none; }

/* ---- blue CTA / projection card ---- */
.usaco-cta-blue { background: var(--el-primary-bright); color: #fff; border-radius: 8px; padding: 26px; text-align: center; }
.usaco-cta-blue .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .85; margin: 0 0 8px; }
.usaco-cta-blue .big { font-family: var(--f-serif); font-weight: 800; font-size: 24px; margin: 0; }

/* ---- side panel (dashboard module) ---- */
.usaco-panel { background: var(--el-surface-c); border: 1px solid var(--el-border); border-radius: 8px; padding: 26px; }
.usaco-panel-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--el-primary); border-bottom: 1px solid rgba(0,65,168,.25); padding-bottom: 12px; margin: 0 0 18px; }
.usaco-panel-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--el-outline); margin: 0 0 16px; }

/* ---- node card (resource) ---- */
.usaco-node-card { position: relative; background: var(--el-surface); border: 1px solid var(--el-border); border-radius: 6px; padding: 24px 24px 26px 28px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.usaco-node-card:hover { border-color: var(--el-primary); box-shadow: 0 10px 26px rgba(25,27,35,.07); }
.usaco-node-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--el-primary); }
.usaco-node-card .idx { position: absolute; top: 16px; right: 16px; font-family: var(--f-mono); font-size: 10px; color: var(--el-outline); border: 1px solid var(--el-border); padding: 3px 8px; border-radius: 3px; }
.usaco-node-card h3 { font-family: var(--f-serif); font-weight: 700; font-size: 21px; color: var(--el-ink); margin: 8px 0 8px; }
.usaco-node-card p { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.65; color: var(--el-body); margin: 0 0 14px; }
.usaco-node-card a { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--el-primary); font-weight: 600; text-decoration: none; }

/* ---- outcomes dark section ---- */
.usaco-outcomes-section { background: var(--el-ink); border-radius: 8px; }
.usaco-outcomes-section .usaco-kicker { color: #8fb4f5; }
.usaco-outcomes-section .usaco-h2 { color: #fff; }
.usaco-outcomes-section .usaco-h2 em { color: #8fb4f5; }
.usaco-outcomes-section .usaco-copy { color: #b9bfce; }
.usaco-outcomes-section .usaco-inline-link-row a { color: #8fb4f5; border-bottom-color: rgba(143,180,245,.3); }
.usaco-outcomes-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }

/* ---- slideshow (usaco.js) ---- */
.usaco-slides { position: relative; aspect-ratio: 16 / 10; }
.usaco-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.usaco-slide.is-active { opacity: 1; pointer-events: auto; }
.usaco-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #2f3340; border-radius: 6px; box-sizing: border-box; }
.usaco-slide--contain img { object-fit: contain; background: #0b1020; }
.usaco-slide figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); background: rgba(25,27,35,.8); color: #c7cdda; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; padding: 7px 12px; border-radius: 4px; }
.usaco-slide figcaption a { color: #8fb4f5; text-decoration: none; }
.usaco-slide-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.usaco-slide-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.usaco-slide-dots button::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3a3f4c; transition: background .2s, transform .2s; }
.usaco-slide-dots button:hover::after { background: var(--el-primary-bright); }
.usaco-slide-dots button.is-active::after { background: #8fb4f5; transform: scale(1.25); }

/* ---- news (shortcode output) ---- */
.usaco-home-news { margin-top: 8px; }
.usaco-home-news-row { display: grid; grid-template-columns: 132px 1fr; column-gap: 30px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--el-border); }
.usaco-home-news-date { font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--el-primary); }
.usaco-home-news-title { margin: 0; }
.usaco-home-news-title a { font-family: var(--f-serif); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.35; color: var(--el-ink); text-decoration: none; }
.usaco-home-news-title a:hover { color: var(--el-primary); }
.usaco-home-news-empty { font-family: var(--f-mono); color: var(--el-outline); font-size: 13.5px; }

/* ---- cta section ---- */
.usaco-cta-section { padding: 64px 0 88px; }
.usaco-sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }

/* ============================================================================
   inner-page kit (guide/rules/…) — kept, restyled to Elite tokens
   ============================================================================ */
.usaco-page-hero { padding: 64px 0 56px; border-left: 4px solid var(--el-primary); padding-left: 28px; }
.usaco-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.usaco-2col > *, .usaco-splitfig > * { min-width: 0; }
.usaco-2col .usaco-copy { max-width: none; }
.usaco-splitfig { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px 56px; align-items: center; }
.usaco-splitfig .usaco-copy { max-width: none; }
.usaco-splitfig .usaco-figure { margin: 0; }
/* 🔴 side-by-side figures render inside a FIXED-height equal-aspect frame
   (object-fit:contain) so a tall/portrait image can't tower over short text and
   open a vertical void — and the reserved height prevents lazy-load layout shift.
   Portrait screenshots sit letterboxed on a light surface (reads as a framed shot);
   landscape photos fill it. */
.usaco-splitfig .usaco-figure img,
.usaco-2col .usaco-figure img {
  width: 100%; height: 280px; object-fit: contain; object-position: center;
  background: var(--el-surface-low); border: 1px solid var(--el-border); border-radius: 4px;
}
@media (max-width: 960px) {
  .usaco-2col, .usaco-splitfig { align-items: start; }
  .usaco-splitfig .usaco-figure img, .usaco-2col .usaco-figure img { height: auto; max-height: 70vh; }
}

.usaco-divdetail { margin-top: 8px; }
.usaco-divrow { display: grid; grid-template-columns: 220px 1fr; column-gap: 44px; padding: 28px 0 28px 20px; border-bottom: 1px solid var(--el-border); border-left: 4px solid var(--el-border); }
.usaco-divrow.bz { border-left-color: var(--el-bronze); } .usaco-divrow.sv { border-left-color: var(--el-silver); }
.usaco-divrow.gd { border-left-color: var(--el-gold); } .usaco-divrow.pt { border-left-color: var(--el-primary); }
.usaco-divrow h3 { font-family: var(--f-serif); font-weight: 700; font-size: 22px; color: var(--el-ink); margin: 0; }
.usaco-divrow .who { font-family: var(--f-mono); font-size: 12px; color: var(--el-outline); margin: 6px 0 0; grid-column: 1; text-transform: uppercase; letter-spacing: 0.03em; }
.usaco-divrow p:not(.who) { grid-column: 2; grid-row: 1 / 4; font-family: var(--f-sans); font-size: 15px; line-height: 1.75; color: var(--el-body); margin: 0; }
.usaco-divmeter { display: flex; gap: 4px; margin-top: 10px; grid-column: 1; }
.usaco-divmeter i { width: 26px; height: 6px; border-radius: 2px; background: var(--el-border); }
.usaco-divrow.bz .usaco-divmeter i.on { background: var(--el-bronze); } .usaco-divrow.sv .usaco-divmeter i.on { background: var(--el-silver); }
.usaco-divrow.gd .usaco-divmeter i.on { background: var(--el-gold); } .usaco-divrow.pt .usaco-divmeter i.on { background: var(--el-primary); }

/* five-step stepper */
.usaco-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; counter-reset: usaco-step; }
.usaco-steps li { counter-increment: usaco-step; border-top: 3px solid var(--el-primary-fixed); padding-top: 16px; }
.usaco-steps li::before { content: counter(usaco-step, decimal-leading-zero); display: block; font-family: var(--f-mono); font-weight: 600; font-size: 20px; color: var(--el-primary); margin-bottom: 10px; }
.usaco-steps h3 { font-family: var(--f-serif); font-weight: 700; font-size: 16.5px; color: var(--el-ink); margin: 0 0 8px; }
.usaco-steps p { font-family: var(--f-sans); font-size: 13.5px; line-height: 1.65; color: var(--el-body); margin: 0; }
.usaco-steps a { color: var(--el-primary); font-weight: 600; text-decoration: none; }

/* FAQ (details/summary · GEO) */
.usaco-faq { margin-top: 26px; max-width: 820px; border-top: 1px solid var(--el-border); }
.usaco-faq.usaco-faq-grid { display: block; column-count: 2; column-gap: 16px; max-width: none; border-top: none; }
.usaco-faq-item { border-bottom: 1px solid var(--el-border); }
.usaco-faq-grid .usaco-faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; border: 1px solid var(--el-border); border-radius: 6px; padding: 0 20px; margin-bottom: 16px; background: var(--el-surface); }
.usaco-faq-item summary { cursor: pointer; list-style: none; position: relative; font-family: var(--f-serif); font-weight: 700; font-size: 17px; color: var(--el-ink); padding: 18px 44px 18px 0; }
.usaco-faq-item summary::-webkit-details-marker { display: none; }
.usaco-faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-weight: 600; font-size: 20px; color: var(--el-primary); transition: transform .2s; }
.usaco-faq-item[open] summary::after { content: "\2212"; }
.usaco-faq-item summary:hover { color: var(--el-primary); }
.usaco-faq-item p { font-family: var(--f-sans); font-size: 15px; line-height: 1.75; color: var(--el-body); margin: 0 0 20px; max-width: 720px; }

/* contest-window info-graphic (guide) */
.usaco-window { margin: 0; }
.usaco-window-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 84px; border: 1px solid var(--el-border); border-radius: 4px; background: var(--el-surface); }
.usaco-window-track .day { border-right: 1px dashed var(--el-border); padding: 8px 0 0 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--el-outline); text-transform: uppercase; }
.usaco-window-track .day:last-child { border-right: none; }
.usaco-window-slot { position: absolute; top: 38px; height: 30px; border-radius: 3px; background: var(--el-primary); display: flex; align-items: center; justify-content: center; }
.usaco-window-slot span { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; padding: 0 10px; }
.usaco-window-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--el-gold); }
.usaco-window-marker em { position: absolute; bottom: 7px; left: 8px; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; line-height: 1.45; color: var(--el-gold-ink); white-space: nowrap; }
.usaco-window-caption { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin-top: 12px; line-height: 1.6; }
.usaco-verdict { margin: 0; }
.usaco-verdict-boxes { display: flex; gap: 5px; flex-wrap: wrap; }
.usaco-verdict-boxes span { width: 34px; height: 34px; border-radius: 3px; background: #0b7a4b; color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.usaco-verdict-boxes span.t { background: var(--el-alert); }
.usaco-verdict-note { font-family: var(--f-mono); font-size: 11.5px; color: var(--el-outline); margin: 10px 0 0; }
.usaco-scorebar { display: flex; align-items: stretch; margin: 22px 0 0; }
.usaco-scorebar > div { flex: 1; background: var(--el-primary-fixed); border: 1px solid rgba(0,65,168,.2); border-right: none; padding: 10px 14px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--el-primary); }
.usaco-scorebar > div:first-child { border-radius: 3px 0 0 3px; }
.usaco-scorebar > div em { display: block; font-style: normal; font-weight: 600; font-size: 15px; color: var(--el-primary); margin-top: 2px; }
.usaco-scorebar-total { background: var(--el-primary); color: #fff; border-radius: 0 3px 3px 0; padding: 14px 18px; font-family: var(--f-mono); font-weight: 600; font-size: 15px; white-space: nowrap; display: flex; align-items: center; }

/* ---- about: scan-friendly organization dossier ---- */
.usaco-copy--wide { max-width: 900px; }
.usaco-history-log { background: var(--el-surface); border: 1px solid var(--el-border); border-radius: 7px; overflow: hidden; }
.usaco-history-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); border-bottom: 1px solid var(--el-border); }
.usaco-history-row:last-child { border-bottom: 0; }
.usaco-history-row time { display: grid; place-items: center; min-height: 130px; background: rgba(13,87,214,.055); border-right: 1px solid var(--el-border); color: var(--el-primary); font-family: var(--f-serif); font-size: 30px; font-weight: 800; }
.usaco-history-row > div { padding: 24px 30px 22px; }
.usaco-history-code { display: inline-block; color: var(--el-primary); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.usaco-history-row h3 { margin: 4px 0 5px; color: var(--el-ink); font-family: var(--f-serif); font-size: 20px; }
.usaco-history-row p { max-width: 820px; margin: 0; color: var(--el-body); font-family: var(--f-sans); font-size: 14.5px; line-height: 1.62; }

.usaco-pipeline { display: grid; grid-template-columns: repeat(11, minmax(0, auto)); align-items: stretch; gap: 8px; margin: 34px 0 22px; }
.usaco-pipeline > i { align-self: center; color: var(--el-outline); font-family: var(--f-mono); font-size: 19px; font-style: normal; }
.usaco-pipeline-node { min-width: 108px; padding: 17px 14px; background: var(--el-surface); border: 1px solid var(--el-border); border-top: 3px solid var(--el-outline); border-radius: 5px; }
.usaco-pipeline-node span, .usaco-pipeline-node small { display: block; font-family: var(--f-mono); }
.usaco-pipeline-node span { margin-bottom: 16px; color: var(--el-outline); font-size: 10px; }
.usaco-pipeline-node strong { display: block; color: var(--el-ink); font-family: var(--f-serif); font-size: 16px; }
.usaco-pipeline-node small { margin-top: 5px; color: var(--el-outline); font-size: 9.5px; }
.usaco-pipeline-node--active { background: rgba(13,87,214,.06); border-color: rgba(13,87,214,.35); border-top-color: var(--el-primary); }
.usaco-pipeline-node--team { background: var(--el-ink); border-color: var(--el-ink); border-top-color: #8fb4f5; }
.usaco-pipeline-node--team span, .usaco-pipeline-node--team small { color: #9ea8be; }
.usaco-pipeline-node--team strong { color: #fff; }
.usaco-fact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.usaco-fact-pair article { padding: 22px 24px; background: var(--el-surface-c); border: 1px solid var(--el-border); border-radius: 5px; }
.usaco-fact-pair span { color: var(--el-primary); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.usaco-fact-pair h3 { margin: 5px 0 6px; color: var(--el-ink); font-family: var(--f-serif); font-size: 19px; }
.usaco-fact-pair p { margin: 0; color: var(--el-body); font-family: var(--f-sans); font-size: 14px; line-height: 1.6; }

.usaco-independence-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 18px; align-items: stretch; }
.usaco-independence-grid .usaco-alert { margin: 0; }
.usaco-official-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--el-primary); font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.usaco-source-card { padding: 28px 30px; background: var(--el-ink); border-radius: 6px; color: #fff; }
.usaco-source-card .usaco-history-code { color: #8fb4f5; }
.usaco-source-card h3 { margin: 8px 0 14px; font-family: var(--f-serif); font-size: 21px; }
.usaco-source-card ul { margin: 0 0 16px; padding-left: 18px; color: #c7cdda; font-family: var(--f-sans); font-size: 13.5px; line-height: 1.6; }
.usaco-source-card nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.usaco-source-card nav a { display: inline-flex; align-items: center; min-height: 44px; color: #8fb4f5; font-family: var(--f-mono); font-size: 11px; font-weight: 600; text-decoration: none; text-transform: uppercase; }

/* ---- reusable computer-first visuals, replacing duplicated screenshots ---- */
.usaco-archive-console { overflow: hidden; margin-top: 30px; background: #11141c; border: 1px solid #2f3545; border-radius: 7px; box-shadow: 0 18px 38px rgba(22,27,38,.12); }
.usaco-archive-head { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; background: #1d2230; border-bottom: 1px solid #343b4e; color: #9ba7be; font-family: var(--f-mono); font-size: 11px; }
.usaco-archive-head b { color: #8fb4f5; font-weight: 500; }
.usaco-archive-body { padding: 6px 18px; }
.usaco-archive-body code { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; padding: 15px 0; border-bottom: 1px solid #2d3342; color: #f2f5fb; font-family: var(--f-mono); font-size: 12px; }
.usaco-archive-body code:last-child { border-bottom: 0; }
.usaco-archive-body i { color: #8fb4f5; font-style: normal; }
.usaco-archive-body em { color: #8dd7ae; font-style: normal; }
.usaco-archive-console > a { display: flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--el-primary); color: #fff; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }

.usaco-medal-card { display: grid; grid-template-columns: minmax(180px, .82fr) minmax(0, 1fr); overflow: hidden; margin: 0; background: #10131b; border: 1px solid #343a4a; border-radius: 7px; }
.usaco-medal-card__image { min-height: 330px; background: #090c13; }
.usaco-medal-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.usaco-medal-card figcaption { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.usaco-medal-card figcaption span { color: #8fb4f5; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; }
.usaco-medal-card figcaption strong { margin: 10px 0 24px; color: #fff; font-family: var(--f-serif); font-size: 22px; line-height: 1.2; }
.usaco-medal-card figcaption small { color: #8f98aa; font-family: var(--f-mono); font-size: 9.5px; line-height: 1.55; }

/* ---- long-form content hierarchy -------------------------------------------
   Body copy uses the full available content width. Only intentional summary
   and comparison components are boxed; ordinary paragraphs remain unframed. */
.usaco-copy {
  max-width: none;
  font-size: 16px;
  line-height: 1.8;
  text-wrap: pretty;
}

.usaco-sechead > .usaco-copy {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 18px 22px 18px 24px;
  background: linear-gradient(90deg, rgba(13,87,214,.085), rgba(13,87,214,.025));
  border: 1px solid rgba(13,87,214,.16);
  border-left: 4px solid var(--el-primary);
  border-radius: 0 6px 6px 0;
  color: var(--el-ink);
  box-sizing: border-box;
}

.usaco-sechead > .usaco-copy::before {
  content: "SUMMARY.LOG";
  display: block;
  margin-bottom: 8px;
  color: var(--el-primary);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}

.usaco-2col {
  align-items: stretch;
  gap: 18px;
  counter-reset: usaco-reading-block;
}

.usaco-2col > .usaco-copy {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 48px 30px 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--el-border);
  border-top: 3px solid var(--el-primary);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(25,27,35,.035);
  box-sizing: border-box;
  counter-increment: usaco-reading-block;
}

.usaco-2col > .usaco-copy::before {
  content: "READ / 0" counter(usaco-reading-block);
  position: absolute;
  top: 17px;
  left: 30px;
  color: var(--el-primary);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}

.usaco-section > .hl-container > .usaco-copy { max-width: none; }

/* ---- page-specific computer visuals ---------------------------------------
   These replace repeated stock photography with information-bearing UI. */
.usaco-system-visual {
  min-height: 280px;
  margin: 0;
  overflow: hidden;
  background: #10141d;
  border: 1px solid #303748;
  border-radius: 6px;
  box-shadow: 0 18px 38px rgba(22,27,38,.12);
  color: #eef3fb;
  box-sizing: border-box;
}

.usaco-medal-card__image .usaco-system-visual { height: 100%; border: 0; border-radius: 0; box-shadow: none; }

.usaco-system-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  background: #1b202c;
  border-bottom: 1px solid #303748;
  color: #9aa6ba;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
}

.usaco-system-bar::before { content: "●  ●  ●"; color: #5d6b82; letter-spacing: .18em; }
.usaco-system-bar b { margin-left: auto; color: #8fb4f5; font-weight: 600; }
.usaco-system-body { padding: 22px 24px 24px; }
.usaco-system-label { margin: 0 0 18px; color: #8fb4f5; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }

.usaco-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.usaco-status-grid div { padding: 13px 14px; background: #171c27; border: 1px solid #2d3546; border-radius: 4px; }
.usaco-status-grid span, .usaco-status-grid strong { display: block; font-family: var(--f-mono); }
.usaco-status-grid span { margin-bottom: 7px; color: #7f8aa0; font-size: 9px; letter-spacing: .08em; }
.usaco-status-grid strong { color: #f5f7fb; font-size: 12px; font-weight: 600; }
.usaco-status-grid strong.ok { color: #8dd7ae; }

.usaco-code-stack { display: grid; gap: 9px; margin-bottom: 20px; }
.usaco-code-stack code { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: #c8d0de; font-family: var(--f-mono); font-size: 11px; }
.usaco-code-stack code::before { content: attr(data-ln); color: #56637a; text-align: right; }
.usaco-code-stack i { color: #8fb4f5; font-style: normal; }
.usaco-verdict-line { display: flex; gap: 6px; padding-top: 16px; border-top: 1px solid #2d3546; }
.usaco-verdict-line span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 3px; background: #177248; color: #fff; font-family: var(--f-mono); font-size: 11px; }
.usaco-verdict-line span.warn { background: #9b5e10; }
.usaco-verdict-line em { align-self: center; margin-left: auto; color: #8dd7ae; font-family: var(--f-mono); font-size: 10px; font-style: normal; }

.usaco-practice-cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: center; }
.usaco-practice-cycle div { min-height: 74px; padding: 13px 10px; background: #171c27; border: 1px solid #2d3546; border-radius: 4px; box-sizing: border-box; }
.usaco-practice-cycle span, .usaco-practice-cycle strong { display: block; font-family: var(--f-mono); }
.usaco-practice-cycle span { margin-bottom: 10px; color: #8fb4f5; font-size: 9px; }
.usaco-practice-cycle strong { color: #eef3fb; font-size: 10.5px; line-height: 1.4; }
.usaco-practice-arrow { color: #60708a; font-family: var(--f-mono); text-align: center; }

.usaco-team-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.usaco-team-slots div { padding: 15px; background: #171c27; border: 1px solid #2d3546; border-left: 3px solid #8fb4f5; border-radius: 4px; }
.usaco-team-slots span { display: block; margin-bottom: 7px; color: #7f8aa0; font-family: var(--f-mono); font-size: 9px; }
.usaco-team-slots strong { color: #fff; font-family: var(--f-serif); font-size: 16px; }

.usaco-ascent { display: grid; gap: 9px; }
.usaco-ascent div { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 12px; padding: 11px 13px; background: #171c27; border: 1px solid #2d3546; border-left: 4px solid #60708a; border-radius: 3px; }
.usaco-ascent div:nth-child(2) { margin-left: 7%; border-left-color: var(--el-bronze); }
.usaco-ascent div:nth-child(3) { margin-left: 14%; border-left-color: var(--el-silver); }
.usaco-ascent div:nth-child(4) { margin-left: 21%; border-left-color: var(--el-gold); }
.usaco-ascent div:nth-child(5) { margin-left: 28%; border-left-color: #8fb4f5; }
.usaco-ascent span, .usaco-ascent strong, .usaco-ascent em { font-family: var(--f-mono); font-style: normal; }
.usaco-ascent span { color: #8490a5; font-size: 9px; }
.usaco-ascent strong { color: #fff; font-size: 11px; }
.usaco-ascent em { color: #8dd7ae; font-size: 9px; }

.usaco-account-ready { display: grid; gap: 10px; }
.usaco-account-ready div { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; background: #171c27; border: 1px solid #2d3546; border-radius: 4px; }
.usaco-account-ready i { color: #8dd7ae; font-family: var(--f-mono); font-style: normal; }
.usaco-account-ready span { color: #d8deea; font-family: var(--f-mono); font-size: 10.5px; }
.usaco-account-ready b { color: #8fb4f5; font-family: var(--f-mono); font-size: 9px; font-weight: 600; }

.usaco-training-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.usaco-training-loop div { padding: 15px 10px; background: #171c27; border: 1px solid #2d3546; border-top: 3px solid #8fb4f5; border-radius: 4px; text-align: center; }
.usaco-training-loop span, .usaco-training-loop strong { display: block; font-family: var(--f-mono); }
.usaco-training-loop span { margin-bottom: 12px; color: #7f8aa0; font-size: 9px; }
.usaco-training-loop strong { color: #eef3fb; font-size: 10px; line-height: 1.45; }
.usaco-system-note { margin: 18px 0 0; color: #8dd7ae; font-family: var(--f-mono); font-size: 10px; line-height: 1.55; }

/* ============================================================================
   responsive
   ============================================================================ */
@media (max-width: 1023px) {
  .usaco-metal-card.sv, .usaco-metal-card.gd, .usaco-metal-card.pt { transform: none; }
}
@media (max-width: 960px) {
  .usaco-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .usaco-format-grid { grid-template-columns: 1fr; }
  .usaco-format-cell { border-right: none; border-bottom: 1px solid var(--el-border); }
  .usaco-format-cell:last-child { border-bottom: none; }
  .usaco-metal-grid { grid-template-columns: 1fr 1fr; }
  .usaco-outcomes-grid { grid-template-columns: 1fr; gap: 32px; }
  .usaco-sechead { grid-template-columns: 1fr; row-gap: 14px; padding-bottom: 22px; margin-bottom: 28px; }
  .usaco-2col, .usaco-splitfig { grid-template-columns: 1fr; }
  .usaco-steps { grid-template-columns: repeat(2, 1fr); }
  .usaco-steps li:last-child { grid-column: 1 / -1; }
  .usaco-faq.usaco-faq-grid { column-count: 1; }
  .usaco-divrow { grid-template-columns: 1fr; row-gap: 10px; }
  .usaco-divrow p:not(.who) { grid-column: 1; grid-row: auto; }
  .usaco-pipeline { grid-template-columns: 1fr; gap: 6px; }
  .usaco-pipeline > i { justify-self: center; transform: rotate(90deg); line-height: 1; }
  .usaco-pipeline-node { min-width: 0; }
  .usaco-independence-grid { grid-template-columns: 1fr; }
  .usaco-sechead > .usaco-copy { max-width: 720px; }
}
@media (max-width: 640px) {
  .usaco-section { padding: 52px 0; }
  .usaco-hero { padding: 32px 0 40px; }
  .usaco-kicker--pill { font-size: 10.5px; line-height: 1.45; padding: 6px 10px; }
  .usaco-h1 { font-size: clamp(32px, 9.2vw, 36px); margin: 2px 0 16px; }
  .usaco-lead { font-size: 16.5px; line-height: 1.62; margin-bottom: 20px; }
  .usaco-btn-row { gap: 8px; flex-wrap: nowrap; width: 100%; }
  .usaco-btn-primary, .usaco-btn-ghost { min-height: 44px; box-sizing: border-box; justify-content: center; font-size: 11.5px; padding: 11px 16px; }
  .usaco-source-note { margin-top: 14px; line-height: 1.55; }
  .usaco-hero-grid { gap: 26px; }
  .usaco-metal-grid { grid-template-columns: 1fr; }
  .usaco-stats { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .usaco-steps { grid-template-columns: 1fr; gap: 22px; }
  .usaco-home-news-row { grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; }
  .usaco-numsec .tag { display: none; }
  .usaco-history-row { grid-template-columns: 82px minmax(0, 1fr); }
  .usaco-history-row time { min-height: 126px; font-size: 21px; }
  .usaco-history-row > div { padding: 20px 17px; }
  .usaco-history-row h3 { font-size: 18px; }
  .usaco-fact-pair { grid-template-columns: 1fr; }
  .usaco-source-card, .usaco-independence-grid .usaco-alert { padding: 24px 20px; }
  .usaco-archive-head { flex-direction: column; gap: 4px; }
  .usaco-archive-body code { grid-template-columns: 80px 1fr; gap: 7px 12px; }
  .usaco-archive-body em { grid-column: 2; }
  .usaco-medal-card { grid-template-columns: 1fr; }
  .usaco-medal-card__image { min-height: 260px; max-height: 360px; }
  .usaco-copy { font-size: 15.5px; line-height: 1.72; }
  .usaco-sechead > .usaco-copy { padding: 16px 17px 17px; }
  .usaco-2col { gap: 14px; }
  .usaco-2col > .usaco-copy { padding: 43px 19px 22px; }
  .usaco-2col > .usaco-copy::before { top: 16px; left: 19px; }
  .usaco-ranktable th { padding-right: 6px; font-size: 8.5px; line-height: 1.35; letter-spacing: .025em; overflow-wrap: anywhere; }
  .usaco-ranktable td { padding-right: 6px; font-size: 11.5px; }
  .usaco-scorebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .usaco-scorebar > div { min-width: 0; padding: 9px 7px; border-bottom: 0; font-size: 9px; }
  .usaco-scorebar-total { grid-column: 1 / -1; min-height: 42px; justify-content: center; border-radius: 0 0 3px 3px; padding: 8px 12px; }
  .usaco-system-body { padding: 19px 17px 20px; }
  .usaco-status-grid, .usaco-team-slots { grid-template-columns: 1fr; }
  .usaco-practice-cycle, .usaco-training-loop { grid-template-columns: 1fr 1fr; }
  .usaco-ascent div, .usaco-ascent div:nth-child(n) { grid-template-columns: 70px 1fr; margin-left: 0; }
  .usaco-ascent em { grid-column: 2; }
}