/* Algebrainia.com: plain and quiet, so the math is what you look at. */
:root {
  --bg: #ffffff;
  --text: #1b1b1b;
  --muted: #666a70;
  --line: #e2e2e2;
  --link: #1f4fbf;
  --accent: #1f4fbf;      /* glyph highlight in the widget */
  --accent-2: #1f7a4d;    /* "solved" */
  --surface: #ffffff;
  --surface-2: #f6f6f5;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616; --text: #e8e6e3; --muted: #9a9a9a; --line: #2e2e2e;
    --link: #8ab4ff; --accent: #8ab4ff; --accent-2: #7fd3a6; --surface: #1d1d1d; --surface-2: #202020;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); }
h1, h2, h3 { line-height: 1.25; font-weight: 600; margin: 2.2em 0 .6em; }
h1 { font-size: 1.9rem; margin-top: 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p, ul { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
code { font: .9em ui-monospace, Menlo, Consolas, monospace; }
pre { font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); padding: .8rem 1rem; overflow-x: auto; border-radius: 4px; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .5rem; background: var(--bg); padding: .3rem .6rem; }

.wrap { width: min(44rem, 100% - 2rem); margin-inline: auto; }
.wrap.wide { width: min(64rem, 100% - 2rem); }

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; padding: 1rem 0; }
.brand { font-weight: 600; color: var(--text); text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }

main { padding: 2.5rem 0 4rem; }
.lede { color: var(--muted); }

.demo { margin: 1.5rem 0 2rem; }
.demo-note { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
.grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }

.btn { display: inline-block; font: inherit; font-size: .95rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .45rem .9rem; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; font-size: .9rem; color: var(--muted); }
.site-footer a { color: var(--muted); }