/* Ada site. Every band follows verialabs.com's Astro build (read from its
   shipped CSS, 2026-09-16): Instrument Serif display, Instrument Sans text,
   Geist Mono code; oklch light-dark tokens; utopia --step/--space clamps;
   leading = 1em + .65rem; a black 100svh sticky hero with the copy at the
   bottom left; a sheet that slides over it; square hairline tiles on a
   12-column bento; square buttons at --step-1 with an arrow; a black sticky
   closing band with the footer inside. The words, marks and images are
   Ada's own. */
:root {
  color-scheme: light dark;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --background: light-dark(oklch(98.91% .0034 67.784), oklch(19.4% .0063 55.9871));
  --foreground: light-dark(oklch(21.61% .0061 56.0434), oklch(98.91% .0034 67.784));
  --card: light-dark(oklch(98.31% .0034 67.7837), oklch(24.07% .0048 67.5948));
  --muted: light-dark(oklch(96.51% .0034 67.7828), oklch(31.16% .0056 56.1864));
  --muted-foreground: light-dark(oklch(55.34% .0116 58.0708), oklch(71.61% .0091 56.259));
  --border: light-dark(oklch(90.2% .0035 67.7811), oklch(33.63% .0066 48.5166));
  --good: light-dark(#14532d, #86efac); --good-bg: light-dark(#bbf7d0, #22c55e26);
  --high: light-dark(#7f1d1d, #fca5a5); --high-bg: light-dark(#fecaca, #f8717126);
  --font-weight-normal: 400; --font-weight-medium: 450; --font-weight-semibold: 600;
  --tracking-tight: -.015em;
  --leading-offset: .65rem;
  --step--2: .79rem;
  --step--1: clamp(.8889rem, .8709rem + .0877vw, .9375rem);
  --step-0: clamp(1rem, .9538rem + .2255vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0418rem + .4059vw, 1.35rem);
  --step-2: clamp(1.2656rem, 1.1346rem + .6392vw, 1.62rem);
  --step-3: clamp(1.4238rem, 1.2315rem + .9383vw, 1.944rem);
  --step-4: clamp(1.6018rem, 1.2669rem + 1.6654vw, 2.3328rem);
  --step-5: clamp(1.8rem, 1.3457rem + 2.2713vw, 2.7994rem);
  --step-6: clamp(2.0271rem, 1.4216rem + 3.0275vw, 3.3592rem);
  --space-3xs: clamp(.25rem, .2269rem + .1127vw, .3125rem);
  --space-2xs: clamp(.5rem, .4769rem + .1127vw, .5625rem);
  --space-xs: clamp(.75rem, .7038rem + .2255vw, .875rem);
  --space-s: clamp(1rem, .9538rem + .2255vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4307rem + .3382vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9076rem + .451vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8613rem + .6764vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8151rem + .9019vw, 4.5rem);
  --space-s-m: clamp(1rem, .7458rem + 1.2401vw, 1.6875rem);
  --grid-max-width: 75.94rem;
  --grid-gutter: var(--space-s-m);
  --grid-edge: max(var(--grid-gutter), (100% - var(--grid-max-width)) / 2 + var(--grid-gutter));
  --bar-nav-height: calc(2rem + 2 * var(--space-xs));
  --blur-lg: 16px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-block-start: calc(var(--bar-nav-height) + var(--space-2xs)); }
body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-inline-size: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dim { color: var(--muted-foreground); } .good { color: var(--good); } .bad { color: var(--high); }

/* ---- bar */
.bar { position: fixed; inset-inline: 0; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-xs); padding-inline: var(--grid-edge); color: var(--foreground); background-color: var(--background); border-block-end: 1px solid var(--border); transition: background-color .5s, color .35s; }
.bar[data-over-scene] { color-scheme: dark; color: oklch(98.91% .0034 67.784); background-color: #0000; border-block-end-color: #0000; }
.brand svg { block-size: 2rem; inline-size: 2rem; }
.bar ul { display: flex; align-items: center; gap: var(--space-s); }
.bar a.plain { font-size: var(--step-0); color: var(--muted-foreground); text-decoration: none; transition: color .35s; }
.bar a.plain:hover { color: currentColor; }
.bar[data-over-scene] a.plain { color: oklch(71.61% .0091 56.259); }
.theme { display: grid; place-items: center; block-size: 2rem; inline-size: 1.25rem; }
.theme svg { block-size: 1.1rem; inline-size: 1.1rem; }
@media (width < 30rem) { .bar ul { gap: var(--space-2xs); } }

/* ---- buttons */
.cta { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--foreground); font-size: var(--step-1); letter-spacing: var(--tracking-tight); background-color: var(--foreground); color: var(--background); white-space: nowrap; text-decoration: none; transition: background-color .15s; }
.cta svg { block-size: 1.5rem; inline-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .2s; }
.cta:hover { background-color: color-mix(in oklab, var(--foreground) 85%, var(--background)); }
.cta:hover svg { translate: .125rem -.125rem; }
.cta.ghost { border-color: var(--border); color: var(--muted-foreground); background-color: #0000; }
.cta.ghost:hover { background-color: color-mix(in oklab, var(--muted) 50%, transparent); color: var(--foreground); }
.cta.compact { gap: var(--space-2xs); block-size: 2rem; font-size: var(--step-0); padding-block: 0; padding-inline: .625rem; }
@media (width < 30rem) { .cta.compact { padding-inline: .5rem; } }

/* ---- hero: black, full height, sticky; copy at the bottom left */
.hero { color-scheme: dark; color: var(--foreground); position: sticky; inset-block-start: 0; min-block-size: 100svh; display: flex; flex-direction: column; padding-block: calc(var(--bar-nav-height) + var(--space-l) + var(--space-s)) var(--space-2xl); padding-inline: var(--grid-edge); background-color: oklch(0% 0 0); overflow: hidden; }
.hero-board { display: block; inline-size: min(100%, 60rem); block-size: auto; margin-inline: auto; margin-block: var(--space-l) var(--space-xl); border: 1px solid oklch(33.63% .0066 48.5166); }
.hero-copy { position: relative; margin-block-start: auto; max-inline-size: 48rem; }
.hero h1 { font-family: var(--font-serif); font-size: var(--step-5); line-height: calc(var(--leading-offset) + 1em); font-weight: var(--font-weight-normal); }
@media (width >= 64rem) { .hero h1 { font-size: var(--step-6); } }
.subtitle { margin-block: var(--space-2xs) var(--space-m); font-size: var(--step-1); text-wrap: pretty; }
.cta-row { display: flex; flex-direction: column; gap: var(--space-2xs); }
.cta-row .cta { flex: 1; }
@media (width >= 48rem) { .cta-row { flex-direction: row; align-items: stretch; } .cta-row .cta { flex: initial; min-inline-size: 18rem; } }

/* ---- the sheet that slides over the hero; the hero sticks only inside
   .night-start, so it never covers the closing band */
.night-start { position: relative; z-index: 1; }
.hero { z-index: 0; }
.sheet { position: relative; z-index: 1; background-color: var(--background); padding-inline: var(--grid-edge); padding-block: var(--space-2xl); display: flow-root; }
section > header { margin-block-end: var(--space-m); }
section > header h2 { font-family: var(--font-serif); font-size: var(--step-5); font-weight: var(--font-weight-normal); line-height: calc(var(--leading-offset) + 1em); text-wrap: balance; margin-block-end: var(--space-2xs); }
section > header p { max-inline-size: 36rem; font-size: calc((var(--step-0) + var(--step-1)) / 2); color: var(--muted-foreground); }

/* ---- used-by: hairline lattice with a quote card */
.used-by { margin-block: 0 var(--space-2xl); }
.used-by > header h2 { font-size: var(--step-4); }
.lattice { border: 1px solid var(--border); }
.feature { display: flex; flex-direction: column; grid-column: 1 / -1; padding: var(--space-l); background-color: var(--card); }
@media (width >= 64rem) { .feature { grid-area: 1 / 4 / 3; } }
.feature blockquote { font-size: var(--step-0); line-height: 1.4; text-wrap: pretty; }
.feature figcaption { margin-block-start: var(--space-xs); font-size: var(--step--1); color: var(--muted-foreground); }
.feature-link { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-block-start: auto; padding-block-start: var(--space-m); font-size: var(--step--1); color: var(--muted-foreground); text-decoration: none; transition: color .15s; }
.feature-link:hover { color: var(--foreground); }
.feature-link svg { block-size: 1rem; inline-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- bento */
.bento-section { margin-block: var(--space-2xl); }
.bento { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); }
@media (width >= 48rem) { .bento { grid-template-columns: repeat(12, 1fr); } .tile { grid-column: span 12; } .t-poc, .t-fixpr, .t-half { grid-column: span 6; } }
@media (width >= 64rem) { .t-feed { grid-column: span 7; } .t-integr { grid-column: span 5; } }
.tile { display: flex; flex-direction: column; gap: var(--space-s); min-inline-size: 0; padding: var(--space-s); border: 1px solid var(--border); background-color: var(--card); }
.cap h3 { font-size: var(--step-2); font-weight: var(--font-weight-medium); line-height: 1.15; }
.cap p { max-inline-size: 60ch; margin-block-start: var(--space-3xs); font-size: calc((var(--step--1) + var(--step-0)) / 2); color: var(--muted-foreground); text-wrap: pretty; }
.window { border: 1px solid var(--border); background-color: var(--background); }
.window.shot { margin-block-start: auto; overflow: hidden; }
.window.shot img { inline-size: 100%; block-size: auto; }
.term { padding: var(--space-xs); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.6; white-space: pre; overflow-x: auto; }
.tabs { display: flex; gap: var(--space-m); padding-inline: var(--space-s); border-block-end: 1px solid var(--border); font-size: var(--step--2); color: var(--muted-foreground); }
.tab { display: inline-flex; align-items: center; gap: .375rem; padding-block: var(--space-2xs); border-block-end: 2px solid #0000; margin-block-end: -1px; }
.tab.active { border-block-end-color: var(--foreground); color: var(--foreground); font-weight: var(--font-weight-medium); }
.count { padding: 0 .375rem; background-color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rows { display: grid; grid-template-columns: auto auto 1fr auto; padding-inline: var(--space-xs); }
.row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: var(--space-xs); padding-block: var(--space-2xs); border-block-start: 1px solid var(--border); font-size: var(--step--1); }
.row:first-child { border-block-start: 0; }
.row .id { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted-foreground); }
.row .text { font-weight: var(--font-weight-medium); }
.row .time { font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted-foreground); }
.sev { justify-self: start; padding: .05rem .375rem; font-family: var(--font-mono); font-size: var(--step--2); font-weight: var(--font-weight-semibold); }
.sev.ok { background-color: var(--good-bg); color: var(--good); }
.sev.high { background-color: var(--high-bg); color: var(--high); }
.car-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.car-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border: 1px solid var(--border); background-color: var(--background); font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted-foreground); transition: color .15s, border-color .15s; }
.car-tab::before { content: ""; inline-size: .375rem; block-size: .375rem; border-radius: 50%; background: currentColor; opacity: .5; }
.car-tab.active { color: var(--foreground); border-color: var(--foreground); }
.car-stage { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--border); background-color: var(--background); }
.gh-card { grid-area: 1 / 1; padding: var(--space-s); font-size: var(--step--1); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.gh-card.active { opacity: 1; visibility: visible; transition: none; }
.gh-card p + p { margin-block-start: var(--space-2xs); color: var(--muted-foreground); }
.gh-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-weight: var(--font-weight-medium); }
.gh-card .fix { font-family: var(--font-mono); font-size: var(--step--2); color: var(--foreground); }
.car-note { margin-block-start: calc(var(--space-3xs) - var(--space-s)); font-size: var(--step--1); color: var(--muted-foreground); }

/* ---- notes carousel */
.featured-posts { margin-block-end: var(--space-2xl); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(20rem, 85%); gap: var(--space-s); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }
.featured-blog-card { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-xs); border: 1px solid var(--border); background-color: var(--card); color: var(--foreground); text-decoration: none; transition: background-color .15s; }
.featured-blog-card:hover { background-color: color-mix(in oklab, var(--muted) 50%, var(--card)); }
.cover { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-3xs); aspect-ratio: 16 / 9; background-color: oklch(0% 0 0); color: oklch(98.91% .0034 67.784); text-align: center; }
.cover span { font-family: var(--font-serif); font-size: var(--step-3); line-height: 1; }
.cover small { font-size: var(--step--2); color: oklch(71.61% .0091 56.259); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3xs); }
.card-body strong { font-size: var(--step-0); line-height: 1.2; font-weight: var(--font-weight-medium); }
.card-body .description { font-size: calc((var(--step--1) + var(--step-0)) / 2); color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-body .meta { display: flex; align-items: center; gap: var(--space-3xs); margin-block-start: auto; padding-block-start: var(--space-3xs); font-size: var(--step--2); color: var(--muted-foreground); }
.card-body .meta time::after { content: "·"; margin-inline-start: var(--space-3xs); }
.tags { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tags span { color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); }
.tags span + span { margin-inline-start: var(--space-3xs); }
.all { display: inline-block; margin-block-start: var(--space-s); color: var(--muted-foreground); text-decoration: none; }
.all:hover { color: var(--foreground); }
#download .t-half > div:last-child { margin-block-start: auto; }

/* ---- closing band: black, sticky, footer inside */
.final-cta { color-scheme: dark; color: var(--foreground); z-index: 0; position: sticky; inset-block-end: 0; min-block-size: 100lvh; display: flex; flex-direction: column; padding-block-start: var(--space-2xl); background-color: oklch(0% 0 0); overflow: hidden; }
.final-cta .content { position: relative; display: flex; flex-direction: column; align-items: center; margin-block: auto; padding-inline: var(--grid-edge); text-align: center; }
.final-cta h2 { font-family: var(--font-serif); font-size: var(--step-5); font-weight: var(--font-weight-normal); text-wrap: balance; margin-block-end: var(--space-3xs); }
.final-cta p { max-inline-size: 44ch; margin-block-end: var(--space-m); font-size: var(--step-1); color: var(--muted-foreground); text-wrap: pretty; }
.final-cta footer { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); padding-block: var(--space-xs) var(--space-m); padding-inline: var(--grid-edge); font-size: var(--step--1); color: var(--muted-foreground); }
@media (width >= 40rem) { .final-cta footer { flex-direction: row; justify-content: space-between; gap: 0; } }
.final-cta footer ul { display: flex; gap: var(--space-s); }
.final-cta footer a { text-decoration: none; }
.final-cta footer a:hover { color: var(--foreground); }