* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --c-black: #333b3c;
  --c-dark: #66696b;
  --c-white: #efefec;
  --c-light: #efedea;
  --c-dark-green: #2d5940;
  --c-lemon-green: #a7c957;

  --c-bg: light-dark(var(--c-light), var(--c-black));
  --c-fg: light-dark(var(--c-black), var(--c-white));
  --c-bd: light-dark(var(--c-dark), var(--c-light));

  --c-accent: light-dark(var(--c-dark-green), var(--c-lemon-green));
}

body {
  font-family: system-ui, sans-serif;
  background-color: var(--c-bg);
  color: var(--c-fg);
  min-height: 100vh;
}

.header {
  color: var(--c-fg);
  background-color: var(--c-bg);
  padding: 10px 20px;
}

.nav {
  padding: 10px;
  border-bottom: 1px solid var(--c-bd);
}

.wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.panel {
  border: 1px solid var(--c-bg);
  border-radius: 4px;
  padding: 1.5em;
  margin-bottom: 1.5em;
}

.toc {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 16px;

  a {
    display: block;
    background-color: var(--c-bg);
    text-decoration: 1px dashed underline;
    color: var(--c-fg);
  }
}

.status-list {
  list-style: none;
  padding-left: 24px;
  line-height: 1.5em;
}
.status {
  position: relative;
}
.status:before {
  position: absolute;
  right: 100%;
  inset-block: 0;
  margin: auto;
}
.status--loading:before {
  content: "";
  display: inline-block;
  
  width: .2em;
  height: .2em;
  padding: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  --_m: 
    conic-gradient(#0000 50%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  translate: -4px;
  animation: rotate 1s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.status--online:before {
  content: "🟢";
}

.status--offline:before {
  content: "🔴";
}

.status__badge {
  vertical-align: middle;
}