:root {
  color-scheme: dark;
  --bg: #12100d;
  --panel: #1d1914;
  --panel-up: #252019;
  --ink: #eee8da;
  --muted: #9f9688;
  --line: #40382e;
  --gold: #d8ae61;
  --moss: #829b6c;
  --danger: #c67467;
  --progress-track: #342d25;
  --dialog-bg: #17130f;
  --dialog-border: #6f5e49;
  --backdrop: #090705d9;
  --shadow: #000c;
  --entry-hover-border: #6f5e49;
  --done-border: #526246;
  --done-bg: #1a1d16;
  --claimed-border: #6a583d;
  --claimed-bg: #211c14;
  --claimed-hover-border: #8a7048;
  --claimed-hover-bg: #292219;
  --done-claimed-border: #64704c;
  --done-claimed-bg: #202219;
  --control-border: #5a4c3a;
  --control-bg: #17130f;
  --control-hover-bg: #282015;
  --footer-line: #352e26;
  --footer-bg: #181511;
  --badge-ring: #0c0a08b8;
  --online: #63874f;
  --offline: #9a4e46;
  --toggle-border: #6c5c46;
  --done-control-bg: #293322;
  --done-control-text: #c9d5bd;
  --done-check-text: #10150d;
  --checkmark: #716655;
  --claim-control-text: #e1c98f;
  --detail-line: #302a23;
  --danger-hover-text: #efaaa0;
  --choice-selected-bg: #302719;
  --choice-selected-line: #a47f40;
  --surface-inset: #191611;
  --warning-bg: #211b12;
  --soft-text: #c9c0b2;
  --primary-line: #9e7a3e;
  --primary-hover-line: #efd08f;
  --primary-text: #17130f;
  --role-line: #6a5532;
  --role-bg: #2a2115;
  --role-text: #dec486;
  --viewer-line: #495d63;
  --viewer-bg: #192328;
  --viewer-text: #a9c6cc;
  --dash-line: #62533f;
  --danger-line: #71423b;
  --danger-bg: #2a1714;
  --danger-text: #e2a299;
  --danger-bright: #ffc0b6;
  --activity-line: #596a4d;
  --activity-bg: #20291a;
  --activity-text: #bed0ae;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f0e7;
  --panel: #fffaf0;
  --panel-up: #fffdf8;
  --ink: #2b241c;
  --muted: #756b5d;
  --line: #d6cbbb;
  --gold: #8a641f;
  --moss: #688053;
  --danger: #a64f43;
  --progress-track: #ded4c4;
  --dialog-bg: #fffaf0;
  --dialog-border: #b9a98f;
  --backdrop: #221a1259;
  --shadow: #4a3d2d33;
  --entry-hover-border: #b7a58b;
  --done-border: #a3b693;
  --done-bg: #edf2e8;
  --claimed-border: #c1a471;
  --claimed-bg: #f4ead8;
  --claimed-hover-border: #aa884e;
  --claimed-hover-bg: #f0e0c5;
  --done-claimed-border: #a5ad80;
  --done-claimed-bg: #ebeddb;
  --control-border: #c8baa5;
  --control-bg: #fffdf8;
  --control-hover-bg: #f7eddb;
  --footer-line: #ded4c4;
  --footer-bg: #faf5eb;
  --badge-ring: #fffaf0;
  --online: #5e824a;
  --offline: #a85149;
  --toggle-border: #b7a78f;
  --done-control-bg: #dfe9d7;
  --done-control-text: #435a34;
  --done-check-text: #f9fff4;
  --checkmark: #9a8d78;
  --claim-control-text: #76551d;
  --detail-line: #e0d6c7;
  --danger-hover-text: #9f4036;
  --choice-selected-bg: #f2e4ca;
  --choice-selected-line: #ad833b;
  --surface-inset: #fbf6ed;
  --warning-bg: #f7ecd8;
  --soft-text: #675e52;
  --primary-line: #8f6827;
  --primary-hover-line: #6d4d17;
  --primary-text: #fffaf0;
  --role-line: #b79355;
  --role-bg: #f3e4c9;
  --role-text: #76551d;
  --viewer-line: #8ba3a8;
  --viewer-bg: #e7eff0;
  --viewer-text: #466066;
  --dash-line: #b9a98f;
  --danger-line: #bf8178;
  --danger-bg: #f6dfdb;
  --danger-text: #943f35;
  --danger-bright: #7f3028;
  --activity-line: #9aaf89;
  --activity-bg: #e6eee0;
  --activity-text: #4c633e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.35 system-ui, sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.masthead, main {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

.masthead {
  min-height: 112px;
  padding: 24px 0 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font: 400 clamp(2.1rem, 5vw, 3.4rem)/.95 Georgia, serif;
}

.overall {
  width: min(280px, 35vw);
  color: var(--muted);
  font-size: 12px;
}

.overall > span { display: block; margin-bottom: 6px; text-align: right; }
.progress { height: 4px; overflow: hidden; border-radius: 99px; background: var(--progress-track); }
.progress i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .15s; }
.empty { padding: 30px 0; color: var(--muted); }

.theme-toggle {
  position: fixed;
  z-index: 30;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 5px 20px var(--shadow);
  color: var(--ink);
  backdrop-filter: blur(8px);
  transition: transform .12s, border-color .12s, background .12s;
}

.theme-toggle:hover {
  border-color: var(--gold);
  background: var(--panel-up);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.theme-toggle span {
  display: block;
  font: 22px/1 Georgia, serif;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .masthead { min-height: 96px; padding-top: 18px; }
  .overall { width: 38vw; }
}