:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --ink: #26283a;
  --muted: #585c6e;
  --line: #e2ded4;
  --accent: #3f5ea8;
  --accent-ink: #ffffff;
  --accent-soft: #e5ebf8;
  --mint: #dcf1e6;
  --mint-ink: #1f5c40;
  --peach: #fde6d6;
  --peach-ink: #7a3d14;
  --butter: #faf1cf;
  --butter-ink: #6b5410;
  --lilac: #ebe5f7;
  --lilac-ink: #4a3a7a;
  --rose: #f8dfe2;
  --rose-ink: #7d2433;
  --sky: #dfeefa;
  --sky-ink: #1d4a70;

  --lv0: #f3c9cf;
  --lv1: #f8d9c2;
  --lv2: #f6e9b5;
  --lv3: #cfe9d9;
  --lv4: #b3dfc6;
  --lv5: #b9cdee;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(38, 40, 58, 0.06), 0 4px 14px rgba(38, 40, 58, 0.05);
  --font: "Times New Roman", Times, Arial, sans-serif;
  --font-ui: Arial, "Helvetica Neue", sans-serif;
  --maxw: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 0.8em; }
ul, ol { margin: 0 0 0.8em; padding-left: 1.3em; }
li { margin-bottom: 0.3em; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; }