/* Tutorial additions reuse the existing website's type, color and spacing. */
.tutorial-quick-link{display:inline-block;margin:10px 0 0 18px;color:var(--blue);font-size:12px}
.tutorial-quick-link:hover{text-decoration:underline}
.tutorial-section,.reference-section{padding-block:38px 28px}
.tutorial-section{border-bottom:1px solid var(--line)}
.tutorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tutorial-card{min-width:0;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.tutorial-heading{display:flex;align-items:center;gap:14px;padding:20px}
.tutorial-number{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:#eaf2ff;color:var(--blue);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tutorial-heading h3{margin:0;font-size:19px;line-height:1.4}
.tutorial-heading p{margin:5px 0 0;color:var(--muted);font-size:12px}
.tutorial-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#101820}
.tutorial-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;font-size:12px}
.video-error{margin:12px 20px 0;font-size:12px;color:#755526}
.tutorial-footnote{display:flex;flex-wrap:wrap;gap:8px 18px;margin:17px 0 0;color:var(--muted);font-size:12px}
.tutorial-footnote button{border:0;background:none;padding:0;font-size:12px}
.reference-description{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:18px}
.reference-description .section-description{margin:8px 0 0}
.reference-actions{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:12px}
.reference-panel{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.reference-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 20px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:12px}
.reference-bar span:last-child{color:var(--muted)}
.reference-scroller{max-height:640px;max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;background:#edf2f7;scrollbar-color:#a8bedb #edf2f7}
.reference-scroller img{width:100%;max-width:1100px;height:auto;margin-inline:auto;background:white}
.reference-scroller:focus-visible{outline:3px solid #87b1ff;outline-offset:-3px}
.reference-note{margin:12px 0 0;color:var(--muted);font-size:11px}
@media(max-width:1100px){.site-header nav{gap:18px}.tutorial-grid{gap:18px}.tutorial-heading{padding:16px}.tutorial-heading h3{font-size:18px}}
@media(max-width:800px){.tutorial-grid{grid-template-columns:1fr}.tutorial-section,.reference-section{padding-block:28px 22px}.tutorial-heading{padding:17px}.tutorial-heading p{font-size:12px}.reference-scroller{max-height:540px;max-height:min(68vh,540px)}}
@media(max-width:560px){.site-header nav{gap:20px;justify-content:flex-start}.site-header nav>*{flex-shrink:0}.tutorial-heading h3{font-size:17px}.tutorial-heading{gap:12px;padding:14px}.tutorial-number{width:34px;height:34px;font-size:14px}.tutorial-links{padding:12px 14px}.tutorial-quick-link{margin-left:12px}.reference-description{gap:12px}.reference-bar{padding:10px 12px;font-size:11px}.reference-actions{font-size:12px}.reference-scroller{max-height:460px;max-height:min(64vh,460px)}}