/* Tokens follow the original changelog page. --bar is the chart fill, checked for contrast in each theme. */
:root {
  --ground: #0F1113;
  --surface: #16191B;
  --raised: #1C2023;
  --ink: #EDEFF0;
  --muted: #98A0A4;
  --faint: #6B7377;
  --accent: #33E05F;
  --bar: #25B04D;
  --warn: #F5B83D;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --glow: rgba(51, 224, 95, 0.10);
  --scroll: rgba(255, 255, 255, 0.14);
  --scroll-hover: rgba(255, 255, 255, 0.28);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --top-h: 60px;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F5F7F5; --surface: #FFFFFF; --raised: #F0F3F1; --ink: #16181A; --muted: #5A6165; --faint: #858C90;
    --accent: #149E3F; --bar: #149E3F; --warn: #B7791F;
    --hairline: rgba(10, 20, 12, 0.10); --hairline-strong: rgba(10, 20, 12, 0.18); --glow: rgba(20, 158, 63, 0.08); --scroll: rgba(10, 20, 12, 0.18); --scroll-hover: rgba(10, 20, 12, 0.34);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #F5F7F5; --surface: #FFFFFF; --raised: #F0F3F1; --ink: #16181A; --muted: #5A6165; --faint: #858C90;
  --accent: #149E3F; --bar: #149E3F; --warn: #B7791F;
  --hairline: rgba(10, 20, 12, 0.10); --hairline-strong: rgba(10, 20, 12, 0.18); --glow: rgba(20, 158, 63, 0.08); --scroll: rgba(10, 20, 12, 0.18); --scroll-hover: rgba(10, 20, 12, 0.34);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: radial-gradient(60rem 30rem at 15% -10%, var(--glow), transparent 70%), var(--ground);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.85em; padding: 0.05em 0.35em; border-radius: 5px; background: var(--raised); border: 1px solid var(--hairline); }
kbd { font-family: var(--mono); font-size: 0.7rem; padding: 0.05rem 0.35rem; border: 1px solid var(--hairline-strong); border-radius: 5px; color: var(--muted); }
mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
svg { flex: none; }
/* Scrollbars: thin, rounded, themed. Firefox and current Chrome use scrollbar-color; Safari uses the ::-webkit rules. */
html, .versions { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
/* The sidebar's bar only appears while you're over it. */
.versions:not(:hover) { scrollbar-color: transparent transparent; }
.versions:not(:hover)::-webkit-scrollbar-thumb { background-color: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ground); background: var(--accent); border-radius: 99px; padding: 0.12rem 0.55rem;
}
.layout, .topbar-in { max-width: 74rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky; top: 0; z-index: 10; height: var(--top-h);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-in { height: 100%; display: flex; align-items: center; gap: 0.6rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1rem; margin-right: auto; }
.brand img { border-radius: 7px; }
.brand-sub { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.search { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 0.7rem; color: var(--faint); display: flex; pointer-events: none; }
.search input {
  width: 17rem; font: inherit; font-size: 0.88rem; color: var(--ink); height: 2.25rem;
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 0 2rem 0 2.1rem; outline: none;
  transition: border-color 0.15s, width 0.2s;
}
.search input:focus { border-color: var(--accent); width: 21rem; }
.search kbd { position: absolute; right: 0.6rem; pointer-events: none; }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; min-width: 2.25rem; justify-content: center; padding: 0 0.6rem;
  border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.85rem; cursor: pointer; transition: border-color 0.15s;
}
.icon-btn:hover, .icon-btn[aria-pressed="true"] { border-color: var(--accent); }
.icon-btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.results { margin: 1.5rem 0 0; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* ---------------------------------------------------------------- releases */

.layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; }
main { min-width: 0; }

.versions {
  position: sticky; top: var(--top-h); align-self: start; max-height: calc(100vh - var(--top-h)); overflow-y: auto;
  padding: 1.75rem 0.25rem 2rem 0; scrollbar-gutter: stable;
}
.versions ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vg { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 1rem 0.65rem 0.35rem; }
.vg:first-child { padding-top: 0; }
.versions a {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "v t c" "d d d"; align-items: center; column-gap: 0.45rem;
  padding: 0.35rem 0.65rem; border-radius: 8px; border: 1px solid transparent; text-decoration: none; color: var(--muted);
  transition: background 0.12s, color 0.12s, opacity 0.15s;
}
/* Quiet by default; the selected version gets ink colour and a thin accent rule, not a loud fill. */
.versions a:hover { background: var(--surface); color: var(--ink); }
.versions a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.versions a[aria-current] .vv { font-weight: 600; }
.versions a.dim { opacity: 0.35; }
.vv { grid-area: v; font-weight: 500; font-size: 0.86rem; }
.versions .tag {
  grid-area: t; justify-self: start; font-size: 0.54rem; padding: 0 0.35rem;
  background: none; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.vc { grid-area: c; font-family: var(--mono); font-size: 0.64rem; color: var(--faint); }
.vd { grid-area: d; font-family: var(--mono); font-size: 0.62rem; color: var(--faint); }

.feed { padding: 1.75rem 0 5rem; }
.release { max-width: 48rem; }
.rel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.rel-title { display: grid; gap: 0.4rem; justify-items: start; }
.release h1 { margin: 0; font-size: 2.1rem; letter-spacing: -0.025em; line-height: 1.1; }
.release h1 span { color: var(--accent); }
.rel-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.82rem; color: var(--muted); }
.rel-facts b { color: var(--ink); }
.date { font-family: var(--mono); font-size: 0.75rem; }
.plats { display: inline-flex; gap: 0.45rem; }
.dls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dls .dl { min-width: 9.5rem; }
.dl {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-radius: 10px; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-strong); transition: border-color 0.15s, transform 0.15s;
}
.dl:hover { border-color: var(--accent); transform: translateY(-1px); }
.dl > svg { color: var(--accent); }
.dl-os { font-weight: 600; font-size: 0.86rem; }
.dl-os small { font-weight: 500; color: var(--muted); }
.dl-kind { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.release.latest .dl { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.release.latest .dl > svg, .release.latest .dl-kind, .release.latest .dl-os small { color: inherit; }

/* Release card: always the dark brand look. Sizes are in cqi (1cqi = 1% of card width; the original artwork was 1200px wide, so 12px = 1cqi). */
.rcard { container-type: inline-size; margin: 0 0 1rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); }
.rc {
  position: relative; aspect-ratio: 1200 / 630; color: #EDEFF0;
  background: radial-gradient(33.3cqi 27.5cqi at 81.7% 47.6%, #254C36, transparent), #0F1113;
}
.rc-top { position: absolute; top: 4cqi; left: 4.67cqi; right: 4.67cqi; display: flex; align-items: center; justify-content: space-between; font-size: 1.67cqi; color: #ADB6B0; }
.rc-brand { display: flex; align-items: center; gap: 1.1cqi; font-size: 2.67cqi; font-weight: 700; color: #EDEFF0; }
.rc-brand img { width: 3.33cqi; height: 3.33cqi; border-radius: 0.7cqi; }
.rc-copy { position: absolute; left: 4.67cqi; top: 12.6cqi; width: 50cqi; }
.rc-eyebrow { font-size: 1.33cqi; font-weight: 600; letter-spacing: 0.21cqi; text-transform: uppercase; color: #6DE78B; }
.rc-head { margin-top: 2.4cqi; font-size: 5.17cqi; font-weight: 700; line-height: 1.15; letter-spacing: -0.17cqi; }
.rc-copy ul { list-style: none; margin: 2.2cqi 0 0; padding: 0; display: grid; gap: 1cqi; }
.rc-copy li { display: flex; align-items: center; gap: 1cqi; font-size: 1.92cqi; color: #BDC5C0; }
.rc-copy li::before { content: ""; width: 0.75cqi; height: 0.75cqi; border-radius: 50%; background: #6DE78B; flex: none; }
.rc-foot {
  position: absolute; left: 4.67cqi; right: 4.67cqi; bottom: 3.6cqi; padding-top: 2cqi; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; font-size: 1.5cqi; color: #AEBBB2;
}
.rc-foot b { color: #EDEFF0; font-weight: 600; }
.art {
  position: absolute; right: 4.67cqi; top: 14.5cqi; width: 36.2cqi; height: 27.5cqi; padding: 2cqi;
  display: flex; flex-direction: column; gap: 1.3cqi; border-radius: 2.33cqi; background: #191F1B; border: 1px solid #425548;
}
.art-files .af-head { display: flex; align-items: center; gap: 1cqi; }
.art-files .af-head > i { width: 2.2cqi; height: 2.2cqi; border-radius: 50%; background: #6DE78B; }
.art-files .af-head span { display: grid; gap: 0.6cqi; }
.art-files .af-head span i { display: block; width: 9cqi; height: 0.5cqi; border-radius: 1cqi; background: #D9DEDB; }
.art-files .af-head span i + i { width: 6cqi; background: #5C6B61; }
.af-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqi; }
.af-img, .af-doc { position: relative; border-radius: 1cqi; overflow: hidden; }
.af-img { background: #3B5A45; }
.af-img i { position: absolute; right: 22%; top: 18%; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #CFE9D6; }
.af-img b { position: absolute; inset: 35% 0 0; background: #7FB08D; clip-path: polygon(0 100%, 32% 25%, 55% 62%, 72% 42%, 100% 100%); }
.af-doc { background: #263029; display: grid; place-items: center; align-content: center; gap: 0.6cqi; color: #CFD6D1; }
.af-doc svg { width: 3.4cqi; height: 3.4cqi; }
.af-doc small { font-size: 1.15cqi; }
.af-input { display: flex; align-items: center; justify-content: space-between; height: 3.6cqi; padding-left: 1.2cqi; border-radius: 1cqi; background: #0F1311; font-size: 1.25cqi; color: #9AA59E; }
.af-input b { display: grid; place-items: center; width: 4.4cqi; height: 3.6cqi; border-radius: 1cqi; background: #6DE78B; color: #0F1113; }
.af-input svg { width: 1.6cqi; height: 1.6cqi; }
.ac-call { flex: 1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 1cqi; }
.ac-tile { display: grid; place-items: center; border-radius: 1cqi; background: #2A3A2F; }
.ac-tile.alt { background: #1D2620; }
.ac-tile b { display: grid; place-items: center; width: 3.6cqi; height: 3.6cqi; border-radius: 50%; background: #6DE78B; color: #0F1113; font-size: 1.6cqi; }
.ac-tile.alt b { background: #2F7A45; color: #D6FFE0; }
.ac-ctl { display: grid; align-content: space-evenly; padding: 0 0.9cqi; border-radius: 1cqi; background: #0F1311; }
.ac-ctl i { width: 1.5cqi; height: 1.5cqi; border-radius: 50%; background: #6DE78B; }
.ac-ctl i:nth-child(2) { background: #8A948E; }
.ac-ctl i:nth-child(3) { background: #F05252; }
.ac-bubble { padding: 1.2cqi 1.4cqi; border-radius: 1.2cqi; background: #121714; border: 1px solid #425548; }
.ac-bubble small { display: inline-block; padding: 0.2cqi 0.7cqi; border-radius: 1cqi; background: #2F7A45; color: #D6FFE0; font-size: 0.95cqi; font-weight: 600; letter-spacing: 0.1cqi; text-transform: uppercase; }
.ac-bubble p { margin: 0.6cqi 0 0; font-size: 1.45cqi; line-height: 1.35; color: #DDE3DF; }
.art-leave { justify-content: center; gap: 1cqi; }
.art-leave small { align-self: start; display: inline-flex; align-items: center; gap: 0.6cqi; padding: 0.3cqi 1cqi; border-radius: 2cqi; background: rgba(240, 82, 82, 0.15); color: #F6A3A3; font-size: 1.25cqi; }
.art-leave small i { width: 0.9cqi; height: 0.9cqi; border-radius: 50%; background: #F05252; }
.art-leave strong { font-size: 2.4cqi; }
.art-leave p { margin: 0; font-size: 1.6cqi; line-height: 1.4; color: #9AA59E; }
.art-leave div { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqi; margin-top: 0.8cqi; }
.art-leave div span { display: grid; place-items: center; height: 3.8cqi; border-radius: 1cqi; background: #263029; font-size: 1.6cqi; font-weight: 600; }
.art-leave div .go { background: #E5484D; color: #FFFFFF; }
.rcard.auto .rc-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard.auto .rc-head { font-size: 4.2cqi; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rcard.auto .rc-copy li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-left: 1.75cqi; position: relative; }
.rcard.auto .rc-copy li::before { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
.as-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqi; }
.as-tile { position: relative; display: grid; place-items: center; align-content: center; gap: 1.2cqi; border-radius: 1cqi; background: #2A3A2F; border: 1px solid transparent; }
.as-tile.alt { background: #1D2620; }
.as-tile b { display: grid; place-items: center; width: 3.6cqi; height: 3.6cqi; border-radius: 50%; background: #6DE78B; color: #0F1113; font-size: 1.6cqi; }
.as-tile.alt b { background: #2F7A45; color: #D6FFE0; }
.as-wave { display: flex; align-items: center; gap: 0.35cqi; height: 2.4cqi; }
.as-wave i { width: 0.45cqi; height: 100%; border-radius: 1cqi; background: #6DE78B; }
.as-wave i:nth-child(odd) { height: 55%; }
.as-tile.gone { background: transparent; border: 1px dashed #425548; }
.as-tile.gone b { background: #263029; color: #5C6B61; }
.as-tile.gone small { font-size: 1.2cqi; color: #8A948E; }
.as-bar { display: flex; align-items: center; justify-content: space-between; height: 3.6cqi; padding: 0 1.2cqi; border-radius: 1cqi; background: #0F1311; font-size: 1.25cqi; color: #9AA59E; }
.as-bar span { display: inline-flex; align-items: center; gap: 0.8cqi; }
.as-bar span i { width: 0.9cqi; height: 0.9cqi; border-radius: 50%; background: #6DE78B; }
.as-bar svg { width: 1.6cqi; height: 1.6cqi; color: #6DE78B; }
.art-areas { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1cqi; padding: 1.6cqi; }
.art-areas.n1 { grid-template-columns: 1fr; }
.art-areas.n3 > :first-child { grid-row: span 2; }
.art-areas > div {
  display: flex; flex-direction: column; gap: 0.4cqi; padding: 1.4cqi; border-radius: 1.2cqi; min-width: 0;
  background: linear-gradient(160deg, #24332A, #1A221D);
}
.art-areas > div:first-child { background: linear-gradient(160deg, #2F7A45, #1F4A2E); }
.art-areas svg { width: 2.6cqi; height: 2.6cqi; color: #6DE78B; }
.art-areas > div:first-child svg { color: #D6FFE0; }
.art-areas i { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.45cqi; margin-bottom: 0.6cqi; }
.art-areas u { width: 1cqi; height: 1cqi; border-radius: 0.25cqi; background: #6DE78B; opacity: 0.85; }
.art-areas > div:first-child u { background: #D6FFE0; }
.art-areas b { font-size: 3.6cqi; line-height: 1; letter-spacing: -0.1cqi; }
.art-areas span { font-size: 1.2cqi; color: #BDC5C0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- card animations
   Base styles are the finished frame, so with reduced motion (animation: none) every card shows its end state.
   Cards play only while on screen (.inview, set from app.js). */

.rcard:not(.inview) .rc * { animation-play-state: paused; }
.af-input { position: relative; overflow: hidden; }
.af-status { display: grid; }
.af-status > span { grid-area: 1 / 1; }
.af-status > span:first-child { opacity: 0; animation: af-uploading 6s infinite; }
.af-status > span:last-child { animation: af-ready 6s infinite; }
.af-input em { position: absolute; left: 0; bottom: 0; height: 0.3cqi; width: 100%; background: #6DE78B; opacity: 0; animation: af-progress 6s infinite; }
.af-input b { animation: af-send 6s infinite; }
.af-img { animation: af-drop 6s infinite; }
.af-doc { animation: af-drop 6s 0.35s infinite backwards; }
@keyframes af-drop { 0% { opacity: 0; transform: translateY(1.5cqi) scale(0.94); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes af-uploading { 0%, 12% { opacity: 0; } 16%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes af-ready { 0%, 56% { opacity: 0; } 60%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes af-progress { 0%, 14% { width: 0; opacity: 1; } 55% { width: 100%; opacity: 1; } 60%, 100% { width: 100%; opacity: 0; } }
@keyframes af-send { 0%, 66% { transform: none; box-shadow: 0 0 0 0 rgba(109, 231, 139, 0.6); } 70% { transform: scale(1.12); } 76% { transform: none; box-shadow: 0 0 0 1.4cqi rgba(109, 231, 139, 0); } 100% { transform: none; } }

.ac-tile:first-child b { animation: ac-speak 1.6s infinite; }
.ac-bubble p span { animation: ac-word 7s calc(var(--i) * 0.16s) infinite backwards; }
.ac-bubble small { animation: blink 2s infinite; }
@keyframes ac-speak { 0% { box-shadow: 0 0 0 0 rgba(109, 231, 139, 0.55); } 100% { box-shadow: 0 0 0 1.4cqi rgba(109, 231, 139, 0); } }
@keyframes ac-word { 0% { opacity: 0; filter: blur(0.3cqi); } 4%, 88% { opacity: 1; filter: none; } 96%, 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0.55; } }

.art-leave small i { animation: blink 1.2s infinite; }
.art-leave > :not(.al-cursor) { animation: al-pop 6s infinite; }
.art-leave > div span:first-child { animation: al-press 6s infinite; }
.al-cursor {
  position: absolute; left: 0; top: 0; width: 2.1cqi; height: 2.8cqi; opacity: 0; pointer-events: none;
  background: #FFFFFF; filter: drop-shadow(0 0.2cqi 0.3cqi rgba(0, 0, 0, 0.6));
  clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 58% 93%, 41% 55%, 78% 55%);
  animation: al-cursor 6s infinite;
}
@keyframes al-pop { 0% { opacity: 0; transform: translateY(0.8cqi); } 7%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes al-cursor {
  0%, 22% { opacity: 0; transform: translate(30cqi, 25cqi); }
  30% { opacity: 1; transform: translate(26cqi, 22cqi); }
  55% { opacity: 1; transform: translate(9.4cqi, 20.4cqi) scale(1); }
  59% { transform: translate(9.4cqi, 20.4cqi) scale(0.82); }
  63%, 82% { opacity: 1; transform: translate(9.4cqi, 20.4cqi) scale(1); }
  90%, 100% { opacity: 0; transform: translate(9.4cqi, 20.4cqi); }
}
@keyframes al-press { 0%, 57% { background: #263029; transform: none; } 60% { background: #3A4A40; transform: scale(0.96); } 66%, 100% { background: #263029; transform: none; } }

.as-wave i { animation: as-talk 1.1s calc(var(--i) * -0.23s) infinite alternate; }
.as-tile.gone { animation: as-leave 7s infinite; }
.as-tile.gone b { animation: as-leave-dot 7s infinite; }
.as-tile.gone small { animation: as-leave-label 7s infinite; }
.as-bar span i { animation: blink 2s infinite; }
@keyframes as-talk { 0% { transform: scaleY(0.35); } 100% { transform: none; } }
@keyframes as-leave { 0%, 34% { background: #2A3A2F; border-color: transparent; } 42%, 100% { background: transparent; border-color: #425548; } }
@keyframes as-leave-dot { 0%, 34% { background: #6DE78B; color: #0F1113; transform: none; } 40% { transform: scale(0.85); } 46%, 100% { background: #263029; color: #5C6B61; transform: none; } }
@keyframes as-leave-label { 0%, 38% { opacity: 0; transform: translateY(0.5cqi); } 46%, 100% { opacity: 1; transform: none; } }

.art-areas u { animation: ar-fill 5s calc(var(--i) * 0.09s) infinite backwards; }
@keyframes ar-fill { 0% { opacity: 0.12; transform: scale(0.5); } 5%, 86% { opacity: 0.85; transform: none; } 100% { opacity: 0.12; } }

/* One column, read top to bottom, at the same width as the release card. */
.areas { display: grid; gap: 0.75rem; }
.area { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 0.35rem 0.4rem 0.4rem; }
.area h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.55rem 0.6rem 0.45rem; font-size: 0.86rem; font-weight: 600; }
.area h3 svg { color: var(--accent); }
.area h3 em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); background: var(--raised); border-radius: 99px; padding: 0.05rem 0.5rem; }
.area ul { list-style: none; margin: 0; padding: 0; }
.area summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 9px; cursor: pointer;
  list-style: none; font-size: 0.9rem; color: var(--ink); transition: background 0.12s;
}
.area summary::-webkit-details-marker { display: none; }
.area summary:hover { background: var(--raised); }
.area summary .t { flex: 1; min-width: 0; }
.area summary > svg { color: var(--faint); transition: transform 0.2s; }
.area details[open] > summary > svg { transform: rotate(180deg); }
.area .body { padding: 0.1rem 0.6rem 0.7rem; font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
details::details-content { height: 0; overflow: clip; transition: height 0.22s ease, content-visibility 0.22s allow-discrete; }
details[open]::details-content { height: auto; }
.area.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.area.warn h3 svg { color: var(--warn); }
.note { margin: 0; padding: 0 0.6rem 0.6rem; font-size: 0.88rem; color: var(--muted); }


.empty { display: grid; justify-items: center; gap: 0.6rem; padding: 4rem 0; color: var(--muted); }
.areas .empty { padding: 2.5rem 0; border: 1px dashed var(--hairline-strong); border-radius: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2rem; }
.pager a {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i s" "i b"; align-items: center; column-gap: 0.6rem;
  padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--hairline-strong); background: var(--surface);
  text-decoration: none; color: var(--ink); transition: border-color 0.15s;
}
.pager a:hover { border-color: var(--accent); }
.pager svg { grid-area: i; color: var(--muted); transform: rotate(90deg); }
.pager a[rel="next"] { grid-template-columns: 1fr auto; grid-template-areas: "s i" "b i"; text-align: right; }
.pager a[rel="next"] svg { transform: rotate(-90deg); }
.pager small { grid-area: s; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pager b { grid-area: b; font-weight: 600; }
.noscript { text-align: center; padding: 4rem 1rem; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  /* The sidebar becomes a sticky strip of version chips under the top bar. */
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .versions {
    top: var(--top-h); z-index: 5; max-height: none; overflow: auto hidden; padding: 0.6rem 0; margin: 0 -24px; padding-inline: 24px;
    background: color-mix(in srgb, var(--ground) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline); scrollbar-width: none;
  }
  .versions::-webkit-scrollbar { display: none; }
  .versions a[aria-current] { box-shadow: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .versions ol { display: flex; gap: 0.4rem; }
  .vg, .vd { display: none; }
  .versions a { grid-template-areas: "v t c"; white-space: nowrap; border-color: var(--hairline); border-radius: 99px; padding: 0.35rem 0.75rem; }
  .feed { padding-top: 1.25rem; }
  .rel-head { align-items: flex-start; }
}
@media (max-width: 640px) {
  .layout, .topbar-in { padding-left: 16px; padding-right: 16px; }
  .versions { margin: 0 -16px; padding-inline: 16px; }
  .release h1 { font-size: 1.7rem; }
  .dls { width: 100%; }
  .dls .dl { flex: 1; }
  .brand-sub, .search kbd, .icon-btn span { display: none; }
  .search { flex: 1; min-width: 0; }
  .search input, .search input:focus { width: 100%; }
  .brand { margin-right: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}