:root{
  --bg:#f4f7fb;
  --paper:#fff;
  --navy:#071321;
  --navy2:#102a45;
  --text:#172338;
  --muted:#69798f;
  --line:rgba(23,35,56,.11);
  --blue:#2d73ff;
  --cyan:#18c6d8;
  --mint:#42dcb4;
  --max:1160px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  color:var(--text);
  background:var(--bg);
  font-family:
    Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
}

.blog-container{
  width:min(var(--max),calc(100% - 32px));
  margin:auto;
}

.blog-topbar{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
  background:rgba(7,19,33,.92);
  backdrop-filter:blur(17px);
}

.blog-nav{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.blog-logo img{
  display:block;
  width:120px;
  height:42px;
  object-fit:contain;
}

.blog-nav nav{
  display:flex;
  align-items:center;
  gap:5px;
}

.blog-nav nav a{
  padding:9px 12px;
  border-radius:10px;
  color:#c7d4e3;
  font-size:14px;
  font-weight:700;
}

.blog-nav nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.07);
}

.blog-nav .blog-nav-cta{
  color:#fff;
  background:linear-gradient(
    135deg,var(--blue),var(--cyan)
  );
}

.blog-hero{
  padding:105px 0 90px;
  color:#fff;
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(45,115,255,.30),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 15%,
      rgba(24,198,216,.18),
      transparent 31%
    ),
    linear-gradient(145deg,var(--navy),var(--navy2));
}

.blog-hero span,
.article-meta span{
  color:#5ae1cb;
  font-size:12px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.blog-hero h1{
  max-width:900px;
  margin-top:14px;
  font-size:clamp(43px,7vw,78px);
  line-height:.96;
  letter-spacing:-.06em;
}

.blog-hero p{
  max-width:760px;
  margin-top:22px;
  color:#b8c7d9;
  font-size:18px;
}

.blog-list-section{
  padding:72px 0 95px;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.blog-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:21px;
  background:var(--paper);
  box-shadow:0 20px 55px rgba(16,30,50,.07);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}

.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 70px rgba(16,30,50,.12);
}

.blog-card-cover{
  aspect-ratio:3/2;
  display:block;
  overflow:hidden;
  background:#eef3f8;
}

.blog-card-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .35s ease;
}

.blog-card:hover .blog-card-cover img{
  transform:scale(1.035);
}

.blog-card-cover-empty{
  display:grid;
  place-items:center;
  color:#55dfca;
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(24,198,216,.28),
      transparent 32%
    ),
    linear-gradient(145deg,#071320,#123653);
}

.blog-card-cover-empty span{
  font-size:17px;
  font-weight:850;
}

.blog-card-body{
  padding:21px;
}

.blog-card-meta,
.article-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.blog-card-meta span{
  color:#2d73ff;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
}

.blog-card-meta time,
.article-meta time{
  color:#8492a5;
  font-size:11px;
}

.blog-card h2{
  margin-top:15px;
  font-size:22px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.blog-card p{
  margin-top:12px;
  color:var(--muted);
}

.blog-read{
  display:inline-flex;
  margin-top:22px;
  color:#2768db;
  font-weight:850;
}

.blog-empty{
  grid-column:1/-1;
  padding:50px;
  text-align:center;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}

.article-hero{
  padding:85px 0 75px;
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(24,198,216,.20),
      transparent 30%
    ),
    linear-gradient(145deg,var(--navy),var(--navy2));
}

.article-hero-inner{
  max-width:950px;
}

.article-back{
  display:inline-flex;
  margin-bottom:30px;
  color:#b9c8da;
  font-size:13px;
  font-weight:750;
}

.article-meta{
  justify-content:flex-start;
}

.article-hero h1{
  max-width:950px;
  margin-top:18px;
  font-size:clamp(42px,6vw,73px);
  line-height:.98;
  letter-spacing:-.06em;
}

.article-hero p{
  max-width:780px;
  margin-top:22px;
  color:#b7c7d9;
  font-size:18px;
}

.article-cover{
  margin-top:38px;
}

.article-cover img{
  width:100%;
  max-height:570px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(7,19,33,.18);
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:48px;
  align-items:start;
  padding-top:58px;
  padding-bottom:90px;
}

.article-content{
  min-width:0;
  padding:40px;
  border:1px solid var(--line);
  border-radius:23px;
  background:#fff;
  box-shadow:0 20px 55px rgba(16,30,50,.06);
  font-size:17px;
}

.article-content h2{
  margin:38px 0 13px;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.article-content h3{
  margin:28px 0 10px;
  font-size:23px;
}

.article-content p,
.article-content ul,
.article-content ol{
  margin-top:16px;
}

.article-content ul,
.article-content ol{
  padding-left:24px;
}

.article-content li{
  margin-top:7px;
}

.article-content a{
  color:#2768db;
  text-decoration:underline;
}

.article-cta{
  position:sticky;
  top:95px;
  padding:25px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(24,198,216,.25),
      transparent 34%
    ),
    linear-gradient(145deg,#0a192b,#123a5e);
  box-shadow:0 25px 65px rgba(7,19,33,.17);
}

.article-cta > span{
  color:#5be1cb;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
}

.article-cta h2{
  margin-top:11px;
  font-size:28px;
  line-height:1.05;
}

.article-cta p{
  margin-top:13px;
  color:#bac9db;
}

.article-cta > a{
  min-height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:19px;
  padding:11px 14px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(
    135deg,var(--blue),var(--cyan)
  );
  font-weight:850;
}

.article-cta .article-telegram{
  margin-top:9px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.05);
}

.blog-footer{
  padding:28px 0;
  color:#8797ab;
  background:#07111e;
  font-size:13px;
}

@media(max-width:900px){
  .blog-grid{
    grid-template-columns:1fr 1fr;
  }

  .article-layout{
    grid-template-columns:1fr;
  }

  .article-cta{
    position:static;
  }
}

@media(max-width:650px){
  .blog-nav{
    min-height:62px;
  }

  .blog-nav nav a:not(.blog-nav-cta){
    display:none;
  }

  .blog-nav .blog-nav-cta{
    padding:8px 10px;
    font-size:11px;
  }

  .blog-hero{
    padding:70px 0 60px;
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-list-section{
    padding:45px 0 65px;
  }

  .article-hero{
    padding:58px 0 52px;
  }

  .article-content{
    padding:23px;
    font-size:16px;
  }

  .article-layout{
    gap:22px;
    padding-top:28px;
    padding-bottom:65px;
  }
}

/* ==========================================================
   FinAr Blog Professional Typography v3
   ========================================================== */

.article-content{
  max-width:820px;
  padding:48px 54px;
  color:#26354a;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.78;
  letter-spacing:-.008em;
}

.article-content p{
  margin:0 0 22px;
}

.article-content h1,
.article-content h2,
.article-content h3{
  color:#132138;
  font-weight:850;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.article-content h2{
  margin:50px 0 18px;
  font-size:34px;
  line-height:1.12;
}

.article-content h3{
  margin:38px 0 15px;
  font-size:26px;
  line-height:1.18;
}

.article-content ul,
.article-content ol{
  margin:12px 0 27px;
  padding-left:27px;
}

.article-content li{
  margin:9px 0;
  padding-left:5px;
}

.article-content strong{
  color:#17263c;
  font-weight:800;
}

.article-content blockquote{
  margin:32px 0;
  padding:20px 24px;
  border-left:4px solid #2d73ff;
  border-radius:0 13px 13px 0;
  color:#314761;
  background:#eef4ff;
}

.article-content img{
  width:100%;
  height:auto;
  display:block;
  margin:34px 0;
  border-radius:16px;
  box-shadow:0 22px 55px rgba(16,30,50,.11);
}

.article-content a{
  color:#226de0;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

@media(max-width:700px){
  .article-content{
    padding:27px 21px;
    font-size:17px;
    line-height:1.72;
  }

  .article-content h2{
    margin-top:40px;
    font-size:29px;
  }

  .article-content h3{
    font-size:23px;
  }
}

/* ==========================================================
   FinAr Blog Professional Typography v3
   ========================================================== */

.article-content{
  max-width:820px;
  padding:48px 54px;
  color:#26354a;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.78;
  letter-spacing:-.008em;
}

.article-content p{
  margin:0 0 22px;
}

.article-content h1,
.article-content h2,
.article-content h3{
  color:#132138;
  font-weight:850;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.article-content h2{
  margin:50px 0 18px;
  font-size:34px;
  line-height:1.12;
}

.article-content h3{
  margin:38px 0 15px;
  font-size:26px;
  line-height:1.18;
}

.article-content ul,
.article-content ol{
  margin:12px 0 27px;
  padding-left:27px;
}

.article-content li{
  margin:9px 0;
  padding-left:5px;
}

.article-content strong{
  color:#17263c;
  font-weight:800;
}

.article-content blockquote{
  margin:32px 0;
  padding:20px 24px;
  border-left:4px solid #2d73ff;
  border-radius:0 13px 13px 0;
  color:#314761;
  background:#eef4ff;
}

.article-content img{
  width:100%;
  height:auto;
  display:block;
  margin:34px 0;
  border-radius:16px;
  box-shadow:0 22px 55px rgba(16,30,50,.11);
}

.article-content a{
  color:#226de0;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

@media(max-width:700px){
  .article-content{
    padding:27px 21px;
    font-size:17px;
    line-height:1.72;
  }

  .article-content h2{
    margin-top:40px;
    font-size:29px;
  }

  .article-content h3{
    font-size:23px;
  }
}

/* =========================================================
   FinAr Blog V2 — зміст, заголовки та читабельність
   ========================================================= */

.article-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.article-reading-time::before {
  content: "•";
  opacity: .55;
}

.article-toc {
  margin: 0 0 42px;
  padding: 26px 28px;
  border: 1px solid rgba(15, 42, 66, .10);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(245, 249, 252, .96),
      rgba(255, 255, 255, .98)
    );
  box-shadow: 0 16px 45px rgba(15, 42, 66, .06);
}

.article-toc-heading {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 750;
  color: #102a43;
}

.article-toc ol {
  margin: 0;
  padding-left: 22px;
}

.article-toc li {
  margin: 8px 0;
  line-height: 1.45;
}

.article-toc-level-3 {
  margin-left: 18px !important;
  font-size: .95em;
}

.article-toc a {
  color: #31556f;
  text-decoration: none;
  transition:
    color .18s ease,
    padding-left .18s ease;
}

.article-toc a:hover {
  color: #0e7490;
  padding-left: 3px;
}

.article-content h2,
.article-content h3 {
  scroll-margin-top: 110px;
}

.article-content h2 {
  margin-top: 50px;
}

.article-content h3 {
  margin-top: 34px;
}

.article-content p,
.article-content li {
  overflow-wrap: anywhere;
}

.article-content img {
  max-width: 100%;
  height: auto;
}

.article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

.article-content th,
.article-content td {
  min-width: 130px;
}

@media (max-width: 720px) {
  .article-toc {
    margin-bottom: 30px;
    padding: 21px 20px;
    border-radius: 16px;
  }

  .article-toc-level-3 {
    margin-left: 8px !important;
  }

  .article-content h2 {
    margin-top: 38px;
  }

  .article-content h3 {
    margin-top: 28px;
  }
}


/* =========================================================
   FinAr Blog UI V2
   ========================================================= */

.article-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 4px;
  pointer-events: none;
  background: rgba(255,255,255,.08);
}

.article-reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(
    90deg,
    #287cff,
    #19c2d8
  );
  box-shadow: 0 0 14px rgba(25,194,216,.45);
  transition: width .08s linear;
}

/* Компактніший Hero */

.article-hero {
  padding-top: clamp(54px,7vw,92px);
  padding-bottom: clamp(54px,7vw,88px);
}

.article-hero-inner {
  max-width: 1040px;
}

.article-hero h1 {
  max-width: 1000px;
  margin-top: 20px;
  font-size: clamp(42px,5.4vw,76px);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.article-hero > .blog-container > p,
.article-hero-inner > p {
  max-width: 850px;
  margin-top: 26px;
  font-size: clamp(17px,1.45vw,20px);
  line-height: 1.65;
}

/* Автор */

.article-author {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 30px;
}

.article-author-avatar {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #06192b;
  font-size: 17px;
  font-weight: 850;
  background: linear-gradient(
    135deg,
    #eefc7a,
    #28d1d4
  );
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.article-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-author-info strong {
  color: #fff;
  font-size: 15px;
}

.article-author-info span {
  color: rgba(225,238,248,.72);
  font-size: 13px;
  line-height: 1.4;
}

/* Sticky CTA */

.article-cta {
  position: sticky;
  top: 96px;
  align-self: flex-start;
}

/* Нижній CTA */

.article-bottom-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 32px;
  align-items: center;
  margin: 56px 0 48px;
  padding: clamp(28px,4vw,44px);
  overflow: hidden;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(38,207,212,.28),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #071d31,
      #0b3855
    );
  box-shadow: 0 24px 60px rgba(8,30,49,.18);
}

.article-bottom-cta-label {
  display: block;
  margin-bottom: 10px;
  color: #5ce1dc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.article-bottom-cta h2 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(25px,3vw,36px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.article-bottom-cta p {
  max-width: 650px;
  margin: 15px 0 0;
  color: rgba(229,240,248,.78);
  font-size: 16px;
  line-height: 1.65;
}

.article-bottom-cta-actions {
  display: flex;
  min-width: 235px;
  flex-direction: column;
  gap: 10px;
}

.article-bottom-cta-actions a {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 13px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.article-bottom-cta-actions a:hover {
  transform: translateY(-2px);
}

.article-bottom-cta-primary {
  color: #fff;
  background: linear-gradient(
    100deg,
    #287cff,
    #19bfd6
  );
  box-shadow: 0 14px 30px rgba(24,157,220,.24);
}

.article-bottom-cta-secondary {
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.06);
}

/* Читайте також */

.article-related {
  margin: 56px 0 48px;
}

.article-related-heading {
  margin-bottom: 24px;
}

.article-related-heading > span {
  color: #1595a5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.article-related-heading h2 {
  margin: 7px 0 0;
  color: #0c2845;
  font-size: clamp(28px,3vw,38px);
  line-height: 1.12;
}

.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.article-related-card {
  overflow: hidden;
  border: 1px solid rgba(15,42,66,.09);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 45px rgba(15,42,66,.07);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.article-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(15,42,66,.12);
}

.article-related-image {
  display: block;
  height: 160px;
  overflow: hidden;
  background: #0b2b45;
}

.article-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.article-related-card:hover
.article-related-image img {
  transform: scale(1.035);
}

.article-related-image-empty {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.9);
  font-weight: 800;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(40,207,212,.35),
      transparent 45%
    ),
    #0b2b45;
}

.article-related-body {
  padding: 20px;
}

.article-related-meta {
  display: flex;
  gap: 9px;
  justify-content: space-between;
  color: #6e8191;
  font-size: 11px;
}

.article-related-meta span {
  color: #168d9d;
  font-weight: 750;
}

.article-related-body h3 {
  margin: 13px 0 10px;
  font-size: 19px;
  line-height: 1.25;
}

.article-related-body h3 a {
  color: #0b2946;
  text-decoration: none;
}

.article-related-body p {
  display: -webkit-box;
  margin: 0 0 16px;
  overflow: hidden;
  color: #52697b;
  font-size: 14px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.article-related-link {
  color: #137d91;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

/* Мобільна версія */

@media (max-width: 980px) {
  .article-hero h1 {
    font-size: clamp(40px,7vw,62px);
  }

  .article-cta {
    position: static;
  }

  .article-related-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .article-reading-progress {
    height: 3px;
  }

  .article-hero {
    padding-top: 44px;
    padding-bottom: 50px;
  }

  .article-hero h1 {
    margin-top: 16px;
    font-size: clamp(35px,10.5vw,48px);
    line-height: 1.02;
  }

  .article-hero-inner > p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.58;
  }

  .article-author {
    margin-top: 24px;
  }

  .article-bottom-cta {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
    padding: 27px 22px;
    border-radius: 20px;
  }

  .article-bottom-cta-actions {
    width: 100%;
    min-width: 0;
  }

  .article-related-grid {
    grid-template-columns: 1fr;
  }

  .article-related-image {
    height: 190px;
  }
}


/* =========================================================
   Blog UI V2 — виправлення перекриття Hero меню
   ========================================================= */

.article-hero {
  padding-top: clamp(115px, 10vw, 145px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.article-hero-inner {
  max-width: 1040px;
}

.article-hero h1 {
  max-width: 980px;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.01;
  letter-spacing: -.042em;
}

@media (max-width: 720px) {
  .article-hero {
    padding-top: 100px;
    padding-bottom: 46px;
  }

  .article-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.04;
  }
}

/* =========================================================
   Blog V3 visible breadcrumbs
   ========================================================= */

.article-breadcrumbs {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  overflow: hidden;
  color: rgba(224,237,247,.65);
  font-size: 13px;
  line-height: 1.4;
}

.article-breadcrumbs a {
  flex: 0 0 auto;
  color: rgba(224,237,247,.82);
  text-decoration: none;
  transition: color .18s ease;
}

.article-breadcrumbs a:hover {
  color: #5ce1dc;
}

.article-breadcrumbs > span:last-child {
  overflow: hidden;
  color: rgba(224,237,247,.55);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .article-breadcrumbs {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .article-breadcrumbs > span:last-child {
    max-width: 48vw;
  }
}


/* =========================================================
   FINAR BLOG UI V3 STYLES
   Sticky TOC / Scroll Spy / Mobile TOC / Heading Links
   ========================================================= */

.article-layout{
  grid-template-columns:minmax(0,1fr) 310px;
  gap:48px;
}

.article-content{
  width:100%;
  max-width:none;
}

.article-sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.article-sidebar .article-toc{
  position:sticky;
  top:92px;
  z-index:5;
  width:100%;
  max-height:calc(100vh - 116px);
  margin:0;
  padding:22px 20px;
  overflow:hidden;
  border:1px solid rgba(15,42,66,.10);
  border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 16px 45px rgba(15,42,66,.07),
    0 2px 10px rgba(15,42,66,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.article-sidebar .article-toc-heading{
  position:relative;
  margin:0 0 15px;
  padding:0 30px 13px 0;
  border-bottom:1px solid rgba(15,42,66,.08);
  color:#102a43;
  font-size:13px;
  font-weight:850;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.article-sidebar .article-toc-heading::after{
  content:"";
  position:absolute;
  right:1px;
  top:1px;
  width:18px;
  height:18px;
  border-radius:6px;
  background:
    linear-gradient(#287cff,#287cff) center 5px/8px 2px no-repeat,
    linear-gradient(#287cff,#287cff) center 9px/8px 2px no-repeat,
    linear-gradient(#287cff,#287cff) center 13px/8px 2px no-repeat;
  opacity:.68;
}

.article-sidebar .article-toc ol{
  max-height:calc(100vh - 190px);
  margin:0;
  padding:0 4px 0 0;
  overflow-y:auto;
  list-style:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(40,124,255,.28) transparent;
}

.article-sidebar .article-toc ol::-webkit-scrollbar{
  width:5px;
}

.article-sidebar .article-toc ol::-webkit-scrollbar-thumb{
  border-radius:10px;
  background:rgba(40,124,255,.25);
}

.article-sidebar .article-toc li{
  position:relative;
  margin:2px 0;
  padding:0;
}

.article-sidebar .article-toc-level-3{
  margin-left:13px !important;
  font-size:14px;
}

.article-sidebar .article-toc a{
  position:relative;
  display:block;
  padding:9px 10px 9px 15px;
  border-radius:10px;
  color:#53677d;
  font-size:14px;
  font-weight:600;
  line-height:1.42;
  text-decoration:none;
  transition:
    color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.article-sidebar .article-toc a::before{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:3px;
  height:0;
  border-radius:6px;
  background:linear-gradient(#287cff,#19c2d8);
  transform:translateY(-50%);
  transition:height .2s ease;
}

.article-sidebar .article-toc a:hover{
  padding-left:15px;
  color:#1e5fbf;
  background:rgba(40,124,255,.055);
  transform:translateX(2px);
}

.article-sidebar .article-toc a.is-active{
  color:#155dcc;
  background:linear-gradient(
    90deg,
    rgba(40,124,255,.12),
    rgba(25,194,216,.055)
  );
  font-weight:800;
}

.article-sidebar .article-toc a.is-active::before{
  height:56%;
}

.article-sidebar .article-cta{
  position:relative;
  top:auto;
  width:100%;
}

.article-content h2[id],
.article-content h3[id]{
  position:relative;
}

.article-heading-link{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:9px;
  padding:0;
  border:1px solid transparent;
  border-radius:10px;
  color:#7a8ca1;
  background:transparent;
  cursor:pointer;
  opacity:0;
  vertical-align:middle;
  transform:translateY(-1px);
  transition:
    opacity .18s ease,
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.article-content h2:hover .article-heading-link,
.article-content h3:hover .article-heading-link,
.article-heading-link:focus-visible{
  opacity:1;
}

.article-heading-link:hover,
.article-heading-link:focus-visible{
  border-color:rgba(40,124,255,.20);
  color:#226de0;
  background:rgba(40,124,255,.075);
  outline:none;
  transform:translateY(-1px) scale(1.04);
}

.article-heading-link.is-copied{
  opacity:1;
  color:#0f9f7f;
  border-color:rgba(15,159,127,.25);
  background:rgba(15,159,127,.09);
}

.article-heading-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.article-back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1000;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.17);
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#185ed4,#16aac9);
  box-shadow:
    0 15px 35px rgba(20,91,190,.28),
    0 3px 10px rgba(7,19,33,.14);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.92);
  transition:
    opacity .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.article-back-to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.article-back-to-top:hover{
  box-shadow:
    0 19px 42px rgba(20,91,190,.36),
    0 4px 12px rgba(7,19,33,.16);
  transform:translateY(-2px) scale(1.02);
}

.article-back-to-top svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:900px){
  .article-layout{
    grid-template-columns:1fr;
    gap:22px;
  }

  .article-content{
    order:2;
  }

  .article-sidebar{
    display:contents;
  }

  .article-sidebar .article-toc{
    position:relative;
    top:auto;
    order:1;
    max-height:none;
    padding:0;
    border-radius:17px;
  }

  .article-sidebar .article-toc-heading{
    min-height:58px;
    display:flex;
    align-items:center;
    margin:0;
    padding:15px 54px 15px 20px;
    border-bottom:0;
    cursor:pointer;
    user-select:none;
    text-transform:none;
    font-size:16px;
    letter-spacing:-.01em;
  }

  .article-sidebar .article-toc-heading::after{
    content:"";
    top:50%;
    right:20px;
    width:10px;
    height:10px;
    border:0;
    border-right:2px solid #287cff;
    border-bottom:2px solid #287cff;
    border-radius:0;
    background:none;
    opacity:1;
    transform:translateY(-70%) rotate(45deg);
    transition:transform .22s ease;
  }

  .article-sidebar .article-toc.is-open
  .article-toc-heading::after{
    transform:translateY(-25%) rotate(225deg);
  }

  .article-sidebar .article-toc ol{
    max-height:0;
    padding:0 18px;
    overflow:hidden;
    opacity:0;
    transition:
      max-height .32s ease,
      opacity .22s ease,
      padding .32s ease;
  }

  .article-sidebar .article-toc.is-open ol{
    max-height:65vh;
    padding:0 18px 18px;
    overflow-y:auto;
    opacity:1;
  }

  .article-sidebar .article-cta{
    order:3;
  }
}

@media(max-width:650px){
  .article-back-to-top{
    right:15px;
    bottom:15px;
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .article-heading-link{
    width:30px;
    height:30px;
    margin-left:5px;
    opacity:.65;
  }

  .article-heading-link svg{
    width:16px;
    height:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .article-sidebar .article-toc a,
  .article-heading-link,
  .article-back-to-top,
  .article-sidebar .article-toc ol{
    scroll-behavior:auto;
    transition:none;
  }
}