:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color: #1c2b33; background: #fff; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
main { min-height: calc(100svh - 52px); padding: 32px 24px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand-title { margin: 0; color: #0866ff; font-size: clamp(44px, 5vw, 58px); font-weight: 750; line-height: 1.1; letter-spacing: -.055em; }
.scene-wrap { width: min(680px, 100%, 80svh); margin: -10px 0 -28px; }
.scene { display: block; width: 100%; height: auto; mask-image: radial-gradient(ellipse 49% 49% at 50% 50%, #000 54%, transparent 98%); }
.content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; position: relative; }
h2 { margin: 0; color: #1c2b33; font-size: clamp(27px, 3.5vw, 36px); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; }
h2 span { color: #0866ff; }
.reward-copy { margin: 12px 0 25px; color: #657481; font-size: 1rem; line-height: 1.65; font-weight: 400; }
.reward-copy strong { font-weight: 500; }
.contract { width: min(100%, 480px); }
.ca-label { margin: 0 0 9px; color: #657481; font-size: .8125rem; font-weight: 500; }
button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; width: 100%; margin: 0; padding: 13px 18px; border: 1px solid #e3e9ee; border-radius: 14px; background: #f7f9fb; color: #1c2b33; cursor: pointer; transition: background .18s, border-color .18s; }
button:hover:enabled { background: #eef4fc; border-color: #abcaff; }
button:disabled { cursor: default; color: #7c8995; }
#address { font: 400 .875rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
#status { margin: 8px 0 0; font-size: .8125rem; color: #0866ff; }
#status:empty { display: none; }
.actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 23px; font-size: .875rem; font-weight: 600; line-height: 1.4; border-radius: 100px; text-decoration: none; transition: background .18s, box-shadow .18s; }
.launch-link { background: #0866ff; color: #fff; box-shadow: 0 3px 8px #0866ff14; }
.launch-link:hover { background: #0057df; box-shadow: 0 4px 14px #0866ff24; }
.social { background: #f0f3f6; color: #263849; }
.social:hover { background: #e5ebf1; }
button:focus-visible, a:focus-visible { outline: 3px solid #0866ff; outline-offset: 4px; }
footer { padding: 18px 20px 22px; text-align: center; color: #82909c; font-size: .75rem; }
footer span { margin: 0 9px; }
@media (max-width: 600px) { main { padding: 30px 20px 8px; min-height: auto; } .brand-title { font-size: 46px; } .scene-wrap { width: calc(100% + 32px); max-width: none; margin: 0 -16px -9px; } .reward-copy { font-size: .9375rem; } .actions { width: 100%; gap: 8px; } .actions a { padding: 12px 17px; } }
@media (prefers-reduced-motion: reduce) { button, .actions a { transition: none; } }