:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #d6dde0; background: #000; font-synthesis: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; padding: 2rem 1.25rem 5rem; font-weight: 300; }
main { width: min(100%, 52rem); margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
h1, h2 { font-weight: 300; }
h1 { font-size: 1.375rem; margin: 0; }
h2 { margin: 0 0 1rem; font-size: 1.25rem; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 3rem; }
a:hover { text-decoration: underline; text-underline-offset: .3em; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.videos { display: grid; gap: 3.5rem; }
.player { position: relative; aspect-ratio: 16 / 9; min-height: 200px; background: #0a0a0a; }
.load-video { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; width: 100%; height: 100%; min-height: 200px; border: 1px solid #242424; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.load-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 3rem; color: #fff; background: rgb(0 0 0 / 70%); border-radius: .5rem; font-size: 2.5rem; line-height: 1; }
.load-video:hover .play-icon { background: rgb(0 0 0 / 90%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.load-video:hover { background: #111; border-color: #52585b; }
iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
noscript a { padding: 1rem; }
.empty { margin: 0; color: #a3abad; }
@media (max-width: 480px) { body { padding-inline: 1rem; } header { margin-bottom: 2rem; } .videos { gap: 2.5rem; } }