:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5}.app{max-width:800px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:40px}.header h1{color:#1a1a1a;margin-bottom:10px;font-size:2.5rem}.header p{color:#666;font-size:1.1rem}.main{flex-direction:column;gap:30px;display:flex}.section{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 4px #0000001a}.section h2{color:#1a1a1a;border-bottom:2px solid #e0e0e0;margin-bottom:16px;padding-bottom:8px;font-size:1.5rem}.component-group{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.button{color:#333;cursor:pointer;background-color:#e0e0e0;border:none;border-radius:4px;padding:8px 16px;font-size:14px;transition:background-color .2s,transform .1s}.button:hover{background-color:#d0d0d0}.button:active{transform:scale(.98)}.button:focus-visible{outline-offset:2px;outline:2px solid #007bff}.button-primary{color:#fff;background-color:#007bff}.button-primary:hover{background-color:#0056b3}.button-secondary{color:#fff;background-color:#6c757d}.button-secondary:hover{background-color:#545b62}.button:disabled{color:#666;cursor:not-allowed;background-color:#ccc}.text-field{flex-direction:column;gap:4px;display:flex}.text-field label{color:#555;font-weight:500}.text-field input{border:1px solid #ccc;border-radius:4px;padding:8px 12px;font-size:14px}.text-field input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.checkbox{cursor:pointer;align-items:center;gap:8px;display:flex}.checkbox-box{border:2px solid #ccc;border-radius:3px;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .2s,border-color .2s;display:flex}.checkbox[data-selected] .checkbox-box{background-color:#007bff;border-color:#007bff}.checkbox[data-selected] .checkbox-box:after{content:"✓";color:#fff;font-size:12px}.checkbox:focus-visible .checkbox-box{outline-offset:2px;outline:2px solid #007bff}.switch{cursor:pointer;align-items:center;gap:8px;display:flex}.switch-track{background-color:#ccc;border-radius:12px;width:44px;height:24px;transition:background-color .2s;position:relative}.switch[data-selected] .switch-track{background-color:#007bff}.switch-thumb{background-color:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.switch[data-selected] .switch-thumb{transform:translate(20px)}.switch:focus-visible .switch-track{outline-offset:2px;outline:2px solid #007bff}.radio-group{flex-direction:column;gap:8px;display:flex}.radio-group label{color:#555;margin-bottom:8px;font-weight:500}.radio{cursor:pointer;align-items:center;gap:8px;display:flex}.radio-box{border:2px solid #ccc;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:border-color .2s;display:flex}.radio[data-selected] .radio-box{border-color:#007bff}.radio[data-selected] .radio-box:after{content:"";background-color:#007bff;border-radius:50%;width:10px;height:10px}.radio:focus-visible .radio-box{outline-offset:2px;outline:2px solid #007bff}.select{flex-direction:column;gap:4px;min-width:200px;display:flex}.select label{color:#555;font-weight:500}.select-button{text-align:left;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:4px;padding:8px 12px}.select-button:focus-visible{outline-offset:2px;outline:2px solid #007bff}.select-popover{background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px #0000001a}.select-listbox{margin:0;padding:4px;list-style:none}.select-item{cursor:pointer;border-radius:4px;padding:8px 12px}.select-item:hover,.select-item[data-selected]{background-color:#e9ecef}.select-item[data-focused]{outline-offset:-2px;outline:2px solid #007bff}.slider{flex-direction:column;gap:8px;width:300px;display:flex}.slider label{color:#555;font-weight:500}.slider-track{background-color:#e0e0e0;border-radius:4px;height:8px;position:relative}.slider-fill{background-color:#007bff;border-radius:4px;height:100%}.slider-thumb{cursor:pointer;background-color:#007bff;border-radius:50%;width:20px;height:20px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px #0003}.slider-thumb:hover{transform:translate(-50%,-50%)scale(1.1)}.slider:focus-visible .slider-thumb{outline-offset:2px;outline:2px solid #007bff}.search-field{width:300px;position:relative}.search-field input{border:1px solid #ccc;border-radius:4px;width:100%;padding:8px 12px;font-size:14px}.search-field input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.progress-bar{width:300px}.progress-bar label{color:#555;margin-bottom:4px;font-weight:500;display:block}.progress-bar-track{background-color:#e0e0e0;border-radius:4px;height:8px;overflow:hidden}.progress-bar-fill{background-color:#007bff;border-radius:4px;height:100%;transition:width .3s}.tabs{width:100%}.tab-list{border-bottom:2px solid #e0e0e0;margin-bottom:16px;display:flex}.tab{cursor:pointer;color:#666;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:8px 16px;font-size:14px;transition:color .2s,border-color .2s}.tab:hover{color:#333}.tab[data-selected]{color:#007bff;border-bottom-color:#007bff}.tab:focus-visible{outline-offset:-2px;outline:2px solid #007bff}.tab-panel{background-color:#f8f9fa;border-radius:4px;padding:16px}.modal-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background-color:#fff;border-radius:8px;width:90%;max-width:400px;padding:24px;box-shadow:0 4px 6px #0000001a}.dialog-content h3{color:#1a1a1a;margin-bottom:16px}.dialog-content p{color:#666;margin-bottom:24px}.dialog-buttons{justify-content:flex-end;gap:8px;display:flex}.menu-popover{background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 6px #0000001a}.menu{margin:0;padding:4px;list-style:none}.menu-item{cursor:pointer;border-radius:4px;padding:8px 16px}.menu-item:hover{background-color:#e9ecef}.menu-item:focus-visible{outline-offset:-2px;outline:2px solid #007bff}.footer{text-align:center;color:#666;border-top:1px solid #e0e0e0;margin-top:40px;padding:20px}