@property --hw-n{syntax:"<integer>";inherits:false;initial-value:0}.how-steps{margin:0;padding:0;list-style:none}.how-step{grid-template-columns:3rem minmax(0,1fr);column-gap:1.25rem;padding-bottom:2.5rem;display:grid;position:relative}.how-step:last-child{padding-bottom:0}@media (min-width:1024px){.how-step{min-height:17rem}}.how-badge{z-index:1;color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb);border:1px solid #0000;border-radius:9999px;place-items:center;width:3rem;height:3rem;font-weight:700;display:grid;position:relative}.how-line{background:#ffffff1a;border-radius:2px;width:2px;position:absolute;top:3.5rem;bottom:.5rem;left:calc(1.5rem - 1px)}.how-line:after{content:"";border-radius:inherit;transform-origin:top;background:linear-gradient(#a78bfa,#3b82f6);position:absolute;inset:0}.how-text{border:1px solid #0000;border-radius:.75rem;align-self:start;margin-top:-.25rem;padding:.5rem 1rem 1rem}.how-title{color:#fff;margin-bottom:.5rem;font-size:1.25rem;font-weight:700;line-height:1.35}.how-body{color:#9ca3af;font-size:.95rem;line-height:1.65}.how.is-live .how-badge{color:#9ca3af;background:#1f2937;border-color:#ffffff26}.how.is-live .how-step.is-done .how-badge{color:#c4b5fd;background:#8b5cf62e;border-color:#a78bfa80}.how.is-live .how-step.is-active .how-badge{color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:#0000;box-shadow:0 0 0 6px #8b5cf62e,0 0 28px #8b5cf68c}.how.is-live .how-line:after{transform:scaleY(0)}.how.is-live .how-step.is-done .how-line:after{transform:scaleY(1)}.how.is-live .how-title{color:#d1d5db}.how.is-live .how-body{color:#6b7280}.how.is-live .how-step.is-active .how-text{background:#8b5cf612;border-color:#8b5cf673}.how.is-live .how-step.is-active .how-title{color:#c4b5fd}.how.is-live .how-step.is-active .how-body{color:#d1d5db}.how.is-motion .how-badge,.how.is-motion .how-text,.how.is-motion .how-title,.how.is-motion .how-body{transition:color .35s,background-color .35s,border-color .35s,box-shadow .35s}.how.is-motion .how-line:after{transition:transform .7s cubic-bezier(.65,0,.35,1)}.hw-stage{aspect-ratio:4/3;contain:layout paint;background:radial-gradient(circle at 80% 10%,#7c3aed47,#0000 55%),radial-gradient(circle at 10% 95%,#2563eb33,#0000 50%),#0b1328;border:1px solid #8b5cf666;border-radius:1rem;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000059;container-type:inline-size}.hw-scene{color:#e5e7eb;flex-direction:column;justify-content:center;gap:1em;padding:7cqi;font-size:clamp(10px,3.1cqi,15px);line-height:1.35;display:flex;position:absolute;inset:0}.how-text .hw-stage{aspect-ratio:1;margin-inline:-.75rem}@media (min-width:640px){.how-text .hw-stage{aspect-ratio:4/3}}.how-text .hw-scene{padding:6cqi;font-size:clamp(11px,4.2cqi,15px)}@media (min-width:640px){.how-text .hw-scene{font-size:clamp(11px,3.1cqi,15px)}}.hw-panel .hw-scene{opacity:0;visibility:hidden}.how[data-active="1"] .hw-panel [data-scene="1"],.how[data-active="2"] .hw-panel [data-scene="2"],.how[data-active="3"] .hw-panel [data-scene="3"],.how[data-active="4"] .hw-panel [data-scene="4"],.how[data-active="5"] .hw-panel [data-scene="5"]{opacity:1;visibility:visible}.how.is-motion .hw-panel .hw-scene{transition:opacity .45s,visibility .45s}.hw-kicker{letter-spacing:.16em;text-transform:uppercase;color:#c4b5fd;font-size:.7em;font-weight:700;display:block}.hw-box{border:1.5px solid #a78bfabf;border-radius:.3em;flex:none;width:1.05em;height:1.05em}.hw-img{background:linear-gradient(135deg,#8b5cf640,#2563eb26)!important;border-radius:.3em!important;height:2.2em!important}.hw-chips{justify-items:center;display:grid}.hw-chip{color:#ddd6fe;background:#8b5cf629;border:1px solid #a78bfa66;border-radius:9999px;grid-area:1/1;padding:.3em .9em;font-size:.82em;font-weight:600}.hw-chip-before{opacity:0}.hw-scan{opacity:0;pointer-events:none;background:linear-gradient(#0000,#a78bfa4d);border-bottom:2px solid #a78bfa;height:2.4em;position:absolute;left:0;right:0;box-shadow:0 6px 18px #8b5cf699}.hw-browser{background:#0f172ae6;border:1px solid #ffffff24;border-radius:.7em;position:relative;overflow:hidden}.hw-bar{border-bottom:1px solid #ffffff14;align-items:center;gap:.35em;padding:.55em .8em;display:flex}.hw-bar i{background:#ffffff2e;border-radius:50%;width:.55em;height:.55em}.hw-url{color:#9ca3af;background:#ffffff0f;border-radius:9999px;flex:1;margin-left:.6em;padding:.15em .7em;font-size:.8em}.hw-pages{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em;padding:1em;display:grid}.hw-page,.hw-mini{background:#ffffff08;border:1px solid #ffffff1a;border-radius:.45em;flex-direction:column;gap:.45em;padding:.7em;display:flex;position:relative}.hw-page b,.hw-mini b{color:#f3f4f6;font-size:.8em}.hw-page i,.hw-mini i{background:#ffffff21;border-radius:9999px;height:.4em;display:block}.hw-read{color:#fff;background:#7c3aed;border-radius:50%;place-items:center;width:1.35em;height:1.35em;font-size:.78em;font-weight:700;display:grid;position:absolute;top:.5em;right:.5em}.hw-browser .hw-scan{top:2em}.hw-dash{background:linear-gradient(135deg,#7c3aed40,#2563eb1a),#0f172a;border:1px solid #a78bfa80;border-radius:.8em;box-shadow:0 0 40px #8b5cf640}.hw-dash-in{padding:1.2em}.hw-dash-t{color:#fff;margin-top:.2em;font-size:1.15em;font-weight:700}.hw-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;margin-top:.9em;display:grid}.hw-stat{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:.5em;flex-direction:column;gap:.2em;padding:.65em;display:flex}.hw-stat span{color:#9ca3af;font-size:.78em;line-height:1.25}.hw-count{--hw-n:var(--to);counter-reset:hwn var(--hw-n);font-variant-numeric:tabular-nums;color:#fff;font-size:2em;font-weight:800;line-height:1.1}.hw-count:after{content:counter(hwn)}.hw-strong{color:#d1d5db;margin-top:.9em;font-size:.82em}.hw-strong b{color:#c4b5fd}.hw-tasks{flex-direction:column;gap:.6em;display:flex}.hw-task{background:#111827f2;border:1px solid #ffffff1f;border-radius:.6em;padding:.7em .9em}.hw-task-open{border-color:#8b5cf699;box-shadow:0 0 26px #8b5cf640}.hw-task-h{color:#f3f4f6;align-items:center;gap:.6em;font-size:.9em;font-weight:600;display:flex}.hw-paste{background:#0000004d;border:1px dashed #a78bfa73;border-radius:.45em;margin-top:.65em;padding:.6em .75em;position:relative}.hw-code{color:#e5e7eb;margin-top:.3em;padding-right:4em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;display:block}.hw-copy{color:#fff;background:linear-gradient(90deg,#7c3aed,#2563eb);border-radius:.35em;padding:.2em .7em;font-size:.78em;font-weight:700;position:absolute;bottom:.55em;right:.6em}.hw-check{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;gap:1em;display:grid}.hw-mini{min-height:9em;overflow:hidden}.hw-mini-url{color:#9ca3af;font-size:.72em}.hw-mini .hw-scan{top:0}.hw-spin{opacity:0;border:2px solid #ffffff26;border-top-color:#a78bfa;border-radius:50%;width:1.4em;height:1.4em;position:absolute;bottom:.5em;right:.5em}.hw-flip{perspective:700px;height:7em}.hw-flip-in{height:100%;transform-style:preserve-3d;position:relative;transform:rotateX(180deg)}.hw-face{backface-visibility:hidden;border-radius:.6em;flex-direction:column;justify-content:center;align-items:flex-start;gap:.6em;padding:.9em;display:flex;position:absolute;inset:0}.hw-front{background:#111827;border:1px solid #ffffff24}.hw-back{background:linear-gradient(135deg,#16653459,#111827f2);border:1px solid #4ade8080;transform:rotateX(180deg)}.hw-face-t{color:#f3f4f6;font-size:.88em;font-weight:600}.hw-pill{color:#9ca3af;background:#ffffff14;border-radius:9999px;padding:.2em .7em;font-size:.78em;font-weight:600}.hw-live{color:#86efac;align-items:center;gap:.45em;font-weight:700;display:inline-flex}.hw-live-tick{color:#052e16;background:#22c55e;border-radius:50%;place-items:center;width:1.5em;height:1.5em;font-size:.85em;display:grid}.hw-mail{flex-direction:column;align-items:center;gap:.6em;display:flex}.hw-env{filter:drop-shadow(0 0 12px #8b5cf699);width:4em;height:auto}.hw-letter{background:#0f172a;border:1px solid #a78bfa73;border-radius:.7em;width:100%;padding:.9em 1.1em}.hw-from{color:#c4b5fd;align-items:center;gap:.5em;font-size:.75em;font-weight:700;display:flex}.hw-dot{background:linear-gradient(135deg,#7c3aed,#2563eb);border-radius:50%;width:.9em;height:.9em}.hw-now{color:#6b7280;margin-left:auto;font-weight:500}.hw-subj{color:#fff;margin-top:.35em;font-size:1.05em;font-weight:700}.hw-list{flex-direction:column;gap:.4em;margin:.6em 0 0;padding:0;list-style:none;display:flex}.hw-list li{color:#e5e7eb;align-items:center;gap:.55em;font-size:.82em;display:flex}.hw-foot{color:#86efac;margin-top:.65em;font-size:.75em;font-weight:600}.how.is-motion .hw-scene:not(.is-on) *{animation-play-state:paused!important}.how.is-motion .hw-scene.is-reset *{animation:none!important}.how.is-motion .hw-browser .hw-scan{animation:1.5s ease-in-out .25s both hw-sweep-pages}.how.is-motion .hw-read{animation:hw-pop .35s cubic-bezier(.2, 1.5, .4, 1) var(--d) both}.how.is-motion .hw-chip-before{animation:.25s 1.9s both hw-out}.how.is-motion .hw-chip-after{animation:.35s 2s both hw-in}.how.is-motion .hw-dash{animation:.7s cubic-bezier(.65,0,.35,1) .15s both hw-resolve}.how.is-motion .hw-dash-in{animation:.4s .7s both hw-in}.how.is-motion .hw-count{animation:hw-count 1.4s cubic-bezier(.2, .7, .3, 1) var(--d) both}.how.is-motion .hw-strong{animation:.4s 2.3s both hw-up}.how.is-motion .hw-task{animation:hw-slide .55s cubic-bezier(.2, .9, .3, 1) var(--d) both}.how.is-motion .hw-task-open{animation:hw-slide .55s cubic-bezier(.2, .9, .3, 1) var(--d) both, hw-expand .6s cubic-bezier(.65, 0, .35, 1) 1.35s both}.how.is-motion .hw-code{animation:.9s steps(24,end) 1.9s both hw-type}.how.is-motion .hw-copy{animation:.35s cubic-bezier(.2,1.5,.4,1) 2.8s both hw-pop}.how.is-motion .hw-mini .hw-scan{animation:1.2s ease-in-out .2s both hw-sweep-mini}.how.is-motion .hw-spin{animation:.6s linear .2s 2 both hw-rot,.25s 1.4s both hw-out}.how.is-motion .hw-flip-in{animation:.75s cubic-bezier(.5,0,.3,1.2) 1.55s both hw-flip}.how.is-motion .hw-live-tick{animation:.35s cubic-bezier(.2,1.5,.4,1) 2.25s both hw-pop}.how.is-motion .hw-check~.hw-chips .hw-chip-before{animation:.25s 1.5s both hw-out}.how.is-motion .hw-check~.hw-chips .hw-chip-after{animation:.35s 1.65s both hw-in}.how.is-motion .hw-env{animation:.6s cubic-bezier(.2,1.4,.4,1) .1s both hw-drop}.how.is-motion .hw-letter{animation:.55s cubic-bezier(.2,.9,.3,1) .55s both hw-rise}.how.is-motion .hw-list li{animation:hw-up .4s ease var(--d) both}.how.is-motion .hw-foot{animation:.4s 1.8s both hw-up}@keyframes hw-in{0%{opacity:0}}@keyframes hw-out{0%{opacity:1}to{opacity:0}}@keyframes hw-up{0%{opacity:0;transform:translateY(.6em)}}@keyframes hw-pop{0%{opacity:0;transform:scale(0)}}@keyframes hw-sweep-pages{0%{opacity:1;transform:translateY(-1.5em)}85%{opacity:1}to{opacity:0;transform:translateY(9.5em)}}@keyframes hw-sweep-mini{0%{opacity:1;transform:translateY(-2.4em)}85%{opacity:1}to{opacity:0;transform:translateY(9em)}}@keyframes hw-resolve{0%{transform:scaleY(.03);box-shadow:0 0 30px #a78bfae6}}@keyframes hw-count{0%{--hw-n:0}}@keyframes hw-slide{0%{opacity:0;transform:translate(60%)}}@keyframes hw-expand{0%{clip-path:inset(0 0 calc(100% - 2.75em) round .6em)}to{clip-path:inset(0 round .6em)}}@keyframes hw-type{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes hw-rot{0%{opacity:1;transform:rotate(0)}to{opacity:1;transform:rotate(360deg)}}@keyframes hw-flip{0%{transform:rotateX(0)}}@keyframes hw-drop{0%{opacity:0;transform:translateY(-3em)}}@keyframes hw-rise{0%{opacity:0;transform:translateY(1.5em)}}