/* Homepage identity. Shared by the site, game and generated documentation. */
@font-face {
  font-family: 'Press Start 2P';
  src: url('./fonts/press-start-2p.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --font-display: 'Press Start 2P', monospace;
  --font-ui: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --brand-ground: oklch(14% .014 210);
  --brand-stone: oklch(19% .018 210);
  --brand-paper: oklch(91% .028 88);
  --brand-muted: oklch(73% .024 160);
  --brand-gold: oklch(79% .093 81);
  --brand-edge: #354744;
  --brand-inset: #263431;
  --brand-corner: #88764e;
  --brand-face: linear-gradient(145deg, #1b292a, #10191c 65%);
  --brand-frame: inset 0 0 0 4px #0b1417, inset 0 0 0 5px var(--brand-inset), 0 12px 32px #03090b55;
  --brand-selected: linear-gradient(145deg, #303a2e, #182520 75%);
  --brand-sprite: radial-gradient(ellipse at center, #7f96732c, transparent 68%), linear-gradient(#7c95780a 1px, transparent 1px), linear-gradient(90deg, #7c95780a 1px, transparent 1px);
  --brand-corners: linear-gradient(var(--brand-corner), var(--brand-corner)) left top / 18px 2px no-repeat,
    linear-gradient(var(--brand-corner), var(--brand-corner)) left top / 2px 18px no-repeat,
    linear-gradient(var(--brand-corner), var(--brand-corner)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--brand-corner), var(--brand-corner)) right bottom / 2px 18px no-repeat;
  --brand-ease: cubic-bezier(.22, 1, .36, 1);
}
.brand-emblem {display:block;max-width:100%;height:auto;object-fit:contain}
.brand-frame {position:relative;border:1px solid var(--brand-edge);border-radius:0;background:var(--brand-face);box-shadow:var(--brand-frame)}
.brand-frame::before {content:'';position:absolute;inset:-1px;pointer-events:none;background:var(--brand-corners);z-index:1}