*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--desk-bg);
  min-height: 100vh;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; display: block; filter: var(--icon-rim); }

kbd {
  font-family: var(--mono); font-size: 10.5px; padding: 0 4px;
  border: 1px solid var(--lo-deep); border-radius: var(--r-box);
  background: var(--grad-key); box-shadow: inset 0 -1px 0 var(--etch);
}

@keyframes swapin { from { opacity: 0.25; transform: translateY(2px); } to { opacity: 1; transform: none; } }