/* White canvas, black rules, condensed display type, mono labels, and one
   accent: the play of colour an opal throws, the same five hues the CLI's
   download bar uses. Where a gradient can't go (small text, a focus ring),
   the accent is its first hue.
   Corners are cut, not rounded: all four of a slab, the bottom-left of
   a sticker. */
:root {
  --canvas: #ffffff;
  --subtle: #f6f6f6;
  --fg: #0a0a0a;
  --muted: #525252;
  --faint: #707070;
  --line: #e2e2e2;
  --strong: #0a0a0a;
  --slab: #0c0c0c;
  --on-slab: #ffffff;
  --bar: #181818;
  --accent: #2f7fc7;
  --play: linear-gradient(90deg, #3d8fd6, #2aa98a, #7d68e0, #d8588a, #d98a3d);
  --good: #009150;
  --signal: #ffd60a;
  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --cut: 10px;
  --container: 76rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d0a0c;
    --subtle: #171316;
    --fg: #eaeae8;
    --muted: #a8a8a5;
    --faint: #80807e;
    --line: #28282b;
    --strong: #48484c;
    --slab: #1e1e21;
    --on-slab: #f0f0ee;
    --bar: #969694;
    --accent: #78c4ff;
    --play: linear-gradient(90deg, #78c4ff, #80e8cc, #baa8ff, #ffb2cc, #ffd6a8);
    --good: #28dc82;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
/* Two hairlines down the page, just outside the column, from the header's
   rule to the footer. Behind everything, so a full-width band covers them. */
main { position: relative; isolation: isolate; }
main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: calc(var(--container) + 32px);
  transform: translateX(-50%);
  border-inline: 1px solid var(--line);
  pointer-events: none;
}
@media (max-width: 82rem) { main::before { display: none; } }

code { font-family: var(--mono); font-size: 0.82em; }
p code, li code, .lede code {
  background: var(--subtle);
  border: 1px solid var(--line);
  padding: 0.1em 0.4em;
}

.skip { position: absolute; left: -999px; top: 4px; background: var(--fg); color: var(--canvas); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 4px; }

/* ---- type ---- */
h1, h2 {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
h1 em {
  font-style: normal;
  background: var(--play);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 span { color: var(--faint); }
h3 { font-family: var(--display); font-stretch: 87.5%; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.lede { color: var(--muted); font-size: 1.06rem; max-width: 54ch; margin-top: 20px; }
.label {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.label.dot::before { content: ""; display: inline-block; width: 22px; height: 7px; margin-right: 9px; background: var(--play); }
.fine { font-family: var(--mono); font-size: 0.66rem; line-height: 1.7; color: var(--faint); max-width: 60ch; }
.fine.wide { max-width: 110ch; margin-top: 22px; }

/* ---- banner and nav ---- */
/* The strip is cut from the middle of the banner painting, where the sky is
   pale behind the centred text, so the text is ink in both themes. The colour
   under it is what shows until the image loads. */
.banner {
  display: block;
  background: #f1dc9a url("assets/announcement-banner.jpg") center / cover no-repeat;
  color: #0a0a0a;
  text-align: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 11px 16px;
}
.banner span { opacity: 0.85; transition: opacity 0.15s; }
.banner:hover, .banner:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.banner:hover span, .banner:focus-visible span { opacity: 1; }
.nav { position: sticky; top: 0; z-index: 10; background: var(--canvas); border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.logo { display: flex; }
/* The logo file carries 5px of clear space at this size; pulled back so the
   mark, not the space, lines up with the page's left edge. */
.logo img { display: block; height: 44px; width: auto; margin-left: -5px; }
.nav nav { display: flex; gap: 2px; font-size: 0.9rem; }
.nav nav a, .icon-link { text-decoration: none; color: var(--muted); }
.nav nav a { padding: 6px 12px; border-radius: 999px; font-weight: 500; transition: background-color 0.15s, color 0.15s; }
.nav nav a:hover, .icon-link:hover { color: var(--fg); background: var(--subtle); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 0.88rem; }
.nav-end .btn { margin-left: 8px; }
.icon-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background-color 0.15s, color 0.15s; }
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  max-width: 24rem;
  height: 36px;
  padding: 0 10px 0 12px;
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.84rem;
  text-align: left;
  cursor: text;
}
.search-box:hover { border-color: var(--strong); }
.search-box span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-box kbd { font-family: var(--mono); font-size: 0.62rem; line-height: 1; padding: 4px 6px; border: 1px solid var(--line); }
.search-icon { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1.5px solid var(--strong); color: var(--fg); cursor: pointer; }
.search { width: min(40rem, calc(100vw - 32px)); margin-top: 12vh; padding: 0; background: var(--canvas); color: var(--fg); border: 1.5px solid var(--strong); }
.search::backdrop { background: rgb(0 0 0 / 0.55); }
.search input { width: 100%; padding: 18px 20px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); font: inherit; font-size: 1.05rem; outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search-results { max-height: 52vh; overflow-y: auto; }
.search-results a { display: grid; gap: 3px; padding: 13px 20px; text-decoration: none; border-bottom: 1px solid var(--line); }
.search-results a.chosen, .search-results a:hover { background: var(--subtle); }
.search-kind { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.search-text { font-size: 0.82rem; color: var(--muted); }
.search-none { padding: 18px 20px; color: var(--muted); font-size: 0.9rem; }
.search-hint { padding: 10px 20px; font-family: var(--mono); font-size: 0.58rem; color: var(--faint); }
.menu-button { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 8px; background: none; border: 1.5px solid var(--strong); color: var(--fg); cursor: pointer; }
.menu-button[aria-expanded="true"] { background: var(--fg); color: var(--canvas); }
.mobile-menu { border-top: 1px solid var(--line); padding-block: 10px 18px; }
.mobile-menu nav { flex-direction: column; gap: 0; font-size: 1.05rem; }
.mobile-menu nav a { padding: 13px 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.mobile-menu nav a:hover { background: none; }
.mobile-menu-end { display: flex; gap: 22px; padding-top: 16px; }
.menu-icon { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-size: 0.9rem; }
.menu-icon:hover { color: var(--fg); }

.btn {
  display: inline-block;
  background: var(--fg);
  color: var(--canvas);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 11px 16px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.btn:hover { background: var(--play); color: #0a0a0a; }
.btn.outline { background: none; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); clip-path: none; }
.btn.outline:hover { background: var(--fg); color: var(--canvas); }
.next { display: inline-block; margin-top: 26px; font-weight: 700; font-size: 0.95rem; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.next:hover { color: var(--accent); }
.quiet { font-family: var(--mono); font-size: 0.64rem; color: var(--faint); text-decoration: none; }

/* ---- hero ---- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-block: 64px 56px;
}
.pill {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.pill:hover span, .pill:focus-visible span {
  background: var(--play);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.pill b, .tag { background: var(--play); color: #0a0a0a; padding: 3px 7px; font-weight: 700; letter-spacing: 0.06em; }
.tag { background: var(--fg); color: var(--canvas); margin-right: 8px; }
#install { margin-top: 34px; }
#install .label { color: var(--fg); margin-bottom: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 0.74rem; }
.slab {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--slab);
  color: var(--on-slab);
  padding: 0 0 0 18px;
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)
  );
}
.slab code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding-block: 18px; font-size: 0.78rem; }
/* The command scrolls sideways when it doesn't fit; a scrollbar inside the
   box would be taller than the text it scrolls. */
.slab code { scrollbar-width: none; }
.slab code::-webkit-scrollbar { display: none; }
.slab code::before { content: "$ "; color: var(--accent); }
/* The button is the slab's whole right end, so its hover fill is cut by the
   slab's own top-right and bottom-right corners. */
.copy {
  align-self: stretch;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  color: var(--on-slab);
  padding: 0 20px 0 16px;
  cursor: pointer;
  opacity: 0.75;
}
.copy:hover, .copy:focus-visible { background: color-mix(in srgb, var(--slab) 84%, var(--on-slab)); opacity: 1; }
.copy .icon-done, .copy.done .icon-copy { display: none; }
.copy.done .icon-done { display: block; }
.os-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.chips { display: flex; }
.chips button {
  background: none;
  border: 1px solid var(--strong);
  margin-right: -1px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  cursor: pointer;
}
.chips button[aria-selected="true"] { background: var(--fg); color: var(--canvas); }
#install .fine { margin-top: 12px; }

/* ---- charts ---- */
.chart-card { border: 1.5px solid var(--strong); background: var(--canvas); }
.chart-tabs { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1.5px solid var(--strong); }
.chart-tabs button {
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 13px 6px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
}
.chart-tabs button:last-child { border-right: 0; }
.chart-tabs button[aria-selected="true"] { background: var(--fg); color: var(--canvas); }
.chart-body { padding: 24px 26px 22px; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.chart-head h2 { font-size: 1.5rem; font-stretch: 80%; line-height: 1.1; }
.chart-note { font-family: var(--mono); font-size: 0.62rem; color: var(--faint); }
.chart-foot { font-family: var(--mono); font-size: 0.6rem; line-height: 1.7; color: var(--faint); border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; }

.bars { display: grid; gap: 14px; margin-top: 24px; }
.bars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 84px; align-items: center; gap: 12px; }
.bar-name { font-family: var(--mono); font-size: 0.74rem; font-weight: 600; line-height: 1.25; }
.bar-name small { display: block; font-size: 0.56rem; font-weight: 400; color: var(--faint); }
/* Every bar sits in a track the full width of the scale, so a short bar
   still shows how far it is from the end. */
.bar-track { height: 26px; background: var(--subtle); }
.bars .axis { margin-top: -6px; }
.axis-ticks { position: relative; height: 22px; border-top: 1px solid var(--strong); }
.axis-ticks span {
  position: absolute;
  top: 0;
  padding-top: 8px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--faint);
  white-space: nowrap;
}
.axis-ticks span::before { content: ""; position: absolute; left: 50%; top: 0; height: 5px; border-left: 1px solid var(--strong); }
.bar-fill { display: block; height: 100%; background: var(--bar); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bar-value { white-space: nowrap; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.is-opal .bar-fill { background: var(--play); }
.is-opal .bar-value { color: var(--fg); font-size: 1.05rem; font-weight: 700; }
.bars.compact { gap: 7px; margin-top: 16px; }
.bars.compact li { grid-template-columns: 44px minmax(0, 1fr) 72px; gap: 10px; }
.bars.compact .bar-track { height: 12px; }
.bars.compact .axis { margin-top: -1px; }
.bars.compact .axis-ticks { height: 18px; }
.bars.compact .axis-ticks span { font-size: 0.5rem; padding-top: 7px; }
.bars.compact .bar-name, .bars.compact .bar-value { font-size: 0.64rem; }
.bars.compact .is-opal .bar-value { font-size: 0.86rem; }

/* ---- validated-on strip ---- */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding-block: 28px; }
.strip ul { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.strip li { font-family: var(--display); font-stretch: 90%; font-weight: 700; font-size: 1.05rem; color: var(--muted); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
/* A mask, not an <img>, so each mark takes the text colour in both themes. */
.mark { width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* ---- blocks ---- */
.block { padding-block: 96px; }
/* The lines between sections run the full width of the window, past the
   column the content sits in. Each is drawn by a pseudo-element as wide as
   the viewport; `overflow-x: clip` on the body trims the scrollbar's width
   off it without breaking the sticky header the way `hidden` would. */
.strip, .block + .block, .post-head { position: relative; }
.strip::before, .strip::after, .block + .block::before, .post-head::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
}
.strip::before, .block + .block::before { top: 0; }
.strip::after, .post-head::after { bottom: 0; }
.block-head { margin-bottom: 44px; }
.block-head .label { margin-bottom: 18px; }
.split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; }
.split > div:first-child { max-width: 46rem; }
.aside { max-width: 32ch; color: var(--muted); font-size: 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.split .actions { margin-top: 0; }

/* ---- tools ---- */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.tool { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 24px 24px; border-right: 1px solid var(--line); }
.tool:last-child { border-right: 0; }
.tool p { color: var(--muted); font-size: 0.9rem; }
.replaces { font-family: var(--mono); font-size: 0.62rem !important; color: var(--faint) !important; }
.replaces span { color: var(--fg); }
.cli { margin-top: auto; align-self: flex-start; font-size: 0.7rem; padding: 9px 12px; border: 1px solid var(--strong); background: var(--canvas); }
.tool .cli { margin-top: 14px; }
.cli.off { border: 1px dashed var(--line); color: var(--faint); }
.sticker {
  position: absolute;
  top: -15px;
  right: 18px;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 10px;
  background: var(--subtle);
  color: var(--faint);
  border: 1px solid var(--line);
  transform: rotate(4deg);
}
/* The live tool's sticker is the starburst, with the words set on its pale
   centre. It is the same image in both themes, so the text stays ink. */
.sticker.live {
  top: -40px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0 22px;
  background: none;
  border: 0;
  color: #0a0a0a;
  line-height: 1.3;
  text-align: center;
  transform: rotate(-8deg);
}
/* Only the burst turns. It sits behind the words, which stay put to be read. */
.sticker.live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/works-today-burst.png") center / contain no-repeat;
  animation: burst-spin 24s linear infinite;
}
@keyframes burst-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sticker.live::before { animation: none; } }

/* ---- a minute with opal ---- */
.minute { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.minute .label { margin-bottom: 18px; }
.steps { margin-top: 34px; border-top: 1px solid var(--line); }
.steps button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 3px 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  padding: 13px 12px;
  cursor: pointer;
}
.steps .n { position: relative; font-family: var(--mono); font-size: 0.62rem; color: var(--accent); padding-top: 4px; }
/* A short rule under each step's number. The playing step's fills from the
   left for exactly as long as its command takes to type and run, so it ends
   as the next step begins; a hover over the terminal holds both. */
.steps .n::before, .steps .n::after { content: ""; position: absolute; left: 0; top: 2.1em; width: 20px; height: 2px; }
.steps .n::before { background: var(--line); }
.steps .n::after { background: var(--play); transform: scaleX(0); transform-origin: left; }
.steps .playing .n::after { animation: step-line var(--step-ms, 6s) linear forwards; }
.minute.is-paused .steps .playing .n::after { animation-play-state: paused; }
@keyframes step-line { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .steps .playing .n::after { animation: none; }
  .steps button[aria-selected="true"] .n::after { transform: none; }
}
.steps .t { font-size: 0.92rem; }
.steps code { grid-column: 2; font-size: 0.68rem; color: var(--faint); }
.steps .d { grid-column: 2; display: none; color: var(--muted); font-size: 0.86rem; margin-top: 6px; }
.steps button[aria-selected="true"] { background: var(--subtle); border-image: linear-gradient(180deg, #3d8fd6, #2aa98a, #7d68e0, #d8588a, #d98a3d) 1; border-image-width: 0 0 0 2px; }
.steps button[aria-selected="true"] .t { font-weight: 700; }
.steps button[aria-selected="true"] .d { display: block; }
.terminal { background: #0e0e0e; color: #f0f0f0; position: sticky; top: 84px; }
.terminal-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #2a2a2a; font-family: var(--mono); font-size: 0.6rem; color: #808080; }
.terminal pre { min-height: 250px; padding: 24px 22px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal .prompt { color: cornflowerblue; }
.terminal .live { white-space: pre; }
/* opal's own terminal colours, as the capture recorded them. */
.terminal .t-b { font-weight: 700; color: #fff; }
.terminal .t-d { color: #8f8f8f; }
.terminal .t-g { color: #5fd787; }
.terminal .t-y { color: #e5c07b; }
.terminal .t-sky { color: #78c4ff; }
.terminal .t-rail { color: #3a3a3a; }
.terminal .line { animation: line-in 0.18s ease-out; }
.caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: #f0f0f0; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes line-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .caret, .terminal .line { animation: none; } }
.terminal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #2a2a2a; font-family: var(--mono); font-size: 0.6rem; color: #808080; }
.terminal-foot .tag { background: #f0f0f0; color: #0e0e0e; }

/* ---- release ---- */
/* Measured off bun.com's latest-release section: its padding, column split,
   type sizes, button height, and list spacing are theirs. */
.release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; padding-block: 112px; }
.release .label { display: flex; align-items: center; gap: 12px; margin-bottom: 0; font-size: 0.6875rem; }
.version { background: var(--fg); color: var(--canvas); padding: 2px 8px; border-radius: 999px; font-weight: 500; letter-spacing: 0.08em; text-transform: none; }
.release h2 { margin-top: 20px; font-size: clamp(2.6rem, 6vw, 4.75rem); }
.release .lede { margin-top: 16px; max-width: 52ch; font-size: 1.08rem; line-height: 1.625; }
.release .actions { margin-top: 28px; }
.release .btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; --cut: 9px; }
.cli-pill { font-size: 0.8125rem; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--subtle); color: var(--muted); }
.cli-pill::before { content: "$ "; color: var(--accent); user-select: none; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.notes a { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; font-size: 0.906rem; line-height: 1.625; color: var(--muted); }
.notes a::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: 9px; border-radius: 50%; background: var(--accent); }
.notes a:hover span { color: var(--fg); }
.notes code { margin-right: 4px; padding: 0; background: none; border: 0; font-size: 0.8125rem; color: var(--fg); }
.all-releases { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 0.875rem; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.all-releases:hover { background: var(--fg); color: var(--canvas); text-decoration-color: transparent; }

/* ---- facts ---- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--strong); }
.facts article { padding: 26px 24px 4px 0; }
.facts article + article { padding-left: 24px; border-left: 1px solid var(--line); }
.facts p { color: var(--muted); font-size: 0.9rem; }
.figure { font-family: var(--display); font-stretch: 68%; font-weight: 800; font-size: 4.2rem !important; line-height: 0.95; letter-spacing: -0.03em; color: var(--fg) !important; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.figure span { font-family: var(--mono); font-stretch: 100%; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--faint); margin-left: 6px; }
.facts h3 { margin-bottom: 8px; }

/* ---- grid of small charts ---- */
.grid-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.mini { padding: 22px 22px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mini:nth-child(3n) { border-right: 0; }
.mini:nth-child(n + 7) { border-bottom: 0; }
.mini-note { font-family: var(--mono); font-size: 0.58rem; color: var(--faint); margin-top: 4px; }
.verdict { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; color: var(--faint); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.verdict.win { color: var(--accent); }

/* ---- limits ---- */
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-bottom: 1px solid var(--line); }
.limits li { padding-block: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.limits strong { color: var(--fg); }

/* ---- closing and footer ---- */
/* The last section is dark in both themes, like the footer under it, so it
   takes the dark theme's colours whatever the page is using. */
.closing {
  --canvas: #0d0a0c;
  --subtle: #171316;
  --fg: #eaeae8;
  --muted: #a8a8a5;
  --faint: #80807e;
  --line: #28282b;
  --strong: #48484c;
  --slab: #1e1e21;
  --on-slab: #f0f0ee;
  --accent: #78c4ff;
  --play: linear-gradient(90deg, #78c4ff, #80e8cc, #baa8ff, #ffb2cc, #ffd6a8);
  background: var(--canvas);
  color: var(--fg);
  border-top: 1px solid var(--line);
  color-scheme: dark;
}
/* Measured off bun.com's closing section: column ratio, gap, type sizes, the
   60px command box, and the 52px buttons are theirs. */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-block: min(7rem, 12vh); }
.closing-grid > * { min-width: 0; }
.closing-grid > :last-child { padding-bottom: 12px; }
.closing img { display: block; height: 64px; width: auto; margin-left: -9px; }
.closing h2 { margin-top: 24px; font-size: clamp(3rem, min(9vw, 13vh), 7.5rem); font-weight: 900; font-stretch: 62%; letter-spacing: -0.01em; line-height: 0.86; text-wrap: wrap; }
.closing h2 em { font-style: normal; background: var(--play); -webkit-background-clip: text; background-clip: text; color: transparent; }
.closing .lede { margin-top: 0; max-width: 40ch; font-size: 1.2rem; line-height: 1.5; }
.closing .lede code { background: none; border: 0; padding: 0; color: var(--accent); font-size: 0.92em; }
.closing .slab { margin-top: 32px; max-width: 36rem; min-height: 60px; --cut: 12px; }
.closing .slab code { font-size: 0.94rem; }
.closing .copy { width: 56px; justify-content: center; padding: 0; border-left: 1px solid rgb(255 255 255 / 0.12); }
.closing .os-row { max-width: 36rem; }
.closing .fine:empty { display: none; }
.closing .fine { margin-top: 10px; }
.closing .actions { margin-top: 20px; }
.btn.big { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; --cut: 11px; }
.closing .btn.big:not(.outline) { background: var(--play); color: #0a0a0a; }
.closing .btn.big:not(.outline):hover { background: var(--fg); color: var(--canvas); }

/* A full-width line sets the footer off from the page. The footer sits on a
   banner painting, darkened so its links and its last line stay readable in
   both themes; the text is light whatever the page's theme is. */
footer {
  background:
    linear-gradient(rgb(10 10 12 / 0.5), rgb(10 10 12 / 0.5)),
    #1c2a33 url("assets/footer-banner.jpg") center 58% / cover no-repeat;
  color: #f4f4f1;
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
  /* The picture is only half darkened, so the text carries its own shade. */
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding-block: 64px 40px; }
.footer-brand p { max-width: 28ch; margin-top: 18px; line-height: 1.6; }
.footer-brand img { display: block; height: 44px; width: auto; margin-left: -5px; }
.footer-social { display: flex; gap: 4px; margin: 18px 0 0 -8px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #e4e4e1; }
.footer-social a:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
footer .label { color: #b9b9b5; margin: 0 0 6px; }
.footer-base { padding-block: 22px 30px; font-size: 0.8rem; color: #c9c9c5; }
.footer-base .heart { color: #ffb2cc; }
.missing { padding-block: 120px 140px; }
.missing h1 { margin-top: 18px; }

/* ---- blog ---- */
.nav nav a[aria-current="page"] { color: var(--fg); background: var(--subtle); }
.blog { padding-block: 72px 96px; }
.blog-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 36px; }
.blog h1 { font-size: clamp(3.6rem, 8vw, 5.6rem); }
.rss { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding-bottom: 10px; }
.rss:hover { color: var(--fg); }
.post-feature {
  position: relative;
  display: block;
  border: 1.5px solid var(--strong);
  padding: 40px 40px 34px;
  text-decoration: none;
}
.post-feature h2 { margin-top: 18px; }
.post-feature .lede { max-width: 58ch; }
.post-feature:hover h2, .post-feature:focus-visible h2 {
  background: var(--play);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.post-by { font-size: 0.8rem; color: var(--faint); margin-top: 18px; }
.post-go {
  position: absolute;
  right: 40px;
  bottom: 34px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--strong);
}
.post-feature:hover .post-go { background: var(--fg); color: var(--canvas); }
.post-count { display: flex; justify-content: space-between; gap: 16px; margin: 56px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.post-year { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.post-year > h2 { font-family: var(--sans); font-stretch: 100%; font-size: 1.3rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; padding-top: 28px; }
.posts li { display: grid; grid-template-columns: 170px minmax(0, 1fr); padding-block: 28px; border-bottom: 1px solid var(--line); }
.posts time { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); padding-top: 5px; }
.posts h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.posts h3 a { text-decoration: none; }
.posts h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.posts p { color: var(--muted); font-size: 0.95rem; max-width: 80ch; margin-top: 8px; }
.posts .post-by { margin-top: 12px; }
.post-kind { font-family: var(--mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--strong); padding: 3px 7px; }

/* ---- blog post ---- */
.post-head { padding-block: 64px 44px; }
.post-head .label { text-decoration: none; }
.post-head .label:hover { color: var(--fg); }
.post-head h1 { margin-top: 18px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px; font-size: 0.85rem; color: var(--muted); }
.post-meta { align-items: center; }
.post-meta a { color: var(--muted); text-underline-offset: 3px; }
.post-meta .post-author { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; }
.post-author:hover { text-decoration: underline; }
.post-meta .post-rss { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--faint); }
.post-meta .post-rss:hover { background: var(--subtle); color: var(--fg); }
.post-author img { border-radius: 50%; background: var(--subtle); }
.post-meta a:hover { color: var(--fg); }
.post-layout { display: grid; grid-template-columns: minmax(0, 46rem) 15rem; justify-content: space-between; gap: 64px; padding-block: 48px 96px; }
.prose { font-size: 1rem; line-height: 1.65; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-family: var(--sans); font-stretch: 100%; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-top: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.prose h3 { font-family: var(--sans); font-stretch: 100%; font-size: 1.15rem; margin-top: 36px; scroll-margin-top: 90px; }
.prose .post-box-title { font-size: 1.05rem; margin-top: 34px; }
.prose .post-box-title + .slab { margin-top: 12px; }
.prose ul { display: grid; gap: 12px; padding-left: 20px; list-style: disc; }
.prose li::marker { color: var(--faint); }
.prose a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose strong { font-weight: 700; }
.prose pre { background: var(--slab); color: var(--on-slab); padding: 16px 18px; overflow-x: auto; font-size: 0.8rem; line-height: 1.6; }
.prose pre code { font-size: inherit; }
.table-scroll { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; border-bottom-color: var(--strong); }
.toc { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 9px; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc .label { margin-bottom: 6px; }
.toc a { text-decoration: none; font-size: 0.82rem; line-height: 1.4; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; }
.toc a:hover { color: var(--fg); border-left-color: var(--fg); }
.toc .toc-3 { padding-left: 24px; }
.toc code { font-size: 0.9em; }

/* ---- narrower screens ---- */
@media (max-width: 820px) {
  .nav-row > nav, .nav-end .icon-link, .search-box { display: none; }
  .menu-button, .search-icon { display: inline-flex; }
  .nav-end .btn { margin-right: 8px; }
}
@media (max-width: 960px) {
  .release { padding-block: 64px; gap: 40px; }
  .closing-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .hero, .minute, .release { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool:nth-child(2) { border-right: 0; }
  .tool:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts article:nth-child(3) { padding-left: 0; border-left: 0; }
  .grid-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini, .mini:nth-child(3n), .mini:nth-child(n + 4) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .terminal { position: static; }
  .block { padding-block: 64px; }
}
@media (max-width: 620px) {
  .notes { grid-template-columns: minmax(0, 1fr); }
  .post-year, .posts li { grid-template-columns: minmax(0, 1fr); }
  .post-year > h2 { padding-top: 22px; }
  .posts time { padding-bottom: 8px; }
  .post-feature { padding: 26px 22px 84px; }
  .post-go { right: 22px; bottom: 22px; }
  .hero { padding-block: 40px; }
  .tools, .facts, .grid-charts, .limits { grid-template-columns: minmax(0, 1fr); }
  .tool { border-right: 0; border-bottom: 1px solid var(--line); }
  .tool:last-child { border-bottom: 0; }
  .facts article, .facts article + article { padding-left: 0; border-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div { grid-column: 1 / -1; }
  .chart-body { padding: 18px 16px; }
  .bars li { grid-template-columns: 60px minmax(0, 1fr) 70px; gap: 8px; }
  .os-row { flex-direction: column; align-items: flex-start; }
  .chart-tabs button { font-size: 0.56rem; padding-inline: 2px; }
}
#replay { background: none; border: 1px solid #3a3a3a; color: #b4b4b4; font-family: var(--mono); font-size: 0.6rem; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
#replay:hover { color: #fff; border-color: #808080; }