:root {
  color-scheme:light;
  --bg:#f8f9fb;--surface:#fff;--border:#e1e6ed;--border-soft:#e8edf3;
  --text:#182231;--muted:#637286;--accent:#2857d7;
  --accent-soft:#eaf0ff;--accent-ink:#214bc0;--code-bg:#f1f4f8;
  --note-border:#dbe5fb;--ok:#287650;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#171c24;--surface:#202732;--border:#354151;--border-soft:#303b49;
    --text:#f2f5f9;--muted:#a7b4c4;--accent:#7e9dff;
    --accent-soft:#293959;--accent-ink:#c1d0ff;--code-bg:#1b222c;
    --note-border:#384b6d;--ok:#8bd5a7;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#171c24;--surface:#202732;--border:#354151;--border-soft:#303b49;
  --text:#f2f5f9;--muted:#a7b4c4;--accent:#7e9dff;
  --accent-soft:#293959;--accent-ink:#c1d0ff;--code-bg:#1b222c;
  --note-border:#384b6d;--ok:#8bd5a7;
}
a {text-underline-offset:3px}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
header {background:var(--surface)}
.bar {min-height:68px;padding-top:12px;padding-bottom:12px;font-weight:750;letter-spacing:-.025em}
.bar img {width:29px;height:29px}
.bar a {font-weight:600;letter-spacing:0}
.lang-switch {display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:.73rem;font-weight:750;letter-spacing:.03em}
.bar .lang-switch {margin-left:auto}
.lang-switch a,.lang-switch span {display:block;min-width:28px;margin:0;padding:4px 5px;border-radius:5px;text-align:center;text-decoration:none}
.lang-switch a {color:var(--muted)}
.lang-switch a:hover {color:var(--accent);background:var(--code-bg)}
.lang-switch span {color:var(--text);background:var(--code-bg)}
.bar>a:last-child {margin-left:12px}
main {padding-top:64px}
h1 {color:var(--text);font-size:clamp(2rem,4vw,2.7rem);line-height:1.18;letter-spacing:-.035em}
h2 {color:var(--text);letter-spacing:-.02em}
.box {border-radius:12px}
footer {border-top:1px solid var(--border);padding-top:24px}
@media (max-width:560px) {main {padding-top:48px}h1 {font-size:2rem}.bar>a:last-child {display:none}}