.article-hero{min-height:355px;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 82% 36%,#7b2a87 0%,transparent 38%),linear-gradient(110deg,#10163b,#261144 60%,#101735);border-bottom:1px solid #7456b2}.article-hero:before{content:"";position:absolute;inset:0;background:url('/assets/castle.webp') center 43%/cover no-repeat;opacity:.22;mask-image:linear-gradient(to right,transparent,#000 55%)}.article-hero:after{content:"";position:absolute;right:0;top:0;bottom:0;width:40%;background:url('/assets/hero-right.png') right center/contain no-repeat;filter:hue-rotate(38deg) saturate(1.25);opacity:.88}.article-hero .inner{width:min(1100px,100%);margin:auto;padding:65px 24px;position:relative;z-index:1}.article-hero h1{max-width:680px;font-size:clamp(34px,4.4vw,58px);line-height:1.15;margin:14px 0;color:#fff}.article-hero h1 em{color:#f38bdc;font-style:normal}.article-hero p{max-width:620px;color:#e7e3f7;font-size:18px}.breadcrumbs{font-size:13px;color:#d3c3f4}.article-layout{max-width:1100px;margin:38px auto 80px;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px}.article-body,.article-side{background:#101a36;border:1px solid #485385;border-radius:22px;padding:32px}.article-body h2{color:#f2a4ec;font-size:26px;margin-top:35px;line-height:1.3}.article-body h2:first-child{margin-top:0}.article-body p,.article-body li{color:#dce3f5;line-height:1.9}.article-body a{color:#95d8ff;text-decoration:underline}.article-body .toc{background:#0c1530;border:1px solid #5a5489;border-radius:15px;padding:18px 22px}.article-body .toc a{display:block;margin:9px 0}.article-side{align-self:start;position:sticky;top:15px}.article-side a{display:block;padding:12px 0;border-bottom:1px solid #ffffff20;color:#dce3f5}.article-body details{padding:15px;border:1px solid #ffffff30;border-radius:12px;margin:10px 0}.article-body summary{cursor:pointer;font-weight:700}.article-note{border-left:3px solid #f08bda;padding:12px 18px;background:#201a42;border-radius:8px}.article-hero .inner>*{position:relative;z-index:2}@media(max-width:800px){.article-layout{grid-template-columns:1fr}.article-side{position:static}.article-hero:after{width:65%;opacity:.24}.article-hero .inner{padding:54px 20px}.article-body{padding:23px 20px}}