.stage.chroma-demo{background:#212121;color:#fff}.chroma-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px}.chroma-action{--chroma-colors:#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57,#ff9ff3,#ff6b6b;position:relative;isolation:isolate;padding:16px 32px;font:700 18px Arial,sans-serif;color:white;background:transparent;border:none;cursor:pointer;border-radius:50px;overflow:hidden;transition:transform .2s ease}.chroma-action:is(:hover,:focus-visible){transform:scale(1.03)}.chroma-action:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,var(--chroma-colors));z-index:-2;filter:blur(10px);transform:rotate(0deg);transition:transform 1.5s ease-in-out}.chroma-action:is(:hover,:focus-visible):before{transform:rotate(180deg)}.chroma-action:after{content:"";position:absolute;inset:3px;background:black;border-radius:47px;z-index:-1;filter:blur(5px)}.chroma-text{color:transparent;background:conic-gradient(from 0deg,var(--chroma-colors));background-clip:text;-webkit-background-clip:text;filter:hue-rotate(0deg)}.chroma-action:is(:hover,:focus-visible) .chroma-text{animation:atlas-chroma-hue 2s linear infinite}.chroma-action:active{transform:scale(.99)}.chroma-action:focus-visible{outline:2px solid #e9efff;outline-offset:5px}.chroma-feedback{font-size:11px;color:#ccc;min-height:16px;margin:0}@keyframes atlas-chroma-hue{to{filter:hue-rotate(360deg)}}body.paused .chroma-action,body.paused .chroma-action:before{transition:none}body.paused .chroma-action:is(:hover,:focus-visible):before{transform:none}@media(prefers-reduced-motion:reduce){.chroma-action,.chroma-action:before{transition:none}.chroma-action:is(:hover,:focus-visible),.chroma-action:is(:hover,:focus-visible):before{transform:none}.chroma-action:is(:hover,:focus-visible) .chroma-text{animation:none}}
.stage.frost-button-demo{background:#212121;color:#fff}.frost-demo-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}.frost-button-shell{position:relative;isolation:isolate;padding:3px;background:linear-gradient(90deg,#03a9f4,#f441a5);border-radius:.9em;font-size:16px}.frost-action{display:block;font:400 22.4px Arial,sans-serif;padding:.6em .8em;border-radius:.5em;border:0;background:#000;color:#fff;cursor:pointer;box-shadow:2px 2px 3px #000000b4}.frost-button-shell:before{content:"";position:absolute;inset:0;margin:auto;border-radius:.9em;z-index:-1;filter:blur(0);transition:filter .4s ease}.frost-button-shell:hover:before,.frost-button-shell:has(:focus-visible):before{background:linear-gradient(90deg,#03a9f4,#f441a5);filter:blur(1.2em)}.frost-button-shell:active:before{filter:blur(.2em)}.frost-action:focus-visible{outline:2px solid #fff;outline-offset:6px}.frost-feedback{font-size:11px;color:#ccc;margin:0;min-height:16px}body.paused .frost-button-shell:before{transition:none}@media(prefers-reduced-motion:reduce){.frost-button-shell:before{transition:none}}