:root { --text-base: #ffffff; --text-subdued: #b3b3b3; --background-base: #121212; --background-highlight: #1f1f1f; } .d-none { display: none; } .d-flex { display: flex; } .player { /* The player is always dark whatever the page theme, so its accent is fixed for this background rather than following --md-accent-fg-color. That variable is declared on , so referencing it from :root resolved to the theme's indigo default instead of the pink; and its light-mode value is only 2.25:1 here in any case. Same hue as the site accent. */ --player-accent: #dc709b; /* 6.10:1 on #121212 */ display: flex; flex-direction: column; background-color: var(--background-base); color: var(--text-base); border-radius: 12px; max-height: 450px; } /* Video embeds, built by video.js from `

`. Each video keeps its own aspect ratio. Forcing 16:9 on the 4:3 material from 2009 to 2011 pillarboxed it, which left a rounded box with a hard-edged picture sitting in the middle of it. Sizing from the poster instead means the corner radius lands on the picture itself. */ .video-frame { border-radius: 12px; /* This is what actually rounds the picture. Clipping from the wrapper works where a radius on the