@layer components{.how .how-vis[data-vis]:has(.hc){display:block;padding:0;background:none}.how:has(.hc) .how-stage{background:none}.how .how-vis[data-vis]>.hc{width:100%;max-width:36rem;margin-inline:auto}.hc{color:var(--color-ink)}.hc-flow{display:flex;flex-direction:column;gap:1.75rem}.hc-part{display:flex;flex-direction:column;gap:1.5rem}@media(min-width:1024px){.rail .how-vis:has(.hc){overflow:hidden}.how.rail .how-vis[data-vis]:has(.hc){top:calc(var(--header-h) + 1rem);height:calc(100svh - var(--header-h) - 2.5rem)}.rail .hc{height:100%}.rail .hc-flow{transform:translateY(var(--hc-y, 0px))}}.how:not(.rail) .hc-part:not(.is-live){display:none}.hc-q{display:flex;align-items:flex-end;justify-content:flex-end;gap:.75rem}.hc-bubble{max-width:80%;padding:.875rem 1.25rem;border-radius:1.25rem;background:var(--color-brand);color:#fff;font-size:var(--text-lede);line-height:1.4}.hc-av{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--role);color:#1a1f2e;font-size:var(--text-caption);font-weight:600}.hc-av-sm{width:1.625rem;height:1.625rem;font-size:var(--text-ui)}.hc-turn{display:flex;flex-direction:column;gap:.625rem}.hc-tool{color:var(--color-ink-2);font-size:var(--text-caption);font-weight:600}.hc-status{display:grid;color:var(--color-ink-2);font-size:var(--text-small)}.hc-step{grid-area:1 / 1;display:inline-flex;align-items:center;gap:.4375rem}.hc-step .ico{width:.875rem;height:.875rem;stroke-width:2.25;color:var(--color-link)}.hc-step:not(:last-child){visibility:hidden}.hc-card{padding:1.125rem 1.375rem;border-radius:1.25rem;background:var(--color-sheet);color:var(--color-ink);box-shadow:var(--shadow-window)}.hc-lead{font-size:var(--text-lede);line-height:1.35;font-weight:600;letter-spacing:-.01em}.hc-sub{color:var(--color-ink-2);font-size:var(--text-caption);font-weight:500}.hc-rows{display:flex;flex-direction:column;margin:.75rem 0 0;padding:0;list-style:none;font-size:var(--text-small);font-variant-numeric:tabular-nums}.hc-rows li{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:2.375rem;border-top:1px solid var(--color-line)}.hc-rows li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hc-rows b{flex:none;font-weight:500}.hc-reg,.hc-pct{margin-left:.25rem;color:var(--color-ink-2);font-size:var(--text-ui);font-weight:400}.hc-more{color:var(--color-ink-2)}.hc-rows .hc-total{border-top:1px solid var(--color-ink);font-weight:600}.hc-rows .hc-total b{font-weight:600}.hc-app{display:flex;flex-direction:column;gap:1rem}.hc-app-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}.hc-app-t{color:var(--color-ink-2);font-size:var(--text-caption);font-weight:600}.hc-share{display:grid;justify-items:center;align-items:center;min-height:1.75rem;padding:0 .75rem;border-radius:var(--radius-control);background:var(--color-brand);color:#fff;font-size:var(--text-ui);font-weight:600}.hc-share>*{grid-area:1 / 1;display:inline-flex;align-items:center;gap:.3125rem}.hc-share .ico{width:.75rem;height:.75rem;stroke-width:2.5}.hc-share-done{visibility:hidden}.hc-share{position:relative}.hc-share:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px var(--color-brand);opacity:0;pointer-events:none}.hc-cursor{position:absolute;right:-.625rem;bottom:-.875rem;z-index:1;display:none;width:1rem;height:1.25rem}.hc-cursor svg{display:block;width:100%;height:100%;fill:var(--color-ink);stroke:#fff;stroke-width:1.25;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgb(15 19 32 / .25));transform-origin:1.5px 1.5px;transition:transform .12s var(--ease-out)}.hc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.hc-fig{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem}.hc-fig b{font-size:var(--text-figure-lg);font-weight:600;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.hc-fig-sm b{font-size:var(--text-figure)}.hc-down{display:inline-flex;align-items:center;gap:.25rem;min-height:1.625rem;padding:.1875rem .625rem .1875rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--color-danger) 9%,var(--color-sheet));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-danger) 18%,transparent);color:var(--color-danger);font-size:var(--text-ui);font-weight:600;white-space:nowrap}.hc-down .ico{width:.8125rem;height:.8125rem;stroke-width:2.25;rotate:180deg}.hc-key{display:flex;gap:.875rem;color:var(--color-ink-2);font-size:var(--text-ui)}.hc-k26,.hc-k25{display:inline-flex;align-items:center;gap:.3125rem}.hc-k26:before,.hc-k25:before{content:"";width:.75rem;border-top:2px solid var(--color-brand)}.hc-k25:before{border-top:2px dashed var(--color-line-3)}.hc-trend{display:block;width:100%;height:3.25rem;margin-top:.75rem;overflow:visible}.hc-area{fill:var(--color-brand-tint);opacity:.6}.hc-l25{fill:none;stroke:var(--color-line-3);stroke-width:1.5;stroke-dasharray:3 3}.hc-l26{fill:none;stroke:var(--color-brand);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}.hc-reveal{transform-box:fill-box;transform-origin:left center}.hc-months{display:flex;justify-content:space-between;margin-top:.375rem;color:var(--color-ink-2);font-size:.6875rem}.hc-regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:.875rem 0;list-style:none;border-block:1px solid var(--color-line)}.hc-regions li{display:flex;flex-direction:column;gap:.25rem;padding:0 1rem}.hc-regions li:first-child{padding-left:0}.hc-regions li+li{border-left:1px solid var(--color-line)}.hc-reg-n{color:var(--color-ink-2);font-size:var(--text-ui)}.hc-regions b{font-size:1.125rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.hc-bar{display:block;height:.25rem;margin-top:.375rem;border-radius:999px;background:var(--color-tint);overflow:hidden}.hc-bar i{display:block;width:calc(var(--s) * 100%);height:100%;border-radius:inherit;background:var(--color-brand);transform-origin:left center}.hc-sec-3 .hc-rows{margin-top:.25rem}.hc-notice{display:inline-flex;align-self:center;align-items:center;gap:.4375rem;color:var(--color-ink-2);font-size:var(--text-small)}.hc-notice .ico{width:.875rem;height:.875rem;stroke-width:2.25;color:var(--color-link)}.hc-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.hc-person{display:flex;flex-direction:column;gap:.375rem}.hc-who{display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem;font-size:var(--text-small);font-weight:600}.hc-who .role-chip{min-height:1.375rem;margin-left:auto;font-size:var(--text-ui)}.hc-person .hc-rows{margin-top:.375rem;font-size:var(--text-ui)}.hc-access{display:flex;flex-wrap:wrap;gap:.3125rem;margin:0 0 .5rem;padding:0;list-style:none}.hc-access li{display:inline-flex;align-items:center;gap:.3125rem;height:1.5rem;padding:0 .5rem;border-radius:999px;background:var(--color-tint);color:var(--color-ink-2);font-size:.75rem;font-weight:500}.hc-access li .ico{width:.6875rem;height:.6875rem;stroke-width:2}.hc-access li:not(.is-on){opacity:.55}.hc-access .is-on{background:var(--color-brand-tint);color:var(--color-brand-ink);font-weight:600}.hc-flag{width:.9375rem;height:.625rem;border-radius:2px;box-shadow:0 0 0 1px #0f13201f}.hc-point{max-width:30rem;align-self:center;color:var(--color-ink-2);font-size:var(--text-small);text-align:center;text-wrap:balance}.hc-point b{color:var(--color-ink);font-weight:600}.hc-sees{margin:0;color:var(--color-ink-2);font-size:var(--text-small);text-align:center;text-wrap:balance}@media(max-width:640px){.hc-flow,.hc-part{gap:1.25rem}.hc-bubble,.hc-lead{font-size:var(--text-body)}.hc-card{padding:1rem 1.125rem}.hc-key{display:none}.hc-fig b{font-size:var(--text-figure)}.hc-regions b{font-size:var(--text-small)}.hc-regions li{padding:0 .625rem}.hc-people{gap:.5rem}.hc-who .role-chip{display:none}.hc-access li:not(.is-on) span{display:none}.hc-access li:not(.is-on){padding:0 .4375rem}}}@layer components{:where(.motion) .how-vis.loop .hc-part.is-live :is(.hc-q,.hc-tool,.hc-status,.hc-card,.hc-notice,.hc-point,.hc-sees){opacity:0;transform:translateY(6px);transition:opacity var(--duration-state) linear,transform var(--duration-state) var(--ease-out)}:where(.motion) .how-vis.loop .hc-part.is-live :is(.hc-app,.hc-person){transform:translateY(1.25rem);transition:opacity var(--duration-state) linear,transform var(--duration-move) var(--ease-out)}:where(.motion) .how-vis.loop .hc-part.is-live [data-type] .ch{visibility:hidden}:where(.motion) .how-vis.loop .hc-part.is-live [data-type] .ch.on{visibility:visible}:where(.motion) .how-vis.loop .hc-part.is-live .hc-step{visibility:visible;opacity:0;transform:translateY(6px);transition:opacity .12s linear,transform 0s linear .12s}:where(.motion) .how-vis.loop .hc-part.is-live .hc-rows li{opacity:0;transform:translateY(6px);transition:opacity var(--duration-state) linear calc(.2s + var(--r) * 90ms),transform var(--duration-state) var(--ease-out) calc(.2s + var(--r) * 90ms)}:where(.motion) .how-vis.loop.a-q .hc-part.is-live[data-part=ask] .hc-q,:where(.motion) .how-vis.loop.a-k .hc-part.is-live[data-part=ask] :is(.hc-tool,.hc-status),:where(.motion) .how-vis.loop.a-a .hc-part.is-live[data-part=ask] .hc-card{opacity:1;transform:none}:where(.motion) .how-vis.loop:not(.a-qs) .hc-part.is-live[data-part=ask] [data-type] .ch.on:not(:has(+.ch.on)){box-shadow:2px 0 #ffffffd9}:where(.motion) .how-vis.loop.a-t1:not(.a-t2) .hc-part.is-live[data-part=ask] .hc-step:nth-child(1),:where(.motion) .how-vis.loop.a-t2:not(.a-t3) .hc-part.is-live[data-part=ask] .hc-step:nth-child(2),:where(.motion) .how-vis.loop.a-t3 .hc-part.is-live[data-part=ask] .hc-step:nth-child(3){opacity:1;transform:none;transition:opacity .2s linear .14s,transform var(--duration-state) var(--ease-out) .14s}:where(.motion) .how-vis.loop.a-a .hc-part.is-live[data-part=ask] .hc-rows li{opacity:1;transform:none}:where(.motion) .how-vis.loop.b-q .hc-part.is-live[data-part=build] .hc-q,:where(.motion) .how-vis.loop.b-k .hc-part.is-live[data-part=build] :is(.hc-tool,.hc-status),:where(.motion) .how-vis.loop.b-c .hc-part.is-live[data-part=build] .hc-card{opacity:1;transform:none}:where(.motion) .how-vis.loop:not(.b-qs) .hc-part.is-live[data-part=build] [data-type] .ch.on:not(:has(+.ch.on)){box-shadow:2px 0 #ffffffd9}:where(.motion) .how-vis.loop.b-k:not(.b-t2) .hc-part.is-live[data-part=build] .hc-step:nth-child(1),:where(.motion) .how-vis.loop.b-t2 .hc-part.is-live[data-part=build] .hc-step:nth-child(2){opacity:1;transform:none;transition:opacity .2s linear .14s,transform var(--duration-state) var(--ease-out) .14s}:where(.motion) .how-vis.loop .hc-part.is-live[data-part=build] :is(.hc-sec,.hc-app-h){opacity:0;transform:translateY(6px);transition:opacity var(--duration-state) linear,transform var(--duration-state) var(--ease-out)}:where(.motion) .how-vis.loop.b-c .hc-part.is-live[data-part=build] .hc-app-h,:where(.motion) .how-vis.loop.b-1 .hc-part.is-live[data-part=build] .hc-sec-1,:where(.motion) .how-vis.loop.b-2 .hc-part.is-live[data-part=build] .hc-sec-2,:where(.motion) .how-vis.loop.b-3 .hc-part.is-live[data-part=build] .hc-sec-3{opacity:1;transform:none}:where(.motion) .how-vis.loop .hc-part.is-live[data-part=build] .hc-reveal{transform:scaleX(0);transition:transform .8s var(--ease-out) .1s}:where(.motion) .how-vis.loop.b-1 .hc-part.is-live[data-part=build] .hc-reveal{transform:none}:where(.motion) .how-vis.loop .hc-part.is-live[data-part=build] .hc-bar i{transform:scaleX(0);transition:transform .5s var(--ease-out) calc(.1s + var(--k) * 80ms)}:where(.motion) .how-vis.loop.b-2 .hc-part.is-live[data-part=build] .hc-bar i{transform:none}:where(.motion) .how-vis.loop.b-3 .hc-part.is-live[data-part=build] .hc-rows li{opacity:1;transform:none}.how-vis:has(.hc[data-upto=share]) .hc-part[data-part=build] .hc-share-do{visibility:hidden}.how-vis:has(.hc[data-upto=share]) .hc-part[data-part=build] .hc-share-done{visibility:visible}:where(.motion) .how-vis.loop:not(.s-shared) .hc-part[data-part=build] .hc-share-do{visibility:visible}:where(.motion) .how-vis.loop:not(.s-shared) .hc-part[data-part=build] .hc-share-done{visibility:hidden}:where(.motion) .how-vis.loop .hc-part[data-part=build] .hc-share{transition:transform var(--duration-ui) var(--ease-out),background-color var(--duration-ui) linear}:where(.motion) .how-vis.loop.s-press:not(.s-shared) .hc-part[data-part=build] .hc-share{transform:scale(.94);background:var(--color-brand-deep)}:where(.motion) .how-vis.loop .hc-part[data-part=build] .hc-cursor{display:block;opacity:0;transform:translate(10px,8px);transition:opacity .25s linear,transform .5s var(--ease-out)}:where(.motion) .how-vis.loop.s-aim:not(.s-n) .hc-part[data-part=build] .hc-cursor{opacity:1;transform:none}:where(.motion) .how-vis.loop.s-press:not(.s-shared) .hc-part[data-part=build] .hc-cursor svg{transform:scale(.86)}:where(.motion) .how-vis.loop.s-shared .hc-part[data-part=build] .hc-share:after{animation:hc-ring .9s var(--ease-out) 1}@keyframes hc-ring{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.45,1.9)}}:where(.motion) .how-vis.loop .hc-part.is-live[data-part=share] .hc-access li:not(.is-on){opacity:1;transition:opacity var(--duration-state) linear .5s}:where(.motion) .how-vis.loop.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(1) .hc-access li:not(.is-on),:where(.motion) .how-vis.loop.s-p2 .hc-part.is-live[data-part=share] .hc-person:nth-child(2) .hc-access li:not(.is-on){opacity:.55}:where(.motion) .how-vis.loop.s-n .hc-part.is-live[data-part=share] .hc-notice,:where(.motion) .how-vis.loop.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(1),:where(.motion) .how-vis.loop.s-p2 .hc-part.is-live[data-part=share] .hc-person:nth-child(2),:where(.motion) .how-vis.loop.s-pt .hc-part.is-live[data-part=share] :is(.hc-point,.hc-sees){opacity:1;transform:none}:where(.motion) .how-vis.loop.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(1) li,:where(.motion) .how-vis.loop.s-p2 .hc-part.is-live[data-part=share] .hc-person:nth-child(2) li{opacity:1;transform:none}:where(.motion) .how-vis.loop.is-rev .hc-part.is-live *{transition-delay:0s!important}:where(.motion) .how-vis.loop.is-rev.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(2),:where(.motion) .how-vis.loop.is-rev.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(2) li{opacity:1;transform:none}:where(.motion) .how-vis.loop.is-rev.s-p1 .hc-part.is-live[data-part=share] .hc-person:nth-child(2) .hc-access li:not(.is-on){opacity:.55}}
