/* research.shushrut.ai. The family's parts in this page's own arrangement:
   a pixelated photograph (here a still hospital hallway as the background,
   where the lab page has its moving theatre and the EHR page a strip),
   one large statement, a printed exhibit (a task sheet, as the EHR page has its
   record), then the lab page's ruled entries. Two modes: dark (the lab page's
   palette) and paper (the EHR page's). */

:root {
  --sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 4vw, 56px);
}

:root[data-look="dark"] {
  color-scheme: dark;
  --ground: #0c0c0b;
  --ink: #ebe7de;
  --ink-2: #a8a399;
  --ink-3: #847f77; /* 4.5:1 on ground, the floor for small text */
  --rule: rgba(235, 231, 222, 0.13);
  --line: rgba(235, 231, 222, 0.3);
  --wash: rgba(235, 231, 222, 0.05);
  --sheet: #121211;
  --pixel: rgba(235, 231, 222, 0.6);
  --error: #e3937e;
  /* Developer colours for the performance chart, from each logo where it has a
     colour (founder, 1 Nov 2026), stepped for the dark sheet #121211. */
  --dev-openai: #3987e5;   --dev-anthropic: #d9683f; --dev-google: #3fa34d;
  --dev-xai: #b98208;      --dev-moonshot: #8b96a5;  --dev-qwen: #c060d0;
  --dev-deepseek: #1f9e9e; --dev-mistral: #e66767;   --dev-zhipu: #5468f0;
  --dev-minimax: #d35f93;  --dev-baichuan: #b8643a;  --dev-freedom: #7d7a73;
  --ground-rgb: 12, 12, 11;
  /* The lab page's grade for photographs: grey, dim, low contrast, on a drape tint. */
  --photo-filter: grayscale(1) contrast(0.82) brightness(0.6);
  --photo-tint: #a3ada6;
}

:root[data-look="paper"] {
  color-scheme: light;
  --ground: #eeebe3;
  --ink: #161514;
  --ink-2: #4f4c47;
  --ink-3: #6b675f; /* 4.6:1 on ground */
  --rule: rgba(22, 21, 20, 0.14);
  --line: rgba(22, 21, 20, 0.45);
  --wash: rgba(22, 21, 20, 0.05);
  --sheet: #f8f7f3;
  --pixel: rgba(22, 21, 20, 0.62);
  --error: #8c2f22;
  /* The same developer colours, stepped for the paper sheet #f8f7f3. */
  --dev-openai: #2a78d6;   --dev-anthropic: #d0603a; --dev-google: #1f8a3b;
  --dev-xai: #c48a00;      --dev-moonshot: #6b7a8c;  --dev-qwen: #a83cb4;
  --dev-deepseek: #009b95; --dev-mistral: #d63a3a;   --dev-zhipu: #4352c2;
  --dev-minimax: #d4508e;  --dev-baichuan: #a0522d;  --dev-freedom: #a8a49c;
  --ground-rgb: 238, 235, 227;
  /* Printed light, like the EHR page's strip, onto the paper. */
  --photo-filter: grayscale(1) contrast(0.62) brightness(1.18);
  --photo-tint: #eeebe3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
}

html { scroll-padding-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--ground); }

a { color: inherit; }

button { font: inherit; }

/* ---- Background --------------------------------------------------------- */

/* A hospital hallway with empty beds, 128 x 72 pixels of grey, mirrored so the
   beds stand on the right and the open floor sits behind the title. It fills
   the first screen and fades into the ground before the task sheet. Graded as
   on the other pages: multiplied onto the drape tint on dark, onto the paper on
   light. Different photograph, different place: the lab page's theatre moves
   and is fixed behind the whole first view; this one is still. */
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(620px, 100vh, 980px);
  overflow: hidden;
  isolation: isolate;
  background: var(--photo-tint);
}

.backdrop::before,
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
}

.backdrop::before {
  background: url(media/beds.png) center 60% / cover no-repeat;
  image-rendering: pixelated;
  filter: var(--photo-filter);
  mix-blend-mode: multiply;
}

/* Shade on the text side and along the bottom, so the words never sit on
   bright pixels and the photograph ends in the ground. */
.backdrop::after {
  background:
    linear-gradient(90deg,
      rgba(var(--ground-rgb), 0.86) 0%,
      rgba(var(--ground-rgb), 0.6) 36%,
      rgba(var(--ground-rgb), 0.1) 70%,
      rgba(var(--ground-rgb), 0.18) 100%),
    linear-gradient(0deg,
      rgba(var(--ground-rgb), 1) 0%,
      rgba(var(--ground-rgb), 0.7) 20%,
      rgba(var(--ground-rgb), 0) 50%),
    linear-gradient(180deg,
      rgba(var(--ground-rgb), 0.6) 0%,
      rgba(var(--ground-rgb), 0) 16%);
}

.bar,
main,
.small-screen,
.foot { position: relative; z-index: 1; }

/* ---- Bar --------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 26px var(--gutter);
  font-size: 14px;
  line-height: 1;
}

/* The name, as on the lab page. No mark beside it: the favicon lives only in the tab. */
.wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.crumb { color: var(--ink-3); }
.crumb::before { content: "/"; margin-right: 14px; }

/* Light or dark, in the bar's own type, like the lab page's Research menu. */
.mode {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.3s ease-out;
}

.mode:hover { color: var(--ink); }
.mode:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 6px; }

/* ---- Head: the statement ------------------------------------------------- */

/* The statement over the lower half of the background, on the four-column grid. */
.head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  padding: clamp(180px, 36vh, 380px) var(--gutter) 0;
}

.head-text { grid-column: 1 / 3; }

@media (prefers-reduced-motion: no-preference) {
  .backdrop::before { animation: appear 2.4s ease both; }
}

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kicker {
  margin: 0 0 1.1rem;
  font-size: 15px;
  color: var(--ink-2);
}

h1 {
  margin: 0;
  font-weight: 340;
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lede {
  margin: 1.4rem 0 0;
  max-width: 38rem;
  font-size: clamp(17px, 0.9rem + 0.35vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---- The task set: read before the sheet -------------------------------- */

/* Set like one of the lab page's ruled entries, on the four-column grid: the
   name in the first column, the text on the right half of the page. */
.taskset {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  align-items: baseline;
  margin: clamp(64px, 10vh, 112px) var(--gutter) 0;
  padding-top: clamp(18px, 2.8vh, 30px);
  border-top: 1px solid var(--line);
}

.taskset h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1vw, 2rem);
  font-weight: 340;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.taskset .entry-text { grid-column: 3 / 5; }

/* ---- Exhibit: one task, set out as a sheet ------------------------------ */

/* The lab page's four-column grid: the sheet across three, its caption in the fourth. */
.exhibit,
.entries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}

.exhibit {
  align-items: start;
  padding: clamp(64px, 11vh, 112px) var(--gutter) 0;
}

.sheet {
  grid-column: 1 / 4;
  border: 1px solid var(--line);
  background: var(--sheet);
  font-size: 14px;
  line-height: 1.55;
}

/* Header: the task, and the facts that place it. */
.sheet-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.sheet-who { display: grid; gap: 3px; }

.sheet-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.sheet-id { color: var(--ink-3); font-size: 13px; }

.sheet-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
}

.sheet-facts div { display: grid; gap: 1px; }
.sheet-facts dt { font-size: 12px; color: var(--ink-3); }
.sheet-facts dd { margin: 0; font-size: 14px; }

.sheet-sec { padding: 14px 22px 8px; }
.sheet-sec + .sheet-sec { border-top: 1px solid var(--rule); }

.sheet-sec h3 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.sheet-sec h3 span { font-weight: 400; color: var(--ink-3); }

.sheet-sec p:not(.perf-scale) {
  margin: 0 0 8px;
  max-width: 44rem;
  font-size: 15px;
  line-height: 1.6;
}

.sheet-table {
  width: 100%;
  margin-bottom: 6px;
  border-collapse: collapse;
}

.sheet-table td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.sheet-table tr:last-child td { border-bottom: 0; }
.sheet-table td:last-child { padding-right: 0; }
.sheet-table td.n { width: 2rem; color: var(--ink-3); }

/* An action that fails the task, marked as clinical systems mark an out-of-range value. */
.flag {
  margin-left: 8px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--error);
  white-space: nowrap;
}

.sheet-foot {
  margin: 0;
  padding: 12px 22px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}

/* Model performance on this task: one bar per model, each with its logo and
   its developer's colour. Until a run exists, each bar is an empty dotted track
   in that colour, the same length for every model. */
.perf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 14px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-2);
}

.perf-legend li { display: inline-flex; align-items: center; gap: 7px; }

/* The legend's key: a short bar in the developer's colour. */
.swatch {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 6px;
  border-radius: 0 3px 3px 0;
  background: var(--c);
}

/* A logo, drawn inline so a black logo takes the page's ink in either mode. */
.logo {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink);
  vertical-align: -3px;
}

.logo svg { width: 100%; height: 100%; }

/* HuatuoGPT has no published logo: its initial instead. */
.logo.letter {
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
}

.perf {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.perf caption,
.perf thead,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.perf .group td {
  padding: 12px 0 4px;
  font-size: 12px;
  color: var(--ink-3);
}

.perf tbody tr:first-child.group td { padding-top: 2px; }

.perf .model {
  width: 13.5rem;
  padding: 3px 16px 3px 0;
  font-size: 13.5px;
  white-space: nowrap;
}

.perf .model .logo { margin-right: 10px; }

.perf .bar-cell {
  position: relative;
  padding: 3px 0;
}

.track {
  position: relative;
  height: 10px;
}

/* Empty: a dotted line in the developer's colour across the full scale. */
.track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  border-top: 2px dotted var(--c);
  opacity: 0.7;
}

.track.scored::before { border-top: 1px dotted var(--line); opacity: 1; top: 4.5px; }

/* Filled, once a run exists: rounded at the data end, anchored to the baseline. */
.fill {
  position: absolute;
  left: 0;
  top: 1px;
  height: 8px;
  width: calc(var(--share, 0) * 100%);
  border-radius: 0 4px 4px 0;
  background: var(--c);
}

/* Hover or focus on a row names the developer and the state. */
.perf .tip {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 8px;
  border: 1px solid var(--line);
  background: var(--sheet);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.perf tr[tabindex]:hover .tip,
.perf tr[tabindex]:focus-visible .tip { opacity: 1; }
.perf tr[tabindex]:hover .model,
.perf tr[tabindex]:focus-visible .model { color: var(--ink); }
.perf tr[tabindex] { outline: none; }
.perf tr[tabindex] .model { color: var(--ink-2); }

.perf-scale {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 10px 13.5rem;
  font-size: 12px;
  color: var(--ink-3);
}

/* Caption beside the sheet: where in the split this task sits, and the way to the next. */
.caption {
  grid-column: 4;
  position: sticky;
  top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.caption-count {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.caption-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

.stepper {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.step {
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.3s ease-out;
}

.step:hover { color: var(--ink); }
.step:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 4px; }

/* ---- Chapter: the lab page's ruled entries ------------------------------ */

.chapter {
  padding: clamp(96px, 16vh, 160px) var(--gutter) 0;
}

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* An entry spans the four columns: the name in the first, the text on the
   right half, as in "The task set". */
.entry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: clamp(18px, 2.8vh, 30px) 0 clamp(22px, 3.4vh, 36px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--gutter);
}

.entry:last-child { border-bottom: 1px solid var(--rule); }

.entry h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.375rem, 1rem + 1vw, 2rem);
  font-weight: 340;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.entry-text {
  grid-column: 3 / 5;
}


.entry-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.entry-text p + p { margin-top: 12px; }

.entry-text .pending { font-size: 13px; color: var(--ink-3); }

/* What later releases add: a short ruled list. */
.scope {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.scope li {
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.scope li:last-child { border-bottom: 1px solid var(--rule); }

/* The invitation to doctors; the link opens the panel form below it. The word
   is highlighted in the opposite colour (white with black text on dark, black
   with white text on paper) and underlined; beside it, an arrow drawn in dots
   points up and right. */
.entry-text .contribute { margin-top: 20px; color: var(--ink); }

.contribute a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.contribute-word {
  padding: 2px 7px 3px;
  background: var(--ink);
  color: var(--ground);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.arrow {
  display: inline-flex;
  color: var(--ink);
  transition: transform 0.2s ease-out;
}

.arrow svg { width: 15px; height: 15px; }

.contribute a:hover .contribute-word { text-decoration-color: var(--ink-3); }
.contribute a:hover .arrow { transform: translate(1px, -1px); }
.contribute a:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 3px; }

/* The partner offer, under the contribute line, folded behind a tag: a small
   outlined label with a chevron, as on the lab page's Research menu. */
.partner-track { margin-top: 26px; }

.partner-track summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.partner-track summary::-webkit-details-marker { display: none; }
.partner-track summary:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 3px; }

.tag {
  padding: 5px 10px 6px;
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  transition: border-color 0.2s ease-out;
}

.partner-track summary:hover .tag { border-color: var(--ink-2); }

.partner-track .chevron {
  color: var(--ink-2);
  transition: transform 0.25s ease-out;
}

.partner-track[open] .chevron { transform: rotate(180deg); }

.entry-text .partner-lead { margin-top: 18px; color: var(--ink-2); }
.entry-text .partner-lead + .perks { margin-top: 10px; }
.perks + .contribute { margin-top: 16px; }

/* A tick box in a form, beside its label. */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

.entry-text .form-intro {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* Citation */
.bib {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--wash);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  overflow-x: auto;
}

.text-button {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-button:hover { color: var(--ink); }

/* ---- Request form, as on the EHR page ----------------------------------- */

.entry-text > .button { margin-top: 22px; }

.button {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button[hidden] { display: none; }
.button:hover { background: var(--wash); border-color: var(--ink-2); }
.button:focus-visible { outline: 1px solid var(--ink-2); outline-offset: 3px; }
.button:disabled { cursor: progress; opacity: 0.6; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 24px;
}

.form[hidden] { display: none; }

.field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}

.field em { font-style: normal; color: var(--ink-3); }
.field .hint { font-size: 12.5px; line-height: 1.5; }
.field[hidden] { display: none; }
.wide-field { grid-column: 1 / -1; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.field select option { background: var(--ground); color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.5; }
.field input::placeholder { color: var(--ink-3); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.field [aria-invalid="true"] { border-color: var(--error); }

/* Off-screen, not display:none, so bots still find it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 4px;
}

.entry-text .form-status { margin: 0; font-size: 13px; color: var(--ink-2); }
.entry-text .form-status.error { color: var(--error); }
.entry-text .form-note { margin: 0; font-size: 13px; color: var(--ink-3); }

/* Shown in place of the form once a request is saved. */
.done {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
}

.entry-text .done p { color: var(--ink); }
.entry-text .done p + p { margin-top: 6px; color: var(--ink-2); }

/* Keeps a word whole, so no line ends on "de-". */
.nowrap { white-space: nowrap; }

.empty { margin: 0; padding: 18px 22px; color: var(--ink-3); }

/* ---- Sign-off ----------------------------------------------------------- */

/* The name across the full width, set like the lab page's sign-off, on two
   lines. The longer line, "Shushrut Research", is about 8.0 times as wide as
   its font size at this weight and tracking; dividing by 8.2 leaves room for a
   scrollbar, so neither line runs past the gutter. */
.signoff {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 12vh, 140px) var(--gutter) 0;
  font-size: calc((100vw - 2 * var(--gutter)) / 8.2);
  font-weight: 340;
  line-height: 0.86;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink);
}

.signoff span { display: block; }

/* ---- Foot -------------------------------------------------------------- */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--gutter) var(--gutter);
  font-size: 13px;
  color: var(--ink-3);
}

.foot a { color: var(--ink-2); text-decoration: none; }

/* ---- Narrower screens -------------------------------------------------- */

/* ---- Small screens ----------------------------------------------------- */

/* The page is for laptops and desktops (founder, 1 Nov 2026). Below 1024 px
   wide it shows only the bar and a note to open it on a larger screen. */
.small-screen { display: none; }

@media (max-width: 1023px) {
  main,
  .signoff,
  .foot,
  .mode { display: none; }

  .small-screen {
    display: block;
    padding: clamp(72px, 20vh, 200px) var(--gutter) var(--gutter);
  }

  .small-screen h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem); }

  .small-screen p {
    margin: 1.2rem 0 0;
    max-width: 30rem;
    font-size: 18px;
    line-height: 1.5;
  }

  .small-screen .small-screen-url {
    margin-top: 2rem;
    font-size: 14px;
    color: var(--ink-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode, .step, .button, .perf .tip, .arrow, .tag, .partner-track .chevron { transition: none; }
}