body{align-items:center;display:flex;height:100vh;justify-content:center;margin:0;transition:background-color .3s,color .3s}@media (prefers-color-scheme:light){body:not(.light):not(.dark){background-color:#fff;color:#000}}@media (prefers-color-scheme:dark){body:not(.light):not(.dark){background-color:#000;color:#fff}}body.light{background-color:#fff;color:#000}body.dark{background-color:#000;color:#fff}h1{font-size:clamp(40px,7vw,64px);letter-spacing:.1em}.Theme-Color{color:#0078ff}:root{--button-width:90px;--button-height:40px}.toggle-button{align-items:center;background-color:#333;border:none;border-radius:calc(var(--button-height)/2);bottom:20px;box-shadow:0 4px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;height:var(--button-height);justify-content:center;outline:none;position:fixed;right:20px;transition:background-color .3s ease;width:var(--button-width);-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}.toggle-button:focus{outline:none}.status-btn{align-items:center;background-color:transparent;border-radius:50%;box-shadow:inset -6px -4px 0 #0078ff;display:flex;height:calc(var(--button-height)/2.5);justify-content:center;left:75%;transform:translate(-50%,-50%);width:calc(var(--button-height)/2.5)}.status-btn,.status-btn:after{position:absolute;top:50%;transition:all .4s linear}.status-btn:after{color:#fff;content:"夜间";font-size:calc(var(--button-height)/2.5);font-weight:700;letter-spacing:4px;line-height:1;right:100%;transform:translate(-2px,-50%);white-space:nowrap}.toggle-button.active{background-color:#dfdfdf}.toggle-button.active .status-btn{box-shadow:inset calc(var(--button-height)/2.5*-1) calc(var(--button-height)/2.5*-1) 0 #ffdc00}.toggle-button.active .status-btn:after{color:#000;content:"日间"}