:root{
  color-scheme:light;
  --bg:#f5f7ff;
  --bg-alt:#ffffff;
  --surface:rgba(255,255,255,.9);
  --ink:#0f153c;
  --muted:#596189;
  --accent:#3a6bfd;
  --accent-soft:rgba(58,107,253,.18);
  --accent-strong:rgba(58,107,253,.58);
  --danger-soft:rgba(255,112,96,.14);
  --border:rgba(15,20,60,.12);
  --border-strong:rgba(15,20,60,.22);
  --shadow:0 32px 72px rgba(15,20,60,.18);
  --radius-lg:28px;
  --radius-md:20px;
  --radius-sm:14px;
}
:root[data-theme="light"]{
  color-scheme:light;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#040917;
  --bg-alt:#091125;
  --surface:rgba(12,20,42,.86);
  --ink:#e8ecff;
  --muted:#9ca7cd;
  --accent:#7ea2ff;
  --accent-soft:rgba(126,162,255,.24);
  --accent-strong:rgba(126,162,255,.62);
  --danger-soft:rgba(255,140,126,.22);
  --border:rgba(126,162,255,.28);
  --border-strong:rgba(126,162,255,.4);
  --shadow:0 34px 82px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#040917;
    --bg-alt:#091125;
    --surface:rgba(12,20,42,.86);
    --ink:#e8ecff;
    --muted:#9ca7cd;
    --accent:#7ea2ff;
    --accent-soft:rgba(126,162,255,.24);
    --accent-strong:rgba(126,162,255,.62);
    --danger-soft:rgba(255,140,126,.22);
    --border:rgba(126,162,255,.28);
    --border-strong:rgba(126,162,255,.4);
    --shadow:0 34px 82px rgba(0,0,0,.55);
  }
}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(150deg,rgba(58,107,253,.12),transparent 48%),linear-gradient(0deg,var(--bg),var(--bg));
  min-height:100vh;
  color:var(--ink);
  transition:background .35s ease,color .35s ease;
}
html[data-theme="dark"] body{background:linear-gradient(160deg,rgba(126,162,255,.16),transparent 54%),linear-gradient(0deg,var(--bg),var(--bg));}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body{background:linear-gradient(160deg,rgba(126,162,255,.16),transparent 54%),linear-gradient(0deg,var(--bg),var(--bg));}
}
main.article{max-width:1180px;margin:0 auto;padding:120px 24px 140px;}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:56px;align-items:flex-start;}
main.article article{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,248,255,.94));border:1px solid var(--border);box-shadow:var(--shadow);padding:68px clamp(28px,6vw,80px);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;isolation:isolate;}
main.article article::before{content:"";position:absolute;inset:-35% 42% 55% -25%;background:radial-gradient(420px 420px at top left,rgba(58,107,253,.18),transparent 72%);pointer-events:none;}
main.article article::after{content:"";position:absolute;inset:auto -32% -46% 52%;background:radial-gradient(360px 360px at bottom right,rgba(255,255,255,.82),transparent 76%);pointer-events:none;}
main.article article:hover{transform:translateY(-6px);box-shadow:0 40px 96px rgba(15,20,60,.22);border-color:var(--border-strong);}
html[data-theme="dark"] main.article article{background:linear-gradient(180deg,rgba(12,18,38,.92),rgba(9,14,30,.88));}
html[data-theme="dark"] main.article article::after{background:radial-gradient(360px 360px at bottom right,rgba(126,162,255,.3),transparent 76%);}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) main.article article{background:linear-gradient(180deg,rgba(12,18,38,.92),rgba(9,14,30,.88));}
  html:not([data-theme="light"]) main.article article::after{background:radial-gradient(360px 360px at bottom right,rgba(126,162,255,.3),transparent 76%);}
}
main.article article header{display:flex;flex-direction:column;gap:20px;margin-bottom:48px;}
main.article article header h1{margin:0;font-size:clamp(2.4rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance;}
.article-tags{display:flex;gap:12px;flex-wrap:wrap;margin:0;padding:0;list-style:none;color:var(--muted);}
.article-tags span{padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:600;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.article-tags span:hover{border-color:var(--accent-strong);transform:translateY(-2px);}
.summary{margin:0;font-size:1.16rem;line-height:1.78;color:var(--muted);max-width:720px;}
.meta{color:var(--muted);font-size:.92rem;}
.article-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:34px;}
.article-meta-card{position:relative;padding:22px 24px;border-radius:var(--radius-md);border:1px solid var(--border);background:rgba(255,255,255,.52);box-shadow:0 16px 36px rgba(15,20,60,.12);display:grid;gap:10px;min-height:132px;align-content:start;}
.article-meta-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(58,107,253,.08),transparent 72%);pointer-events:none;}
.article-meta-label,.article-meta-value{position:relative;z-index:1;margin:0;}
.article-meta-label{font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.article-meta-value{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;line-height:1.2;color:var(--ink);}
.content{margin-top:40px;line-height:1.82;font-size:1.08rem;color:var(--ink);display:grid;gap:22px;}
.content > *:first-child{margin-top:0;}
.content h2,.content h3,.content h4,.content h5,.content h6{margin:48px 0 16px;color:var(--ink);line-height:1.25;font-weight:700;scroll-margin-top:140px;}
.content h2{font-size:clamp(1.8rem,2.6vw,2.2rem);}
.content h3{font-size:clamp(1.5rem,2vw,1.7rem);}
.content h4{font-size:1.28rem;}
.content p,.content ul,.content ol{margin:0;}
.content ul,.content ol{padding-inline-start:26px;display:grid;gap:14px;}
.content a{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s ease;}
.content a:hover{border-bottom-color:var(--accent-strong);}
.content blockquote{margin:20px 0;padding:24px 28px;border-left:4px solid var(--accent);background:rgba(58,107,253,.08);border-radius:var(--radius-sm);color:var(--ink);font-size:1.05rem;font-style:italic;}
html[data-theme="dark"] .content blockquote{background:rgba(126,162,255,.2);color:var(--ink);}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .content blockquote{background:rgba(126,162,255,.2);color:var(--ink);}
}
.content pre{margin:24px 0;padding:24px 28px;background:#0f172a;color:#f8fbff;border-radius:var(--radius-sm);overflow:auto;font-family:"JetBrains Mono","Fira Code","SFMono-Regular",monospace;font-size:.92rem;}
.content code:not(pre code){padding:2px 6px;border-radius:8px;background:rgba(58,107,253,.12);font-family:"JetBrains Mono","Fira Code","SFMono-Regular",monospace;font-size:.95rem;}
.content img,.content figure{border-radius:var(--radius-md);}
.content figure{margin:24px 0;overflow:hidden;}
.content figure figcaption{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center;}
.takeaway-inline{position:relative;margin:32px 0 40px;padding:28px 32px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent-soft),rgba(255,255,255,.92));border:1px solid var(--accent-strong);box-shadow:0 24px 52px rgba(58,107,253,.24);display:grid;gap:14px;}
.takeaway-inline > :first-child{margin-top:0;font-size:1.08rem;font-weight:600;font-style:italic;color:var(--ink);}
.takeaway-inline > :last-child{margin-bottom:0;}
html[data-theme="dark"] .takeaway-inline{background:linear-gradient(135deg,var(--accent-soft),rgba(12,18,38,.9));box-shadow:0 28px 64px rgba(0,0,0,.55);}
html[data-theme="dark"] .takeaway-inline > :first-child{color:var(--ink);}
html[data-theme="dark"] .article-meta-card{background:rgba(9,14,30,.76);box-shadow:0 22px 48px rgba(0,0,0,.4);}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .takeaway-inline{background:linear-gradient(135deg,var(--accent-soft),rgba(12,18,38,.9));box-shadow:0 28px 64px rgba(0,0,0,.55);}
  html:not([data-theme="light"]) .takeaway-inline > :first-child{color:var(--ink);}
  html:not([data-theme="light"]) .article-meta-card{background:rgba(9,14,30,.76);box-shadow:0 22px 48px rgba(0,0,0,.4);}
}
img{max-width:100%;height:auto;border-radius:var(--radius-md);}
.article-aside{position:sticky;top:120px;display:grid;gap:28px;}
.aside-block{background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:0 24px 52px rgba(15,20,60,.14);padding:28px clamp(20px,4vw,32px);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.aside-block:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(15,20,60,.2);border-color:var(--border-strong);}
html[data-theme="dark"] .aside-block{box-shadow:0 26px 64px rgba(0,0,0,.55);}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .aside-block{box-shadow:0 26px 64px rgba(0,0,0,.55);}
}
.aside-block h2{margin:0 0 16px;font-size:1.08rem;font-weight:700;color:var(--ink);letter-spacing:.08em;}
.aside-block ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.aside-block li{line-height:1.5;color:var(--muted);}
.aside-block a{color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;}
.aside-block a:hover{border-bottom-color:var(--accent-strong);color:var(--ink);}
.toc-block ul{gap:12px;border-inline-start:2px solid var(--border);padding-inline-start:18px;}
.cta-block{display:grid;gap:20px;}
.cta-headline{margin:0;}
.cta-headline h3{margin:0;font-size:1.4rem;font-weight:700;color:var(--ink);line-height:1.38;}
.cta-button-group{display:grid;gap:14px;}
.cta-button{display:flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:var(--radius-sm);font-weight:600;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;border:1px solid transparent;}
.cta-button.primary{background:linear-gradient(135deg,var(--accent),#6790ff);color:#ffffff;box-shadow:0 24px 48px rgba(58,107,253,.26);}
.cta-button.primary:hover{transform:translateY(-2px);box-shadow:0 30px 60px rgba(58,107,253,.3);}
.cta-button.secondary{background:var(--danger-soft);color:#c2402d;border-color:rgba(194,64,45,.35);box-shadow:0 20px 40px rgba(194,64,45,.18);}
.cta-button.secondary:hover{transform:translateY(-2px);border-color:rgba(194,64,45,.55);box-shadow:0 28px 52px rgba(194,64,45,.24);}
.article .cta-block .cta-button.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent-strong);box-shadow:none;}
.article .cta-block .cta-button.secondary:hover{background:var(--accent-soft);color:var(--ink);}
.cta-button.ghost{background:transparent;color:var(--ink);border-color:var(--border);box-shadow:none;}
.cta-button.ghost:hover{transform:translateY(-2px);border-color:var(--border-strong);background:rgba(15,20,60,.06);}
html[data-theme="dark"] .cta-headline h3{color:var(--ink);}
html[data-theme="dark"] .cta-button.secondary{color:#ffb7a3;border-color:rgba(255,170,150,.48);box-shadow:0 24px 56px rgba(255,140,126,.26);}
html[data-theme="dark"] .cta-button.secondary:hover{border-color:rgba(255,170,150,.72);box-shadow:0 30px 64px rgba(255,140,126,.32);}
html[data-theme="dark"] .article .cta-block .cta-button.secondary{color:var(--accent);border-color:var(--accent-strong);}
html[data-theme="dark"] .article .cta-block .cta-button.secondary:hover{background:rgba(126,162,255,.18);color:var(--ink);}
html[data-theme="dark"] .cta-button.ghost{color:var(--ink);border-color:rgba(255,255,255,.22);}
html[data-theme="dark"] .cta-button.ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .cta-headline h3{color:var(--ink);}
  html:not([data-theme="light"]) .cta-button.secondary{color:#ffb7a3;border-color:rgba(255,170,150,.48);box-shadow:0 24px 56px rgba(255,140,126,.26);}
  html:not([data-theme="light"]) .cta-button.secondary:hover{border-color:rgba(255,170,150,.72);box-shadow:0 30px 64px rgba(255,140,126,.32);}
  html:not([data-theme="light"]) .article .cta-block .cta-button.secondary{color:var(--accent);border-color:var(--accent-strong);}
  html:not([data-theme="light"]) .article .cta-block .cta-button.secondary:hover{background:rgba(126,162,255,.18);color:var(--ink);}
  html:not([data-theme="light"]) .cta-button.ghost{color:var(--ink);border-color:rgba(255,255,255,.22);}
  html:not([data-theme="light"]) .cta-button.ghost:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.08);}
}
.related-block ul{gap:12px;}
@media (max-width:1024px){
  .article-layout{grid-template-columns:1fr;gap:40px;}
  .article-aside{position:static;}
  .article-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  main.article{padding:96px 18px 120px;}
  main.article article{padding:52px 22px;}
  main.article article header{margin-bottom:36px;}
  .article-meta-grid{grid-template-columns:1fr;gap:14px;}
  .article-meta-card{min-height:0;padding:20px;}
  .content h2,.content h3,.content h4,.content h5,.content h6{margin-top:36px;}
  .article-tags span{padding:6px 12px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

main.article article,
.content,
.aside-block{
  overflow-wrap:anywhere;
}

@media (max-width:600px){
  .cta-button{width:100%;}
  .aside-block{padding:24px 20px;}
  .content{font-size:1rem;}
  .content blockquote,
  .content pre,
  .takeaway-inline{padding:20px;}
}

@media (max-width:420px){
  main.article{padding:88px 14px 104px;}
  main.article article{padding:42px 18px;}
}