:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #131722;
  --muted: #6a7180;
  --line: #e2e6ef;
  --card: #f7f8fb;
  --link: #2a5bd7;
  --ok-bg: #e8f4ec;
  --ok-fg: #1c6b45;
  --ok-line: #bcdfca;
  --wait-bg: #fbf1de;
  --wait-fg: #8a5c12;
  --wait-line: #ecd6a8;
  --none-bg: #f1f2f5;
  --none-fg: #626977;
  --none-line: #dcdfe6;
  --open-bg: #eceff6;
  --open-fg: #4a5872;
  --open-line: #ccd4e2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131722;
    --fg: #d1d4dc;
    --muted: #8b93a3;
    --line: #262b36;
    --card: #1a1f2b;
    --link: #7ba0f5;
    --ok-bg: #17301f;
    --ok-fg: #7fc79c;
    --ok-line: #2b5138;
    --wait-bg: #322818;
    --wait-fg: #d9b167;
    --wait-line: #55432088;
    --none-bg: #1e222c;
    --none-fg: #9aa1b0;
    --none-line: #2f3542;
    --open-bg: #1c2230;
    --open-fg: #9fb0cd;
    --open-line: #333d51;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--link); }
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }

header.site {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.brand {
  margin-right: auto;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--fg);
  text-decoration: none;
}
.switches { display: flex; gap: .45rem; flex-wrap: wrap; }
.switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: .45rem;
  overflow: hidden;
  background: var(--card);
}
.switch a, .switch button {
  font: inherit;
  font-size: .76rem;
  letter-spacing: .02em;
  padding: .3rem .6rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
.switch a + a, .switch button + button { border-left: 1px solid var(--line); }
.switch .on, .switch [aria-pressed="true"] { background: var(--bg); color: var(--fg); font-weight: 600; }

main { padding-bottom: 2.5rem; }
p.intro { max-width: 68ch; margin: 1.6rem 0 2rem; color: var(--fg); }
section.chapter { margin: 2.2rem 0; }
section.chapter > h2 {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .2rem;
}
p.chapter-text { max-width: 68ch; margin: .6rem 0 1rem; color: var(--muted); }

details.study { border-top: 1px solid var(--line); }
section.chapter > details.study:last-of-type { border-bottom: 1px solid var(--line); }
details.study > summary {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .75rem .2rem;
  cursor: pointer;
  list-style: none;
}
details.study > summary::-webkit-details-marker { display: none; }
details.study > summary::marker { content: ""; }
details.study > summary:hover .question { color: var(--link); }
code.code {
  font: 650 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: .3rem;
  padding: .12rem .35rem;
}
.dash { color: var(--muted); }
.question { flex: 1 1 16rem; }
.badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.badge {
  font-size: .71rem;
  line-height: 1.5;
  white-space: nowrap;
  padding: .1rem .5rem;
  border: 1px solid;
  border-radius: 999px;
}
.badge b { font-weight: 650; opacity: .7; margin-right: .3rem; }
.badge-confirmed { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); }
.badge-preconfirmed { background: var(--wait-bg); color: var(--wait-fg); border-color: var(--wait-line); }
.badge-no-edge, .badge-control { background: var(--none-bg); color: var(--none-fg); border-color: var(--none-line); }
.badge-open { background: var(--open-bg); color: var(--open-fg); border-color: var(--open-line); }
.badge-planned {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  border-style: dashed;
}
details.study[data-nq="planned"] > summary .question { color: var(--muted); }

.verdicts { padding: 0 .2rem .4rem; }
.verdict { margin: 0 0 1rem; }
.verdict .asset-of {
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .2rem;
}
.verdict p.text { margin: 0 0 .4rem; max-width: 70ch; color: var(--muted); }
.verdict a { font-size: .84rem; text-decoration: none; }
.verdict a:hover { text-decoration: underline; }

footer.site { border-top: 1px solid var(--line); }
footer.site .wrap { padding-top: 1rem; padding-bottom: 2rem; }
footer.site p { margin: .2rem 0; font-size: .78rem; color: var(--muted); }

@media (max-width: 34rem) {
  .badges { margin-left: 0; width: 100%; }
  .brand { flex: 1 1 100%; }
}