:root {
  --bg: #f6f1e8;
  --panel: #fffdf8;
  --ink: #1c1610;
  --muted: #6f6456;
  --line: #e6dccb;
  --copper: #c4784a;
  --teal: #2f6f62;
  --code: #1a1612;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Outfit, sans-serif; line-height: 1.6; }
a { color: var(--teal); }
h1, h2, h3 { font-family: Fraunces, serif; letter-spacing: -0.02em; }
.layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 1.4rem 0; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; gap: .6rem; align-items: center; padding: 0 1.2rem 1rem; }
.brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.brand strong { font-family: Fraunces, serif; }
.sec { padding: .7rem 1.2rem .2rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.link { display: block; padding: .35rem 1.2rem; color: var(--ink); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; }
.link:hover, .link.active { background: #f3ebe0; border-left-color: var(--copper); }
.content { padding: 2.2rem 2.6rem 5rem; max-width: 860px; }
.content h1 { font-size: 2.2rem; margin: 0 0 .4rem; }
.content h2 { font-size: 1.35rem; margin: 2.4rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--line); }
code, pre { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .86em; }
code { background: #efe6d8; padding: .1rem .35rem; border-radius: 4px; }
pre { background: var(--code); color: #f3ead8; padding: 1rem 1.1rem; border-radius: var(--radius); overflow: auto; }
pre code { background: none; color: inherit; padding: 0; }
.ep { display: flex; gap: .5rem; align-items: center; background: #efe6d8; padding: .5rem .7rem; border-radius: 8px; font-family: "IBM Plex Mono", monospace; font-size: .85rem; }
.badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 4px; }
.get { background: #dceee6; color: #1d5a46; }
.post { background: #e7eef8; color: #1e3a8a; }
.patch { background: #f5edd4; color: #7a4e12; }
.del { background: #f8e0dc; color: #8a2a1d; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.callout { background: #efe6d8; border-left: 3px solid var(--copper); padding: .8rem 1rem; border-radius: 0 8px 8px 0; }
@media (max-width: 740px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } }