:root {
  color-scheme: light;
  --ink: #332823;
  --gold: #b88b45;
  --paper: #fffaf1;
  --muted: #776c62;
}

* { box-sizing: border-box; }

body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 32px 18px;
  place-items: center;
  color: var(--ink);
  background: linear-gradient(145deg, #f8eddb, #fffdf9 55%, #f1dfc4);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  width: min(100%, 620px);
  padding: clamp(25px, 7vw, 52px);
  border: 1px solid #d8c29b;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 20px 60px #4834231c;
}

.brand { text-align: center; }
.mark { display: grid; width: 64px; height: 64px; margin: 0 auto 16px; place-items: center; border-radius: 21px; color: #f3d69f; background: var(--ink); font-size: 29px; font-weight: 750; }
.eyebrow { margin: 0; color: var(--gold); font-size: .76rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 4px 0 6px; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1; letter-spacing: -.05em; }
.lead { margin: 0 0 25px; color: var(--muted); }
.release { padding: 19px; border: 1px solid #e8d9bd; border-radius: 18px; background: #fff; text-align: center; }
.release strong { display: block; margin: 7px 0 4px; }
.release p:not(.eyebrow) { margin: 0; color: var(--muted); }
.checksum { overflow-wrap: anywhere; margin-top: 9px !important; font-size: .78rem; }
.download { display: block; margin: 18px 0 28px; padding: 13px 20px; border-radius: 999px; color: #fff; background: #9b958d; font-weight: 750; text-align: center; text-decoration: none; cursor: not-allowed; }
.download[aria-disabled="false"] { color: #fff; background: var(--ink); cursor: pointer; }
h2 { margin: 0 0 8px; font-size: 1.05rem; }
.instructions ol { margin: 0; padding-left: 1.25rem; color: var(--muted); }
.instructions li + li { margin-top: 5px; }
.share { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid #e8d9bd; }
.share p { margin: 0; color: var(--muted); font-size: .92rem; }
.qr { display: block; width: 152px; height: 152px; padding: 8px; border: 1px solid #e8d9bd; border-radius: 12px; background: #fff; }
.share-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
button { min-height: 42px; padding: 9px 15px; border: 1px solid #d8c29b; border-radius: 999px; color: var(--ink); background: #fff; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #f8eddb; }
#copy-status { color: var(--muted); font-size: .85rem; }
footer { margin-top: 24px; color: var(--muted); font-size: .82rem; text-align: center; }

@media (max-width: 440px) {
  body { padding: 14px 10px; }
  main { padding: 24px 18px; border-radius: 22px; }
  .share { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .share .qr { grid-row: 2; }
  .share-actions { justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
  main { animation: enter .4s ease-out both; }
  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}