:root {
  --bg: #f8f5f1;
  --fg: #1a1715;
  --muted: #6e665f;
  --faint: #aaa199;
  --line: #e6dfd7;
  --panel: rgba(60, 40, 20, 0.035);
  --accent: #c9572f;
  --code-border: #ddd4ca;
  --syn-keyword: #c0412f;
  --syn-string: #a9560f;
  --syn-name: #2b67c4;
  --glow-low: rgba(214, 140, 100, 0.20);
  --glow-top: rgba(255, 225, 190, 0.45);
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151311; --fg: #f1ede8; --muted: #9d958d; --faint: #5f5852; --line: #2b2724; --panel: rgba(255, 245, 235, 0.035);
    --accent: #e0764e; --code-border: #35302c; --syn-keyword: #ef8a76; --syn-string: #eda76c; --syn-name: #7fb0f0;
    --glow-low: rgba(150, 90, 62, 0.30); --glow-top: rgba(255, 214, 170, 0.06); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
/* A soft warm light: low from the bottom right, faint from above, fixed behind the page. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 65% at 88% 100%, var(--glow-low), transparent 72%), radial-gradient(55% 45% at 30% -8%, var(--glow-top), transparent 70%); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
code, pre { font-family: var(--mono); font-size: 0.875em; }
p code, li code, td code { background: var(--panel); padding: 0.1em 0.35em; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.nav .name { display: flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; }
.nav .name img { width: 20px; height: 20px; border-radius: 5px; }
.nav .links { margin-left: auto; display: flex; gap: 22px; }
.nav .links a, .mono-link { font: 13.5px/1.2 var(--mono); color: var(--muted); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav .links a:hover, .mono-link:hover { color: var(--fg); border-bottom-color: var(--muted); }

.button { display: inline-block; padding: 9px 16px; border-radius: 8px; font: 500 15px/1.2 var(--sans); text-decoration: none; border: 1px solid var(--line); color: var(--fg); background: transparent; cursor: pointer; }
.button:hover { border-color: var(--faint); }
.button.dark { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.button.dark:hover { opacity: 0.88; }
.button:disabled { opacity: 0.45; cursor: default; }

.muted { color: var(--muted); }
.small { font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
th, td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th { font-weight: 500; color: var(--muted); font-size: 14px; }
.table-scroll { overflow-x: auto; }

.code-wrap { position: relative; }
pre.code { background: transparent; border: 1px solid var(--code-border); border-radius: 4px; padding: 22px 24px; overflow-x: auto; line-height: 1.75; margin: 0; font-size: 14px; }
pre.code .k { color: var(--syn-keyword); }
pre.code .s { color: var(--syn-string); }
pre.code .p { color: var(--syn-name); }
pre.code .c { color: var(--muted); }
.copy { position: absolute; top: 10px; right: 10px; font: 12px/1 var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--code-border); border-radius: 5px; padding: 6px 9px; cursor: pointer; opacity: 0.75; transition: opacity 0.15s, color 0.15s; }
.code-wrap:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--fg); }

footer { margin-top: 112px; padding: 28px 0 56px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
footer a { font: 13.5px/1.2 var(--mono); color: var(--accent); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
footer a:hover { border-bottom-color: var(--accent); }
footer span { font-size: 13.5px; color: var(--faint); }