/* Font scaling never changes root rem units, geometry, or density. */
:root, [data-ps-font-scale] {
  --ps-font-scale: 1;
  --ps-font-body: calc(15px * var(--ps-font-scale));
  --ps-font-support: calc(13px * var(--ps-font-scale));
  --ps-font-label: calc(12px * var(--ps-font-scale));
  --ps-line-height: 1.6;
  --ps-density-gap: 12px;
  --ps-density-control-padding: 8px;
}
[data-theme-density='compact'] { --ps-density-gap: 8px; --ps-density-control-padding: 6px; }
[data-theme-density='comfortable'] { --ps-density-gap: 16px; --ps-density-control-padding: 10px; }
.ps-readable { font-size: var(--ps-font-body); line-height: var(--ps-line-height); }
.ps-appearance-controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ps-density-gap); padding: 16px; margin: 0; min-width: 0;
  color: var(--ps-color-foreground); background: var(--ps-color-panel);
  border: 1px solid var(--ps-color-border); border-radius: var(--shape-radius-content);
  font-size: var(--ps-font-support); line-height: var(--ps-line-height);
}
.ps-appearance-controls legend { font-weight: 600; padding: 0 6px; }
.ps-appearance-controls label { display: grid; gap: 6px; min-width: 0; }
.ps-appearance-controls select {
  font: inherit; min-width: 0; width: 100%; padding: var(--ps-density-control-padding);
  color: var(--ps-color-foreground); background: var(--ps-color-background);
  border: 1px solid var(--ps-color-border); border-radius: var(--shape-radius-field);
}
.ps-appearance-controls select:focus-visible { outline: 2px solid var(--ps-color-focus-ring); outline-offset: 2px; }
.ps-appearance-note { grid-column: 1 / -1; margin: 0; font-size: var(--ps-font-label); }
[data-motion-mode='reduced'] *, [data-motion-mode='none'] * {
  scroll-behavior: auto !important;
}
[data-motion-mode='none'] *, [data-motion-mode='none'] *::before, [data-motion-mode='none'] *::after {
  animation: none !important;
  transition: none !important;
}
[data-motion-mode='reduced'] *, [data-motion-mode='reduced'] *::before, [data-motion-mode='reduced'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .ps-appearance-controls { scroll-behavior: auto; }
}