:root {
  --teal: #0b7a75;
  --teal-dark: #075a56;
  --ink: #142021;
  --muted: #5b6b6c;
  --bg: #f4faf9;
  --card: #ffffff;
  --line: #d7e4e3;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e6f0ef; --muted: #9fb2b1; --bg: #0f1717; --card: #172322; --line: #2a3a39; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 480px;
  padding: 0 16px 32px;
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
header { padding: 16px 0 8px; }
.brand { color: var(--teal); font-weight: 800; font-size: 20px; text-decoration: none; }
h1 { font-size: 24px; margin: 4px 0; }
.muted { color: var(--muted); }
.code { font-size: 40px; font-weight: 900; letter-spacing: 4px; margin: 16px 0 0; }
.button {
  display: block;
  width: 100%;
  margin: 16px 0;
  padding: 16px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--teal); color: #fff; }
.button.primary:active { background: var(--teal-dark); }
.map { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--line); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1; }
/* 1px overlap hides hairline seams between scaled tiles. */
.tiles img { display: block; width: calc(100% + 1px); height: calc(100% + 1px); }
.pin {
  position: absolute;
  width: 20px; height: 20px;
  margin: -20px 0 0 -10px;
  border-radius: 50% 50% 50% 0;
  background: #e53935;
  border: 3px solid #fff;
  transform: rotate(-45deg);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.map figcaption { position: absolute; right: 4px; bottom: 2px; font-size: 11px; color: #333; background: rgba(255,255,255,.8); padding: 0 4px; }
dl { margin: 16px 0; }
dl > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
dt { font-size: 13px; color: var(--muted); }
dd { margin: 0; }
footer { margin-top: 24px; font-size: 13px; text-align: center; }