.update-banner {
  display: flex; align-items: center; gap: var(--space-3);
  min-inline-size: 0; inline-size: 100%;
  margin-block: calc(-1 * var(--space-2)) var(--space-4); padding: var(--space-1) 0;
  background: linear-gradient(100deg, rgba(27,64,73,.78), rgba(20,44,54,.65) 70%, rgba(17,33,42,.73));
  border-block-end: 1px solid rgba(106,160,172,.45);
  box-shadow: inset 2px 0 0 rgba(132,193,192,.6);
  color: var(--color-text); text-shadow: 0 1px 5px rgba(0,0,0,.75);
}
.update-banner-link { display: flex; align-items: center; flex: 1; gap: var(--space-5); min-block-size: 2.75rem; padding-inline: var(--space-2); color: inherit; min-inline-size: 0; text-decoration: none; }
.update-banner-copy { display: flex; align-items: baseline; gap: var(--space-4); min-inline-size: 0; }
.update-banner-label { color: var(--color-brand-strong); font-size: .625rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: .1em; line-height: 1.4; white-space: nowrap; }
.update-banner-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--weight-medium); line-height: 1.35; overflow-wrap: anywhere; }
.update-banner-cta { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; }
.update-banner-link:hover .update-banner-cta { color: var(--color-brand-strong); text-decoration: underline; text-underline-offset: .25em; }
.update-banner-dismiss { display: grid; place-items: center; flex-shrink: 0; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 1.125rem; }
.update-banner-dismiss:hover { background: var(--color-surface-hover); color: var(--color-text); }
.update-banner a:focus-visible, .update-banner button:focus-visible, .updates-page :is(a, summary):focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; border-radius: var(--radius-sm); }
.updates-shell { position: relative; isolation: isolate; }
.updates-backdrop { position: absolute; inset-block-start: 0; inset-inline: calc(50% - 50vw); block-size: clamp(48rem, 56.25vw, 72rem); overflow: hidden; pointer-events: none; z-index: -1; }
.updates-backdrop :is(picture, img) { display: block; inline-size: 100%; block-size: 100%; }
.updates-backdrop img { object-fit: cover; object-position: center top; opacity: .95; }
.updates-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,14,.78), rgba(10,13,14,.5) 12%, rgba(10,13,14,.05) 27%, rgba(10,13,14,.1) 40%, var(--color-canvas) 100%); }
.updates-page { max-inline-size: 56rem; margin-inline: auto; padding-block: var(--space-4) var(--space-12); }
.updates-heading { display: flex; flex-direction: column; justify-content: center; min-block-size: 11rem; margin-block-end: var(--space-6); padding: var(--space-6) var(--space-10); border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(10,13,14,.78), rgba(10,13,14,.36) 43%, rgba(10,13,14,.08) 72%, rgba(10,13,14,.56)); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.updates-heading h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; line-height: 1.1; margin: 0 0 var(--space-3); }
.updates-heading p { color: var(--color-text); line-height: 1.6; margin: 0; }
.updates-heading .updates-preview-note { margin-block-start: var(--space-4); color: var(--color-brand-strong); font-size: var(--text-xs); }
.updates-entry { padding: var(--space-10) clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(15,19,19,.95); scroll-margin-block-start: var(--space-6); }
.updates-entry-header { margin-block-end: var(--space-8); }
.updates-entry-header time { color: var(--color-brand-strong); font-size: var(--text-sm); }
.updates-entry-header :is(h2, h3) { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.15; font-weight: 600; margin-block: var(--space-3) var(--space-4); }
.updates-entry p, .updates-section li { line-height: 1.65; color: var(--color-text); max-inline-size: 72ch; }
.updates-entry-header p { margin: 0; color: var(--color-text-secondary); }
.updates-section { margin-block-end: var(--space-8); scroll-margin-block-start: var(--space-6); }
.updates-section :is(h3, h4) { margin: 0 0 var(--space-3); font-size: 1.25rem; font-weight: var(--weight-medium); line-height: 1.4; color: var(--color-brand-strong); }
.updates-progress { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-normal); white-space: nowrap; }
.updates-section ul { padding-inline-start: var(--space-5); margin: 0 0 var(--space-3); }
.updates-section li { margin-block: var(--space-2); padding-inline-start: var(--space-1); }
.updates-section li::marker { color: var(--color-brand); }
.updates-summary { padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-border); }
.updates-feature-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.updates-summary .updates-feature-links { margin-block: var(--space-1) var(--space-3); gap: var(--space-2) var(--space-4); }
.updates-feature-links a, .updates-entry-footer a { color: var(--color-brand-strong); font-size: var(--text-sm); }
.updates-entry-footer { padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); }
.updates-page a:hover { text-decoration: underline; text-underline-offset: .22em; }
.updates-browse { padding: var(--space-5) var(--space-6); margin-block-end: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(15,19,19,.95); scroll-margin-block-start: var(--space-6); }
.updates-browse-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-4); }
.updates-browse-heading h2 { margin: 0; color: var(--color-text); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.updates-browse-heading > a { color: var(--color-brand-strong); font-size: var(--text-sm); }
.updates-date-field { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.updates-date-field select { inline-size: 100%; min-inline-size: 0; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-canvas-raised); color: var(--color-text); font: inherit; }
.updates-date-field select:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }
.updates-topic-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.updates-tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.6; }
.updates-tag:hover, .updates-tag.is-active { color: var(--color-brand-strong); border-color: var(--color-brand-border); background: var(--color-brand-soft); }
.updates-archive { margin-block-start: var(--space-10); }
.updates-archive > h2 { margin: 0 0 var(--space-5); color: var(--color-text-secondary); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.updates-archive .updates-entry { margin-block-end: var(--space-6); }
.updates-archive .updates-entry-header h3 { font-size: 1.6rem; }
.updates-archive-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.updates-archive-list > li { padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas-raised); }
.updates-archive-link { display: block; color: var(--color-text); }
.updates-archive-link time { color: var(--color-brand-strong); font-size: var(--text-sm); }
.updates-archive-link h3 { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
@media (max-width: 700px) {
  .global-nav .global-nav-discord { grid-column: auto; }
}
@media (max-width: 42rem) {
  .updates-backdrop { block-size: 48rem; }
  .updates-backdrop::after { background: linear-gradient(180deg, rgba(10,13,14,.7), rgba(10,13,14,.4) 24%, rgba(10,13,14,.05) 36%, var(--color-canvas) 100%); }
  .updates-heading { min-block-size: 8rem; padding: var(--space-5); }
  .updates-heading h1 { font-size: 2.2rem; }
  .updates-entry { padding-block: var(--space-6); }
  .updates-browse { padding: var(--space-4); }
  .updates-section :is(h3, h4) { font-size: 1.15rem; }
}
@media (max-width: 520px) {
  .update-banner { align-items: flex-start; padding-block: var(--space-2) var(--space-3); }
  .update-banner-link { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .update-banner-copy { display: grid; gap: var(--space-1); }
  .update-banner-title { font-size: 1.125rem; }
  .update-banner-cta { margin-inline-start: 0; }
}
:root[data-visual-mode="minimal"] .updates-backdrop { display: none; }
:root[data-visual-mode="minimal"] .updates-heading { min-block-size: auto; background: none; padding-inline: 0; text-shadow: none; }
@media print {
  .updates-backdrop, .update-banner, .updates-preview-note, .updates-entry-footer, .updates-browse, .updates-archive { display: none; }
  .updates-heading { min-block-size: auto; background: none; }
}
