.walkthrough-heading{text-align:center;max-width:1080px;margin:auto;padding:clamp(3rem,6vw,6rem) 0 4rem}
.walkthrough-heading h1{font-size:clamp(2.7rem,5.8vw,5.8rem);line-height:1.06;font-weight:500;margin:0 0 1.5rem}
.walkthrough-heading h1 span{color:#00dc78}
.walkthrough-heading>p:not(.eyebrow){font-size:20px;line-height:30px;color:#a9c1b1;max-width:650px;margin:1.2rem auto}
.tutorial-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:2.2rem 0;font-size:18px;line-height:28px;color:#a4bba9}
.tutorial-facts span{display:flex;align-items:baseline;gap:10px}.tutorial-facts strong{font-size:32px;line-height:40px;color:#ecfff2;font-weight:400}
.walkthrough-heading .tutorial-status{font-size:15px!important;line-height:24px!important;margin-top:1.2rem!important;color:#88a794!important}
.tutorial-nav{position:sticky;top:0;z-index:3;display:flex;justify-content:center;gap:clamp(.3rem,2vw,1.5rem);padding:1rem;background:#08120c;border-block:1px solid #294735;box-shadow:0 14px 25px #050706a0}
.tutorial-nav a{display:flex;align-items:center;gap:.65rem;color:#b2cbb9;text-decoration:none;font-size:18px;line-height:24px;padding:.45rem .6rem;border-radius:6px}
.tutorial-nav a:hover,.tutorial-nav a[aria-current=step]{color:#eafff0;background:#1e3928}.tutorial-nav span{font-size:16px;line-height:24px;color:#66e9a0;border:1px solid #355840;width:26px;text-align:center;flex-shrink:0}
.tutorial-controls{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin:1.5rem 0;color:#8caa97;font-size:16px;line-height:24px}
.tutorial-controls button{font-size:16px;line-height:24px;min-height:44px;color:#c5e2cf}
.tutorial-step{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);align-items:center;gap:clamp(2.5rem,7vw,8rem);padding:clamp(4rem,7vw,8rem) 0;border-bottom:1px solid #294432;scroll-margin-top:7rem}
.tutorial-step:nth-of-type(even) .tutorial-scene{order:-1}.tutorial-step:nth-of-type(even){grid-template-columns:minmax(260px,1fr) minmax(0,1.25fr)}
.step-kicker{color:#6fdaa0!important;font-size:16px!important;line-height:24px!important;margin:0 0 1rem!important}
.tutorial-copy h2{font-size:clamp(2.5rem,4vw,4rem);line-height:1.1;font-weight:500;margin:0 0 1.4rem}
.tutorial-copy p{font-size:20px;line-height:32px;color:#b3caba;margin:1rem 0}.tutorial-copy strong{color:#e6f9ed;font-weight:500}
.step-takeaway{border-left:3px solid #66d999;background:#102319;padding:1.1rem 1.3rem;font-size:18px;line-height:28px;color:#c8e1d1;margin:1.7rem 0}
.step-next{display:inline-flex;align-items:center;color:#7ceba8;font-size:18px;line-height:28px;min-height:44px;text-underline-offset:5px}
.tutorial-scene{position:relative;isolation:isolate;margin:0;align-self:center;padding:1.4rem 1.1rem 1.2rem;background:radial-gradient(ellipse at 50% 60%,#234e30,#0d2015 70%);border:1px solid #355b40;border-radius:18px;overflow:hidden;text-align:center}
.tutorial-scene::after{position:absolute;z-index:-1;content:"";height:24px;inset:auto 0 2.8rem;background:repeating-linear-gradient(90deg,#28402c 0 32px,#1a3324 32px 34px);border-block:2px solid #35573c}
.scene-overline{display:block;font-size:16px;line-height:24px;color:#90ba9d;min-height:24px}.tutorial-scene canvas{display:none;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}
.tutorial-fallback{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;image-rendering:pixelated;border-radius:10px;margin:1rem 0}
.tutorial-scene[data-ready] canvas{display:block}.tutorial-scene[data-ready] .tutorial-fallback{display:none}
.tutorial-scene figcaption{font-size:16px;line-height:24px;color:#d1e9d8;margin-top:.6rem}
.tutorial-mini-steps{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem;counter-reset:tutorial}
.tutorial-mini-steps li{display:grid;grid-template-columns:32px 1fr;column-gap:1rem;counter-increment:tutorial}
.tutorial-mini-steps li::before{content:counter(tutorial);grid-column:1;grid-row:1/3;font-size:20px;line-height:30px;color:#6dd99a;border-bottom:2px solid #365940;align-self:start}
.tutorial-mini-steps strong{font-size:20px;line-height:30px;font-weight:500}.tutorial-mini-steps span{grid-column:2;font-size:18px;line-height:29px;color:#a9c1b2}
.fee-flow{display:grid;justify-items:center;gap:.35rem;padding:1.5rem;border:1px solid #355940;border-radius:10px;background:#0b1b11;color:#bdedcd;font-size:18px;line-height:26px}.fee-flow b{font-size:20px;font-weight:400;color:#4c9c68}
.tutorial-recap{text-align:center;padding:clamp(5rem,9vw,9rem) 0}.tutorial-recap h2{font-size:clamp(2.5rem,4.5vw,4.5rem);line-height:1.13;font-weight:500;margin:0 0 1.3rem}.tutorial-recap h2 span{color:#75e9a3}.tutorial-recap p{font-size:20px;line-height:30px;color:#a7bdae}.tutorial-recap>div{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}.tutorial-docs{font-size:18px;line-height:28px;color:#93c7a6;text-underline-offset:5px}
@media(max-width:800px){.tutorial-step,.tutorial-step:nth-of-type(even){grid-template-columns:1fr;gap:2.2rem;padding:3.5rem 0}.tutorial-step:nth-of-type(even) .tutorial-scene{order:0}.tutorial-scene{width:min(100%,430px);justify-self:center}.tutorial-copy{max-width:650px}.tutorial-nav{gap:0;justify-content:space-between;padding:.7rem .3rem}.tutorial-nav a{flex-direction:column;gap:4px;font-size:15px;line-height:22px;padding:.4rem}.tutorial-controls{font-size:15px}.tutorial-copy p{font-size:18px;line-height:29px}.tutorial-step{scroll-margin-top:8rem}}
@media(max-width:400px){.tutorial-facts{gap:.7rem 1rem}.tutorial-facts strong{font-size:28px}.tutorial-facts span{font-size:16px}.tutorial-nav a{font-size:14px}.tutorial-controls{align-items:flex-start;gap:1rem}.tutorial-controls button{min-width:110px}.tutorial-copy h2{font-size:36px}.tutorial-mini-steps span{font-size:17px;line-height:27px}}