/* Gallery pages: a benchmark artifact on top of Pico + DDS. Light only (html[data-theme=light]). */
:root[data-theme=light] {
  color-scheme: light;
  --bg: #f6f5f2;
  --fg: #111;
  --muted: #66655f;
  --line: #d3d1ca;
  --link: #492376;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pico-font-family: var(--sans);
  --pico-font-family-sans-serif: var(--sans);
  --pico-font-size: 100%;
  --pico-background-color: var(--bg);
  --pico-color: var(--fg);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--line);
  --pico-border-radius: 2px;
  --pico-primary: var(--link);
  --pico-primary-underline: var(--link);
  --pico-primary-hover: var(--link);
  --pico-primary-hover-underline: var(--link);
  --pico-primary-focus: rgba(73, 35, 118, .35);
  --pico-box-shadow: none;
  --pico-h1-color: var(--fg); --pico-h2-color: var(--fg); --pico-h3-color: var(--fg);
  --pico-form-element-focus-color: var(--link);
}

html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body > main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, dl, dd, figure, pre { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px; box-shadow: none;
}
code, pre, kbd { font-family: var(--mono); background: none; color: inherit; padding: 0; }
.mono { font-family: var(--mono); }

/* Fade-in only when JS is there to reveal the image. */
.js img.fade { opacity: 0; }
.js img.fade.loaded { opacity: var(--img-opacity, 1); transition: opacity .25s ease-out; }

.page { max-width: 1500px; margin: 0 auto; padding: 0 16px; }
.page.narrow { max-width: 920px; }

/* Buttons and controls */
button, button[type=button], .btn {
  font: 600 .75rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 2px;
  padding: .5rem .7rem; margin: 0; width: auto; cursor: pointer; transition: border-color .15s, background-color .15s;
}
button:hover, button[type=button]:hover { border-color: var(--fg); background: transparent; color: var(--fg); }
button[aria-pressed=true], button[type=button][aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.copy { display: none; padding: .35rem .55rem; flex: none; }
.js .copy { display: inline-block; }
.mode-switch { display: none; }
.js .mode-switch { display: flex; }

/* Index hero */
.hero { max-width: 1100px; padding: 28px 12px 4px; }
.hero h1 { font-size: clamp(1.9rem, 5.2vw, 3.6rem); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.bench { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 22px 0 18px; padding: 14px 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); }
.bench div { display: flex; flex-direction: column; }
.bench dt { order: 2; font: .75rem/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bench dd { order: 1; font: 700 clamp(2rem, 6vw, 3.4rem)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lead { max-width: 70ch; font-size: .95rem; color: #2b2a27; }
.note { max-width: 70ch; margin-top: 8px; font: .75rem/1.5 var(--mono); color: var(--muted); }

/* Convert panel */
.convert { margin: 16px 0 22px; border: 1px solid var(--line); border-radius: 2px; background: transparent; }
.convert > summary { list-style: none; cursor: pointer; padding: .6rem .8rem; font: 700 .8rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.convert > summary::-webkit-details-marker, .convert > summary::marker { display: none; content: ""; }
.convert > summary::before { content: "+ "; }
.convert[open] > summary::before { content: "- "; }
.convert[open] > summary { border-bottom: 1px solid var(--line); }
.convert-body { padding: 14px 14px 12px; display: grid; gap: 20px 32px; grid-template-columns: 1fr 1fr; }
.convert-body > section { min-width: 0; }
.convert-body h3 { font: 700 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.convert-body p { font-size: .85rem; margin-bottom: 8px; }
.convert-body p code { font-size: .8rem; background: #ebe9e3; padding: 1px 4px; border-radius: 2px; overflow-wrap: anywhere; }
.convert-foot { grid-column: 1 / -1; font-size: .85rem; border-top: 1px solid var(--line); padding-top: 10px; }
.cmd { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.cmd code { flex: 1; min-width: 0; font-size: .8rem; line-height: 1.5; padding: .4rem .6rem; background: #111; color: #f6f5f2; border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd code::before { content: "$ "; color: #8f8d86; }
.cmd.block code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Wall */
.wall-section { padding: 0 12px 40px; }
.controls { display: none; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 0 12px; font: .75rem/1 var(--mono); }
.js .controls { display: flex; }
.controls .grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.controls .lab { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.controls .n { font-weight: 400; opacity: .7; }
.controls input[type=search] {
  font: .8rem/1 var(--mono); width: 14rem; max-width: 100%; margin: 0; height: auto;
  padding: .5rem .6rem; background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 2px; box-shadow: none;
}
.controls input[type=search]:focus { border-color: var(--fg); }
.shown { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.empty { font: .85rem/1.4 var(--mono); color: var(--muted); padding: 24px 0; }

.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 2200px) { .wall { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.wall[data-show=converted] > a[data-status=failed],
.wall[data-show=exact] > a:not([data-status=exact]),
.wall[data-show=failed] > a:not([data-status=failed]) { display: none; }

.wall > a { display: block; min-width: 0; color: var(--fg); text-decoration: none; }
/* Yellow on black reads on any page; z-index lifts the ring over the neighbours. */
.wall > a:focus-visible { position: relative; z-index: 1; transform: scale(1.06);
  outline: 6px solid #ffd400; outline-offset: 0; box-shadow: 0 0 0 12px #000, 0 0 40px 16px #000; }
.shot { position: relative; display: block; aspect-ratio: 1200 / 630; border: 1px solid var(--line); background: #ebe9e3; overflow: hidden; }
.shot img { width: 100%; height: 100%; }
.shot .none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: .7rem/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.wall > a[data-status=failed] .shot img { --img-opacity: .45; filter: grayscale(1); opacity: .45; }
.js .wall > a[data-status=failed] .shot img.fade { opacity: 0; }
.js .wall > a[data-status=failed] .shot img.fade.loaded { opacity: .45; }
.ov {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgba(17, 17, 17, .9); color: #f6f5f2;
  font: .66rem/1.35 var(--mono); letter-spacing: .03em; text-transform: uppercase;
  opacity: 0; transition: opacity .15s;
}
.wall > a:hover .ov, .wall > a:focus-visible .ov { opacity: 1; }
@media (hover: none) { .ov { display: none; } }
.cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 5px; min-width: 0; }
.cap .nm { font-size: .78rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cap .st { flex: none; font: .7rem/1.3 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cap .st.fail { color: var(--muted); }

/* Theme page */
.back { display: inline-block; margin: 18px 0 14px; font: .75rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.report h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
.verdict { margin-top: 8px; font: .85rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.verdict b { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1; letter-spacing: -.02em; }
.meta { margin-top: 12px; padding: 8px 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--line); font: .78rem/1.6 var(--mono); display: flex; flex-wrap: wrap; gap: 0 18px; }
.meta span { white-space: nowrap; }
.meta a { overflow-wrap: anywhere; }
.notice { margin-top: 6px; font: .72rem/1.5 var(--mono); color: var(--muted); }

.compare { margin-top: 22px; scroll-margin-top: 12px; }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.compare-bar .mode-switch { gap: 6px; }
.compare-bar .overlay-note { display: none; }
.compare[data-mode=overlay] .compare-bar .overlay-note { display: block; }
.compare-bar p { font: .72rem/1.4 var(--mono); color: var(--muted); flex: 1 1 24rem; }
.panes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.panes figure { min-width: 0; }
.panes figcaption { font: 700 .75rem/2rem var(--mono); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--fg); margin-bottom: 8px; }
.panes img { width: 100%; border: 1px solid var(--line); background: #fff; }
.panes .arrow { position: absolute; top: 0; left: 50%; width: 24px; transform: translateX(-50%); text-align: center; font: 700 .75rem/2rem var(--mono); }
.panes.solo { grid-template-columns: minmax(0, 640px); }
.panes.solo .arrow { display: none; }
@media (max-width: 699px) {
  .panes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panes .arrow { display: none; }
}
.compare[data-mode=overlay] .panes { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1280px; isolation: isolate; gap: 0; }
.compare[data-mode=overlay] .panes figure { grid-area: 1 / 1; }
.compare[data-mode=overlay] .panes figcaption, .compare[data-mode=overlay] .panes .arrow { display: none; }
.compare[data-mode=overlay] .panes figure:nth-of-type(2) { mix-blend-mode: difference; }
.compare[data-mode=overlay] .panes img { border: 0; }
.overlay-label { display: none; font: 700 .75rem/2rem var(--mono); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--fg); margin-bottom: 8px; max-width: 1280px; }
.compare[data-mode=overlay] .overlay-label { display: block; }

.actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 700 .75rem/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.section-h { margin: 34px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--fg); font: 700 .8rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.matrix { width: 100%; max-width: 560px; border-collapse: collapse; margin: 0; }
.matrix th, .matrix td { padding: 8px 0; border-bottom: 1px solid var(--line); font: .8rem/1.3 var(--mono); text-align: left; background: none; letter-spacing: .04em; text-transform: uppercase; }
.matrix th { font-weight: 400; width: 50%; }
.matrix td b { font-size: 1.05rem; }
.matrix td .t { color: var(--muted); margin-left: 10px; }
.matrix td { font-variant-numeric: tabular-nums; }

.reasonbox { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--fg); font: .8rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.nb { margin-top: 10px; font-size: .9rem; max-width: 70ch; }

.pager { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--fg); display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; font: .75rem/1.4 var(--mono); letter-spacing: .03em; }
.pager a:first-child { justify-self: start; text-align: left; }
.pager a:last-child { justify-self: end; text-align: right; }
.pager .all { text-transform: uppercase; }
.gpl { margin: 22px 0 40px; font-size: .8rem; color: var(--muted); }
@media (max-width: 699px) { .pager { grid-template-columns: 1fr 1fr; } .pager .all { grid-column: 1 / -1; grid-row: 2; justify-self: start; } .convert-body { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js img.fade { opacity: var(--img-opacity, 1); }
}
.convert > summary::after { display: none; }
button { --pico-box-shadow: none; box-shadow: none; }
h1, h2, h3 { color: var(--fg); }
button:focus, button[type=button]:focus { box-shadow: none; }
@media (max-width: 599px) {
  .hero { padding-top: 16px; }
  .bench { gap: 8px 18px; margin: 14px 0 12px; }
  .bench dd { font-size: 2rem; }
  .bench dt { font-size: .62rem; max-width: 9rem; }
  .controls { gap: 8px 14px; }
}