/* Simply Blockchain v9.0.16
   Five-video YouTube Tutorials depth carousel. All motion is brief,
   transform/opacity-only and paused when the component is off-screen. */

.sbx-tutorials-section{overflow:hidden!important}
.sbx-tutorials-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
}
.sbx-tutorials-head .sbx-title{margin-bottom:0}
.sbx-tutorials-head>.sbx-btn{flex:0 0 auto}

.sbx-tutorial-carousel{
  position:relative;
  isolation:isolate;
  min-width:0;
  padding:8px 54px 48px;
}
.sbx-carousel-viewport{
  position:relative;
  height:clamp(380px,34vw,470px);
  overflow:hidden;
  contain:layout paint;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.sbx-tutorial-carousel__track{position:absolute;inset:0}
.sbx-carousel-slide{
  --sbx-slide-x:0px;
  --sbx-slide-y:0px;
  --sbx-slide-scale:1;
  position:absolute!important;
  z-index:1;
  top:4px;
  left:50%;
  display:block!important;
  width:min(56%,650px)!important;
  margin:0!important;
  padding:10px 10px 13px!important;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  overflow:hidden;
  color:#f4f6f8;
  background:
    radial-gradient(circle at 92% 12%,rgba(252,79,0,.10),transparent 38%),
    linear-gradient(145deg,rgba(28,33,38,.92),rgba(5,8,10,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(252,79,0,.10),
    0 18px 44px rgba(0,0,0,.34);
  opacity:0;
  pointer-events:none;
  transform:translate3d(calc(-50% + var(--sbx-slide-x)),var(--sbx-slide-y),0) scale(var(--sbx-slide-scale));
  transform-origin:center top;
  transition:transform .62s cubic-bezier(.2,.72,.25,1),opacity .44s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.sbx-carousel-slide .sbx-card-thumb{
  aspect-ratio:16/9!important;
  border-radius:10px!important;
  transform:none!important;
}
.sbx-carousel-slide h3{
  min-height:38px;
  margin:10px 3px 4px!important;
  font-size:15px!important;
  line-height:1.28!important;
  transition:opacity .25s ease;
}
.sbx-carousel-slide .sbx-meta{
  margin:0 3px;
  transition:opacity .25s ease;
}
.sbx-carousel-slide[data-position="0"]{
  --sbx-slide-x:0px;
  --sbx-slide-y:0px;
  --sbx-slide-scale:1;
  z-index:5;
  opacity:1;
  pointer-events:auto;
  border-color:rgba(252,79,0,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 0 0 1px rgba(252,79,0,.13),
    0 18px 46px rgba(0,0,0,.40),
    0 8px 24px rgba(252,79,0,.08);
}
.sbx-carousel-slide[data-position="-1"]{
  --sbx-slide-x:calc(-1 * min(37vw,450px));
  --sbx-slide-y:26px;
  --sbx-slide-scale:.78;
  z-index:3;
  opacity:.58;
  pointer-events:auto;
}
.sbx-carousel-slide[data-position="1"]{
  --sbx-slide-x:min(37vw,450px);
  --sbx-slide-y:26px;
  --sbx-slide-scale:.78;
  z-index:3;
  opacity:.58;
  pointer-events:auto;
}
.sbx-carousel-slide[data-position="-2"]{
  --sbx-slide-x:calc(-1 * min(64vw,770px));
  --sbx-slide-y:46px;
  --sbx-slide-scale:.59;
  z-index:2;
  opacity:.20;
}
.sbx-carousel-slide[data-position="2"]{
  --sbx-slide-x:min(64vw,770px);
  --sbx-slide-y:46px;
  --sbx-slide-scale:.59;
  z-index:2;
  opacity:.20;
}
.sbx-carousel-slide:not([data-position="0"]) h3,
.sbx-carousel-slide:not([data-position="0"]) .sbx-meta{opacity:0}
.sbx-carousel-slide[data-position="-1"]:hover,
.sbx-carousel-slide[data-position="1"]:hover{opacity:.76;border-color:rgba(252,79,0,.28)}
.sbx-carousel-slide[data-position="0"]:hover{border-color:rgba(252,79,0,.52)}

.sbx-carousel-arrow{
  position:absolute;
  z-index:8;
  top:42%;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,rgba(27,32,37,.94),rgba(5,8,10,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.28);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
}
.sbx-carousel-arrow:hover{transform:scale(1.055);border-color:rgba(252,79,0,.52)}
.sbx-carousel-arrow:active{transform:scale(.95)}
.sbx-carousel-arrow svg{width:20px;height:20px}
.sbx-carousel-arrow--previous{left:4px}
.sbx-carousel-arrow--previous svg{transform:rotate(180deg)}
.sbx-carousel-arrow--next{right:4px}

.sbx-carousel-footer{
  position:absolute;
  z-index:9;
  left:54px;
  right:54px;
  bottom:0;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sbx-carousel-dots{display:flex;align-items:center;justify-content:center;gap:8px}
.sbx-carousel-dot{
  width:8px;
  height:8px;
  min-width:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.23);
  box-shadow:none;
  cursor:pointer;
  transition:width .24s ease,background-color .24s ease;
}
.sbx-carousel-dot.is-active{width:24px;border-radius:8px;background:#fc4f00}
.sbx-carousel-hint{display:none;color:#969da4;font-size:11px}
.sbx-screen-reader-text{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Progressive fallback: if JavaScript is blocked, keep every tutorial visible
   as a conventional responsive grid instead of leaving an empty stage. */
.sbx-tutorial-carousel:not(.sbx-carousel-ready){padding:8px 0 0}
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-viewport{
  height:auto;
  overflow:visible;
  contain:none;
}
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-tutorial-carousel__track{
  position:static;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-slide{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  opacity:1;
  pointer-events:auto;
  transform:none!important;
}
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-slide h3,
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-slide .sbx-meta{opacity:1}
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-arrow,
.sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-carousel-footer{display:none}

@media (min-width:701px) and (max-width:1024px){
  .sbx-tutorial-carousel{padding-inline:42px}
  .sbx-carousel-viewport{height:clamp(330px,49vw,410px)}
  .sbx-carousel-slide{width:min(68%,610px)!important}
  .sbx-carousel-slide[data-position="-1"]{--sbx-slide-x:-43vw}
  .sbx-carousel-slide[data-position="1"]{--sbx-slide-x:43vw}
  .sbx-carousel-slide[data-position="-2"]{--sbx-slide-x:-72vw}
  .sbx-carousel-slide[data-position="2"]{--sbx-slide-x:72vw}
  .sbx-carousel-arrow--previous{left:0}
  .sbx-carousel-arrow--next{right:0}
  .sbx-carousel-footer{left:42px;right:42px}
}

@media (max-width:700px){
  .home .sbx-tutorials-section{padding:20px 0 17px!important}
  .sbx-tutorials-head{
    display:grid;
    align-items:start;
    gap:12px;
    padding:0 17px;
    margin-bottom:10px;
  }
  .sbx-tutorials-head .sbx-title{font-size:25px!important}
  .sbx-tutorials-head>.sbx-btn{width:100%!important}
  .sbx-tutorial-carousel{padding:7px 0 48px}
  .sbx-carousel-viewport{height:clamp(272px,83vw,348px)}
  .sbx-carousel-slide{
    top:3px;
    width:86%!important;
    padding:7px 7px 10px!important;
    border-radius:12px;
  }
  .sbx-carousel-slide h3{
    min-height:34px;
    margin:8px 3px 3px!important;
    font-size:14px!important;
  }
  .sbx-carousel-slide[data-position="-1"]{
    --sbx-slide-x:-54vw;
    --sbx-slide-y:18px;
    --sbx-slide-scale:.72;
    opacity:.44;
  }
  .sbx-carousel-slide[data-position="1"]{
    --sbx-slide-x:54vw;
    --sbx-slide-y:18px;
    --sbx-slide-scale:.72;
    opacity:.44;
  }
  .sbx-carousel-slide[data-position="-2"],
  .sbx-carousel-slide[data-position="2"]{opacity:0}
  .sbx-carousel-arrow{top:auto;bottom:0;width:38px;height:38px}
  .sbx-carousel-arrow--previous{left:17px}
  .sbx-carousel-arrow--next{right:17px}
  .sbx-carousel-footer{left:62px;right:62px;justify-content:space-between}
  .sbx-carousel-hint{display:inline}
  .sbx-tutorial-carousel:not(.sbx-carousel-ready){padding:7px 17px 0}
  .sbx-tutorial-carousel:not(.sbx-carousel-ready) .sbx-tutorial-carousel__track{grid-template-columns:1fr}
}

@media (max-width:390px){
  .sbx-carousel-viewport{height:286px}
  .sbx-carousel-hint{display:none}
  .sbx-carousel-footer{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .sbx-carousel-slide,
  .sbx-carousel-arrow,
  .sbx-carousel-dot{transition:none!important}
}