.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 200;
  transform: translateY(-180%);
  border-radius: .75rem;
  background: #fff;
  padding: .7rem 1rem;
  color: #111827;
  font-size: .875rem;
  font-weight: 800;
  transition: transform .15s;
}

.skip-link:focus { transform: translateY(0); }

.content-shell {
  width: min(1120px, calc(100% - 2rem));
  min-height: 70vh;
  margin: 0 auto;
  padding: 1.5rem 0 5rem;
}

.content-topbar,
.site-footer__inner,
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.content-topbar { padding-bottom: 1.5rem; }
.content-brand { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.08rem; font-weight: 900; letter-spacing: -.025em; }
.content-brand img { width: 2.25rem; height: 2.25rem; }
.content-brand span span { color: #a78bfa; }
.content-actions { display: flex; align-items: center; gap: .35rem; color: #cbd5e1; font-size: .875rem; font-weight: 700; }
.content-actions a { border-radius: .75rem; padding: .65rem .85rem; transition: background-color .15s, color .15s; }
.content-actions a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.content-actions .content-primary-link { background: #7c3aed; color: #fff; }
.content-actions .content-primary-link:hover { background: #8b5cf6; }

.content-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; color: #64748b; font-size: .82rem; }
.content-breadcrumb a { color: #c4b5fd; }
.content-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .2rem; }

.content-hero { max-width: 780px; padding: 4.5rem 0 3rem; }
.content-hero h1 { margin-top: .8rem; font-size: clamp(2.5rem, 7vw, 4.75rem); line-height: 1.02; font-weight: 900; letter-spacing: -.055em; }
.content-hero > p:not(.eyebrow):not(.content-updated) { margin-top: 1.35rem; color: #94a3b8; font-size: 1.15rem; line-height: 1.8; }
.content-updated { margin-top: 1rem; color: #64748b; font-size: .82rem; font-weight: 700; }

.content-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 3rem; align-items: start; }
.content-toc { position: sticky; top: 1.5rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 1rem; background: rgb(255 255 255 / .04); padding: 1.15rem; }
.content-toc > strong { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.content-toc ol { display: grid; gap: .7rem; margin-top: .9rem; padding: 0; list-style: none; }
.content-toc a { color: #94a3b8; font-size: .875rem; line-height: 1.45; }
.content-toc a:hover { color: #c4b5fd; }

.content-article { min-width: 0; }
.content-article > section { scroll-margin-top: 2rem; border: 1px solid rgb(255 255 255 / .1); border-radius: 1.5rem; background: rgb(255 255 255 / .045); padding: clamp(1.25rem, 4vw, 2rem); box-shadow: 0 20px 45px rgb(0 0 0 / .1); }
.content-article > section + section { margin-top: 1rem; }
.content-article h2 { color: #fff; font-size: 1.45rem; line-height: 1.25; font-weight: 900; letter-spacing: -.025em; }
.content-article p { margin-top: 1rem; color: #cbd5e1; line-height: 1.8; }
.content-article ul { display: grid; gap: .7rem; margin-top: 1rem; padding-left: 1.3rem; color: #cbd5e1; line-height: 1.7; list-style: disc; }
.content-article li::marker { color: #a78bfa; }

.content-links { display: grid; gap: .75rem; margin-top: 1.25rem; }
.content-links a { display: grid; gap: .3rem; border: 1px solid rgb(167 139 250 / .25); border-radius: 1rem; background: rgb(139 92 246 / .08); padding: 1rem; transition: transform .15s, border-color .15s, background-color .15s; }
.content-links a:hover { transform: translateY(-2px); border-color: rgb(167 139 250 / .65); background: rgb(139 92 246 / .14); }
.content-links strong { color: #ddd6fe; }
.content-links span { color: #94a3b8; font-size: .875rem; line-height: 1.5; }
.content-notice { margin-top: 1.25rem; border-left: 3px solid #fbbf24; border-radius: .35rem .9rem .9rem .35rem; background: rgb(251 191 36 / .08); padding: 1rem 1.15rem; color: #fde68a; font-size: .9rem; line-height: 1.65; }
.content-closing { margin-top: 1.25rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgb(124 58 237 / .26), rgb(34 211 238 / .08)); padding: 1.5rem; }
.content-closing strong { color: #fff; font-size: 1.15rem; }
.content-closing p { margin-top: .4rem; }
.content-closing a { display: inline-block; margin-top: .9rem; color: #c4b5fd; font-weight: 800; }

.site-footer { border-top: 1px solid rgb(255 255 255 / .1); background: rgb(3 2 8 / .28); }
.site-footer__inner { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 3.5rem 0 2.25rem; align-items: flex-start; }
.site-footer__about { max-width: 370px; }
.site-footer__brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font-size: 1.05rem; font-weight: 900; }
.site-footer__brand img { width: 2rem; height: 2rem; }
.site-footer__brand span span { color: #a78bfa; }
.site-footer__about p { margin-top: .9rem; color: #64748b; font-size: .875rem; line-height: 1.7; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 2rem; }
.site-footer__nav strong { color: #e2e8f0; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.site-footer__nav div { display: grid; align-content: start; gap: .7rem; }
.site-footer__nav a { color: #94a3b8; font-size: .875rem; }
.site-footer__nav a:hover { color: #c4b5fd; }
.site-footer__bottom { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; border-top: 1px solid rgb(255 255 255 / .08); padding: 1.25rem 0 1.75rem; color: #64748b; font-size: .75rem; line-height: 1.6; }
.site-footer__bottom p:last-child { max-width: 640px; text-align: right; }

html.light .content-actions { color: #475569; }
html.light .content-actions a:hover { background: #f1f5f9; color: #0f172a; }
html.light .content-hero > p:not(.eyebrow):not(.content-updated),
html.light .content-article p,
html.light .content-article ul { color: #475569; }
html.light .content-hero h1,
html.light .content-toc > strong,
html.light .content-article h2 { color: #0f172a; }
html.light .content-toc,
html.light .content-article > section { border-color: #e2e8f0; background: #fff; box-shadow: 0 20px 45px rgb(148 163 184 / .12); }
html.light .content-toc a,
html.light .content-links span { color: #64748b; }
html.light .content-links a { background: #f5f3ff; }
html.light .content-links strong { color: #6d28d9; }
html.light .content-notice { color: #92400e; background: #fffbeb; }
html.light .site-footer { border-color: #e2e8f0; background: rgb(248 250 252 / .7); }
html.light .site-footer__brand,
html.light .site-footer__nav strong { color: #0f172a; }
html.light .site-footer__nav a { color: #475569; }
html.light .site-footer__bottom { border-color: #e2e8f0; }

@media (max-width: 800px) {
  .content-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .content-toc { position: static; }
  .site-footer__inner { flex-direction: column; gap: 2.5rem; }
  .site-footer__nav { width: 100%; }
}

@media (max-width: 560px) {
  .content-actions > a:not(.content-primary-link) { display: none; }
  .content-hero { padding: 3.25rem 0 2.25rem; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; }
  .site-footer__bottom p:last-child { text-align: left; }
}