:root {
  --paper:#f7f4ee;
  --paper-2:#efebe2;
  --card:#fcfbf8;
  --ink:#1e1c18;
  --ink-soft:#5b5549;
  --muted:#8f897b;
  --line:#dfd9cf;
  --accent:#696550;
  --accent-soft:#a59f8e;
  --quote:#eee8db;
  --shadow:0 20px 50px rgba(30,28,24,.08);
  --radius:24px;
  --font:'Satoshi','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#faf8f3 0%, var(--paper) 100%);font-family:var(--font);color:var(--ink)}
a{color:inherit;text-decoration:none}
.shell{max-width:1120px;margin:0 auto;padding:28px 22px 80px}
.topbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.topbar h1{margin:0;font-size:42px;line-height:1.02;letter-spacing:-.04em;font-weight:500}
.topbar p{max-width:56ch;margin:10px 0 0;color:var(--ink-soft);line-height:1.6;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:14px;color:var(--ink-soft);transition:.18s ease}
.btn:hover{transform:translateY(-1px);color:var(--ink);background:#fff}
.hero-card{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin-bottom:28px}
.panel{background:rgba(252,251,248,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-copy{padding:28px}
.hero-copy h2{margin:0 0 12px;font-size:28px;line-height:1.08;letter-spacing:-.03em;font-weight:500}
.hero-copy p{margin:0;color:var(--ink-soft);line-height:1.65}
.meta{padding:26px;display:grid;gap:14px}
.meta-block{padding:14px 0;border-top:1px solid var(--line)}
.meta-block:first-child{padding-top:0;border-top:0}
.meta-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.meta-text{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.content{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.toc{position:sticky;top:18px;padding:20px;background:rgba(252,251,248,.85);border:1px solid var(--line);border-radius:20px}
.toc h3{margin:0 0 14px;font-size:15px;font-weight:500}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.toc a{display:block;padding:10px 12px;border-radius:12px;font-size:13px;color:var(--ink-soft)}
.toc a:hover{background:var(--paper-2);color:var(--ink)}
.doc{padding:34px;background:rgba(252,251,248,.94);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.doc .lead{font-size:18px;color:var(--ink-soft);line-height:1.7;margin:0 0 26px}
.doc h1,.doc h2,.doc h3,.doc h4{letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.doc h1{font-size:44px;line-height:1.02;margin:0 0 18px}
.doc h2{font-size:29px;line-height:1.12;margin:40px 0 14px;padding-top:8px;border-top:1px solid var(--line)}
.doc h3{font-size:22px;line-height:1.2;margin:26px 0 10px}
.doc h4{font-size:18px;line-height:1.25;margin:20px 0 8px}
.doc p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 14px}
.doc strong{color:var(--ink)}
.doc ul,.doc ol{margin:0 0 18px 20px;padding:0;color:var(--ink-soft)}
.doc li{margin:0 0 8px;padding-left:4px;font-size:16px;line-height:1.7}
.doc blockquote{margin:20px 0;padding:18px 20px;border-left:3px solid var(--accent-soft);background:var(--quote);border-radius:0 18px 18px 0}
.doc blockquote p{margin:0;color:var(--ink);font-size:20px;line-height:1.5;letter-spacing:-.02em}
.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.doc code{padding:.12rem .35rem;border-radius:8px;background:var(--paper-2);font-size:.92em}
.footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width: 960px){.hero-card,.content{grid-template-columns:1fr}.toc{position:relative;top:0}.actions{justify-content:flex-start}}
@media (max-width: 640px){.shell{padding:20px 16px 64px}.topbar h1{font-size:34px}.doc{padding:22px}.doc h1{font-size:34px}.doc h2{font-size:24px}}