.steps__stage{height:100svh;padding-top:var(--bar-h);align-items:center;display:grid}.steps__inner{max-height:calc(100svh - var(--bar-h) - 2rem);grid-template-rows:auto 1fr;grid-template-columns:minmax(15rem,.7fr) minmax(0,1.6fr);align-items:center;gap:1.6rem clamp(2rem,5vw,4.5rem);display:grid}.steps__head{grid-column:1/-1}.steps__head p{color:var(--text-soft);margin-top:.5rem}.steps__list{counter-reset:step;gap:1.3rem;margin:0;padding:0;list-style:none;display:grid}.step{opacity:calc(.34 + var(--on,0) * .66);counter-increment:step;padding-left:2.6rem;position:relative}.step:before{content:counter(step);width:1.7rem;height:1.7rem;color:var(--ink);transition:background .3s var(--ease), color .3s var(--ease);border:1.5px solid;border-radius:50%;place-items:center;font-size:.82rem;font-weight:700;display:grid;position:absolute;top:.1rem;left:0}.step.is-on:before{color:var(--bond);background:var(--ink);border-color:var(--ink)}.step h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}.step p{color:var(--text-soft);margin-top:.3rem;font-size:.94rem}.app{aspect-ratio:16/10.5;max-height:calc(100svh - var(--bar-h) - 9rem);background:var(--app-bg,#fbf8f1);box-shadow:0 0 0 1px var(--rule), var(--shadow-3);border-radius:16px;position:relative;overflow:hidden;container-type:inline-size}.app__bar{height:2.2rem;color:var(--text-soft);background:var(--bond);border-bottom:1px solid var(--rule);align-items:center;gap:.35rem;padding:0 .9rem;font-size:.78rem;font-weight:600;display:flex}.app__bar i{background:var(--rule-strong);border-radius:50%;width:.55rem;height:.55rem}.app__bar span{margin-left:.6rem}.app .pane{opacity:0;padding:3cqw;position:absolute;inset:2.2rem 0 0}.cue{--in:clamp(0, calc((var(--t,0) - var(--a,0)) / var(--d,.18)), 1);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))}.typed{--in:clamp(0, calc((var(--t,0) - var(--a,0)) / var(--d,.4)), 1);clip-path:inset(-.2em calc((1 - var(--in)) * 100%) -.2em 0)}.is-reduced .steps__stage{height:auto;padding:6rem 0 4rem}.is-reduced .steps__inner{align-items:start;max-height:none}.is-reduced .app{aspect-ratio:auto;gap:1px;max-height:none;display:grid}.is-reduced .app .pane{opacity:1;visibility:visible;min-height:24rem;position:relative;inset:auto}@media (width<=860px){.steps__inner{grid-template-rows:auto auto 1fr;grid-template-columns:1fr;align-content:start;gap:1rem;padding-top:1rem}.steps__head .title{font-size:1.7rem}.steps__head p{font-size:.9rem}.steps__list{grid-template-areas:"s"}.step{opacity:var(--on,0);grid-area:s}.step p{font-size:.88rem}.app{aspect-ratio:4/5;max-height:58svh}.app .pane{padding:4cqw}.is-reduced .steps__list{grid-template-areas:none}.is-reduced .step{grid-area:auto}}