.asp-post{ --asp-accent:#6C2BD9; background:#f6f7fb; color:#0f172a; }
.asp-hero{ position:relative; padding:64px 18px 34px; overflow:hidden; background:#0b1220; color:#fff; }
.asp-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.78; filter:saturate(1.05) contrast(1.05); }
.asp-hero-bg--plain{ background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb,var(--asp-accent) 30%, #0b1220), #0b1220); opacity:1; }
.asp-hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.60) 45%, rgba(0,0,0,.14) 100%); }
.asp-hero-inner{ position:relative; max-width:1100px; margin:0 auto; }
.asp-pill{ display:inline-flex; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:8px 12px; border-radius:999px;
  background: color-mix(in srgb,var(--asp-accent) 22%, transparent);
  border:1px solid color-mix(in srgb,var(--asp-accent) 34%, transparent);
  color:#fff; text-decoration:none;
}
.asp-title{ margin:12px 0 10px; font-size:clamp(30px,3.4vw,52px); line-height:1.06; letter-spacing:-0.02em; max-width:28ch; color:#fff; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.asp-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:14px; opacity:.92; color:#fff; }
.asp-dot{ opacity:.65; }
.asp-excerpt{ margin-top:12px; max-width:70ch; font-size:17px; line-height:1.6; opacity:.95; color:#fff; }

.asp-shell{ padding: 10px 18px 70px; }
.asp-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 280px minmax(0,1fr); gap:26px; align-items:start; }
@media (max-width: 980px){ .asp-grid{ grid-template-columns: 1fr; } }
.asp-sticky{ position:sticky; top:18px; display:grid; gap:14px; }
@media (max-width: 980px){ .asp-sticky{ position:relative; top:auto; } }

.asp-card{ background:#fff; border:1px solid rgba(0,0,0,.10); border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.06); padding:14px; }
.asp-card-title{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:10px; }
.asp-toc a{ display:block; padding:6px 8px; border-radius:10px; text-decoration:none; font-size:14px; line-height:1.3; color:#0f172a; }
.asp-toc a:hover{ background: rgba(0,0,0,.04); }
.asp-toc a.asp-active{ background: color-mix(in srgb,var(--asp-accent) 14%, transparent); border:1px solid color-mix(in srgb,var(--asp-accent) 28%, transparent); }

.asp-share{ display:flex; flex-wrap:wrap; gap:8px; }
.asp-share-btn{ display:inline-flex; padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.10); background:rgba(0,0,0,.02); text-decoration:none; font-size:14px; color:#0f172a; }
.asp-share-btn:hover{ border-color: color-mix(in srgb,var(--asp-accent) 35%, rgba(0,0,0,.10)); background: color-mix(in srgb,var(--asp-accent) 10%, rgba(0,0,0,.02)); }

.asp-prose{ max-width:78ch; font-size:18px; line-height:1.75; color:#0f172a; }
.asp-prose > h1:first-child{ display:none; }
.asp-prose p{ margin:0 0 1em; }
.asp-prose h2{ margin-top:1.5em; font-size:26px; line-height:1.2; letter-spacing:-0.01em; }
.asp-prose h3{ margin-top:1.15em; font-size:21px; line-height:1.25; }
.asp-prose a{ color:var(--asp-accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.asp-prose blockquote{ margin:1.3em 0; padding:14px 16px; border-left:4px solid var(--asp-accent); background:rgba(0,0,0,.03); border-radius:12px; }
.asp-prose img, .asp-prose figure{ max-width:100%; height:auto; border-radius:14px; }

body.asp-post-left-offset{ padding-left: var(--asp-left-offset, 0px) !important; box-sizing:border-box; }
@media (max-width: 980px){ body.asp-post-left-offset{ padding-left:0 !important; } }