.lightSwitch{cursor:pointer;font-size:.8em;margin-bottom:1em}html,body{margin:0;padding:0}.main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:40px;transition:background .4s,color .4s}.main.light{background:#fff;color:#000}.main.dark{background:#000;color:#fff}.qrcode{width:350px;height:350px}.qrcode path:first-child{fill:transparent}h1{font-size:2em;font-family:Verdana,sans-serif}input{min-width:350px;padding:.4em;font-size:1.5em;font-family:Verdana,sans-serif}.modeButton{padding:.7em 2em;border:none;border-radius:6px;font-size:1.1em;font-family:Verdana,sans-serif;cursor:pointer;transition:background .4s,color .4s,filter .2s;background:#eee;color:#222}.light .modeButton{background:#222;color:#fff}.modeButton:hover{filter:brightness(.95)}.theme-switch{width:60px;height:32px;display:flex;align-items:center;cursor:pointer;margin-bottom:1.5em}.switch-track{width:100%;height:100%;background:#333;border-radius:16px;position:relative;transition:background .4s}.light .switch-track{background:#ddd}.switch-knob{position:absolute;top:2px;left:2px;width:28px;height:28px;background:#222;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:left .4s,background .4s}.switch-knob svg{transition:opacity .4s}.switch-knob.light{left:30px;background:#fff}.modeToggle{display:none}.icon{display:flex;align-items:center;justify-content:center}.sun,.moon{transition:transform .4s,opacity .4s;width:32px;height:32px}