:root {
  color-scheme: dark;
  --ground: #30363d;
  --panel: #252c33;
  --deep: #1b2229;
  --ink: #f0f3f6;
  --muted: #bcc8d4;
  --electric: #3a86ff;
  --link: #afceff;
  --rule: #66737f;
  --rule-soft: #46525e;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --body-size: 1.125rem;
  --label-size: 1rem;
  --line: 1.65;
  --unit: .5rem;
  --small: 1rem;
  --medium: 1.5rem;
  --large: 2.5rem;
  --section: 4.5rem;
  --page: 78rem;
  --measure: 68ch;
  --rail: 14rem;
  --drug-share: 23.4%;
  --comparison-share: 24.1%;
}

* { box-sizing: border-box; }
html { scroll-padding-block: var(--medium); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--body-size)/var(--line) var(--serif);
  overflow-wrap: break-word;
}
::selection { background: var(--electric); color: var(--deep); }
body > header, main, body > footer {
  width: min(var(--page), calc(100% - 6rem));
  margin-inline: auto;
}
body > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--medium);
  border-block-end: 1px solid var(--rule);
  padding-block: var(--medium);
  font-family: var(--sans);
}
body > header > p { margin: 0; }
body > header strong {
  display: block;
  font: 500 var(--label-size)/1.4 var(--mono);
  letter-spacing: .08em;
}
body > header p > span { display: block; color: var(--muted); font-size: var(--label-size); }
nav ol, aside ol, footer ul, [data-error] main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ol { display: flex; align-items: center; gap: var(--small); font-size: var(--label-size); }
nav li + li::before { content: "/"; color: var(--muted); margin-inline-end: var(--small); }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--unit); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 5px;
}
#skip {
  position: absolute;
  top: var(--small);
  left: var(--small);
  z-index: 10;
  min-height: 44px;
  padding: var(--small);
  background: var(--deep);
  font-family: var(--sans);
  transform: translateY(-200%);
}
#skip:focus { transform: translateY(0); }
h1, h2, h3 { font-family: var(--sans); line-height: 1.2; text-wrap: balance; }
h1 {
  max-width: 17ch;
  margin-block: var(--medium) var(--large);
  font-size: clamp(2.6rem, 4.9vw, 4.25rem);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -.045em;
}
h2 { margin: 0 0 var(--medium); font-size: clamp(1.75rem, 2.3vw, 2.1rem); font-weight: 550; letter-spacing: -.025em; }
h3 { margin: var(--large) 0 var(--small); font-size: 1.3rem; font-weight: 600; }
p { max-width: var(--measure); margin-block: 0 var(--medium); }
[data-label] {
  color: var(--muted);
  font: 500 var(--label-size)/1.5 var(--mono);
  letter-spacing: .065em;
  margin-block-end: var(--small);
}
#start-here {
  padding-block: 4rem 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: 5rem;
}
#start-here > div > p { max-width: 49ch; }
[data-lead] { font: 500 1.625rem/1.35 var(--sans); letter-spacing: -.025em; }
[data-action] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--large);
  min-height: 52px;
  padding: .8rem 1.25rem;
  background: var(--electric);
  color: var(--deep);
  font: 600 var(--label-size)/1.5 var(--sans);
  text-decoration: none;
}
[data-action]:hover { background: var(--link); color: var(--deep); }
#start-here > aside {
  margin-block-start: 3.4rem;
  background: var(--deep);
  border-block-start: 3px solid var(--electric);
  padding: var(--medium) var(--large);
}
#start-here aside h2 { font: 600 1.5rem/1.2 var(--sans); margin: 0; }
dl { margin: var(--medium) 0; }
dl > div { padding-block: var(--medium); border-block-start: 1px solid var(--rule-soft); }
dt { color: var(--muted); font: var(--label-size)/1.5 var(--sans); margin-block-end: var(--unit); }
dd { margin: 0; }
#start-here aside > p { font: var(--label-size)/1.65 var(--sans); color: var(--muted); margin-block: var(--medium) 0; }
#guide-layout {
  border-block-start: 1px solid var(--rule);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
#guide-layout > aside { position: sticky; top: var(--large); padding-block: var(--large); }
aside ol a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--unit);
  min-height: 48px;
  border-block-end: 1px solid var(--rule-soft);
  padding-block: .65rem;
  font: var(--label-size)/1.45 var(--sans);
  text-decoration: none;
}
aside ol a:hover, aside ol a[aria-current="location"] { color: var(--ink); border-color: var(--electric); }
aside ol span { color: var(--link); }
#guide-layout > aside > p:last-child { color: var(--muted); font: var(--label-size)/1.65 var(--sans); margin-block: var(--medium) 0; }
article { min-width: 0; padding-inline-start: 3rem; border-inline-start: 1px solid var(--rule-soft); }
article > section { padding-block: var(--section); border-block-end: 1px solid var(--rule); scroll-margin-block-start: var(--medium); }
article > section:last-child { border-block-end: 0; }
article > section > header { max-width: 65ch; margin-block-end: var(--large); }
article > section > header > [data-label] { color: var(--link); }
article > section > p:first-of-type { padding-inline-start: var(--medium); border-inline-start: 2px solid var(--electric); }
article p:last-child { margin-block-end: 0; }
table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--large);
  font: var(--label-size)/1.65 var(--sans);
  background: var(--panel);
  text-align: left;
}
caption { text-align: left; padding-block-end: var(--small); font: 500 var(--label-size)/1.5 var(--mono); color: var(--muted); }
th, td { padding: 1rem 1.25rem; vertical-align: top; border: 1px solid var(--rule); }
thead { background: var(--deep); }
th { font-weight: 500; }
tbody th { width: 34%; color: var(--muted); }
figure { margin: var(--large) 0; padding: var(--large); border: 1px solid var(--rule); background: var(--deep); }
figure h3 { margin-block: 0 var(--small); }
figure p { font: var(--label-size)/1.65 var(--sans); }
figure > p:last-child { border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--medium); }
[data-plot] { margin-block: var(--large); font-family: var(--mono); }
[data-arm] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .6rem var(--small);
  margin-block: var(--medium);
  font-size: var(--label-size);
}
[data-arm] > strong { grid-row: 1; grid-column: 2; font-weight: 500; font-size: 1.5rem; }
[data-track] { grid-column: 1 / -1; height: 1.25rem; background: var(--ground); border: 1px solid var(--rule); }
[data-track] > i { display: block; height: 100%; background: var(--electric); width: var(--drug-share); }
[data-arm="comparison"] [data-track] > i { background: var(--muted); width: var(--comparison-share); }
details { border: 1px solid var(--rule); margin-block: var(--medium); background: var(--panel); }
summary {
  min-height: 72px;
  padding: 1.25rem;
  cursor: pointer;
  font: 500 var(--label-size)/1.5 var(--sans);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--small);
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary:hover { background: var(--deep); }
summary [data-state] { color: var(--link); font-weight: 400; }
details[open] summary { border-block-end: 1px solid var(--rule-soft); }
details > div { padding: var(--medium); }
details > div p { font-size: var(--body-size); }
#source-cards { background: var(--deep); padding: var(--large); margin-block: var(--large) var(--section); border: 1px solid var(--rule); }
#source-cards > header { margin-block-end: var(--medium); }
#source-cards h2 { font-size: 1.65rem; }
#source-cards > p { font: var(--label-size)/1.65 var(--sans); }
#source-cards ul { list-style: none; padding: 0; margin: var(--large) 0 var(--small); }
#source-cards li { padding-block: var(--unit) var(--small); border-block-start: 1px solid var(--rule-soft); }
#source-cards a { display: flex; align-items: center; justify-content: space-between; gap: var(--small); min-height: 44px; font: 500 var(--label-size)/1.5 var(--sans); padding-block: var(--unit); }
#source-cards li p { font: var(--label-size)/1.6 var(--sans); color: var(--muted); margin: 0; }
#source-cards [data-download] { justify-content: flex-start; margin-block-start: var(--small); border-block-start: 1px solid var(--rule); padding-block-start: var(--small); }
body > footer { border-block-start: 1px solid var(--rule); padding-block: var(--large); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--large); align-items: center; font: var(--label-size)/1.65 var(--sans); }
footer p { max-width: 57ch; margin: 0; color: var(--muted); }
footer ul { display: flex; gap: var(--medium); }
footer a { min-height: 48px; display: flex; align-items: center; gap: var(--unit); padding-block: var(--unit); }
[data-error] main { min-height: 55vh; padding-block: var(--section); }
[data-error] h1 { max-width: 20ch; }
[data-error] main li { margin-block: var(--medium); }
[data-error] main li > a { display: inline-flex; align-items: center; min-height: 48px; gap: var(--medium); }

@media (min-width: 75rem) {
  #guide-layout { gap: 5rem; }
  article { padding-inline-start: 4rem; }
}
@media (max-width: 64rem) {
  body > header, main, body > footer { width: calc(100% - 3rem); }
  #start-here { gap: var(--large); }
  #start-here > aside { padding: var(--medium); }
  #guide-layout { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--large); }
  article { padding-inline-start: var(--medium); }
  figure { padding: var(--medium); }
  summary { grid-template-columns: 1fr; gap: var(--unit); }
  body > footer { grid-template-columns: 1fr; gap: var(--small); }
}
@media (max-width: 48rem) {
  :root { --body-size: 1.0625rem; --section: 3.25rem; }
  body > header, main, body > footer { width: calc(100% - 2rem); }
  body > header { align-items: flex-start; flex-direction: column; gap: var(--unit); padding-block: var(--small); }
  body > header p > span { margin-block-start: var(--unit); }
  #start-here { grid-template-columns: 1fr; gap: var(--large); padding-block: var(--large) var(--section); }
  h1 { font-size: clamp(2.6rem, 10.7vw, 4rem); max-width: 17ch; }
  [data-lead] { font-size: 1.5rem; }
  #start-here > aside { margin-block-start: 0; }
  #guide-layout { grid-template-columns: 1fr; gap: 0; }
  #guide-layout > aside { position: static; padding-block: var(--large); }
  aside ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--small); }
  aside ol a { align-items: flex-start; min-height: 64px; }
  article { border-inline-start: 0; padding: 0; }
  article > section { border-block-start: 1px solid var(--rule); border-block-end: 0; }
  th, td { padding: .9rem .7rem; }
  tbody th { width: 36%; }
  figure { margin-inline: 0; }
  [data-arm] > strong { font-size: 1.35rem; }
  details > div { padding: var(--small); }
  summary { padding: var(--small); }
  #source-cards { padding: var(--medium); margin-block: var(--section); }
  footer ul { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}
@media print {
  :root { color-scheme: light; --ground: #fff; --panel: #f5f5f5; --deep: #fff; --ink: #171b20; --muted: #39434d; --link: #174c95; --rule: #5c6570; --rule-soft: #aab2bc; --electric: #174c95; }
  body > header, main, body > footer { width: 100%; }
  #start-here { padding-block: var(--large); gap: var(--large); }
  #start-here > aside { margin-block-start: 0; }
  #guide-layout { display: block; }
  #guide-layout > aside, #skip, [data-action], footer ul, summary [data-state] { display: none; }
  article { border: 0; padding: 0; }
  article > section { padding-block: var(--large); }
  figure, details, tr { break-inside: avoid; }
  #source-cards { margin-block: var(--large); }
  a { color: var(--ink); }
}