settings-view{display:flex;flex-direction:column;flex:1;min-block-size:0;min-inline-size:0}settings-view settings-preview{display:flex;flex-direction:column;flex:none;block-size:38dvh;border-block-end:1px solid var(--rule);background:var(--paper)}settings-view preview-tabs{display:flex;gap:var(--space-2xs);flex:none;padding:var(--space-2xs) var(--space-sm)}settings-view preview-tabs text-button{block-size:2.25rem}settings-view preview-tabs text-button[state=on]{background:var(--accent-soft);color:var(--accent)}settings-view settings-preview code-editor{flex:1;min-block-size:0}settings-view settings-form{display:flex;flex-direction:column;gap:var(--space-md);flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-md) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom))}settings-view setting-field{display:flex;flex-direction:column;gap:var(--space-2xs)}settings-view setting-label{font-family:var(--voice-machine);font-size:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}settings-view range-value{font-family:var(--voice-machine);font-size:var(--type-mono-sm);color:var(--ink-soft)}settings-view select,settings-view theme-form input[type=text]{block-size:2.75rem;padding:0 var(--space-sm);border:1px solid var(--rule-strong);border-radius:var(--shape-md);background:var(--paper-raised);color:var(--ink);font:inherit;font-size:max(16px,var(--type-prose))}settings-view input[type=range]{inline-size:100%;block-size:2.75rem;accent-color:var(--accent)}settings-view setting-choices,settings-view theme-types{display:flex;gap:var(--space-md)}settings-view setting-choices label,settings-view theme-types label{display:flex;align-items:center;gap:var(--space-xs);min-block-size:2.75rem;font-family:var(--voice-machine);font-size:var(--type-mono)}settings-view input[type=radio]{inline-size:1.25rem;block-size:1.25rem;accent-color:var(--accent)}settings-view theme-builder{display:block}settings-view theme-list,settings-view theme-form{display:flex;flex-direction:column;gap:var(--space-xs)}settings-view theme-empty{color:var(--ink-faint);font-family:var(--voice-machine);font-size:var(--type-mono)}settings-view theme-row{display:flex;align-items:center;gap:var(--space-xs);min-block-size:3rem;border-block-end:1px solid var(--rule)}settings-view theme-swatch{flex:none;inline-size:1.75rem;block-size:1.75rem;border-radius:var(--shape-xs);border:1px solid var(--rule-strong);background:var(--swatch)}settings-view theme-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--voice-machine);font-size:var(--type-mono)}settings-view color-group{display:flex;flex-direction:column;gap:var(--space-2xs);padding-block-start:var(--space-sm)}settings-view color-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-block-size:2.75rem}settings-view color-label{font-family:var(--voice-machine);font-size:var(--type-mono)}settings-view input[type=color]{inline-size:3rem;block-size:2.25rem;padding:0;border:1px solid var(--rule-strong);border-radius:var(--shape-xs);background:none}settings-view theme-actions{display:flex;justify-content:flex-end;gap:var(--space-xs);padding-block-start:var(--space-md)}settings-view text-button{align-self:flex-start;block-size:2.75rem}@media (min-width: 900px){settings-view{flex-direction:row}settings-view settings-preview{flex:1;block-size:auto;border-block-end:none;border-inline-end:1px solid var(--rule)}settings-view settings-form{flex:none;inline-size:26rem}}