:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #a33d15; outline-offset: 6px; }
.masthead { width: min(100% - 96px, 1280px); margin: 0 auto; min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; font-size: 25px; letter-spacing: -.06em; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.downloads { display: flex; align-items: center; gap: 14px; }
.store-link { display: block; flex: none; height: 52px; border-radius: 8px; transition: transform .16s ease; }
.store-link:hover { transform: translateY(-3px); }
.apple, .apple img { display: block; width: 156px; height: 52px; }
.google { position: relative; overflow: hidden; width: 174.571px; }
.google img { position: absolute; width: 199.952px; height: auto; left: -12.69px; top: -12.69px; max-width: none; }
.platforms { font-size: 12px; letter-spacing: .025em; margin: 17px 0 0; }
.footer { width: min(100% - 96px, 1280px); margin: auto auto 0; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); font-size: 12px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 23px; }
.footer a { text-decoration: none; padding: 8px 0; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer p { margin: 0; line-height: 1.6; }
@media(max-width: 650px) {
 .masthead { width: calc(100% - 40px); min-height: 78px; }
 .brand { font-size: 23px; } .brand img { width: 34px; height: 34px; border-radius: 9px; }
 .downloads { gap: 12px; }
 .store-link { height: 48px; }
 .apple, .apple img { width: 144px; height: 48px; }
 .google { width: 161.143px; }
 .google img { width: 184.571px; left: -11.714px; top: -11.714px; }
 .footer { width: calc(100% - 40px); flex-direction: column; text-align: center; gap: 12px; padding: 18px 0; }
 .footer nav { justify-content: center; gap: 0 18px; }
}
@media(max-width: 359px) { .downloads { flex-direction: column; align-items: center; } }
@media(prefers-reduced-motion: reduce) { .store-link { transition: none; } }

:root { background: #dbeefa; color: #142e47; --line: #142e4726; }
body { background: #dbeefa; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.hero { position: relative; width: min(100% - 96px, 1180px); padding: 18px 0 54px; text-align: center; }
.eyebrow { margin: 6px 0 14px; }
h1 { font-size: clamp(100px, 19vw, 260px); font-weight: 800; letter-spacing: -.06em; line-height: .94; margin: 0 0 20px; }
h1 span { color: #dc683b; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 790px; max-width: 100%; margin: 0 auto; gap: 50px; text-align: left; }
.mascot { height: 310px; position: relative; display: grid; place-items: center; }
.mascot::before { content: ''; width: 290px; height: 290px; border-radius: 50%; background: #c0ddf0; position: absolute; }
.mascot img { width: 231px; height: 231px; border-radius: 26%; transform: rotate(-9deg); box-shadow: 10px 14px 0 #193c5814; position: relative; }
.callout { position: absolute; left: -4px; top: 28px; background: #f9c588; color: #532d17; border: 1px solid #dfab6d; border-radius: 50%; padding: 19px 17px; font-size: 11px; line-height: 1.35; font-weight: 700; letter-spacing: .07em; text-align: center; transform: rotate(-12deg); }
.song { position: absolute; right: -2px; top: 32px; font-size: 42px; transform: rotate(12deg); color: #517893; }
h2 { font-size: 33px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 14px; font-weight: 750; }
.intro { max-width: 290px; font-size: 17px; line-height: 1.55; margin: 0 0 25px; color: #425b6e; }
.platforms { color: #425b6e; }
.footer { color: #425b6e; }
@media(max-width: 900px) and (min-width: 651px) { .hero-bottom { gap: 20px; } .mascot img { width: 200px; height: 200px; } .mascot::before { width: 240px; height: 240px; } .callout { left: -12px; } .song { right: 0; } }
@media(max-width: 650px) {
 .hero { width: calc(100% - 40px); padding: 10px 0 30px; }
 .eyebrow { font-size: 9px; margin-bottom: 11px; }
 h1 { font-size: clamp(96px, 24vw, 150px); margin-bottom: 0; }
 .hero-bottom { display: flex; flex-direction: column; gap: 3px; text-align: center; }
 .mascot { height: 198px; width: 250px; }
 .mascot::before { width: 172px; height: 172px; }
 .mascot img { width: 144px; height: 144px; border-radius: 26%; box-shadow: 7px 9px 0 #193c5814; }
 .callout { font-size: 9px; padding: 14px 11px; top: 29px; left: 3px; }
 .song { font-size: 29px; right: 14px; top: 27px; }
 h2 { font-size: 27px; margin-bottom: 10px; }
 .intro { font-size: 15px; max-width: 265px; margin: 0 auto 20px; }
 .downloads { justify-content: center; }
 .platforms { margin-top: 12px; }
}

[data-random-tagline] { line-height: 1.5; min-height: 1.5em; }
@media(max-width: 650px) { [data-random-tagline] { min-height: 3em; display: grid; place-items: center; } }

.tagline-row { position: relative; width: min(100%, 520px); margin: 0 auto; }
[data-random-tagline] { padding-inline: 28px; }
[data-random-tagline].is-changing { animation: tagline-wipe-out 220ms ease-in both; }
[data-random-tagline].is-arriving { animation: tagline-spring-in 680ms linear both; }
@keyframes tagline-wipe-out {
  from { clip-path: inset(0); transform: translateX(0); }
  to { clip-path: inset(0 0 0 100%); transform: translateX(6px); }
}
@keyframes tagline-spring-in {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-12px) scaleX(.98); }
  52% { clip-path: inset(0); transform: translateX(7px) scaleX(1.025); }
  72% { clip-path: inset(0); transform: translateX(-4px) scaleX(.99); }
  88% { clip-path: inset(0); transform: translateX(2px) scaleX(1.005); }
  100% { clip-path: inset(0); transform: translateX(0) scaleX(1); }
}
@media(prefers-reduced-motion: reduce) { [data-random-tagline].is-changing, [data-random-tagline].is-arriving { animation: none; } }