:root {
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #59636e;
  --link: #0b6bcb;
  --code: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --text: #e6e8eb;
    --muted: #9aa4af;
    --link: #6cb6ff;
    --code: #1f242b;
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 16px 3rem;
}

h1 { font-size: 1.8rem; line-height: 1.25; margin: 0.5rem 0 0.25rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
a { color: var(--link); }
code { background: var(--code); padding: 0 0.25em; border-radius: 3px; overflow-wrap: anywhere; }
li { margin: 0.4rem 0; }
.updated, .lang { color: var(--muted); font-size: 0.9rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }
.small { color: var(--muted); font-size: 0.9rem; }
.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  background: #1b7f5b;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.button:hover, .button:focus { background: #145e43; }
.logo { vertical-align: middle; margin-right: 0.35rem; border-radius: 12px; }

/* User guide (guide.html, panduan.html) */
:root { --line: #d0d7de; --tip: #1b7f5b; --warn: #c2410c; }
@media (prefers-color-scheme: dark) {
  :root { --line: #3d444d; --tip: #3fb27f; --warn: #f0883e; }
}
.guide main { max-width: 52rem; }
.toc { background: var(--code); border-radius: 8px; padding: 0.75rem 1rem; }
.toc ol { margin: 0.25rem 0; padding-left: 1.4rem; }
.toc li { margin: 0.15rem 0; }
.toc > ol > li { margin: 0.35rem 0; }
.toc ol ol { font-size: 0.88rem; list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
.toc ol ol li { margin: 0; }
.table-wrap { overflow-x: auto; margin: 0.75rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { border: 1px solid var(--line); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
th { background: var(--code); }
.tip, .warn, .note { border-left: 4px solid var(--link); background: var(--code); border-radius: 4px;
  padding: 0.5rem 0.85rem; margin: 1rem 0; }
.tip { border-left-color: var(--tip); }
.warn { border-left-color: var(--warn); }
.tip > :first-child, .warn > :first-child, .note > :first-child { margin-top: 0; }
.tip > :last-child, .warn > :last-child, .note > :last-child { margin-bottom: 0; }
.shots { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
figure { margin: 0; }
figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.shots figure { flex: 0 1 240px; }
figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
.wide { margin: 1rem 0; }
.top { font-size: 0.85rem; text-align: right; margin: 1.5rem 0 0; }
.guide h2 { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.guide h4 { font-size: 1rem; margin: 1.2rem 0 0.2rem; }
dt { font-weight: 600; margin-top: 0.6rem; }
dd { margin-left: 1.2rem; }