:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--handle-margin: 2px;--light-bg: #e6e7ee;--light-shadow-dark: #676768;--light-shadow-light: #ffffff;--light-text: #676b79;--light-handle-bg: #f8f9fa;--light-handle-shadow-dark: #d1d9e6;--light-handle-shadow-light: #ffffff;--light-icon-color: #6c757d;--dark-bg: #3a3f53;--dark-shadow-dark: #111318;--dark-shadow-light: #4a5568;--dark-text: #eff0f2;--dark-handle-bg: #3a3f53;--dark-handle-shadow-dark: #1a202c;--dark-handle-shadow-light: #718096;--dark-icon-color: #e2e8f0}.neumorphic-toggle{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:9999px;transition:all .3s cubic-bezier(.4,0,.2,1);width:var(--toggle-width);height:var(--toggle-height);--inset-shadow-width: calc(var(--toggle-height) * .13);--inset-dark-shift: calc(var(--toggle-height) * .1);--border-spacing: calc(var(--toggle-height) * .08);--transition-spacing: calc(var(--toggle-height) * .062);--track-padding-vertical: calc(var(--toggle-height) * .05);--track-padding-horizontal: calc(var(--toggle-height) * .042);padding:var(--border-spacing)}.neumorphic-toggle:focus-visible{outline:2px solid #3182ce;outline-offset:2px}.neumorphic-toggle.disabled{opacity:.5;cursor:not-allowed}.neumorphic-toggle.small{width:var(--toggle-small-width);height:var(--toggle-small-height)}.neumorphic-toggle.medium{width:var(--toggle-medium-width);height:var(--toggle-medium-height)}.neumorphic-toggle.large{width:var(--toggle-large-width);height:var(--toggle-large-height)}.toggle-track-container{position:relative;width:100%;height:100%;border-radius:9999px}.toggle-track-container:before{content:"";position:absolute;inset:0;border-radius:inherit;filter:blur(1px);opacity:.8;z-index:0}.neumorphic-toggle.off .toggle-track-container:before{background:linear-gradient(180deg,#0000003d,#fffc)}.neumorphic-toggle.on .toggle-track-container:before{background:linear-gradient(180deg,#00000080,#ffffff2e)}.toggle-track{position:absolute;top:var(--border-spacing);left:var(--border-spacing);width:calc(100% - 2 * (var(--track-padding-horizontal) + var(--border-spacing)));height:calc(100% - 2 * (var(--track-padding-vertical) + var(--border-spacing)));border-radius:9999px;padding:var(--track-padding-vertical) var(--track-padding-horizontal);overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1}.neumorphic-toggle.off .toggle-track{background:var(--light-bg);position:relative;box-shadow:inset 0 var(--border-spacing) var(--inset-shadow-width) var(--light-shadow-dark)}.neumorphic-toggle.on .toggle-track{background:var(--dark-bg);position:relative;box-shadow:inset 0 var(--inset-dark-shift) var(--inset-shadow-width) var(--dark-shadow-dark)}.toggle-handle{position:absolute;top:0;left:var(--handle-left-position, 0);margin:var(--handle-margin);height:calc(100% - 2 * var(--handle-margin));border-radius:50%;display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);aspect-ratio:1;z-index:2}.neumorphic-toggle.off .toggle-handle{--handle-left-position: 0;background:var(--light-handle-bg);position:relative;box-shadow:-2px 4px 8px var(--light-shadow-dark)}.neumorphic-toggle.off .toggle-handle:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--transition-spacing);background:linear-gradient(0deg,#0000003d,#fffc);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:.8;filter:blur(4px)}.neumorphic-toggle.on .toggle-handle{--handle-left-position: calc(100% - .9 * var(--toggle-height));background:var(--dark-handle-bg);position:relative;box-shadow:2px 4px 8px var(--dark-shadow-dark)}.neumorphic-toggle.on .toggle-handle:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--transition-spacing);background:linear-gradient(0deg,#00000080,#ffffff2e);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:.85;filter:blur(.11px)}.toggle-icon{width:60%;height:60%;display:flex;align-items:center;justify-content:center}.toggle-icon svg{width:100%;height:100%;transition:all .3s cubic-bezier(.4,0,.2,1)}.neumorphic-toggle.off .toggle-icon{color:var(--light-icon-color)}.neumorphic-toggle.on .toggle-icon{color:var(--dark-icon-color)}.toggle-labels{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 calc(var(--toggle-height) * .33);pointer-events:none;font-weight:700;letter-spacing:.03em;line-height:.9em;z-index:1;font-size:calc(var(--toggle-height) * .25)}.label-left,.label-right{transition:opacity .1s cubic-bezier(.4,0,1,1),color .5s cubic-bezier(.4,0,.2,1)}.neumorphic-toggle.off .label-left{color:var(--light-text);opacity:0}.neumorphic-toggle.off .label-right{color:var(--light-text);opacity:.8}.neumorphic-toggle.on .label-left{color:var(--dark-text);opacity:.6}.neumorphic-toggle.on .label-right{color:var(--dark-text);opacity:0}.neumorphic-toggle:not(.disabled):hover .toggle-handle{transform:scale(1.05)}.neumorphic-toggle:not(.disabled):active .toggle-handle{transform:scale(.95)}body{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}.app{max-width:1200px;margin:0 auto;padding:2rem;text-align:center}.app-header{margin-bottom:3rem}.app-header h1{font-size:3rem;color:#333;margin-bottom:.5rem}.app-header p{font-size:1.2rem;color:#666;margin:0}.app-main{display:flex;flex-direction:column;gap:3rem}.demo-section{background:#f8f9fa;border-radius:12px;padding:2rem;border:1px solid #e9ecef}.demo-section h2{margin-top:0;margin-bottom:.5rem;color:#333}.demo-section>p{color:#666;margin-bottom:2rem}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.demo-item{background:#fff;border-radius:8px;padding:1.5rem;border:1px solid #e9ecef;display:flex;flex-direction:column;align-items:center;gap:1rem}.demo-item h3{margin:0;color:#333;font-size:1.1rem}.demo-item p{margin:0;color:#666;font-size:.9rem}.usage-section{background:#2d3748;border-radius:12px;padding:2rem;text-align:left}.usage-section h2{color:#fff;margin-top:0;margin-bottom:1rem}.usage-section pre{background:#1a202c;border-radius:8px;padding:1rem;overflow-x:auto;margin:0}.usage-section code{color:#e2e8f0;font-family:Fira Code,Monaco,Consolas,monospace;font-size:.9rem;line-height:1.5}@media (max-width: 768px){.app{padding:1rem}.demo-grid{grid-template-columns:1fr}.app-header h1{font-size:2rem}}