.how{position:relative;height:calc((var(--n) + 1) * 80vh)}.how-sticky{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center}.how-stage{position:relative;width:min(100%,max(220px,calc((100svh - var(--hdr) - 48px) * 1.613)));margin-inline:auto;aspect-ratio:100/62;overflow:hidden;background:var(--color-accent);border:2px solid var(--color-ink);border-radius:28px}.how-world{container-type:inline-size;left:0;top:0;width:100%;aspect-ratio:100/62}.how-world,.pc{position:absolute}.pc{--t:clamp(0,calc((var(--p) - var(--s)) / var(--l)),1);--e:calc(1 - (1 - var(--t)) * (1 - var(--t)));opacity:clamp(0,calc(var(--t) * 4),1);transform:translate(calc((1 - var(--e)) * var(--dx) * 1cqw),calc((1 - var(--e)) * var(--dy) * 1cqw)) rotate(calc((1 - var(--e)) * var(--r) * 1deg))}.how[data-live] .pc{will-change:transform,opacity}.pc-grow{transform:scaleX(var(--e));transform-origin:left center}.pc-card{background:#fff;border:.3cqw solid var(--color-ink);border-radius:1.4cqw;box-shadow:.5cqw .5cqw 0 var(--color-ink)}.how-bubble{padding:1.1cqw 1.4cqw;font-size:1.45cqw;font-weight:700;line-height:1.25}.how-us{background:var(--color-ink);color:#fff}.how-plan{padding:1.4cqw;font-size:1.35cqw}.how-plan b{display:block;font-size:1.6cqw;margin-bottom:1cqw}.how-row{display:grid;grid-template-columns:8cqw 1fr auto;align-items:center;gap:.8cqw;margin-top:.9cqw;font-weight:700}.how-row i{height:1.3cqw;background:var(--color-accent);border:.2cqw solid var(--color-ink);border-radius:.5cqw;display:block}.how-row em{font-style:normal;color:var(--color-ink-2);font-size:1.2cqw}.how-stamp{position:absolute;right:-1cqw;bottom:-1.6cqw;background:var(--color-ink);color:#fff;font-weight:800;font-size:1.3cqw;padding:.7cqw 1.2cqw;border-radius:1cqw;white-space:nowrap}.how-win{background:#fff}.how-bar{display:flex;gap:.7cqw;padding:1.1cqw 1.4cqw;border-bottom:.3cqw solid var(--color-ink)}.how-bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--color-ink);display:block}.how-line{background:#d9d9d2;border-radius:.8cqw}.how-h{font-family:var(--font-unbounded),sans-serif;font-weight:800;font-size:2.6cqw;line-height:1.1;letter-spacing:-.02em}.how-box{border:.3cqw dashed #9a9aa3;border-radius:1cqw}.how-img{background:var(--color-accent);border:.3cqw solid var(--color-ink);border-radius:1.2cqw}.how-btn{background:var(--color-ink);color:#fff;font-weight:800;font-size:1.5cqw;display:grid;place-items:center;border-radius:1cqw}.how-fill{background:#f3f3ee;border:.3cqw solid var(--color-ink);border-radius:1cqw;display:flex;align-items:flex-end;padding:1cqw;font-size:1.4cqw;overflow:hidden}.how-code{padding:1.4cqw;display:flex;flex-direction:column;gap:.9cqw;background:var(--color-ink);border-color:var(--color-ink);box-shadow:.5cqw .5cqw 0 #fff}.how-code i{height:1cqw;border-radius:.5cqw;background:var(--color-accent);display:block}.how-live{background:#fff;border:.3cqw solid var(--color-ink);border-radius:99px;padding:.7cqw 1.6cqw .7cqw 3cqw;font-weight:800;font-size:1.5cqw}.how-live:before{content:"";position:absolute;left:1.2cqw;top:50%;width:1cqw;height:1cqw;margin-top:-.5cqw;border-radius:50%;background:#1fb15a}.how-chart{padding:1.3cqw;font-size:1.4cqw;display:flex;align-items:flex-end;gap:1cqw}.how-chart b{position:absolute;left:1.3cqw;top:1cqw}.how-b{flex:1;height:calc(var(--h) * .9cqw * var(--e));background:var(--color-accent);border:.2cqw solid var(--color-ink);border-radius:.5cqw .5cqw 0 0;display:block}.how-step{display:flex;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:16px;border:2px solid transparent;opacity:.45;transition:opacity .3s,border-color .3s,background .3s}.how-step[data-on]{opacity:1;border-color:var(--color-ink);background:#fff}.how-step-t{display:flex;flex-direction:column;min-width:0}.how-step-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s;font-size:.95rem;line-height:1.5;color:var(--color-ink-2);font-weight:500}.how-step-d>span{overflow:hidden;min-height:0}.how-step[data-on] .how-step-d{grid-template-rows:1fr;padding-top:6px}.how-grid{display:grid;width:100%;gap:14px;grid-template-areas:"head" "art" "steps"}.how-head{grid-area:head;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.how-art{grid-area:art;min-width:0}.how-steps{grid-area:steps;min-width:0}.how-count{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1;padding-bottom:.3em;white-space:nowrap}.how-count i{font-style:normal;color:var(--color-ink-3)}.how-track{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}.how-track button{position:relative;isolation:isolate;overflow:hidden;width:100%;height:32px;border:2px solid var(--color-ink);border-radius:10px;background:#fff;font-size:.78rem;font-weight:800;transition:transform .15s}.how-track button:active{transform:scale(.95)}.how-track-t{display:none}@media (min-width:640px){.how-track button{height:38px;padding-inline:8px;white-space:nowrap;text-overflow:ellipsis}.how-track-t{display:inline;margin-left:6px}}.how-track button:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-accent);transform-origin:left;transform:scaleX(clamp(0,calc(var(--p) * var(--n) - var(--i)),1))}.how-card{display:grid;margin-top:10px;padding:14px 16px;border:2px solid var(--color-ink);border-radius:16px;background:#fff}.how-card>div{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}.how-card>div[data-on]{opacity:1;transform:none}.how-card b{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:800;letter-spacing:-.03em}.how-card p{margin-top:4px;font-size:.92rem;line-height:1.45;font-weight:500;color:var(--color-ink-2)}.how-list{display:none}@media (min-width:1024px){.how-grid{grid-template-columns:minmax(280px,3.5fr) minmax(0,8.5fr);grid-template-areas:"head art" "steps art";column-gap:48px;row-gap:22px;align-items:center}.how-head{align-self:end}.how-steps{align-self:start}.how-count,.how-m{display:none}.how-list{display:block}.how-step:not([data-on]){padding-block:8px}}@media (max-width:1023px){.how{height:calc((var(--n) + 1) * 70svh)}.how-sticky{align-items:flex-start;padding-top:14px}.how-stage{width:min(100%,max(220px,calc((100svh - var(--hdr) - var(--list, 420px) - 64px) * 1.613)))}}@media (max-width:767px){.how-stage{aspect-ratio:auto;border-radius:22px;width:100%;height:max(220px,min(calc(100svh - var(--hdr) - var(--list, 420px) - 64px),calc((100vw - 40px) * 1.2)))}.how-world{width:200%;transform:translate(var(--cx,11%),var(--cy,0))}.how[data-live] .how-world{will-change:transform}}.how[data-static]{height:auto}.how[data-static] .how-sticky{position:static;height:auto;padding-block:3rem}@media (prefers-reduced-motion:reduce){.how{height:auto!important}.how-world{transform:none!important;width:100%!important}.how-stage{aspect-ratio:100/62!important}.how-sticky{position:static;height:auto;padding:3rem 0}}