*{box-sizing:border-box;margin:0;padding:0}body{background-color:#1a1a1a;color:#e5e7eb;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.demo-container{display:flex;flex-direction:column;align-items:center;gap:24px}.toggle-switch{background:none;border:none;cursor:pointer;padding:0;position:relative;outline:none;-webkit-tap-highlight-color:transparent;width:92px;height:46px;border-radius:23px;transition:box-shadow .2s}.toggle-switch:focus-visible{box-shadow:0 0 0 3px #10b98166}.toggle-track{display:block;width:100%;height:100%;background-color:#3f3f46;border-radius:999px;position:relative;transition:background-color .4s cubic-bezier(.4,0,.2,1) .08s,box-shadow .4s cubic-bezier(.4,0,.2,1) .08s;box-shadow:inset 0 1px 2px #0006,inset 0 3px 6px #0000004d,0 1px 1px #ffffff0d}.toggle-thumb{display:block;width:38px;height:38px;background:linear-gradient(145deg,#f3f4f6,#d1d5db);border-radius:50%;position:absolute;top:4px;left:4px;z-index:2;box-shadow:0 4px 8px #00000073,0 2px 4px #0000004d,inset 0 1px #fffc;transition:transform .45s cubic-bezier(.4,.1,.2,1),width .2s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}.toggle-switch[aria-checked=true] .toggle-track{background-color:#059669;box-shadow:inset 0 1px 2px #0003,inset 0 2px 4px #0000001a,0 0 8px #05966940}.toggle-switch[aria-checked=true] .toggle-thumb{transform:translate(46px);box-shadow:0 4px 8px #00000059,0 2px 4px #00000040,inset 0 1px #fffc}.toggle-switch:active .toggle-thumb,.toggle-switch.is-pressed .toggle-thumb{width:42px;box-shadow:0 2px 4px #0006,0 1px 2px #0003,inset 0 1px #fffc}.toggle-switch[aria-checked=true]:active .toggle-thumb,.toggle-switch[aria-checked=true].is-pressed .toggle-thumb{transform:translate(42px)}.status-readout{font-size:.95rem;letter-spacing:.05em;color:#a1a1aa;font-weight:500;text-transform:uppercase;transition:color .3s}.toggle-switch[aria-checked=true]+.status-readout{color:#34d399;text-shadow:0 0 12px rgba(52,211,153,.2)}