:root {
  --paper: #fff5dc;
  --ink: #211b1a;
  --coral: #ff6f59;
  --yellow: #ffd447;
  --blue: #58c7e8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12px 12px, #211b1a12 2px, transparent 2px) 0 0 / 24px 24px,
    var(--paper);
  font: 700 18px/1.45 system-ui, -apple-system, sans-serif;
}
main { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.panel {
  background: #fffdf4;
  border: 4px solid var(--ink);
  border-radius: 28px 19px 25px 20px;
  box-shadow: 7px 8px 0 var(--ink);
  padding: clamp(22px, 5vw, 56px);
}
h1 { font-size: clamp(48px, 12vw, 92px); line-height: .9; margin: 0 0 18px; letter-spacing: -3px; }
h2 { font-size: 32px; margin-top: 40px; }
.splash { color: var(--coral); text-shadow: 3px 3px 0 var(--ink); }
.tag { display: inline-block; background: var(--yellow); border: 3px solid var(--ink); padding: 6px 12px; transform: rotate(-2deg); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.button {
  color: var(--ink); background: var(--blue); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); border-radius: 14px; padding: 12px 18px;
  text-decoration: none;
}
.button.alt { background: #fff; }
.button.disabled {
  background: #e4dccb;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: not-allowed;
  opacity: .7;
}
button.button { font: inherit; cursor: pointer; }
button.button:disabled { cursor: not-allowed; opacity: .55; }
.code { word-break: break-all; padding: 14px; background: #fff; border: 3px dashed var(--ink); }
small, footer { opacity: .72; }
footer { padding-top: 30px; text-align: center; }
a { color: #5a3198; }