@font-face {
  font-family: ArcMontserrat;
  src: url('/assets/ui/brand/Montserrat-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --arc-fog: #ecedea;
  --arc-teal: #154545;
  --arc-panel: #143f40;
  --arc-mint: #a4e2ce;
  --arc-muted: #bacdc7;
  --arc-line: #507773;
  --arc-deep: #0b2e31;
  font-family: ArcMontserrat, Montserrat, sans-serif;
  font-weight: 600;
  color: var(--arc-fog);
}
button, input, a { font: inherit; }
a { color: inherit; }
.hud { color: var(--arc-fog); font-size: 13px; font-weight: 600; gap: 24px; text-shadow: 0 1px 2px #154545; }
.hud strong { font-weight: 600; }
.hud .best { color: #d5dfd8; }
.key-control { font-family: ArcMontserrat, Montserrat, sans-serif; font-size: 11px; font-weight: 600; line-height: 16px; }
.key-label { text-shadow: 0 1px #cdd8d0; }
.key-hint { font-size: 9px; line-height: 16px; }
/* Retained for any brand-rendered text used by future result surfaces. */
.brand-pixel { position: relative; }
.brand-pixel-rendered { color: transparent !important; text-shadow: none !important; }
.brand-pixel-canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; image-rendering: pixelated; }
@media (max-width: 480px) { .hud { font-size: 12px; gap: 14px; } }
@media (forced-colors: active) {
  .brand-pixel-rendered { color: CanvasText !important; }
  .brand-pixel-canvas { display: none; }
}