:root {
  color-scheme: light;
  --red: #ee1c25;
  --red-dark: #b7111c;
  --ink: #241f1e;
  --muted: #796e6a;
  --gold: #e5c881;
  --warm: #faf7f3;
}
* { box-sizing: border-box; }
html { background: var(--warm); }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shell { width: min(100%, 650px); min-height: 100vh; margin: auto; padding: max(24px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom)); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 2px 22px; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: #fff; font-size: 18px; font-weight: 750; background: var(--red); box-shadow: 0 5px 13px rgba(170, 18, 28, .18); }
.brand-name { font-size: 17px; font-weight: 750; letter-spacing: .02em; }
.brand-caption { margin-left: auto; color: #b7a8a0; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.hero { position: relative; min-height: 225px; overflow: hidden; padding: 28px 27px; border-radius: 28px; color: #fff; background: linear-gradient(130deg, #a70e19, var(--red) 56%, #ed3c3d); box-shadow: 0 16px 32px rgba(141, 18, 28, .18); }
.hero::after { content: ""; position: absolute; right: -70px; bottom: -124px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.hero-glow { position: absolute; right: 28px; top: -89px; width: 214px; height: 214px; border-radius: 50%; background: radial-gradient(circle, rgba(255,227,181,.28), transparent 69%); }
.eyebrow { position: relative; z-index: 1; margin: 0 0 16px; color: #ffdfac; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { position: relative; z-index: 1; max-width: 400px; margin: 0; font-size: clamp(26px, 6.2vw, 34px); line-height: 1.25; font-weight: 780; letter-spacing: -.02em; }
.hero-copy { position: relative; z-index: 1; max-width: 370px; margin: 14px 0 0; color: #ffece4; font-size: 13px; line-height: 1.7; }
.hero-orbit { position: absolute; right: 25px; bottom: 11px; display: flex; gap: 2px; color: rgba(255,232,195,.14); font-size: 74px; font-weight: 800; transform: rotate(-13deg); }
.card { margin-top: 16px; padding: 23px; border: 1px solid #f0e8e1; border-radius: 25px; background: #fff; box-shadow: 0 9px 26px rgba(71,39,32,.045); }
.section-heading { display: flex; align-items: center; gap: 12px; }
.section-icon { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #f1d8cf; border-radius: 11px; color: var(--red); background: #fff8f5; font-size: 12px; font-weight: 760; }
.section-kicker { margin: 0 0 2px; color: #b68c81; font-size: 10px; font-weight: 760; letter-spacing: .15em; }
h2 { margin: 0; font-size: 18px; font-weight: 750; }
.helper, .microcopy, .footnote { color: var(--muted); font-size: 12px; line-height: 1.7; }
.helper { margin: 15px 0 16px; }
.code-row { display: flex; align-items: center; min-height: 68px; padding: 10px; border: 1px solid #f1e8e1; border-radius: 17px; background: #fbf8f5; }
.invitation-code { flex: 1; padding-left: 13px; color: #8e1e24; font-size: 25px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.copy-button { flex: none; min-height: 40px; padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: var(--red); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.copy-button:disabled { color: #a8a19e; background: #ebe7e3; cursor: default; }
.microcopy { min-height: 17px; margin: 9px 2px 0; }
.download-status { margin: 20px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.download-button { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; border-radius: 16px; color: #fff; background: var(--red); font-size: 15px; font-weight: 750; text-align: center; text-decoration: none; box-shadow: 0 8px 15px rgba(210, 24, 36, .18); }
.download-button:hover { background: var(--red-dark); }
.download-button.disabled { color: #aaa19d; background: #ebe7e3; box-shadow: none; cursor: not-allowed; }
.release-facts { display: grid; gap: 10px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #f0e9e4; }
.release-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.release-facts dt { color: #948782; }
.release-facts dd { margin: 0; color: #4e403c; font-weight: 650; text-align: right; }
.release-facts .hash-row { align-items: start; }
.hash-row dd { max-width: 76%; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; line-height: 1.55; }
.footnote { margin: 22px 8px 0; text-align: center; }
footer { padding: 25px 0 3px; color: #b5aaa4; font-size: 11px; text-align: center; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 360px) { .shell { padding-inline: 14px; } .hero { padding: 25px 22px; } .card { padding: 20px; } .invitation-code { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
