.cinema-shell:has(.tutorial-layout){overflow:visible}.tutorial-layout{z-index:5;grid-template-columns:248px minmax(0,1fr) 192px;align-items:start;gap:22px;max-width:1280px;margin:0 auto;padding:96px 24px 120px;display:grid;position:relative}@media (max-width:960px){.tutorial-layout{grid-template-columns:minmax(0,1fr);padding:96px 18px}.tutorial-layout .tutorial-sidebar,.tutorial-layout .tutorial-toc{display:none}}.tutorial-layout .tutorial-sidebar{-webkit-backdrop-filter:blur(24px)saturate(170%);scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;background:#0f1f3573;border:1px solid #ffffff1a;border-radius:20px;max-height:calc(100vh - 120px);padding:16px;position:sticky;top:84px;overflow-y:auto;box-shadow:0 18px 50px -12px #00000080}.tutorial-layout .tutorial-sidebar::-webkit-scrollbar{width:6px}.tutorial-layout .tutorial-sidebar::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:999px}.tutorial-layout .tutorial-sidebar-empty{color:#ffffff8c;padding:16px 10px;font-size:13px}.tutorial-layout .tutorial-search{margin-bottom:12px;position:relative}.tutorial-layout .tutorial-search-input-wrap{position:relative}.tutorial-layout .tutorial-search-icon{color:#ffffff73;pointer-events:none;width:14px;height:14px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.tutorial-layout .tutorial-search-spinner{color:#ffffff80;pointer-events:none;width:13px;height:13px;animation:.7s linear infinite tutorial-search-spin;position:absolute;top:50%;right:10px;transform:translateY(-50%)}@keyframes tutorial-search-spin{to{transform:translateY(-50%)rotate(360deg)}}.tutorial-layout .tutorial-search-input{letter-spacing:.005em;color:#ffffffeb;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;outline:none;width:100%;padding:8px 32px 8px 30px;font-family:inherit;font-size:12.5px;transition:border-color .16s,background .16s,box-shadow .16s}.tutorial-layout .tutorial-search-input::placeholder{color:#fff6}.tutorial-layout .tutorial-search-input:focus{background:#ffffff14;border-color:#7dabe88c;box-shadow:0 0 0 3px #3f89f126}.tutorial-layout .tutorial-search-input:disabled{opacity:.55;cursor:not-allowed}.tutorial-layout .tutorial-search-dropdown{z-index:30;scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;background:#14233d;border:1px solid #ffffff1f;border-radius:12px;max-height:360px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden auto;box-shadow:0 18px 40px -10px #000000a6}.tutorial-layout .tutorial-search-dropdown::-webkit-scrollbar{width:5px}.tutorial-layout .tutorial-search-dropdown::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:999px}.tutorial-layout .tutorial-search-status{color:#ffffff80;padding:10px 12px;font-size:12px}.tutorial-layout .tutorial-search-hit{text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;gap:1px;width:100%;padding:8px 12px;font-family:inherit;transition:background .12s;display:flex}.tutorial-layout .tutorial-search-hit:hover,.tutorial-layout .tutorial-search-hit[data-active=true]{background:linear-gradient(#3f89f138 0%,#3f89f11f 100%)}.tutorial-layout .tutorial-search-hit-cat{letter-spacing:.06em;text-transform:uppercase;color:#7dabe8d9;font-size:10px;font-weight:600}.tutorial-layout .tutorial-search-hit-title{color:#ffffffeb;font-size:12.5px;line-height:1.35}.tutorial-layout .tutorial-search-hit-title em{color:#fff;background:#7dabe840;border-radius:3px;padding:0 2px;font-style:normal;font-weight:600}.tutorial-layout .nav-welcome{width:100%;font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:.005em;color:#ffffffeb;background:#ffffff0a;border:1px solid #ffffff14;border-radius:9px;align-items:center;gap:9px;margin-bottom:10px;padding:9px 10px;font-size:13px;text-decoration:none;transition:background .16s,border-color .16s,color .16s;display:flex}.tutorial-layout .nav-welcome:hover{color:#fff;background:#ffffff12;border-color:#ffffff24}.tutorial-layout .nav-welcome[aria-current=page]{color:#fff;background:linear-gradient(#3f89f152 0%,#3f89f12e 100%);border-color:#7dabe866;box-shadow:inset 0 0 0 1px #7dabe833}.tutorial-layout .nav-welcome-icon{color:#7dabe8;flex-shrink:0;width:14px;height:14px}.tutorial-layout .nav-cat{margin-bottom:2px}.tutorial-layout .nav-cat-btn{color:#fff;width:100%;font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:.01em;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:9px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:13px;transition:background .16s;display:flex}.tutorial-layout .nav-cat-btn:hover{background:#ffffff0f}.tutorial-layout .nav-cat[data-open=true]>.nav-cat-btn{color:#7dabe8}.tutorial-layout .nav-cat-btn .chev{color:#ffffff80;width:13px;height:13px;transition:transform .2s}.tutorial-layout .nav-cat[data-open=true] .chev{color:#7dabe8;transform:rotate(180deg)}.tutorial-layout .nav-pages{border-left:1px solid #ffffff14;margin:2px 0 6px 6px;padding-left:8px;display:none}.tutorial-layout .nav-cat[data-open=true] .nav-pages{display:block}.tutorial-layout .nav-pages a{color:#fff9;letter-spacing:.005em;border-radius:7px;padding:6px 10px;font-size:12.5px;text-decoration:none;transition:all .14s;display:block}.tutorial-layout .nav-pages a:hover{color:#fff;background:#ffffff0d}.tutorial-layout .nav-pages a[aria-current=page]{color:#fff;background:linear-gradient(#3f89f152 0%,#3f89f12e 100%);font-weight:600;box-shadow:inset 0 0 0 1px #7dabe866}.tutorial-layout .nav-subgroup{margin:4px 0}.tutorial-layout .nav-subgroup-btn{color:#ffffffc7;width:100%;font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:.01em;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12px;transition:background .16s;display:flex}.tutorial-layout .nav-subgroup-btn:hover{background:#ffffff0d}.tutorial-layout .nav-subgroup[data-open=true]>.nav-subgroup-btn{color:#7dabe8}.tutorial-layout .nav-subgroup .chev{color:#ffffff73;width:12px;height:12px;transition:transform .2s}.tutorial-layout .nav-subgroup[data-open=true] .chev{color:#7dabe8;transform:rotate(180deg)}.tutorial-layout .nav-subgroup-pages{border-left:1px solid #ffffff0f;margin:2px 0 4px 4px;padding-left:8px;display:none}.tutorial-layout .nav-subgroup[data-open=true] .nav-subgroup-pages{display:block}.tutorial-layout .glass-content{-webkit-backdrop-filter:blur(28px)saturate(170%);background:#0f1f3573;border:1px solid #ffffff1a;border-radius:22px;min-width:0;padding:36px 44px 40px;position:relative;overflow:hidden;box-shadow:0 22px 60px -12px #0000008c}.tutorial-layout .glass-content:before{content:"";pointer-events:none;background:linear-gradient(#3f89f11f 0%,#0000 35%);position:absolute;inset:0}.tutorial-layout .glass-content>*{z-index:1;position:relative}.tutorial-layout .breadcrumb{letter-spacing:.14em;text-transform:uppercase;color:#ffffff8c;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:16px;font-size:10.5px;font-weight:600;display:inline-flex}.tutorial-layout .breadcrumb svg{stroke-width:2.2px;opacity:.5;width:10px;height:10px}.tutorial-layout .breadcrumb a{color:inherit;text-decoration:none;transition:color .18s}.tutorial-layout .breadcrumb a:hover{color:#fff}.tutorial-layout .breadcrumb .current{color:#ffffffd9}.tutorial-layout h1.page-title{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:-.022em;color:#fff;text-shadow:0 3px 20px #0006;margin-bottom:24px;font-size:40px;font-weight:600;line-height:1.05}.tutorial-layout .tutorial-section{margin-top:36px;scroll-margin-top:96px}.tutorial-layout .tutorial-section:first-of-type{margin-top:0}.tutorial-layout .tutorial-section>h2.tutorial-section-title{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:-.01em;color:#fff;margin-bottom:12px;font-size:22px;font-weight:600}.tutorial-layout .pagenav{border-top:1px solid #ffffff14;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px;padding-top:22px;display:grid}.tutorial-layout .pagenav a{color:inherit;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;padding:14px 16px;text-decoration:none;transition:all .2s;display:block}.tutorial-layout .pagenav a:hover{background:#ffffff14;border-color:#ffffff29;transform:translateY(-1px)}.tutorial-layout .pagenav a.next{text-align:right}.tutorial-layout .pagenav .label{letter-spacing:.14em;text-transform:uppercase;color:#ffffff80;align-items:center;gap:6px;margin-bottom:5px;font-size:10.5px;font-weight:600;display:flex}.tutorial-layout .pagenav a.next .label{justify-content:flex-end}.tutorial-layout .pagenav .label svg{stroke-width:2px;width:11px;height:11px}.tutorial-layout .pagenav .title{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;color:#fff;letter-spacing:-.005em;font-size:14.5px;font-weight:600}.tutorial-layout .tutorial-toc{align-self:start;padding:4px 0 0 4px;position:sticky;top:96px}.tutorial-layout .tutorial-toc .toc-eyebrow{letter-spacing:.18em;text-transform:uppercase;color:#ffffff73;text-shadow:0 1px 4px #0006;margin-bottom:14px;font-size:10px;font-weight:700}.tutorial-layout .tutorial-toc .toc-line{border-left:2px solid #ffffff1a;flex-direction:column;gap:1px;padding-left:14px;display:flex;position:relative}.tutorial-layout .tutorial-toc .toc-indicator{pointer-events:none;background:linear-gradient(#5ba3ff,#3f89f1);border-radius:999px;width:2px;transition:top .2s ease-out,height .2s ease-out;position:absolute;left:-2px;box-shadow:0 0 8px #3f89f166}.tutorial-layout .tutorial-toc button{color:#ffffff6b;text-shadow:0 1px 4px #0006;text-align:left;cursor:pointer;background:0 0;border:none;width:100%;padding:5px 0;font-family:inherit;font-size:12px;transition:color .16s;display:block}.tutorial-layout .tutorial-toc button:hover{color:#ffffffd9}.tutorial-layout .tutorial-toc button[aria-current=true]{color:#fff;font-weight:600}.tutorial-layout .tutorial-toc button.sub{padding-left:12px;font-size:11.5px}.tutorial-layout .cinema-content>*+*{margin-top:14px}.tutorial-layout .cinema-content p{color:#ffffffc7;font-size:14.5px;line-height:1.7}.tutorial-layout .cinema-content strong{color:#fff;font-weight:600}.tutorial-layout .cinema-content em{color:#ffffffdb;font-style:italic}.tutorial-layout .cinema-content a{color:#7dabe8;text-underline-offset:2px;text-decoration:underline}.tutorial-layout .cinema-content a:hover{color:#a4c4f1}.tutorial-layout .cinema-content code{font-family:var(--font-sans),"Figtree",system-ui,sans-serif;letter-spacing:.01em;color:#cfdef9;background:#ffffff0f;border:1px solid #ffffff14;border-radius:5px;padding:1px 6px;font-size:.92em;font-weight:500}.tutorial-layout .cinema-content h2{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;letter-spacing:-.01em;color:#fff;margin-top:32px;font-size:22px;font-weight:600}.tutorial-layout .cinema-content h3{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;color:#fff;letter-spacing:-.005em;margin-top:24px;margin-bottom:4px;scroll-margin-top:96px;font-size:16px;font-weight:600}.tutorial-layout .cinema-content ul,.tutorial-layout .cinema-content ol{color:#ffffffc7;margin-left:22px;font-size:14.5px;line-height:1.7;list-style-position:outside}.tutorial-layout .cinema-content ul{list-style-type:disc}.tutorial-layout .cinema-content ol{list-style-type:decimal}.tutorial-layout .cinema-content li::marker{color:#ffffff8c}.tutorial-layout .cinema-content li{margin-bottom:4px}.tutorial-layout .cinema-content .checklist{margin-left:0;padding:0;list-style:none}.tutorial-layout .cinema-content .checklist li{color:#ffffffd1;align-items:flex-start;gap:10px;padding:6px 0;font-size:14.5px;line-height:1.65;display:flex}.tutorial-layout .cinema-content .checklist li svg{color:#7dabe8;flex-shrink:0;margin-top:4px}.tutorial-layout .cinema-content .callout{background:#3f89f11f;border:1px solid #ffffff0f;border-left:3px solid #5ba3ff;border-radius:12px;padding:14px 18px}.tutorial-layout .cinema-content .callout.warning{background:#f59e0b1f;border-left-color:#fbbf24}.tutorial-layout .cinema-content .callout.tip{background:#10b9811f;border-left-color:#34d399}.tutorial-layout .cinema-content .callout .label{letter-spacing:.14em;text-transform:uppercase;color:#7dabe8;margin-bottom:4px;font-size:10.5px;font-weight:700}.tutorial-layout .cinema-content .callout.warning .label{color:#fbbf24}.tutorial-layout .cinema-content .callout.tip .label{color:#34d399}.tutorial-layout .cinema-content .callout p{color:#ffffffd1;margin-top:0;font-size:13.5px}.tutorial-layout .cinema-content .image-frame{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;place-items:center;display:grid;position:relative;overflow:hidden}.tutorial-layout .cinema-content .image-frame:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 20%,#7dabe833,#0000 40%),radial-gradient(circle at 80% 70%,#3f89f126,#0000 50%),linear-gradient(135deg,#ffffff0a,#ffffff03);position:absolute;inset:0}.tutorial-layout .cinema-content .image-frame img,.tutorial-layout .cinema-content .image-frame video{z-index:1;-o-object-fit:cover;object-fit:cover;width:100%;height:100%;position:relative}.tutorial-layout .cinema-content .image-frame.fit{display:block}.tutorial-layout .cinema-content .image-frame.fit img,.tutorial-layout .cinema-content .image-frame.fit video{-o-object-fit:contain;object-fit:contain;height:auto}.tutorial-layout .cinema-content .image-frame .placeholder{z-index:1;color:#ffffff80;letter-spacing:.04em;text-transform:uppercase;text-align:center;flex-direction:column;align-items:center;gap:10px;padding:20px;font-size:12px;font-weight:600;display:flex;position:relative}.tutorial-layout .cinema-content .image-frame .placeholder svg{opacity:.7}.tutorial-layout .cinema-content .image-frame .video-play-overlay{z-index:2;cursor:pointer;background:#03091159;border:none;place-items:center;margin:0;padding:0;transition:background .18s;display:grid;position:absolute;inset:0}.tutorial-layout .cinema-content .image-frame .video-play-overlay:hover{background:#03091173}.tutorial-layout .cinema-content .image-frame .video-play-button{color:#fff;-webkit-backdrop-filter:blur(10px);background:#182f4fc7;border:1px solid #ffffff2e;border-radius:999px;place-items:center;width:88px;height:88px;padding-left:4px;transition:transform .18s,box-shadow .18s,background .18s;display:grid;box-shadow:0 18px 40px -12px #0000008c,0 0 0 6px #ffffff0f,0 0 32px #3f89f159}.tutorial-layout .cinema-content .image-frame .video-play-overlay:hover .video-play-button{background:#3f89f18c;transform:scale(1.06);box-shadow:0 22px 48px -12px #0009,0 0 0 6px #ffffff14,0 0 44px #3f89f18c}.tutorial-layout .cinema-content .image-frame .video-play-overlay:focus-visible{outline:none}.tutorial-layout .cinema-content .image-frame .video-play-overlay:focus-visible .video-play-button{box-shadow:0 0 0 3px #3f89f1cc,0 18px 40px -12px #0000008c,0 0 32px #3f89f173}.tutorial-layout .cinema-content table{border-collapse:collapse;color:#ffffffd1;border:1px solid #ffffff14;border-radius:8px;width:100%;font-size:13.5px;overflow:hidden}.tutorial-layout .cinema-content table th,.tutorial-layout .cinema-content table td{text-align:left;vertical-align:top;border-bottom:1px solid #ffffff0f;border-right:1px solid #ffffff0f;padding:10px 12px}.tutorial-layout .cinema-content table th:last-child,.tutorial-layout .cinema-content table td:last-child{border-right:none}.tutorial-layout .cinema-content table tr:last-child td{border-bottom:none}.tutorial-layout .cinema-content table th{color:#fff;background:#ffffff0f;font-weight:600}.tutorial-layout .cinema-content hr{border:none;border-top:1px solid #ffffff1a;margin:28px 0}.tutorial-layout .cinema-content pre{font-family:var(--font-sans),"Figtree",system-ui,sans-serif;color:#ffffffd9;background:#00000052;border:1px solid #ffffff14;border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.6;overflow-x:auto}.tutorial-layout .cinema-content pre code{color:inherit;font-size:inherit;background:0 0;border:none;padding:0}.tutorial-layout .cinema-content a.related-inline{color:inherit;background:#ffffff0a;border:1px solid #ffffff17;border-radius:14px;align-items:center;gap:14px;padding:13px 16px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;display:flex}.tutorial-layout .cinema-content a.related-inline:hover{color:inherit;background:#3f89f11a;border-color:#7dabe873;transform:translateY(-1px);box-shadow:0 12px 30px -12px #0000008c,0 0 24px -8px #3f89f166}.tutorial-layout .cinema-content .related-inline .ri-icon{color:#cfe0fb;background:linear-gradient(160deg,#3f89f14d,#3f89f11f);border:1px solid #7dabe852;border-radius:10px;flex:none;place-items:center;width:38px;height:38px;display:grid}.tutorial-layout .cinema-content .related-inline .ri-body{flex:1;min-width:0}.tutorial-layout .cinema-content .related-inline .ri-eyebrow{letter-spacing:.16em;text-transform:uppercase;color:#7dabe8;margin-bottom:2px;font-size:9.5px;font-weight:700;display:block}.tutorial-layout .cinema-content .related-inline .ri-title{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;color:#fff;letter-spacing:-.005em;font-size:14.5px;line-height:1.25;display:block}.tutorial-layout .cinema-content .related-inline .ri-cat{color:#ffffff80;margin-top:1px;font-size:11.5px;display:block}.tutorial-layout .cinema-content .related-inline .ri-arrow{color:#ffffff73;flex:none;transition:transform .2s,color .2s;display:flex}.tutorial-layout .cinema-content a.related-inline:hover .ri-arrow{color:#7dabe8;transform:translate(3px)}.tutorial-layout .tutorial-related{border-top:1px solid #ffffff14;margin-top:44px;padding-top:26px}.tutorial-layout .tutorial-related .tr-eyebrow{letter-spacing:.16em;text-transform:uppercase;color:#ffffff8c;align-items:center;gap:8px;margin-bottom:16px;font-size:10.5px;font-weight:700;display:flex}.tutorial-layout .tutorial-related .tr-eyebrow svg{color:#7dabe8;width:13px;height:13px}.tutorial-layout .tutorial-related .tr-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.tutorial-layout .tutorial-related .tr-card{color:inherit;background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;gap:9px;padding:16px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;display:flex}.tutorial-layout .tutorial-related .tr-card:hover{background:#3f89f11a;border-color:#7dabe866;transform:translateY(-2px);box-shadow:0 16px 36px -14px #0000008c,0 0 28px -10px #3f89f157}.tutorial-layout .tutorial-related .tr-top{align-items:center;gap:10px;display:flex}.tutorial-layout .tutorial-related .tr-icon{color:#cfe0fb;background:linear-gradient(160deg,#3f89f147,#3f89f11a);border:1px solid #7dabe847;border-radius:8px;flex:none;place-items:center;width:30px;height:30px;display:grid}.tutorial-layout .tutorial-related .tr-cat{letter-spacing:.14em;text-transform:uppercase;color:#7dabe8;font-size:9.5px;font-weight:700}.tutorial-layout .tutorial-related .tr-title{font-family:var(--font-heading),"CalSans",system-ui,sans-serif;color:#fff;letter-spacing:-.005em;font-size:15px;line-height:1.25}.tutorial-layout .tutorial-related .tr-desc{color:#fff9;font-size:12.5px;line-height:1.55}.tutorial-layout .tutorial-related .tr-arrow{color:#fff6;align-self:flex-end;margin-top:2px;transition:transform .2s,color .2s;display:flex}.tutorial-layout .tutorial-related .tr-card:hover .tr-arrow{color:#7dabe8;transform:translate(3px)}@media (max-width:640px){.tutorial-layout .tutorial-related .tr-grid{grid-template-columns:1fr}}.tutorial-layout .tutorial-skel>*{background:linear-gradient(90deg,#ffffff0f 0%,#ffffff1f 50%,#ffffff0f 100%) 0 0/200% 100%;border-radius:6px;animation:1.4s ease-in-out infinite tutorial-skel-shimmer}.tutorial-layout .tutorial-skel-eyebrow{width:38%;height:12px;margin-bottom:18px}.tutorial-layout .tutorial-skel-title{width:70%;height:36px;margin-bottom:26px}.tutorial-layout .tutorial-skel-h2{width:42%;height:22px;margin:28px 0 14px}.tutorial-layout .tutorial-skel-line{width:100%;height:14px;margin-bottom:10px}.tutorial-layout .tutorial-skel-line.short{width:78%}.tutorial-layout .tutorial-skel-toc{padding-top:4px}.tutorial-layout .tutorial-skel-toc>*{margin-bottom:12px}@keyframes tutorial-skel-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.tutorial-edit-btn{z-index:75;-webkit-backdrop-filter:blur(16px)saturate(160%);color:#fff;background:#3f89f138;border:1px solid #7dabe866;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:12.5px;font-weight:600;text-decoration:none;transition:all .18s;display:inline-flex;position:fixed;top:76px;right:24px;box-shadow:0 6px 16px -4px #00000073}.tutorial-edit-btn:hover{background:#3f89f159;border-color:#7dabe8a6;transform:translateY(-1px)}