.tutorial-index-hero{padding-block:54px 64px}.tutorial-index-hero h1{max-width:950px}.tutorial-hero-meta{color:var(--refine-muted);flex-wrap:wrap;align-items:center;gap:9px;margin-top:24px;font-size:.85rem;display:flex}.tutorial-hero-meta svg{flex-shrink:0}.tutorial-library{padding-top:48px}.tutorial-featured{border:1px solid var(--refine-line);border-radius:var(--refine-radius);box-shadow:var(--refine-shadow-soft);background:#fff;grid-template-columns:1.15fr 1fr;display:grid;overflow:hidden}.tutorial-featured-copy{padding:clamp(28px,4vw,48px)}.tutorial-featured h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12}.tutorial-featured-copy>p:not(.eyebrow){max-width:52ch;margin-top:20px}.tutorial-featured .refine-btn{margin-top:24px}.tutorial-featured-path{background:var(--refine-navy);padding:clamp(28px,4vw,48px)}.tutorial-featured-path ol{gap:25px;margin:24px 0 0;padding:0;list-style:none;display:grid}.tutorial-featured-path li{align-items:flex-start;gap:16px;display:flex}.tutorial-path-number{color:#bfd4f8;border:1px solid #456080;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:.75rem;font-weight:700;display:grid}.tutorial-featured-path strong{color:#fff;font-size:1.02rem}.tutorial-featured-path li p{color:#bfd0e4;margin-top:3px;font-size:.85rem}.tutorial-category-nav{border-bottom:1px solid var(--refine-line);flex-wrap:wrap;align-items:center;gap:10px;margin:40px 0 0;padding-bottom:30px;display:flex}.tutorial-category-nav>span{color:var(--refine-navy);margin-right:auto;font-weight:650}.tutorial-category-nav a{border:1px solid var(--refine-line);background:#fff;border-radius:999px;align-items:center;gap:12px;min-height:44px;padding:9px 15px;font-size:.85rem;display:inline-flex}.tutorial-category-nav a:hover{border-color:var(--refine-blue);background:var(--refine-blue-soft)}.tutorial-category{margin-top:52px;scroll-margin-top:100px}.tutorial-category-heading{align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.tutorial-section-number{color:var(--refine-blue);padding-top:5px;font-size:.8rem;font-weight:750}.tutorial-category h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}.tutorial-category-heading p{max-width:70ch;margin-top:10px;font-size:.94rem}.tutorial-card{flex-direction:column;transition:border-color .15s,box-shadow .15s;display:flex}.tutorial-card:hover{border-color:#8ea9cd;box-shadow:0 14px 28px #0b1f3a17}.tutorial-card h3{font-weight:650;line-height:1.35}.tutorial-card h3 a:hover{text-underline-offset:4px;text-decoration:underline}.tutorial-card>p:not(.eyebrow):not(.article-meta){flex-grow:1;font-size:.94rem}.tutorial-card .article-meta{margin-top:22px}.tutorial-card .text-link{align-self:flex-start;margin-top:18px}.tutorial-library-note{border:1px solid var(--refine-line);background:var(--refine-paper);border-radius:16px;align-items:flex-start;gap:18px;margin-top:56px;padding:28px;display:flex}.tutorial-library-note>svg{color:#17754e;flex-shrink:0;margin-top:2px}.tutorial-library-note h2{letter-spacing:-.02em;font-size:1.2rem;line-height:1.3}.tutorial-library-note p{max-width:65ch;margin-top:8px;font-size:.9rem}.tutorial-library-note .text-link{flex-shrink:0;margin-left:auto}.tutorial-detail-hero{padding-block:48px}.tutorial-detail-hero h1{max-width:960px;font-size:clamp(2.2rem,4.7vw,4rem);line-height:1.08}.tutorial-detail-layout{grid-template-columns:250px minmax(0,740px);align-items:start;gap:clamp(32px,5vw,72px);padding-block:48px 80px;display:grid}.tutorial-toc{border-right:1px solid var(--refine-line);padding:4px 22px 24px 0}.tutorial-toc .eyebrow{margin-bottom:14px}.tutorial-toc ol{margin:0;padding:8px 0;list-style:none}.tutorial-toc a{min-height:44px;color:var(--refine-muted);gap:9px;padding:9px 0;font-size:.86rem;line-height:1.45;display:flex}.tutorial-toc a:hover{color:var(--refine-blue);text-underline-offset:3px;text-decoration:underline}.tutorial-toc a span{color:var(--refine-blue);font-size:.8rem;font-weight:700}.tutorial-toc .tutorial-back-link{border-top:1px solid var(--refine-line);color:var(--refine-navy);align-items:center;margin-top:20px;padding-top:20px;font-weight:650}.tutorial-article{min-width:0;font-size:1rem;line-height:1.8}.public-page .tutorial-article p,.public-page .tutorial-article li,.public-page .tutorial-example blockquote{overflow-wrap:break-word;height:auto;min-height:min-content;line-height:1.8}.public-page .tutorial-step>p{margin:0 0 16px;display:block;position:static}.public-page .tutorial-example blockquote{margin-top:12px;display:block;position:static}.tutorial-article section{scroll-margin-top:100px}.tutorial-article h2{letter-spacing:-.025em;font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.25}.tutorial-article p+p{margin-top:16px}.tutorial-article li{color:var(--refine-muted)}.tutorial-preparation{border:1px solid var(--refine-line);background:#fff;border-radius:16px;padding:28px}.tutorial-preparation .tutorial-outcome{color:var(--refine-navy);margin-top:10px;font-size:1.12rem;font-weight:550;line-height:1.65}.tutorial-preparation h2{margin-top:25px;font-size:1.12rem}.tutorial-preparation ul{margin:12px 0 0;padding-left:20px;list-style:outside}.tutorial-preparation li+li{margin-top:9px}.tutorial-inline-links{gap:8px;margin-top:16px;display:grid}.tutorial-step{border-bottom:1px solid var(--refine-line);padding-block:38px}.tutorial-step-heading{align-items:flex-start;gap:14px;margin-bottom:18px;display:flex}.tutorial-step-heading>span{background:var(--refine-blue-soft);color:#1d4ed8;border-radius:9px;flex-shrink:0;place-items:center;width:34px;height:34px;font-size:.78rem;font-weight:750;display:grid}.tutorial-step-heading h2{padding-top:1px}.tutorial-step>.text-link{margin-top:20px;line-height:1.5}.tutorial-example{border:1px solid var(--refine-line);border-left:3px solid var(--refine-blue);background:#fff;border-radius:0 12px 12px 0;margin:24px 0;padding:22px 24px}.tutorial-example figcaption{color:var(--refine-blue);font-size:.8rem;font-weight:700;line-height:1.5}.tutorial-example blockquote{white-space:pre-line;color:var(--refine-ink);margin:12px 0 0;line-height:1.85}.tutorial-note{background:#fffaf0;border:1px solid #e8ddbd;border-radius:12px;align-items:flex-start;gap:12px;margin-top:22px;padding:18px;font-size:.94rem;display:flex}.tutorial-note svg{color:#795616;flex-shrink:0;margin-top:4px}.tutorial-note p{color:#655126}.tutorial-checklist{background:#f0f9f4;border:1px solid #bcdccf;border-radius:16px;margin-top:36px;padding:28px}.tutorial-checklist ul{gap:14px;margin:20px 0 0;padding:0;list-style:none;display:grid}.tutorial-checklist li{color:#285140;gap:12px;line-height:1.6;display:flex}.tutorial-checklist svg{color:#19754f;flex-shrink:0;margin-top:2px}.tutorial-troubleshooting{margin-top:38px}.tutorial-troubleshooting h2{margin-bottom:20px}.tutorial-troubleshooting details{border:1px solid var(--refine-line);background:#fff;border-radius:10px;margin-top:10px;padding:0 18px}.tutorial-troubleshooting summary{cursor:pointer;min-height:48px;color:var(--refine-navy);list-style:revert;padding:17px 0;font-weight:600;line-height:1.5}.tutorial-troubleshooting details p{padding-bottom:18px;font-size:.96rem}.tutorial-tips{border-left:2px solid #9cb9e3;margin-top:28px;padding-left:20px}.tutorial-tips h3{font-size:1rem}.tutorial-tips p{margin-top:10px;font-size:.94rem}.tutorial-next{background:var(--refine-blue-soft);border:1px solid #cbdaf6;border-radius:16px;margin-top:42px;padding:30px}.tutorial-next>p:not(.eyebrow){margin-top:14px}.tutorial-next .refine-btn{margin-top:22px}.tutorial-related{margin:34px 0}.tutorial-related h2{margin-bottom:14px;font-size:1.15rem}.tutorial-related a{border-bottom:1px solid var(--refine-line);color:var(--refine-navy);justify-content:space-between;align-items:center;gap:18px;padding:15px 0;line-height:1.5;display:flex}.tutorial-related a:hover{color:var(--refine-blue)}.tutorial-related svg{flex-shrink:0}@media (max-width:960px){.tutorial-featured{grid-template-columns:1fr}.tutorial-featured-path ol{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-category-nav>span{width:100%;margin-bottom:5px}.tutorial-library-note{flex-wrap:wrap}.tutorial-library-note .text-link{margin-left:42px}.tutorial-detail-layout{grid-template-columns:minmax(0,1fr);gap:28px;max-width:780px}.tutorial-toc{border-right:0;border-bottom:1px solid var(--refine-line);padding:0 0 24px}.tutorial-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;display:grid}.tutorial-toc .tutorial-back-link{display:none}}@media (max-width:640px){.tutorial-index-hero,.tutorial-detail-hero{padding-block:32px 38px}.tutorial-index-hero h1{font-size:2.65rem;line-height:1.08}.tutorial-index-hero h1 br,.tutorial-featured h2 br{display:none}.tutorial-library{padding-top:28px}.tutorial-featured-copy,.tutorial-featured-path{padding:25px}.tutorial-featured-path ol{grid-template-columns:1fr;gap:20px}.tutorial-category-nav{margin-top:28px}.tutorial-category{margin-top:36px}.tutorial-library-note{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:22px;display:grid}.tutorial-library-note>div{min-width:0}.tutorial-library-note .text-link{grid-column:2;margin-left:0}.tutorial-detail-layout{padding-block:28px 48px}.tutorial-toc ol{grid-template-columns:1fr}.tutorial-preparation,.tutorial-checklist,.tutorial-next{padding:22px}.tutorial-step{padding-block:30px}.tutorial-example{padding:18px}.tutorial-hero-meta{gap:7px;font-size:.8rem}}.tutorial-screenshot{margin:24px 0}.tutorial-screenshot-trigger{border:1px solid var(--refine-line);cursor:zoom-in;background:#fff;border-radius:12px;flex-direction:column;align-items:center;max-width:100%;padding:0;display:flex;overflow:hidden}.tutorial-screenshot-trigger img{-o-object-fit:contain;object-fit:contain;width:auto;max-width:100%;height:auto;max-height:360px;display:block}.tutorial-screenshot-hint{background:var(--refine-blue-soft);color:#1d4ed8;justify-content:center;align-self:stretch;align-items:center;gap:8px;padding:10px 16px;font-size:.875rem;font-weight:600;line-height:1.5;display:flex}.tutorial-screenshot figcaption{color:var(--refine-muted);margin-top:10px;font-size:.875rem;line-height:1.65}.tutorial-screenshot-trigger:focus-visible{outline-offset:4px;outline:3px solid #2563eb}.tutorial-screen-help{font-size:.9rem;line-height:1.65}.tutorial-lightbox-overlay{z-index:80;background:#051020eb}.tutorial-lightbox{z-index:81;pointer-events:none;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:56px 12px 12px;display:flex;position:fixed;inset:16px}.tutorial-lightbox-image{pointer-events:auto;border-radius:8px;max-width:100%;min-height:0;max-height:calc(100dvh - 220px);overflow:auto}.tutorial-lightbox-image img{-o-object-fit:contain;object-fit:contain;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 220px);display:block}.tutorial-lightbox-image.is-zoomed img{max-width:none;max-height:none}.tutorial-lightbox-size{color:#12345b;cursor:pointer;pointer-events:auto;background:#eaf1ff;border:1px solid #bfd4f8;border-radius:10px;flex-shrink:0;min-height:44px;padding:8px 16px;font-size:.875rem;font-weight:600}.tutorial-lightbox-size:focus-visible,.tutorial-lightbox-image:focus-visible{outline-offset:3px;outline:3px solid #fff}.tutorial-lightbox-close{color:#12345b;cursor:pointer;pointer-events:auto;background:#eaf1ff;border:1px solid #bfd4f8;border-radius:14px;place-items:center;width:48px;height:48px;display:grid;position:absolute;top:0;right:0;box-shadow:0 4px 20px #0003}.tutorial-lightbox-close:hover{color:#fff;background:#2563eb}.tutorial-lightbox-close:focus-visible{outline-offset:4px;outline:3px solid #fff}.tutorial-lightbox-caption{color:#edf4ff;text-align:center;flex-shrink:0;max-width:900px;margin:0;font-size:.9rem;line-height:1.6}@media (max-width:640px){.tutorial-lightbox{padding-inline:0;inset:10px}.tutorial-lightbox-caption{font-size:.8rem}}
