/* Pixel identity belongs to display chrome, never artwork/canvas/export fonts. */
:root {
  --ds-font-pixel: "Fusion Pixel 12px Monospaced Simplified Chinese", "MiSans UI", sans-serif;
}

/* Keep continuous reading, values and field labels in the existing MiSans UI. */
body.phase2-workspace :is(.ws-brand strong,.ws-brand-name,.ws-brand-title),
body.phase2-workspace .ws-step-card > h2,
body.phase2-workspace .ws-step-card > .ws-section-toggle,
body.phase2-workspace .ws-step-card > h2 .ws-section-toggle,
body.phase2-workspace .ws-inspector .sl-section-heading h3,
body.phase2-workspace .ws-inspector #ws-inspector-title,
body.phase2-workspace .ws-background-optimization > details > summary,
body.phase2-workspace :is(button.ws-button-primary,button[data-action="generate"]),
body:not(.phase2-workspace) :is(.brand-lockup strong,.homepage-enter-button) {
  font-family: var(--ds-font-pixel) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: 0;
}

body.phase2-workspace :is(.ws-brand strong,.ws-brand-name,.ws-brand-title),
body.phase2-workspace .ws-step-card > h2,
body.phase2-workspace .ws-step-card > .ws-section-toggle,
body.phase2-workspace .ws-step-card > h2 .ws-section-toggle,
body.phase2-workspace .ws-inspector .sl-section-heading h3,
body.phase2-workspace .ws-inspector #ws-inspector-title,
body.phase2-workspace .ws-background-optimization > details > summary,
body.phase2-workspace :is(button.ws-button-primary,button[data-action="generate"]) {
  font-size: 12px !important;
  line-height: 1.5;
}

body:not(.phase2-workspace) .brand-lockup strong { font-size: 24px; line-height: 1.15; }
body:not(.phase2-workspace) .homepage-enter-button { font-size: 12px; }

/* Pixel character without changing the existing monochrome theme or hit areas. */
body.phase2-workspace .ws-inspector :is(.ws-step-card,.sl-panel-section),
body.phase2-workspace :is(button.ws-button-primary,button[data-action="generate"]) {
  border-radius: 0;
  box-shadow: none;
}
body.phase2-workspace :is(button.ws-button-primary,button[data-action="generate"]):focus-visible {
  outline: 2px solid var(--ws-accent, currentColor);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  body.phase2-workspace :is(button.ws-button-primary,button[data-action="generate"]):focus-visible {
    outline-color: Highlight;
  }
}