:root {
  color-scheme: light;
  --mint: #20c997;
  --blue: #2699f2;
  --ink: #173b43;
  --muted: #577078;
  --paper: #fbfdf9;
  --line: #dbe9e5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(145deg, #f4fff9, #f6fbff 55%, var(--paper));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
main { width: min(820px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
header, section {
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 12px 38px rgba(25, 91, 91, .07);
}
h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
h2 { margin-top: 0; font-size: 1.25rem; }
h3 { margin-bottom: 4px; }
p, li { color: var(--muted); }
a { color: #0878c9; }
.brand { font-weight: 800; background: linear-gradient(90deg, var(--mint), var(--blue)); color: transparent; background-clip: text; }
.meta, .note { font-size: .92rem; }
.lang { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 28px; }
nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
nav a { background: #eafff5; border-radius: 999px; padding: 8px 14px; text-decoration: none; font-weight: 650; }
footer { text-align: center; color: var(--muted); font-size: .9rem; padding-top: 18px; }