.tutorial-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px;padding-block:72px 80px}.tutorial-hero>.text-link{margin-bottom:30px}.tutorial-hero .eyebrow{margin-top:34px}.tutorial-hero h1 span{color:var(--blue)}.tutorial-hero .intro{font-size:19px;max-width:560px}.tutorial-hero .subintro{max-width:490px}.tutorial-hero .actions{gap:22px;flex-wrap:wrap}.download-button{line-height:1.5;gap:25px;min-height:52px}.download-note{font-size:11px!important;color:var(--muted);line-height:1.7!important;max-width:520px;margin-top:14px}.tutorial-hero-image{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft)}.tutorial-hero-image img{display:block;width:100%;height:auto;aspect-ratio:1.45;object-fit:contain}.tutorial-hero-image figcaption{padding:20px 24px;border-top:1px solid var(--line);font-size:12px}.tutorial-hero-image figcaption span,.tutorial-gallery figcaption span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--teal);margin-bottom:9px}.tutorial-facts{background:var(--soft);border-block:1px solid var(--line)}.tutorial-facts>.wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:27px}.tutorial-facts strong{display:block;font-size:30px;font-weight:500;letter-spacing:-1px;margin-bottom:8px}.tutorial-facts span{font-size:11px;color:var(--muted)}.tutorial-facts a{font-size:12px;color:var(--blue);font-weight:bold}.example-gallery{padding-bottom:72px}.tutorial-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.tutorial-gallery figure{border:1px solid var(--line);border-radius:8px;overflow:hidden}.tutorial-gallery img{display:block;width:100%;height:auto;aspect-ratio:1.45;object-fit:contain;background:var(--soft)}.tutorial-gallery figcaption{border-top:1px solid var(--line);padding:22px;font-size:12px;line-height:1.8;min-height:160px}.tutorial-gallery figcaption strong{display:block;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:8px}.tutorial-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:72px;border-top:1px solid var(--line);padding-block:65px 80px}.tutorial-sidebar nav{display:flex;align-items:flex-start;flex-direction:column;gap:19px;position:sticky;top:30px;font-size:12px}.tutorial-sidebar .eyebrow{margin-bottom:5px}.tutorial-sidebar nav a:hover{color:var(--blue)}.tutorial-guide{max-width:850px;min-width:0}.tutorial-guide h2{font-size:29px;line-height:1.25;margin:52px 0 24px;scroll-margin-top:35px}.tutorial-guide h2:first-child{margin-top:0;font-size:36px}.tutorial-guide p,.tutorial-guide li{font-size:14px;line-height:1.9;color:var(--muted)}.tutorial-guide strong{color:var(--ink)}.tutorial-guide p{margin:0 0 20px}.tutorial-guide ul{padding-left:21px;margin:20px 0}.tutorial-guide li{padding-left:5px;margin-bottom:15px}.tutorial-guide a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.tutorial-guide code{font-size:.9em;padding:.15em .35em;border-radius:3px;background:var(--soft);overflow-wrap:anywhere;color:var(--ink)}.tutorial-guide pre{white-space:pre;overflow:auto;max-width:100%;margin:0 0 24px;background:var(--soft);border:1px solid var(--line);padding:20px;border-radius:0 0 6px 6px;line-height:1.8;font-size:12px}.tutorial-guide pre code{background:none;padding:0;overflow-wrap:normal}.code-heading{font-family:monospace;font-size:10px;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-bottom:0;padding:10px 20px;text-transform:uppercase;letter-spacing:1px;border-radius:6px 6px 0 0}.table-scroll{overflow:auto;max-width:100%;margin:26px 0 32px;border:1px solid var(--line);border-radius:6px}.tutorial-guide table{border-collapse:collapse;width:100%;font-size:13px}.tutorial-guide th{text-align:left;background:var(--soft);font-size:10px;letter-spacing:.7px;color:var(--muted);text-transform:uppercase;padding:16px 20px;border-bottom:1px solid var(--line)}.tutorial-guide td{padding:15px 20px;border-bottom:1px solid var(--line);line-height:1.7}.tutorial-guide td:first-child{color:var(--muted);font-variant-numeric:tabular-nums}.tutorial-guide tr:last-child td{border-bottom:0}.tutorial-guide table a{text-decoration:none}.tutorial-guide tr:hover td{background:#f8fbff}.tutorial-download{border-top:1px solid var(--line);padding-block:55px;display:flex;align-items:center;justify-content:space-between;gap:50px}.tutorial-download h2{font-size:31px}.tutorial-download p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);max-width:520px}.document-page{padding-block:50px 80px}.document-page>.text-link{margin-bottom:35px}.document-page .tutorial-guide{max-width:100%}.document-page .table-scroll{max-width:100%}.document-page table{min-width:700px}@media(max-width:1000px){.tutorial-hero{gap:30px}.tutorial-layout{gap:36px;grid-template-columns:165px minmax(0,1fr)}.tutorial-hero h1{font-size:44px}.tutorial-facts>.wrap{gap:20px}.tutorial-facts a{max-width:150px;line-height:1.7}.tutorial-gallery{gap:14px}.tutorial-gallery figcaption{padding:18px}}@media(max-width:700px){.tutorial-hero{grid-template-columns:1fr;padding-block:38px 48px;gap:35px}.tutorial-hero h1{font-size:43px}.tutorial-hero .eyebrow{margin-top:28px}.tutorial-hero .intro{font-size:18px}.tutorial-hero-image img{max-height:340px}.tutorial-facts>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px 18px;padding-block:28px}.tutorial-facts strong{font-size:27px}.tutorial-facts a{max-width:none}.tutorial-gallery{grid-template-columns:1fr;gap:22px}.tutorial-gallery img{max-height:310px}.tutorial-gallery figcaption{min-height:0}.tutorial-layout{grid-template-columns:1fr;gap:35px;padding-block:35px 45px}.tutorial-sidebar nav{position:static;flex-direction:row;flex-wrap:wrap;gap:17px;line-height:1.6}.tutorial-sidebar .eyebrow{width:100%;margin:0}.tutorial-guide h2{font-size:26px;margin-top:40px}.tutorial-guide h2:first-child{font-size:30px}.tutorial-guide th,.tutorial-guide td{padding:13px 12px}.tutorial-guide table{font-size:12px}.tutorial-download{flex-direction:column;align-items:flex-start;padding-block:38px;gap:20px}.tutorial-download h2{font-size:29px}.tutorial-download .download-button{width:100%}.document-page{padding-block:35px 50px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
