.Lg,.Btn,.BtnC,.Input{z-index:1;display:flex;position:relative}:is(.Lg,.Btn,.BtnC,.Input):before{-webkit-backdrop-filter:blur(2px) saturate(150%) var(--glass);backdrop-filter:blur(2px) saturate(150%) var(--glass);border-radius:inherit;content:"";z-index:-1;transition:background .3s cubic-bezier(.4,0,.2,1),-webkit-backdrop-filter .3s cubic-bezier(.4,0,.2,1),backdrop-filter .3s cubic-bezier(.4,0,.2,1);position:absolute;inset:0}:is(.Lg,.Btn,.BtnC,.Input):hover:before{-webkit-backdrop-filter:saturate(150%) var(--glassH);backdrop-filter:saturate(150%) var(--glassH)}:is(.Lg,.Btn,.BtnC,.Input):after{border-radius:inherit;content:"";pointer-events:none;z-index:-1;background-image:linear-gradient(#00000030,#00000020);background-origin:border-box;background-clip:border-box;border:1px solid #0000;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude}:is(.Lg,.Input):before{background:linear-gradient(#f3f3f3ee,#ffffffa0)}.Btn,.BtnC{--btnShadowAct:inset 0 0 2px #0006;--btnShadowHov:inset 0 0 6px #00000047;--btnTransformAct:translateY(1px) scale(.97);transition:transform .3s cubic-bezier(.4,0,.2,1)}:is(.Btn,.BtnC):before{background:var(--btnBg)}:is(.Btn,.BtnC):hover:before{background:linear-gradient(0, #ffffff0d, #ffffff0d), var(--btnBg)}main.Lg{margin:var(--gap);padding:var(--gap);text-align:center;border-radius:24px}:root,:host{--glass:var(--qw6ZC6Gf214cSJd-ROt2vQ);--glassH:var(--qw6ZC6Gf214cSJd-ROt2vQ)}.Btn,.BtnC{border-radius:var(--btnRadius);box-sizing:border-box;color:var(--btnColor);cursor:pointer;transition:var(--btnTransition);-webkit-user-select:none;user-select:none;white-space:nowrap;background-color:#0000;background-repeat:no-repeat;border:none;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:flex}:is(.Btn,.BtnC):before{background:var(--btnBg)}:is(.Btn,.BtnC):hover{color:var(--btnColorHov)}:is(.Btn,.BtnC):hover:before{-webkit-backdrop-filter:saturate(150%) var(--glassH);backdrop-filter:saturate(150%) var(--glassH);background:var(--btnBgHov)}:is(.Btn,.BtnC):active{transition:var(--btnTransitionAct)}:is(.Btn,.BtnC):active:before{background:var(--btnBgAct)}.Btn{box-shadow:var(--btnShadow);padding:var(--btnPadding)}.Btn:hover{box-shadow:var(--btnShadowHov)}.Btn:active{box-shadow:var(--btnShadowAct);transform:var(--btnTransformAct)}.BtnC{box-shadow:var(--btnShadow);height:var(--btnCSize);width:var(--btnCSize);padding:0}.BtnC .Ico{background-image:var(--btnIco);height:100%;transition:var(--btnTransition);background-position:50%;background-repeat:no-repeat;background-size:24px;width:100%;display:block}.BtnC:hover{box-shadow:var(--btnShadowHov)}.BtnC:hover:before{background:var(--btnCBgHov)}.BtnC:hover .Ico{transform:translateY(1px)}.BtnC:active{box-shadow:var(--btnShadowAct);transform:var(--btnTransformAct)}.BtnC:active .Ico{transform:translateY(1px)}.Btn.Main{--btnBg:linear-gradient(135deg, #0a84ff, #06c);--btnBgAct:linear-gradient(180deg, #04a, #06c);--btnBgHov:radial-gradient(ellipse at center, #0a84ff 0, #0056cc 60%, #002b80 100%);--btnColor:#fff;--btnColorHov:#fff;--btnShadow:inset 0 1px 1px #fff9, inset 0 0 0 1px #0047cc26;--btnShadowAct:inset 0 0 4px #0010408c, inset 0 0 0 1px #0047cc26;--btnShadowHov:inset 0 0 6px #00104073, inset 0 0 0 1px #0047cc26;--btnTransformAct:scale(.96);--btnTransition:all .4s cubic-bezier(.16, 1, .3, 1);--btnTransitionAct:all .1s ease}:root,:host{--btnBg:linear-gradient(135deg, #f5f5f5ee, #f5f5f526);--btnBgAct:linear-gradient(135deg, #ffffff14);--btnBgHov:linear-gradient(135deg, #ffffff26, #ffffff4d);--btnCBgHov:linear-gradient(180deg, #ffffff73, #ffffff1f);--btnCSize:44px;--btnColor:#333;--btnColorHov:#000;--btnPadding:12px 22px;--btnRadius:22px;--btnShadow:inset 0 1px 2px #ffffff80, inset 0 -1px 2px #0000000d, inset 0 0 0 1px #ffffff1f;--btnShadowAct:inset 0 0 3px #000000a6, inset 0 0 0 1px #0000000d;--btnShadowHov:inset 0 0 6px #00000050, inset 0 0 0 1px #0000000d;--btnTransformAct:scale(.97);--btnTransition:all .3s cubic-bezier(.4, 0, .2, 1);--btnTransitionAct:all .3s cubic-bezier(.4, 0, .2, 1)}.Ing{position:relative}.Ing:before{background:var(--ingSvg) 50% 50% / 64px no-repeat;content:"";cursor:wait;z-index:999;position:absolute;inset:0}:not(form).Ing{width:64px;height:64px;display:flex}form.Ing:before{background-color:#fff6}:root,:host{--ingSvg:var(---oloHJiPWtJPJs8g_0WIaA)}.Card{color:#1d1d1f;cursor:pointer;text-align:left;background:linear-gradient(#ffffffb3 0,#f5f5f74d 100%);border:1px solid #00000014;border-radius:12px;flex-direction:column;gap:4px;width:100%;padding:14px 40px 14px 18px;font-size:14px;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s,font-variation-settings .25s;display:flex;position:relative;box-shadow:0 4px 12px #00000004,0 1px 2px #00000003,inset 0 1px #fff9}.Card>h2{color:#555;margin:0;font-size:15px;font-weight:400}.Card:hover{background:linear-gradient(#ffffffd9 0,#f5f5f780 100%);border-color:#0000002e;transform:translateY(-1px);box-shadow:0 6px 16px #0000000d,0 2px 4px #00000005}.Card:hover:after{opacity:.6;transform:translateY(-50%)translate(2px)}.Card:hover>i{color:#444}:is(.Card.H,.Card:hover)>h2{color:#111;font-variation-settings:"wght" 400;font-weight:400}.Card.H,.Card:active{color:#0071e3;background:linear-gradient(#0071e314 0,#0071e308 100%);border-color:#0071e340;box-shadow:inset 0 1.5px 3px #0071e30a,0 2px 4px #0071e303}:is(.Card.H,.Card:active)>h2{color:#0071e3}:is(.Card.H,.Card:active)>i{color:#0071e3cc}:is(.Card.H,.Card:active):after{opacity:1;transform:translateY(-50%)translate(4px)}.Card:after{background:var(--cardArrowSvg) center / contain no-repeat;content:"";opacity:0;width:16px;height:16px;transition:opacity .25s,transform .25s;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.Card>i{color:#86868b;font-size:12px;font-style:normal;overflow:hidden}:root,:host{--cardArrowSvg:var(--IU1Kl0BI4_DFddTPAOraZQ)}.CardLi{flex-wrap:wrap;gap:12px;display:flex}.CardLi>.Card{flex:200px}.O{color:var(--oColor);font-size:var(--oSize);align-items:center;gap:12px;font-weight:600;display:flex}.O:before{border:3px solid var(--oCircleColor);box-sizing:border-box;content:"";border-radius:50%;flex-shrink:0;width:12px;height:12px;margin-bottom:-1px;display:inline-block}c-webc-ls{flex-direction:column;width:100%;display:none}c-webc-ls>h2,c-webc-ls>b{margin-bottom:24px}c-webc-ls>b{box-sizing:border-box;width:100%;display:block}body{margin:0;overflow:hidden}c-webc-index{display:none}c-webc-index>c-vs>c-sandbox{width:100%;margin:auto}.O{color:var(--oColor);font-size:var(--oSize);align-items:center;gap:12px;font-weight:600;display:flex}.O:before{border:3px solid var(--oCircleColor);box-sizing:border-box;content:"";border-radius:50%;flex-shrink:0;width:12px;height:12px;margin-bottom:-1px;display:inline-block}:root,:host{--oCircleColor:#0071e3;--oColor:#1d1d1f;--oSize:20px}c-webc-index{width:100%;margin:auto}c-webc-index [part=main]{box-sizing:border-box;flex-direction:column;width:100%;max-width:1000px;height:100dvh;margin:0 auto;display:flex}.webc.demo>header{text-align:center;margin-bottom:24px}.webc.demo>header h1{color:#1d1d1f;letter-spacing:-1px;margin:0 0 12px;font-size:36px;font-weight:700}.webc.demo>header p{color:#86868b;margin:0;font-size:16px;font-weight:400}.webc.demo>h2,.webc.demo>b{margin-bottom:24px}c-sandbox::part(err){color:#c53030;white-space:pre-wrap;word-break:break-all;background-color:#fff5f5;border:1px solid #feb2b2;border-radius:16px;max-width:600px;margin:32px auto;padding:24px;font-family:monospace;font-size:14px}