* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background: #16171a;
  color: #ebe8e1;
  font-family: 'SF Pro Rounded', ui-rounded, 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  display: flex;
  justify-content: center;
}
main { width: 100%; max-width: 360px; padding: 64px 16px; }
.mark { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 28px; color: #a9a69f; }
form { display: grid; gap: 10px; }
button, .key {
  font: inherit;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  color: #ebe8e1;
  background: #26272c;
  box-shadow: 0 3px 0 #121315;
}
button:focus-visible, .key:focus-visible { outline: 2px solid #f2b544; outline-offset: 2px; }
button, .key { font-weight: 700; background: #f2b544; color: #16171a; cursor: pointer; }
.key { display: flex; align-items: center; justify-content: center; text-decoration: none; }
button:active, .key:active { transform: translateY(2px); box-shadow: 0 1px 0 #121315; }
.note { display: none; margin: 14px 0 0; font-size: 14px; color: #ff9b8a; }
.note:target { display: block; }