/* Base */
:root{
  --text:#111;
  --muted:#5f6b7a;
  --link:#0d9488;      /* teal */
  --border:#e5e7eb;
  --bg:#ffffff;
  --card:#fff;
  --radius:12px;
  --shadow:0 6px 18px rgba(17,17,17,.06);
  --maxw: 900px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
}

/* Layout */
.container{ width:min(100%, var(--maxw)); margin:0 auto; padding:0 20px }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin:18px 0;
}

/* Header */
.header{
  padding:28px 0 14px;
  border-bottom:1px solid var(--border);
  background:#fff;
  position:sticky; top:0; z-index:10;
}
.header h1{ margin:0 0 6px; font-size:28px }
.byline{ margin:0 0 10px; color:var(--muted) }

/* TOC */
.toc{ display:flex; flex-wrap:wrap; gap:12px; padding:8px 0 2px }
.toc a{
  color:var(--link); text-decoration:none; font-weight:600;
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
}
.toc a:hover{ background:#f8fafc }

/* Content */
h2{ margin:0 0 12px; font-size:22px }
p,ul,ol{ margin:8px 0 }
ul{ padding-left:1.1rem }
code{ background:#f3f4f6; padding:.1em .35em; border-radius:6px }

.gloss{ list-style: disc inside; }
.gloss li{ margin:6px 0 }

/* Footer */
.footer{
  margin:28px 0 40px; color:var(--muted); text-align:center;
}