/* YouTube facade embed - shared by homepage & product pages */
.yt-facade{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#0f1720;
  border-radius:12px;
  overflow:hidden;
  isolation:isolate;
}
.yt-facade__play{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
  font:inherit;
  color:inherit;
}
.yt-facade__play:focus-visible{
  outline:3px solid var(--blue,#3b6ea5);
  outline-offset:-3px;
}
.yt-facade__media{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.yt-facade__icon{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:68px;
  height:48px;
  transition:transform .18s ease, filter .18s ease;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
  pointer-events:none;
}
.yt-facade__icon-bg{fill:#212121;fill-opacity:.9}
.yt-facade__play:hover .yt-facade__icon,
.yt-facade__play:focus-visible .yt-facade__icon{transform:translate(-50%,-50%) scale(1.06)}
.yt-facade__play:hover .yt-facade__icon-bg,
.yt-facade__play:focus-visible .yt-facade__icon-bg{fill:#f00;fill-opacity:1}
.yt-facade iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Overlay mode: play button sits on an existing screenshot inside .frame */
.yt-facade--overlay{
  position:absolute;
  inset:0;
  border-radius:0;
  background:transparent;
  aspect-ratio:auto;
  height:auto;
}
.frame{position:relative}
.yt-facade--overlay .yt-facade__play{
  background:rgba(15,23,32,.18);
  transition:background .18s ease;
}
.yt-facade--overlay .yt-facade__play:hover,
.yt-facade--overlay .yt-facade__play:focus-visible{
  background:rgba(15,23,32,.32);
}
.yt-facade--overlay.yt-facade--playing{
  background:#0f1720;
}
.frame:has(.yt-facade--playing) > img{
  visibility:hidden;
}

/* Tutorial block (product intro pages) - grid ready for more videos */
.tutorial-list{
  display:grid;
  gap:28px;
}
.tutorial-item{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:28px;
  align-items:center;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e6e3db);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--shadow,0 1px 3px rgba(30,26,14,.06));
}
.tutorial-item__body h3{
  margin:0 0 12px;
  font-family:var(--serif,"Noto Serif TC",serif);
  font-size:22px;
  line-height:1.4;
  color:var(--navy,#1e2a38);
}
.tutorial-item__steps{
  margin:0 0 20px;
  padding-left:1.25em;
  color:var(--body,#4b5563);
  font-size:15.5px;
  line-height:1.85;
}
.tutorial-item__steps li{margin:0 0 6px}
.tutorial-item__steps li:last-child{margin-bottom:0}
.tutorial-item__meta{
  margin:0 0 16px;
  font-size:13.5px;
  color:var(--muted,#6b6a5f);
}
@media (max-width:860px){
  .tutorial-item{
    grid-template-columns:1fr;
    padding:16px;
    gap:18px;
  }
}