:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --canvas: #f6f8fa;
  --panel: #ffffff;
  --text: #24292f;
  --muted: #57606a;
  --border: #d0d7de;
  --border-muted: #d8dee4;
  --accent: #0969da;
  --accent-hover: #0550ae;
  --success: #1a7f37;
  --success-bg: #dafbe1;
  --warning: #9a6700;
  --warning-bg: #fff8c5;
  --danger: #cf222e;
  --danger-bg: #ffebe9;
  --code-bg: #f6f8fa;
  --shadow: 0 1px 0 rgba(27,31,36,.04);
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #0d1117; --canvas: #010409; --panel: #0d1117; --text: #e6edf3; --muted: #8b949e; --border: #30363d; --border-muted: #21262d; --accent: #2f81f7; --accent-hover: #58a6ff; --success: #3fb950; --success-bg: rgba(46,160,67,.16); --warning:#d29922; --warning-bg: rgba(187,128,9,.16); --danger:#f85149; --danger-bg: rgba(248,81,73,.14); --code-bg:#161b22;
  }
}
html[data-theme="dark"] { --bg: #0d1117; --canvas: #010409; --panel: #0d1117; --text: #e6edf3; --muted: #8b949e; --border: #30363d; --border-muted: #21262d; --accent: #2f81f7; --accent-hover: #58a6ff; --success: #3fb950; --success-bg: rgba(46,160,67,.16); --warning:#d29922; --warning-bg: rgba(187,128,9,.16); --danger:#f85149; --danger-bg: rgba(248,81,73,.14); --code-bg:#161b22; }
html[data-theme="light"] { --bg: #ffffff; --canvas: #f6f8fa; --panel: #ffffff; --text: #24292f; --muted: #57606a; --border: #d0d7de; --border-muted: #d8dee4; --accent: #0969da; --accent-hover: #0550ae; --success: #1a7f37; --success-bg: #dafbe1; --warning: #9a6700; --warning-bg: #fff8c5; --danger: #cf222e; --danger-bg: #ffebe9; --code-bg: #f6f8fa; }
* { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--accent-hover); }
code, pre { font-family:var(--mono); }
pre { background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; overflow:auto; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; background:var(--bg); color:var(--text); font:inherit; }
label { font-weight:600; display:grid; gap:6px; }
button { font:inherit; }
.container { width:min(1120px, calc(100% - 32px)); margin-inline:auto; }
.muted { color:var(--muted); }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700; }