:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --text:#0b0c0f;
  --muted:#5b6070;
  --hair:#e7e9f2;
  --shadow: 0 40px 110px rgba(7, 10, 20, .12);
  --radius: 22px;
  --max: 920px;
  --accent: #ae36fc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{
  left:18px;top:18px;width:auto;height:auto;padding:10px 14px;background:#fff;border:1px solid var(--hair);
  border-radius:12px;box-shadow: var(--shadow);z-index:10;
}
.page{min-height:100%}
.hero{
  position:relative;
  padding: 88px 18px 58px;
  background: radial-gradient(1200px 520px at 50% 0%, rgba(174,54,252,.14), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  border-bottom: 1px solid var(--hair);
}
.hero__inner{width:min(var(--max), 100%);margin:0 auto;text-align:center}
.brand{display:flex;justify-content:center;margin-bottom: 26px}
.brand__logo{height: 200px;width:auto;object-fit:contain;margin-bottom: -50px}
.hero__title{margin:0;font-size: clamp(34px, 4.3vw, 52px);letter-spacing:-0.02em;line-height:1.08}
.hero__title strong{font-weight: 750}
.hero__subtitle{margin: 12px 0 0;color: var(--muted);font-size: 16px}
.content{padding: 26px 18px 90px}
.paper{
  width:min(var(--max), 100%);margin:0 auto;background: var(--paper);
  border:1px solid var(--hair);border-radius: var(--radius);
  box-shadow: var(--shadow);overflow:hidden;
}
.meta{padding: 26px 28px 22px;border-bottom: 1px solid var(--hair)}
.meta__updated{margin:0;color: var(--muted);font-size: 13px}
.meta__toc{margin-top: 14px;display:flex;flex-wrap: wrap;gap: 10px 14px}
.meta__toc a{
  font-size: 13px;color: #27304a;text-decoration: none;border-bottom: 1px solid transparent;
}
.meta__toc a:hover{border-bottom-color: rgba(39,48,74,.35)}
.doc{padding: 8px 28px 8px}
.doc__section{padding: 18px 0;border-bottom: 1px solid var(--hair)}
.doc__section:last-child{border-bottom:none}
h2{margin: 0 0 8px;font-size: 18px;letter-spacing:-0.01em}
h3{margin: 0 0 10px;font-size: 15px}
p{margin: 10px 0;color:#1b1f2b;line-height: 1.65}
ul{margin: 10px 0 10px 18px;color:#1b1f2b;line-height:1.6}
li{margin: 6px 0}
a{color: var(--accent)}
a:hover{opacity:.9}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:.96em}
.callout{
  margin: 14px 0 0;padding: 16px;border: 1px solid var(--hair);
  border-radius: 18px;background: linear-gradient(180deg, rgba(174,54,252,.06), rgba(174,54,252,.02));
}
.callout__title{font-weight:650;font-size:13px;color:#2c2f3a;margin-bottom:8px}
.callout__body p{margin:6px 0}
.tldr{
  margin-top: 16px;padding: 16px;border-radius: 18px;border: 1px solid rgba(174,54,252,.18);
  background: radial-gradient(700px 260px at 20% 0%, rgba(174,54,252,.10), transparent 55%),
              linear-gradient(180deg, rgba(11,12,15,.02), rgba(11,12,15,.00));
}
.footer{padding: 18px 28px;border-top: 1px solid var(--hair);background: #fbfbfe}
.footer p{margin:0;color: var(--muted);font-size: 13px}
@media (max-width: 720px){
  .hero{padding: 72px 16px 46px}
  .meta,.doc,.footer{padding-left: 18px;padding-right: 18px}
  .meta__toc{gap: 10px 10px}
}