@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

.sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.sw > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0) * 90ms); }
.split.in .sw > span { transform: none; }

.tilt { --rx: 0deg; --ry: 0deg; --ty: 0px; position: relative; }
.tilt:not(.reveal), .reveal.in.tilt { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, opacity 1s, filter 1s; }
.tilt.tilting { transition: transform .12s linear, box-shadow .35s; }
.tilt:hover { --ty: -6px; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), transparent 45%); opacity: 0; transition: opacity .35s; mix-blend-mode: soft-light; z-index: 3; }
.tilt.tilting::after { opacity: 1; }

.magnet { transition: translate .35s cubic-bezier(.22, 1, .36, 1), transform .25s, box-shadow .25s, background .25s; }

.glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(82, 200, 230, .22), transparent 60%); }
.glow.on { opacity: 1; }

.howto { position: relative; }
.howto-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.howto-side { position: sticky; top: 120px; }
.howto-side .big-n { font: 800 clamp(4rem, 10vw, 8rem)/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .3s; }
.howto-list { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 22px; }
.howto-list::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--line); }
.howto-list .hl-fill { position: absolute; left: 11px; top: 8px; width: 3px; border-radius: 3px; background: var(--grad); height: calc(var(--p, 0) * (100% - 16px)); transition: height .15s linear; }
.howto-list li { position: relative; padding: 24px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); opacity: .45; transform: translateX(10px); transition: opacity .5s, transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, border-color .5s; }
.howto-list li::before { content: ""; position: absolute; left: -31px; top: 30px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 3px solid var(--line); transition: .4s; }
.howto-list li.active { opacity: 1; transform: none; box-shadow: 0 24px 50px -30px rgba(0, 41, 76, .45); border-color: transparent; }
.howto-list li.active::before { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 6px rgba(82, 200, 230, .25); }
.howto-list li b { display: block; font: 700 1.1rem/1.3 var(--head); color: var(--ink); margin-bottom: 6px; }
.howto-list li p { margin: 0; }
.howto-list li .hl-k { display: inline-block; font: 700 .72rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }

@media (max-width: 1000px) { .howto-grid { grid-template-columns: 1fr; gap: 24px; } .howto-side { position: static; } .howto-side .big-n { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sw > span { transform: none !important; }
  .howto-list li { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}