@import"https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap";:root{--off-mid: #c84645;--off-deep: #b74042;--off-light: #df4646;--on-mid: #68cd44;--on-deep: #4db72d;--on-light: #75e644;--switch-scale: 1;--switch-cols: 1;--bg: #1a1a1a;--ctrl-bg: rgba(0, 0, 0, 0.65);--ctrl-text: rgba(255, 255, 255, 0.65);--ctrl-border: rgba(255, 255, 255, 0.14);--ctrl-hover: rgba(255, 255, 255, 0.11);--ctrl-active: rgba(255, 255, 255, 0.18);--ctrl-strong: #fff;--status-shadow: 0 0 1em rgba(0,0,0,0.8)}body.light{--bg: #e9ebff;--ctrl-bg: rgba(255, 255, 255, 0.82);--ctrl-text: rgba(0, 0, 0, 0.6);--ctrl-border: rgba(0, 0, 0, 0.15);--ctrl-hover: rgba(0, 0, 0, 0.07);--ctrl-active: rgba(0, 0, 0, 0.12);--ctrl-strong: #111;--status-shadow: 0 0 1em rgba(255,255,255,0.5)}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{font-size:10px}@media(max-width: 600px){html{font-size:6px}}body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);font-family:"Poppins",system-ui,sans-serif;overflow:hidden;transform-style:preserve-3d;perspective:1000px;transition:background .4s;padding-bottom:6rem}.scene-wrapper{transform:scale(var(--switch-scale));transform-origin:center center;transition:transform .3s;display:flex;align-items:center;justify-content:center}.scene{transform:skewY(-15deg);transform-style:preserve-3d;perspective:1000px}.switches-container{display:grid;grid-template-columns:repeat(var(--switch-cols), auto);gap:4rem 5rem;justify-items:center}.switch-card{position:relative;padding-bottom:9em}.switch{--width: 32em;position:relative;display:flex;width:var(--width);height:16em}.switch__checkbox{position:absolute;inset:0;width:100%;height:100%;appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;z-index:10}.switch__common{position:absolute;bottom:0;width:calc(var(--width)/2);background:var(--off-mid);pointer-events:none;transition:background .4s}.switch__common::after{content:"";position:absolute;top:-9.95em;left:0;width:100%;height:10em;background:var(--off-light);transform-origin:bottom;transform:skewX(45deg);z-index:-1;transition:background .4s}.switch__common::before{content:"";position:absolute;top:-9.95em;left:-9.95em;width:10em;height:100%;background:var(--off-deep);transform-origin:left;transform:skewY(45deg);z-index:-1;transition:background .4s}.switch .switch__common,.switch .switch__common::after,.switch .switch__common::before{transition:background .4s,height 0s}.switch__left{z-index:2;left:0;animation:sw-decrease .8s ease-in-out forwards}.switch__right{right:0;animation:sw-increase .8s ease-in-out forwards}.switch__checkbox:checked~.switch__common{background:var(--on-mid)}.switch__checkbox:checked~.switch__common::after{background:var(--on-light)}.switch__checkbox:checked~.switch__common::before{background:var(--on-deep)}.switch__checkbox:checked~.switch__left{animation:sw-checked-decrease .8s ease-in-out forwards}.switch__checkbox:checked~.switch__right{animation:sw-checked-increase .8s ease-in-out forwards}.switch__checkbox:checked~.switch__status .switch__status--off{opacity:0;transform:translateY(-10px) skewX(25deg)}.switch__checkbox:checked~.switch__status .switch__status--on{opacity:1;transform:translateY(0) skewX(25deg)}.switch__status{position:absolute;bottom:-6.5em;left:0;width:100%;text-align:center;pointer-events:none;z-index:5}.switch__status span{position:absolute;left:0;width:100%;font-size:5em;font-weight:600;text-transform:uppercase;letter-spacing:.04em;transition:opacity .4s,transform .4s}.switch__status--off{opacity:1;transform:skewX(25deg);color:var(--off-mid);text-shadow:var(--status-shadow)}.switch__status--on{opacity:0;transform:translateY(10px) skewX(25deg);color:var(--on-mid);text-shadow:var(--status-shadow)}.controls{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--ctrl-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--ctrl-border);transition:background .4s,border-color .4s;cursor:default}.controls__row{display:flex;align-items:center;gap:1.2rem;padding:1rem 2rem;flex-wrap:wrap}.controls__brand{display:flex;flex-direction:column;line-height:1.3;margin-right:.4rem}.controls__brand a{color:var(--ctrl-text);text-decoration:none;font-size:1rem;opacity:.55;transition:opacity .2s}.controls__brand a:hover{opacity:1}.controls__brand strong{color:var(--ctrl-strong);font-size:1.4rem;font-weight:600;letter-spacing:.04em}.ctrl-group{display:flex;gap:.4rem;align-items:center}.ctrl-group--right{margin-left:auto;gap:.8rem}.btn{padding:.5rem 1.2rem;border:1px solid var(--ctrl-border);background:rgba(0,0,0,0);color:var(--ctrl-text);border-radius:5px;cursor:pointer;font-size:1.2rem;font-family:inherit;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}.btn:hover{background:var(--ctrl-hover);color:var(--ctrl-strong)}.btn--icon{padding:.5rem .8rem;font-size:1.3rem;line-height:1}.count-btn--active{background:var(--ctrl-active);color:var(--ctrl-strong)}.theme-swatch{width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid rgba(0,0,0,0);background:linear-gradient(135deg, var(--swatch-off) 50%, var(--swatch-on) 50%);cursor:pointer;transition:transform .15s,border-color .15s;padding:0}.theme-swatch:hover{transform:scale(1.2)}.theme-swatch--active{border-color:var(--ctrl-strong);transform:scale(1.2)}.slider-wrap{display:flex;align-items:center;gap:.6rem;color:var(--ctrl-text);font-size:1.1rem}.size-slider{-webkit-appearance:none;appearance:none;width:8rem;height:3px;background:var(--ctrl-border);border-radius:2px;outline:none;cursor:pointer}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ctrl-strong);cursor:pointer}.size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ctrl-strong);border:none;cursor:pointer}.help-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);animation:fade-in .15s ease}.help-modal.hidden{display:none}.help-modal__box{background:#181818;border:1px solid hsla(0,0%,100%,.1);border-radius:10px;padding:2.8rem 3.2rem 2.4rem;min-width:28rem;position:relative}.help-modal__box h2{color:#fff;font-size:1.6rem;font-weight:600;margin-bottom:1.8rem;letter-spacing:.03em}.help-modal__box table{border-collapse:collapse;width:100%}.help-modal__box tr+tr td{padding-top:1rem}.help-modal__box td{color:hsla(0,0%,100%,.7);font-size:1.3rem;padding-right:2rem;vertical-align:middle}.help-modal__box td:first-child{white-space:nowrap}.help-modal__close{position:absolute;top:1.2rem;right:1.2rem;background:none;border:none;color:hsla(0,0%,100%,.4);font-size:1.6rem;cursor:pointer;line-height:1;padding:.2rem .5rem;border-radius:4px;transition:color .15s}.help-modal__close:hover{color:#fff}kbd{display:inline-block;padding:.15rem .5rem;border:1px solid hsla(0,0%,100%,.2);border-radius:4px;background:hsla(0,0%,100%,.06);font-size:1.15rem;font-family:monospace;color:hsla(0,0%,100%,.9);margin:0 .1rem}@keyframes sw-decrease{0%{height:3em}50%,100%{height:16em}69%{height:14em}}@keyframes sw-increase{0%{height:16em}50%,100%{height:3em}69%{height:5em}}@keyframes sw-checked-decrease{0%{height:16em}50%,100%{height:3em}69%{height:5em}}@keyframes sw-checked-increase{0%{height:3em}50%,100%{height:16em}69%{height:14em}}@keyframes fade-in{from{opacity:0}to{opacity:1}}