@layer app{.ld-toggle{--ld-w:52px;--ld-h:28px;--ld-pad:3px;--ld-knob:calc(var(--ld-h) - var(--ld-pad)*2);--ld-offset:calc(var(--ld-knob) + var(--ld-pad) + 4px);cursor:pointer}.ld-toggle .ld-track{width:var(--ld-w);height:var(--ld-h);border-radius:var(--ld-h);background:#5a638759;transition:background .2s;position:relative;box-shadow:inset 0 2px 6px #0000001f}.ld-toggle .ld-knob{top:var(--ld-pad);left:var(--ld-pad);width:var(--ld-knob);height:var(--ld-knob);will-change:transform;z-index:2;background:#fff;border-radius:50%;transition:transform .22s,background .2s,box-shadow .2s;position:absolute;box-shadow:0 5px 18px #00000026}.ld-toggle .ld-icon{pointer-events:none;opacity:.45;z-index:1;font-size:.95rem;transition:opacity .2s,filter .2s,color .2s;position:absolute;top:50%;transform:translateY(-50%)}.ld-toggle .ld-icon--sun{left:var(--ld-offset);color:#ffbb52}.ld-toggle .ld-icon--moon{right:var(--ld-offset);color:#cbd5ff}.ld-toggle:not(.is-dark) .ld-knob{transform:translate(0)}.ld-toggle:not(.is-dark) .ld-track{background:#000000ba}.ld-toggle:not(.is-dark) .ld-icon--sun{opacity:1;filter:drop-shadow(0 0 3px #ffae00e6)drop-shadow(0 0 10px #ffb700d9)drop-shadow(0 0 18px #ffc400a6)}.ld-toggle:not(.is-dark) .ld-icon--moon{opacity:.35;filter:none}.ld-toggle.is-dark .ld-knob{transform:translateX(calc(var(--ld-w) - var(--ld-knob) - var(--ld-pad)*2))}.ld-toggle.is-dark .ld-icon--moon{opacity:1;filter:drop-shadow(0 0 4px #cbd5ffe6)drop-shadow(0 0 10px #cbd5ff99);color:#e5e7ff}.ld-toggle.is-dark .ld-icon--sun{opacity:.3;filter:none}}