:root {
  --px-bg: #171715;
  --px-panel: #24231f;
  --px-panel-2: #302d27;
  --px-ink: #eee9dc;
  --px-muted: #aaa394;
  --px-line: #575144;
  --px-accent: #d6a94f;
  --px-accent-dark: #785c2b;
  --px-cyan: #6bb9ad;
  --px-danger: #bb6659;
  --px-unit: 2px;
  --px-fast: 120ms;
  --px-normal: 240ms;
  --px-shadow: 4px 4px 0 #0e0e0d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }
button, select { font: inherit; }
button { touch-action: manipulation; }

.pixel-panel {
  border: 2px solid var(--px-line);
  background: var(--px-panel);
  box-shadow: var(--px-shadow);
}

.pixel-button {
  min-height: 42px;
  border: 2px solid var(--px-line);
  border-radius: 2px;
  padding: 0 14px;
  background: var(--px-panel-2);
  color: var(--px-ink);
  box-shadow: 3px 3px 0 #0e0e0d;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--px-fast) steps(2, end), background-color var(--px-fast) steps(2, end), color var(--px-fast) steps(2, end);
}

.pixel-button:hover,
.pixel-button:focus-visible {
  border-color: var(--px-accent);
  background: var(--px-accent);
  color: #211b11;
  outline: 2px solid #0e0e0d;
  outline-offset: 2px;
}

.pixel-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0e0e0d; }
.pixel-button:disabled { cursor: not-allowed; opacity: .45; }
.pixel-button--primary { border-color: #9c7a37; background: var(--px-accent); color: #211b11; }
.pixel-button--icon { display: grid; width: 42px; padding: 0; place-items: center; font-size: 19px; }

.pixel-select {
  width: 100%;
  min-height: 40px;
  border: 2px solid var(--px-line);
  border-radius: 2px;
  padding: 0 34px 0 10px;
  background: var(--px-panel-2);
  color: var(--px-ink);
  font-weight: 700;
}

.pixel-select:focus-visible { border-color: var(--px-accent); outline: 2px solid #0e0e0d; outline-offset: 2px; }

.pixel-label { display: grid; gap: 6px; color: var(--px-muted); font-size: 11px; font-weight: 800; }
.pixel-kicker { margin: 0; color: var(--px-accent); font: 800 10px/1.2 "Courier New", monospace; letter-spacing: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pixel-button { transition: none; }
}