:root {
  --paper: #FAF6EF; --paper2: #F3EFE6; --ink: #2A2824; --ink2: #5A554B; --ink3: #8A8275;
  --hairline: #E7E0D4; --accent: #0E7C72; --amber: #B7791F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181613; --paper2: #1F1C17; --ink: #ECE6DB; --ink2: #C4BBAC; --ink3: #988F80;
    --hairline: #38322A; --accent: #2DD4BF; --amber: #F2B35B;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  background: var(--paper); color: var(--ink);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased;
}
h1, h2, .brand { font-family: 'Newsreader', 'New York', 'Iowan Old Style', Georgia, serif; }
.nav {
  max-width: 680px; margin: 0 auto; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 0.5px solid var(--hairline);
}
.brand { font-size: 22px; font-weight: 500; }
.brand a { color: var(--ink); text-decoration: none; }
.links a { margin-left: 18px; font-size: 14px; color: var(--ink3); text-decoration: none; }
.links a:hover { color: var(--ink); }
.page { max-width: 680px; margin: 0 auto; padding: 56px 20px 88px; }
.label { font-size: 13px; color: var(--ink3); }
h1 { font-weight: 500; font-size: 42px; line-height: 1.12; margin: 8px 0 14px; letter-spacing: -0.3px; }
h2 { font-weight: 500; font-size: 24px; line-height: 1.3; margin: 42px 0 10px; }
p { margin: 0 0 16px; }
ul { padding-left: 22px; } li { margin-bottom: 8px; }
a { color: var(--accent); text-underline-offset: 3px; }
code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; }
hr { border: none; border-top: 0.5px solid var(--hairline); margin: 40px 0; }
.muted { color: var(--ink3); }
.updated { color: var(--ink3); font-size: 14px; margin-bottom: 30px; }
.standup {
  background: var(--paper2); border: 0.5px solid var(--hairline); border-radius: 14px;
  padding: 18px 20px; margin: 26px 0; white-space: pre-wrap; line-height: 1.7;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; color: var(--ink);
}
.receipt { color: var(--amber); }
@media (max-width: 560px) { h1 { font-size: 34px; } }
footer {
  max-width: 680px; margin: 0 auto; padding: 26px 20px 48px; border-top: 0.5px solid var(--hairline);
  color: var(--ink3); font-size: 13px; text-align: center;
}
footer a { color: var(--ink3); margin: 0 6px; }
@media (max-width: 560px) { .links a { margin-left: 12px; } }
.tool label { display: block; font-size: 14px; color: var(--ink2); margin: 20px 0 6px; }
.tool textarea, .tool select {
  width: 100%; background: var(--paper2); color: var(--ink); border: 0.5px solid var(--hairline);
  border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; line-height: 1.6;
}
.tool select { width: auto; font-family: inherit; padding: 8px 12px; }
.tool textarea:focus, .tool select:focus, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 16px 0; }
.row label { margin: 0; }
.button {
  font: inherit; font-size: 15px; background: var(--accent); color: var(--paper); border: 0;
  border-radius: 10px; padding: 9px 18px; cursor: pointer;
}
.button.quiet { background: transparent; color: var(--accent); border: 0.5px solid var(--hairline); }
.table-wrap { overflow-x: auto; margin: 22px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 0.5px solid var(--hairline); }
th { font-weight: 600; color: var(--ink2); }