:root {
  color-scheme: dark;
  --day-color: rgb(16, 6, 159);
  --ink: #010000;
  --title-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; background-color: var(--day-color); }
.page { width: min(900px, calc(100% - 32px)); margin-inline: auto; padding-block: clamp(24px, 5vh, 56px); text-align: center; }
.wordmark { display: block; width: 100%; height: auto; aspect-ratio: 6 / 1; }
.nameplate { display: flex; align-items: center; justify-content: center; gap: .6em; margin-top: 16px; padding: 20px 24px; border: 0; border-radius: 0; background: var(--ink); }
.nameplate .whatsapp { margin-inline: 0 16px; }
h1 { min-width: 0; margin: 0; color: #ffffff; white-space: normal; flex: 0 1 auto; }
.primary-links { margin-top: 16px; }
.outline-button { display: grid; place-items: center; min-height: 64px; padding: 16px; border: 0; border-radius: 0; background: var(--ink); color: #ffffff; text-decoration: none; overflow-wrap: anywhere; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 16px; padding: 16px; border-radius: 0; border: 0; background: var(--ink); }
.icon-button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid #ffffff; border-radius: 11px; background: var(--ink); color: #ffffff; text-decoration: none; }
.icon-button svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.whatsapp svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.youtube-panel { margin-top: 16px; padding: clamp(24px, 4vw, 40px) 20px; border: 0; border-radius: 0; background: var(--ink); }
.youtube-emblem { margin: 0 auto 16px; }
h2 { margin: 0; }
h1, .outline-button, h2 { font-family: var(--title-font); font-style: normal; font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 500; line-height: 1.25; }
.subscribe-button, .support-button { display: table; min-height: 48px; max-width: 100%; margin: 14px auto 0; padding: 14px 24px; border: 1px solid #ffffff; border-radius: 10px; background: transparent; color: #ffffff; -webkit-text-fill-color: currentColor; font-family: var(--title-font); font-style: normal; font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: center; text-decoration: none; }
.subscribe-button:hover, .support-button:hover, .subscribe-button:focus-visible, .support-button:focus-visible { background: #ffffff; color: var(--ink); -webkit-text-fill-color: currentColor; }
a:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
a.outline-button:hover, a.icon-button:hover { background: #ffffff; color: var(--ink); }
@media (min-width: 1000px) { .page { width: min(900px, 66%); } }
@media (max-width: 360px) { .page { width: calc(100% - 24px); } .nameplate { padding-inline: 16px; } .youtube-panel { padding-inline: 16px; } }