.sp-article-page{
  display:grid;
  gap:18px;
}

.sp-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-norm);
  line-height:1.35;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-breadcrumbs::-webkit-scrollbar{
  display:none;
}

.sp-breadcrumbs > *{
  flex:0 0 auto;
}

.sp-breadcrumbs a,
.sp-breadcrumbs span{
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:inherit;
}

.sp-breadcrumbs a{
  opacity:.84;
}

.sp-breadcrumbs a:hover{
  color:var(--sp-accent);
  opacity:1;
}

.sp-breadcrumbs [aria-current="page"]{
  color:var(--sp-muted-2);
}

.sp-breadcrumbs--mobile{
  display:none;
}

.sp-article-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 250px;
  gap:22px;
  align-items:start;
  width:100%;
  min-width:0;
}

.sp-article-main{
  display:grid;
  gap:26px;
  min-width:0;
}

.sp-article-sidebar{
  position:sticky;
  top:calc(var(--sp-header-height) + 18px);
  width:250px;
  min-width:0;
}

.sp-article-sidebar__card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:
    radial-gradient(320px 180px at 0% 0%, var(--sp-accent-alpha-12), transparent 64%),
    var(--sp-gradient-surface);
  box-shadow:var(--sp-shadow-soft);
}

.sp-article-sidebar__card h2{
  position:relative;
  z-index:1;
  margin:0 0 8px;
  color:var(--sp-text);
  font-size:var(--sp-fs-lg);
  line-height:1.1;
  letter-spacing:-.035em;
}

.sp-article-sidebar__card p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:1.55;
}

.sp-article{
  display:grid;
  gap:22px;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

.sp-page-wrap{
  display:grid;
  justify-content:center;
}

.sp-page-card{
  width:min(920px, 100%);
}

.sp-article__thumb{
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  margin:0;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:var(--sp-gradient-media-placeholder);
  box-shadow:var(--sp-shadow-soft);
}

.sp-article__thumb picture{
  display:block;
  width:100%;
  height:100%;
}

.sp-article__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sp-article__thumb--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--sp-white-62);
  font-size:var(--sp-fs-lg);
  font-weight:var(--sp-fw-black);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.sp-article__body{
  display:grid;
  gap:18px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

.sp-article__head{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  border:0;
}

.sp-article__head h1{
  margin:0;
  font-family:var(--sp-font-post-title);
  color:var(--sp-text);
  font-size:var(--sp-fs-post-title);
  line-height:1.02;
  font-weight:var(--sp-fw-medium);
  font-style:italic;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.sp-article__meta{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 3px;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-norm);
  line-height:1;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-article__meta::-webkit-scrollbar{
  display:none;
}

.sp-article__meta > *{
  flex:0 0 auto;
}

.sp-article__meta-row{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
  max-width:none;
  white-space:nowrap;
}

.sp-article__meta-row > *{
  flex:0 0 auto;
}

.sp-article__meta-item,
.sp-article__meta-reading,
.sp-article__meta-views,
.sp-article__meta-rating,
.sp-article__meta-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:30px;
  min-height:30px;
  max-height:30px;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
}

.sp-article__meta-item{
  width:max-content;
  max-width:none;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-norm);
}

.sp-article__meta-badge{
  width:max-content;
  max-width:none;
  padding:0 10px;
  border:1px solid rgba(125, 211, 252, .22);
  border-radius:999px;
  background:rgba(125, 211, 252, .08);
  color:var(--sp-accent-text);
  font-size:var(--sp-fs-xs);
  font-weight:var(--sp-fw-medium);
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.sp-article__meta-badge:hover{
  border-color:rgba(125, 211, 252, .44);
  background:rgba(125, 211, 252, .14);
  color:var(--sp-accent);
}

.sp-article__meta-badge--team{
  border-color:rgba(148, 163, 184, .24);
  background:rgba(148, 163, 184, .08);
  color:var(--sp-text-soft);
}

.sp-article__meta-badge--team:hover{
  border-color:rgba(125, 211, 252, .44);
  background:rgba(125, 211, 252, .12);
  color:var(--sp-accent);
}

.sp-article__meta-reading,
.sp-article__meta-views,
.sp-article__meta-rating{
  gap:5px;
  padding:0;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  font-weight:var(--sp-fw-norm);
}

.sp-article__meta-icon{
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--sp-accent);
}

.sp-article__meta-icon--rating{
  color:#facc15;
}

.sp-article__meta-reading span,
.sp-article__meta-views span,
.sp-article__meta-rating span{
  display:block;
  line-height:1;
}

.sp-entry-content{
  width:100%;
  min-width:0;
  color:var(--sp-text-soft);
  font-size:var(--sp-fs-body);
  line-height:1.75;
}

.sp-entry-content > *:first-child{
  margin-top:0;
}

.sp-entry-content > *:last-child{
  margin-bottom:0;
}

.sp-entry-content p,
.sp-entry-content ul,
.sp-entry-content ol{
  margin:0 0 1.18em;
}

.sp-entry-content h2,
.sp-entry-content h3,
.sp-entry-content h4{
  margin:1.65em 0 .7em;
  font-family:var(--sp-font-display);
  color:var(--sp-text);
  font-weight:var(--sp-fw-medium);
  font-style:normal;
  line-height:1.08;
  letter-spacing:-.03em;
}

.sp-entry-content h2{
  font-size:clamp(27px, 3.6vw, 42px);
}

.sp-entry-content h3{
  font-size:clamp(22px, 2.8vw, 32px);
}

.sp-entry-content ul,
.sp-entry-content ol{
  padding-left:1.25em;
}

.sp-entry-content li{
  margin:0 0 .45em;
}

.sp-entry-content strong{
  color:var(--sp-text);
}

.sp-entry-content a{
  color:var(--sp-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.sp-entry-content h2[id],
.sp-entry-content h3[id]{
  scroll-margin-top:calc(var(--sp-header-height) + 18px);
}

.sp-article-toc{
  margin:1.25em 0 1.6em;
  padding:18px 20px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-card-small);
  background:
    radial-gradient(320px 180px at 0% 0%, var(--sp-accent-alpha-12), transparent 64%),
    var(--sp-white-04);
}

.sp-article-toc__title{
  margin:0 0 10px;
  color:var(--sp-text);
  font-family:var(--sp-font-display);
  font-size:clamp(20px, 2.2vw, 28px);
  font-weight:var(--sp-fw-medium);
  line-height:1.15;
  letter-spacing:-.03em;
}

.sp-article-toc__list{
  display:grid;
  gap:7px;
  margin:0;
  padding-left:1.25em;
}

.sp-article-toc__list li{
  margin:0;
  color:var(--sp-muted);
}

.sp-article-toc__list a{
  color:var(--sp-text-soft);
  text-decoration:none;
}

.sp-article-toc__list a:hover{
  color:var(--sp-accent);
}

.sp-entry-content blockquote{
  margin:1.4em 0;
  padding:18px 20px;
  border-left:3px solid var(--sp-accent);
  border-radius:var(--sp-radius-card-small);
  background:var(--sp-white-04);
  color:var(--sp-text);
}

.sp-entry-content blockquote p{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  font-style:normal;
  font-weight:var(--sp-fw-norm);
}

.sp-entry-content blockquote strong,
.sp-entry-content blockquote b{
  font-weight:var(--sp-fw-norm);
}

.sp-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  margin:1.2em 0 1.35em;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-card-small);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sp-table-scroll::-webkit-scrollbar{
  display:none;
}

.sp-entry-content table{
  width:max-content;
  min-width:100%;
  max-width:none;
  margin:0;
  border:0;
  border-collapse:collapse;
}

.sp-entry-content th,
.sp-entry-content td{
  padding:12px 14px;
  border-bottom:1px solid var(--sp-card-border);
  text-align:left;
}

.sp-entry-content th{
  color:var(--sp-text);
  background:var(--sp-white-05);
}

.sp-entry-content code{
  padding:.18em .35em;
  border-radius:var(--sp-radius-code);
  background:var(--sp-white-08);
  color:var(--sp-accent-text);
}

.sp-entry-content pre{
  padding:18px;
  overflow:auto;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-map-popup);
  background:var(--sp-bg-deep);
}

.sp-article-rating{
  display:grid;
  gap:14px;
  margin:4px 0 0;
  padding:18px;
  border:1px solid var(--sp-card-border);
  border-radius:var(--sp-radius-lg);
  background:
    radial-gradient(320px 160px at 0% 0%, rgba(250, 204, 21, .10), transparent 68%),
    var(--sp-white-04);
  box-shadow:var(--sp-shadow-soft);
}

.sp-article-rating__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  min-width:0;
}

.sp-article-rating__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--sp-accent);
  font-size:var(--sp-fs-xs);
  line-height:var(--sp-line-height-tight);
  font-weight:var(--sp-fw-bold);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.sp-article-rating__kicker::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:var(--sp-radius-pill);
  background:var(--sp-accent);
  box-shadow:0 0 18px var(--sp-accent-alpha-90);
}

.sp-article-rating__summary{
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:1.35;
  text-align:right;
  white-space:nowrap;
}

.sp-article-rating__summary strong{
  color:var(--sp-text);
  font-weight:var(--sp-fw-bold);
}

.sp-article-rating__stars{
  display:flex;
  align-items:center;
  gap:8px;
}

.sp-article-rating__star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(250, 204, 21, .20);
  border-radius:var(--sp-radius-pill);
  background:rgba(255,255,255,.035);
  color:rgba(148, 163, 184, .62);
  cursor:pointer;
  transition:
    transform var(--sp-transition-fast),
    border-color var(--sp-transition-fast),
    background var(--sp-transition-fast),
    color var(--sp-transition-fast);
}

.sp-article-rating__star:hover,
.sp-article-rating__star:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(250, 204, 21, .46);
  background:rgba(250, 204, 21, .10);
  color:#facc15;
  outline:0;
}

.sp-article-rating__star.is-active{
  border-color:rgba(250, 204, 21, .52);
  background:rgba(250, 204, 21, .12);
  color:#facc15;
}

.sp-article-rating__star-icon{
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
}

.sp-article-rating.is-loading .sp-article-rating__star{
  pointer-events:none;
  opacity:.72;
}

.sp-article-rating__message{
  margin:0;
  color:var(--sp-muted);
  font-size:var(--sp-fs-sm);
  line-height:1.45;
}

.sp-article-related{
  display:grid;
  gap:16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.sp-article-related__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0;
  border:0;
}

.sp-article-related__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin:0;
  color:var(--sp-accent);
  font-size:var(--sp-fs-xs);
  line-height:var(--sp-line-height-tight);
  font-weight:var(--sp-fw-bold);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.sp-article-related__kicker::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:var(--sp-radius-pill);
  background:var(--sp-accent);
  box-shadow:0 0 18px var(--sp-accent-alpha-90);
}

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

.wp-caption,
.aligncenter{
  max-width:100%;
}

.alignwide{
  width:min(1120px, 100%);
  margin-inline:auto;
}

.alignfull{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

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

  .sp-article-sidebar{
    display:none;
  }
}

@media (max-width:680px){
  body.single-post .sp-content{
    padding-top:0;
  }

  .sp-article-page{
    gap:0;
  }

  .sp-breadcrumbs--desktop{
    display:none;
  }

  .sp-breadcrumbs--mobile{
    display:flex;
    width:100%;
    max-width:100%;
    margin:0;
    padding:3px 0 0;
    font-size:var(--sp-fs-xs);
  }

  .sp-breadcrumbs a,
  .sp-breadcrumbs span{
    font-size:var(--sp-fs-xs);
  }

  .sp-article-layout{
    margin-top:0;
  }

  .sp-article-main{
    gap:24px;
  }

  .sp-article{
    gap:16px;
  }

  .sp-article__thumb{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    border:0;
    border-radius:0 0 var(--sp-radius-mobile) var(--sp-radius-mobile);
    box-shadow:0 20px 42px rgba(56, 189, 248, .32);
  }

  .sp-article__thumb--has-mobile{
    aspect-ratio:1/1;
  }

  .sp-article__body{
    gap:16px;
  }

  .sp-article__head h1{
    font-size:clamp(30px, 9vw, 44px);
  }

  .sp-article__meta{
    display:grid;
    gap:6px;
    width:100%;
    max-width:100%;
    overflow:visible;
    padding:0;
    font-size:var(--sp-fs-xxs);
  }

  .sp-article__meta-row{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:7px;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 3px;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .sp-article__meta-row::-webkit-scrollbar{
    display:none;
  }

  .sp-article__meta-row > *{
    flex:0 0 auto;
  }

  .sp-article__meta-item,
  .sp-article__meta-reading,
  .sp-article__meta-views,
  .sp-article__meta-rating,
  .sp-article__meta-badge{
    height:28px;
    min-height:28px;
    max-height:28px;
  }

  .sp-article__meta-item,
  .sp-article__meta-reading,
  .sp-article__meta-views,
  .sp-article__meta-rating{
    font-size:var(--sp-fs-sm);
  }

  .sp-article__meta-badge{
    padding:0 9px;
    font-size:var(--sp-fs-sm);
  }

  .sp-article__meta-icon{
    width:15px;
    height:15px;
    flex-basis:15px;
  }

  .sp-entry-content{
    font-size:var(--sp-fs-mobile-body);
    line-height:1.72;
  }

  .sp-table-scroll table{
    min-width:720px;
  }

  .sp-article-toc{
    padding:16px;
    border-radius:var(--sp-radius-mobile);
  }

  .sp-article-rating{
    gap:13px;
    padding:15px;
    border-radius:var(--sp-radius-mobile);
  }

  .sp-article-rating__head{
    display:grid;
    gap:8px;
  }

  .sp-article-rating__summary{
    text-align:left;
    white-space:normal;
  }

  .sp-article-rating__stars{
    gap:7px;
  }

  .sp-article-rating__star{
    width:36px;
    height:36px;
  }

  .sp-article-rating__star-icon{
    width:21px;
    height:21px;
    flex-basis:21px;
  }

  .sp-article-rating__message{
    font-size:var(--sp-fs-xxs);
  }
}

@media (max-width:767px){
  .sp-article-related__kicker{
    font-size:var(--sp-fs-xxs);
  }

  .sp-article-related__head{
    align-items:flex-start;
  }
}

.sp-section-title{
  margin:0;
  color:var(--sp-text);
  font-size:clamp(20px, 2vw, 28px);
  font-weight:var(--sp-fw-medium);
  line-height:1.15;
}

@media (max-width:767px){
  .sp-article__head h1{
    font-size:clamp(28px, 7.8vw, 38px);
    line-height:1.04;
    text-wrap:wrap;
    text-wrap-style:auto;
  }

  .sp-entry-content{
    font-size:19px;
    line-height:1.72;
  }

  .sp-entry-content h2{
    font-size:clamp(24px, 6.2vw, 30px);
    line-height:1.12;
  }

  .sp-entry-content h3{
    font-size:clamp(20px, 5.4vw, 25px);
    line-height:1.16;
  }
}

@media (max-width:680px){
  .sp-entry-content{
    color:#E4EEFB;
  }

  .sp-entry-content p,
  .sp-entry-content li{
    color:#E4EEFB;
    font-size:18px;
    line-height:1.72;
    font-weight:400;
  }

  .sp-entry-content strong,
  .sp-entry-content b{
    color:#F2F5F9;
    font-weight:650;
  }
}