.download-page { display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 24px calc(16px + env(safe-area-inset-bottom, 0px)); overflow: hidden; background: radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.9), transparent 57%); }
.download-brand { display: flex; min-height: 34px; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { display: block; width: 34px; height: 34px; border-radius: 10px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.brand-copy strong { overflow: hidden; max-width: 170px; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: .5px; }
.brand-copy span { color: var(--muted); font-family: Arial, sans-serif; font-size: 8px; letter-spacing: 2px; }
.brand-edition { margin-left: auto; border-left: 1px solid var(--line); padding-left: 12px; color: var(--muted); font-size: 9px; letter-spacing: 1px; white-space: nowrap; }
.download-heading { position: relative; z-index: 1; margin-top: 29px; text-align: center; }
.download-heading .eyebrow { color: var(--gold-ink); font-size: 7px; letter-spacing: 1.8px; }
.download-heading h1 { margin: 11px 0 10px; font-size: clamp(29px, 10.5vw, 44px); font-style: italic; font-weight: 900; line-height: 1.12; letter-spacing: -2px; overflow-wrap: anywhere; }
.download-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; letter-spacing: 1px; }
.mascot-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; isolation: isolate; min-height: clamp(230px, 40svh, 365px); margin: 12px -10px 0; }
.mascot-wordmark { position: absolute; z-index: -2; top: 25%; left: 50%; color: #e9e9e4; font-family: Arial, sans-serif; font-size: clamp(100px, 36vw, 160px); font-weight: 900; line-height: .85; letter-spacing: -10px; transform: translateX(-50%); }
.mascot-wordmark span { display: block; margin-top: 13px; padding-left: 6px; color: #deded7; font-size: 14px; font-weight: 500; letter-spacing: 7px; text-align: center; }
.fox-character { position: relative; display: block; width: clamp(245px, 39svh, 340px); max-width: 100%; margin-top: 7px; padding: 0; border: 0; background: transparent; line-height: 0; filter: drop-shadow(0 17px 15px rgba(128,90,41,.12)); }
.mascot-image, .mascot-head img { display: block; width: 100%; height: auto; object-fit: contain; }
.mascot-head { position: absolute; inset: 0; clip-path: inset(0 0 48% 0); transform-origin: 50% 52%; pointer-events: none; }
.is-head-pulsing .mascot-head { animation: fox-head-pulse .48s ease-in-out; }
.mascot-floor { position: absolute; z-index: -1; bottom: 10%; left: 50%; width: 68%; height: 18px; border-radius: 50%; background: rgba(176,157,117,.19); filter: blur(9px); transform: translateX(-50%); }
.mascot-orbit { position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 66%; border: 1px solid rgba(181,154,98,.22); border-radius: 50%; transform: translate(-50%,-50%) rotate(-21deg); }
.orbit-two { width: 94%; height: 44%; border-color: rgba(181,154,98,.11); transform: translate(-50%,-50%) rotate(23deg); }
.mascot-spark { position: absolute; color: #b59a62; font-size: 20px; animation: spark-glow 4s ease-in-out infinite; }
.spark-one { top: 17%; right: 6%; }
.spark-two { bottom: 29%; left: 7%; font-size: 27px; animation-delay: 1.5s; }
.mascot-caption { position: absolute; bottom: 3%; left: 0; width: 100%; color: var(--muted); font-size: 9px; letter-spacing: 2px; text-align: center; }
.download-actions { margin-top: 19px; flex-shrink: 0; }
.download-button { padding: 15px 18px; min-height: 54px; font-size: 16px; }
.download-button > .icon:first-child { margin-right: auto; }
.download-platform-note { margin: 11px 0 15px; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-align: center; }
.register-entry { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--muted); }
.register-entry strong { color: var(--gold-ink); font-weight: 600; }
.register-entry .icon { margin-left: 2px; width: 14px; height: 14px; flex-basis: 14px; color: var(--gold-ink); }
.profile-help { margin-top: 17px; padding: 13px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.9; }
.profile-help summary { color: var(--gold-ink); cursor: pointer; }
.profile-help p { margin: 8px 0 0; }
.profile-help > a { display: inline-block; margin-top: 7px; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.download-footer { margin-top: 25px; flex-shrink: 0; }
.download-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px 13px; margin-bottom: 15px; color: var(--muted); font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; }
.footer-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: .7px; }
.footer-line > span:first-child { font-family: Arial, sans-serif; letter-spacing: 2px; }
@keyframes fox-head-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.055); } }
@keyframes spark-glow { 50% { opacity: .4; transform: scale(.8); } }
@media (max-height: 720px) {
    .download-page { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
    .download-heading { margin-top: 20px; }
    .download-heading h1 { font-size: 35px; }
    .mascot-stage { min-height: 218px; margin-top: 2px; }
    .fox-character { width: 230px; }
    .download-actions { margin-top: 14px; }
    .download-footer { margin-top: 21px; }
}
@media (prefers-color-scheme: dark) {
    .download-page { background: radial-gradient(ellipse at 50% 42%, rgba(76,66,40,.24), transparent 58%); }
    .mascot-wordmark { color: #34342e; }
    .mascot-wordmark span { color: #46443a; }
}