.pixel-panel,
.pixel-window {
  border: var(--border-pixel) solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.pixel-window__bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-1-5);
  border-bottom: var(--border-pixel) solid var(--line-strong);
  background: var(--panel-soft);
  font-family: var(--font-ticmiro-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pixel-window__dots {
  display: flex;
  gap: 6px;
}

.pixel-window__dots > i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--pixel-black);
  background: var(--cheek-coral);
}

.pixel-window__dots > i:nth-child(2) { background: var(--star-yellow); }
.pixel-window__dots > i:nth-child(3) { background: var(--bag-teal); }
.pixel-window__status { margin-left: auto; color: var(--bag-teal); }
.pixel-window__body { padding: var(--space-3); }
.pixel-window__footer { padding: var(--space-1-5); border-top: var(--border-pixel) solid var(--line-strong); }

.pixel-button,
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: var(--border-pixel) solid var(--pixel-black);
  border-radius: var(--radius-pixel);
  background: var(--panel-soft);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  transition: transform var(--motion-feedback) steps(2, end), box-shadow var(--motion-feedback) steps(2, end);
}

.pixel-button:hover,
.button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pixel-black); }
.pixel-button:active,
.button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--pixel-black); }
.pixel-button:disabled,
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.pixel-button--primary,
.button-primary { background: var(--star-orange); color: var(--pixel-black); }
.pixel-button--secondary { border-color: var(--bag-teal); background: var(--night-800); }
.pixel-button--ghost,
.button-ghost { background: transparent; }
.pixel-button--danger { background: var(--cheek-coral); color: var(--pixel-black); }

.pixel-badge,
.pixel-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-1);
  border: 1px solid currentColor;
  border-radius: var(--radius-pixel);
  font-family: var(--font-ticmiro-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pixel-status::before {
  width: 8px;
  height: 8px;
  content: "";
  background: currentColor;
  box-shadow: 2px 2px 0 var(--pixel-black);
}

.pixel-badge--online,
.pixel-badge--published,
.pixel-status--online { color: var(--bag-teal); }
.pixel-badge--draft,
.pixel-badge--review { color: var(--star-yellow); }
.pixel-badge--archived { color: var(--cream-muted); }
.pixel-badge--error { color: var(--cheek-coral); }

.pixel-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 16px 16px;
}

.pixel-divider { height: 2px; border: 0; background: var(--line-strong); }
.pixel-progress { display: grid; grid-auto-flow: column; gap: 4px; }
.pixel-progress > i { height: 12px; border: 1px solid var(--pixel-black); background: var(--night-700); }
.pixel-progress > i.is-filled { background: var(--bag-teal); }

.pixel-tooltip { border: 1px solid var(--cream); padding: var(--space-1); background: var(--pixel-black); color: var(--cream); box-shadow: var(--shadow-sm); font-family: var(--font-ticmiro-mono); font-size: .72rem; }

.miro-sprite {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--miro-size);
  height: var(--miro-size);
  background-image: url("/assets/miro-sprite.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  image-rendering: pixelated;
}

.miro-sprite--xs { --miro-size: 32px; }
.miro-sprite--sm { --miro-size: 40px; }
.miro-sprite--md { --miro-size: 72px; }
.miro-sprite--lg { --miro-size: 144px; }
.miro-sprite--hero { --miro-size: min(100%, 384px); }

.miro-sprite--idle {
  background-position: 0 0;
  animation: miro-idle 3.1s steps(3, end) infinite;
}

.miro-sprite--walk {
  background-position: 0 100%;
  animation: miro-walk 520ms steps(3, end) infinite;
}

.miro-sprite--blink { background-position: 33.333% 0; }
.miro-sprite--celebrate { background-position: 100% 0; }

.miro-sprite__button {
  display: inline-grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wordmark-copy {
  display: grid;
  gap: 3px;
}

.wordmark-copy b {
  font-family: var(--font-ticmiro-mono);
  font-size: .78rem;
  letter-spacing: .16em;
}

.wordmark-copy small {
  color: var(--ink-muted);
  font-family: var(--font-ticmiro-mono);
  font-size: .5rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.mascot-stage > .miro-sprite {
  width: 100%;
  height: 100%;
}

@keyframes miro-idle {
  to { background-position: 100% 0; }
}

@keyframes miro-walk {
  to { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .miro-sprite,
  .miro-sprite--idle,
  .miro-sprite--walk {
    animation: none !important;
    background-position: 0 0;
  }
}