.workspace-dialog.canvas-navigation-settings { width: min(400px, calc(100vw - 32px)); max-width: 400px; }
.canvas-navigation-settings .workspace-dialog__body { padding: 20px; }
.canvas-navigation-settings .workspace-dialog__body > header { margin-bottom: 22px; }
.canvas-navigation-settings h2 { font-size: 16px; }
.canvas-navigation-settings .canvas-navigation-settings__controls { display: grid; gap: 24px; }
.canvas-navigation-settings label { display: grid; gap: 8px; font-size: 13px; }
.canvas-navigation-settings__label, .canvas-navigation-settings__scale { display: flex; align-items: center; justify-content: space-between; }
.canvas-navigation-settings__label strong { font-weight: 500; }
.canvas-navigation-settings output { color: #c8a4f0; font-size: 13px; font-variant-numeric: tabular-nums; }
.canvas-navigation-settings input[type=range] { appearance: auto; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #b692e5; cursor: pointer; }
.canvas-navigation-settings input[type=range]:focus-visible { outline: 2px solid #b692e5; outline-offset: 4px; }
.canvas-navigation-settings__scale { color: #9995a2; font-size: 11px; margin-top: -6px; }
.canvas-navigation-settings small, .canvas-navigation-settings .canvas-navigation-settings__note { color: #b4b0bf; font-size: 12px; line-height: 1.5; }
.canvas-navigation-settings .canvas-navigation-settings__note { margin: 22px 0 0; }
.canvas-navigation-settings footer { margin-top: 18px; gap: 8px; }
.canvas-navigation-settings footer button { padding: 6px 12px; font-size: 13px; }
.canvas-navigation-settings footer button.is-primary { background: #b692e5; color: #21152f; }