@layer components{:root {
    --cl-rad: var(--r-lg);                          
    --cl-accent: var(--brand-600);
  }

  
  .changelog {
    background-color: var(--surface-2);
    padding-block: var(--space-8) var(--space-20);
  }
  @media (min-width: 1024px) { .changelog { padding-block: var(--space-12) var(--space-24); } }

  .changelog__head { margin-top: var(--space-6); }
  .changelog__head > * { margin: 0; }
  .changelog__title { margin-top: var(--space-3); color: var(--ink); }
  .changelog__lede { margin-top: var(--space-4); max-width: 40rem; }

  .changelog__current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-6);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--ink-muted);
  }
  .changelog__current a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--cl-accent);
    text-underline-offset: 3px;
  }

  
  .changelog-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
  .changelog-filter__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-muted);
  }
  .changelog-filter__track {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .changelog-key {
    min-height: 2.75rem;                            
    --key-pad-y: var(--space-1);                    
    --key-pad-x: var(--space-4);
    border: 1px solid var(--key-border);
    border-bottom-color: var(--key-border-bottom);
    border-radius: var(--cl-rad);
    background-color: var(--key-face-to);
    background-image: linear-gradient(to bottom, var(--key-face-from), var(--key-face-to));
    box-shadow: inset 0 1px 0 var(--key-edge), var(--key-shadow);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition:
      transform var(--spring-snappy-dur) var(--spring-snappy),
      box-shadow 150ms var(--ease),
      color 150ms var(--ease),
      background-color 150ms var(--ease);
  }
  @media (hover: hover) {
    .changelog-key:hover { transform: translateY(-1px); }
    .changelog-key:not([aria-pressed="true"]):hover { color: var(--ink); }
  }
  .changelog-key:active { transform: translateY(1px); box-shadow: var(--shadow-pressed); }
  @media (prefers-reduced-motion: reduce) {
    .changelog-key:hover,
    .changelog-key:active { transform: none; }
  }
  .changelog-key:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }
  
  .changelog-key[aria-pressed="true"] {
    background-color: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--surface);
    box-shadow: var(--shadow-contact);
    transition-timing-function: var(--spring-bouncy), var(--ease), var(--ease), var(--ease);
    transition-duration: var(--spring-bouncy-dur), 150ms, 150ms, 150ms;
  }

  .changelog__count {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
  }

  
  .changelog__years { margin-top: var(--space-10); }
  .changelog-year + .changelog-year { margin-top: var(--space-12); }

  .changelog-year__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans-ui);
    font-size: var(--fs-2xl);
    line-height: var(--lh-2xl);
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .changelog-year__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 1024px) {
    .changelog-year {
      display: grid;
      grid-template-columns: 7rem 1fr;
      gap: var(--space-8);
      align-items: start;
    }
    .changelog-year__title { position: sticky; top: 6rem; margin: 0; }
  }

  
  .changelog-entry {
    scroll-margin-top: 6rem;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--cl-rad);
    background-color: var(--surface);
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 42%);
    box-shadow:
      inset 0 1px 0 var(--edge-light),
      var(--shadow-contact),
      var(--shadow-ambient-soft);
    transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
  }
  @media (min-width: 640px) { .changelog-entry { padding: var(--space-6); } }

  
  .changelog-entry:target {
    border-color: color-mix(in srgb, var(--cl-accent) 55%, var(--line));
    box-shadow:
      inset 0 1px 0 var(--edge-light),
      0 0 0 3px color-mix(in srgb, var(--cl-accent) 22%, transparent),
      var(--shadow-ambient-soft);
  }

  .changelog-entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
  }
  .changelog-entry__version {
    margin: 0;
    font-family: var(--font-sans-ui);
    font-size: var(--fs-2xl);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .changelog-entry__product {
    display: block;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .changelog-entry__anchor {
    color: inherit;
    text-decoration: none;
  }
  .changelog-entry__anchor:hover,
  .changelog-entry__anchor:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--cl-accent);
    text-underline-offset: 4px;
  }
  .changelog-entry__date {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .changelog-entry__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .changelog-entry__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: 700;
    color: var(--ink-2);
  }

  .changelog-entry__notes {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-body);
    line-height: 1.65;
  }
  .changelog-entry__notes > li {
    position: relative;
    padding-left: var(--space-5);
  }
  .changelog-entry__notes > li + li { margin-top: var(--space-2); }
  .changelog-entry__notes > li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.7em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--r-full);
    background-color: var(--cl-accent);
  }
  
  @media (max-width: 639.98px) {
    .changelog-entry__anchor {
      display: inline-block;
      padding-block: var(--space-2);
      margin-block: calc(var(--space-2) * -1);
      padding-inline-end: var(--space-3);
    }
    .changelog-entry__notes { line-height: 1.6; }
    .changelog-entry__notes > li { padding-left: var(--space-4); }
    .changelog-entry__notes > li + li { margin-top: var(--space-1); }
  }
  .changelog-entry__notes code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: var(--r-sm);
    background-color: var(--line-soft);
  }

  
  .changelog-entry__shots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
  }
  @media (min-width: 640px) {
    .changelog-entry__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .changelog-entry__shots figure { margin: 0; }
  .changelog-entry__shots figcaption {
    margin-top: var(--space-1);
    color: var(--ink-2);
    font-size: 0.875rem;
  }
  .changelog-entry__shots a {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--cl-rad);
    background-color: var(--surface-2);
    box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-contact);
    transition: border-color 300ms var(--ease);
  }
  .changelog-entry__shots img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 300ms var(--ease);
  }
  .changelog-entry__shots a:hover {
    border-color: color-mix(in srgb, var(--cl-accent) 55%, var(--line));
  }
  .changelog-entry__shots a:hover img { opacity: 0.94; }
  .changelog-entry__shots a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  
  .changelog-tag {
    --tag-ink: var(--ink-2);
    --tag-face: var(--surface-2);
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 var(--space-2);
    border: 1px solid color-mix(in srgb, var(--tag-ink) 28%, transparent);
    border-bottom-color: color-mix(in srgb, var(--tag-ink) 45%, transparent);
    border-radius: var(--cl-rad);
    background-color: var(--tag-face);
    box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-contact);
    font-size: var(--fs-xs);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tag-ink);
  }
  .changelog-tag--mt4    { --tag-ink: var(--blue-700);    --tag-face: var(--blue-50); }
  .changelog-tag--mt5    { --tag-ink: var(--indigo-700);  --tag-face: var(--indigo-50); }
  .changelog-tag--tv     { --tag-ink: var(--green-700);   --tag-face: var(--green-50); }
  .changelog-tag--latest {
    --tag-ink: var(--brand-700);
    --tag-face: var(--brand-tint);
    text-transform: uppercase;
  }

  .changelog__empty { margin-top: var(--space-10); color: var(--ink-muted); }

  
  :root[data-theme="dark"] .changelog-entry { background-image: none; }
  :root[data-theme="dark"] .changelog-entry__notes code { background-color: var(--night-raised); }
  :root[data-theme="dark"] .changelog-entry__shots a { background-color: var(--night-ground); }
  :root[data-theme="dark"] .changelog-entry__shots img { filter: var(--night-img-filter); }
  :root[data-theme="dark"] .changelog-tag { --tag-face: var(--night-raised); }
  :root[data-theme="dark"] .changelog-tag--mt4    { --tag-ink: var(--blue-300);   --tag-face: color-mix(in oklab, var(--blue-500) 16%, var(--night-card)); }
  :root[data-theme="dark"] .changelog-tag--mt5    { --tag-ink: var(--indigo-300); --tag-face: color-mix(in oklab, var(--indigo-500) 18%, var(--night-card)); }
  :root[data-theme="dark"] .changelog-tag--tv     { --tag-ink: var(--green-300);  --tag-face: color-mix(in oklab, var(--green-500) 14%, var(--night-card)); }
  :root[data-theme="dark"] .changelog-tag--latest { --tag-ink: var(--brand-400); }
}