.liquid-lens-demo,.liquid-lens-demo *,.liquid-lens-demo :before,.liquid-lens-demo :after{box-sizing:border-box}.liquid-lens-demo{--liquid-lens-width:clamp(27rem, 66vw, 46rem);--liquid-lens-accent:#c86e3b;width:var(--liquid-lens-width);max-width:100%}.liquid-lens__filter{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.liquid-lens__scene{aspect-ratio:16/9;border-radius:calc(var(--liquid-lens-width) * .045);isolation:isolate;touch-action:none;background:linear-gradient(90deg,#0000 49.85%,#25262214 50%,#0000 50.15%),linear-gradient(#0000 49.8%,#25262214 50%,#0000 50.2%),#e8e3d8;border:1px solid #2626221a;width:100%;display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff94,0 1.8rem 4.6rem -3rem #3d372b6b}.liquid-lens__scene:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 7.9%,#27282512 8% 8.15%),linear-gradient(118deg,#0000 0 56%,#c86e3b29 56.2% 69%,#0000 69.2%);position:absolute;inset:0}.liquid-lens__kicker,.liquid-lens__meta,.liquid-lens__index{z-index:0;color:#353631;pointer-events:none;margin:0;position:absolute}.liquid-lens__kicker{letter-spacing:.14em;text-transform:uppercase;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.44rem,.85vw,.66rem);font-weight:650;top:10%;left:6.4%}.liquid-lens__title{z-index:0;color:#2b2c28;letter-spacing:-.085em;pointer-events:none;white-space:nowrap;width:88%;margin:0;font-size:clamp(2.8rem,8.1vw,6.8rem);font-weight:650;line-height:.78;position:absolute;top:22%;left:6%}.liquid-lens__title span{color:var(--liquid-lens-accent);margin-left:15%;display:block}.liquid-lens__orbit{z-index:0;aspect-ratio:1;border:max(1px, calc(var(--liquid-lens-width) * .004)) solid #383934;pointer-events:none;border-radius:50%;width:56%;position:absolute;bottom:-31%;right:-9%}.liquid-lens__orbit:before,.liquid-lens__orbit:after{content:"";border-radius:inherit;border:1px solid #3536314d;position:absolute}.liquid-lens__orbit:before{inset:13%}.liquid-lens__orbit:after{background:var(--liquid-lens-accent);opacity:.78;border:0;inset:27%}.liquid-lens__meta{letter-spacing:.08em;text-transform:uppercase;grid-template-columns:auto auto;gap:.55rem 1.5rem;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.38rem,.7vw,.52rem);display:grid;bottom:9%;left:6.4%}.liquid-lens__meta strong{color:#2c2d29;font-weight:700}.liquid-lens__meta span{color:#2c2d298a}.liquid-lens__index{letter-spacing:.1em;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.4rem,.78vw,.58rem);top:9%;right:6.4%}.liquid-lens{--lens-x:-5rem;--lens-y:1.5rem;z-index:2;aspect-ratio:2.55;color:#2d2e2a;cursor:grab;width:42%;min-width:10rem;transform:translate3d(calc(-50% + var(--lens-x)), calc(-50% + var(--lens-y)), 0);will-change:transform;background:0 0;border:0;border-radius:999px;outline:none;padding:0;transition:filter .18s,transform .56s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:50%}.liquid-lens.is-dragging{cursor:grabbing;filter:saturate(1.08);transition:filter .18s}.liquid-lens:focus-visible{outline-offset:.35rem;outline:2px solid #2f302c}.liquid-lens__glass,.liquid-lens__glass:before,.liquid-lens__glass:after{border-radius:inherit;pointer-events:none;position:absolute}.liquid-lens__glass{-webkit-backdrop-filter:url(#liquid-lens-refraction)blur(.35px)saturate(1.16);backdrop-filter:url(#liquid-lens-refraction)blur(.35px)saturate(1.16);background:#ffffff0f;border:1px solid #ffffff94;inset:0;overflow:hidden;box-shadow:inset 0 1px #ffffffd1,inset 0 -1px #ffffff38,inset 1rem 0 1.6rem -1.2rem #ffffffdb,inset -1rem 0 1.6rem -1.2rem #3d372d52,0 .9rem 1.8rem #4a41312e,0 .15rem .35rem #36302533}.liquid-lens__glass:before{content:"";mix-blend-mode:screen;opacity:.68;background:linear-gradient(150deg,#ffffff75,#0000 29%),radial-gradient(at 26% -18%,#ffffffc2,#0000 45%),radial-gradient(at 78% 126%,#c86e3b33,#0000 44%);border:1px solid #ffffff7a;inset:2px}.liquid-lens__glass:after{content:"";border:max(1px, calc(var(--liquid-lens-width) * .0035)) solid #ffffff5c;inset:0;box-shadow:inset .38rem .45rem .8rem #ffffff47,inset -.45rem -.38rem .9rem #312d261f}.liquid-lens__handle{z-index:1;border-radius:inherit;color:#2b2c28bd;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px #ffffffa3;grid-template-columns:auto 1fr;justify-content:center;align-items:center;gap:.65rem;padding-inline:13%;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.42rem,.82vw,.64rem);font-weight:720;display:grid;position:absolute;inset:0}.liquid-lens__grip{grid-template-columns:repeat(2,2px);gap:3px;display:grid}.liquid-lens__grip:before,.liquid-lens__grip:after{content:"";opacity:.55;background:currentColor;border-radius:999px;width:2px;height:1.1rem}.liquid-lens__support{z-index:3;color:#2f302b94;letter-spacing:.06em;pointer-events:none;background:#f4f1e99e;border:1px solid #2f302b1f;border-radius:999px;padding:.38rem .55rem;font-family:SFMono-Regular,Cascadia Code,Roboto Mono,monospace;font-size:clamp(.37rem,.62vw,.5rem);position:absolute;bottom:1rem;right:1rem}.liquid-lens__support:before{content:"REFRACTION ACTIVE"}@supports not ((-webkit-backdrop-filter:url("#liquid-lens-refraction")) or (backdrop-filter:url("#liquid-lens-refraction"))){.liquid-lens__glass{-webkit-backdrop-filter:blur(8px)saturate(1.14);backdrop-filter:blur(8px)saturate(1.14)}.liquid-lens__support:before{content:"SOFT GLASS FALLBACK"}}@media (width<=620px){.liquid-lens-demo{--liquid-lens-width:min(90vw, 32rem)}.liquid-lens{--lens-x:-2rem;--lens-y:.7rem;width:49%}.liquid-lens__support{bottom:.65rem;right:.65rem}}@media (prefers-reduced-motion:reduce){.liquid-lens{transition-duration:.01ms}}