/* IBM Plex, self-hosted. Latin subset only, which is all this site sets.
   Same origin as everything else: no third party learns who reads the
   page, and no second connection has to open before a heading can
   paint. IBM Plex is OFL, so redistributing it here is fine. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* The accents are the Chrome DevTools box-model overlay: blue is content,
     green is padding, tan is margin. Here they keep meaning: blue is anything
     you can touch, green is what holds, tan is what to watch out for. */
  --content: #6fa8dc;
  --padding: #93c47d;
  --margin: #f6b26b;

  --ink: #0b0e14;
  --surface: #131822;
  --raised: #1a212d;
  --paper: #e6eaf2;
  --muted: #8a94a8;
  --line: #232c3a;

  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --display: 'IBM Plex Sans Condensed', var(--sans);
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--content); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px);
}
.masthead .wrap {
  display: flex;
  /* baseline alignment lines the text up but leaves the whole group hugging
     the top of the bar, which reads as a mistake. Centre the row instead. */
  align-items: center;
  gap: 28px;
  height: 64px;
}
.wordmark {
  font: 600 19px/1 var(--display);
  letter-spacing: 0.01em;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b { color: var(--content); font-weight: 600; }
.masthead nav { margin-left: auto; display: flex; gap: 22px; }
.masthead nav a {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
}
.masthead nav a:hover { color: var(--paper); }

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 64px); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font: 600 clamp(34px, 5.4vw, 58px)/1.04 var(--display);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-style: normal;
  color: var(--content);
}
.hero p {
  margin: 0 0 26px;
  color: var(--muted);
  max-width: 46ch;
  font-size: 17px;
}
.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--padding);
  margin: 0 0 18px;
}

/* ---------- the specimen: a button taken apart ---------- */

/* Every button on the web is four boxes pressed flat into one. This shows
   them as what they are — separate planes — and the toggle presses them back
   together. The colours are the ones the browser's own inspector uses, which
   is where the site's whole palette comes from. */

.specimen {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
}
/* The whole stage is the control. Only the small toggle being clickable was
   the reason nobody knew where to press. */
.specimen-stage {
  perspective: 1100px;
  perspective-origin: 50% 50%;
  display: grid;
  place-items: center;
  min-height: 290px;
  padding: 30px;
  cursor: grab;
  /* folding is the toggle's job; a click here would fight the drag */
  /* let a vertical swipe still scroll the page on a phone */
  touch-action: pan-y;
}
.specimen-stage:active { cursor: grabbing; }

/* The angles live in custom properties so a drag can write to them and the
   annotations can read them back to work out how far to turn against it. */
.exploded {
  position: relative;
  width: 232px;
  height: 60px;
  --rx: 58deg;
  --rz: -38deg;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
  transition: transform .9s cubic-bezier(.22, .8, .24, 1);
}
/* while a hand is on it, the easing would read as lag */
.exploded.turning, .exploded.turning .plane, .exploded.turning b { transition: none; }

.plane {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 5px;
  translate: -50% -50%;
  transition: transform .9s cubic-bezier(.22, .8, .24, 1),
              opacity .35s ease, background .5s ease, box-shadow .9s ease;
}

/* Sizes are the real ones: content, then padding around it, then a hairline
   border, then the margin the element reserves outside itself. */
.plane--margin  { width: 232px; height: 60px; background: color-mix(in srgb, var(--margin) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--margin) 45%, transparent); transform: translateZ(0px); }
.plane--border  { width: 196px; height: 46px; background: color-mix(in srgb, var(--paper) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 28%, transparent); transform: translateZ(30px); }
.plane--padding { width: 188px; height: 38px; background: color-mix(in srgb, var(--padding) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--padding) 50%, transparent); transform: translateZ(52px); }
.plane em {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.06em;
  font-style: normal;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  white-space: nowrap;
  transition: font-size .5s ease, color .5s ease;
}

.plane--content {
  width: 128px; height: 20px;
  background: color-mix(in srgb, var(--content) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--content) 62%, transparent);
  transform: translateZ(78px);
  display: grid;
  place-items: center;
  font: 500 11px/1 var(--mono);
  color: var(--paper);
  white-space: nowrap;
}

/* Unchecked is the assembled state: the planes drop onto each other, the
   view flattens, and what is left is an ordinary button. */
.inspect:not(:checked) ~ .specimen-stage .exploded { transform: rotateX(0deg) rotateZ(0deg); }
.inspect:not(:checked) ~ .specimen-stage .plane { transform: translateZ(0); }
.inspect:not(:checked) ~ .specimen-stage .plane--margin { background: none; box-shadow: none; }
.inspect:not(:checked) ~ .specimen-stage .plane--padding { background: none; box-shadow: none; }
.inspect:not(:checked) ~ .specimen-stage .plane--content { background: none; box-shadow: none; width: 188px; height: 38px; }
.inspect:not(:checked) ~ .specimen-stage .plane em { font-size: 13px; color: var(--paper); }
.inspect:not(:checked) ~ .specimen-stage .plane--border {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
}

.specimen-bar {
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 11px/1 var(--mono);
  color: var(--muted);
}
.specimen-top {
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font: 400 11px/1 var(--mono);
  color: var(--muted);
}
.swatch { display: inline-flex; align-items: center; gap: 6px; }
.swatch i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.sw-border { background: color-mix(in srgb, var(--paper) 30%, transparent); }
.specimen-top .swatch { cursor: pointer; transition: opacity .3s ease, color .2s ease; user-select: none; }
.specimen-top .swatch:hover { color: var(--paper); }
.layer { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
#lay-margin:focus-visible  ~ .specimen-top .swatch[for="lay-margin"],
#lay-border:focus-visible  ~ .specimen-top .swatch[for="lay-border"],
#lay-padding:focus-visible ~ .specimen-top .swatch[for="lay-padding"],
#lay-content:focus-visible ~ .specimen-top .swatch[for="lay-content"] {
  outline: 2px solid var(--content);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Each square takes its own box out of the object and puts it back. The
   plane keeps its place in the stack while it is gone, so the ones left
   behind do not shuffle up to fill the hole. */
#lay-margin:not(:checked)  ~ .specimen-stage .plane--margin,
#lay-border:not(:checked)  ~ .specimen-stage .plane--border,
#lay-padding:not(:checked) ~ .specimen-stage .plane--padding,
#lay-content:not(:checked) ~ .specimen-stage .plane--content { opacity: 0; }

#lay-margin:not(:checked)  ~ .specimen-top .swatch[for="lay-margin"],
#lay-border:not(:checked)  ~ .specimen-top .swatch[for="lay-border"],
#lay-padding:not(:checked) ~ .specimen-top .swatch[for="lay-padding"],
#lay-content:not(:checked) ~ .specimen-top .swatch[for="lay-content"] { opacity: .3; }

#lay-margin:not(:checked)  ~ .specimen-top .swatch[for="lay-margin"] i,
#lay-border:not(:checked)  ~ .specimen-top .swatch[for="lay-border"] i,
#lay-padding:not(:checked) ~ .specimen-top .swatch[for="lay-padding"] i,
#lay-content:not(:checked) ~ .specimen-top .swatch[for="lay-content"] i { background: none; box-shadow: inset 0 0 0 1px currentColor; }

.specimen-bar .hint { color: var(--muted); }
/* the caption names the action available now, not the state you are in */
.inspect:checked ~ .specimen-bar .hint::after { content: " Click the object to press it together."; color: var(--paper); }
.inspect:not(:checked) ~ .specimen-bar .hint::after { content: " Click the button to take it apart."; color: var(--paper); }

.toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px 5px 8px;
}
.toggle i { width: 11px; height: 11px; border: 1px solid var(--line); border-radius: 2px; display: block; }
.toggle:hover { color: var(--paper); border-color: var(--content); }
.inspect:checked ~ .specimen-bar .toggle i { background: var(--content); border-color: var(--content); }
.inspect:checked ~ .specimen-bar .toggle { color: var(--paper); }
.inspect:focus-visible ~ .specimen-bar .toggle { outline: 2px solid var(--content); outline-offset: 2px; }
.inspect { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* The assembly is the whole idea, but it is still motion. */
@media (prefers-reduced-motion: reduce) {
  .exploded, .plane { transition: none; }
}

/* ---------- feed ---------- */

.feed { padding-bottom: 96px; }
.feed-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 0 18px;
  border-top: 1px solid var(--line);
}
.feed-head h2 {
  font: 600 20px/1 var(--display);
  margin: 0;
}
.feed-head span {
  font: 400 12px/1 var(--mono);
  color: var(--muted);
  margin-left: auto;
}

.card {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  margin-bottom: 22px;
  overflow: hidden;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font: 400 12px/1 var(--mono);
  color: var(--muted);
}
.card-top .prop { color: var(--content); }
.card-top time { margin-left: auto; }

.card-body {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}
.stage {
  min-width: 0;
  padding: 30px 26px;
  display: grid;
  /* an auto track sizes to its content, so any demo wider than the panel
     would widen the track and spill over the divider instead of staying in */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  border-right: 1px solid var(--line);
  min-height: 210px;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.008) 8px 16px);
}

.detail { padding: 22px 24px 24px; min-width: 0; }
.detail h3 {
  font: 600 21px/1.18 var(--display);
  margin: 0 0 14px;
}

/* The two structural devices. Both say something always true about a
   snippet: where it bites, and what happens where it is not supported. */
.note {
  border-left: 2px solid var(--margin);
  padding: 2px 0 2px 14px;
  margin: 0 0 12px;
  font-size: 15px;
}
.note b {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--margin);
  margin-bottom: 7px;
}
.note--fallback { border-left-color: var(--padding); }
.note--fallback b { color: var(--padding); }

.source { margin-top: 18px; }
.source-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 11px/1 var(--mono);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.copy {
  margin-left: auto;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 9px;
  cursor: pointer;
}
.copy:hover { color: var(--paper); border-color: var(--content); }
.copy[data-done="1"] { color: var(--padding); border-color: var(--padding); }

pre {
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  overflow-x: auto;
  font: 400 12.5px/1.7 var(--mono);
  color: #c7d2e2;
}
pre .t { color: var(--content); }
pre .k { color: var(--padding); }
pre .c { color: var(--muted); }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 60px;
  font: 400 12px/1.7 var(--mono);
  color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer p { margin: 0; }
.site-footer nav { margin-left: auto; display: flex; gap: 20px; }

/* ---------- demos, each namespaced so nothing leaks ---------- */

.d-sticky { width: 100%; max-width: 320px; height: 150px; overflow: auto; border: 1px solid var(--line); border-radius: 3px; }
.d-sticky table { width: 100%; border-collapse: collapse; font: 400 13px/1 var(--mono); }
.d-sticky th { position: sticky; top: 0; background: var(--raised); color: var(--content); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.d-sticky td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); }

.d-clamp { max-width: 320px; color: var(--muted); font-size: 14px; }
.d-clamp p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

.d-grow { width: 100%; max-width: 320px; }
.d-grow textarea {
  field-sizing: content;
  width: 100%;
  min-height: 3lh;
  max-height: 9lh;
  resize: none;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  font: 400 13px/1.6 var(--mono);
}
.d-grow textarea:focus-visible { outline: 2px solid var(--content); outline-offset: 1px; }

.d-acc { width: 100%; max-width: 320px; }
.d-acc details { border: 1px solid var(--line); border-radius: 3px; margin-bottom: 6px; background: var(--raised); }
.d-acc summary { list-style: none; cursor: pointer; padding: 10px 13px; font: 500 13px/1 var(--mono); color: var(--paper); }
.d-acc summary::-webkit-details-marker { display: none; }
.d-acc summary::before { content: "+"; color: var(--content); margin-right: 9px; }
.d-acc details[open] summary::before { content: "\2212"; }
.d-acc p { margin: 0; padding: 0 13px 12px; font-size: 13px; color: var(--muted); }

.d-focus { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.d-focus button {
  font: 500 13px/1 var(--mono);
  padding: 11px 16px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--paper);
  cursor: pointer;
}
.d-focus button:focus { outline: none; }
.d-focus button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }
.d-focus .hint { flex-basis: 100%; text-align: center; font: 400 11px/1.5 var(--mono); color: var(--muted); margin-top: 4px; }

/* ---------- responsive + reduced motion ---------- */

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .card-body { grid-template-columns: 1fr; }
  .stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .masthead nav a:not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ---------- gradient border ---------- */

.d-grad {
  border-radius: 14px;
  padding: 1px;                 /* this is the border thickness */
  background: linear-gradient(135deg, var(--content), var(--padding) 55%, var(--margin));
  max-width: 250px;
}
.d-grad-inner {
  border-radius: 13px;          /* outer minus the padding, or corners go wrong */
  background: var(--surface);
  padding: 20px 22px;
}
.d-grad h4 { font: 600 17px/1.2 var(--display); margin: 0 0 6px; }
.d-grad p { margin: 0; font-size: 13px; color: var(--muted); }
.d-grad .price { font: 500 13px/1 var(--mono); color: var(--padding); display: block; margin-top: 14px; }

/* ---------- cursor spotlight ---------- */

.d-spot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 26px 24px;
  max-width: 250px;
  overflow: hidden;
  isolation: isolate;
}
.d-spot h4 { font: 600 17px/1.2 var(--display); margin: 0 0 6px; position: relative; }
.d-spot p { margin: 0; font-size: 13px; color: var(--muted); position: relative; }
.d-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%),
              color-mix(in srgb, var(--content) 26%, transparent), transparent 70%);
}
/* Only where a real cursor exists. On touch the highlight would latch on
   after a tap and stay lit with nothing hovering it. */
@media (hover: hover) and (pointer: fine) {
  .d-spot:hover::before { opacity: 1; }
}

/* ---------- scroll-linked progress ---------- */

.d-scroll {
  width: 100%;
  max-width: 250px;
  height: 165px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.d-scroll .track {
  display: none;                /* see the @supports below */
  position: sticky;
  top: 0;
  height: 3px;
  background: var(--line);
}
.d-scroll .bar {
  height: 100%;
  background: var(--content);
  transform-origin: 0 50%;
  animation: fill linear both;
  animation-timeline: scroll(nearest);
}
.d-scroll p { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--muted); }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  .d-scroll .track { display: block; }
}

/* ---------- horizontal table: frozen first column ---------- */

.d-hscroll { width: 100%; max-width: 260px; height: 150px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.d-hscroll table { border-collapse: separate; border-spacing: 0; font: 400 12px/1 var(--mono); white-space: nowrap; }
.d-hscroll th, .d-hscroll td { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.d-hscroll thead th { position: sticky; top: 0; z-index: 2; background: var(--raised); color: var(--content); text-align: left; }
.d-hscroll .pin { position: sticky; left: 0; z-index: 1; background: var(--surface); }
/* the corner is sticky in both axes, so it has to outrank both */
.d-hscroll thead .pin { z-index: 3; background: var(--raised); }
.d-hscroll td { color: var(--muted); }

/* ---------- scroll shadows ---------- */

.d-shadow {
  width: 100%; max-width: 260px; overflow: auto; border-radius: 6px;
  font: 400 12px/2.6 var(--mono); color: var(--muted); white-space: nowrap; padding: 4px 0;
  background:
    linear-gradient(90deg, var(--surface) 30%, transparent) left / 42px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, transparent) right / 42px 100% no-repeat local,
    radial-gradient(farthest-side at 0, rgba(0,0,0,.55), transparent) left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100%, rgba(0,0,0,.55), transparent) right / 18px 100% no-repeat scroll,
    var(--surface);
}
.d-shadow span { padding: 0 14px; }

/* ---------- segmented control ---------- */

/* Equal columns, an indicator exactly one column wide, and a shift of 100% of
   itself. Pixel widths would need re-measuring every time a label changes. */
.d-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); }
.d-seg label { position: relative; z-index: 1; padding: 8px 16px; text-align: center; border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--muted); cursor: pointer; transition: color .2s; }
.d-seg input { position: absolute; opacity: 0; pointer-events: none; }
.d-seg input:checked + label { color: var(--ink); }
.d-seg input:focus-visible + label { outline: 2px solid var(--content); outline-offset: 2px; }
.d-seg::after {
  content: ""; position: absolute; z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px; background: var(--content);
  transition: translate .28s cubic-bezier(.4, 1.3, .5, 1);
}
.d-seg:has(input:nth-of-type(2):checked)::after { translate: 100% 0; }
.d-seg:has(input:nth-of-type(3):checked)::after { translate: 200% 0; }

/* ---------- skeleton ---------- */

.d-skel { width: 100%; max-width: 250px; }
.d-skel i, .d-skel b { display: block; border-radius: 4px; background:
  linear-gradient(90deg, var(--raised) 25%, #26303f 50%, var(--raised) 75%) 0 0 / 300% 100%;
  animation: sweep 1.4s linear infinite; }
.d-skel b { height: 13px; margin-bottom: 9px; width: 62%; }
.d-skel i { height: 10px; margin-bottom: 7px; }
.d-skel i:last-child { width: 45%; }
@keyframes sweep { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .d-skel i, .d-skel b { animation: none; background: var(--raised); } }

/* ---------- menu button ---------- */

.d-burger button { width: 46px; height: 46px; display: grid; place-content: center; gap: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.d-burger span { display: block; width: 20px; height: 2px; background: var(--paper); transition: translate .22s, rotate .22s, opacity .15s; }
.d-burger [aria-expanded="true"] span:nth-child(1) { translate: 0 8px; rotate: 45deg; }
.d-burger [aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.d-burger [aria-expanded="true"] span:nth-child(3) { translate: 0 -8px; rotate: -45deg; }
.d-burger button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* ---------- switch ---------- */

.d-switch label { display: inline-flex; align-items: center; gap: 11px; font: 400 13px/1 var(--mono); color: var(--muted); cursor: pointer; }
.d-switch input { appearance: none; margin: 0; width: 44px; height: 25px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s; }
.d-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); transition: translate .2s, background .2s; }
.d-switch input:checked { background: color-mix(in srgb, var(--padding) 30%, var(--ink)); border-color: var(--padding); }
.d-switch input:checked::after { translate: 19px 0; background: var(--padding); }
.d-switch input:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* ---------- marquee ---------- */

.d-marquee { width: 100%; max-width: 260px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.d-marquee div { display: flex; width: max-content; animation: slide 14s linear infinite; }
.d-marquee span { padding: 0 16px; font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .d-marquee div { animation: none; } }

/* ---------- glass ---------- */

.d-glass { position: relative; width: 100%; max-width: 250px; height: 160px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: conic-gradient(from 210deg, #6fa8dc, #93c47d, #f6b26b, #6fa8dc); }
.d-glass div { backdrop-filter: blur(11px); background: rgba(11,14,20,.42); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; padding: 14px 20px; font: 500 13px/1 var(--mono); color: #fff; }

/* ---------- gradient text ---------- */

.d-gtext { font: 600 40px/1.1 var(--display); text-align: center; max-width: 260px;
  background: linear-gradient(100deg, var(--content), var(--padding) 45%, var(--margin));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- range ---------- */

.d-range { width: 100%; max-width: 250px; }
.d-range input { width: 100%; appearance: none; background: transparent; }
.d-range input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--line); }
.d-range input::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line); }
.d-range input::-webkit-slider-thumb { appearance: none; margin-top: -7px; width: 19px; height: 19px; border-radius: 50%; background: var(--content); border: 0; }
.d-range input::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; background: var(--content); border: 0; }
.d-range input:focus-visible { outline: 2px solid var(--content); outline-offset: 6px; border-radius: 999px; }

/* ---------- tilt ---------- */

.d-tilt { perspective: 700px; }
.d-tilt div { width: 190px; padding: 26px 22px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); font: 500 13px/1.5 var(--mono); color: var(--paper); transition: rotate .3s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) { .d-tilt:hover div { rotate: x 9deg; box-shadow: 0 18px 30px rgba(0,0,0,.45); } }

/* ---------- animated gradient angle ---------- */

@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.d-spin { width: 180px; height: 180px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from var(--spin), var(--content), var(--padding), var(--margin), var(--content));
  animation: spin 5s linear infinite; display: grid; place-items: center; }
.d-spin div { width: 100%; height: 100%; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--muted); }
@keyframes spin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .d-spin { animation: none; } }

/* ---------- search and tag filter ---------- */

.filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 0 22px; }
.filters input {
  flex: 0 1 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--paper);
  font: 400 13px/1 var(--mono);
}
.filters input::placeholder { color: var(--muted); }
.filters input:focus-visible { outline: 2px solid var(--content); outline-offset: 1px; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tags button {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tags button:hover { color: var(--paper); border-color: var(--content); }
.tags button[aria-pressed="true"] { color: var(--ink); background: var(--content); border-color: var(--content); }
.tags button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }
.no-hits { color: var(--muted); font-size: 15px; padding: 8px 0 40px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- container query, draggable ---------- */

/* resize hands the width to the reader, so it needs both ends bounded:
   below 130px the card has nothing left to reflow, above 300px it just
   pushes out of the panel without demonstrating anything further. */
.d-cq, .d-cqi { container-type: inline-size; resize: horizontal; overflow: auto; width: 220px; min-width: 130px; max-width: min(100%, 300px); padding: 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface); }
.d-cq .row { display: grid; gap: 10px; }
.d-cq .thumb { height: 46px; border-radius: 6px; background: linear-gradient(135deg, var(--content), var(--padding)); }
.d-cq h5 { font: 600 14px/1.2 var(--display); margin: 0 0 3px; color: var(--paper); }
.d-cq p { margin: 0; font-size: 12px; color: var(--muted); }
@container (min-width: 210px) { .d-cq .row { grid-template-columns: 62px 1fr; align-items: center; } }
.d-cqi p { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.15; font-size: clamp(14px, 9cqi, 30px); color: var(--paper); }
/* resize writes an inline width and keeps writing past max-width: the box
   still paints clamped, but the wrapper measures the stored value, so a
   caption centred in the wrapper drifts off the box. Give both a column of
   their own to centre in. */
/* the track must be capped too: an auto grid column sizes to its content,
   so a resized child widens the column past the container and then the
   child's own max-width: 100% resolves against that wider column and
   stops clamping anything. */
.d-resize { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: min(100%, 300px); }
.d-hint { font: 400 10px/1 var(--mono); color: var(--muted); margin-top: 8px; text-align: center; }

/* ---------- aspect ratio ---------- */

.d-ar { display: flex; gap: 10px; align-items: flex-start; }
.d-ar div { width: 62px; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font: 500 11px/1 var(--mono); color: var(--ink); background: var(--content); }
.d-ar div:nth-child(2) { aspect-ratio: 3 / 4; background: var(--padding); }
.d-ar div:nth-child(3) { aspect-ratio: 16 / 9; width: 96px; background: var(--margin); }

/* ---------- text setting ---------- */

.d-balance { max-width: 250px; display: grid; gap: 16px; }
.d-balance h5 { margin: 0; font: 600 18px/1.25 var(--display); color: var(--paper); }
.d-balance .on { text-wrap: balance; }
.d-balance small { display: block; font: 400 10px/1 var(--mono); color: var(--muted); margin-bottom: 5px; letter-spacing: .08em; }

.d-pretty { max-width: 250px; font-size: 13px; color: var(--muted); }
.d-pretty p { margin: 0; text-wrap: pretty; }

.d-hyph { max-width: 148px; font-size: 13px; color: var(--muted); text-align: justify; }
.d-hyph p { margin: 0; hyphens: auto; }

/* ---------- form state ---------- */

.d-invalid { width: 100%; max-width: 240px; }
.d-invalid input { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px 13px; color: var(--paper); font: 400 13px/1 var(--mono); }
.d-invalid input:user-invalid { border-color: #e06c6c; }
.d-invalid input:user-valid { border-color: var(--padding); }
.d-invalid input:focus-visible { outline: 2px solid var(--content); outline-offset: 1px; }
.d-invalid small { display: block; margin-top: 7px; font: 400 11px/1.4 var(--mono); color: var(--muted); }

.d-accent { display: grid; gap: 12px; accent-color: var(--padding); font: 400 13px/1 var(--mono); color: var(--muted); }
.d-accent label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.d-accent input[type="range"] { accent-color: var(--content); width: 150px; }

.d-float { width: 100%; max-width: 240px; position: relative; }
.d-float input { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 18px 13px 8px; color: var(--paper); font: 400 13px/1 var(--mono); }
.d-float label { position: absolute; left: 14px; top: 13px; font: 400 12px/1 var(--mono); color: var(--muted); pointer-events: none; transition: translate .15s, font-size .15s; }
.d-float input:not(:placeholder-shown) + label,
.d-float input:focus + label { translate: 0 -8px; font-size: 10px; color: var(--content); }
.d-float input:focus-visible { outline: 2px solid var(--content); outline-offset: 1px; }

/* ---------- scroll behaviour ---------- */

.d-snap { display: flex; gap: 10px; width: 100%; max-width: 250px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 0 0 0; padding-bottom: 8px; }
.d-snap div { flex: 0 0 82%; scroll-snap-align: start; height: 108px; border-radius: 10px; display: grid; place-items: center; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--content); }
.d-snap div:nth-child(2) { background: var(--padding); }
.d-snap div:nth-child(3) { background: var(--margin); }

.d-chain { width: 100%; max-width: 250px; height: 120px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.d-chain p { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--muted); }

.d-anchor { width: 100%; max-width: 250px; height: 150px; overflow: auto; scroll-padding-top: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.d-anchor .bar { position: sticky; top: 0; display: flex; gap: 10px; padding: 9px 12px; background: var(--raised); border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); }
.d-anchor .bar a { color: var(--content); text-decoration: none; }
.d-anchor h6 { margin: 0; padding: 12px 14px 4px; font: 600 13px/1 var(--display); color: var(--paper); }
.d-anchor p { margin: 0; padding: 0 14px 26px; font-size: 12px; color: var(--muted); }

/* ---------- :has() ---------- */

.d-field { width: 100%; max-width: 240px; }
.d-field .field { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--ink); transition: border-color .2s, background .2s; }
.d-field .field:has(input:user-invalid) { border-color: #e06c6c; background: rgba(224,108,108,.07); }
.d-field .field:has(input:user-valid) { border-color: var(--padding); }
.d-field label { display: block; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.d-field input { width: 100%; background: none; border: 0; color: var(--paper); font: 400 13px/1 var(--mono); padding: 0; }
.d-field input:focus { outline: none; }
.d-field .field:has(input:focus-visible) { outline: 2px solid var(--content); outline-offset: 2px; }

.d-dim { display: grid; gap: 7px; width: 100%; max-width: 230px; }
.d-dim a { padding: 9px 12px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--paper); text-decoration: none; transition: opacity .18s; }
@media (hover: hover) and (pointer: fine) {
  .d-dim:has(a:hover) a:not(:hover) { opacity: .35; }
}

.d-count { width: 100%; max-width: 240px; }
.d-count ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.d-count li { padding: 8px 11px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--muted); }
.d-count ul:has(li:nth-child(4)) { grid-template-columns: 1fr 1fr; }
.d-count button { font: 400 11px/1 var(--mono); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.d-count button:hover { color: var(--paper); border-color: var(--content); }
.d-count button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* ---------- top layer ---------- */

.d-open { font: 500 12px/1 var(--mono); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--paper); cursor: pointer; }
.d-open:hover { border-color: var(--content); }
.d-open:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

dialog.d-modal { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--paper); padding: 24px; max-width: 300px; }
dialog.d-modal::backdrop { background: rgba(5, 7, 11, .72); backdrop-filter: blur(2px); }
dialog.d-modal h5 { font: 600 17px/1.2 var(--display); margin: 0 0 8px; }
dialog.d-modal p { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
dialog.d-modal form { margin: 0; }

/* No position override here on purpose. The user agent puts an open popover
   in the top layer and centres it; forcing position: absolute drags it back
   into normal flow, which is exactly the behaviour this card is about. */
.d-pop { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--paper); padding: 18px 20px; font: 400 12px/1.6 var(--mono); max-width: 300px; }
.d-pop::backdrop { background: rgba(5, 7, 11, .6); }

.d-inert { display: grid; gap: 10px; width: 100%; max-width: 230px; font: 400 12px/1 var(--mono); color: var(--muted); }
.d-inert fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0; display: grid; gap: 9px; transition: opacity .2s; }
.d-inert fieldset[inert] { opacity: .35; }
.d-inert legend { padding: 0 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.d-inert button { font: 400 12px/1 var(--mono); padding: 8px 11px; border-radius: 6px; border: 1px solid var(--line); background: var(--ink); color: var(--paper); cursor: pointer; }
.d-inert button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* ---------- entry and exit ---------- */

.d-enter { display: grid; gap: 12px; justify-items: center; }
.d-enter .panel {
  display: none; opacity: 0; translate: 0 -8px;
  transition: opacity .3s, translate .3s, display .3s allow-discrete;
  padding: 14px 18px; border-radius: 10px; background: var(--raised);
  border: 1px solid var(--content); font: 400 12px/1 var(--mono); color: var(--paper);
}
.d-enter:has(input:checked) .panel { display: block; opacity: 1; translate: 0 0; }
@starting-style { .d-enter:has(input:checked) .panel { opacity: 0; translate: 0 -8px; } }
.d-enter label { font: 400 12px/1 var(--mono); color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.d-enter input { accent-color: var(--content); }

.d-exit { display: grid; gap: 12px; justify-items: center; }
.d-exit .panel {
  opacity: 1; scale: 1;
  transition: opacity .35s, scale .35s;
  padding: 14px 18px; border-radius: 10px; background: var(--raised);
  border: 1px solid var(--padding); font: 400 12px/1 var(--mono); color: var(--paper);
}
.d-exit:not(:has(input:checked)) .panel { opacity: 0; scale: .9; }
.d-exit label { font: 400 12px/1 var(--mono); color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.d-exit input { accent-color: var(--padding); }

/* ---------- view transition ---------- */

.d-vt { display: grid; gap: 10px; width: 100%; max-width: 230px; }
.d-vt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Names go on the elements, not on nth-child positions: tied to a position
   they would stay put while the content moved through them, and the move
   animation is the whole point. */
#vt-build { view-transition-name: vt-build; }
#vt-test { view-transition-name: vt-test; }
#vt-deploy { view-transition-name: vt-deploy; }
.d-vt li { padding: 9px 12px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--paper); }
.d-vt button { justify-self: start; font: 400 11px/1 var(--mono); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.d-vt button:hover { color: var(--paper); border-color: var(--content); }
.d-vt button:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* ---------- resize vs max-width ---------- */

.d-rz { display: grid; gap: 18px; }
.d-rz small { display: block; font: 400 10px/1 var(--mono); letter-spacing: .1em; color: var(--muted); margin-bottom: 7px; }
.d-rz .box { resize: horizontal; overflow: auto; width: 130px; min-width: 70px; max-width: 210px; height: 42px; border: 1px dashed var(--line); border-radius: 6px; background: var(--surface); }
.d-rz p { margin: 7px 0 0; text-align: center; font: 400 10px/1 var(--mono); }
/* fit-content asks the element how wide it wants to be, and resize answers
   with the value it stored, not the one that painted */
.d-rz .drifts { display: grid; justify-items: center; width: fit-content; }
.d-rz .drifts p { color: var(--margin); }
.d-rz .holds { display: grid; justify-items: center; width: 210px; }
.d-rz .holds p { color: var(--padding); }

/* ---------- element page ---------- */

.article.element { max-width: 760px; }
.element-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 240px;
  padding: 36px 28px;
  margin: 24px 0 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface)
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.008) 8px 16px);
}
.article.element .note { font-size: 16px; }
.stamp { margin: 26px 0 0; font: 400 11px/1 var(--mono); color: var(--muted); }

.related { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 22px; }
.related h2 { font: 600 15px/1 var(--display); margin: 0 0 14px; color: var(--muted); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.related li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.related a { color: var(--paper); text-decoration: none; font-size: 15px; }
.related a:hover { color: var(--content); }
.related span { font: 400 11px/1 var(--mono); color: var(--content); }

/* ---------- catalogue ---------- */

.catalogue { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: n; }
.catalogue li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.catalogue a { color: var(--paper); text-decoration: none; font-size: 16px; }
.catalogue a:hover { color: var(--content); }
.catalogue .prop { font: 400 11px/1 var(--mono); color: var(--content); }
.catalogue .tag { font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
  .catalogue li { grid-template-columns: 1fr; }
}

/* headings in the feed become links once the element pages exist */
.detail h3 a { color: inherit; text-decoration: none; }
.detail h3 a:hover { color: var(--content); }

/* ---------- density ---------- */

.cards { display: grid; gap: 22px; }
.card { margin-bottom: 0; }

.density {
  margin-left: auto;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.density:hover { color: var(--paper); border-color: var(--content); }
.density[aria-pressed="true"] { color: var(--ink); background: var(--content); border-color: var(--content); }
.density:focus-visible { outline: 2px solid var(--content); outline-offset: 2px; }

/* Compact drops to one column per card and keeps the demo and the caveat,
   which is what you scan by. The source and the fallback are a paragraph
   too far at this size, and both are one click away on the element page. */
.compact .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.compact .card-body { grid-template-columns: minmax(0, 1fr); }
.compact .stage { border-right: 0; border-bottom: 1px solid var(--line); min-height: 168px; padding: 22px 18px; }
.compact .detail { padding: 16px 18px 18px; }
.compact .detail h3 { font-size: 17px; margin-bottom: 10px; }
.compact .note { font-size: 14px; margin-bottom: 0; }
.compact .note--fallback, .compact .source { display: none; }
.compact .card-top { padding: 10px 14px; }

/* ---------- long-form pages: element, catalogue, about ---------- */

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 34px var(--gutter) 96px;
}

.breadcrumb {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 26px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--content); }

.article { max-width: 760px; }
.article h1 {
  font: 600 clamp(30px, 4.4vw, 46px)/1.08 var(--display);
  letter-spacing: -0.01em;
  color: var(--white, var(--paper));
  margin: 0 0 18px;
  text-wrap: balance;
}
/* On its own page the heading is not a link to itself. */
.article h1 a { color: inherit; text-decoration: none; pointer-events: none; }
.article h2 {
  font: 600 22px/1.25 var(--display);
  color: var(--color-ice, var(--paper));
  margin: 40px 0 14px;
}
.article p { font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.article .dek { font-size: 18px; color: var(--color-fog, var(--muted)); margin-bottom: 26px; }
.article ul { margin: 0 0 18px; padding-left: 20px; }
.article li { margin: 0 0 9px; line-height: 1.65; }
.article a { color: var(--content); }
.article strong { color: var(--paper); font-weight: 500; }

/* inline code, as opposed to the block kind */
.article :not(pre) > code,
.detail :not(pre) > code {
  font: 400 0.88em/1 var(--mono);
  background: var(--fill, rgba(186,214,247,.07));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
}
.article .note :not(pre) > code { background: none; border: 0; padding: 0; }
.detail .note :not(pre) > code { background: none; border: 0; padding: 0; }

/* swatches and demo labels, out of style attributes so the page can carry a
   content security policy without allowing inline styles */
.sw-content { background: var(--content); }
.sw-padding { background: var(--padding); }
.sw-margin { background: var(--margin); }
.demo-label { margin-bottom: 8px; display: block; }

/* ---------- the bouncing logo ---------- */

.d-dvd {
  container-type: size;              /* so cqw and cqh mean this box */
  position: relative;
  width: 100%;
  max-width: 250px;
  height: 158px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  background: var(--ink);
}
/* One element per axis. Both animations want the translate property, and the
   later one would win outright rather than the two combining. */
.d-dvd .drift {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  animation: dvd-x 7.3s linear infinite alternate;
}
.d-dvd .logo {
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: dvd-y 4.7s linear infinite alternate;
}
/* the silhouette is the point: a skewed ellipse with a bar under it */
.d-dvd .disc {
  width: 58px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: skewX(-14deg);
  background: var(--content);
  animation: dvd-tint 22s steps(1, end) infinite;
}
.d-dvd .disc b {
  transform: skewX(14deg);   /* stand the letters back up */
  font: 700 13px/1 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.d-dvd .tag {
  font: 500 6px/1 var(--mono);
  letter-spacing: 0.24em;
  padding: 2px 5px 1px;
  border-radius: 2px;
  color: var(--ink);
  background: var(--content);
  animation: dvd-tint 22s steps(1, end) infinite;
}
/* 100% is the element's own size, so the travel is the box minus the logo */
@keyframes dvd-x { to { translate: calc(100cqw - 100%) 0; } }
@keyframes dvd-y { to { translate: 0 calc(100cqh - 100%); } }
@keyframes dvd-tint {
  0%   { background: var(--content); }
  33%  { background: var(--padding); }
  66%  { background: var(--margin); }
}
@media (prefers-reduced-motion: reduce) {
  .d-dvd .drift, .d-dvd .logo, .d-dvd .disc, .d-dvd .tag { animation: none; }
  .d-dvd .logo { translate: 0 calc(50cqh - 50%); }
  .d-dvd .drift { translate: calc(50cqw - 50%) 0; }
}

/* ---------- tag hubs ---------- */

.tag-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.tag-nav a {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
}
.tag-nav a:hover { color: var(--paper); border-color: var(--content); }
.card-top a { color: inherit; text-decoration: none; }
.card-top a:hover { color: var(--paper); }

/* ---------- the clock ---------- */

.d-clock {
  position: relative;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--line);
}
/* the dial is laid out by trigonometry, not by twelve hand-tuned offsets */
.d-clock i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--muted);
  translate: calc(cos(var(--i) * 30deg) * 70px)
             calc(sin(var(--i) * 30deg) * 70px);
}
/* the quarters get the accent, purely to orient the eye */
.d-clock i:nth-child(3n+1) { background: var(--content); width: 5px; height: 5px; }
.d-clock i:nth-child(1)  { --i: 0; }
.d-clock i:nth-child(2)  { --i: 1; }
.d-clock i:nth-child(3)  { --i: 2; }
.d-clock i:nth-child(4)  { --i: 3; }
.d-clock i:nth-child(5)  { --i: 4; }
.d-clock i:nth-child(6)  { --i: 5; }
.d-clock i:nth-child(7)  { --i: 6; }
.d-clock i:nth-child(8)  { --i: 7; }
.d-clock i:nth-child(9)  { --i: 8; }
.d-clock i:nth-child(10) { --i: 9; }
.d-clock i:nth-child(11) { --i: 10; }
.d-clock i:nth-child(12) { --i: 11; }

/* Three hands, one keyframe. Duration decides which hand it is; the shared
   negative delay is what sets the time. */
.d-clock .hand {
  position: absolute;
  left: calc(50% - var(--w) / 2);
  bottom: 50%;
  width: var(--w);
  height: var(--l);
  border-radius: 999px;
  background: var(--paper);
  transform-origin: 50% 100%;
  animation: clock-turn var(--t) linear infinite;
  animation-delay: calc(var(--now, 0) * -1s);
}
.d-clock .hour   { --w: 5px; --l: 40px; --t: 43200s; }
.d-clock .minute { --w: 3px; --l: 58px; --t: 3600s; }
.d-clock .second { --w: 1px; --l: 64px; --t: 60s; background: var(--margin); }
.d-clock .pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--content);
}
@keyframes clock-turn { to { rotate: 360deg; } }

/* A paused animation still honours its negative delay, so the hands freeze
   at the right time instead of springing back to twelve. */
@media (prefers-reduced-motion: reduce) {
  .d-clock .hand { animation-play-state: paused; }
}