/* Precision and Magnitude: one palette, distinct typographic structures. */
.refined-01 .refined-compute, .refined-02 .refined-compute { background:#0c0c0b; color:#e9e7e2; min-width:0; padding:2.4rem; box-sizing:border-box; }
.refined-01 .refined-git, .refined-02 .refined-git { background:#20201f; color:#e9e7e2; min-width:0; padding:2.4rem 1.7rem; display:flex; flex-direction:column; box-sizing:border-box; }
.refined-01 p, .refined-01 dl, .refined-01 dd, .refined-02 p, .refined-02 dl, .refined-02 dd { margin:0; }
.refined-01 .r1-kicker, .refined-02 .r2-heading > p { font:.66rem/1.5 var(--mono); color:#a9a79f; letter-spacing:.08em; margin-bottom:.85rem; }
.refined-01 .r1-heading h2, .refined-02 .r2-heading h2 { font:300 clamp(1.65rem,2.7vw,2.4rem)/1.15 var(--sans); letter-spacing:-.035em; margin:0; }
.refined-01 .r1-heading h2 em, .refined-02 .r2-heading h2 em { font-family:var(--serif); font-weight:400; white-space:nowrap; }
.refined-01 .r1-ledger { margin-top:1.8rem; }
.refined-01 .r1-ledger > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.2rem; padding:1rem 0; border-top:1px solid #373733; }
.refined-01 .r1-ledger > div:last-child { padding-bottom:0; }
.refined-01 .r1-ledger dt { font:.78rem/1.45 var(--sans); color:#e1dfd8; }
.refined-01 .r1-ledger dt > span { display:block; font:.65rem/1.55 var(--mono); color:#a9a79f; margin-top:.4rem; }
.refined-01 .r1-ledger dd { text-align:right; font:300 clamp(1.8rem,3vw,2.7rem)/1 var(--sans); letter-spacing:-.04em; color:#e5d4ad; white-space:nowrap; }
.refined-01 .r1-ledger dd > span { font:italic .6em/1 var(--serif); margin-left:.08em; }
.refined-01 .r1-ledger dd > small { display:block; font:.65rem/1.5 var(--mono); color:#a9a79f; letter-spacing:0; margin-top:.35rem; }
.refined-01 .r1-git-heading > span, .refined-02 .r2-git-heading > span { font:.66rem/1.5 var(--mono); color:#a9a79f; letter-spacing:.08em; }
.refined-01 .r1-git-heading h3 { font:300 clamp(1.55rem,2.5vw,2.1rem)/1.15 var(--sans); letter-spacing:-.035em; margin:.85rem 0 0; }
.refined-01 .r1-git-body { display:grid; grid-template-columns:192px minmax(0,1fr); column-gap:1.3rem; align-items:start; margin:auto 0; padding:2rem 0; }
.refined-01 .r1-map, .refined-02 .r2-map { width:192px; min-width:192px; }
.refined-01 .r1-git-totals { display:flex; flex-direction:column; gap:1.6rem; min-width:0; }
.refined-01 .r1-git-totals > div + div { border-top:1px solid #484844; padding-top:1.4rem; }
.refined-01 .r1-git-totals dd { font:300 clamp(2.4rem,3.8vw,3.2rem)/1 var(--sans); letter-spacing:-.05em; color:#e5d4ad; }
.refined-01 .r1-git-totals dd > small { display:block; font:italic 1.2rem/1.2 var(--serif); letter-spacing:0; margin-top:.2rem; }
.refined-01 .r1-git-totals dt { font:.65rem/1.5 var(--mono); color:#b9b6ac; margin-top:.55rem; }
.refined-01 .r1-source, .refined-02 .r2-source { font:.65rem/1.5 var(--mono); color:#b9b6ac; }
.refined-01 .r1-source a, .refined-02 .r2-source a { color:inherit; text-decoration-color:#737268; }
.refined-01 .h-legend, .refined-01 .h-readout, .refined-02 .h-legend, .refined-02 .h-readout { color:#b9b6ac; }

.refined-02 { --r2-stat-label-size:clamp(1.1rem,1.8vw,1.45rem); }
.refined-02 .r2-heading h2 { font-size:clamp(1.55rem,2.45vw,2.1rem); }
.refined-02 .r2-principal { padding:1.75rem 1.8rem 1.8rem 0; container-type:inline-size; text-align:right; }
.refined-02 .r2-token-value { display:block; }
.refined-02 .r2-token-value > strong { display:block; font:300 clamp(2rem,16cqw,6.5rem)/.98 var(--sans); letter-spacing:-.065em; color:#e5d4ad; white-space:nowrap; }
.refined-02 .r2-token-value > span { display:block; font:italic var(--r2-stat-label-size)/1.25 var(--serif); color:#e9e7e2; margin-top:.7rem; }
.refined-02 .r2-principal > p { font:.66rem/1.6 var(--mono); color:#a9a79f; margin-top:.95rem; }
.refined-02 .r2-pair { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; border-top:1px solid #373733; border-bottom:1px solid #373733; padding:1.45rem 0; }
.refined-02 .r2-pair > div { padding-left:clamp(.5rem,4.5vw,5rem); }
.refined-02 .r2-pair > div + div { border-left:1px solid #373733; }
.refined-02 .r2-pair dd { font:300 clamp(1.75rem,2.8vw,2.6rem)/1 var(--sans); letter-spacing:-.045em; color:#e5d4ad; white-space:nowrap; }
.refined-02 .r2-pair dd > span { font:italic .65em/1 var(--serif); margin-left:.05em; }
.refined-02 .r2-pair dd > .r2-hours-unit { margin-left:.2em; }
.refined-02 .r2-pair dd > .r2-token-unit { font:.65rem/1 var(--mono); color:#a9a79f; letter-spacing:0; display:block; margin:.55rem 0 0; }
.refined-02 .r2-pair dt { font:italic var(--r2-stat-label-size)/1.25 var(--serif); color:#e9e7e2; margin-top:.6rem; }
.refined-02 .r2-pair dt > small { display:block; font:.65rem/1.6 var(--mono); color:#a9a79f; margin-top:.4rem; }
.refined-02 .r2-durations { margin-top:.35rem; }
.refined-02 .r2-durations > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.refined-02 .r2-durations > div + div { border-top:1px solid #373733; }
.refined-02 .r2-durations > div:last-child { padding-bottom:0; }
.refined-02 .r2-durations dt { font:.74rem/1.5 var(--sans); }
.refined-02 .r2-durations dt > small { display:block; font:.65rem/1.55 var(--mono); color:#a9a79f; margin-top:.35rem; }
.refined-02 .r2-durations dd { font:300 2rem/1 var(--sans); letter-spacing:-.04em; color:#e5d4ad; white-space:nowrap; }
.refined-02 .r2-durations dd > span { font:italic .65em/1 var(--serif); margin-left:.08em; }
.refined-02 .refined-git { background:#fff; color:#0c0c0b; text-align:right; }
.refined-02 .r2-git-heading > span { color:#676760; }
.refined-02 .r2-git-heading h3 { font:italic clamp(1.6rem,2.4vw,2rem)/1.2 var(--serif); margin:.8rem 0 0; }
.refined-02 .r2-git-body { display:grid; grid-template-columns:minmax(0,1fr) 192px; justify-content:end; justify-items:end; gap:1.3rem 0; align-items:start; margin:auto 0; padding:2rem 0; }
.refined-02 .r2-git-totals { box-sizing:border-box; min-width:0; width:100%; min-height:192px; padding:.25rem 1.5rem 0 0; display:flex; flex-direction:column; justify-content:flex-start; gap:2rem; text-align:right; }
.refined-02 .r2-git-totals > div { display:flex; justify-content:flex-end; align-items:baseline; gap:.35rem; }
.refined-02 .r2-git-totals dt { font:italic clamp(.8rem,1.3vw,1.1rem)/1.25 var(--serif); color:#676760; }
.refined-02 .r2-git-totals dd { order:-1; font:300 clamp(1.75rem,3.6vw,3.3rem)/1 var(--sans); letter-spacing:-.06em; color:#0c0c0b; }
.refined-02 .h-grid { grid-template-rows:repeat(7,24px); }
.refined-02 .h-legend { align-items:flex-start; padding-left:.3rem; color:#676760; }
.refined-02 .r2-source { color:#676760; }
.refined-02 .r2-source .h-source { display:inline-flex; align-items:center; justify-content:flex-end; gap:.55rem; color:#0c0c0b; text-decoration:none; }
.refined-02 .r2-source .h-source > span:last-child { text-decoration:underline; text-underline-offset:3px; text-decoration-color:#737268; }
.refined-02 .r2-source [data-mk] { display:flex; font-size:1rem; }
.refined-02 .r2-preview-note { color:#676760; margin-top:.45rem; }
@media (min-width:821px) and (max-width:1080px) {
  .refined-01 .refined-compute, .refined-02 .refined-compute { padding:2rem 1.5rem; }
  .refined-01 .refined-git, .refined-02 .refined-git { padding:2rem 1rem; }
  .refined-01 .r1-git-body { column-gap:1rem; }
  .refined-02 .r2-pair { gap:1rem; }
  .refined-02 .r2-pair > div { padding-left:1rem; }
  .refined-02 .r2-git-totals { padding-right:.7rem; }
}
@media (max-width:440px) {
  .refined-01 .refined-compute, .refined-02 .refined-compute { padding:2rem 1.4rem; }
  .refined-01 .refined-git, .refined-02 .refined-git { padding:2rem 1rem; }
  .refined-01 .r1-ledger > div { gap:.85rem; }
  .refined-01 .r1-git-body { column-gap:1rem; }
  .refined-02 .r2-pair { gap:1rem; }
  .refined-02 .r2-pair > div { padding-left:.5rem; }
  .refined-02 .r2-principal { padding-right:0; }
  .refined-02 .r2-git-totals { padding-right:.7rem; }
  .refined-02 { --r2-stat-label-size:1rem; }
}
@media (max-width:360px) {
  .refined-01 .refined-compute, .refined-02 .refined-compute,
  .refined-01 .refined-git, .refined-02 .refined-git { padding-left:1rem; padding-right:1rem; }
  .refined-01 .r1-ledger > div { gap:.7rem; }
  .refined-01 .r1-ledger dd { font-size:1.65rem; }
  .refined-01 .r1-git-body, .refined-02 .r2-git-body { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .refined-01 .r1-git-totals, .refined-02 .r2-git-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .refined-02 .r2-git-totals { min-height:0; padding:0; }
  .refined-01 .r1-git-totals > div + div { border-top:0; padding-top:0; }
  .refined-01 .r1-git-totals dd, .refined-02 .r2-git-totals dd { font-size:2.1rem; }
  .refined-02 .r2-pair { grid-template-columns:minmax(0,1fr); gap:1.15rem; }
  .refined-02 .r2-pair > div { padding-left:0; }
  .refined-02 .r2-pair > div + div { border-left:0; border-top:1px solid #373733; padding-left:0; padding-top:1.15rem; }
  .refined-02 .r2-token-value { row-gap:.8rem; }
  .refined-02 .r2-durations > div { gap:.7rem; }
  .refined-02 .r2-durations dd { font-size:1.75rem; }
}
.refined-01 .r1-git-totals > div, .refined-02 .r2-pair > div { display:flex; flex-direction:column; }
.refined-01 .r1-git-totals dd, .refined-02 .r2-pair dd { order:-1; }

/* Latest screenshot: centered compute block and a tall Git field beside its summary. */
.competition-page:has(.refined-02) { --panel-white:#fffdf5; }
.stats-refinement-page .competition-copy { background:var(--panel-white,transparent); align-self:stretch; }
.refined-02 .r2-principal { padding:1.75rem 0 1.8rem; text-align:center; }
.refined-02 .r2-pair > div:first-child { padding-left:clamp(.5rem,2.5vw,2.4rem); }
.refined-02 .r2-pair > div:last-child { align-items:flex-end; }
.refined-02 .refined-git { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1rem,1.8vw,2rem); align-items:stretch; background:var(--panel-white,#fffdf5); }
.refined-02 .r2-map { width:100%; min-width:0; max-width:240px; justify-self:center; align-self:start; }
.refined-02 .h-grid { width:100%; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(14,auto); gap:4px; }
.refined-02 .h-day { width:100%; height:auto; aspect-ratio:1; }
.refined-02 .r2-git-content { display:flex; min-width:0; flex-direction:column; justify-content:space-between; gap:1.4rem; padding-bottom:1.8rem; text-align:center; }
.refined-02 .r2-git-heading > span { display:block; text-align:right; }
.refined-02 .r2-git-heading h3 { font-size:clamp(1.05rem,1.7vw,2rem); text-align:center; }
.refined-02 .r2-git-totals { display:flex; flex-direction:column; min-height:0; padding:0; gap:2rem; }
.refined-02 .r2-git-totals > div { justify-content:center; }
.refined-02 .r2-source .h-source { flex-direction:column; justify-content:center; gap:.9rem; }
.refined-02 .r2-source [data-mk] { font-size:3rem; }
.refined-02 .r2-source .h-source > span:last-child { max-width:none; text-align:left; line-height:1.9; }
.refined-02 .r2-repo-line { white-space:nowrap; }
.refined-02 .r2-preview-note { font:.55rem/1.5 var(--mono); text-align:left; margin-top:.7rem; }
.refined-02 .h-readout { font:.6rem/1.5 var(--mono); color:#676760; min-height:3em; text-align:left; margin:.65rem 0 0; }
@media(max-width:1080px) {
  .refined-02 .refined-git { gap:1rem; }
  .refined-02 .r2-pair > div:last-child { padding-left:1rem; }
}
@media(max-width:440px) {
  .refined-02 .r2-git-content { padding-bottom:0; }
  .refined-02 .r2-pair > div:last-child { padding-left:.5rem; }
}
@media(max-width:360px) {
  .refined-02 .refined-git { gap:.8rem; }
  .refined-02 .h-grid { gap:3px; }
  .refined-02 .r2-git-heading h3 { font-size:1rem; }
  .refined-02 .r2-git-totals { gap:1.2rem; }
  .refined-02 .r2-git-totals dd { font-size:1.8rem; }
  .refined-02 .r2-source [data-mk] { font-size:2.4rem; }
  .refined-02 .r2-pair > div:first-child, .refined-02 .r2-pair > div:last-child { padding-left:0; align-items:flex-start; }
}

/* Matched rectangles; the Git title sits directly above the field. */
.refined-02 { min-height:0; }
.refined-02 > .refined-compute { min-height:0; display:flex; flex-direction:column; }
.refined-02 .r2-principal { flex:1; display:flex; flex-direction:column; justify-content:center; }
.refined-02 .r2-pair { margin-bottom:calc(var(--rectangle-height, 34rem) * .04); }
.refined-02 .r2-pair > div:first-child, .refined-02 .r2-pair > div:last-child { padding-inline:clamp(.5rem,2vw,1.8rem); align-items:flex-start; }
.refined-02 .r2-token-value > strong { font-size:clamp(2rem,17cqw,6.5rem); }
.refined-02 .refined-git { min-height:0; grid-template-rows:auto auto minmax(0,1fr); row-gap:1.4rem; }
.refined-02 .r2-git-heading { display:contents; }
.refined-02 .r2-git-heading > span { grid-column:1 / -1; grid-row:1; }
.refined-02 .r2-git-heading h3 { grid-column:1 / -1; grid-row:2; margin:0; text-align:left; font-size:clamp(1.3rem,2.2vw,1.9rem); }
.refined-02 .r2-map { grid-column:1; grid-row:3; container-type:size; min-height:0; height:100%; width:100%; max-width:none; align-self:stretch; display:flex; flex-direction:column; align-items:center; }
.refined-02 .r2-map .h-grid { width:min(100%, calc((100cqh - 2.75rem) / 2)); max-width:240px; flex:none; }
.refined-02 .h-readout { width:min(100%, calc((100cqh - 2.75rem) / 2)); max-width:240px; min-height:1.5em; }
.refined-02 .r2-git-content { grid-column:2; grid-row:3; display:grid; grid-template-rows:minmax(0,1fr) auto; height:min(100%, calc((var(--rectangle-height, 34rem) - 10rem) * .85)); padding:0; gap:1.5rem; }
.refined-02 .r2-git-totals { justify-content:space-evenly; gap:1.5rem; }
.refined-02 .r2-source .h-source { flex-direction:row; gap:1rem; align-items:center; }
@media(max-width:1080px) {
  .refined-02 .r2-source [data-mk] { font-size:2.2rem; }
  .refined-02 .r2-source .h-source { gap:.5rem; }
}
@media(max-width:820px) {
  .refined-02 { grid-template-rows:minmax(min-content,1fr) minmax(390px,1fr); }
  .refined-02 .r2-pair { margin-bottom:0; }
  .refined-02 .r2-git-content { height:90%; }
}
@media(max-width:360px) {
  .refined-02 .r2-source .h-source { gap:.4rem; }
  .refined-02 .r2-source [data-mk] { font-size:1.6rem; }
  .refined-02 .r2-source .h-source > span:last-child { font-size:.55rem; }
}