:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #050712; color: #f5f7fb; font: 16px/1.6 system-ui, sans-serif; }
main { max-width: 1120px; margin: 0 auto; padding: 32px 20px 64px; }
a { color: #8ee7ff; }
.brand { letter-spacing: .24em; font-size: .8rem; text-transform: uppercase; color: #b8c7dc; }
h1 { font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.05; margin: 12px 0 16px; }
.lede { max-width: 760px; color: #cad3e1; font-size: 1.15rem; }
.conversion { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1px solid #374151; border-radius: 14px; background: #111827; }
.conversion h2 { margin: 0 0 .5rem; font-size: 1.15rem; color: #f9fafb; }
.conversion p { margin: 0; color: #d1d5db; line-height: 1.6; }
.media-card { margin: 28px 0; border: 1px solid #344563; border-radius: 18px; overflow: hidden; background: #0b1020; }
.media-card img { display: block; width: 100%; height: auto; }
.watch { aspect-ratio: 16 / 9; background: #000; }
.watch iframe { width: 100%; height: 100%; border: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.button { display: inline-block; padding: 11px 18px; border-radius: 999px; background: #70e7c0; color: #071017; font-weight: 700; text-decoration: none; }
.button.secondary { background: #1c2941; color: #e7efff; }
.note { color: #aebbd0; font-size: .95rem; }
footer { margin-top: 40px; color: #8492a8; font-size: .9rem; }