html.ge-settings-document {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
  color-scheme: dark;
  background: var(--bg);
}
.ge-settings {
  --ge-settings-gutter: 20px;
  --ge-screen-bg: var(--bg);
  --ge-row-bg: var(--panel);
  --ge-screen-text: var(--text);
  --ge-screen-muted: var(--muted);
  --ge-screen-accent: var(--lavender);
  --ge-switch-idle: var(--panel-hover);
  --ge-switch-active: var(--primary-bg);
  --ge-switch-knob: var(--primary-ink);
  min-height: 100svh;
  margin: 0;
  overflow: visible;
  overscroll-behavior: auto;
  background: var(--ge-screen-bg);
  color: var(--ge-screen-text);
  font-family: var(--ge-font-family);
  font-size: 1rem;
  line-height: 1.5;
}
.ge-settings a { color: inherit; text-decoration: none; }
.ge-settings svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ge-settings :focus-visible { outline: 2px solid var(--ge-screen-accent); outline-offset: 4px; }
.ge-settings-document.theme-commit::view-transition-group(root) { animation: none; }
.ge-settings-document.theme-commit::view-transition-old(root),
.ge-settings-document.theme-commit::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.ge-settings-document.theme-commit::view-transition-old(root) { z-index: 0; }
.ge-settings-document.theme-commit::view-transition-new(root) { z-index: 1; will-change: clip-path; }
:root.theme-commit .ge-settings,
:root.theme-commit .ge-settings *,
:root.theme-commit .ge-settings *::before,
:root.theme-commit .ge-settings *::after { transition: none !important; }
.ge-settings-skip { position: absolute; z-index: 20; top: 8px; left: 16px; padding: 12px 16px; border-radius: 12px; background: var(--ge-row-bg); transform: translateY(-150%); }
.ge-settings-skip:focus { transform: none; }
.ge-settings-header-inner {
  width: min(100%, 720px);
  min-height: 64px;
  margin-inline: auto;
  padding: env(safe-area-inset-top) max(var(--ge-settings-gutter), env(safe-area-inset-right)) 0 max(var(--ge-settings-gutter), env(safe-area-inset-left));
  display: flex;
  align-items: center;
}
.ge-settings-back { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; }
.ge-settings-back:hover { background: var(--ge-row-bg); }
.ge-settings-content {
  width: min(100%, 720px);
  min-width: 0;
  margin-inline: auto;
  padding: 18px max(var(--ge-settings-gutter), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(var(--ge-settings-gutter), env(safe-area-inset-left));
  box-sizing: border-box;
}
.ge-settings-content:focus { outline: none; }
.ge-settings-page-heading { margin-bottom: 30px; }
.ge-settings h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.16; font-weight: 500; letter-spacing: -.035em; }
.ge-settings-panel { min-width: 0; }
.ge-theme-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ge-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ge-theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 22px; }
.ge-theme-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.ge-theme-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ge-theme-option-body { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 15px; }
.ge-theme-preview {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  aspect-ratio: .9;
  max-height: 380px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 7%;
  overflow: visible;
  border-radius: 18px;
  background: var(--preview-bg);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.ge-theme-preview-light { --preview-bg: #351180; --preview-panel: rgb(255 255 255 / .16); --preview-bar: #d0b0ff; }
.ge-theme-preview-dark { --preview-bg: #130d20; --preview-panel: #2a1d3b; --preview-bar: #d0b0ff; }
.ge-theme-preview-panel { display: grid; min-height: 30%; align-content: center; gap: 9%; padding: 7%; border-radius: 12px; background: var(--preview-panel); }
.ge-theme-preview-panel i { display: block; width: 60%; height: 4%; min-height: 6px; border-radius: 99px; background: var(--preview-bar); opacity: .82; }
.ge-theme-preview-panel i + i { width: 100%; }
.ge-theme-option-heading { display: block; text-align: center; color: var(--ge-screen-muted); }
.ge-theme-option-heading strong { display: block; font-size: clamp(.9rem, 3.5vw, 1.2rem); line-height: 1.35; font-weight: 500; }
.ge-theme-radio:checked + .ge-theme-option-body .ge-theme-preview { box-shadow: 0 0 0 4px var(--ge-screen-accent); }
.ge-theme-radio:checked + .ge-theme-option-body .ge-theme-option-heading { color: var(--ge-screen-accent); }
.ge-theme-radio:focus-visible + .ge-theme-option-body .ge-theme-preview,
.ge-theme-radio:focus-visible + .ge-theme-option-body.ge-theme-system-row { outline: 2px solid var(--ge-screen-accent); outline-offset: 7px; }
.ge-theme-option-system { grid-column: 1 / -1; margin-top: 3px; }
.ge-theme-system-row { box-sizing: border-box; min-height: 66px; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-radius: 18px; background: var(--ge-row-bg); }
.ge-theme-system-row strong { font-size: 1.05rem; font-weight: 500; }
.ge-theme-switch { position: relative; box-sizing: border-box; width: 54px; height: 32px; flex: none; border-radius: 99px; background: var(--ge-switch-idle); transition: background 220ms ease; }
.ge-theme-switch::after { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .25); content: ""; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.ge-theme-radio:checked + .ge-theme-system-row .ge-theme-switch { background: var(--ge-switch-active); }
.ge-theme-radio:checked + .ge-theme-system-row .ge-theme-switch::after { transform: translateX(22px); }
.ge-theme-status { margin: 12px 0 0; color: #d54c4c; font-size: .875rem; }
.ge-theme-status[hidden] { display: none; }
@media (min-width: 720px) {
  .ge-settings { --ge-settings-gutter: 24px; }
  .ge-settings-header-inner { min-height: 76px; }
  .ge-settings-content { padding-top: 22px; }
  .ge-settings-page-heading { margin-bottom: 36px; }
  .ge-settings h1 { font-size: clamp(2.75rem, 5vw, 3.25rem); }
  .ge-theme-options { column-gap: 22px; row-gap: 28px; }
  .ge-theme-option-body { gap: 18px; }
  .ge-theme-preview { border-radius: 20px; }
  .ge-theme-preview-panel { border-radius: 14px; }
  .ge-theme-option-heading strong { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ge-theme-preview, .ge-theme-switch, .ge-theme-switch::after { transition: none; }
}