@font-face{font-family:Geist;font-style:normal;font-weight:400 600;font-display:swap;src:url(/glassmorphism-lab/_astro/geist-latin.BgDaEnEv.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist;font-style:normal;font-weight:400 600;font-display:swap;src:url(/glassmorphism-lab/_astro/geist-latin-ext.DC-KSUi6.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:400 500;font-display:swap;src:url(/glassmorphism-lab/_astro/geist-mono-latin.XN7g48iV.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono;font-style:normal;font-weight:400 500;font-display:swap;src:url(/glassmorphism-lab/_astro/geist-mono-latin-ext.Bwz-egvJ.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);interpolate-size:allow-keywords}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}:root{--bg:#f3f4f7;--surface:#fff;--fg:#14171c;--muted:#5b6370;--line:#dde1e8;--accent:#0a68f5;--accent-ink:#fff;--seg-bg:color-mix(in srgb, var(--bg) 20%, transparent);--seg-on:color-mix(in srgb, var(--surface) 40%, transparent);--track:#c3c9d4;--code-bg:#eceff4;--code-fg:#1c2230;--code-k:#0a58cf;--code-c:#7a8394;--code-s:#a4326b;--sh-hue:16, 24, 48;--glass-tint:color-mix(in srgb, var(--surface) 62%, transparent);--glass-edge:color-mix(in srgb, var(--fg) 14%, transparent);--glass-hilite:#ffffff8c;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--font:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--ease-out:cubic-bezier(.32, .72, 0, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c0e12;--surface:#151821;--fg:#eceef2;--muted:#98a0af;--line:#262b36;--accent:#4c9aff;--accent-ink:#06101f;--track:#3a4152;--code-bg:#0e1118;--code-fg:#d9deea;--code-k:#7db4ff;--code-c:#6c7588;--code-s:#f08cb6;--sh-hue:0, 0, 0;--glass-tint:color-mix(in srgb, var(--surface) 55%, transparent);--glass-edge:#ffffff1a;--glass-hilite:#ffffff24;color-scheme:dark}}:root[data-theme=dark]{--bg:#0c0e12;--surface:#151821;--fg:#eceef2;--muted:#98a0af;--line:#262b36;--accent:#4c9aff;--accent-ink:#06101f;--track:#3a4152;--code-bg:#0e1118;--code-fg:#d9deea;--code-k:#7db4ff;--code-c:#6c7588;--code-s:#f08cb6;--sh-hue:0, 0, 0;--glass-tint:color-mix(in srgb, var(--surface) 55%, transparent);--glass-edge:#ffffff1a;--glass-hilite:#ffffff24;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased}.wrap{flex-direction:column;gap:56px;max-width:1240px;margin:0 auto;padding-block:72px;padding-inline:clamp(16px,3vw,32px);display:flex;position:relative}.wrap>main{flex-direction:column;gap:56px;min-width:0;display:flex}main:focus{outline:none}.ambient{pointer-events:none;opacity:.4;background-image:url(/glassmorphism-lab/_astro/mesh-bg.f1fFyRhX.jpg);background-repeat:no-repeat;background-size:cover;position:fixed;inset:0}.ambient:after{content:"";background-image:var(--grain);opacity:.5;mix-blend-mode:overlay;background-size:140px 140px;position:absolute;inset:0}.glasspane{isolation:isolate;background:var(--glass-tint);backdrop-filter:blur(30px)saturate(180%);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge), 0 32px 72px -26px rgba(var(--sh-hue), .45);position:relative}.glasspane:before{content:"";border-radius:inherit;background-image:var(--grain);opacity:.28;mix-blend-mode:soft-light;pointer-events:none;background-size:140px 140px;position:absolute;inset:0}.skip-link{z-index:100;left:12px;top:calc(env(safe-area-inset-top,0px) + 12px);font:500 14px/1 var(--font);color:var(--fg);background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(var(--sh-hue), .28);border-radius:10px;padding:12px 16px;text-decoration:none;transition:transform .15s;position:absolute;transform:translateY(calc(-100% - 24px))}.skip-link:focus{outline:2px solid var(--accent);outline-offset:2px;transform:translateY(0)}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sitebar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:34px;display:flex}.sitebar-brand{font:600 15px/1 var(--font);letter-spacing:-.01em;color:var(--fg);align-items:center;gap:10px;text-decoration:none;transition:color .2s;display:inline-flex}.sitebar-brand>svg{color:var(--accent);flex:none}.sitebar-brand:hover{color:var(--accent)}.sitebar-gh,.sitefoot-gh{width:40px;height:40px;color:var(--fg);background:color-mix(in srgb, var(--fg) 6%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge);transition:color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), scale .18s var(--ease-out);border-radius:12px;flex:none;place-items:center;display:inline-grid}.sitebar-gh:hover,.sitefoot-gh:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent)}.sitebar-gh:focus-visible,.sitefoot-gh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sitebar-lang{height:40px;font:600 13px/1 var(--font);letter-spacing:.04em;color:var(--fg);background:color-mix(in srgb, var(--fg) 6%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge);transition:color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), scale .18s var(--ease-out);border-radius:12px;flex:none;align-items:center;gap:7px;padding:0 14px;text-decoration:none;display:inline-flex}.sitebar-lang>svg{opacity:.7;flex:none}.sitebar-lang:hover{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent)}.sitebar-lang:hover>svg{opacity:1}.sitebar-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sitebar-gh:active,.sitebar-lang:active,.sitefoot-gh:active{scale:.94}h1,h2,h3,p{margin:0}h1{font:600 clamp(28px, 4.2vw, 44px)/1.05 var(--font);letter-spacing:-.02em;text-wrap:balance}h2{font:600 clamp(20px, 2.4vw, 26px)/1.2 var(--font);letter-spacing:-.01em;text-wrap:balance}.lede{color:var(--muted);text-wrap:pretty;max-width:68ch;margin-top:12px}.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.lab{grid-template:"stage inspector""code inspector"1fr/minmax(0,1fr) 340px;align-items:start;gap:20px;display:grid}.stagecol{flex-direction:column;grid-area:stage;gap:12px;min-width:0;display:flex}.inspector{border-radius:16px;flex-direction:column;grid-area:inspector;align-self:stretch;gap:18px;min-width:0;padding:18px;display:flex}.codebox{border-radius:16px;grid-area:code;min-width:0;padding:16px 18px}.stage{isolation:isolate;aspect-ratio:16/10;min-height:400px;box-shadow:0 0 0 .5px var(--line);background:#1b1633;border-radius:18px;position:relative;overflow:hidden}.bg{background:var(--bgimg) center/cover no-repeat;width:132%;animation:26s ease-in-out infinite alternate drift;position:absolute;top:0;bottom:0;left:0}.bg.still{animation-play-state:paused}@keyframes drift{0%{transform:translate(0)}to{transform:translate(-24%)}}.chip{z-index:3;font:500 12px/1 var(--font);color:#fff;background:#0e1016c7;border:0;border-radius:999px;padding:8px 12px;position:absolute;top:12px}.chip.state{font-family:var(--mono);letter-spacing:.02em;font-size:11px;left:12px}.chip.hold{cursor:pointer;touch-action:none;user-select:none;transition:background .15s var(--ease-out), color .15s var(--ease-out), scale .16s var(--ease-out);right:12px}.chip.hold:hover{background:#0e1016e6}.chip.hold:active{scale:.96}.chip.hold[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.chip:focus-visible{outline-offset:2px;outline:2px solid #fff}.stagefoot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;display:flex}.panel{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:min(310px,80%);top:52px;left:28px}.panel.drag{cursor:grabbing}.panel:focus-visible{outline-offset:3px;outline:2px solid #fff}.gc-head{align-items:center;gap:12px;padding:16px 18px 12px;display:flex}.gc-head svg{flex:none}.gc-title{text-transform:none;font-size:1.07em;font-weight:600}.gc-sub{font-size:.87em}.gc-rows{margin:0 18px}.gc-row{border-top:.5px solid var(--sep);font-variant-numeric:tabular-nums;justify-content:space-between;gap:12px;padding:10px 0;display:flex}.gc-foot{padding:10px 18px 16px;font-size:.8em}.group{flex-direction:column;gap:14px;display:flex}.group>.eyebrow{padding-bottom:2px}.seg{background:var(--seg-bg);backdrop-filter:blur(10px)saturate(150%);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge);border-radius:10px;flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex;position:relative}.seg button{font:500 13px/1 var(--font);color:var(--muted);cursor:pointer;transition:color .15s var(--ease-out), background .15s var(--ease-out), box-shadow .15s var(--ease-out), scale .16s var(--ease-out);background:0 0;border:0;border-radius:8px;padding:8px 11px}.seg button:hover{color:var(--fg)}.seg button:active{scale:.97}.seg button[aria-checked=true]{background:var(--seg-on);color:var(--fg);backdrop-filter:blur(12px)saturate(180%);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge), 0 2px 6px -2px rgba(var(--sh-hue), .45)}.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.seg.wide{display:flex}.seg.wide button{font-family:var(--mono);flex:auto;padding-inline:6px;font-size:12px}.layer{flex-direction:column;gap:8px;display:flex}.lh{justify-content:space-between;align-items:center;gap:12px;display:flex}.val{font:500 12px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.hint{color:var(--muted);font-size:12.5px;line-height:1.4}.sw{cursor:pointer;align-items:center;gap:10px;min-width:0;font-size:14px;font-weight:500;display:flex;position:relative}.sw input{opacity:0;width:1px;height:1px;margin:0;position:absolute}.trk{background:var(--track);width:34px;height:20px;transition:background .24s var(--ease-out);border-radius:999px;flex:none;position:relative}.trk:after{content:"";width:16px;height:16px;box-shadow:0 1px 2px rgba(var(--sh-hue), .32);transition:transform .3s var(--ease-out), width .2s var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.sw input:checked+.trk{background:var(--accent)}.sw input:checked+.trk:after{transform:translate(14px)}.sw:active .trk:after{width:20px}.sw:active input:checked+.trk:after{transform:translate(10px)}.sw input:focus-visible+.trk{outline:2px solid var(--accent);outline-offset:2px}.sw input:disabled+.trk{opacity:.4}.sw input:disabled~.nm{opacity:.5}input[type=range]{width:100%;accent-color:var(--accent);height:20px;margin:0}.layer[data-on=false] input[type=range]{opacity:.35}.note{color:var(--muted);font-size:12.5px}hr{border:0;border-top:1px solid var(--line);margin:0}.codehead{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.btn{font:500 13px/1 var(--font);border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;transition:border-color .15s var(--ease-out), color .15s var(--ease-out), background .15s var(--ease-out), scale .16s var(--ease-out);border-radius:9px;padding:.9rem 1rem}.btn:hover{border-color:var(--muted)}.btn:active{scale:.96}.btn.done{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 55%, var(--line));background:color-mix(in srgb, var(--accent) 8%, var(--surface))}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.code{background:color-mix(in srgb, var(--code-bg) 55%, transparent);color:var(--code-fg);font:400 12.5px/1.65 var(--mono);tab-size:2;border-radius:10px;margin:0;padding:14px 16px;overflow-x:auto}.code .k{color:var(--code-k)}.code .c{color:var(--code-c)}.code .s{color:var(--code-s)}.build{flex-direction:column;gap:20px;display:flex}.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;display:grid}.step{flex-direction:column;gap:12px;min-width:0;display:flex}.mini{isolation:isolate;aspect-ratio:4/3;background:var(--bgimg) center/cover no-repeat;box-shadow:0 0 0 .5px var(--line);--fs:12.5px;border-radius:14px;position:relative;overflow:hidden}.mini .gc-head{gap:10px;padding:12px 14px 8px}.mini .gc-rows{margin:0 14px 12px}.mini .gc-row{padding:7px 0}.step h3{font:600 15px/1.25 var(--font);align-items:baseline;gap:10px;display:flex}.step h3 span{font:500 11px/1 var(--mono);color:var(--muted)}.step p{color:var(--muted);text-wrap:pretty;font-size:13.5px;line-height:1.45}.tries{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.try{border-top:1px solid var(--line);flex-direction:column;gap:6px;padding-top:14px;display:flex}.try strong{font-size:14.5px;font-weight:600}.try p{color:var(--muted);font-size:13.5px;line-height:1.5}.foot{color:var(--muted);max-width:80ch;margin-top:2em;font-size:12.5px;line-height:1.55}.foot code{font:500 12px var(--mono)}a{color:var(--accent);text-underline-offset:2px}.faq{flex-direction:column;gap:10px;max-width:80ch;display:flex}.faq-item{transition:border-color .18s var(--ease-out);border-radius:14px}.faq-item.glasspane{border:1px solid var(--line);box-shadow:inset 0 1px 0 0 var(--glass-hilite), 0 18px 44px -22px rgba(var(--sh-hue), .35)}.faq-item:hover{border-color:var(--muted)}.faq-item summary{cursor:pointer;color:var(--fg);transition:color .18s var(--ease-out);justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-size:15px;font-weight:600;list-style:none;display:flex}.faq-q{min-width:0}.faq-item:hover summary{color:var(--accent)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}.faq-icon{width:28px;height:28px;color:var(--muted);background:color-mix(in srgb, var(--fg) 8%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px var(--glass-edge);transition:transform .34s var(--ease-spring), scale .18s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);border-radius:999px;flex:none;place-items:center;display:grid;scale:1}.faq-item summary:active .faq-icon{scale:.9}.faq-item:hover .faq-icon{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent)}.faq-item[open] .faq-icon{color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);box-shadow:inset 0 1px 0 0 var(--glass-hilite), inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);transform:rotate(45deg)}@supports selector(::details-content){.faq-item::details-content{block-size:0;transition:block-size .34s var(--ease-out), content-visibility .34s allow-discrete;overflow:hidden}.faq-item[open]::details-content{block-size:auto}}.faq-item p{color:var(--muted);opacity:0;transition:opacity .22s var(--ease-out);margin:0;padding:0 18px 14px;font-size:14px;line-height:1.55}.faq-item[open] p{opacity:1;transition-delay:80ms}.sitefoot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;width:100%;display:flex}.sitefoot-copy{font:400 12.5px/1.5 var(--mono);color:var(--muted)}.sitefoot-copy a{color:var(--fg);text-decoration:none;transition:color .2s}.sitefoot-copy a:hover{color:var(--accent)}.sitefoot-copy a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}@keyframes rise{0%{opacity:0;translate:0 10px}}.sitebar{animation:rise .5s var(--ease-out) both}header .eyebrow{animation:rise .5s var(--ease-out) 40ms both}.main-title{animation:rise .55s var(--ease-out) 80ms both}header .lede{animation:rise .6s var(--ease-out) .12s both}.inspector{animation:rise .55s var(--ease-out) .16s both}.stagefoot{animation:rise .5s var(--ease-out) .18s both}.codebox{animation:rise .55s var(--ease-out) .22s both}@keyframes seg-on{0%{transform:scale(.94)}}.seg button[aria-checked=true]{animation:seg-on .3s var(--ease-out)}@keyframes copy-pop{40%{scale:1.05}}.btn.done{animation:copy-pop .36s var(--ease-spring)}.js [data-reveal]{opacity:0;transition:opacity .6s var(--ease-out), translate .6s var(--ease-out);translate:0 20px}.js [data-reveal=in]{opacity:1;translate:0}}@media (width<=1040px){.lab{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""foot""inspector""code"}.stagecol{display:contents}.stage{top:calc(env(safe-area-inset-top,0px) + 8px);z-index:10;aspect-ratio:auto;grid-area:stage;height:min(300px,46dvh);min-height:0;position:sticky}.stagefoot{grid-area:foot}.steps,.tries{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.wrap,.wrap>main{gap:44px}.steps,.tries{grid-template-columns:minmax(0,1fr)}.chip.hold{padding:7px 10px;font-size:11px}.panel{--fs:13px}.panel .gc-foot{display:none}.panel .gc-head{padding:12px 14px 8px}.panel .gc-rows{margin:0 14px 10px}.panel .gc-row{padding:8px 0}}@media (prefers-reduced-motion:reduce){.bg{animation:none}.trk,.trk:after,.skip-link,.sitebar-brand,.sitebar-gh,.sitebar-lang,.sitefoot-gh,.sitefoot-copy a,.btn,.seg button,.chip.hold,.faq-item,.faq-item summary,.faq-icon,.faq-item p,.faq-item::details-content{transition:none}.btn:active,.seg button:active,.chip.hold:active,.sitebar-gh:active,.sitebar-lang:active,.sitefoot-gh:active{scale:none}.faq-item summary:active .faq-icon{scale:1}.sw:active .trk:after{width:16px}.sw:active input:checked+.trk:after{transform:translate(14px)}}.main-title{margin-top:14px}.mt-4{margin-top:4px}.mat-name{color:var(--fg)}.font-btn{font-family:var(--font);font-size:13px}@supports not (backdrop-filter:blur(1px)){.glasspane{background:color-mix(in srgb, var(--surface) 92%, transparent)}.seg{background:color-mix(in srgb, var(--bg) 55%, var(--surface))}.seg button[aria-checked=true]{background:var(--surface)}}@media (prefers-reduced-transparency:reduce){.glasspane{background:var(--surface)}.seg,.seg button[aria-checked=true]{backdrop-filter:none}.seg{background:color-mix(in srgb, var(--bg) 60%, var(--surface))}.seg button[aria-checked=true]{background:var(--surface)}}@media (prefers-contrast:more){:root{--muted:#454c59;--line:#b3bac6;--glass-edge:color-mix(in srgb, var(--fg) 34%, transparent);--glass-tint:color-mix(in srgb, var(--surface) 86%, transparent)}:root[data-theme=dark]{--muted:#c3cad6;--line:#3b4250;--glass-edge:#ffffff42;--glass-tint:color-mix(in srgb, var(--surface) 82%, transparent)}}@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root:not([data-theme=light]){--muted:#c3cad6;--line:#3b4250;--glass-edge:#ffffff42;--glass-tint:color-mix(in srgb, var(--surface) 82%, transparent)}}