.tutorial-page{overflow:hidden}.tutorial-page section[id],.tutorial-page article[id]{scroll-margin-top:28px}.tutorial-hero{position:relative;background:radial-gradient(circle at 80% 20%,#eaf2ff 0,transparent 34%),linear-gradient(155deg,#fff,#f7faff);border-bottom:1px solid #e6ebf3}.tutorial-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px;padding-block:94px 110px}.tutorial-hero-copy{max-width:690px}.tutorial-hero h1{margin:25px 0;font-size:clamp(3rem,5.2vw,5.3rem);line-height:1.055;letter-spacing:-.07em;font-weight:670}.tutorial-hero h1 span{color:#7e8798}.tutorial-intro{font-size:1rem;line-height:1.78}.tutorial-intro p:first-child{color:#303b4d;font-size:1.16rem;line-height:1.7}.tutorial-intro p:last-child{font-size:.89rem}.tutorial-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.tutorial-status{max-width:620px;margin:23px 0 0;padding-left:15px;border-left:3px solid #a5bee3;color:#748093;font-size:.78rem;line-height:1.65}.motion-card{min-width:0;overflow:hidden;border:1px solid #26364c;border-radius:20px;background:#141c2b;box-shadow:0 35px 75px #233e6a33}.motion-card-head{display:flex;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid #2c3b51;color:#aebbd0;font-size:.64rem;letter-spacing:.13em;font-weight:700}.motion-stage{position:relative;height:340px;overflow:hidden;background:radial-gradient(circle at 50% 48%,#344a6d,#23334e,#182338)}.motion-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(208,227,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(208,227,255,.06) 1px,transparent 1px);background-size:38px 38px}.motion-crosshair{position:absolute;left:50%;top:50%;width:62%;height:58%;border:1px dashed rgba(192,214,249,.23);transform:translate(-50%,-50%)}.motion-crosshair:before,.motion-crosshair:after{content:"";position:absolute;background:#c0d6f926}.motion-crosshair:before{left:50%;top:0;bottom:0;width:1px}.motion-crosshair:after{top:50%;left:0;right:0;height:1px}.motion-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(2.4rem,4vw,4.6rem);line-height:.94;font-weight:800;letter-spacing:-.065em;color:#fff;text-align:center;text-shadow:0 10px 25px rgba(0,0,0,.25);animation:title-enter 4s ease-in-out infinite}.motion-period{color:#75adff}.motion-start,.motion-end{position:absolute;bottom:22px;color:#8699b4;font-size:.58rem;font-weight:700;letter-spacing:.16em}.motion-start{left:24px}.motion-end{right:24px}.motion-track{padding:20px 25px 24px}.motion-track-label{display:grid;grid-template-columns:1fr repeat(3,auto);gap:38px;color:#8c9bb2;font-size:.65rem}.motion-track-label strong{color:#d8e5fa;font-weight:600}.motion-track-line{position:relative;height:7px;margin-top:16px;border-radius:10px;background:linear-gradient(90deg,#7fa8ed 0 31%,#465979 31% 100%)}.motion-key{position:absolute;top:50%;width:11px;height:11px;background:#dbe9ff;border:2px solid #8db6f6;transform:translate(-50%,-50%) rotate(45deg)}.motion-key-one{left:0}.motion-key-two{left:31%}.motion-caption{padding:0 25px 19px;color:#8190a6;font-size:.62rem;text-align:right}@keyframes title-enter{0%{transform:translate(-125%,-50%);opacity:.3}25%,to{transform:translate(-50%,-50%);opacity:1}}.tutorial-section-grid{display:grid;grid-template-columns:.39fr .61fr;gap:80px}.tutorial-side h2,.tutorial-steps-heading h2{max-width:560px;margin:0;font-size:clamp(2.55rem,4.2vw,4.25rem);font-weight:650;letter-spacing:-.065em;line-height:1.1}.tutorial-side-note{max-width:300px;margin:24px 0 0;color:#757d88;font-size:.95rem;line-height:1.7}.tutorial-copy{font-size:.98rem;line-height:1.85}.tutorial-copy p{margin-bottom:1.25em}.tutorial-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 35px}.tutorial-specs div{min-height:85px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;background:#f8faff}.tutorial-specs span,.tutorial-specs strong{display:block}.tutorial-specs span{color:#7e8794;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.tutorial-specs strong{margin-top:11px;color:#25364b;font-size:.9rem;letter-spacing:-.02em}.tutorial-steps{padding-block:105px 115px;background:#f7f9fc}.tutorial-steps-heading{max-width:1216px}.tutorial-steps-heading>p:last-child{max-width:560px;margin:25px 0 55px;color:#697483;font-size:1rem;line-height:1.7}.tutorial-step-list{border-top:1px solid #dce4ee}.tutorial-step{display:grid;grid-template-columns:.26fr .74fr;gap:55px;padding:49px 0 52px;border-bottom:1px solid #dce4ee}.tutorial-step-number{color:#3f75c5;font-size:1.2rem;font-weight:700;letter-spacing:-.045em}.tutorial-step-number span{margin-left:6px;color:#a0a9b6;font-size:.75rem}.tutorial-step-body{max-width:770px}.tutorial-step-cue{display:block;margin-bottom:10px;color:#6e83a2;font-size:.65rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.tutorial-step h3{margin:0 0 23px;font-size:clamp(1.6rem,2.3vw,2.35rem);font-weight:650;letter-spacing:-.05em}.tutorial-check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin-top:27px;padding:17px 20px;border-radius:11px;background:#eaf1fb;color:#49627f}.tutorial-check>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#3d77c9;color:#fff;font-size:.72rem}.tutorial-check p{margin:0;font-size:.84rem;line-height:1.65}.tutorial-check strong{margin-right:8px;color:#214d88}.tutorial-shortcuts{background:#fff}.shortcut-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:33px}.shortcut-list div{display:flex;flex-direction:column;align-items:flex-start;gap:19px;min-height:130px;padding:18px;border:1px solid #e1e6ed;border-radius:13px;background:#f9fafc}.shortcut-list kbd{min-width:36px;padding:7px 9px;border:1px solid #cfd9e7;border-bottom-width:3px;border-radius:7px;background:#fff;color:#2d5d9e;font-family:inherit;font-weight:750;text-align:center}.shortcut-list span{color:#4d5c70;font-size:.85rem;font-weight:600}.tutorial-troubleshooting{background:#172336;color:#fff}.tutorial-troubleshooting .section-kicker{color:#a9c9fa}.tutorial-troubleshooting .tutorial-side-note{color:#a7b6cb}.trouble-list{border-top:1px solid #3d4a5e}.trouble-list>div{display:grid;grid-template-columns:.38fr .62fr;gap:24px;padding:21px 0;border-bottom:1px solid #3d4a5e}.trouble-list h3{margin:0;font-size:.95rem;font-weight:620}.trouble-list p{margin:0;color:#bdc8d7;font-size:.87rem;line-height:1.65}.tutorial-faq{background:#f7f9fc}.tutorial-next .button{margin-top:12px}.tutorial-source-note{margin:29px 0 0;color:#8a929e;font-size:.76rem;line-height:1.6}@media(max-width:1050px){.tutorial-hero-grid{grid-template-columns:1fr;gap:45px}.tutorial-hero-copy{max-width:800px}.motion-card{width:min(100%,680px)}.tutorial-section-grid{gap:45px}.tutorial-specs{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.tutorial-hero-grid{padding-block:65px 75px}.tutorial-hero h1{font-size:clamp(2.7rem,9vw,4.2rem)}.tutorial-section-grid{grid-template-columns:1fr;gap:30px}.tutorial-steps{padding-block:75px}.tutorial-step{grid-template-columns:1fr;gap:16px;padding-block:37px}.tutorial-step-number{font-size:.9rem}.tutorial-steps-heading>p:last-child{margin-bottom:35px}.tutorial-side-note{margin-top:18px}.motion-stage{height:300px}.trouble-list>div{grid-template-columns:1fr;gap:7px}}@media(max-width:480px){.tutorial-hero h1{font-size:2.65rem}.tutorial-hero-actions{flex-direction:column}.tutorial-hero-actions .button{width:100%}.motion-stage{height:245px}.motion-card-head{font-size:.52rem}.motion-title{font-size:2.4rem}.tutorial-specs,.shortcut-list{grid-template-columns:repeat(2,1fr)}.shortcut-list div:last-child{grid-column:span 2;min-height:95px}.tutorial-specs strong{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.motion-title{animation:none}}.tutorial-hero{border-color:var(--line);background:radial-gradient(circle at 85% 17%,#e8e9ff 0,transparent 37%),var(--paper)}.tutorial-page section[id],.tutorial-page article[id]{scroll-margin-top:145px}.tutorial-hero-grid{align-items:start;gap:7vw;padding:40px 0 120px}.tutorial-hero h1{font-weight:650;letter-spacing:-.075em}.tutorial-hero h1 span{color:var(--accent-dark)}.tutorial-intro p:first-child{color:var(--ink);font-size:1.18rem}.tutorial-status{border-color:var(--accent);color:#697284}.motion-card{align-self:start;margin-top:64px;border:1px solid #3c466b;border-radius:18px;box-shadow:0 35px 80px #232b5a33}.motion-stage{background:radial-gradient(circle at 50% 47%,#4c5d9d,#293a63 47%,#18243d)}.motion-period{color:#aaf}.motion-track-line{background:linear-gradient(90deg,#929aff 0 31%,#465979 31% 100%)}.motion-key{border-color:#a8b3ff;background:#f4f5ff}.tutorial-side h2,.tutorial-steps-heading h2{font-weight:630}.tutorial-side-note{color:var(--muted)}.tutorial-copy{max-width:66ch;font-size:1.03rem}.tutorial-specs{gap:10px}.tutorial-specs div{min-height:95px;padding:18px;border:1px solid #e2e6f0;border-radius:13px;background:#fff}.tutorial-specs span{color:#7c8594}.tutorial-specs strong{color:var(--ink)}.tutorial-steps{background:var(--paper-deep)}.tutorial-steps-heading>p:last-child{color:var(--muted)}.tutorial-step-list,.tutorial-step{border-color:#dce1eb}.tutorial-step{grid-template-columns:.22fr .78fr;gap:5vw;padding-block:57px}.tutorial-step-number{color:var(--accent-dark);font-size:1.4rem}.tutorial-step-number span{color:#a0a7b6}.tutorial-step-cue{color:#6d74ba}.tutorial-step h3{font-weight:640}.tutorial-check{border:1px solid #e0e3f6;border-radius:12px;background:#eff0fb;color:#515b78}.tutorial-check>span{background:var(--accent);color:#fff}.tutorial-check strong{color:var(--accent-dark)}.tutorial-shortcuts{background:var(--paper)}.shortcut-list{gap:12px}.shortcut-list div{min-height:140px;border:1px solid #e2e6ef;border-radius:13px;background:#fff}.shortcut-list kbd{border-color:#d9def0;border-radius:7px;background:#f5f6ff;color:#5358b8}.shortcut-list span{color:#50596d}.tutorial-troubleshooting{background:#171c2f}.tutorial-troubleshooting .section-kicker{color:#b6b9ff}.tutorial-troubleshooting .tutorial-side-note{color:#aeb7cb}.trouble-list,.trouble-list>div{border-color:#3c4560}.trouble-list p{color:#c9d0df}.tutorial-faq{background:var(--paper-deep)}.tutorial-source-note{color:#7a8291}.tutorial-troubleshooting{color:var(--ink);background:radial-gradient(circle at 88% 15%,rgba(112,119,226,.11),transparent 34%),var(--feature-surface);border-block:1px solid var(--feature-line)}.tutorial-troubleshooting .section-kicker{color:var(--accent-dark)}.tutorial-troubleshooting .tutorial-side-note{color:#687184}.trouble-list,.trouble-list>div{border-color:#d7ddec}.trouble-list p{color:#555e70}@media(max-width:760px){.tutorial-hero-grid{padding:28px 0 88px}.tutorial-step{grid-template-columns:1fr;gap:18px;padding-block:40px}}@media(max-width:900px){.tutorial-page section[id],.tutorial-page article[id]{scroll-margin-top:185px}}@media(max-width:480px){.tutorial-specs,.shortcut-list{grid-template-columns:repeat(2,1fr)}.shortcut-list div:last-child{grid-column:span 2;min-height:95px}.tutorial-step-number{font-size:1.1rem}}@media(max-width:1050px){.motion-card{margin-top:0}}.tutorial-jump{display:flex;flex-wrap:wrap;gap:10px 18px;margin:27px 0 0;font-size:.88rem;font-weight:700}.tutorial-jump a{color:#a83c2a;text-decoration:underline;text-underline-offset:4px}.tutorial-steps-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:end;column-gap:clamp(32px,6vw,90px);row-gap:20px;margin-bottom:55px}.tutorial-steps-heading>.section-kicker{grid-column:1/-1;margin-bottom:0}.tutorial-section-display{max-width:none;margin:0;font-size:clamp(2.55rem,4.2vw,4.25rem);font-weight:750;letter-spacing:-.065em;line-height:1.1}.tutorial-steps-heading>.tutorial-section-display+p{max-width:440px;margin:0 0 6px;color:#697483;font-size:1rem;line-height:1.7}@media(max-width:1000px){.tutorial-steps-heading{grid-template-columns:1fr;row-gap:20px;margin-bottom:35px}.tutorial-steps-heading>.tutorial-section-display+p{max-width:560px;margin:0}}.tutorial-step h2{margin:0 0 23px;font-size:clamp(1.6rem,2.3vw,2.35rem);font-weight:760;letter-spacing:-.05em;line-height:1.2}.tutorial-example-screenshot{max-width:720px;margin:32px 0 0}.tutorial-example-screenshot img{display:block;width:100%;height:auto;border:1.5px solid var(--ink);border-radius:12px;box-shadow:6px 6px #ffcf63}.tutorial-example-screenshot figcaption{margin:16px 0 0;color:var(--muted);font-size:.78rem;line-height:1.6}.tutorial-check>div{font-size:.86rem;line-height:1.65}.tutorial-check p{display:inline;margin:0}.tutorial-check strong{margin-right:7px}.tutorial-page .prose a{overflow-wrap:anywhere}.tutorial-page .prose ul{padding-left:1.4em;margin:0 0 1.25em}.tutorial-page .prose li{margin:.45em 0}.tutorial-table-wrap{min-width:0;overflow-x:auto}.tutorial-table-wrap table,.tutorial-step table{width:100%;border-collapse:collapse;font-size:.88rem;line-height:1.55}.tutorial-table-wrap th,.tutorial-table-wrap td,.tutorial-step th,.tutorial-step td{padding:12px 14px;border-bottom:1px solid #ddd8e7;text-align:left;vertical-align:top}.tutorial-table-wrap th,.tutorial-step th{font-weight:750}.tutorial-table-wrap td:first-child,.tutorial-step td:first-child{width:34%;font-weight:680}.tutorial-step .prose table{margin:25px 0 28px}.tutorial-step .prose td{font-weight:400}.tutorial-troubleshooting .tutorial-table-wrap{color:#e1e1ef}.tutorial-troubleshooting .tutorial-table-wrap th,.tutorial-troubleshooting .tutorial-table-wrap td{border-color:#505166}.tutorial-troubleshooting .tutorial-table-wrap a{color:#ffcf63}.tutorial-troubleshooting .tutorial-table-wrap code{color:#fff}.tutorial-next .prose ul{margin-top:12px}.tutorial-source-note a{color:inherit;text-decoration:underline}@media(max-width:760px){.tutorial-table-wrap table{min-width:580px}.tutorial-step .prose table{display:block;overflow-x:auto}.tutorial-step .prose table tbody{min-width:530px}.tutorial-jump{font-size:.82rem}}
