@font-face { font-family: "Space Grotesk Variable"; src: url("./assets/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("./assets/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  color-scheme: light dark;
  --color-brand-accent: #04d9ff;
  --color-brand-ink: light-dark(#00788c, #04d9ff);
  --color-accent-contrast: oklch(0.148 0.01 220);
  --color-neutral-50: light-dark(#132226, #fff);
  --color-neutral-300: light-dark(#34484d, oklch(0.87 0.01 220));
  --color-neutral-400: light-dark(#43585e, oklch(0.708 0.012 220));
  --color-neutral-500: light-dark(#536a70, oklch(0.556 0.014 220));
  --color-neutral-800: light-dark(#c9d8dc, oklch(0.269 0.014 220));
  --color-neutral-900: light-dark(#edf4f6, oklch(0.205 0.012 220));
  --color-neutral-950: light-dark(#f8fbfc, oklch(0.148 0.01 220));
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk Variable", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; background: var(--color-neutral-950); color: var(--color-neutral-300); font: 1rem/1.7 var(--font-sans); }
a { color: var(--color-brand-ink); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-brand-ink); outline-offset: 5px; }
.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 2rem; }
html { scroll-padding-top: 7rem; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 50; padding: .75rem 1rem; background: var(--color-neutral-950); }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--color-neutral-800); background: color-mix(in srgb, var(--color-neutral-950) 95%, transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 5rem; }
.header-actions { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.brand { display: inline-flex; align-items: center; min-height: 44px; width: 10rem; flex-shrink: 0; }
.logo { display: block; width: 10rem; height: auto; margin-left: -.5rem; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
[data-theme="dark"] .logo-light { display: none; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .logo-dark { display: block; } [data-theme="system"] .logo-light { display: none; } }
.version, .release-date, .asset-meta, .asset-kind, .theme-control { font-family: var(--font-mono); font-weight: 400; font-size: .875rem; }
.site-header nav a { font-size: .875rem; text-decoration: none; }
.site-header nav a:hover { color: var(--color-neutral-50); }
nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
nav a { color: var(--color-neutral-300); display: inline-flex; align-items: center; min-height: 44px; }
.theme-control { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.theme-control select { appearance: none; cursor: pointer; font: .75rem/1.5 var(--font-mono); color: var(--color-neutral-400); background: transparent; border: 0; border-radius: 0; min-height: 44px; padding: .5rem 1.25rem .5rem .25rem; transition: color 150ms; }
.theme-control select:hover, .theme-control select:focus-visible { color: var(--color-neutral-50); }
.theme-control option { color: var(--color-neutral-50); background: var(--color-neutral-950); }
.theme-chevron { position: absolute; right: 0; width: .75rem; height: .75rem; pointer-events: none; color: var(--color-neutral-500); }
.hero { padding-top: 4rem; padding-bottom: 3rem; }
.eyebrow { font: 400 .75rem/1.4 var(--font-mono); color: var(--color-brand-ink); text-transform: uppercase; margin: 0 0 1.75rem; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--color-neutral-50); margin: 0; text-wrap: balance; }
h1 { max-width: 50rem; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.03; letter-spacing: -.03em; }
.intro { max-width: 40rem; font-size: clamp(1.125rem, 2vw, 1.25rem); line-height: 1.65; margin: 2rem 0; }
.hero-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .875rem 1.25rem; color: var(--color-accent-contrast); font-weight: 600; text-decoration: none; }
.hero-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-brand-accent); clip-path: polygon(0 0, calc(100% - .625rem) 0, 100% .625rem, 100% 100%, 0 100%); }
.hero-link:hover::before { background: #fff; }
.hatch { height: 8px; background: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--color-brand-ink) 35%, transparent) 5px 6px); }
.changelog { padding-top: 3.5rem; padding-bottom: 4rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
h2 { font-size: 2.25rem; line-height: 1.2; letter-spacing: -.03em; }
.section-heading p { margin: 0; color: var(--color-neutral-400); }
.section-heading h2 + p { margin-top: .5rem; }
.release-picker { position: relative; min-width: 13rem; border: 1px solid var(--color-neutral-400); border-radius: 4px; margin: 0; background: var(--color-neutral-950); }
.release-picker summary { padding: .75rem 1rem; font-size: 1rem; }
.release-picker strong { font-family: var(--font-mono); font-weight: 400; margin-left: .5rem; }
.release-picker nav { position: absolute; top: 100%; left: -1px; right: -1px; z-index: 2; display: grid; gap: 0; padding: .5rem; background: var(--color-neutral-950); border: 1px solid var(--color-neutral-400); }
.release-picker nav a { padding: .5rem; border-left: 3px solid transparent; }
.release-picker nav a[aria-current="page"] { border-left-color: var(--color-brand-ink); background: var(--color-neutral-900); font-weight: 600; }
.release-details { margin: 1.5rem 0; }
.release-details summary { font-size: 1rem; }
.source-document { margin: 1.5rem 0 2rem; padding: 1.25rem; background: var(--color-neutral-900); }
.source-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.source-heading a { font-size: .875rem; display: inline-flex; align-items: center; min-height: 44px; }
.source-meta { font-family: var(--font-mono); font-size: .875rem; overflow-wrap: anywhere; margin: .25rem 0 .75rem; color: var(--color-neutral-400); }
.source-description { margin: 0 0 .75rem; }
.source-copy { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.75 var(--font-sans); margin: 1rem 0 0; }
.release { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 2rem; scroll-margin-top: 2rem; }
.release + .release { margin-top: 4rem; border-top: 1px solid var(--color-neutral-800); padding-top: 3rem; }
.release-rail { border-top: 2px solid var(--color-brand-ink); padding-top: 1rem; }
.version { color: var(--color-brand-ink); font-size: 1.25rem; text-decoration: none; }
.release-date { display: block; color: var(--color-neutral-400); margin-top: .5rem; }
h3 { font-size: 1.875rem; line-height: 1.25; letter-spacing: -.025em; }
.release-intro { max-width: 43rem; margin-top: 1rem; }
.release-changes { margin: 1.25rem 0 1.5rem; padding-left: 1.25rem; }
.release-changes li { padding-left: .25rem; margin-top: .5rem; }
.release-changes li::marker { color: var(--color-brand-ink); }
.release-note { font-size: .875rem; color: var(--color-neutral-400); margin: 0 0 2rem; max-width: 48rem; }
.format-gallery { min-width: 0; padding: 0; margin: 0; border: 0; }
.format-gallery legend { font: 600 1.25rem/1.35 var(--font-display); color: var(--color-neutral-50); margin-bottom: 1rem; }
.format-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.format-options label { cursor: pointer; padding: .625rem .875rem; min-height: 44px; border: 1px solid var(--color-neutral-800); border-radius: 4px; color: var(--color-neutral-300); font-size: .875rem; }
.format-options input:checked + label { border-color: var(--color-brand-ink); color: var(--color-brand-ink); background: var(--color-neutral-900); text-decoration: underline; text-underline-offset: .25em; }
.format-options input:focus-visible + label { outline: 2px solid var(--color-brand-ink); outline-offset: 3px; }
.assets { display: block; }
.asset { min-width: 0; border-top: 1px solid var(--color-neutral-800); padding-top: 1.25rem; }
.format-gallery:has(input:checked) .asset { display: none; }
.format-gallery:has(input[value="full"]:checked) .asset[data-format="full"],
.format-gallery:has(input[value="youtube-shorts"]:checked) .asset[data-format="youtube-shorts"],
.format-gallery:has(input[value="tiktok"]:checked) .asset[data-format="tiktok"],
.format-gallery:has(input[value="instagram-stories"]:checked) .asset[data-format="instagram-stories"],
.format-gallery:has(input[value="facebook-reels"]:checked) .asset[data-format="facebook-reels"],
.format-gallery:has(input[value="x"]:checked) .asset[data-format="x"],
.format-gallery:has(input[value="linkedin"]:checked) .asset[data-format="linkedin"] { display: block; }
.asset-heading { display: flex; gap: .75rem; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: .875rem; }
h4 { font-size: 1.25rem; line-height: 1.35; }
.asset-kind { color: var(--color-neutral-400); }
.player { background: #000; width: min(100%, 20rem); margin-inline: auto; }
video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.featured .player { width: 100%; }
.square .player { width: min(100%, 32rem); }
.featured video { aspect-ratio: 16 / 9; }
.square video { aspect-ratio: 1; }
.asset-meta { color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.asset-download { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; align-items: center; margin-block: .75rem; }
.asset-download > a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.asset-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; }
.asset-links a { min-height: 44px; display: inline-flex; align-items: center; }
details { border-top: 1px solid var(--color-neutral-800); margin-top: .25rem; }
summary { cursor: pointer; min-height: 44px; padding-block: .5rem; color: var(--color-neutral-50); font-size: .875rem; }
.post-copy { white-space: pre-wrap; overflow-wrap: anywhere; font: .9375rem/1.7 var(--font-sans); padding: 1rem; background: var(--color-neutral-900); margin: 0; }
.media-error { font-size: .875rem; margin: .5rem 0; }
.site-footer { border-top: 1px solid var(--color-neutral-800); background: color-mix(in srgb, var(--color-neutral-900) 40%, var(--color-neutral-950)); }
.footer-legal { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.5rem 0; font-size: .75rem; line-height: 1.5; color: var(--color-neutral-500); }
.footer-legal p { margin: 0; }
.footer-contact { display: flex; flex-direction: column; gap: .5rem; }
.footer-contact a { position: relative; color: inherit; text-decoration: none; align-self: flex-start; }
.footer-contact a::before { content: ""; position: absolute; inset: -.8125rem 0; }
.footer-links { gap: 1.25rem; padding-block: .25rem .75rem; }
.footer-links a { color: var(--color-neutral-500); font-size: .75rem; text-decoration: none; }
.footer-contact a:hover, .footer-links a:hover { color: var(--color-brand-ink); }
@media (min-width: 40rem) { .footer-contact { flex-direction: row; gap: 1.25rem; } }
@media (min-width: 64rem) { .footer-legal { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 60rem) { .release { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; } }
@media (max-width: 44rem) {
  .wrap { padding-inline: 1.25rem; }
  .hero { padding-top: 3rem; }
  .release { grid-template-columns: 1fr; gap: 1.5rem; }
  .release-rail { display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap; }
  .release-date { margin: 0; }
  .section-heading { margin-bottom: 2rem; }
}
@media (max-width: 39.999rem) {
  html { scroll-padding-top: 9rem; }
  .header-inner { flex-wrap: wrap; padding-block: .75rem; }
  .header-actions { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }