.toggle{--size:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;width:var(--size);height:var(--size);box-shadow:inset calc(var(--size) * .33) calc(var(--size) * -.25) 0;border-radius:999px;transition:all .5s}.toggle:checked{--ray-size:calc(var(--size) * -0.4);--offset-orthogonal:calc(var(--size) * 0.65);--offset-diagonal:calc(var(--size) * 0.45);transform:scale(.75);color:#fa0;box-shadow:inset 0 0 0 var(--size),calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),var(--offset-orthogonal) 0 0 var(--ray-size),0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),0 var(--offset-orthogonal) 0 var(--ray-size),calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size)}.title,.toggle{z-index:1}.title{cursor:pointer;display:block;transition:color .5s}