.surface-grain-demo-module__Wts8la__figure,.surface-grain-demo-module__Wts8la__magnifierLens{--demo-grain-light:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.025'/%3E%3C/svg%3E");--demo-grain-dark:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.04'/%3E%3C/svg%3E")}.surface-grain-demo-module__Wts8la__figure{border:1px solid var(--border);border-radius:var(--radius);margin-block:1.5rem;overflow:hidden}.surface-grain-demo-module__Wts8la__toolbar,.surface-grain-demo-module__Wts8la__header{border-bottom:1px solid #7f7f7f3d;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;display:flex}.surface-grain-demo-module__Wts8la__toolbar{min-height:3rem;color:var(--foreground);background:var(--background);padding-inline:1rem .625rem}.surface-grain-demo-module__Wts8la__toolbarTitle{font-weight:650}.surface-grain-demo-module__Wts8la__header{min-height:2.75rem;padding-inline:1rem}.surface-grain-demo-module__Wts8la__headerActions{align-items:center;gap:.375rem;display:flex}.surface-grain-demo-module__Wts8la__headerActions .surface-grain-demo-module__Wts8la__status{text-align:end;min-width:8.75rem}.surface-grain-demo-module__Wts8la__status{color:currentColor;opacity:.62;font-family:var(--font-mono);font-weight:400}.surface-grain-demo-module__Wts8la__comparison{outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.surface-grain-demo-module__Wts8la__comparison[data-magnifying=true]{cursor:zoom-in;touch-action:none}.surface-grain-demo-module__Wts8la__comparison:focus-visible{box-shadow:inset 0 0 0 2px var(--ring)}.surface-grain-demo-module__Wts8la__surface{min-width:0}.surface-grain-demo-module__Wts8la__surface+.surface-grain-demo-module__Wts8la__surface{border-block-start:1px solid #7f7f7f3d}.surface-grain-demo-module__Wts8la__light{--demo-grain:var(--demo-grain-light);--surface-color:#f5f5f5;--background:#f5f5f5;--foreground:#181818;--muted:#e1e1e1;color:var(--foreground);background-color:var(--surface-color)}@supports (color:lab(0% 0 0)){.surface-grain-demo-module__Wts8la__light{--surface-color:lab(96.52% -.0000298023 .0000119209);--background:lab(96.52% -.0000298023 .0000119209);--foreground:lab(8.36% -.00000745058 0);--muted:lab(89.56% -.0000298023 0)}}.surface-grain-demo-module__Wts8la__dark{--demo-grain:var(--demo-grain-dark);--surface-color:#0f0f0f;--background:#0f0f0f;--foreground:#f2f2f2;--muted:#222;color:var(--foreground);background-color:var(--surface-color)}@supports (color:lab(0% 0 0)){.surface-grain-demo-module__Wts8la__dark{--surface-color:lab(4.4379% 0 0);--background:lab(4.4379% 0 0);--foreground:lab(95.36% 0 0);--muted:lab(13% 0 0)}}.surface-grain-demo-module__Wts8la__variants{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.surface-grain-demo-module__Wts8la__variant{min-width:0;position:relative;overflow:hidden}.surface-grain-demo-module__Wts8la__variant+.surface-grain-demo-module__Wts8la__variant{border-inline-start:1px solid #7f7f7f3d}.surface-grain-demo-module__Wts8la__grain{background-image:var(--demo-grain);background-position:0 0;background-repeat:repeat;background-size:256px 256px}.surface-grain-demo-module__Wts8la__variantHeader{border-bottom:1px solid #7f7f7f33;justify-content:space-between;align-items:center;gap:.5rem;min-height:2.25rem;padding-inline:.875rem;font-size:.6875rem;font-weight:650;display:flex}.surface-grain-demo-module__Wts8la__variantHeader span:last-child{color:currentColor;font-family:var(--font-mono);opacity:.56;text-overflow:ellipsis;white-space:nowrap;font-weight:400;overflow:hidden}.surface-grain-demo-module__Wts8la__content{flex-direction:column;justify-content:space-between;gap:2rem;min-height:11.5rem;padding:1rem;display:flex}.surface-grain-demo-module__Wts8la__title{margin:0;font-size:1rem;font-weight:650}.surface-grain-demo-module__Wts8la__description{color:currentColor;opacity:.68;max-width:24ch;margin:.35rem 0 0;font-size:.8125rem;line-height:1.55}.surface-grain-demo-module__Wts8la__details{flex-direction:column;gap:.625rem;margin:0;display:flex}.surface-grain-demo-module__Wts8la__details div{justify-content:space-between;align-items:baseline;gap:.75rem;min-width:0;display:flex}.surface-grain-demo-module__Wts8la__details dt{color:currentColor;opacity:.56;font-size:.6875rem}.surface-grain-demo-module__Wts8la__details dd{font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.75rem;overflow:hidden}.surface-grain-demo-module__Wts8la__magnifierLens{--surface-grain-layer-magnifier:1;--lens-x:50%;--lens-y:50%;--surface-color:#f5f5f5;--foreground:#181818;z-index:var(--surface-grain-layer-magnifier);top:var(--lens-y);left:var(--lens-x);pointer-events:none;opacity:0;width:10rem;height:10rem;color:var(--foreground);background-color:var(--surface-color);box-shadow:0 0 0 2px var(--surface-color), 0 2px 8px #00000059;will-change:transform, opacity;border-radius:50%;transition:opacity .14s cubic-bezier(.165,.84,.44,1),transform .14s cubic-bezier(.165,.84,.44,1);position:absolute;overflow:hidden;transform:translate(-50%,-50%)scale(.96)}@supports (color:lab(0% 0 0)){.surface-grain-demo-module__Wts8la__magnifierLens{--surface-color:lab(96.52% -.0000298023 .0000119209);--foreground:lab(8.36% -.00000745058 0)}}.surface-grain-demo-module__Wts8la__magnifierLens[data-theme=Dark]{--surface-color:#0f0f0f;--foreground:#f2f2f2}@supports (color:lab(0% 0 0)){.surface-grain-demo-module__Wts8la__magnifierLens[data-theme=Dark]{--surface-color:lab(4.4379% 0 0);--foreground:lab(95.36% 0 0)}}.surface-grain-demo-module__Wts8la__magnifierLens[data-active=true][data-visible=true]{opacity:1;transform:translate(-50%,-50%)scale(1)}.surface-grain-demo-module__Wts8la__magnifierCanvas{z-index:1;transform-origin:0 0;will-change:transform;flex-direction:column;display:flex;position:absolute;top:0;left:0}.surface-grain-demo-module__Wts8la__magnifierNoise{z-index:2;visibility:hidden;pointer-events:none;background-repeat:repeat;background-size:1024px 1024px;position:absolute;inset:0}.surface-grain-demo-module__Wts8la__magnifierNoise[data-magnifier-noise=Light]{background-image:var(--demo-grain-light)}.surface-grain-demo-module__Wts8la__magnifierNoise[data-magnifier-noise=Dark]{background-image:var(--demo-grain-dark)}.surface-grain-demo-module__Wts8la__magnifierCanvas .surface-grain-demo-module__Wts8la__grain{background-image:none}.surface-grain-demo-module__Wts8la__figure figcaption{border-top:1px solid var(--border);color:var(--muted-foreground);background:var(--background);margin:0;padding:.75rem 1rem;font-size:.75rem;line-height:1.5}@media (max-width:40rem){.surface-grain-demo-module__Wts8la__content{min-height:12rem;padding:.875rem}.surface-grain-demo-module__Wts8la__description{font-size:.75rem}.surface-grain-demo-module__Wts8la__toolbar .surface-grain-demo-module__Wts8la__status{display:none}}@media (prefers-reduced-motion:reduce){.surface-grain-demo-module__Wts8la__magnifierLens{transition:none}}