:root { font-family: "Arial Rounded MT Bold","Microsoft YaHei",system-ui,sans-serif; color: #6e1e00; }
* { box-sizing: border-box; }
html { background: #ffcb14; }
body { min-width: 320px; margin: 0; overflow-x: hidden; }
button,a { font: inherit; }
.gold-page { position: relative; display: grid; min-height: 100svh; overflow: hidden; grid-template-rows: auto 1fr auto; isolation: isolate; background: radial-gradient(circle at 50% 30%,#fff995 0 5%,#ffe32d 34%,#ffb407 70%,#f48200 100%); }
.gold-page::before { content:""; position:absolute; inset:0; z-index:-3; opacity:.24; background-image:radial-gradient(circle,#fff 0 2px,transparent 3px); background-size:74px 74px; transform:rotate(9deg) scale(1.2); }
.glow { position:absolute; z-index:-2; width:95vw; aspect-ratio:1; top:24%; left:50%; transform:translateX(-50%); border-radius:50%; background:rgb(255 255 235 / 65%); filter:blur(42px); }
.hero-art { position:absolute; z-index:-1; width:min(1000px,150vw); max-width:none; height:auto; left:50%; bottom:-2px; transform:translateX(-50%); pointer-events:none; }
.campaign-copy { position:relative; z-index:2; width:min(680px,calc(100% - 32px)); margin:0 auto; padding-top:clamp(26px,5vh,58px); text-align:center; }
.brand { display:inline-flex; min-height:30px; align-items:center; margin:0 0 9px; padding:0 14px; border:1px solid rgb(119 42 0 / 26%); border-radius:999px; background:rgb(255 255 255 / 32%); font-size:.74rem; font-weight:900; letter-spacing:.16em; }
.eyebrow { margin:0 0 2px; font-size:clamp(.9rem,3.7vw,1.2rem); font-weight:950; letter-spacing:.08em; }
h1 { margin:0; color:#9e2500; font-size:clamp(3.3rem,17vw,7.7rem); line-height:.93; letter-spacing:-.08em; text-shadow:0 4px 0 #ffef71,0 10px 22px rgb(145 44 0 / 22%); }
.slogan { display:inline-flex; max-width:100%; min-height:42px; align-items:center; gap:10px; margin:14px 0 0; padding:0 18px; border:2px solid #ee8c00; border-radius:999px; background:rgb(255 255 255 / 42%); color:#ad3a00; font-size:clamp(.85rem,4vw,1.2rem); white-space:nowrap; }
.slogan span { color:#f49b00; }
.action-zone { position:relative; z-index:3; align-self:end; width:min(620px,calc(100% - 26px)); margin:0 auto; padding:0 0 max(18px,env(safe-area-inset-bottom)); text-align:center; }
.install-button { position:relative; display:flex; width:100%; min-height:76px; align-items:center; justify-content:center; gap:13px; border:3px solid #fff5a2; border-radius:24px; background:linear-gradient(#ffe45d,#ffad0b); color:#702000; box-shadow:0 8px 0 #c85c00,0 18px 38px rgb(102 35 0 / 34%),inset 0 2px 0 #fff; cursor:pointer; font-size:clamp(1rem,5vw,1.55rem); }
.install-button:active { transform:translateY(4px); box-shadow:0 4px 0 #c85c00,0 12px 28px rgb(102 35 0 / 30%); }
.install-button:focus-visible { outline:4px solid #6e1e00; outline-offset:4px; }
.install-icon { position:relative; display:grid; width:48px; aspect-ratio:1; place-items:center; border-radius:14px; background:#ec6a00; color:#fff; font-size:1.65rem; }.install-icon i { position:absolute; right:-5px; bottom:-4px; display:grid; width:20px; aspect-ratio:1; place-items:center; border:2px solid #fff; border-radius:50%; background:#ffad0b; font-size:.7rem; font-style:normal; }
.tap { position:absolute; right:5%; bottom:-27px; color:#fff; font-size:3.5rem; filter:drop-shadow(0 4px 2px rgb(83 22 0 / 38%)); transform:rotate(-18deg); }
footer { margin-top:18px; color:#fff; font-size:.76rem; line-height:1.5; text-shadow:0 2px 8px rgb(87 28 0 / 70%); } footer p { margin:0; } footer a { color:inherit; text-decoration:none; }
.install-dialog { width:min(520px,calc(100vw - 28px)); padding:0; border:0; border-radius:24px; background:transparent; color:#3b2600; }.install-dialog::backdrop { background:rgb(55 25 0 / 62%); backdrop-filter:blur(5px); }
.dialog-card { padding:28px; border:2px solid #ffdb3b; border-radius:24px; background:#fffaf0; box-shadow:0 24px 80px rgb(68 24 0 / 38%); }.dialog-icon { display:grid; width:52px; aspect-ratio:1; place-items:center; border-radius:16px; background:#ffbd13; font-size:1.8rem; }.dialog-card h2 { margin:15px 0 10px; }.dialog-card p { color:#6e5b38; line-height:1.7; }.dialog-card button { width:100%; min-height:48px; border:0; border-radius:14px; background:#7b2900; color:#fff; cursor:pointer; font-weight:800; }
@media (max-width: 480px) { .gold-page { min-height:844px; } .hero-art { width:174vw; bottom:72px; } .campaign-copy { padding-top:24px; } .action-zone { padding-bottom:20px; } }
@media (max-height: 810px) and (max-width: 480px) { .gold-page { min-height:800px; } h1 { font-size:3.5rem; } .hero-art { width:160vw; bottom:54px; } .slogan { margin-top:8px; } }
@media (min-width: 800px) { .gold-page { min-height:768px; } .campaign-copy { padding-top:36px; } .hero-art { width:min(680px,55vw); bottom:-120px; } .action-zone { width:560px; padding-bottom:20px; } }