.particle-image-preview { position: relative; --particle-bg: #080808; --particle-control: #e4e3dc; --particle-muted: #a7a79b; --particle-hover: #30302a; --particle-track: #dedbc9; background: var(--particle-bg); color-scheme: dark; }
.particle-image-preview[data-preview-theme='light'] { --particle-bg: #f8f8f6; --particle-control: #252525; --particle-muted: #60605b; --particle-hover: #e7e7e2; --particle-track: #50504b; color-scheme: light; }
.particle-image-stage { position: relative; height: 480px; overflow: hidden; background: var(--particle-bg); }
.particle-image-canvas { display: block; width: 100%; height: 100%; }
.particle-theme-toggle { position: absolute; z-index: 1; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid currentColor; border-color: color-mix(in srgb, var(--particle-control) 20%, transparent); border-radius: 6px; color: var(--particle-control); background: var(--particle-bg); cursor: pointer; }
/* Keep a 44px hit area while shrinking only the visible control. */
.particle-theme-toggle::before { content: ''; position: absolute; inset: -5px; }
.particle-theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.particle-theme-toggle [data-theme-icon='moon'], [data-preview-theme='light'] .particle-theme-toggle [data-theme-icon='sun'] { display: none; }
[data-preview-theme='light'] .particle-theme-toggle [data-theme-icon='moon'] { display: block; }
.particle-image-preview .motion-controls { padding-top: 8px; color: var(--particle-muted); }
.particle-image-preview .motion-control-row button { color: var(--particle-control); }
.particle-image-preview .motion-control-row button:hover, .particle-theme-toggle:hover { background: var(--particle-hover); }
.particle-image-preview .motion-scrubber { accent-color: var(--particle-track); }
.prose .particle-image-preview .motion-error { color: var(--particle-muted); }
@media (max-width: 700px) {
  .particle-theme-toggle { top: 12px; right: 12px; }
  .particle-image-stage { height: auto; aspect-ratio: 1 / 1; min-height: 260px; max-height: 480px; }
  .particle-image-preview .motion-controls { width: calc(100% - 24px); }
}