.depth-btn{letter-spacing:.01em;color:#fff;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;border:none;border-radius:999px;justify-content:center;align-items:center;height:44px;padding:0 22px;font:500 15px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;transition:filter .2s,box-shadow .2s;display:inline-flex;position:relative;overflow:hidden}.depth-label{z-index:2;align-items:center;display:inline-flex;position:relative}.depth-btn.depth-icon{border-radius:14px;width:44px;padding:0}.depth-btn.depth-toggle{cursor:pointer;width:76px;padding:0}.depth-knob{z-index:3;background:radial-gradient(120% 120% at 50% 22%, rgba(255, 255, 255, var(--knob-hi,.55)), #fff0 55%), radial-gradient(120% 120% at 50% 100%, rgba(0, 0, 0, var(--knob-lo,.22)), #0000 55%), var(--knob,#fff);width:30px;height:30px;box-shadow:0 1px 2px #00000059, 0 2px 5px #00000038, inset 0 1px 1px rgba(255, 255, 255, var(--knob-hi,.5)), inset 0 0 0 1px #0000000f;border-radius:999px;transition:transform .28s cubic-bezier(.22,1,.36,1);position:absolute;top:7px;left:7px}.depth-toggle[data-on=true] .depth-knob{transform:translate(32px)}.depth-toggle[data-on=false]{filter:saturate(.6)brightness(.94)}.depth-inset,.depth-satin,.depth-metal,.depth-glass{--knob:#2a2f3a;--knob-hi:.14;--knob-lo:.08}.depth-btn:before,.depth-btn:after{content:"";border-radius:inherit;z-index:1;pointer-events:none;position:absolute;inset:0}.depth-glossy{text-shadow:0 1px 2px #5a280080;background:linear-gradient(#ffb347 0%,#e06c1f 100%);overflow:hidden;box-shadow:inset 0 -1px 4.1px .5px #ffe0a08c,inset 0 0 4px #ffeac8,inset 0 -36px 14.2px -28px #b4501480,0 3px 8px #c8601e59}.depth-glossy:after{content:"";filter:blur(1px);opacity:.7;z-index:1;background:linear-gradient(#fff,#fff0);border-radius:500px;height:28px;transition:opacity .3s,top .3s;position:absolute;top:-5px;left:10px;right:10px}.depth-glossy:hover:after{opacity:.9;top:-3px}.depth-glow{color:#fdeaff;text-shadow:0 1px 2px #2800308c;background:linear-gradient(#2a0a45 0%,#a01fd0 100%);box-shadow:inset 0 -1.5px 2px #d67bff,inset 0 0 10px #b01ffb,inset 0 0 8px #b01ffb,0 2px 6px #8c14c859}.depth-glow:before{opacity:0;background:linear-gradient(#45108a 9%,#c31ffb 100%);transition:opacity .2s;box-shadow:inset 0 -.5px 1px #ff8cf0,inset 0 -1px 3px #ff8cf0,inset 0 -1.5px 5px #ff9ce8,inset 0 0 12px #d155ff,inset 0 0 10px #d155ff}.depth-glow:hover:before{opacity:1}.depth-metal{--pointer-x:50%;color:#1c2230;text-shadow:0 1px #ffffff8c;background:repeating-linear-gradient(90deg,#ffffff0d 0,#0000000a 1px,#ffffff0d 2px),linear-gradient(#f4f6f9 0%,#c3cad6 48%,#aab2c0 52%,#d3d9e2 100%);overflow:hidden;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px 1px #1e263859,inset 0 0 0 1px #ffffff40,0 3px 8px #1e263847}.depth-metal:after{opacity:.85;background:radial-gradient(120% 140% at var(--pointer-x,50%) -20%, #ffffffd9 0%, #ffffff40 18%, #fff0 42%);transition:opacity .3s,background .12s linear}.depth-metal:hover:after{opacity:1}.depth-layered{background:linear-gradient(#ffffff1a 0%,#fff0 40%,#0000001f 100%),#0000008c;overflow:hidden}.depth-layered:before{opacity:.1;background:linear-gradient(#fff 0%,#fff0 60%);transition:opacity .2s}.depth-layered:hover:before{opacity:.15}.depth-layered:active:before{opacity:0;transition-duration:50ms}.depth-layered:after{opacity:1;box-shadow:inset 0 0 0 1px #ffffff29,inset 0 1px #ffffff24}.depth-inset{color:#5b6473;text-shadow:0 1px #ffffffb3;background:linear-gradient(#dfe3ea 0%,#eef1f6 100%);box-shadow:inset 0 3px 4px -1px #3c465a80,inset 0 6px 10px -6px #3c465a73,inset 0 -2px 2px -1px #fffffff2,inset 0 0 0 1px #3c465a1f,0 1px #ffffffe6}.depth-inset:hover{transform:none;box-shadow:inset 0 4px 6px -1px #3c465a94,inset 0 8px 12px -6px #3c465a80,inset 0 -2px 2px -1px #fff,inset 0 0 0 1px #3c465a29,0 1px #ffffffe6}.depth-inset:active{box-shadow:inset 0 1px 2px #3c465a66,inset 0 0 0 1px #3c465a1f}.depth-glass{color:#fff;text-shadow:0 1px 3px #00000073;-webkit-backdrop-filter:blur(2px)saturate(1.5)brightness(1.05);backdrop-filter:blur(2px)saturate(1.5)brightness(1.05);background:linear-gradient(135deg,#ffffff1f 0%,#ffffff0d 50%,#ffffff1f 100%);box-shadow:0 8px 32px #1f268726,inset 0 0 0 1px #ffffff2e,0 4px 24px #0000000f,inset 0 1px 1px #fff6}@supports ((-webkit-backdrop-filter:url(#liquid-glass-filter)) or (backdrop-filter:url(#liquid-glass-filter))){.depth-glass{-webkit-backdrop-filter:url(#liquid-glass-filter)saturate(1.5)brightness(1.05);backdrop-filter:url(#liquid-glass-filter)saturate(1.5)brightness(1.05)}}.depth-glass:before{opacity:1;-webkit-mask-composite:xor;background:linear-gradient(#ffffff80 0%,#ffffff1a 45%,#0000 100%);padding:1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.depth-glass:after{opacity:.8;border-radius:inherit;background:linear-gradient(90deg,#0000 10%,#fff9 50%,#0000 90%) top/100% 1px no-repeat,linear-gradient(135deg,#ffffff4d 0%,#0000 50%,#ffffff0d 100%);inset:2px}.depth-glass:hover{box-shadow:0 12px 40px #1f268733,inset 0 0 0 1px #ffffff40,0 6px 30px #00000014,inset 0 2px 2px #ffffff80}.depth-foil{--foil-shift:0%;--glare-x:50%;--glare-y:50%;--pointer-x:50%;--pointer-y:50%;--shine-angle:135deg;color:#14202e;text-shadow:0 1px #ffffff80;background:linear-gradient(135deg,#eee 0%,#dcdcdc 40%,#c9c9c9 72%,#e8e8e8 100%);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff80,inset 0 1px 1px #ffffffb3,inset 0 -2px 4px #3c465a4d,0 3px 10px #1e26384d}.depth-foil-l{z-index:1;pointer-events:none;background-repeat:no-repeat;position:absolute;inset:-48%}.depth-foil-base{filter:saturate(1.3)contrast(1.25);background:linear-gradient(112deg,#0000 22%,#00dcff66 30%,#50ffbe57 36%,#beff5042 41%,#ffe6463d 47%,#ff46b45c 55%,#965aff5c 63%,#3c78ff4d 70%,#0000 80%) 0 0/240% 100%;animation:7s ease-in-out infinite alternate depth-foil-drift}.depth-foil-film{filter:blur(.4px)saturate(1.4);mix-blend-mode:screen;opacity:.7;background:radial-gradient(at 20% 30%,#ff46b457 0%,#0000 48%) 0 0/150% 150%,radial-gradient(at 70% 20%,#00dcff57 0%,#0000 52%) 0 0/160% 160%,radial-gradient(at 78% 74%,#50ffbe57 0%,#0000 56%) 0 0/145% 145%;animation:9s ease-in-out infinite alternate-reverse depth-foil-drift}@keyframes depth-foil-drift{0%{background-position:0%}to{background-position:100%}}@media (prefers-reduced-motion:reduce){.depth-foil-base,.depth-foil-film{animation:none}}.depth-foil-pearl{z-index:2;background:radial-gradient(120% 120% at var(--glare-x,50%) var(--glare-y,50%), #e6eef599 0%, #cdd9e233 26%, transparent 58%);mix-blend-mode:soft-light;opacity:.95;transition:background .12s linear;inset:0}.depth-foil-shine{z-index:4;background:linear-gradient(var(--shine-angle,120deg), transparent 30%, #e2ebf280 48%, #007cff1a 58%, #ff00931a 66%, transparent 82%);background-size:200% 100%;background-position:calc(var(--pointer-x,50%)) center;filter:blur(.25px);mix-blend-mode:screen;opacity:.6;transition:background-position .12s linear;inset:0}.depth-foil-glare{z-index:5;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%), #e6eef58c 0%, #cddae429 10%, transparent 38%);mix-blend-mode:screen;opacity:.5;transition:background .12s linear;inset:0}@media (prefers-reduced-motion:reduce){.depth-foil-l{transition:none}}.depth-neon{--neon:#35f0ff;color:#eafeff;background:linear-gradient(180deg, #35f0ff00 55%, color-mix(in srgb, var(--neon) 12%, transparent) 100%), #0b1016;text-shadow:0 0 5px color-mix(in srgb, var(--neon) 55%, transparent)}.depth-neon:before{opacity:1;box-shadow:inset 0 0 0 1px var(--neon), inset 0 0 2px 0 color-mix(in srgb, var(--neon) 45%, transparent);transition:box-shadow .25s}.depth-neon:hover:before{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--neon) 55%, #fff), inset 0 0 4px 0 color-mix(in srgb, var(--neon) 60%, transparent), 0 0 4px -2px color-mix(in srgb, var(--neon) 50%, transparent)}.depth-duotone{color:#fff;text-shadow:0 1px #8c320a99;background:linear-gradient(#ff8a4b 0%,#f2612f 100%);transition:transform .12s cubic-bezier(.22,1,.36,1),box-shadow .12s;box-shadow:inset 0 1px #ffdcbee6,0 1px #c9481c,0 2px #c9481c,0 3px #b23f18,0 4px #b23f18,0 5px #9c3714,0 6px #9c3714,0 8px 8px #78280a59}.depth-duotone:hover{transform:translateY(-1px)}.depth-duotone:active{transform:translateY(5px);box-shadow:inset 0 1px #ffdcbee6,0 1px #b23f18,0 2px 4px #78280a59}.depth-satin{color:#6a4a86;text-shadow:0 1px 1px #fff9;background:radial-gradient(120% 140% at 50% 38%,#ffffff80 0%,#fff0 55%),radial-gradient(130% 130% at 50% 100%,#9678c838 0%,#9678c800 60%),#e7dcfb;transition:filter .25s,transform .2s cubic-bezier(.22,1,.36,1);box-shadow:inset 0 0 0 1px #ffffff73,0 6px 18px -6px #a082d266}.depth-satin:hover{filter:brightness(1.03)}.depth-satin:active{box-shadow:inset 0 2px 6px #9678c866,inset 0 0 0 1px #fff6}