:root{
  color-scheme:dark;
  --bg:#111318; --text:#eeeeee; --muted:#a5a9b8; --border:#30323a;
  --panel:#202229; --panel-2:#292d39;
  --input-bg:#242630; --input-border:#414451;
  --accent:#303c57; --accent-text:#ffffff;
  --primary:#d8e2ff; --primary-text:#18213a;
  --danger:#663b43; --danger-text:#ffffff; --error-bg:#3d2328; --error-text:#ffb4bd;
  --link:#9ebaff; --quote:#687ba7; --quote-text:#c1c6d5;
  --code-bg:#0d1117; --code-head:#252832; --code-border:#3b3e49; --inline-code:#30333e;
  --btn:#373b48; --btn-border:#4a4e5c; --btn-hover:#4a5060;
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7f9; --text:#1c1f26; --muted:#636a7a; --border:#dfe2e8;
  --panel:#ffffff; --panel-2:#eceff5;
  --input-bg:#ffffff; --input-border:#c9cdd6;
  --accent:#dbe6ff; --accent-text:#14203d;
  --primary:#2d5bd7; --primary-text:#ffffff;
  --danger:#c9444f; --danger-text:#ffffff; --error-bg:#fde8ea; --error-text:#a31d2b;
  --link:#2850c8; --quote:#8aa0d6; --quote-text:#4a5163;
  --code-bg:#f6f8fa; --code-head:#eceff3; --code-border:#d5d9e0; --inline-code:#e9ecf1;
  --btn:#e8ebf0; --btn-border:#c9cdd6; --btn-hover:#d9dde5;
  --shadow:0 10px 40px rgba(20,30,60,.12);
}

.icon-btn{
  width:40px;height:40px;flex-shrink:0;
  display:grid;place-items:center;padding:0;
  background:transparent;color:var(--text);
  border:1px solid var(--border);border-radius:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:hover{background:var(--panel-2)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* sun is shown in dark mode (click -> light), moon in light mode */
.icon-sun{display:none}
:root[data-theme="dark"] .icon-sun{display:block}
:root[data-theme="dark"] .icon-moon{display:none}
:root[data-theme="light"] .icon-moon{display:block}