.lgx-how{--text-primary: hsl(var(--foreground));--text-muted: hsl(var(--muted-foreground));--bg-surface: hsl(var(--muted));--bg-raised: hsl(var(--card));--border-line: hsl(var(--border));--border-strong: hsl(var(--input));--accent-kernel: #f58400;--accent-text: #e07500;--accent-display: #f58400;--status-online: #46703b;--radius-md: 10px;--shadow-soft: 0 20px 60px rgb(93 66 22 / .14);--font-display: "Host Grotesk", "Inter", system-ui, sans-serif;--font-mono: "Host Grotesk", "Inter", system-ui, sans-serif;--size-mono: 12px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;color:var(--text-primary)}.lgx-how .sys{font-family:var(--font-mono);font-size:var(--size-mono);font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin:0}.lgx-how .sys--accent{color:var(--accent-text)}.lgx-how .sys--online{color:var(--status-online)}.lgx-how .display-2,.lgx-how .display-3{font-family:var(--font-display);font-weight:500;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;margin:0}.lgx-how .display-2{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.02em}.lgx-how .display-3{font-size:25px;line-height:1.15}.lgx-how .display-2 em,.lgx-how .display-3 em{font-style:normal;font-weight:500;color:var(--accent-display)}.lgx-how .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}.lgx-how .reveal.in{opacity:1;transform:none}.lgx-how [data-draw] path{transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1) .3s}.lgx-how [data-draw].in path{stroke-dashoffset:0!important}.how__head{display:grid;gap:var(--space-sm);margin-bottom:var(--space-xl)}.how__band{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);list-style:none;padding:0;margin:0}.how__col{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(200px,.95fr) minmax(0,1.35fr);-moz-column-gap:var(--space-xl);column-gap:var(--space-xl);align-items:center;border-top:2px solid var(--text-primary);padding:var(--space-md) 0}.how__text{display:contents}.how__id{display:grid;gap:6px;align-content:center}.how__n{color:var(--accent-text)}.how__title{font-size:25px;margin-top:2px}.how__micro{letter-spacing:2px}.how__say{color:var(--text-muted);font-size:15px;line-height:1.6;margin:0;max-width:42ch}.how__art{display:grid;place-items:center;background:var(--bg-raised);border:1px solid var(--border-line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:var(--space-lg);height:290px}.how__art .reveal{transition-delay:.16s}.how__art .step__visual{width:100%}.how__art .pd-card,.how__art .dash-card{width:100%;max-width:none;background:none;border:0;box-shadow:none;padding:0;gap:12px}.how__art .pd-card__role{font-size:20px}.how__art .dash-card__num{font-size:36px}.how__art .dash-card__spark{height:46px}.how__art .dash-card__log{padding-top:10px;gap:5px;font-size:11px}.how__art .draw{height:100%;width:auto;max-width:100%}.step__visual{display:grid;justify-items:center}.draw{width:min(100%,440px)}.pd-card{width:min(100%,400px);background:var(--bg-raised);border:1px solid var(--border-line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:var(--space-lg);display:grid;gap:var(--space-md)}.pd-card__role{font-family:var(--font-display);font-size:26px;font-weight:500;margin:0}.pd-card__lines{display:grid;gap:10px}.pd-card__lines span{display:block;height:8px;border-radius:4px;background:var(--bg-surface)}.pd-card__approve{border-top:1px solid var(--border-line);padding-top:var(--space-md);display:flex;align-items:center;gap:7px}.dash-card{width:min(100%,420px);background:var(--bg-raised);border:1px solid var(--border-line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:var(--space-lg);display:grid;gap:var(--space-md)}.dash-card__head{display:flex;justify-content:space-between}.dash-card__num{font-family:var(--font-display);font-size:56px;font-weight:500;line-height:1;margin:0}.dash-card__num b{font:inherit;font-weight:500}.dash-card__num span{font-size:16px;color:var(--text-muted);font-family:Inter,system-ui,sans-serif}.dash-card__spark{width:100%}.dash-card__axis{display:flex;justify-content:space-between;font-size:10px}.dash-card__log{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm);border-top:1px solid var(--border-line);padding-top:var(--space-md);font-family:var(--font-mono);font-size:11.5px}.dash-card__log li{display:flex;gap:var(--space-sm);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash-card__log strong{color:var(--accent-text);font-weight:600}.dash-card__log em{font-style:normal;overflow:hidden;text-overflow:ellipsis}.tick{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tick circle,.tick path{stroke-dasharray:1;stroke-dashoffset:1}.step__visual .pd-card__lines span{transform:scaleX(0);transform-origin:left center}.step__visual .pd-card__approve{opacity:0}.step__visual.in .pd-card__lines span{animation:pd-write .42s cubic-bezier(.22,1,.36,1) forwards}.step__visual.in .pd-card__lines span:nth-child(1){animation-delay:.26s}.step__visual.in .pd-card__lines span:nth-child(2){animation-delay:.38s}.step__visual.in .pd-card__lines span:nth-child(3){animation-delay:.5s}.step__visual.in .pd-card__lines span:nth-child(4){animation-delay:.62s}.step__visual.in .pd-card__approve{animation:pd-sign .46s cubic-bezier(.22,1,.36,1) forwards .9s}.step__visual.in .tick circle{animation:w-draw .42s ease forwards 1s}.step__visual.in .tick path{animation:w-draw .3s ease forwards 1.3s}@keyframes pd-write{to{transform:scaleX(1)}}@keyframes pd-sign{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.draw--weave .w-org,.draw--weave .w-trunk,.draw--weave .w-bar,.draw--weave .w-box,.draw--weave .w-ring{stroke-dasharray:1;stroke-dashoffset:1}.draw--weave .w-bind{opacity:0}.step__visual.in .draw--weave .w-org{animation:w-draw .56s ease forwards}.step__visual.in .draw--weave .w-trunk{animation:w-draw .32s ease forwards .3s}.step__visual.in .draw--weave .w-ring--ink{animation:w-draw .46s ease forwards .5s}.step__visual.in .draw--weave .w-ring--hot{animation:w-draw .4s ease forwards .78s}.step__visual.in .draw--weave .w-bind{animation:w-bind .68s cubic-bezier(.22,1,.36,1) forwards .78s}.step__visual.in .draw--weave .w-trunk--b{animation:w-draw .3s ease forwards 1.32s}.step__visual.in .draw--weave .w-bar{animation:w-draw .52s ease forwards 1.42s}.step__visual.in .draw--weave .w-box--a{animation:w-draw .42s ease forwards 1.7s}.step__visual.in .draw--weave .w-box--c{animation:w-draw .42s ease forwards 1.78s}.step__visual.in .draw--weave .w-box--live{animation:w-draw .42s ease forwards 1.74s,w-live .5s ease forwards 2.12s}@keyframes w-draw{to{stroke-dashoffset:0}}@keyframes w-bind{0%{opacity:0;transform:translate(52px)}55%{opacity:1}to{opacity:1;transform:none}}@keyframes w-live{to{stroke:var(--accent-kernel)}}.step__visual .dash-card__log li{opacity:0}.step__visual.in .dash-card__log li{animation:log-row .38s cubic-bezier(.22,1,.36,1) forwards}.step__visual.in .dash-card__log li:nth-child(1){animation-delay:.9s}.step__visual.in .dash-card__log li:nth-child(2){animation-delay:1.24s}.step__visual.in .dash-card__log li:nth-child(3){animation-delay:2.28s}.dash-card__log .is-waiting:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-kernel);flex:none;align-self:center;opacity:0}.step__visual.in .dash-card__log .is-waiting:after{animation:gate-wait .52s ease-in-out 1.62s 2 alternate,gate-settle .32s ease forwards 2.66s}@keyframes log-row{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes gate-wait{0%{opacity:.25}to{opacity:1}}@keyframes gate-settle{to{opacity:1}}@media(max-width:1100px){.how__col{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.how__text{display:grid;gap:var(--space-md);align-content:center}}@media(max-width:800px){.how__col{grid-template-columns:minmax(0,1fr)}.how__art{height:auto;min-height:240px;margin-top:var(--space-sm)}}@media(prefers-reduced-motion:reduce){.lgx-how .reveal{opacity:1;transform:none;transition:none}.step__visual .pd-card__lines span,.step__visual .pd-card__approve,.step__visual .dash-card__log li,.draw--weave .w-bind{opacity:1;transform:none}.tick circle,.tick path,.draw--weave path,.lgx-how [data-draw] path{stroke-dashoffset:0!important}.draw--weave .w-box--live{stroke:var(--accent-kernel)}.step__visual .pd-card__lines span{transform:scaleX(1)}.dash-card__log .is-waiting:after{opacity:1}.step__visual.in .pd-card__lines span,.step__visual.in .pd-card__approve,.step__visual.in .tick circle,.step__visual.in .tick path,.step__visual.in .dash-card__log li,.step__visual.in .dash-card__log .is-waiting:after,.step__visual.in .draw--weave path,.step__visual.in .draw--weave .w-bind{animation:none}}