:root {
  color-scheme: dark;
  font: 100%/1.55 system-ui, sans-serif;
  background: #10151b;
  color: #e8eef4;
  --accent: #88e0ca;
  --line: #34424f;
}

* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 1rem max(1rem, calc((100% - 70rem) / 2)); border-bottom: 1px solid var(--line); }
header strong { color: var(--accent); letter-spacing: .08em; }
nav { display: flex; flex-wrap: wrap; column-gap: 1rem; }
nav a, summary { display: inline-flex; align-items: center; min-height: 2.75rem; }
main { max-width: 60rem; margin: auto; padding: 1rem clamp(.75rem, 4vw, 2rem) 3rem; }
a { color: var(--accent); overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.skip-link { position: absolute; top: .5rem; left: .5rem; padding: .5rem; background: #10151b; }
.skip-link:not(:focus) { clip-path: inset(50%); }
.card { margin-block: 1rem; padding: clamp(.75rem, 3vw, 1.25rem); background: #172129; border: 1px solid var(--line); border-radius: .5rem; }
.card h2 { margin-top: 0; }
.notice { border-left: 3px solid var(--accent); padding: .6rem .9rem; background: #172b2b; }
figure { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
video { width: 100%; aspect-ratio: 8 / 5; background: black; }
figcaption { margin-top: .5rem; }
details { border-top: 1px solid var(--line); }
summary { display: list-item; padding: .65rem 0; cursor: pointer; }