.demo:where(.astro-sbhw6ysq),.comment:where(.astro-sbhw6ysq),.body:where(.astro-sbhw6ysq),.suggestion:where(.astro-sbhw6ysq){min-width:0}.demo:where(.astro-sbhw6ysq){gap:1.25rem;font-size:.95rem;line-height:1.55;display:grid}.demo:where(.astro-sbhw6ysq) .comment:where(.astro-sbhw6ysq){box-shadow:none;border-radius:18px;overflow:hidden}.demo:where(.astro-sbhw6ysq) .comment:where(.astro-sbhw6ysq):first-child{box-shadow:6px 6px 0 var(--yellow)}header:where(.astro-sbhw6ysq){background:var(--plate);border-bottom:2.5px solid var(--line);color:var(--muted);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.7rem 1.1rem;display:flex}header:where(.astro-sbhw6ysq) strong:where(.astro-sbhw6ysq){color:var(--ink)}.avatar:where(.astro-sbhw6ysq){background:var(--yellow);border:2px solid var(--night);border-radius:7px;flex:none;width:1.4rem;height:1.4rem}.body:where(.astro-sbhw6ysq){color:var(--ink);gap:.75rem;padding:1.1rem 1.2rem;display:grid}.body:where(.astro-sbhw6ysq) p:where(.astro-sbhw6ysq){margin:0}.title:where(.astro-sbhw6ysq),.heading:where(.astro-sbhw6ysq){font-size:1.05rem;font-weight:700}.suggestion:where(.astro-sbhw6ysq){border:2px solid var(--line);border-radius:12px;overflow:hidden}.suggestion-head:where(.astro-sbhw6ysq){background:var(--plate);border-bottom:2px solid var(--line);color:var(--ink);padding:.4rem .8rem;font-size:.85rem;font-weight:700}pre:where(.astro-sbhw6ysq){font-family:var(--sl-font-mono);margin:0;padding:.4rem 0;font-size:.8rem;line-height:1.8;display:grid;overflow-x:auto}pre:where(.astro-sbhw6ysq) span:where(.astro-sbhw6ysq){white-space:pre;padding:0 .8rem}.del:where(.astro-sbhw6ysq){color:var(--night);background:#ffe6de}.add:where(.astro-sbhw6ysq){color:var(--night);background:#dff5e5}:root:not([data-theme=light]) .del:where(.astro-sbhw6ysq){color:var(--ink);background:#4a2a22}:root:not([data-theme=light]) .add:where(.astro-sbhw6ysq){color:var(--ink);background:#1f3d2a}.footer:where(.astro-sbhw6ysq){color:var(--muted);font-size:.82rem}.checklist:where(.astro-sbhw6ysq){gap:.3rem;margin:0;padding:0;list-style:none;display:grid}label:where(.astro-sbhw6ysq){cursor:pointer;align-items:baseline;gap:.65rem;min-height:2.75rem;padding-top:.6rem;display:flex}input:where(.astro-sbhw6ysq){width:1.15rem;height:1.15rem;accent-color:var(--yellow);flex:none;transform:translateY(.18em)}.status:where(.astro-sbhw6ysq):empty{display:none}.status:where(.astro-sbhw6ysq){background:var(--yellow);color:var(--on-yellow);border-radius:8px;justify-self:start;padding:.3rem .75rem;font-weight:700}.mascot-replay{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;display:block}.mascot-replay:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;border-radius:12px}.mascot-replay:disabled{cursor:default}.mascot{width:100%;height:auto;display:block;overflow:visible}.m-handle,.m-speed{stroke:var(--ink)}.m-floor{stroke:var(--rule)}.m-sign-text{font-family:var(--font-label);fill:var(--on-yellow)}.mascot :is(.m-scrub,.m-squash,.m-breathe,.m-strands,.m-sign,.m-puddle,.m-mini,.m-puff,.m-drip,.m-spark,.m-mini-spark,.m-eyes){transform-box:fill-box}.m-scrub,.m-squash,.m-breathe,.m-sign{transform-origin:50% 100%}.m-strands{transform-origin:50% 0}.m-puddle,.m-mini,.m-puff,.m-spark,.m-mini-spark,.m-eyes{transform-origin:50%}.m-puddle{opacity:0;transform:scale(0)}.m-speed,.m-puff,.m-drop,.m-drip,.m-mini,.m-mini-spark,.m-worried{opacity:0}.motion .m-eyes{animation:4.6s 5.4s infinite m-blink}.motion .m-breathe{animation:1.8s ease-in-out 5s infinite alternate m-breathe}.m-paused :is(.m-eyes,.m-breathe),.m-hold *{animation-play-state:paused}.motion .m-hold :is(.m-move,.m-speed){visibility:hidden}.motion .m-intro :is(.m-move,.m-hop,.m-scrub,.m-squash,.m-strands,.m-sign,.m-puddle,.m-bubbles,.m-speed,.m-puff,.m-drop,.m-spark,.m-pupils,.m-worried,.m-smile){animation-duration:5s;animation-timing-function:cubic-bezier(.45,0,.3,1);animation-delay:.4s;animation-fill-mode:both}.motion .m-intro .m-move{animation-name:m-in}.motion .m-intro .m-hop{animation-name:m-hop}.motion .m-intro .m-scrub{animation-name:m-scrub}.motion .m-intro .m-squash{animation-name:m-squash}.motion .m-intro .m-strands{animation-name:m-swish}.motion .m-intro .m-strands-outer{animation-delay:.47s}.motion .m-intro .m-sign{animation-name:m-straighten}.motion .m-intro .m-puddle{animation-name:m-dry}.motion .m-intro .m-bubbles{animation-name:m-rise}.motion .m-intro .m-speed{animation-name:m-speed}.motion .m-intro .m-puff{animation-name:m-puff}.motion .m-intro .m-drop-a{animation-name:m-drop-a}.motion .m-intro .m-drop-b{animation-name:m-drop-b}.motion .m-intro .m-drop-c{animation-name:m-drop-c}.motion .m-intro .m-spark{animation-name:m-spark}.motion .m-intro .m-spark-late{animation-delay:.55s}.motion .m-intro .m-pupils{animation-name:m-look}.motion .m-intro .m-worried{animation-name:m-worried}.motion .m-intro .m-smile{animation-name:m-smile}@keyframes m-in{0%{animation-timing-function:cubic-bezier(.2,.6,.35,1);transform:translate(130px)}13%{transform:translate(-5px)}17%,62%{transform:translate(0)}66%,71%{transform:translate(-8px)}77%,to{transform:translate(0)}}@keyframes m-hop{0%,4%,8%{animation-timing-function:cubic-bezier(.2,.7,.4,1);transform:translateY(0)}2%,6%,10%{animation-timing-function:cubic-bezier(.6,0,.8,.4);transform:translateY(-10px)}12%,77%{animation-timing-function:cubic-bezier(.2,.7,.4,1);transform:translateY(0)}81%{animation-timing-function:cubic-bezier(.6,0,.8,.4);transform:translateY(-15px)}85%,to{transform:translateY(0)}}@keyframes m-squash{0%,12%{transform:scale(1)}14.5%{transform:scale(1.12,.86)}18%{transform:scale(.95,1.06)}21.5%{transform:scale(1.02,.98)}24%,75%{transform:scale(1)}77.5%{transform:scale(1.08,.9)}80.5%{transform:scale(.94,1.08)}85%{transform:scale(1.08,.9)}88.5%{transform:scale(.98,1.03)}91%,to{transform:scale(1)}}@keyframes m-scrub{0%{transform:translate(0)rotate(-10deg)}13%{transform:translate(0)rotate(10deg)}17%{transform:translate(0)rotate(-3deg)}21%{transform:translate(0)rotate(0)}25.5%,35.5%,45.5%{transform:translate(-13px)rotate(5deg)}30.5%,40.5%,50.5%{transform:translate(10px)rotate(-5deg)}55%{transform:translate(-5px)rotate(2deg)}59%{transform:translate(0)rotate(0)}65.5%,70%{transform:translate(0)rotate(-18deg)}76%,to{transform:translate(0)rotate(0)}}@keyframes m-swish{0%{transform:skew(16deg)}13%{transform:skew(-14deg)}17.5%{transform:skew(7deg)}21.5%{transform:skew(-2deg)}26%,36%,46%{transform:skew(13deg)}31%,41%,51%{transform:skew(-13deg)}56%{transform:skew(6deg)}61%{transform:skew(0)}67%{transform:skew(7deg)}72%{transform:skew(-4deg)}77%{transform:skew(0)}81%{transform:skew(-5deg)}86%{transform:skew(6deg)}90%{transform:skew(-2deg)}94%,to{transform:skew(0)}}@keyframes m-dry{0%,24%{opacity:1;transform:scale(1)}29%{transform:scale(.82,.86)}39%{transform:scale(.58,.66)}49%{opacity:1;transform:scale(.32,.42)}56%{opacity:.8;transform:scale(.1,.2)}59%,to{opacity:0;transform:scale(0)}}@keyframes m-straighten{0%,65.5%{transform-origin:100% 100%;transform:rotate(7deg)}68.5%{transform-origin:50% 100%;transform:rotate(-4deg)}71.5%{transform:rotate(2.4deg)}74.5%{transform:rotate(-1.2deg)}77.5%{transform:rotate(.5deg)}80%,to{transform-origin:50% 100%;transform:rotate(0)}}@keyframes m-rise{0%,22%{opacity:0;transform:translateY(24px)}34%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-36px)}84%{opacity:0;transform:translateY(-56px)}85%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes m-speed{0%,7%{opacity:1;transform:translate(0)}15%,to{opacity:0;transform:translate(24px)}}@keyframes m-puff{0%,12.5%{opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(1)}23%,to{opacity:0;transform:scale(1.5)translateY(-6px)}}@keyframes m-drop-a{0%,27%{opacity:0;transform:translate(0)}28%{opacity:1;animation-timing-function:cubic-bezier(.2,.6,.5,1);transform:translate(0)}34%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.5);transform:translate(-26px,-30px)}40%,to{opacity:0;transform:translate(-40px,-4px)}}@keyframes m-drop-b{0%,37%{opacity:0;transform:translate(0)}38%{opacity:1;animation-timing-function:cubic-bezier(.2,.6,.5,1);transform:translate(0)}44%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.5);transform:translate(24px,-34px)}50%,to{opacity:0;transform:translate(36px,-6px)}}@keyframes m-drop-c{0%,47%{opacity:0;transform:translate(0)}48%{opacity:1;animation-timing-function:cubic-bezier(.2,.6,.5,1);transform:translate(0)}53%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.5);transform:translate(-18px,-24px)}58%,to{opacity:0;transform:translate(-28px,-2px)}}@keyframes m-spark{0%,57%{opacity:0;transform:scale(0)rotate(-30deg)}63%{opacity:1;transform:scale(1.35)rotate(10deg)}68%,to{opacity:1;transform:scale(1)rotate(0)}}@keyframes m-look{0%,13%{transform:translate(-1.2px,.2px)}20%,58%{transform:translate(-1px,1px)}62%,71%{transform:translate(-1.6px,-1.2px)}76%,to{transform:translate(0)}}@keyframes m-worried{0%,74%{opacity:1}76%,to{opacity:0}}@keyframes m-smile{0%,74%{opacity:0}76%,to{opacity:1}}.motion .m-tidy :is(.m-move,.m-hop,.m-scrub,.m-squash,.m-strands,.m-drip,.m-mini,.m-mini-spark,.m-pupils,.m-worried,.m-smile){animation-duration:2.8s;animation-timing-function:cubic-bezier(.45,0,.3,1);animation-fill-mode:both}.motion .m-tidy .m-move{animation-name:m-tidy-move}.motion .m-tidy .m-hop{animation-name:m-tidy-hop}.motion .m-tidy .m-scrub{animation-name:m-tidy-scrub}.motion .m-tidy .m-squash{animation-name:m-tidy-squash}.motion .m-tidy .m-strands{animation-name:m-tidy-swish}.motion .m-tidy .m-strands-outer{animation-delay:70ms}.motion .m-tidy .m-drip{animation-name:m-tidy-drip}.motion .m-tidy .m-mini{animation-name:m-tidy-mini}.motion .m-tidy .m-mini-spark{animation-name:m-tidy-spark}.motion .m-tidy .m-pupils{animation-name:m-tidy-look}.motion .m-tidy .m-worried{animation-name:m-tidy-worried}.motion .m-tidy .m-smile{animation-name:m-tidy-smile}@keyframes m-tidy-drip{0%{opacity:1;animation-timing-function:cubic-bezier(.5,0,1,.6);transform:translateY(-250px)scale(.85,1.25)}18%{opacity:1;transform:translateY(0)scale(.85,1.25)}19%,to{opacity:0;transform:translateY(0)}}@keyframes m-tidy-mini{0%,18%{opacity:1;transform:scale(0)}23%{transform:scale(1.15)}27%,46%{transform:scale(1)}54%{transform:scale(.6)}62%{transform:scale(.25)}68%{opacity:1;transform:scale(0)}69%,to{opacity:0;transform:scale(0)}}@keyframes m-tidy-spark{0%,68%{opacity:0;transform:scale(0)rotate(-30deg)}75%{opacity:1;transform:scale(1.3)rotate(10deg)}88%{opacity:1;transform:scale(1)rotate(0)}to{opacity:0;transform:scale(.6)rotate(0)}}@keyframes m-tidy-move{0%,24%{transform:translate(0)}34%,70%{transform:translate(-34px)}80%,to{transform:translate(0)}}@keyframes m-tidy-hop{0%,24%,34%,70%,80%{animation-timing-function:cubic-bezier(.2,.7,.4,1);transform:translateY(0)}29%,75%{animation-timing-function:cubic-bezier(.6,0,.8,.4);transform:translateY(-9px)}to{transform:translateY(0)}}@keyframes m-tidy-squash{0%,33%{transform:scale(1)}35.5%{transform:scale(1.08,.9)}39%,79%{transform:scale(1)}81.5%{transform:scale(1.08,.9)}85%,to{transform:scale(1)}}@keyframes m-tidy-scrub{0%,36%{transform:translate(0)rotate(0)}41%,51%{transform:translate(-9px)rotate(4deg)}46%,56%{transform:translate(7px)rotate(-4deg)}62%,to{transform:translate(0)rotate(0)}}@keyframes m-tidy-swish{0%,24%{transform:skew(0)}29%{transform:skew(10deg)}35%{transform:skew(-8deg)}39%{transform:skew(2deg)}42%,52%{transform:skew(11deg)}47%,57%{transform:skew(-11deg)}63%{transform:skew(3deg)}70%{transform:skew(0)}75%{transform:skew(-10deg)}81%{transform:skew(7deg)}86%{transform:skew(-2deg)}90%,to{transform:skew(0)}}@keyframes m-tidy-look{0%,4%{transform:translate(0)}8%,16%{transform:translate(-1.4px,-1.4px)}22%,66%{transform:translate(-1.2px,1px)}76%,to{transform:translate(0)}}@keyframes m-tidy-worried{0%,17%{opacity:0}19%,76%{opacity:1}78%,to{opacity:0}}@keyframes m-tidy-smile{0%,17%{opacity:1}19%,76%{opacity:0}78%,to{opacity:1}}@keyframes m-breathe{0%{transform:scale(1)}to{transform:scale(1.012,.982)}}@keyframes m-blink{0%,90%,94%,to{transform:scaleY(1)}92%{transform:scaleY(.08)}}section:where(.astro-lcdefpme){flex-direction:column;gap:2.25rem;margin-top:clamp(5rem,10vw,7.5rem);display:flex}h2:where(.astro-lcdefpme){letter-spacing:-.03em;color:var(--ink);margin:0;font-size:clamp(2.4rem,5vw,3.5rem);font-weight:800;line-height:1}.intro:where(.astro-lcdefpme){max-width:34em;color:var(--ink-soft);margin:0;font-size:1.1rem}.tape-wrap:where(.astro-lcdefpme){margin:3rem calc(50% - 50vw) 1rem;overflow-x:clip}.tape:where(.astro-lcdefpme){background:var(--yellow);color:var(--on-yellow);border-block:3px solid var(--night);white-space:nowrap;font-family:var(--font-label);letter-spacing:.12em;text-transform:uppercase;margin-inline:-1rem;padding:.55rem 0;font-size:1.35rem;font-weight:800;overflow:hidden;transform:rotate(-1.4deg)}.tape:where(.astro-lcdefpme) span:where(.astro-lcdefpme){display:inline-block}.motion .tape:where(.astro-lcdefpme) span:where(.astro-lcdefpme){animation:60s linear infinite tape}.tape-wrap:where(.astro-lcdefpme).paused span:where(.astro-lcdefpme){animation-play-state:paused}@keyframes tape{to{transform:translate(-50%)}}.steps:where(.astro-lcdefpme){grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.75rem;margin:0;padding:0;list-style:none;display:grid}.steps:where(.astro-lcdefpme) li:where(.astro-lcdefpme){display:flex}.step:where(.astro-lcdefpme){color:inherit;flex-direction:column;gap:.7rem;padding:1.75rem;text-decoration:none;transition:transform .15s,box-shadow .15s;display:flex}.step:where(.astro-lcdefpme):hover{box-shadow:7px 7px 0 var(--shadow);transform:translate(-2px,-2px)}.step-top:where(.astro-lcdefpme){justify-content:space-between;align-items:center;margin-bottom:.25rem;display:flex}.sign:where(.astro-lcdefpme){color:var(--night)}.sign:where(.astro-lcdefpme) .plate:where(.astro-lcdefpme){fill:var(--yellow);stroke:currentColor}.sign:where(.astro-lcdefpme) .stripes{stroke:var(--yellow)}.step-number:where(.astro-lcdefpme){font-family:var(--font-label);color:var(--rule);font-size:2.5rem;font-weight:800}.step:where(.astro-lcdefpme) h3:where(.astro-lcdefpme){letter-spacing:-.02em;color:var(--ink);margin:0;font-size:1.85rem;font-weight:800}.step-text:where(.astro-lcdefpme){color:var(--ink-soft);margin:0}.real:where(.astro-lcdefpme){grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:2.5rem 3rem;display:grid}.real-intro:where(.astro-lcdefpme){flex-direction:column;gap:1.25rem;display:flex}.real-demo:where(.astro-lcdefpme){min-width:0;position:relative}.sticker:where(.astro-lcdefpme){background:var(--water);color:var(--on-yellow);border:2.5px solid var(--night);box-shadow:3px 3px 0 var(--night);border-radius:12px;padding:.4rem .9rem;font-weight:700;position:absolute;top:-1.1rem;right:-.4rem;transform:rotate(5deg)}@media (width<=56rem){.real:where(.astro-lcdefpme){grid-template-columns:minmax(0,1fr)}}.reasons:where(.astro-lcdefpme){grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:1.5rem;margin:0;display:grid}.reasons:where(.astro-lcdefpme) .card:where(.astro-lcdefpme){border-top-width:10px;border-top-color:var(--yellow);box-shadow:none;flex-direction:column;gap:.5rem;padding:1.6rem;display:flex}.reasons:where(.astro-lcdefpme) dt:where(.astro-lcdefpme){font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);font-size:1.6rem;font-weight:800}.reasons:where(.astro-lcdefpme) dd:where(.astro-lcdefpme){color:var(--ink-soft);margin:0}.setup:where(.astro-lcdefpme){--setup-text:#edeef1;--setup-soft:#b9bcc4;--setup-code:#2a2d35;--setup-pre:#23262d;--setup-button:#2f333b;--setup-button-edge:#4a4f5a;background:var(--night);color:var(--setup-text);outline:2px solid var(--edge);border-radius:28px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:2rem 3rem;padding:clamp(1.75rem,4vw,3.25rem);display:grid}.setup:where(.astro-lcdefpme) h2:where(.astro-lcdefpme){color:var(--yellow)}.setup-text:where(.astro-lcdefpme){flex-direction:column;gap:1.1rem;display:flex}.setup:where(.astro-lcdefpme) ol:where(.astro-lcdefpme){gap:.7rem;margin:0;padding-left:1.4rem;display:grid}.setup:where(.astro-lcdefpme) p:where(.astro-lcdefpme){color:var(--setup-soft);margin:0}.setup:where(.astro-lcdefpme) code:where(.astro-lcdefpme){background:var(--setup-code);color:var(--setup-text)}.setup:where(.astro-lcdefpme) a:where(.astro-lcdefpme){color:var(--yellow)}.setup-code:where(.astro-lcdefpme){min-width:0;position:relative}.setup:where(.astro-lcdefpme) pre:where(.astro-lcdefpme){background:var(--setup-pre);border:2.5px solid var(--yellow);font-family:var(--sl-font-mono);color:var(--setup-text);border-radius:18px;margin:0;padding:1.5rem 1.6rem;font-size:.95rem;line-height:1.85;overflow-x:auto}.setup:where(.astro-lcdefpme) pre:where(.astro-lcdefpme) code:where(.astro-lcdefpme){font-size:inherit;background:0 0;padding:0}.setup:where(.astro-lcdefpme) .key:where(.astro-lcdefpme){color:var(--yellow)}.copy:where(.astro-lcdefpme){min-height:2.25rem;font:600 .85rem var(--font-body);color:var(--setup-text);background:var(--setup-button);border:1.5px solid var(--setup-button-edge);cursor:pointer;border-radius:9px;padding:0 .8rem;position:absolute;top:.75rem;right:.75rem}.copy:where(.astro-lcdefpme):hover{border-color:var(--yellow)}@media (width<=56rem){.setup:where(.astro-lcdefpme){grid-template-columns:minmax(0,1fr)}}.credit:where(.astro-lcdefpme){color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin:clamp(4rem,8vw,6rem) 0 1rem;font-size:.95rem;display:flex}