:root { color-scheme: dark; --navy: #14173a; --navy2: #212346; --lav: #e9e6ff; --mute: #a9a6cf; --blue: #42b7ff; --violet: #7357ff; --purple: #9d53ff; }
* { box-sizing: border-box; }
html { background: #0c0e2a; }
body { margin: 0; min-height: 100vh; color: var(--lav); font: 17px/1.6 "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(1100px 700px at 12% -10%, rgba(66,183,255,.20), transparent 60%), radial-gradient(1200px 800px at 100% 110%, rgba(157,83,255,.26), transparent 60%), linear-gradient(160deg, #14173a, #1b1d4c 55%, #241a52); background-attachment: fixed; }
main { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px; }
header { text-align: center; margin-bottom: clamp(20px, 4vw, 36px); }
.logo { width: min(450px, 78vw); height: auto; display: block; margin: 0 auto 18px; }
.kicker { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue); }
h1 { margin: 0; font-size: clamp(26px, 4.6vw, 46px); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; text-wrap: balance;
  background: linear-gradient(90deg, #ffffff 0%, #e9e6ff 45%, #b9a8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.player { margin: 0; padding: clamp(6px, 1vw, 10px); border-radius: clamp(16px, 2.4vw, 28px);
  background: linear-gradient(135deg, var(--blue), var(--violet) 55%, var(--purple));
  box-shadow: 0 30px 80px rgba(8, 6, 40, .65), 0 0 0 1px rgba(255,255,255,.08) inset; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(11px, 1.8vw, 20px); background: #000; }
.notes { margin: clamp(24px, 4vw, 40px) auto 0; max-width: 760px; padding: 22px 26px; border-radius: 20px; background: rgba(18, 20, 50, .72); border: 1px solid rgba(255,255,255,.14); }
.notes p { margin: 0 0 10px; font-weight: 700; color: #fff; }
.notes ul { margin: 0; padding-left: 20px; color: var(--mute); }
.notes li { margin: 4px 0; }
footer { margin-top: 36px; text-align: center; color: var(--mute); font-size: 15px; }
footer p { margin: 0; }
a { color: var(--blue); }
a:focus-visible, video:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }