.ab-intro{gap:2.5rem;display:grid}.ab-statement{text-wrap:balance;font-size:clamp(2.25rem,5.2vw,3.5rem);line-height:1.08}@keyframes ab-type{0%{opacity:0}to{opacity:1}}@keyframes ab-caret-on{0%,to{opacity:1}}@keyframes ab-caret-blink{0%,49%{opacity:1}50%,to{opacity:0}}.ab-typed,.ab-caret{position:relative}.ab-caret{width:0;height:.8em;display:inline-block}.ab-typed:after,.ab-caret:after{content:"";background:var(--foreground);opacity:0;width:2px;position:absolute;top:.14em;bottom:.02em;right:-3px}.ab-caret:after{top:-.06em;bottom:-.04em}@media (prefers-reduced-motion:no-preference){.ab-typed{animation:1ms linear both ab-type;animation-delay:calc(.75s + var(--i) * 62ms)}.ab-typed:after{animation:62ms linear ab-caret-on;animation-delay:calc(.75s + var(--i) * 62ms)}.ab-caret:after{animation:.75s linear ab-caret-blink}.ab-typed:last-child:after{animation:.65s linear 2 ab-caret-blink;animation-delay:calc(.75s + var(--i) * 62ms)}}.ab-yuna{aspect-ratio:3/3.9;cursor:pointer;background:0 0;border:0;width:min(15rem,60vw);margin:.5rem auto 1.5rem;display:block;position:relative}.ab-yuna:focus-visible{outline:2px solid var(--foreground);outline-offset:12px;border-radius:8px}.ab-photo{background:var(--muted);border:7px solid #fff;border-radius:8px;transition:transform .5s cubic-bezier(.2,.9,.25,1.05);position:absolute;inset:0;overflow:hidden;box-shadow:0 0 0 1px #28221414,0 18px 34px -16px #28221473}.ab-photo img{object-fit:cover;object-position:var(--crop,50% 60%)}.ab-photo[data-place="0"]{z-index:3;transform:rotate(-3deg)}.ab-photo[data-place="1"]{z-index:2;transform:rotate(4deg)translate(7%,-1%)}.ab-photo[data-place="2"]{z-index:1;transform:rotate(-8deg)translate(-7%,1%)}@keyframes ab-shuffle{0%{z-index:5;transform:rotate(-3deg)}46%{z-index:5;transform:translate(72%,-3%)rotate(11deg)}54%{z-index:0;transform:translate(72%,-3%)rotate(11deg)}to{z-index:1;transform:rotate(-8deg)translate(-7%,1%)}}.ab-photo[data-leaving]{animation:.62s cubic-bezier(.3,.6,.3,1) both ab-shuffle}main:has(>.ab){overflow-x:clip}.ab strong{font-weight:600}.ab-how{gap:1.75rem 2rem;margin-top:5rem;scroll-margin-top:2rem;display:grid;container-type:inline-size}.ab-lists{gap:3.5rem 2rem;margin-top:5.5rem;display:grid}.ab-lists section{scroll-margin-top:2rem}.ab-list{gap:.625rem;margin-top:1.75rem;display:grid}.ab-list li{font-family:var(--font-serif), Georgia, serif;letter-spacing:-.01em;align-items:flex-start;gap:.75rem;font-size:1.5rem;line-height:1.2;display:flex}.ab-mark{border:1.5px solid var(--foreground);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.375rem;height:1.375rem;margin-top:.125rem;display:flex}.ab-mark svg{width:.875rem;height:.875rem}.ab-list[data-done] .ab-mark{background:var(--foreground);color:var(--background)}.ab-list:not([data-done]) .ab-mark{border-color:var(--muted-foreground);border-style:dashed}@keyframes ab-fill-mark{0%{background:0 0}}@keyframes ab-draw{0%{stroke-dashoffset:1px}}.ab-lists[data-armed]:not([data-play]) .ab-list[data-done] .ab-mark{background:0 0}.ab-lists[data-armed]:not([data-play]) .ab-list[data-done] path{stroke-dashoffset:1px}.ab-list path{stroke-dasharray:1}.ab-lists[data-play] .ab-list[data-done] .ab-mark{animation:.2s linear both ab-fill-mark;animation-delay:calc(var(--i) * 90ms + .1s)}.ab-lists[data-play] .ab-list[data-done] path{animation:.28s ease-out both ab-draw;animation-delay:calc(var(--i) * 90ms + .16s)}.ab-states{align-items:center;gap:1.5rem 3rem;margin-top:5.5rem;display:grid}.ab-states-count{font-variant-numeric:tabular-nums;margin-top:.75rem;font-size:clamp(4.5rem,11vw,7.5rem);line-height:.95}.ab-states-of{color:var(--muted-foreground);letter-spacing:0;font-size:.34em}.ab-map{min-width:0}@keyframes ab-state-in{0%{fill:var(--muted)}}.ab-states[data-armed]:not([data-play]) path[data-visited]{fill:var(--muted)}.ab-states[data-play] path[data-visited]{animation:.5s ease-out both ab-state-in;animation-delay:calc(var(--i) * 70ms)}@media (min-width:900px){.ab-intro{grid-template-columns:minmax(0,1fr) 19rem;align-items:start;gap:3.5rem}.ab-yuna{width:15rem;margin:1rem 2rem 0 auto}.ab-how{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.ab-how-scene{grid-column:span 7}.ab-how-text{grid-column:span 5}.ab-lists{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-states{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}.ws-how{font-family:var(--font-sans), system-ui, sans-serif;color:#24201b;background:linear-gradient(160deg,#eeedfb 0%,#e3e1f8 100%)}.hw-col{color:#4c4a68;background:#ffffff8c;border-radius:2cqw;width:29cqw;padding:1.7cqw 1.8cqw;font-size:2.2cqw;font-weight:600;position:absolute;top:5.5cqw;bottom:5.5cqw;box-shadow:inset 0 0 0 1px #2f27ce1a}.hw-col-1{left:4cqw}.hw-col-2{left:35.5cqw}.hw-col-3{left:67cqw}.hw-card{--x:5.5cqw;--y:12.5cqw;top:var(--y);left:var(--x);background:#fff;border-radius:1.4cqw;width:26cqw;padding:1.9cqw 2cqw 2.1cqw;font-size:2.4cqw;font-weight:500;line-height:1.25;position:absolute;box-shadow:0 0 0 1px #24201b0f,0 1.2cqw 2.4cqw -1cqw #1e183c4d}.hw-cursor{--tint:#2f27ce;--ink:#fff;position:absolute;top:62%;left:34%}.hw-cursor svg{width:3.2cqw;height:3.2cqw;fill:var(--tint);stroke:var(--ink);stroke-width:1.5px;stroke-linejoin:round;filter:drop-shadow(0 .3cqw .5cqw #1e183c4d);display:block}.hw-tag{background:var(--tint);color:var(--ink);white-space:nowrap;border-radius:.5cqw 1.4cqw 1.4cqw;padding:.4cqw 1.1cqw .5cqw;font-size:1.75cqw;font-weight:600;position:absolute;top:2.5cqw;left:2.1cqw}.hw-human{--tint:#24201b}@keyframes hw-drag{0%{transform:translate(var(--from-x), var(--from-y));box-shadow:0 0 0 1px #24201b0f,0 1.2cqw 2.4cqw -1cqw #1e183c4d}14%{transform:translate(var(--from-x), var(--from-y)) rotate(-1.6deg) scale(1.04);box-shadow:0 0 0 1px #24201b0f,0 3cqw 5cqw -1.5cqw #1e183c73}86%{transform:rotate(1deg)scale(1.04)}to{transform:none}}@keyframes hw-appear{0%{opacity:0;transform:translate(2cqw,2cqw)}}.ws[data-armed]:not([data-play]) .hw-card[data-moves]{transform:translate(var(--from-x), var(--from-y))}.ws[data-armed]:not([data-play]) .hw-cursor{opacity:0}.ws[data-play] .hw-card[data-moves]{z-index:2;animation:1.15s cubic-bezier(.45,.05,.25,1) backwards hw-drag;animation-delay:var(--at)}.ws[data-play] .hw-cursor{animation:hw-appear .3s var(--glide,ease-out) backwards;animation-delay:calc(var(--at,.2s) - .25s)}@media (prefers-reduced-motion:reduce){.ab-photo{transition:none}.ab-photo[data-leaving]{animation:none}}