::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}::-webkit-scrollbar-thumb{background:#0000004d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#00000080}body{font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);margin:0;padding:0;background-image:url(/assets/pexels-mdsnmdsnmdsn-1831234-BSK7Bm0l.jpg);background-size:cover;transition:background .3s,color .3s}body.dark-mode{color:#f0f0f0;background-image:url(/assets/bright-light-black-background-B7pLZiwH.jpg);background-size:cover}.dark-mode .side-bar{background-color:#1e1e1eb2}.dark-mode .sidebar-item{color:#f0f0f0}.dark-mode .sidebar-item:hover{background:#ffffff1a;color:#8ad8f1}.dark-mode .component-gallery{background-color:#1e1e1e}.dark-mode .preview-component{background:#282c34}.main-container{display:flex;border-radius:2.5rem;align-items:flex-start}.side-bar{position:sticky;top:0;width:25%;background-color:#f4f4f499;padding:60px 20px 20px;font-family:Space Mono,monospace;border-top-left-radius:2.5rem;border-bottom-left-radius:2.5rem;min-height:100vh}.side-bar-content{overflow-y:auto}.sidebar-category{padding-left:50px;font-size:13px;font-weight:700}.sidebar-item{display:block;width:100%;padding:10px;background:none;border:none;text-align:left;font-size:16px;cursor:pointer;transition:all .3s ease;color:#333;border-radius:.3em;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.sidebar-item:hover{background:#0000001a;color:#5c8d9e}.sidebar-toggle-btn{display:none}.component-gallery{background:#add8e6;padding:40px;display:flex;flex-direction:column;gap:20px;width:100%;border-top-right-radius:2.5rem;border-bottom-right-radius:2.5rem;min-height:100vh}.preview-component{display:flex;background-color:#ffffff80;padding:40px;border-radius:.3em;justify-content:center}.preview-code.light{background-color:#ffffff80!important}.header{display:flex;height:80px;justify-content:center;align-items:center;gap:20px;font-size:28px;font-weight:700;text-align:center;font-family:Dancing Script,cursive}.footer{text-align:center;align-content:center;font-weight:500;height:120px;bottom:0}.theme-toggle{position:relative;display:inline-block;width:50px;height:26px}.theme-toggle input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#add8e6;border-radius:999px;transition:.2s}.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.2s}.theme-toggle input:checked+.slider{background-color:#282c34}.theme-toggle input:checked+.slider:before{transform:translate(24px)}.card-container{display:flex;justify-content:center;gap:20px;margin-top:20px;text-align:center}.card{background:#fff;padding:20px;width:250px;box-shadow:0 4px 6px #0000001a;border-radius:10px}.card h2{font-size:20px;color:#333}.card p{color:#666}.btn{background:linear-gradient(45deg,#ff416c,#ff4b2b);color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:16px;transition:transform .2s,box-shadow .2s}.btn:hover{transform:scale(1.1);box-shadow:0 4px 15px #ff416c66}.animated-box{width:150px;height:150px;background:linear-gradient(45deg,#ff416c,#ff4b2b);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:transform .5s ease-in-out}.animated-box:hover{transform:rotate(360deg) scale(1.1)}.tooltip-container{position:relative;display:inline-block;cursor:pointer}.tooltip-text{visibility:hidden;width:120px;background-color:#000;color:#fff;text-align:center;border-radius:5px;padding:5px;position:absolute;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;padding:20px;border-radius:10px;text-align:center;position:relative}.animated-background{position:relative;width:400px;height:300px;overflow:hidden;background:linear-gradient(45deg,#ff416c,#ff4b2b);border-radius:10px;display:flex;justify-content:center;align-items:center}.bubble{position:absolute;bottom:-50px;width:40px;height:40px;background:#fff3;border-radius:50%;animation:bubble-animation 8s infinite ease-in-out}.bubble:nth-child(1){left:10%;width:30px;height:30px;animation-duration:6s}.bubble:nth-child(2){left:30%;width:50px;height:50px;animation-duration:7s}.bubble:nth-child(3){left:50%;width:25px;height:25px;animation-duration:5s}.bubble:nth-child(4){left:70%;width:40px;height:40px;animation-duration:9s}.bubble:nth-child(5){left:90%;width:35px;height:35px;animation-duration:8s}@keyframes bubble-animation{0%{transform:translateY(0);opacity:.5}50%{opacity:1}to{transform:translateY(-450%);opacity:0}}@media (max-width: 768px){.main-container{flex-direction:column;overflow-x:hidden;border-radius:0}.side-bar{position:fixed;top:0;left:0;height:100vh;width:80%;background-color:#f4f4f4f2;z-index:1000;transform:translate(-100%);transition:transform .3s ease-in-out;border-radius:0}.side-bar.open{transform:translate(0)}.component-gallery{width:100vw;padding:20px;box-sizing:border-box;border-radius:0}.sidebar-toggle-btn{position:fixed;bottom:20px;right:20px;background:linear-gradient(45deg,#ff416c,#ff4b2b);color:#fff;border:none;border-radius:50%;width:60px;height:60px;font-size:28px;font-family:Dancing Script,cursive;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px #0003;z-index:1100;cursor:pointer}.sidebar-category{padding-left:10px;font-size:12px}.sidebar-item{font-size:14px;padding:8px}.preview-component{padding:20px;flex-direction:column;align-items:center}.header{flex-direction:column;font-size:22px;height:auto;padding:10px;gap:10px}.footer{font-size:14px;height:auto;padding:20px 10px}.card-container{flex-direction:column;align-items:center}.card{width:90%;max-width:300px}.animated-background{width:100%;height:250px}.btn{width:100%;font-size:14px;padding:10px 16px}.modal-content{width:90%}.tooltip-text{width:100px;font-size:12px}.theme-toggle{width:40px;height:22px}.slider:before{width:16px;height:16px;left:3px;bottom:3px}.theme-toggle input:checked+.slider:before{transform:translate(18px)}.preview-code{font-size:12px!important;overflow-x:auto}.dark-mode .side-bar{background-color:#1e1e1ef6}}