/* Practical tutorials: maintain the function library's card-based visual language. */
.tutorial-index,.tutorial-article{max-width:1160px;margin:0 auto;padding:2.25rem 1.5rem 5rem;color:var(--text-primary,#202e3e)}
.tutorial-index .breadcrumbs,.tutorial-article .breadcrumbs{margin-bottom:1rem;display:flex;gap:.55rem;flex-wrap:wrap;font-size:.93rem}
.tutorial-hub-intro,.tutorial-header,.tutorial-body,.tutorial-next{padding:clamp(1.2rem,3vw,2.1rem);margin-bottom:1.4rem;border:1px solid var(--border,#d6dde4);border-radius:19px;background:var(--card-bg,#fff);box-shadow:0 12px 32px rgba(15,23,42,.05)}
.tutorial-eyebrow{text-transform:uppercase;letter-spacing:.07em;color:#1b7b82;font-size:.8rem;font-weight:800}
.tutorial-header h1,.tutorial-hub-intro h1{font-size:clamp(1.8rem,4vw,2.65rem);line-height:1.16;max-width:970px;margin:.65rem 0}
.tutorial-deck{font-size:1.1rem;line-height:1.55;max-width:780px}.tutorial-tested,.tutorial-hub-total{color:#58707f;font-size:.86rem;margin-top:1rem}
.tutorial-hub-section{margin-top:2.1rem}.tutorial-hub-section>h2{font-size:1.5rem;margin-bottom:1rem}
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1rem}
.tutorial-summary{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border:1px solid #d7dde2;border-radius:17px;background:#fff;color:#1e3043;text-decoration:none;box-shadow:0 7px 18px rgba(15,23,42,.045)}
.tutorial-summary:hover,.tutorial-summary:focus-visible{border-color:#147d83;box-shadow:0 9px 22px rgba(12,113,121,.12);text-decoration:none}
.tutorial-summary strong{font-size:1.05rem;line-height:1.3}.tutorial-summary span{font-size:.93rem;line-height:1.5}.tutorial-summary small{margin-top:auto;color:#576c7c;font-size:.77rem}
.tutorial-body{font-size:1.025rem;line-height:1.75}.tutorial-body h2{font-size:1.5rem;margin:2rem 0 .7rem;padding-top:.25rem}.tutorial-body h2:first-child{margin-top:.3rem}.tutorial-body h3{font-size:1.18rem;margin:1.4rem 0 .5rem}
.tutorial-body p,.tutorial-body ul,.tutorial-body ol,.tutorial-body table,.tutorial-body pre{margin-bottom:1.05rem}
.tutorial-body ul,.tutorial-body ol{padding-left:1.6rem}.tutorial-body li{margin:.32rem 0}.tutorial-body a,.tutorial-hub-intro a,.tutorial-next a{color:#126a79;text-decoration:underline;text-underline-offset:2px}
.tutorial-body pre{background:#111a2c;color:#f3f8fc;border-radius:12px;padding:1rem 1.25rem;overflow-x:auto;font-size:.91rem;line-height:1.55}
.tutorial-body pre code{background:transparent;color:inherit;padding:0}.tutorial-body :not(pre)>code{font-size:.91em;color:#0c5361;background:#eaf6f6;padding:.08em .3em;border-radius:.3rem}
.tutorial-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92rem}
.tutorial-body th,.tutorial-body td{border:1px solid #d4e0e5;padding:.65rem .82rem;text-align:left;vertical-align:top}.tutorial-body th{background:#edf7f8;color:#193c4b}.tutorial-body tr:nth-child(even) td{background:#f9fbfc}
.tutorial-body hr{border:0;border-top:1px solid #d9e2e7;margin:2rem 0}.tutorial-next strong{font-size:1.12rem}
html.dark .tutorial-index,html.dark .tutorial-article{color:#ecf4fb}
html.dark .tutorial-hub-intro,html.dark .tutorial-header,html.dark .tutorial-body,html.dark .tutorial-next,html.dark .tutorial-summary{background:#252d3c;border-color:#465367;color:#edf4fa}
html.dark .tutorial-body th{background:#203b45;color:#eef7f7}html.dark .tutorial-body tr:nth-child(even) td{background:#202936}html.dark .tutorial-body th,html.dark .tutorial-body td{border-color:#4a5867}html.dark .tutorial-body :not(pre)>code{color:#bcecf0;background:#233f48}html.dark .tutorial-summary small,html.dark .tutorial-tested{color:#abbfcc}html.dark .tutorial-body a,html.dark .tutorial-hub-intro a,html.dark .tutorial-next a{color:#92e1e6}
@media(max-width:620px){.tutorial-index,.tutorial-article{padding:1.1rem .85rem 3rem}.tutorial-body{font-size:.98rem}.tutorial-body pre{padding:.8rem}.tutorial-grid{grid-template-columns:1fr}}