.tutorial-page{--tutorial-ink:#111827;--tutorial-muted:#5f6877;--tutorial-blue:#2764f6;--tutorial-blue-soft:#eaf0ff;--tutorial-line:#dfe4ea;--tutorial-paper:#f7f8fa;color:var(--tutorial-ink)}.tutorial-header{z-index:50;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffeb;border-bottom:1px solid #11182714;position:sticky;top:0}.tutorial-header-inner{justify-content:space-between;align-items:center;gap:24px;min-height:68px;display:flex}.tutorial-back{color:var(--tutorial-muted);font-size:14px;text-decoration:none}.tutorial-back:hover{color:var(--tutorial-ink)}.tutorial-hero{max-width:850px;padding:clamp(64px,8vw,112px) 0 48px}.tutorial-eyebrow,.tutorial-kicker{background:var(--tutorial-blue-soft);color:#1748bd;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;align-items:center;min-height:28px;padding:5px 10px;font:700 12px/1.2 Spline Sans Mono,monospace;display:inline-flex}.tutorial-hero h1{letter-spacing:-.055em;max-width:760px;margin:18px 0;font-size:clamp(42px,7vw,78px);line-height:.98}.tutorial-hero>p{max-width:680px;color:var(--tutorial-muted);margin:0;font-size:clamp(18px,2vw,22px);line-height:1.55}.tutorial-note{color:#33415f;background:#f4f7ff;border:1px solid #c9d8ff;border-radius:14px;align-items:flex-start;gap:12px;max-width:680px;margin-top:28px;padding:15px 17px;font-size:14px;line-height:1.5;display:flex}.tutorial-note strong{color:#1748bd}.tutorial-steps-wrap{z-index:40;border-block:1px solid var(--tutorial-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f7f8faf0;margin-bottom:22px;position:sticky;top:68px}.tutorial-steps{scrollbar-width:none;gap:8px;padding:12px 0;display:flex;overflow-x:auto}.tutorial-steps::-webkit-scrollbar{display:none}.tutorial-steps a{border:1px solid var(--tutorial-line);color:#444e5e;background:#fff;border-radius:999px;flex:none;align-items:center;gap:7px;padding:8px 12px;font-size:13px;text-decoration:none;transition:border-color .18s,color .18s,transform .18s;display:inline-flex}.tutorial-steps a:hover{color:#1748bd;border-color:#9bb7ff;transform:translateY(-1px)}.tutorial-steps b{background:var(--tutorial-blue);color:#fff;border-radius:50%;place-items:center;width:20px;height:20px;font:700 10px/1 monospace;display:grid}.tutorial-section{border-bottom:1px solid var(--tutorial-line);grid-template-columns:minmax(240px,.72fr) minmax(0,1.55fr);align-items:start;gap:clamp(36px,6vw,86px);padding:clamp(76px,10vw,138px) 0;scroll-margin-top:145px;display:grid}.tutorial-section:first-of-type{padding-top:72px}.tutorial-copy{position:sticky;top:166px}.tutorial-copy h2{letter-spacing:-.035em;margin:16px 0 12px;font-size:clamp(30px,3.4vw,48px);line-height:1.03}.tutorial-summary{color:var(--tutorial-muted);margin:0;font-size:17px;line-height:1.58}.tutorial-media{min-width:0}.tutorial-shot{background:#070d18;border:1px solid #263145;border-radius:18px;margin:0;overflow:hidden;box-shadow:0 28px 70px #0f172a2e,0 4px 14px #0f172a1f}.tutorial-shot-bar{color:#8490a3;letter-spacing:.04em;border-bottom:1px solid #263145;justify-content:space-between;align-items:center;height:38px;padding:0 13px;font:500 10px/1 Spline Sans Mono,monospace;display:flex}.tutorial-shot-dots{gap:5px;display:flex}.tutorial-shot-dots i{background:#3c4759;border-radius:50%;width:7px;height:7px}.tutorial-shot-dots i:first-child{background:#ef6a62}.tutorial-shot-dots i:nth-child(2){background:#eab85a}.tutorial-shot-dots i:nth-child(3){background:#55b887}.tutorial-shot-image{position:relative}.tutorial-shot-image img{width:100%;height:auto;display:block}.tutorial-number{z-index:4;background:var(--tutorial-blue);color:#fff;border:3px solid #fff;border-radius:50%;place-items:center;width:31px;height:31px;font:800 13px/1 sans-serif;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 5px 16px #2764f673}.tutorial-legend{border:1px solid var(--tutorial-line);background:#fff;border-radius:16px;margin-top:24px;padding:18px}.tutorial-legend-title{color:#7a8391;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;font:700 11px/1.2 Spline Sans Mono,monospace}.tutorial-legend ol{gap:12px;margin:0;padding:0;list-style:none;display:grid}.tutorial-legend li{grid-template-columns:24px 1fr;align-items:start;gap:10px;display:grid}.tutorial-legend li>span{background:var(--tutorial-blue-soft);color:#1748bd;border-radius:50%;place-items:center;width:24px;height:24px;font:800 11px/1 sans-serif;display:grid}.tutorial-legend li p{color:#495365;margin:1px 0 0;font-size:14px;line-height:1.48}.tutorial-gallery{grid-template-columns:1fr 1fr;gap:16px;display:grid}.tutorial-gallery .tutorial-shot{border-radius:15px}.tutorial-gallery .tutorial-shot-bar span:last-child{display:none}.tutorial-gallery .tutorial-shot-bar{justify-content:flex-start}.tutorial-narrow{max-width:560px;margin-inline:auto}.tutorial-credit-shot{max-width:360px;margin-inline:auto}.tutorial-finish{text-align:center;padding:clamp(80px,10vw,130px) 0}.tutorial-finish h2{letter-spacing:-.04em;margin:0 0 12px;font-size:clamp(34px,5vw,58px)}.tutorial-finish p{max-width:560px;color:var(--tutorial-muted);margin:0 auto 28px;font-size:18px}@media (max-width:820px){.tutorial-back{display:none}.tutorial-section{grid-template-columns:1fr;gap:30px;padding:78px 0}.tutorial-copy{position:static}.tutorial-steps-wrap{top:68px}.tutorial-gallery{gap:10px}.tutorial-number{border-width:2px;width:27px;height:27px;font-size:12px}}@media (max-width:560px){.tutorial-header-inner{min-height:62px}.tutorial-header img{width:120px;height:auto}.tutorial-hero{padding-top:54px}.tutorial-hero h1{font-size:45px}.tutorial-steps-wrap{top:62px}.tutorial-section{scroll-margin-top:130px}.tutorial-gallery{grid-template-columns:1fr}.tutorial-shot{border-radius:13px}.tutorial-shot-bar{height:32px}.tutorial-legend{padding:15px}}
