:root {
  color-scheme: light;
  --settings-bg: #f2f4f0;
  --settings-panel: #fffffd;
  --settings-ink: #18221b;
  --settings-muted: #667069;
  --settings-line: rgba(24, 34, 27, .16);
  --settings-accent: #316647;
  --settings-soft: #dce9df;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --settings-bg: #121713;
  --settings-panel: #1d261f;
  --settings-ink: #f2f5f1;
  --settings-muted: #adb7af;
  --settings-line: rgba(237, 244, 238, .16);
  --settings-accent: #a6ceb0;
  --settings-soft: #273a2d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--settings-bg); color: var(--settings-ink); font-family: "DM Sans", system-ui, sans-serif; }
button,input,select,textarea { font: inherit; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; transform: translateY(-180%); border-radius: 999px; background: var(--settings-ink); color: var(--settings-bg); padding: 10px 14px; }
.skip-link:focus { transform: none; }
.settings-main { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: clamp(42px, 7vw, 84px) 0 72px; }
.settings-heading { margin-bottom: 24px; }
.settings-heading h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.045em; }
.settings-panel { border: 1px solid var(--settings-line); border-radius: 22px; background: var(--settings-panel); box-shadow: 0 22px 60px rgba(35, 54, 41, .1); padding: clamp(22px, 5vw, 38px); }
.settings-panel h2 { margin: 0 0 22px; font-size: 1.2rem; }
.text-size-control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.text-size-control span { color: var(--settings-muted); font-size: .8rem; font-weight: 800; }
.text-size-control input { width: 100%; accent-color: var(--settings-accent); }
.text-size-value { display: block; margin: 18px 0; color: var(--settings-accent); font-size: 1.65rem; font-weight: 850; text-align: center; }
.text-size-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.text-size-presets button,.text-size-reset { min-height: 46px; border: 1px solid var(--settings-line); border-radius: 12px; background: var(--settings-panel); color: var(--settings-ink); cursor: pointer; padding: 0 12px; font-weight: 800; }
.text-size-presets button[aria-pressed="true"] { border-color: var(--settings-accent); background: var(--settings-soft); color: var(--settings-ink); }
.text-size-reset { display: block; margin: 16px auto 0; color: var(--settings-muted); }
.text-size-preview { margin: 24px 0 0; border-top: 1px solid var(--settings-line); padding-top: 22px; }
.text-size-preview strong { display: block; margin-bottom: 5px; }
.text-size-preview p { margin: 0; color: var(--settings-muted); line-height: 1.6; }
.settings-footer { display: flex; width: min(760px, calc(100% - 32px)); margin: 0 auto; justify-content: space-between; border-top: 1px solid var(--settings-line); color: var(--settings-muted); padding: 26px 0 36px; font-size: .8rem; }

@media (max-width: 560px) {
  .text-size-presets { grid-template-columns: 1fr 1fr; }
  .settings-footer { display: grid; gap: 5px; }
}

button:not(:disabled) { border-style: solid !important; border-width: 1px !important; }