/* Supplementary styles scoped to this illustrated tutorial */
.tutorial-start{margin:2rem 0 2.8rem}.tutorial-video{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#060a10;border:1px solid rgba(79,208,229,.35)}
.tutorial-video iframe{display:block;width:100%;height:100%;border:0}.tutorial-toc{padding:1.5rem 1.7rem;margin:3rem 0;border:1px solid var(--colour-line);background:rgba(79,208,229,.03)}
.tutorial-toc h2{margin:.4rem 0 1.2rem;font-size:1.65rem}.tutorial-toc__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1.25rem}
.tutorial-toc__links a{font-size:.84rem;line-height:1.45;text-decoration:none;border-bottom:1px solid rgba(79,208,229,.13);padding:.25rem 0}
.tutorial-toc__links a:hover{text-decoration:underline}.tutorial-figure{margin:1.4rem auto 1.9rem!important;border:1px solid rgba(255,255,255,.08);padding:clamp(.5rem,1.4vw,.85rem);background:rgba(255,255,255,.025);text-align:center;overflow:hidden}
.tutorial-figure a{display:inline-block;max-width:100%;cursor:zoom-in}.tutorial-figure img{display:block;width:auto;max-width:100%;height:auto;max-height:640px;object-fit:contain}
.tutorial-example{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem 1.25rem;border-left:3px solid var(--colour-accent);background:rgba(79,208,229,.055);color:#d6e5ed;font:0.93rem/1.7 ui-monospace,Consolas,monospace}
.tutorial-callout{padding:1.05rem 1.2rem;border-left:3px solid var(--colour-accent);background:rgba(79,208,229,.065);margin:1.65rem 0;color:#d7e7ed}.tutorial-callout>strong{color:#b9f3fa}.tutorial-callout p{margin:.35rem 0 0}
.tutorial-listline{margin:.3rem 0!important}.tutorial-sample{font-family:ui-monospace,Consolas,monospace}.tutorial-download{margin:3rem 0 1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid rgba(79,208,229,.35);background:rgba(79,208,229,.04)}
.tutorial-download h2{margin:.8rem 0}.tutorial-download__link{display:inline-flex!important;max-width:100%;padding:1rem 1.2rem!important;border:1px solid var(--colour-accent)!important;background:rgba(79,208,229,.09);text-decoration:none!important;color:#b9f3fa;font-weight:700;line-height:1.5}
@media(max-width:680px){.tutorial-toc__links{grid-template-columns:1fr}.tutorial-toc{padding:1.1rem}.tutorial-download__link{font-size:.9rem}}

/* Click-to-play preview: local art stays visible even when browser tracking protections block YouTube. */
.article-body .tutorial-video {
  height: auto;
  aspect-ratio: auto;
  background: #060b10;
  border: 1px solid rgba(79, 208, 229, .3);
  margin: 1.5rem 0 1.1rem;
}
.tutorial-video__details { margin: 0; padding: 0; }
.tutorial-video__summary {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #07111f;
  cursor: pointer;
  list-style: none;
}
.tutorial-video__summary::-webkit-details-marker { display: none; }
.article-body .tutorial-video__summary img {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.62);
}
.tutorial-video__summary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8));
  pointer-events: none;
}
.tutorial-video__play {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 8vw, 5.2rem);
  height: clamp(3.5rem, 8vw, 5.2rem);
  border-radius: 999px;
  background: #58d1e5;
  color: #06141b;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1;
  box-shadow: 0 0 0 .4rem rgba(79,208,229,.18);
  transition: transform .15s ease, background .15s ease;
}
.tutorial-video__summary:hover .tutorial-video__play,
.tutorial-video__summary:focus-visible .tutorial-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #adf5ff;
}
.tutorial-video__title {
  position: absolute;
  z-index: 1;
  bottom: 1.2rem;
  left: 1.5rem;
  right: 1.5rem;
  color: #f4fbff;
  font-weight: 750;
  font-size: clamp(1rem, 2.3vw, 1.3rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.tutorial-video__details[open] .tutorial-video__summary {
  aspect-ratio: auto;
  min-height: 3rem;
  background: #0b1720;
  border-bottom: 1px solid rgba(79,208,229,.25);
}
.tutorial-video__details[open] .tutorial-video__summary img,
.tutorial-video__details[open] .tutorial-video__play,
.tutorial-video__details[open] .tutorial-video__summary::after { display:none; }
.tutorial-video__details[open] .tutorial-video__title {
  position: static;
  display: block;
  padding: .85rem 1rem;
  font-size: .9rem;
  color: #a5ecf8;
}
.tutorial-video__details[open] .tutorial-video__title::before { content:'▼  '; }
.tutorial-video__player { position: relative; width: 100%; aspect-ratio: 16 / 9; background:#000; }
.tutorial-video__player iframe { display:block; width:100%; height:100%; border:0; }
.tutorial-video__summary:focus-visible { outline: 3px solid #85e9f7; outline-offset: -4px; }

/* Real list markup is a graceful fallback if a visitor has disabled styling. */
.article-body .tutorial-toc {
  padding: clamp(1rem,2vw,1.7rem);
  margin: 2.5rem 0;
  border: 1px solid rgba(79,208,229,.2);
  background: rgba(79,208,229,.025);
}
.article-body .tutorial-toc h2 { font-size: clamp(1.5rem,2.2vw,2rem); margin: .6rem 0 1.35rem; }
.article-body .tutorial-toc__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-body .tutorial-toc__links li { min-width:0; margin:0; padding:0; line-height:1.4; }
.article-body .tutorial-toc__links a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: .78rem .85rem;
  border: 1px solid rgba(79,208,229,.14);
  background: rgba(255,255,255,.025);
  text-decoration: none;
  overflow-wrap: anywhere;
  font-size: .9rem;
  line-height: 1.5;
}
.article-body .tutorial-toc__links a:hover,
.article-body .tutorial-toc__links a:focus-visible {
  border-color: rgba(79,208,229,.6);
  background: rgba(79,208,229,.09);
  text-decoration: underline;
}
@media(max-width:700px) {
  .article-body .tutorial-toc__links { grid-template-columns:1fr; }
  .tutorial-video__title { left: .75rem; right: .75rem; bottom: .75rem; }
}