:root {
  font: 100%/1.5 "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  color: #132643;
  background: #f7f5ef;
  color-scheme: light;
  --ink: #132643;
  --muted: #4d596a;
  --line: #dddcd4;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #386592; outline-offset: 3px; }
.topbar, main, footer { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar { min-height: 82px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 760; letter-spacing: -.035em; font-size: 1.25rem; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fae6bb; background: var(--ink); font-weight: 740; }
.language { color: var(--ink); background: transparent; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; max-width: 48%; }
.hero { min-height: 570px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(40px, 9vw, 140px); padding: 58px 0 72px; }
h1 { font-size: clamp(3.1rem, 6.6vw, 6.4rem); line-height: .99; letter-spacing: -.08em; margin: 0; font-weight: 710; text-wrap: balance; }
:lang(ja) h1, :lang(ko) h1, :lang(zh-Hant) h1 { letter-spacing: -.05em; line-height: 1.18; font-size: clamp(2.8rem, 5.9vw, 5.4rem); }
.intro { max-width: 34rem; font-size: clamp(1.06rem, 1.6vw, 1.28rem); margin: 24px 0 29px; color: var(--muted); text-wrap: pretty; }
.modes { border: 0; margin: 0 0 19px; padding: 4px; display: inline-flex; border-radius: 11px; background: #eeebe3; max-width: 100%; }
.modes label { display: grid; cursor: pointer; position: relative; }
.modes input { position: absolute; opacity: 0; }
.modes span { padding: 8px 13px; border-radius: 7px; color: var(--muted); font-size: .91rem; font-weight: 610; text-align: center; }
.modes input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px #13264322; }
.modes input:focus-visible + span { outline: 3px solid #386592; }
.dates { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.dates label { display: grid; font-size: .9rem; font-weight: 670; gap: 5px; max-width: 100%; }
.dates input, #email { min-width: 0; background: #fffdf8; color: var(--ink); border: 1px solid #cecec6; border-radius: 8px; min-height: 44px; padding: 8px 11px; }
.dates input { width: clamp(138px, 37vw, 187px); }
.button { color: #fffdf8; background: var(--ink); border: 0; border-radius: 8px; padding: 11px 17px; font-weight: 680; line-height: 1.35; min-height: 44px; }
.button:hover:not(:disabled) { background: #23436c; }
.button:disabled { color: #454f5f; background: #e3e1da; cursor: default; }
#download { margin-top: 21px; }
#download span { margin-left: 7px; }
.error { color: #a52820; margin: 8px 0 0; font-size: .91rem; }
.poster { position: relative; display: grid; place-items: center; border-radius: 28px; background: #eae6db; padding: clamp(18px, 3vw, 40px); }
.poster canvas { display: block; width: 100%; max-width: 407px; border-radius: 11px; box-shadow: 0 15px 32px #13264325; }
#preview-label { position: absolute; bottom: 4px; margin: 0; color: var(--muted); font-size: .75rem; }
.waitlist { padding: 36px 0; border-block: 1px solid var(--line); display: grid; grid-template-columns: 1fr minmax(280px, 410px); align-items: center; gap: 32px; }
.waitlist h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); letter-spacing: -.035em; margin: 0; }
.waitlist p { color: var(--muted); margin: 5px 0 0; }
.waitlist form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.waitlist form p { grid-column: 1 / -1; font-size: .9rem; }
.waitlist form p.error { color: #a52820; }
.store-link { justify-self: end; text-decoration: none; }
footer { min-height: 75px; color: var(--muted); font-size: .88rem; }
footer a { color: inherit; }
.privacy { max-width: 720px; padding-block: 48px; }
.privacy h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); }
.privacy p { max-width: 65ch; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

@media (max-width: 720px) {
  .topbar, main, footer { width: calc(100% - 40px); }
  .topbar { min-height: 67px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .intro { margin: 16px 0 22px; }
  .poster { max-width: 490px; width: 100%; margin-inline: auto; }
  .waitlist { grid-template-columns: 1fr; gap: 14px; padding-block: 26px; }
  .store-link { justify-self: start; }
}

@media (max-width: 360px) {
  .waitlist form { grid-template-columns: 1fr; }
}