:root {
  --bg-primary: #1F2022;
  --accent-primary: #62D5B3;
  --accent-secondary: #E74325;
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8B8;
 color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text-primary); background: var(--bg-primary); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: var(--bg-primary); min-height: 100svh; }
main { width: min(100% - 48px, 400px); margin: auto; padding: max(20px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); }
header { display: flex; justify-content: space-between; align-items: center; }
.brand { font-size: 11px; letter-spacing: .28em; font-weight: 750; color: var(--text-secondary); }
.badge { border: 1px solid #FFFFFF26; padding: 5px 8px; border-radius: 7px; font-size: 10px; color: var(--text-secondary); }
.intro { text-align: center; }
.app-art { position: relative; height: clamp(150px, 29svh, 230px); display: grid; place-items: center; isolation: isolate; }
.app-art::before { content: ""; position: absolute; width: 210px; height: 160px; background: radial-gradient(ellipse, #62D5B329, transparent 70%); filter: blur(16px); z-index: -1; }
.eyebrow { color: var(--accent-primary); font-size: 10px; font-weight: 650; letter-spacing: .2em; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 9vw, 42px); line-height: 1.07; letter-spacing: -.045em; margin: 0 auto 14px; max-width: 330px; font-weight: 720; text-wrap: balance; }
p { line-height: 1.5; }
.description { color: var(--text-secondary); font-size: 15px; max-width: 280px; margin: 0 auto 26px; text-wrap: balance; }
button { font: inherit; cursor: pointer; }
#continue { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; min-height: 60px; padding: 16px 20px; border: 1px solid var(--accent-primary); border-radius: 16px; background: var(--accent-primary); color: var(--bg-primary); font-size: 15px; font-weight: 800; letter-spacing: .045em; box-shadow: 0 8px 28px #62D5B318, inset 0 1px #FFFFFF40; }
#continue .cta-arrow { font-size: 23px; line-height: 1; font-weight: 400; }
#continue[href]:hover { background: var(--accent-primary); box-shadow: 0 8px 28px #62D5B330, inset 0 0 0 1px #FFFFFF60; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 5px; }
.note { color: var(--text-secondary); font-size: 11px; margin: 12px 0 0; }
#help { margin-top: 10px; }
summary { list-style: none; width: fit-content; margin: auto; padding: 12px 20px; min-height: 44px; color: var(--text-secondary); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
#help[open] { padding-bottom: 12px; }
#status { color: var(--text-secondary); font-size: 12px; }
#status:empty { display: none; }
#fallback { background: #FFFFFF05; border: 1px solid #62D5B330; border-radius: 18px; margin-top: 12px; padding: 18px; }
h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.02em; }
#instructions { color: var(--text-secondary); font-size: 13px; }
.secondary { width: 100%; min-height: 44px; border: 1px solid #FFFFFF30; border-radius: 10px; background: transparent; color: var(--text-primary); font-size: 13px; padding: 10px; }
.secondary:hover { background: #62D5B312; }
a { display: block; padding: 15px 0; color: var(--accent-primary); font-size: 13px; text-align: center; text-underline-offset: 4px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (max-height: 650px) { main { padding-top: 14px; padding-bottom: 10px; } .app-art { height: 145px; } .description { margin-bottom: 20px; } h1 { font-size: 32px; } }
@media (min-width: 600px) and (min-height: 750px) { main { padding-top: 42px; } .app-art { height: 260px; } }

.stay { margin-top: 16px; min-height: 48px; color: var(--text-secondary); font-size: 12px; border-color: #FFFFFF30; }
#stay-note { max-width: 300px; margin: 10px auto 0; }
@media (max-height: 650px) { .app-art { height: 120px; } .stay { margin-top: 12px; } }

.hero-image {
  display: block;
  width: auto;
  height: 80%;
  max-width: min(80%, 256px);
  max-height: 208px;
  object-fit: contain;
  transform-origin: center center;
  animation: slowRotate 20s linear infinite;
  will-change: transform;
}
@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; will-change: auto; }
}

/* Decorative only: real clicks remain exclusively controlled by script.js. */
.cta-attention { position: relative; isolation: isolate; }
.cta-attention #continue { animation: ctaTapPress 3.5s ease-in-out infinite; transform-origin: center; }
.tap-hand, .tap-ripple { position: absolute; pointer-events: none; user-select: none; }
.tap-hand { z-index: 2; left: calc(81% - 12px); top: calc(50% - 5px); width: 32px; height: 38px; opacity: 0; transform-origin: 40% 12%; animation: handTap 3.5s ease-in-out infinite; }
.tap-ripple { z-index: 1; left: calc(81% - 12px); top: calc(50% - 12px); width: 24px; height: 24px; border: 1px solid #FFFFFF99; border-radius: 50%; opacity: 0; animation: tapRipple 3.5s ease-out infinite; }
@keyframes handTap {
  0%, 12% { opacity: 0; transform: translate(10px, 18px) rotate(-12deg); }
  28% { opacity: .9; transform: translate(0, 0) rotate(-5deg); }
  36% { opacity: .9; transform: translate(0, 2px) rotate(-5deg) scale(.94); }
  44% { opacity: .9; transform: translate(0, 0) rotate(-5deg); }
  64%, 100% { opacity: 0; transform: translate(10px, 18px) rotate(-12deg); }
}
@keyframes tapRipple {
  0%, 30% { opacity: 0; transform: scale(.4); }
  36% { opacity: .55; transform: scale(.65); }
  56%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes ctaTapPress {
  0%, 28%, 46%, 100% { transform: scale(1); }
  36% { transform: scale(.988); }
}
/* Never compete with an actual user interaction. */
.cta-attention:focus-within #continue, .cta-attention:hover #continue { animation: none; }
.cta-attention:focus-within .tap-hand, .cta-attention:focus-within .tap-ripple,
.cta-attention:hover .tap-hand, .cta-attention:hover .tap-ripple { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cta-attention #continue, .tap-hand, .tap-ripple { animation: none; }
  .tap-hand, .tap-ripple { display: none; }
}

#cta-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
#continue .cta-arrow { flex-shrink: 0; }

/* Native Intent anchor keeps the existing CTA appearance. */
#continue { text-decoration: none; cursor: pointer; }
#continue[aria-disabled="true"] { opacity: .45; cursor: default; }
#continue[aria-disabled="true"]:hover { box-shadow: none; }
#launch-status:empty { display: none; }

/* Compact, secondary promo action keeps the main CTA visually dominant. */
.promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #FFFFFF26; border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; background: #FFFFFF04; text-align: left; }
.promo-code { min-width: 0; }
.promo-code label { display: block; color: var(--text-secondary); font-size: 10px; margin-bottom: 2px; }
#promo-code { display: block; width: 100%; max-width: 150px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font: 750 17px/1.4 system-ui, sans-serif; letter-spacing: .12em; }
#copy-promo { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--accent-primary); font-size: 12px; }
#copy-promo:hover { background: #62D5B312; }
#promo-status { margin: -6px 0 12px; font-size: 11px; color: var(--text-secondary); }
#promo-status:empty { display: none; }
@media (max-height: 750px) { .app-art { height: 120px; } .description { margin-bottom: 16px; } }