.lab-wrap{width:min(1180px,100% - 80px);margin-inline:auto}.lab-header{border-bottom:1px solid #16193f30;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;display:flex}.lab-header img{width:169px}.back-link{font-size:.9rem;font-weight:700}.skip-link{background:var(--brand-yellow);z-index:10;padding:12px;position:absolute;top:-80px;left:20px}.skip-link:focus{top:8px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;margin-bottom:16px;font-size:.73rem;font-weight:700}.lab-intro{max-width:800px;padding-block:65px 55px}h1{letter-spacing:-.055em;font-size:clamp(3rem,6.5vw,5.5rem);font-weight:800;line-height:1}h1 span{color:var(--purple-text)}.lab-intro>p:not(.eyebrow){max-width:600px;margin-top:25px;font-size:1.1rem}.intro-bottom{flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:28px;font-size:.85rem;display:flex}.intro-bottom a{font-weight:700}.intro-bottom span{color:#61586b}.lab-jump{flex-wrap:wrap;gap:12px 28px;padding-bottom:28px;font-size:.85rem;font-weight:700;display:flex}.lab-jump a{padding-block:8px}.frame-stage{background:var(--paper);place-items:center;min-height:490px;padding:28px 40px 48px;display:grid}.frame-stage .image-frame{max-width:340px}h2{letter-spacing:-.035em;font-size:clamp(2rem,3.4vw,3rem);font-weight:800;line-height:1.1}.lab-section{border-top:1px solid #16193f30;padding-block:48px 58px}.section-heading{justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px;display:flex}.section-heading>p{max-width:350px;font-size:.98rem}.workbench{background:#fff;border:1px solid #16193f2e;grid-template-columns:280px minmax(0,1fr);display:grid}.controls{background:var(--lavender-wash);padding:28px}fieldset{border:0;min-width:0;margin:0;padding:0}legend{letter-spacing:-.02em;margin-bottom:23px;padding:0;font-size:1.2rem;font-weight:800}label{font-size:.88rem;font-weight:700;display:block}select{width:100%;color:var(--ink);font:inherit;background:#fff;border:1px solid #7a6e88;border-radius:0;margin-top:8px;margin-bottom:23px;padding:11px 9px;font-size:.94rem;display:block}.range-label{justify-content:space-between;align-items:center;gap:12px;display:flex}output{white-space:nowrap;font-size:.8rem}input[type=range]{width:100%;accent-color:var(--purple-text);min-height:24px;margin:14px 0 24px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--purple-text);flex-shrink:0}.check-label{align-items:center;gap:9px;display:flex}.control-help{color:#554a61;margin-block:12px 20px;font-size:.8rem}button{border:1px solid var(--ink);background:0 0;min-height:44px;padding:10px 15px;font-size:.85rem;font-weight:700}button:hover:not(:disabled){background:var(--brand-yellow)}button:disabled{cursor:default;opacity:.6}.primary-button{background:var(--ink);color:#fff;width:100%;margin-bottom:12px}.primary-button:hover:not(:disabled){background:var(--purple-text)}.quiet-button{text-underline-offset:4px;border-color:#0000;padding-left:0;text-decoration:underline}select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--purple-text);outline-offset:4px}.preview-side{min-width:0;padding:24px}.preview-caption{text-transform:uppercase;letter-spacing:.07em;justify-content:space-between;gap:16px;margin-bottom:20px;font-size:.68rem;display:flex}.preview-caption span:first-child{font-weight:800}.divider-preview{background:var(--sample-top,var(--dark-purple));overflow:hidden}.sample-top{color:var(--sample-top-text,var(--paper));padding:32px 36px 22px}.sample-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.65rem}.sample-top h3{letter-spacing:-.035em;margin-top:16px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.04}.sample-bottom{background:var(--sample-fill);color:var(--sample-text);padding:24px 36px 36px}.sample-bottom p{letter-spacing:-.025em;margin-top:14px;font-size:1.5rem;font-weight:800;line-height:1.1}.preview-note{color:#554a61;margin-top:18px;font-size:.82rem}.code-panel{border:1px solid #16193f2e;margin-top:16px}.code-panel summary{padding:18px 24px;font-size:.98rem;font-weight:700}.code-panel summary span{float:right;margin-top:4px;font-size:.75rem;font-weight:500}.code-body{padding:0 24px 24px}.code-body>p{max-width:830px;margin-bottom:20px;font-size:.9rem}.code-toolbar{background:#e8e0ee;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;display:flex}.code-toolbar>span{font-size:.78rem}.snippet{resize:vertical;width:100%;color:var(--paper);background:var(--dark-purple);white-space:pre;overflow-wrap:normal;border:1px solid #ccc3d3;border-top:0;min-height:230px;padding:20px;font:.79rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;display:block}.demo-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-block:35px;display:grid}.demo-card{border:1px solid #16193f30;min-height:244px;padding:20px 15px}.card-0{background:var(--brand-yellow)}.card-1{background:var(--brand-lavender)}.card-2{background:var(--brand-teal)}.demo-card img{object-fit:contain;width:65px;height:65px;margin-bottom:24px}.demo-card>span{font-size:.7rem}.demo-card h3{letter-spacing:-.025em;margin:6px 0 10px;font-size:1.55rem;font-weight:800;line-height:1.1}.demo-card p{font-size:.82rem}.motion-preference{border-top:1px solid #16193f25;align-items:center;gap:16px;margin-top:18px;padding-top:18px;display:flex}.motion-preference span{max-width:330px;font-size:.75rem}#motion-toggle{flex-shrink:0}.apply-section{background:var(--brand-yellow);margin:0 0 45px;padding:45px}.steps{grid-template-columns:repeat(3,1fr);gap:35px;margin-top:30px;display:grid}.steps article>span{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:32px;height:32px;margin-bottom:20px;font-size:.85rem;display:grid}.steps h3{margin-bottom:12px;font-size:1.15rem}.steps p,.apply-tip{font-size:.9rem}.apply-tip{border-top:1px solid #16193f30;margin-top:30px;padding-top:24px}code{overflow-wrap:anywhere;font-size:.85em}.copy-status:not(:empty){color:#fff;background:var(--ink);z-index:5;pointer-events:none;width:max-content;max-width:calc(100% - 40px);padding:15px 23px;font-size:.9rem;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 5px 20px #16193f33}.notice{background:var(--brand-yellow);padding:20px}.lab-footer{justify-content:space-between;gap:24px;padding-block:25px 45px;font-size:.8rem;display:flex}@media (width<=900px){.lab-wrap{width:calc(100% - 40px)}.workbench{grid-template-columns:240px minmax(0,1fr)}.controls{padding:22px}.demo-cards{gap:8px}.demo-card{padding:15px 10px}.demo-card h3{font-size:1.25rem}.motion-preference{flex-direction:column;align-items:flex-start}}@media (width<=700px){.frame-stage{min-height:350px;padding:20px 30px 44px}.lab-header img{width:135px}.back-link{text-align:right;max-width:120px;font-size:.78rem}.lab-intro{padding-block:42px}.lab-intro>p:not(.eyebrow){font-size:1rem}.section-heading{flex-direction:column;align-items:flex-start;gap:18px}.section-heading>p{max-width:none}.workbench{grid-template-columns:1fr}.controls{padding:24px}.preview-side{padding:20px}.preview-caption span:last-child{text-align:right;max-width:150px}.sample-top,.sample-bottom{padding-inline:24px}.sample-top h3{font-size:2rem}.code-panel summary{padding:18px 16px}.code-panel summary span{display:none}.code-body{padding:0 16px 16px}.code-toolbar{flex-direction:column;align-items:flex-start}.snippet{padding:15px;font-size:.73rem}.demo-cards{gap:8px;padding-block:18px}.demo-card{min-height:225px;padding:16px 10px}.demo-card img{width:48px;height:48px}.demo-card h3{font-size:1.18rem}.demo-card p{font-size:.75rem}.apply-section{padding:28px 23px}.steps{grid-template-columns:1fr;gap:30px}.steps article>span{margin-bottom:12px}.lab-footer{flex-direction:column;gap:16px}}@media (width<=360px){.preview-side{padding:14px}.demo-cards{grid-template-columns:1fr}.demo-card{min-height:0}.demo-card img{float:right;margin:0}}.lab-navigation{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px 25px;display:flex}@media (width<=700px){.lab-navigation{flex-direction:column;align-items:flex-end;gap:8px}.lab-navigation .back-link{max-width:none}}.controls input[type=file]{width:100%;min-width:0;margin-top:8px;font-size:.8rem;display:block}.controls input[type=file]::file-selector-button{border:1px solid var(--ink);color:var(--ink);cursor:pointer;min-height:44px;font:inherit;background:#fff;margin-right:8px;padding:10px}.file-status{overflow-wrap:anywhere;margin:8px 0 20px;font-size:.78rem}.image-frame[data-astro-cid-gejvf2im]{aspect-ratio:1;border:var(--frame-border) solid var(--frame-color);width:100%;max-width:420px;box-shadow:var(--frame-shadow) var(--frame-shadow) 0 var(--frame-color);overflow:hidden}[data-astro-cid-gejvf2im][data-shape=arch]{border-radius:50% 50% 8px 8px}[data-astro-cid-gejvf2im][data-shape=circle]{aspect-ratio:1;border-radius:50%}[data-astro-cid-gejvf2im][data-shape=oval]{aspect-ratio:4/5;border-radius:50%}[data-astro-cid-gejvf2im][data-shape=rounded]{border-radius:28px}.frame-cutout[data-astro-cid-gejvf2im],.frame-image[data-astro-cid-gejvf2im]{width:100%;height:100%}.frame-image[data-astro-cid-gejvf2im]{overflow:hidden}[data-astro-cid-gejvf2im][data-shape=scallop]{box-shadow:none;filter:drop-shadow(var(--frame-shadow) var(--frame-shadow) 0 var(--frame-color));--scallop:polygon(8.0% 2.0%,9.75% 2.44%,11.5% 3.5%,13.25% 4.56%,15% 5.0%,16.75% 4.56%,18.5% 3.5%,20.25% 2.44%,22.0% 2.0%,23.75% 2.44%,25.5% 3.5%,27.25% 4.56%,29.0% 5.0%,30.75% 4.56%,32.5% 3.5%,34.25% 2.44%,36.0% 2.0%,37.75% 2.44%,39.5% 3.5%,41.25% 4.56%,43.0% 5.0%,44.75% 4.56%,46.5% 3.5%,48.25% 2.44%,50.0% 2.0%,51.75% 2.44%,53.5% 3.5%,55.25% 4.56%,57.0% 5.0%,58.75% 4.56%,60.5% 3.5%,62.25% 2.44%,64.0% 2.0%,65.75% 2.44%,67.5% 3.5%,69.25% 4.56%,71.0% 5.0%,72.75% 4.56%,74.5% 3.5%,76.25% 2.44%,78.0% 2.0%,79.75% 2.44%,81.5% 3.5%,83.25% 4.56%,85.0% 5.0%,86.75% 4.56%,88.5% 3.5%,90.25% 2.44%,92.0% 2.0%,93.17% 2.12%,94.3% 2.46%,95.33% 3.01%,96.24% 3.76%,96.99% 4.67%,97.54% 5.7%,97.88% 6.83%,98.0% 8.0%,98.0% 8.0%,97.56% 9.75%,96.5% 11.5%,95.44% 13.25%,95.0% 15%,95.44% 16.75%,96.5% 18.5%,97.56% 20.25%,98.0% 22.0%,97.56% 23.75%,96.5% 25.5%,95.44% 27.25%,95.0% 29.0%,95.44% 30.75%,96.5% 32.5%,97.56% 34.25%,98.0% 36.0%,97.56% 37.75%,96.5% 39.5%,95.44% 41.25%,95.0% 43.0%,95.44% 44.75%,96.5% 46.5%,97.56% 48.25%,98.0% 50.0%,97.56% 51.75%,96.5% 53.5%,95.44% 55.25%,95.0% 57.0%,95.44% 58.75%,96.5% 60.5%,97.56% 62.25%,98.0% 64.0%,97.56% 65.75%,96.5% 67.5%,95.44% 69.25%,95.0% 71.0%,95.44% 72.75%,96.5% 74.5%,97.56% 76.25%,98.0% 78.0%,97.56% 79.75%,96.5% 81.5%,95.44% 83.25%,95.0% 85.0%,95.44% 86.75%,96.5% 88.5%,97.56% 90.25%,98.0% 92.0%,97.88% 93.17%,97.54% 94.3%,96.99% 95.33%,96.24% 96.24%,95.33% 96.99%,94.3% 97.54%,93.17% 97.88%,92.0% 98.0%,92.0% 98.0%,90.25% 97.56%,88.5% 96.5%,86.75% 95.44%,85.0% 95.0%,83.25% 95.44%,81.5% 96.5%,79.75% 97.56%,78.0% 98.0%,76.25% 97.56%,74.5% 96.5%,72.75% 95.44%,71.0% 95.0%,69.25% 95.44%,67.5% 96.5%,65.75% 97.56%,64.0% 98.0%,62.25% 97.56%,60.5% 96.5%,58.75% 95.44%,57.0% 95.0%,55.25% 95.44%,53.5% 96.5%,51.75% 97.56%,50.0% 98.0%,48.25% 97.56%,46.5% 96.5%,44.75% 95.44%,43.0% 95.0%,41.25% 95.44%,39.5% 96.5%,37.75% 97.56%,36.0% 98.0%,34.25% 97.56%,32.5% 96.5%,30.75% 95.44%,29.0% 95.0%,27.25% 95.44%,25.5% 96.5%,23.75% 97.56%,22.0% 98.0%,20.25% 97.56%,18.5% 96.5%,16.75% 95.44%,15% 95.0%,13.25% 95.44%,11.5% 96.5%,9.75% 97.56%,8.0% 98.0%,6.83% 97.88%,5.7% 97.54%,4.67% 96.99%,3.76% 96.24%,3.01% 95.33%,2.46% 94.3%,2.12% 93.17%,2.0% 92.0%,2.0% 92.0%,2.44% 90.25%,3.5% 88.5%,4.56% 86.75%,5.0% 85.0%,4.56% 83.25%,3.5% 81.5%,2.44% 79.75%,2.0% 78.0%,2.44% 76.25%,3.5% 74.5%,4.56% 72.75%,5.0% 71.0%,4.56% 69.25%,3.5% 67.5%,2.44% 65.75%,2.0% 64.0%,2.44% 62.25%,3.5% 60.5%,4.56% 58.75%,5.0% 57.0%,4.56% 55.25%,3.5% 53.5%,2.44% 51.75%,2.0% 50.0%,2.44% 48.25%,3.5% 46.5%,4.56% 44.75%,5.0% 43.0%,4.56% 41.25%,3.5% 39.5%,2.44% 37.75%,2.0% 36.0%,2.44% 34.25%,3.5% 32.5%,4.56% 30.75%,5.0% 29.0%,4.56% 27.25%,3.5% 25.5%,2.44% 23.75%,2.0% 22.0%,2.44% 20.25%,3.5% 18.5%,4.56% 16.75%,5.0% 15%,4.56% 13.25%,3.5% 11.5%,2.44% 9.75%,2.0% 8.0%,2.12% 6.83%,2.46% 5.7%,3.01% 4.67%,3.76% 3.76%,4.67% 3.01%,5.7% 2.46%,6.83% 2.12%,8.0% 2.0%);border:0;overflow:visible}[data-astro-cid-gejvf2im][data-shape=scallop] .frame-cutout[data-astro-cid-gejvf2im]{background:var(--frame-color);padding:var(--frame-border);clip-path:var(--scallop)}[data-astro-cid-gejvf2im][data-shape=scallop] .frame-image[data-astro-cid-gejvf2im]{clip-path:var(--scallop)}.image-frame[data-astro-cid-gejvf2im] img[data-astro-cid-gejvf2im]{object-fit:cover;width:100%;height:100%;transition:transform .4s}.image-frame[data-astro-cid-gejvf2im][data-effect=zoom]{--image-transform:scale(1.06)}.image-frame[data-astro-cid-gejvf2im][data-effect=twist]{--image-transform:rotate(3deg) scale(1.08)}.image-frame[data-astro-cid-gejvf2im][data-effect=zoom-twist]{--image-transform:rotate(-4deg) scale(1.14)}.image-frame[data-astro-cid-gejvf2im]:is(:hover,:focus-within,[data-preview]) img[data-astro-cid-gejvf2im],a:focus-visible .image-frame[data-astro-cid-gejvf2im] img[data-astro-cid-gejvf2im]{transform:var(--image-transform,none)}html[data-motion=off] .image-frame[data-astro-cid-gejvf2im] img[data-astro-cid-gejvf2im]{transform:none!important}@media (prefers-reduced-motion:reduce){.image-frame[data-astro-cid-gejvf2im] img[data-astro-cid-gejvf2im]{transform:none!important}}.project-demo[data-astro-cid-y2vllrex]{max-width:600px;color:var(--ink);text-decoration:none;display:block}.project-demo-image[data-astro-cid-y2vllrex]{background:var(--brand-yellow);aspect-ratio:4/3;position:relative;overflow:hidden}.project-demo[data-astro-cid-y2vllrex] img[data-astro-cid-y2vllrex]{object-fit:cover;width:100%;height:100%;transition:transform .4s}.project-demo-caption[data-astro-cid-y2vllrex]{background:var(--dark-purple);color:var(--paper);visibility:hidden;justify-content:space-between;align-items:center;padding:16px 20px;font-size:.95rem;transition:transform .3s,visibility .3s;display:flex;position:absolute;inset:auto 0 0;transform:translateY(100%)}.project-demo-info[data-astro-cid-y2vllrex]{justify-content:space-between;align-items:center;gap:20px;padding-block:20px;display:flex}.project-demo-info[data-astro-cid-y2vllrex] p[data-astro-cid-y2vllrex]{margin-bottom:5px;font-size:.8rem}.project-demo-info[data-astro-cid-y2vllrex] h3[data-astro-cid-y2vllrex]{letter-spacing:-.025em;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.1}.project-demo-arrow[data-astro-cid-y2vllrex]{flex-shrink:0;transition:transform .25s}.project-demo[data-astro-cid-y2vllrex]:is(:hover,:focus-visible,[data-preview]) h3[data-astro-cid-y2vllrex]{text-underline-offset:.2em;text-decoration:underline}[data-astro-cid-y2vllrex][data-effect=zoom]:is(:hover,:focus-visible,[data-preview]) img[data-astro-cid-y2vllrex]{transform:scale(1.045)}[data-astro-cid-y2vllrex][data-effect=caption]:is(:hover,:focus-visible,[data-preview]) .project-demo-caption[data-astro-cid-y2vllrex]{visibility:visible;transform:none}[data-astro-cid-y2vllrex][data-effect=arrow]:is(:hover,:focus-visible,[data-preview]) .project-demo-arrow[data-astro-cid-y2vllrex]{transform:translate(5px,-5px)}html[data-motion=off] .project-demo[data-astro-cid-y2vllrex] img[data-astro-cid-y2vllrex],html[data-motion=off] .project-demo-arrow[data-astro-cid-y2vllrex]{transform:none!important}@media (prefers-reduced-motion:reduce){.project-demo[data-astro-cid-y2vllrex] img[data-astro-cid-y2vllrex],.project-demo-arrow[data-astro-cid-y2vllrex]{transform:none!important}}@media (hover:none){[data-astro-cid-y2vllrex][data-effect=caption] .project-demo-caption[data-astro-cid-y2vllrex]{visibility:visible;transform:none}}.comparison-stage[data-astro-cid-67ggu7zt]{aspect-ratio:4/3;background:var(--lavender-wash);position:relative;overflow:hidden}.comparison-stage[data-astro-cid-67ggu7zt] img[data-astro-cid-67ggu7zt]{object-fit:cover;width:100%;height:100%}.comparison-before[data-astro-cid-67ggu7zt]{clip-path:inset(0 calc(100% - var(--position)) 0 0);position:absolute;inset:0}.monochrome[data-astro-cid-67ggu7zt]{filter:grayscale()}.comparison-label[data-astro-cid-67ggu7zt]{background:var(--dark-purple);color:#fff;padding:6px 12px;font-size:.8rem;position:absolute;top:16px;left:16px}.comparison-after[data-astro-cid-67ggu7zt]{left:auto;right:16px}.comparison-line[data-astro-cid-67ggu7zt]{top:0;bottom:0;left:var(--position);pointer-events:none;background:#fff;width:2px;position:absolute;transform:translate(-50%)}.comparison-line[data-astro-cid-67ggu7zt] span[data-astro-cid-67ggu7zt]{width:44px;height:44px;color:var(--ink);background:#fff;border-radius:50%;place-items:center;font-size:1.4rem;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px #16193f40}.comparison-stage[data-astro-cid-67ggu7zt] input[data-astro-cid-67ggu7zt]{opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.comparison-stage[data-astro-cid-67ggu7zt]:focus-within{outline:3px solid var(--purple-text);outline-offset:5px}.comparison-help[data-astro-cid-67ggu7zt]{flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:18px;font-size:.8rem;display:flex}.comparison-help[data-astro-cid-67ggu7zt] output[data-astro-cid-67ggu7zt]{font-weight:700}