.demo-sec{--pw-line-strong:#dde4ee;--pw-muted:#5b6478;--font-chrome:var(--font-geist), system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;padding:0 var(--gutter) clamp(3.5rem, 7vw, 6rem);flex-direction:column;align-items:center;gap:14px;display:flex}.demo-frame{transform-origin:top;width:100%;max-width:min(1080px, max(640px, calc((100vh - var(--nav-h,78px) - 48px - 42px) * 1440 / 900 * .86)));max-width:min(1080px, max(640px, calc((100svh - var(--nav-h,78px) - 48px - 42px) * 1440 / 900 * .86)));background:0 0;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 1px 2px #0a46aa0a,0 10px 24px -14px #0a46aa1a}.demo-frame.is-big{max-width:none}.demo-chrome{border-bottom:1px solid var(--pw-line-strong);height:42px;font:12px/1 var(--font-chrome);color:var(--pw-muted);background:#f1f4f8;grid-template-columns:minmax(max-content,1fr) minmax(0,620px) minmax(max-content,1fr);align-items:center;gap:12px;padding:0 14px 0 16px;display:grid}.demo-chrome__dots{gap:7px;display:flex}.demo-chrome__dots i{background:#d3dae5;border-radius:50%;width:11px;height:11px}.demo-chrome__url{text-align:center;width:100%;color:var(--color-navy);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.demo-chrome__tag{background:var(--color-lime);color:var(--color-ink);letter-spacing:.12em;text-transform:uppercase;border-radius:4px;justify-self:end;padding:4px 8px;font-size:10px;font-weight:600}.demo-stage{position:relative}.demo-veil,.demo-grain{transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 0% 16%,#0006 52%,#000 100%);mask-image:linear-gradient(#0000 0% 16%,#0006 52%,#000 100%)}.demo-veil{z-index:2;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.demo-grain{z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.8 0 0 0 -0.4  1.8 0 0 0 -0.4  1.8 0 0 0 -0.4  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:320px 320px}.demo-veil:hover~.demo-grain{opacity:.3}.demo-sec:has(.demo-hint:hover) .demo-grain{opacity:.3}:is(.demo-veil:hover,.demo-sec:has(.demo-hint:hover) .demo-veil){opacity:.55}.demo-frame.is-live .demo-veil,.demo-frame.is-live .demo-grain{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,visibility 0s linear .45s}.demo-hint{z-index:3;background:var(--color-ink);height:30px;color:var(--color-white);font:600 10.5px/1 var(--font-chrome);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border:0;border-radius:999px;align-items:center;gap:.75em;margin:-66px 0 22px;padding:0 16px;transition:opacity .5s,background-color .2s;display:inline-flex;position:relative;box-shadow:0 10px 22px -12px #0e1a3399}.demo-hint span{opacity:.5}.demo-hint:hover{background:#1d2c4d}.demo-hint:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.demo-frame.is-live+.demo-hint{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s linear .25s}.demo-iframe{aspect-ratio:1440/900;background:#fff;border:0;width:100%;max-width:100%;display:block}@media (max-width:760px){.demo-sec{display:none}}.about:has(+.demo-sec){padding-bottom:clamp(6rem,11vw,10rem)}