:root {
  color-scheme: dark;

  --bg: #10130f;
  --panel: #192017;
  --panel2: #20291e;
  --line: rgba(255,255,255,.12);
  --text: #f5f1e8;
  --muted: #b8b0a1;
  --accent: #e0b75a;
  --good: #78d68b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      #283321 0,
      var(--bg) 48rem
    );

  color: var(--text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.shell {
  width:
    min(
      720px,
      calc(100% - 24px)
    );

  margin: 0 auto;

  padding:
    28px 0 50px;
}

.hero {
  padding:
    12px 4px 22px;
}

.eyebrow {
  margin:
    0 0 8px;

  color:
    var(--accent);

  text-transform:
    uppercase;

  letter-spacing:
    .14em;

  font-size:
    .78rem;

  font-weight:
    900;
}

h1 {
  margin: 0;

  font-size:
    clamp(
      2.4rem,
      8vw,
      4.8rem
    );

  line-height:
    .96;

  letter-spacing:
    -.05em;
}

h2 {
  margin:
    0 0 8px;
}

.intro,
.muted,
.location,
.account-box p {
  color:
    var(--muted);
}

.intro {
  font-size:
    1.05rem;

  line-height:
    1.5;
}

.panel {
  margin-top:
    14px;

  padding:
    22px;

  border:
    1px solid
    var(--line);

  border-radius:
    22px;

  background:
    rgba(
      25,
      32,
      23,
      .94
    );

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.25);
}

.hidden {
  display:
    none !important;
}

.claim-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    10px;

  margin:
    20px 0;
}

.claim-grid div {
  padding:
    14px;

  border:
    1px solid
    var(--line);

  border-radius:
    16px;

  background:
    rgba(
      255,
      255,
      255,
      .05
    );
}

.claim-grid span,
.signed-in-label {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--muted);

  font-size:
    .8rem;
}

.account-box {
  margin-top:
    18px;

  padding:
    18px;

  border-radius:
    18px;

  background:
    var(--panel2);
}

.button {
  display:
    block;

  width:
    100%;

  margin-top:
    10px;

  padding:
    13px 16px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--panel);

  color:
    var(--text);

  font:
    inherit;

  font-weight:
    850;

  text-decoration:
    none;

  text-align:
    center;

  cursor:
    pointer;
}

.button.primary {
  border-color:
    transparent;

  background:
    var(--accent);

  color:
    #19140a;
}

.button:disabled {
  opacity:
    .55;

  cursor:
    wait;
}

.success {
  border-color:
    rgba(
      120,
      214,
      139,
      .35
    );
}

.message {
  min-height:
    1.3rem;

  margin-bottom:
    0;

  color:
    var(--muted);
}

@media (
  max-width: 560px
) {
  .claim-grid {
    grid-template-columns:
      1fr;
  }
}