/* myOS Tools
   One stylesheet, no build step, no font files.

   The look: near-black or near-white ground, ink in three strengths, hairlines doing the work
   that boxes and shadows usually do, small facts in the system's monospace, and no colour of the
   page's own. The only colour is what the tools' icons and pictures bring. Behind the headline
   sit three overlapping circles drawn in hairlines. */

:root {
  color-scheme: light dark;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #fbfbfc;
  --panel: #ffffff;
  --raised: #ffffff;
  --sunk: #f4f5f7;
  --ink: #0a0b0d;
  --ink-2: #3d4149;
  --ink-3: #686d77;
  --line: rgb(10 11 13 / 0.09);
  --line-2: rgb(10 11 13 / 0.17);
  --hover: rgb(10 11 13 / 0.035);
  --spot: rgb(10 11 13 / 0.03);
  --button: #0a0b0d;
  --button-hover: #2b2e34;
  --button-ink: #ffffff;
  --button-press: #000000;
  --halo: rgb(10 11 13 / 0.09);
  --tip-shadow: 0 1px 2px rgb(10 11 13 / 0.06), 0 8px 24px -8px rgb(10 11 13 / 0.2);
  --backdrop: rgb(22 24 28 / 0.42);
  --panel-shadow: 0 1px 2px rgb(10 11 13 / 0.04), 0 12px 32px -20px rgb(10 11 13 / 0.12);
  --sheet-shadow: 0 2px 4px rgb(10 11 13 / 0.05), 0 40px 100px -20px rgb(10 11 13 / 0.34);
  --page-light: rgb(255 255 255 / 0);
  --geo: rgb(10 11 13 / 0.1);
  --geo-strong: rgb(10 11 13 / 0.2);
  --lens: rgb(10 11 13 / 0.05);
  --icon-edge: none;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090a;
    --panel: #0d0e10;
    --raised: #101113;
    --sunk: #0a0b0d;
    --ink: #f7f8f8;
    --ink-2: #c3c6cc;
    --ink-3: #8a8f98;
    --line: rgb(255 255 255 / 0.08);
    --line-2: rgb(255 255 255 / 0.16);
    --hover: rgb(255 255 255 / 0.04);
    --spot: rgb(255 255 255 / 0.055);
    --button: #f2f3f5;
    --button-hover: #ffffff;
    --button-ink: #08090a;
    --button-press: #d9dbe0;
    --halo: rgb(255 255 255 / 0.11);
    --tip-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 10px 28px -6px rgb(0 0 0 / 0.8);
    --backdrop: rgb(0 0 0 / 0.68);
    --panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03), 0 24px 48px -28px rgb(0 0 0 / 0.9);
    --sheet-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 40px 120px rgb(0 0 0 / 0.75);
    --page-light: rgb(255 255 255 / 0.06);
    --geo: rgb(255 255 255 / 0.1);
    --geo-strong: rgb(255 255 255 / 0.24);
    --lens: rgb(255 255 255 / 0.11);
    /* A dark icon on a dark page needs its edge found for it. */
    --icon-edge: drop-shadow(0 0 0.5px rgb(255 255 255 / 0.28));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The page behind an open sheet does not scroll. */
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  min-block-size: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 460px at 72% -140px, var(--page-light), transparent 72%) no-repeat,
    var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The circles behind the headline and the strip of pictures run past the column; they stop at the window. */
main {
  flex: 1;
  overflow-x: clip;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  inline-size: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

.vh {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shown only when scripts are off (src/nojs.css turns it on and turns .js-only off). */
.nojs-only {
  display: none !important;
}

.skip {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 40;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

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

.bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}

.bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  block-size: 60px;
}

/* The wordmark: the plain word, written exactly as the headline writes it. */
.brand {
  color: var(--ink);
  border-radius: 6px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.034em;
  white-space: nowrap;
  text-decoration: none;
}

/* "tools" is the site's own word after the name: lower case, lighter in weight and in tone. */
.brand__word {
  color: var(--ink-3);
  font-weight: 400;
}

/* ---------- Ways around ----------
   Going somewhere else on the site is a word and a chevron, here and at the end of every row.
   The solid round button is kept for getting a tool. */

.go {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.go .ico {
  --ico: 14px;
  stroke-width: 1.75;
}

.go--back .ico {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .go:hover {
    color: var(--ink);
  }

  .go:hover .ico {
    transform: translateX(3px);
  }

  .go--back:hover .ico {
    transform: translateX(-3px) scaleX(-1);
  }
}

/* ---------- The action ----------
   Getting a tool is always the same control: one solid round button carrying an icon (download,
   copy or open). In the list it stands alone and a label slides out beside it when it is pointed
   at or focused. Where there is room (the head of a tool's page and sheet) it ends a field that
   names exactly what you get. */

.ico {
  display: block;
  inline-size: var(--ico, 20px);
  block-size: var(--ico, 20px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knob {
  --knob: 40px;
  --ico: 20px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--knob);
  block-size: var(--knob);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knob > .ico {
  grid-area: 1 / 1;
}

/* Copying answers in place: the two sheets give way to a tick. */
.knob > .ico--check {
  opacity: 0;
}

.knob[data-state] > .ico--copy {
  opacity: 0;
  transform: scale(0.6);
}

.knob[data-state] > .ico--check {
  opacity: 1;
}

.knob:active,
a.take:active .knob {
  background: var(--button-press);
  transform: scale(0.94);
}

.knob__tip {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(100% + 10px);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--raised);
  box-shadow: var(--tip-shadow);
  color: var(--ink);
  font: 500 12.5px/1.25 var(--font);
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(4px, -50%);
  pointer-events: none;
}

.knob__what {
  color: var(--ink-3);
  font: 12px/1.25 var(--mono);
  font-variant-numeric: tabular-nums;
}

.knob:focus-visible > .knob__tip,
.knob[data-state] > .knob__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.knob__done,
.knob__selected,
.knob[data-state] .knob__say,
.knob[data-state] .knob__what {
  display: none;
}

.knob[data-state="copied"] .knob__done,
.knob[data-state="selected"] .knob__selected {
  display: inline;
}

.take {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-inline-size: 100%;
  min-block-size: 48px;
  padding: 3px 3px 3px 18px;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: var(--sunk);
  color: var(--ink);
  text-decoration: none;
}

.take__what {
  min-inline-size: 0;
  padding-block: 6px;
  overflow: hidden;
  font: 13px/1.45 var(--mono);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The line to copy may run to several lines, and can also be selected by hand, whole. */
.take--copy .take__what {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  user-select: all;
}

/* In a field the label sits above the knob, where it covers nothing. */
.take .knob__tip {
  inset-block: auto calc(100% + 10px);
  inset-inline-end: 0;
  transform: translate(0, 4px);
}

.take .knob:focus-visible > .knob__tip,
.take .knob[data-state] > .knob__tip {
  transform: none;
}

a.take:focus-visible {
  outline-offset: 3px;
}

@media (hover: hover) {
  .knob:hover,
  a.take:hover .knob {
    background: var(--button-hover);
    box-shadow: 0 0 0 4px var(--halo);
  }

  .knob:hover > .knob__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }

  .take .knob:hover > .knob__tip {
    transform: none;
  }

  a.take:hover {
    border-color: var(--ink-3);
  }

  /* The arrow dips toward the tray; the open arrow leaves by its corner. */
  .knob:hover .ico--download .ico__move,
  a.take:hover .ico--download .ico__move {
    transform: translateY(1.5px);
  }

  .knob:hover .ico--open .ico__move,
  a.take:hover .ico--open .ico__move {
    transform: translate(1px, -1px);
  }
}

/* ---------- Headline ---------- */

.hero {
  position: relative;
  padding-block: clamp(56px, 12vh, 128px) clamp(40px, 7vh, 72px);
}

.hero__title {
  position: relative;
  margin: 0;
  font-size: clamp(38px, 6.2vw, 68px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.034em;
  text-wrap: balance;
}

.hero__title span {
  display: block;
  color: var(--ink-3);
}

.home--m .hero,
.home--s .hero {
  padding-block: clamp(40px, 7vh, 64px) clamp(28px, 4vh, 40px);
}

.home--m .hero__title,
.home--s .hero__title {
  font-size: clamp(30px, 4.2vw, 44px);
  letter-spacing: -0.035em;
}

/* The circles behind the headline. */
.geometry {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--gutter) * -0.5);
  inline-size: min(58vw, 660px);
  block-size: auto;
  overflow: visible;
  transform: translateY(-43%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 94%);
}

.geometry circle {
  fill: none;
  stroke-width: 1;
}

.geometry__ring {
  stroke: var(--geo-strong);
}

.geometry__arc {
  stroke: var(--geo);
}

.geometry__light {
  stop-color: var(--lens);
}

.geometry__dark {
  stop-color: var(--lens);
  stop-opacity: 0;
}

.home--m .geometry,
.home--s .geometry {
  inline-size: min(40vw, 420px);
}

/* ---------- Icons ---------- */

.icon {
  display: block;
  flex: none;
  inline-size: var(--icon);
  block-size: var(--icon);
}

.icon img {
  display: block;
  filter: var(--icon-edge);
}

/* App icons are prepared so the solid body is 80% of the image; drawing the image at 125% of the
   box puts the body exactly on the box and lets the icon's own shadow fall outside it. */
.icon--app img {
  inline-size: 125%;
  block-size: 125%;
  max-inline-size: none;
  margin: -12.5%;
}

.icon--mark img {
  inline-size: 100%;
  block-size: 100%;
}

/* A tool without an icon: its initial on a plain tile of the same shape. */
.icon--none {
  display: grid;
  place-items: center;
  border-radius: 22.5%;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-3);
  font-size: calc(var(--icon) * 0.4);
  font-weight: 500;
  line-height: 1;
}

/* ---------- Small facts ---------- */

.meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: 3px;
  margin: 0;
  color: var(--ink-3);
  font: 12.5px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.meta__line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

/* A short upright rule between facts. */
.meta__line > span + span::before,
.meta__line + .meta__line::before {
  content: "";
  display: inline-block;
  inline-size: 1px;
  block-size: 0.85em;
  margin-inline: 10px;
  background: var(--line-2);
  vertical-align: -0.1em;
}

/* A line to copy sits on a line of its own, and can be selected whole. */
.meta__line--copy {
  flex-basis: 100%;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  user-select: all;
}

.meta__line--copy + .meta__line::before {
  display: none;
}

/* ---------- The list ---------- */

.rows {
  --icon: 56px;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  overflow: clip;
}

/* A soft light that follows the pointer across the panel (src/enhance.js moves it). */
.rows::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), var(--spot), transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr) auto;
  grid-template-areas:
    "icon text actions"
    "icon meta actions";
  column-gap: 20px;
  row-gap: 9px;
  align-items: center;
  padding: 24px 28px;
}

.row + .row {
  border-block-start: 1px solid var(--line);
}

.row > .icon {
  grid-area: icon;
}

.row__text {
  grid-area: text;
  align-self: end;
}

.row__meta {
  grid-area: meta;
  align-self: start;
}

.row__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 20px;
}

.row__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.row__tagline {
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* The row is the way to a tool's details: its name is the link, and the link's target is the
   whole row, drawn as an inset rounded plate when it is pointed at or focused. */
.row__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.row__link::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 11px;
}

.row__link:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* The visible hint that the row opens: a word and a chevron at its end. */
.row__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.row__more .ico {
  --ico: 14px;
  stroke-width: 1.75;
}

.row:has(.row__link:focus-visible) .row__more {
  color: var(--ink);
}

/* The knob and the line to copy sit above the row's target. */
.row__actions .knob,
.row .meta__line--copy {
  z-index: 1;
}

.row .meta__line--copy {
  position: relative;
}

/* One tool: it has the panel to itself, and its first picture follows inside it. */
.rows[data-density="xl"] {
  --icon: 96px;
}

.rows[data-density="xl"] .row {
  column-gap: 28px;
  row-gap: 12px;
  padding: 36px;
}

.rows[data-density="xl"] .row__name {
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.rows[data-density="xl"] .row__tagline {
  margin-block-start: 6px;
  font-size: 18px;
}

.rows[data-density="xl"] .knob {
  --knob: 48px;
  --ico: 22px;
}

.rows[data-density="xl"] .row__more {
  font-size: 14px;
}

.row__shot {
  grid-column: 1 / -1;
  margin: 24px -36px -36px;
  border-block-start: 1px solid var(--line);
  background: #0a0b0e;
}

.row__shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Four tools or more: every row on one line, and the columns line up down the page. */
.rows:is([data-density="m"], [data-density="s"]) {
  --icon: 44px;
}

.rows[data-density="s"] {
  --icon: 40px;
}

@media (min-width: 861px) {
  .rows:is([data-density="m"], [data-density="s"]) {
    display: grid;
    grid-template-columns: var(--icon) minmax(0, 1fr) minmax(0, 20.5rem) max-content;
    column-gap: 20px;
    padding-inline: 24px;
  }

  /* The rows share the list's columns, so they carry no side padding of their own. */
  .rows:is([data-density="m"], [data-density="s"]) .row {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: none;
    padding: 15px 0;
  }

  .rows[data-density="s"] .row {
    padding-block: 12px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row > * {
    grid-area: auto;
    grid-row: 1;
    align-self: center;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row > .icon {
    grid-column: 1;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__text {
    grid-column: 2;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__meta {
    grid-column: 3;
    display: block;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__actions {
    grid-column: 4;
    justify-content: flex-end;
  }

  .rows:is([data-density="m"], [data-density="s"]) .meta__line {
    display: flex;
  }

  .rows:is([data-density="m"], [data-density="s"]) .meta__line + .meta__line::before,
  .rows:is([data-density="m"], [data-density="s"]) .meta__label {
    display: none;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__link::after {
    inset: 3px -19px;
    border-radius: 10px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__name {
    font-size: 15px;
    letter-spacing: -0.012em;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__tagline {
    margin-block-start: 1px;
    font-size: 14px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .meta {
    font-size: 12px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__actions {
    gap: 16px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .knob {
    --knob: 32px;
    --ico: 16px;
  }

  .rows:is([data-density="m"], [data-density="s"]) .row__more {
    font-size: 12.5px;
  }

  /* The size is in the column right beside it, so the label stays short and covers less. */
  .rows:is([data-density="m"], [data-density="s"]) .knob__what {
    display: none;
  }
}

@media (hover: hover) {
  .rows:hover::before {
    opacity: 1;
  }

  /* Pointing at the knob is not pointing at the row: the knob sits above the link, so the plate
     and the hint only answer when a click would open the details. */
  .row__link:hover::after {
    background: var(--hover);
  }

  .row:has(.row__link:hover) .row__more {
    color: var(--ink);
  }

  .row:has(.row__link:hover) .row__more .ico {
    transform: translateX(3px);
  }
}

/* ---------- One tool: its own page, and the sheet over the list ---------- */

.tool {
  --icon: 72px;
  --bleed: 0px;
  --shot: clamp(190px, 44vw, 380px);
}

.tool__head {
  display: grid;
  grid-template-columns: var(--icon) minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon get";
  column-gap: 22px;
  row-gap: 18px;
  align-items: start;
}

.tool__head > .icon {
  grid-area: icon;
  align-self: start;
}

.tool__title {
  grid-area: title;
}

/* The action, then the facts about what it gets you. */
.tool__get {
  grid-area: get;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.tool__name {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.tool__tagline {
  margin: 6px 0 0;
  max-inline-size: 60ch;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

.gallery {
  display: flex;
  gap: 14px;
  margin: 32px calc(var(--bleed) * -1) 0;
  padding: 1px var(--bleed) 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--bleed);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.shot {
  flex: none;
  inline-size: min-content;
  margin: 0;
  scroll-snap-align: start;
}

.shot img,
.shot video {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  block-size: var(--shot);
  border-radius: 10px;
  background: #0a0b0e;
  box-shadow: 0 0 0 1px var(--line-2);
}

.shot figcaption {
  margin-block-start: 10px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}

.tool__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 56px);
  row-gap: 32px;
  align-items: start;
  margin-block-start: 28px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--line);
}

.tool__about p {
  margin: 0 0 1em;
  max-inline-size: 64ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* How far along the tool is: a quieter note in a well. */
.tool__about .tool__status {
  margin-block: 20px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.55;
}

.steps h3 {
  margin: 28px 0 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.006em;
}

.steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.steps li {
  position: relative;
  padding-inline-start: 34px;
  counter-increment: step;
}

.steps li + li {
  margin-block-start: 10px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0.05em;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-3);
  font: 11.5px/1 var(--mono);
}

.facts {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunk);
  font-size: 13.5px;
  line-height: 1.5;
}

.facts > div {
  display: grid;
  grid-template-columns: 4.8em minmax(0, 1fr);
  column-gap: 14px;
  padding: 10px 14px;
}

.facts > div + div {
  border-block-start: 1px solid var(--line);
}

.facts dt {
  color: var(--ink-3);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.facts a,
.tool__about a,
.lost__list a {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.facts a:hover,
.tool__about a:hover,
.lost__list a:hover {
  text-decoration-color: currentColor;
}

/* 64 characters: two even lines of 32 where there is room. */
.hash {
  display: block;
  inline-size: 32ch;
  max-inline-size: 100%;
  padding-block-start: 2px;
  color: var(--ink-2);
  font: 11px/1.6 var(--mono);
}

.tool-page main {
  padding-block: clamp(36px, 7vh, 72px) 24px;
}

/* On its own page the strip of pictures runs to the edges of the window. */
.tool-page .tool {
  --bleed: max(var(--gutter), (100vw - var(--measure)) / 2);
}

/* ---------- The sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(100vw - 32px, 960px);
  max-inline-size: none;
  block-size: fit-content;
  max-block-size: min(100dvh - 56px, 940px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--sheet-shadow);
  overflow: hidden;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
}

.sheet::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sheet__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  block-size: 48px;
  padding-inline: 20px 10px;
  border-block-end: 1px solid var(--line);
}

.sheet__crumb {
  display: flex;
  min-inline-size: 0;
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  white-space: nowrap;
}

.sheet__crumb span + span {
  color: var(--ink);
}

.sheet__crumb span + span::before {
  content: "/";
  margin-inline: 9px;
  color: var(--line-2);
}

.sheet__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 28px;
  padding-inline: 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.sheet__close:hover {
  background: var(--hover);
  color: var(--ink);
}

.sheet__close kbd {
  font: 11px/1 var(--mono);
}

.sheet__close .ico {
  --ico: 14px;
}

.sheet__scroll {
  padding: 32px 36px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet .tool {
  --bleed: 36px;
}

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

.foot {
  margin-block-start: clamp(64px, 12vh, 120px);
  padding-block: 26px 30px;
  border-block-start: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}

.foot p {
  margin: 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .go,
  .sheet__close,
  .take,
  .row__more,
  .row__link::after {
    transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
  }

  .knob {
    transition: background-color 0.15s ease-out, box-shadow 0.2s ease-out, transform 0.12s ease-out;
  }

  .knob__tip {
    transition: opacity 0.14s ease-out, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.14s;
  }

  .ico__move,
  .go .ico,
  .row__more .ico,
  .knob > .ico {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.12s ease-out;
  }

  /* The tick is drawn, not swapped in. */
  .knob > .ico--check path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .knob[data-state] > .ico--check path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.28s 0.06s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .rows::before {
    transition: opacity 0.35s ease-out;
  }

  /* Once, on arrival: the headline and the list rise into place while the circles are drawn. */
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

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

  .hero__title {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .home .rows {
    animation: rise 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .geometry circle {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1.5s cubic-bezier(0.65, 0, 0.2, 1) forwards;
  }

  .geometry .geometry__arc {
    animation-delay: 0.25s;
  }

  .geometry .geometry__arc + .geometry__arc {
    animation-delay: 0.4s;
  }

  .geometry__lens {
    animation: appear 1.2s 1.1s ease-out both;
  }

  .sheet {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition:
      opacity 0.18s ease-out,
      transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1),
      overlay 0.26s allow-discrete,
      display 0.26s allow-discrete;
  }

  .sheet::backdrop {
    opacity: 0;
    transition:
      opacity 0.22s ease-out,
      overlay 0.26s allow-discrete,
      display 0.26s allow-discrete;
  }

  .sheet[open],
  .sheet[open]::backdrop {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .sheet[open] {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
    }

    .sheet[open]::backdrop {
      opacity: 0;
    }
  }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 860px) {
  .rows:is([data-density="m"], [data-density="s"]) .row {
    padding: 18px 20px;
  }
}

@media (max-width: 760px) {
  .geometry {
    inset-block-start: 44%;
    inset-inline-end: -28vw;
    inline-size: 92vw;
    opacity: 0.75;
  }

  /* The facts stack: one line each, no rule between lines. */
  .meta {
    display: block;
  }

  .meta__line {
    display: flex;
  }

  .meta__line + .meta__line {
    margin-block-start: 2px;
  }

  .meta__line + .meta__line::before {
    display: none;
  }

  /* The knob moves up beside the name; the facts and the hint take a line each below. */
  .row,
  .rows[data-density="xl"] .row {
    grid-template-columns: var(--icon) minmax(0, 1fr) auto;
    grid-template-areas:
      "icon text knob"
      "meta meta meta"
      "more more more";
    column-gap: 14px;
    row-gap: 12px;
    padding: 20px;
  }

  .row__actions {
    display: contents;
  }

  .row__actions .knob,
  .rows[data-density] .row__actions .knob {
    --knob: 44px;
    --ico: 20px;
    grid-area: knob;
  }

  .row__more {
    grid-area: more;
    margin-block-start: -2px;
  }

  .row__link::after {
    inset: 4px;
  }

  .rows {
    --icon: 52px;
  }

  .rows[data-density="xl"] {
    --icon: 72px;
  }

  .rows[data-density="xl"] .row__name {
    font-size: 24px;
  }

  .rows[data-density="xl"] .row__tagline {
    font-size: 16px;
  }

  .row__text {
    align-self: center;
  }

  .row__shot {
    margin: 6px -20px -20px;
  }

  .tool {
    --icon: 60px;
  }

  .tool__head {
    grid-template-areas:
      "icon title"
      "get get";
    column-gap: 16px;
    row-gap: 18px;
    align-items: center;
  }

  .tool__get {
    display: grid;
    gap: 12px;
  }

  .take {
    display: flex;
    justify-content: space-between;
    min-block-size: 52px;
    border-radius: 26px;
  }

  .take .knob {
    --knob: 44px;
  }

  .gallery {
    margin-block-start: 24px;
    gap: 10px;
  }

  .tool__body {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 22px;
    padding-block-start: 26px;
  }

  .sheet {
    inset-block-end: 0;
    margin-block-end: 0;
    inline-size: 100vw;
    max-block-size: calc(100dvh - 28px);
    border-inline: 0;
    border-block-end: 0;
    border-radius: 20px 20px 0 0;
  }

  .sheet__scroll {
    padding: 24px 20px max(32px, env(safe-area-inset-bottom));
  }

  .sheet .tool {
    --bleed: 20px;
  }

  .sheet__close {
    block-size: 32px;
  }

  .sheet__close kbd {
    display: none;
  }
}

/* ---------- Not found ---------- */

.lost main {
  padding-block: clamp(48px, 12vh, 120px) 0;
}

.lost__title {
  margin: 0;
  max-inline-size: 16ch;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

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

.lost__list {
  margin: 8px 0 28px;
  padding-inline-start: 1.2em;
  color: var(--ink-2);
}

/* ---------- Preview builds only ---------- */

.preview-banner {
  margin: 0;
  padding: 7px var(--gutter);
  background: #ffd84d;
  color: #1a1400;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}