@layer properties,theme,base;@layer components{.jsg{--line:#ffffff17;--card:#ffffff09;--mut:hsl(var(--muted-foreground));--glow:0 0 10px hsl(var(--t));--stl:hsl(var(--brand-steel));--mk:700 11px/1.4 var(--fm);--tr:hsl(var(--foreground) / .14);--amb:34 90% 72%}.jsg [id]{scroll-margin-top:5.25rem}.jsg #libraries{--cis:2300px;--cis-d:1700px}.jsg #result{--cis:1700px;--cis-d:1250px}.jsg #api{--cis:1900px;--cis-d:1350px}.jsg #frameworks{--cis:1200px;--cis-d:900px}.jsg #choose{--cis:1200px;--cis-d:800px}.jsg #faq{--cis:1000px;--cis-d:860px}.jsg #sources{--cis:760px;--cis-d:560px}.jsg #start{--cis:560px;--cis-d:420px}@media (min-width:1020px){.jsg .pub-cv{contain-intrinsic-size:auto var(--cis-d,var(--cis,900px))}}.jsg-nw{white-space:nowrap}.jsg .pub-cta-row .lq-btn{height:auto;min-height:3rem;padding-block:.6rem;line-height:1.35}.jsg-h2{max-width:46rem;font:700 clamp(1.6rem, 2.8vw, 2.3rem)/1.12 var(--fd);letter-spacing:-.02em;text-wrap:balance;margin-bottom:18px}.jsg-p{max-width:38em;color:var(--mut);text-wrap:pretty;font-size:clamp(.95rem,1.1vw,1.02rem);line-height:1.75}.jsg-p p+p{margin-top:.9em}.jsg :is(.jsg-p,.jsg-tbl,.jsg-asks,.jsg-ways,.pub-lead,.jsg-note) code{font:600 .9em var(--fm);color:hsl(var(--foreground));white-space:nowrap;font-variant-ligatures:none}.jsg-main>section>*+*{margin-top:20px}.jsg-micro{max-width:64ch;font:600 11px/1.7 var(--fm);letter-spacing:.04em;color:hsl(var(--foreground) / .74);margin-top:14px}.jsg-micro a{font-weight:700}.jsg-sec{border-top:1px solid #ffffff0d;padding-block:clamp(34px,4.4vw,60px);position:relative}.jsg-tcap,.jsg-tbl thead th,.jsg-swipe,.jsg-tl time,.jsg-zkey,.jsg-job b,.jsg-steps b{font:var(--mk);letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--foreground) / .72)}.jsg-foot{border-top:1px solid var(--line);color:var(--mut);margin-top:14px;padding-top:10px;font-size:12.5px;line-height:1.6}.jsg-main figure{border-radius:20px;padding:18px}.jsg figure>.pub-cap+*{margin-top:14px}.jsg :is(figure,.jsg-tw,.jsg-final):is(:hover,:focus-within),.jsg :is(figure,.jsg-tw,.jsg-final):is(:hover,:focus-within) *,.jsg :is(figure,.jsg-tw,.jsg-final):is(:hover,:focus-within) :is(.jsg-tl,.jsg-steps,.jsg-wire):after{animation-play-state:paused}@keyframes jsg-beat{0%,to{opacity:1}50%{opacity:.35}}@keyframes jsg-in{0%{opacity:0;transform:translateY(6px)}}@keyframes jsg-run{0%{opacity:0;transform:translate(0)}8%{opacity:1}80%{transform:translateX(var(--run,100cqw));opacity:1}92%,to{transform:translateX(var(--run,100cqw));opacity:0}}@keyframes jsg-drop{0%{opacity:0;transform:translateY(0)}8%{opacity:1}80%{opacity:1;transform:translateY(100cqh)}92%,to{opacity:0;transform:translateY(100cqh)}}.jsg-hero{padding-bottom:clamp(28px,4vw,48px)}.jsg-eyebrow{margin-top:20px}.jsg .pub-h1{margin-top:14px}.jsg .pub-lead{max-width:40rem}.jsg-note{max-width:40rem;color:var(--mut);margin-top:12px;font-size:.95rem;line-height:1.7}.jsg-trust{max-width:40rem;font:600 11.5px/1.75 var(--fm);letter-spacing:.03em;color:hsl(var(--foreground) / .72);margin:12px 0 0}.jsg-trust time{color:hsl(var(--foreground) / .95)}@media (max-width:639.9px){.jsg .pub-cta-row .lq-btn{text-align:center}.jsg-hero :is(.jsg-micro,.jsg-trust){padding-right:64px}}@media (min-width:1120px){.jsg .pub-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:center}}.jsg-jobs{margin:0}.jsg-jw{gap:0;display:grid}.jsg-job{font:600 16px/1.4 var(--fd);color:hsl(var(--foreground));border-radius:18px;align-content:start;gap:8px;padding:18px;display:grid;position:relative}.jsg-job b{color:hsl(var(--foreground) / .72)}.jsg-job2{box-shadow:inset 0 0 0 1px hsl(var(--t) / .45), 0 18px 50px -30px hsl(var(--t) / .8)}.jsg-job2 b{color:hsl(var(--t))}.jsg-wire{background:linear-gradient(var(--tr), var(--tr)) 50% 0 / 2px 100% no-repeat;width:12px;height:42px;margin-left:32px;display:block;position:relative;container-type:size}.jsg-wire:after{content:"";background:hsl(var(--t));width:10px;height:10px;box-shadow:var(--glow);border-radius:50%;margin-top:-5px;position:absolute;top:0;left:1px;transform:translateY(50cqh)}.pub-js .jsg-jobs.is-in .jsg-wire:after{animation:3.6s ease-in-out infinite jsg-drop}@media (min-width:640px){.jsg-jw{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch}.jsg-jw>.jsg-wire{align-self:center}.jsg-wire{background-position:0;background-size:100% 2px;width:100%;height:12px;margin:0}.jsg-wire:after{margin:0 0 0 -5px;top:1px;left:0;transform:translate(50cqw)}.pub-js .jsg-jobs.is-in .jsg-wire:after{animation-name:jsg-run}.jsg-wire:before{content:"";border:4px solid #0000;border-left:6px solid var(--tr);position:absolute;top:2px;right:-1px}}.jsg-jobs .jsg-foot{font:600 11.5px/1.7 var(--fm);letter-spacing:.03em;color:hsl(var(--foreground) / .72);text-wrap:pretty}.jsg-tw{border:1px solid var(--line);background:var(--card);border-radius:16px;overflow:hidden}.jsg-ts{overscroll-behavior-x:contain;overflow-x:auto}.jsg-ts:focus-visible{outline:2px solid hsl(var(--t));outline-offset:-2px}.jsg-swipe{padding:12px 14px 0;display:none}.jsg-swipe:after{content:" →";color:hsl(var(--t))}.jsg-tbl{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}.jsg-tcap{text-align:left;text-transform:none;letter-spacing:.04em;padding:14px 14px 10px;line-height:1.6}.jsg-tcap:before{content:"";background:hsl(var(--t));width:14px;height:2px;box-shadow:var(--glow);border-radius:2px;margin:0 9px 3px 0;display:inline-block}.jsg-tbl th,.jsg-tbl td{border-top:1px solid var(--line);text-align:left;vertical-align:top;padding:12px 14px}.jsg-tbl tbody th{min-width:8.5em;color:hsl(var(--foreground));font-weight:700}.jsg-tbl td{color:var(--mut)}.jsg-tbl tbody tr:hover{background:hsl(var(--t) / .05)}.jsg-mono tbody th,.jsg-tbl .jsg-m{font:600 13px/1.5 var(--fm);white-space:nowrap}.jsg-tbl .jsg-m{color:hsl(var(--foreground) / .86)}.jsg-choose tbody tr:first-child{background:linear-gradient(90deg, hsl(var(--t) / .12), transparent 70%);box-shadow:inset 2px 0 0 hsl(var(--t))}.jsg-choose tbody tr:first-child th{color:hsl(var(--t))}.jsg-choose td:last-child{white-space:nowrap}.jsg-choose .lq-btn{white-space:normal;height:auto;min-height:2.5rem;padding-block:.45rem;line-height:1.3}@media (min-width:760px){.jsg-choose td:last-child{width:1%}.jsg-choose td:last-child .lq-btn{white-space:nowrap;justify-content:space-between;width:100%}}.jsg-cmp thead th:last-child,.jsg-cmp td:last-child{color:hsl(var(--foreground));box-shadow:inset 2px 0 0 hsl(var(--t) / .6)}@media (max-width:759.9px){.jsg-tbl{font-size:13.5px}.jsg-tbl th,.jsg-tbl td{padding:10px}.jsg-swipe{display:block}.jsg-tbl{min-width:600px}.jsg-fields .jsg-swipe{display:none}.jsg-fields .jsg-tbl{min-width:0}.jsg-fields .jsg-tbl tbody th{width:auto;min-width:0}.jsg-tcap{max-width:calc(100vw - 50px);position:sticky;left:0}.jsg-tbl tbody th,.jsg-tbl thead th:first-child{z-index:1;background:linear-gradient(var(--card), var(--card)), hsl(var(--background));width:7.5em;min-width:7.5em;box-shadow:1px 0 0 var(--line);position:sticky;left:0}.jsg-tbl thead th:first-child{z-index:2}.jsg-tbl.jsg-mono{min-width:660px}.jsg-mono tbody th,.jsg-mono thead th:first-child{width:13em;min-width:13em}.jsg-main figure{padding:14px}.jsg-cards .jsg-tbl{min-width:0}.jsg-cards thead{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.jsg-cards tbody tr{border-top:1px solid var(--line);gap:8px;padding:14px;display:grid}.jsg-cards .jsg-tbl tbody :is(th,td){width:auto;min-width:0;box-shadow:none;background:0 0;border:0;padding:0;display:block;position:static}.jsg-cards .jsg-tbl tbody th{font-size:15px}.jsg-cards td[data-k]:before{content:attr(data-k);font:var(--mk);letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--foreground) / .66);margin-bottom:2px;display:block}.jsg-choose td:last-child .lq-btn{margin-top:4px}.jsg-cmp td:last-child{box-shadow:none;border-left:2px solid hsl(var(--t) / .6)!important;padding-left:10px!important}}.jsg-tl{margin-top:14px;display:grid;position:relative}.jsg-tl li{color:hsl(var(--foreground) / .88);padding:8px 0 8px 28px;font-size:14px;line-height:1.5;position:relative}.jsg-tl li:before{content:"";background:hsl(var(--background));border:2px solid var(--stl);border-radius:50%;width:10px;height:10px;position:absolute;top:13px;left:0}.jsg-tl time{color:hsl(var(--foreground) / .66);display:block}.jsg-tl .jsg-hot:before{border-color:hsl(var(--t));background:hsl(var(--t));box-shadow:var(--glow)}.jsg-tl .jsg-hot time{color:hsl(var(--t))}.jsg-tl:before{content:"";background:var(--tr);width:2px;position:absolute;top:12px;bottom:12px;left:4px}.pub-js .jsg-strip.is-in .jsg-tl li{animation:jsg-in .6s var(--ease-spring) backwards}.jsg-tl li:nth-child(2){animation-delay:90ms!important}.jsg-tl li:nth-child(3){animation-delay:.18s!important}.jsg-tl li:nth-child(4){animation-delay:.27s!important}.jsg-tl li:nth-child(5){animation-delay:.36s!important}.jsg-tl li:nth-child(n+6){animation-delay:.45s!important}@media (min-width:1020px){.jsg-tl{grid-template-rows:auto 26px auto;grid-template-columns:repeat(11,minmax(0,1fr));column-gap:0;container-type:inline-size}.jsg-tl:before{grid-area:2/1/auto/-1;align-self:center;width:auto;height:2px;position:static}.jsg-tl:after{content:"";background:hsl(var(--t));width:8px;height:8px;box-shadow:var(--glow);opacity:0;--run:calc(100cqw - 8px);border-radius:50%;grid-area:2/1/auto/-1;place-self:center start}.pub-js .jsg-strip.is-in .jsg-tl:after{animation:8s ease-in-out infinite jsg-run}.jsg-tl li{grid-row:1;align-self:end;width:max-content;max-width:15em;padding:0 0 6px;font-size:13px}.jsg-tl li:nth-child(2n){grid-row:3;align-self:start;padding:6px 0 0}.jsg-tl li:before{top:auto;bottom:-18px;left:-5px}.jsg-tl li:nth-child(2n):before{top:-18px;bottom:auto}.jsg-tl li>*{display:block}.jsg-tl li span{padding-left:2px}.jsg-tl .jsg-hot{max-width:13em}.jsg-tl .jsg-hot:after{content:"";background:hsl(var(--t));width:2px;height:42px;box-shadow:var(--glow);position:absolute;bottom:-36px;left:-1px}.jsg-tl .jsg-hot:nth-child(2n):after{top:-36px;bottom:auto}.jsg-y1{grid-column:1}.jsg-y2{grid-column:2}.jsg-y3{grid-column:3}.jsg-y4{grid-column:4}.jsg-y5{grid-column:5}.jsg-y6{grid-column:6}.jsg-y7{grid-column:7}.jsg-y8{grid-column:8}.jsg-y9{grid-column:9}.jsg-y10{grid-column:10}.jsg-y11{grid-column:11}.jsg-tl :is(.jsg-y9,.jsg-y10,.jsg-y11){text-align:right;max-width:11em;translate:-100%}.jsg-tl :is(.jsg-y9,.jsg-y10,.jsg-y11):before{left:auto;right:-5px}.jsg-tl :is(.jsg-y9,.jsg-y10,.jsg-y11).jsg-hot:after{left:auto;right:-1px}}.jsg-asks{counter-reset:q;max-width:40em;display:grid}.jsg-asks li{counter-increment:q;border-top:1px solid var(--line);color:var(--mut);padding:12px 0 12px 40px;font-size:15px;line-height:1.65;position:relative}.jsg-asks li:first-child{border-top:0}.jsg-asks li:before{content:counter(q, decimal-leading-zero);font:var(--mk);color:hsl(var(--t));position:absolute;top:15px;left:0}.jsg-asks b{color:hsl(var(--foreground));font-weight:650}.jsg-steps{counter-reset:s;gap:12px;display:grid;position:relative}.jsg-steps li{counter-increment:s;color:hsl(var(--foreground) / .88);gap:4px;padding:0 0 0 30px;font-size:14px;line-height:1.5;display:grid;position:relative}.jsg-steps li:before{content:"";background:hsl(var(--background));border:2px solid var(--stl);border-radius:50%;width:10px;height:10px;position:absolute;top:3px;left:0}.jsg-steps li:last-child:before{border-color:hsl(var(--t));background:hsl(var(--t));box-shadow:var(--glow)}.jsg-steps li:last-child b{color:hsl(var(--t))}.jsg-steps:before{content:"";background:var(--tr);width:2px;position:absolute;top:8px;bottom:12px;left:4px}@media (min-width:760px){.jsg-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:22px;container-type:inline-size}.jsg-steps:before{width:auto;height:2px;inset:4px 18% auto 5px}.jsg-steps:after{content:"";background:hsl(var(--t));width:10px;height:10px;box-shadow:var(--glow);opacity:0;--run:76cqw;border-radius:50%;position:absolute;top:0;left:0}.pub-js .jsg-flow.is-in .jsg-steps:after{animation:5s ease-in-out infinite jsg-run}.jsg-steps li{padding:0}.jsg-steps li:before{top:-22px}}.jsg-fields{margin-top:18px}.jsg-fields .jsg-tbl td:last-child{line-height:1.9}.jsg-ways{max-width:40em;color:var(--mut);gap:6px;padding-left:4px;font-size:15px;line-height:1.7;display:grid}.jsg-ways li{padding-left:22px;position:relative}.jsg-ways li:before{content:"//";font:var(--mk);color:hsl(var(--t));line-height:1.9;position:absolute;left:0}.jsg-code{min-width:0}.jsg-code .jsg-swipe{padding:10px 0 0}.jsg-pre{border-top:1px solid var(--line);margin-top:14px;position:relative}.jsg-pre pre{white-space:pre;font:400 12.5px/1.7 var(--fm);color:hsl(var(--foreground) / .9);font-variant-ligatures:none;scrollbar-width:thin;margin:0;padding:14px 16px 16px;position:relative;overflow-x:auto}.jsg-pre pre:focus-visible{outline:2px solid hsl(var(--t) / .8);outline-offset:-3px}.jsg-pre code{font:inherit}.jsg-pre i{font-style:normal}.jsg-pre i.t{color:hsl(var(--brand-ember))}.jsg-pre i.a{color:var(--stl)}.jsg-pre i.s{color:hsl(var(--amb))}.jsg-pre i.c{color:hsl(var(--foreground) / .62)}.jsg-pre>i{font:400 12.5px/1.7 var(--fm);box-shadow:inset 2px 0 0 hsl(var(--t) / .85);background:linear-gradient(90deg, hsl(var(--t) / .09), transparent 55%);pointer-events:none;display:block;position:absolute;top:14px;left:0;right:0}.jsg-pre>i+i{--t:var(--brand-steel)}.jsg-pre>i:first-child{height:calc(var(--z1,0) * 1lh)}.jsg-pre>i+i{top:calc(14px + var(--z1,0) * 1lh);height:calc(var(--z2,0) * 1lh)}.jsg-zkey{text-transform:none;letter-spacing:.04em;flex-wrap:wrap;gap:6px 22px;margin-top:10px;display:flex}.jsg-zkey span{color:hsl(var(--t))}.jsg-zkey span+span{color:var(--stl)}.jsg-zkey span:before{content:"";vertical-align:-.1em;background:currentColor;width:2px;height:.9em;margin-right:8px;display:inline-block}.jsg-tips li{font-size:14.5px}.jsg-srcs{counter-reset:f;max-width:52em;display:grid}.jsg-srcs li{counter-increment:f;border-top:1px solid var(--line);color:hsl(var(--foreground));padding:9px 0 9px 40px;font-size:14.5px;line-height:1.5;position:relative}.jsg-srcs li:before{content:counter(f, decimal-leading-zero);font:var(--mk);color:hsl(var(--t));position:absolute;top:12px;left:0}.jsg-srcs :is(a,b){overflow-wrap:anywhere;font-weight:600}.jsg-srcs a{-webkit-text-decoration:underline 1.5px hsl(var(--t) / .5);text-decoration:underline 1.5px hsl(var(--t) / .5);text-underline-offset:3px}.jsg-srcs a:hover{color:hsl(var(--t))}.jsg-srcs time{font:var(--mk);letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--foreground) / .62);display:block}.jsg-final{text-align:left;justify-items:start;position:relative;overflow:hidden}.jsg-final h2{position:relative}.jsg-final .pub-cta-row{justify-content:flex-start}@media (min-width:760px){.jsg-final{text-align:center;justify-items:center}.jsg-final .pub-cta-row{justify-content:center}}.jsg-final .jsg-micro{margin-top:4px}.jsg-sign{font:600 11.5px/1.6 var(--fm);letter-spacing:.04em;color:hsl(var(--foreground) / .72)}.jsg-glow{pointer-events:none;background:radial-gradient(50% 50% at 50% 30%, hsl(var(--t) / .2), transparent 70%);height:120%;position:absolute;inset:-40% 10% auto}.pub-js .jsg-glow{animation:5s ease-in-out infinite jsg-beat}.jsg-faq p{max-width:62ch}.jsg-more{padding-top:34px}.jsg-h2s{font:700 1.2rem/1.3 var(--fd);letter-spacing:-.01em}.jsg-rel{gap:10px;margin-top:14px;display:grid}@media (min-width:680px){.jsg-rel{grid-template-columns:repeat(3,minmax(0,1fr))}}.jsg-rc{border:1px solid var(--line);background:var(--card);white-space:pre-line;height:100%;font:700 14.5px/1.35 var(--fd);color:hsl(var(--foreground));transition:transform .42s var(--ease-spring), border-color var(--dur-med);border-radius:16px;padding:16px;display:block}.jsg-rc:hover,.jsg-rc:focus-visible{border-color:hsl(var(--t) / .5);transform:translateY(-3px)}.jsg-rc:first-line{font:700 11px/2.2 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--foreground) / .66)}.jsg-grid{gap:8px;padding-bottom:clamp(36px,5vw,72px);display:grid}.jsg-main{min-width:0}.jsg-toc{border:1px solid var(--line);background:var(--card);border-radius:16px;min-width:0;padding:12px 14px}.jsg-toc-l{scrollbar-width:none;counter-reset:toc;gap:4px 18px;margin-top:10px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000)}.jsg-toc-l::-webkit-scrollbar{display:none}.jsg-toc a{counter-increment:toc;color:hsl(var(--foreground) / .78);white-space:nowrap;transition:color var(--dur-fast);flex:none;align-items:baseline;gap:6px;padding:4px 0;font-size:13px;font-weight:600;display:inline-flex}.jsg-toc a:before{content:counter(toc, decimal-leading-zero) / "";font:var(--mk);color:hsl(var(--t))}.jsg-toc a:hover,.jsg-toc a:focus-visible{color:hsl(var(--t))}@media (min-width:760px) and (max-width:1179.9px){.jsg-toc-l{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}}@media (min-width:1180px){.jsg-grid{grid-template-columns:200px minmax(0,1fr);gap:48px}.jsg-toc{background:0 0;border:0;border-radius:0;align-self:start;margin-top:clamp(34px,4.4vw,60px);padding:0 0 0 16px;position:sticky;top:104px}.jsg-toc:before,.jsg-toc:after{content:"";border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:0}.jsg-toc:before{background:hsl(var(--foreground) / .1)}.jsg-toc:after{background:hsl(var(--t));box-shadow:var(--glow);transform-origin:50% 0;transform:scaleY(.04)}.jsg-toc-l{gap:0;display:grid;overflow:visible;-webkit-mask-image:none;mask-image:none}.jsg-toc a{white-space:normal;padding:5px 0}}@supports (animation-timeline:scroll()){@media (min-width:1180px) and (prefers-reduced-motion:no-preference){.jsg-toc:after{animation:linear both jsg-read;animation-timeline:scroll(root)}}}@keyframes jsg-read{0%{transform:scaleY(.04)}to{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.jsg *,.jsg :before,.jsg :after{transition:none!important;animation:none!important}.jsg-tl:after,.jsg-steps:after{display:none}}}@layer utilities;
