.demo-glass{--background:oklch(18% .03 270);--foreground:oklch(97% .008 150);--card:oklch(22% .04 265/.72);--card-foreground:oklch(97% .008 150);--popover:oklch(22% .04 265/.86);--popover-foreground:oklch(97% .008 150);--primary:oklch(72% .18 145);--primary-foreground:oklch(18% .04 160);--secondary:oklch(28% .04 260/.72);--secondary-foreground:oklch(96% .01 150);--muted:oklch(26% .03 260/.72);--muted-foreground:oklch(72% .02 158);--accent:oklch(67% .18 285/.72);--accent-foreground:oklch(93% .14 158);--destructive:oklch(62% .21 22);--destructive-foreground:oklch(98% .01 90);--border:oklch(32% .03 260/.45);--input:oklch(30% .03 260/.55);--ring:oklch(72% .18 145);--font-display:"Bebas Neue", "Arial Narrow", system-ui, sans-serif;--font-body:"Barlow", system-ui, sans-serif;--glow-accent:0 0 0 1px oklch(72% .18 145/.35), 0 18px 60px -18px oklch(72% .18 145/.55);--glow-purple:0 0 0 1px oklch(67% .18 285/.35), 0 18px 60px -18px oklch(67% .18 285/.55);--gradient-stage:radial-gradient(140% 100% at 12% 0%, oklch(67% .18 285/.55) 0%, transparent 55%), radial-gradient(120% 90% at 92% 8%, oklch(72% .18 145/.35) 0%, transparent 60%), radial-gradient(100% 80% at 50% 100%, oklch(50% .12 250/.35) 0%, transparent 55%);background-color:var(--background);color:var(--foreground);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.demo-glass h1,.demo-glass h2,.demo-glass h3,.demo-glass .font-display{font-family:var(--font-display);letter-spacing:-.01em}.demo-glass .glass{-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);background:linear-gradient(135deg,oklch(28% .04 265/.55),oklch(22% .04 265/.35));border:1px solid oklch(45% .05 265/.35)}.demo-glass .purple-glow{box-shadow:var(--glow-purple)}.demo-glass .text-glow{text-shadow:0 0 24px oklch(72% .18 145/.55)}.demo-glass .text-glow-purple{text-shadow:0 0 24px oklch(67% .18 285/.55)}.demo-glass .badge-glow{box-shadow:0 0 14px 3px oklch(72% .18 145/.55),inset 0 0 10px 2px oklch(72% .18 145/.4)}.demo-glass .badge-glow-purple{box-shadow:0 0 14px 3px oklch(67% .18 285/.55),inset 0 0 10px 2px oklch(67% .18 285/.4)}.demo-glass .pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes demo-step-pulse{0%,to{border-color:var(--color-primary);box-shadow:0 0 oklch(72% .18 145/.5)}50%{border-color:oklch(72% .18 145/.6);box-shadow:0 0 22px 4px oklch(72% .18 145/.35)}}.demo-glass .step-active{animation:1.8s ease-in-out infinite demo-step-pulse}@keyframes rubik-spin{0%{transform:rotateX(0)rotateY(0)}to{transform:rotateX(360deg)rotateY(360deg)}}.demo-glass .rubik-spin{animation:26s linear infinite rubik-spin}.demo-glass .bubble-stage{--bubble:oklch(78% .14 235);--bubble-core:oklch(92% .06 230)}.demo-glass .stage-fade{background:linear-gradient(#0000 0%,oklch(5% .03 270) 100%)}.demo-glass .stage-fade-black{--gradient-stage:radial-gradient(140% 100% at 12% 0%, oklch(67% .18 285/.55) 0%, transparent 55%), radial-gradient(120% 90% at 92% 8%, oklch(72% .18 145/.35) 0%, transparent 60%), linear-gradient(to bottom, var(--background) 0%, oklch(5% .03 270) 40%)}.demo-glass .bubble-section{background:0 0}@keyframes bubble-float{0%{transform:translate(0)scale(1)}50%{transform:translate(6px,-14px)scale(1.04)}to{transform:translate(0)scale(1)}}.demo-glass .bubble{background:radial-gradient(circle at 32% 28%, oklch(100% 0 0/.9) 0%, oklch(100% 0 0/.12) 18%, transparent 42%), radial-gradient(circle at 68% 76%, var(--bubble-core) 0%, transparent 55%), radial-gradient(circle at 50% 50%, oklch(78% .14 235/.45) 0%, oklch(78% .14 235/.18) 62%, oklch(78% .14 235/.05) 100%);border:1px solid oklch(90% .06 230/.55);border-radius:9999px;transition:transform .22s,box-shadow .22s;animation:6s ease-in-out infinite bubble-float;box-shadow:0 0 18px 2px oklch(78% .14 235/.45),inset 0 0 22px 4px oklch(90% .08 230/.25)}.demo-glass .bubble:hover,.demo-glass .bubble:focus-visible{outline:none;box-shadow:0 0 34px 8px oklch(78% .14 235/.7),inset 0 0 26px 6px oklch(90% .08 230/.35)}@keyframes bubble-ring{0%{box-shadow:0 0 oklch(78% .14 235/.6)}to{box-shadow:0 0 0 22px oklch(78% .14 235/0)}}.demo-glass .bubble-playing{animation:3s ease-in-out infinite bubble-float,1.4s ease-out infinite bubble-ring}@keyframes bubble-trail-rise{0%{opacity:0;transform:translateY(10px)scale(.7)}25%{opacity:.9}to{opacity:0;transform:translate(14px,-34px)scale(1.15)}}.demo-glass .bubble-trail{animation:4.5s ease-in-out infinite bubble-trail-rise;box-shadow:0 0 10px 1px oklch(78% .14 235/.45),inset 0 0 8px 2px oklch(90% .08 230/.25)}@keyframes bubble-pop{0%{opacity:1;transform:scale(1)}45%{opacity:.85;transform:scale(1.35)}to{opacity:0;transform:scale(1.9)}}.demo-glass .bubble-popping{pointer-events:none;animation:.32s cubic-bezier(.32,.72,.24,1) forwards bubble-pop}@keyframes bubble-splash{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}.demo-glass .bubble-splash{border:2px solid oklch(90% .08 230/.7);border-radius:9999px;animation:.42s ease-out forwards bubble-splash;box-shadow:0 0 24px 6px oklch(78% .14 235/.5)}.demo-glass .clip-sheet{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:oklch(4% .02 270/.86)}.demo-glass .clip-frame{border:1px solid oklch(90% .06 230/.4);border-radius:28px;animation:.32s cubic-bezier(.22,1,.36,1) both bubble-clip-in;box-shadow:0 0 60px 10px oklch(78% .14 235/.35),inset 0 0 30px 6px oklch(90% .08 230/.12)}@keyframes bubble-clip-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}