:root{--lightbg:#ffffff;--darkbg:#333333;--toggle-size:2.5rem;--icon-size:1.2rem;--sun-color:#ffcb6b;--moon-color:#626899;--highlight-color:#ffe7d1;--transition-duration:0.3s}.toggle-container{display:flex;justify-content:center;align-items:center}.toggle-circle{position:relative;width:var(--toggle-size);height:var(--toggle-size);background:var(--darkbg);border-radius:50%;cursor:pointer;transition:background-color var(--transition-duration)}.toggle-circle.light{background:var(--lightbg)}.toggle-circle.dark{background:var(--darkbg)}.toggle-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--icon-size);height:var(--icon-size);border-radius:50%;transition:all var(--transition-duration)}.toggle-icon.sun{background:var(--sun-color);box-shadow:0 0 0 .5rem var(--highlight-color)}.toggle-icon.moon{background:var(--moon-color);box-shadow:0 0 8px rgba(162,168,212,.5)}.toggle-circle:hover .toggle-icon{transform:translate(-50%,-50%) scale(1.2)}