/* Case pages of the validation papers. Load after ../landing.css. Type and color come from the landing.css tokens. */

:root {
  --ok: #1f6b3d;
  --bad: #b3123f;
  --warn: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ok: #6cc493; --bad: #f06a8e; --warn: #e3b64a; }
}
:root[data-theme="dark"] { --ok: #6cc493; --bad: #f06a8e; --warn: #e3b64a; }

/* Column: text at 900px, wide tables and the figure pair at 1240px */

main.case { max-width: 1240px; margin: 0 auto; padding: 32px 16px 72px; font-size: 17px; line-height: 1.6; }
main.case > * { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
main.case > .table-wrap:has(> table.stack),
main.case > .figcompare { max-width: 1240px; }
main.case p, main.case li, main.case dd { overflow-wrap: anywhere; }
main.case p { margin-top: 0; margin-bottom: 14px; }
main.case ul, main.case ol { padding-left: 22px; margin-top: 0; margin-bottom: 14px; }
main.case li { margin-bottom: 6px; }

.crumbs { margin-bottom: 16px; font: 14px/1.5 var(--sans); color: var(--muted); }
.crumbs a { color: var(--muted); }

main.case h1 {
  margin: 0 auto 10px;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; text-align: left;
}
main.case h2 {
  margin: 56px auto 14px; padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; max-width: 900px;
  scroll-margin-top: 72px;
}
main.case > .figcompare h2 { max-width: 1240px; }
main.case h3 { margin: 28px 0 8px; font-size: 20px; line-height: 1.3; }
main.case h4, main.case h5, main.case h6 { margin: 18px 0 6px; font: 700 15px/1.4 var(--sans); }

.meta-line { font: 15px/1.5 var(--sans); color: var(--muted); }
.cite { overflow-wrap: anywhere; }
.small { font-size: 14px; }
.muted { color: var(--muted); }
main.case .sub { display: block; max-width: none; margin: 0; font: 13px/1.45 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.nw { white-space: nowrap; }

:not(pre) > code { padding: 1px 4px; background: var(--bg-2); overflow-wrap: anywhere; }

.notice { margin-bottom: 20px; padding: 10px 0 10px 14px; border-left: 2px solid var(--ink); font: 15px/1.55 var(--sans); }
.notice p:last-child { margin-bottom: 0; }

.result-sum { padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); font: 600 15px/1.4 var(--sans); }

.toc { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 !important; list-style: none; font: 14px/1.5 var(--sans); }
.toc li { margin: 0; }

/* Labels */

main.case .tag {
  display: inline-block; margin-right: 4px;
  font: 700 11px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; vertical-align: 1px;
}
main.case .tag.ok, main.case .tag.bad { letter-spacing: .04em; color: var(--ink); }
main.case .tag.ok::before, main.case .tag.bad::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px;
}
main.case .tag.ok::before { background: var(--ok); border-radius: 50%; }
main.case .tag.bad::before { border: 1.5px solid var(--bad); }
main.case .tag.bad { text-decoration: underline; text-decoration-color: var(--bad); text-underline-offset: 3px; }
main.case .tag.sev-error { color: var(--bad); }
main.case .tag.sev-warning { color: var(--warn); }
main.case .tag.sev-info { color: var(--muted); }
.bad-text { color: var(--bad); }

.who { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.st { display: inline-block; min-width: 3.6em; margin-right: 6px; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.st-done { color: var(--ok); }
.st-doing { color: var(--ink); }

/* Instruction */

.chat { margin: 12px 0 16px; }
.bubble { padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--ink); overflow-wrap: anywhere; }
.bubble .who { display: block; margin-bottom: 6px; }
main.case blockquote { margin: 8px 0 16px; padding: 2px 0 2px 14px; border-left: 2px solid var(--line); font-style: italic; }

/* Session timeline */

.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 16px; border-bottom: 1px solid var(--ink); font: 600 14px/1 var(--sans); }
.tabs a, .tabs span { padding: 10px 14px; margin-bottom: -1px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs span { color: var(--ink); border-bottom-color: var(--accent); }

.timeline { margin: 12px 0 8px; padding-left: 16px; border-left: 1px solid var(--line); font: 15px/1.55 var(--sans); }
.ev { margin: 0 0 12px; min-width: 0; overflow-wrap: anywhere; }
.ev p { margin: 0 0 6px; }
.ev ol, .ev ul { margin: 4px 0; }
main.case .ev.step,
.ev.qcard, .ev.plan, .ev.setup {
  display: block; padding: 10px 14px; border: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--bg);
}
main.case .ev.step.cmp { border-style: dashed; }
.ev.qcard { border-left: 2px solid var(--accent); }
.ev.held, .ev.dev { padding: 2px 0 2px 12px; border-left: 2px solid var(--warn); }
.ev.agent:not(.draft) { padding: 2px 0; }
.ev.thinking p { font-style: italic; }
main.case .ev.note { margin-top: 0; font: inherit; color: inherit; }
.ev .answer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.step-head { margin: 0 0 6px; }
.plain { list-style: none; padding: 0 !important; }
.plain li { margin: 0 0 6px; }
.md { overflow-wrap: anywhere; }
.md table { font-size: 14px; }

main.case details { margin: 6px 0; }
main.case summary { cursor: pointer; }
main.case summary:hover { color: var(--link); }
main.case details > pre, main.case details > div { margin-top: 6px; }

/* Code and logs */

main.case :not(.cmd) > pre {
  margin: 0 0 8px; padding: 12px 14px;
  background: var(--term); color: var(--term-ink);
  font: 13px/1.55 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 32em; overflow: auto;
}
main.case .cmd { margin-bottom: 16px; }
.routes > li { margin-bottom: 16px; }

/* Final answer */

.answer-box { margin: 12px 0 8px; padding: 6px 18px 4px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--bg-2); }

/* Tables */

.table-wrap, .scroll { max-width: 100%; margin: 12px 0 20px; overflow-x: auto; }
main.case table { width: 100%; border-collapse: collapse; margin: 0; font: 14px/1.45 var(--sans); }
main.case th, main.case td { padding: 7px 12px 7px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
main.case thead th { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
main.case tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
main.case th.num, main.case td.num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
main.case td a { overflow-wrap: anywhere; }

table.kv td.k { width: 1%; white-space: nowrap; color: var(--muted); }
table.kv td { overflow-wrap: anywhere; }
table.kv tr:first-child td { border-top: 1px solid var(--ink); }
table.items td:first-child { min-width: 9em; }
table.items td:first-child code { overflow-wrap: normal; word-break: normal; }

/* Figures and buttons */

main.case .figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
main.case figcaption { max-width: none; }
.button {
  display: inline-block; padding: 9px 16px; border-radius: 2px;
  background: var(--ink); color: var(--bg); text-decoration: none;
  font: 600 14px/1 var(--sans);
}
.button:hover { opacity: .85; }

/* Figure from the paper next to the figure from the run */

main.case .figcompare { padding: 0; border: 0; }
.figpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; grid-template-rows: auto 1fr auto; align-items: stretch; margin-top: 16px; }
.figpair figure { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.panel-label { margin: 0 0 8px !important; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.figpair .panel { display: flex; align-items: center; justify-content: center; min-height: 260px; padding: 12px; border: 1px solid var(--line); }
.figpair .panel img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.figpair .panel.paper { background: #fff; }
.figpair .panel.ours { background: #faf9f6; border-color: #cfccc2; }
.figpair .panel.text { flex-direction: column; align-items: flex-start; justify-content: center; background: var(--bg-2); font: 15px/1.55 var(--sans); }
.figpair .credit { display: block; margin-top: 4px; color: var(--muted); }

/* Phones */

@media (max-width: 700px) {
  main.case { padding-top: 20px; font-size: 16px; }
  main.case h2 { margin-top: 40px; }
  .timeline { padding-left: 10px; }
  .figpair { grid-template-columns: 1fr; grid-template-rows: none; gap: 24px; }
  .figpair .panel { min-height: 0; }

  table.kv, table.kv tbody, table.kv tr, table.kv td { display: block; width: 100%; }
  table.kv td.k { width: auto; white-space: normal; }
  table.kv td { padding: 2px 0; border: 0; }
  table.kv tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  table.kv tr:first-child { border-top: 1px solid var(--ink); }
  table.kv tr:first-child td { border-top: 0; }

  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack { border-top: 1px solid var(--ink); }
  table.stack tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.stack td, main.case table.stack tbody tr:last-child td { padding: 2px 0; border: 0; }
  main.case table.stack td.num { text-align: left; padding-left: 0; white-space: normal; }
  table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; }
  table.items td:first-child { min-width: 0; }
}

/* Combined page: both runs of one paper */

main.case.combined { max-width: 1520px; padding-top: 0; }
main.case > .sec { max-width: none; }
main.case > .sec > * { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
main.case > .sec > .table-wrap.wide, main.case > .sec > .downloads, main.case > .figcompare > .figpair { max-width: 1240px; margin-left: max(0px, (100% - 900px) / 2) !important; margin-right: 0 !important; }
main.case.combined > .result-sum span { display: block; }
main.case .sec, main.case [data-sync], main.case .ev { scroll-margin-top: calc(var(--hdr, 58px) + var(--bar-h, 46px) + 56px); }
main.case section.sec { padding: 0; border: 0; }
main.case .crumbs { margin-top: 24px; }

main.case caption { caption-side: top; padding: 0 0 8px; text-align: left; font: 14px/1.5 var(--sans); color: var(--ink); }
main.case caption b { font-weight: 700; }

/* One sticky bar: section links and the run switch */

main.case > .casebar {
  position: sticky; top: var(--hdr, 58px); z-index: 40; max-width: none;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.casebar-in { display: flex; align-items: center; gap: 8px 28px; max-width: 1280px; margin: 0 auto; }
.secs { display: flex; flex: 1; min-width: 0; justify-content: safe center; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.secs::-webkit-scrollbar { display: none; }
.seclink { flex: none; padding: 11px 0 9px; border-bottom: 2px solid transparent; white-space: nowrap; font: 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.seclink:hover { border-bottom-color: var(--line); }
.seclink.on { border-bottom-color: var(--accent); }

.modelmenu { position: relative; flex: none; }
.mm-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--bg); color: var(--ink); cursor: pointer; white-space: nowrap; font: 600 13px/1.2 var(--sans);
}
.mm-k { font-weight: 400; color: var(--muted); }
.mm-caret { width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.mm-btn[aria-expanded="true"] .mm-caret { border-top-width: 0; border-bottom-width: 4px; border-top-color: transparent; border-bottom-color: currentColor; }
.mm-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 100%; margin: 0; padding: 4px 0; list-style: none;
  background: var(--bg); border: 1px solid var(--ink); border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.mm-list[hidden] { display: none; }
.mm-list:focus { outline: none; }
.mm-list:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
main.case .mm-list li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; cursor: pointer; white-space: nowrap; font: 600 13px/1.2 var(--sans); color: var(--ink); }
.mm-list li::before { content: ""; width: 1em; flex: none; }
.mm-list li[aria-selected="true"]::before { content: "\2713"; }
.mm-list li.act, .mm-list li:hover { background: var(--bg-2); }
.mm-btn:focus-visible, .seclink:focus-visible, .dl-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 1099px) { main.case .mm-list li[data-view="compare"] { display: none; } }
@media (max-width: 760px) {
  main.case > .casebar { padding: 0 12px; }
  .casebar-in { gap: 10px; flex-wrap: nowrap; }
  .secs { justify-content: flex-start; gap: 16px; padding-right: 4px; }
  .mm-k { display: none; }
}

/* Merged results table */

.legend-line { font: 14px/1.5 var(--sans); color: var(--muted); }
.results-merged td.item { min-width: 12em; }
.results-merged .val { font: 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mk { margin-left: 6px; white-space: nowrap; font: 600 12px/1 var(--sans); }
.mk.ok::before { content: "✓ "; color: var(--ok); }
.mk.no { color: var(--bad); }
.mk.no::before { content: "✕ "; }
.results-merged .prov { font-size: 12px; }
details.src { margin: 4px 0 0; }
details.src summary { font: 12px/1.4 var(--sans); color: var(--muted); }
details.src[open] { font-size: 13px; }

/* Session records */

.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.dl {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--ink);
}
.dl-icon { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
main.case .dl p { margin: 0; }
.dl-title { font: 700 15px/1.3 var(--sans); }
.dl-desc { margin-top: 2px !important; font: 14px/1.45 var(--sans); }
.dl-meta { margin-top: 2px !important; font: 13px/1.4 var(--sans); color: var(--muted); }
.dl-btn {
  padding: 8px 12px; border: 1px solid var(--ink); border-radius: 0;
  font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.dl-btn:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 520px) { .dl { grid-template-columns: 24px minmax(0, 1fr); } .dl-btn { grid-column: 2; justify-self: start; } }

/* Run columns */

main.case > .runs { max-width: 1520px; margin-top: 48px; }
main.case > .run-note { padding: 8px 0 8px 12px; border-left: 2px solid var(--ink); font: 15px/1.5 var(--sans); margin-top: 40px; }
.run { min-width: 0; container-type: inline-size; }
.run-head {
  position: sticky; top: calc(var(--hdr, 58px) + var(--bar-h, 46px)); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 !important; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--ink);
  font: 15px/1.3 var(--sans);
}
.run-head .rs { margin-left: auto; font-size: 13px; color: var(--muted); }
.run h2 { margin-top: 36px; font-size: clamp(22px, 2.2vw, 26px); max-width: none; }
.run .sec:first-of-type h2 { margin-top: 16px; padding-top: 0; border-top: 0; }

main.case .runs .run { max-width: 900px; margin: 0 auto; }
.runs .run + .run { margin-top: 48px; }
main.case .off { display: none; }
main.case[data-view="opus"] .run:not(#opus), main.case[data-view="opus"] .m-sonnet, main.case[data-view="opus"] .m-haiku, main.case[data-view="opus"] .m-qwen3,
main.case[data-view="sonnet"] .run:not(#sonnet), main.case[data-view="sonnet"] .m-opus, main.case[data-view="sonnet"] .m-haiku, main.case[data-view="sonnet"] .m-qwen3,
main.case[data-view="haiku"] .run:not(#haiku), main.case[data-view="haiku"] .m-opus, main.case[data-view="haiku"] .m-sonnet, main.case[data-view="haiku"] .m-qwen3,
main.case[data-view="qwen3"] .run:not(#qwen3), main.case[data-view="qwen3"] .m-opus, main.case[data-view="qwen3"] .m-sonnet, main.case[data-view="qwen3"] .m-haiku { display: none; }
@media (min-width: 1100px) {
  main.case[data-view="compare"] .runs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main.case[data-view="compare"] .runs .run { max-width: none; margin: 0; }
  main.case[data-view="compare"] .run[data-col="left"] { order: 1; padding-right: 28px; }
  main.case[data-view="compare"] .run[data-col="right"] { order: 2; padding-left: 28px; border-left: 1px solid var(--line); }
}

/* Model choice above each column in the compare view */
.pick { display: none; flex: 1 0 100%; align-items: center; gap: 8px; margin: 0 0 2px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
main.case[data-view="compare"] .pick { display: flex; }
.pick select {
  padding: 5px 8px; border: 1px solid var(--ink); border-radius: 2px; background-color: var(--bg); color: var(--ink);
  font: 600 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.pick select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.runs-note { color: var(--ink); font-weight: 600; }

@container (max-width: 640px) {
  .run table.kv, .run table.kv tbody, .run table.kv tr, .run table.kv td { display: block; width: 100%; }
  .run table.kv td.k { width: auto; white-space: normal; }
  .run table.kv td { padding: 2px 0; border: 0; }
  .run table.kv tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .run table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .run table.stack, .run table.stack tbody, .run table.stack tr, .run table.stack td { display: block; width: 100%; }
  .run table.stack caption { display: block; }
  .run table.stack { border-top: 1px solid var(--ink); }
  .run table.stack tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .run table.stack td, main.case .run table.stack tbody tr:last-child td { padding: 2px 0; border: 0; }
  main.case .run table.stack td.num { text-align: left; padding-left: 0; white-space: normal; }
  .run table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; }
  .run table.items td:first-child { min-width: 0; }
}
@media (max-width: 700px) { main.case table.stack caption { display: block; } }

/* How to repeat it: commands, code and menu paths */

main.case .cmd-label { margin: 12px 0 0; font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
main.case .cmd-label + .cmd { margin-top: 4px; }
.route-head { margin: 8px 0 0 !important; font: 15px/1.55 var(--sans); }
.route-list { list-style: none; padding-left: 0 !important; margin: 8px 0 0 !important; font: 15px/1.55 var(--sans); }
.route-list li { margin: 0; padding: 3px 0; white-space: pre-line; overflow-wrap: anywhere; }
.route-list .rwarn b { color: var(--warn); }
.route-list .rnote b, .route-list .pk { color: var(--muted); font-weight: 400; }
.route-list .rnote b { font-weight: 700; }
.prog { margin-right: 4px; font-weight: 700; }
.menu { white-space: normal; }
.menu kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); font: 13px/1.5 var(--sans); white-space: nowrap; }
.menu .sep { margin: 0 4px; color: var(--muted); }

/* Readability */

main.case .tag, main.case .who, main.case .st, main.case .cmd-label { font-size: 12px; }
main.case td code, main.case .small code, main.case .sub code { font-size: max(12px, .9em); }
main.case .cmd pre { white-space: pre-wrap; overflow-wrap: anywhere; }
main.case .notice p, main.case .sec > p, main.case .sec > ul, main.case blockquote { max-width: 72ch; }
main.case > .sec > p, main.case > .sec > ul, main.case > .sec > blockquote { margin-left: max(0px, (100% - 900px) / 2) !important; margin-right: auto !important; }

@media (max-width: 700px) {
  header.top { position: static; }
  main.case { --hdr: 0px; }
  main.case table.results-merged td.item, main.case table.items td:first-child { display: flex; flex-direction: column; }
  main.case table.results-merged td.item .sub, main.case table.items td:first-child .sub { order: -1; font: 600 15px/1.4 var(--sans); color: var(--ink); }
  main.case table.results-merged td.item > code, main.case table.items td:first-child > code { align-self: flex-start; background: none; padding: 0; font-size: 12px; color: var(--muted); }
}
@container (max-width: 640px) {
  .run table.items td:first-child { display: flex; flex-direction: column; }
  .run table.items td:first-child .sub { order: -1; font: 600 15px/1.4 var(--sans); color: var(--ink); }
  .run table.items td:first-child > code { align-self: flex-start; background: none; padding: 0; font-size: 12px; color: var(--muted); }
}
main.case .cmd pre code { font-size: inherit; background: none; padding: 0; }

/* Align the figure section heading with its panels */
main.case .figcompare { max-width: 1084px; margin-inline: auto; }
main.case .figcompare > .figpair { margin-left: 0; }

/* Preliminary note on pages without a combined run */
.prelim { padding: 8px 0 8px 12px; border-left: 3px solid currentColor; }
main.case h1 { overflow-wrap: anywhere; }

/* How to read this page */
details.howto { padding: 0; border-left: 0; }
details.howto summary {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0; cursor: pointer; list-style: none;
  font: 700 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
details.howto summary::-webkit-details-marker { display: none; }
details.howto summary::before { content: "+"; width: 1em; text-align: center; font-weight: 700; }
details.howto[open] summary::before { content: "\2212"; }
details.howto summary:hover { color: var(--link); }
details.howto summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
details.howto[open] { padding-left: 14px; border-left: 2px solid var(--ink); }
details.howto > p { margin: 4px 0 8px; font: 15px/1.55 var(--sans); }