@import url(https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Comic+Neue:wght@400;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-color:#6c5ce7;--secondary-color:#fd79a8;--background-color:#f9f9f9;--text-color:#333;--border-radius:15px;--box-shadow:0 4px 8px #0000001a;--header-height:120px;--header-height-collapsed:70px;--transition-speed:0.3s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f9f9f9;background-color:var(--background-color);color:#333;color:var(--text-color);font-family:Comic Neue,Comic Sans MS,cursive}.App{min-height:100vh;text-align:center}.App,.App-header{display:flex;flex-direction:column}.App-header{align-items:center;background-color:#6c5ce7;background-color:var(--primary-color);box-shadow:0 4px 8px #0000001a;box-shadow:var(--box-shadow);color:#fff;height:120px;height:var(--header-height);padding:20px;position:-webkit-sticky;position:sticky;top:0;transition:all .3s ease;transition:all var(--transition-speed) ease;z-index:100}.App-header.collapsed{height:70px;height:var(--header-height-collapsed);padding:10px}.App-header.collapsed .app-logo{height:40px;margin-bottom:5px}.App-header.collapsed h1{font-size:1.8rem;margin:0}.app-logo{animation:scaleIn .5s ease-out;border-radius:10px;height:80px;margin-bottom:10px}.App-header h1,.app-logo{transition:all .3s ease;transition:all var(--transition-speed) ease}.App-header h1{animation:fadeIn .5s ease-in-out;font-family:Bubblegum Sans,cursive;font-size:2.5rem;margin:0}.App-main{flex:1 1;padding:20px}.App-main,.display-area{align-items:center;display:flex;flex-direction:column;gap:20px}.display-area{animation:slideInUp .5s ease-out;background-color:#fff;border-radius:15px;border-radius:var(--border-radius);box-shadow:0 4px 8px #0000001a;box-shadow:var(--box-shadow);max-width:600px;padding:30px;transition:all .3s ease;transition:all var(--transition-speed) ease;width:100%}.elements-row{margin:0 auto;max-width:900px;width:100%}.elements-container{background-color:#fff;border-radius:15px;border-radius:var(--border-radius);box-shadow:0 4px 8px #0000001a;box-shadow:var(--box-shadow);padding:20px;width:100%}.elements-container h2{color:#6c5ce7;color:var(--primary-color);font-family:Bubblegum Sans,cursive;margin-bottom:15px;text-align:center}.controls-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin:0 auto;max-width:900px;width:100%}.control-section{background-color:#fff;border-radius:15px;border-radius:var(--border-radius);box-shadow:0 4px 8px #0000001a;box-shadow:var(--box-shadow);padding:20px}.control-section h2{color:#6c5ce7;color:var(--primary-color);font-family:Bubblegum Sans,cursive;margin-bottom:15px}.options-container{flex-wrap:wrap;gap:10px}.option-button,.options-container{display:flex;justify-content:center}.option-button{align-items:center;background-color:#f0f0f0;border:2px solid #0000;border-radius:10px;cursor:pointer;height:60px;transition:all .3s ease;width:60px}.option-button.selected{border-color:#fd79a8;border-color:var(--secondary-color);box-shadow:0 0 10px #fd79a880}.option-button:hover:not(.selected){transform:scale(1.05)}.language-button{background-color:#f0f0f0;border:none;border-radius:20px;color:#333;color:var(--text-color);cursor:pointer;font-family:Comic Neue,Comic Sans MS,cursive;font-weight:700;padding:10px 15px;transition:all .3s ease}.language-button.selected{background-color:#6c5ce7;background-color:var(--primary-color);color:#fff}.language-button:hover:not(.selected){background-color:#e0e0e0}.App-footer{background-color:#6c5ce7;background-color:var(--primary-color);color:#fff;font-size:.9rem;padding:15px}.color-picker{margin-top:10px;width:100%}.color-picker h3{color:#fd79a8;color:var(--secondary-color);font-family:Bubblegum Sans,cursive;margin-bottom:10px}.elements-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));margin-top:15px;padding:10px}.element-button,.elements-grid{align-items:center;justify-content:center}.element-button{background-color:#f0f0f0;border:2px solid #0000;border-radius:10px;cursor:pointer;display:flex;height:80px;padding:5px;transform-origin:center;transition:all .3s ease;width:80px}.element-button.selected{animation:pulse 2s ease-in-out infinite;background-color:#fff5f8;border-color:#fd79a8;border-color:var(--secondary-color);box-shadow:0 0 10px #fd79a880}.element-button:hover:not(.selected){background-color:#f8f8f8;box-shadow:0 4px 12px #00000026;transform:scale(1.05)}.language-section{order:2}.elements-section{order:1}[dir=rtl]{text-align:right}@media (max-width:768px){.App-main{padding:10px}.controls-row{flex-direction:column}.control-section{width:100%}.elements-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.elements-container{padding:15px}.display-area{padding:20px}.App-header h1{font-size:2rem}.app-logo{height:60px}.elements-grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.element-button{height:70px;width:70px}}@media (min-width:992px){.controls{flex-direction:row;flex-wrap:wrap}.language-section{flex:1 1;min-width:300px}.elements-section{flex:2 1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-fadeIn{animation:fadeIn .5s ease-in-out}.animate-scaleIn{animation:scaleIn .5s ease-out}.animate-slideInUp{animation:slideInUp .5s ease-out}.animate-pulse{animation:pulse 1.5s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-rotate{animation:rotate 2s linear infinite}.transition-all{transition:all .3s ease}.transition-transform{transition:transform .3s ease}.transition-opacity{transition:opacity .3s ease}.hover-scale:hover{transform:scale(1.05)}.hover-brightness:hover{filter:brightness(1.1)}.active-pulse{animation:pulse 1.5s ease-in-out infinite}.element-display-with-navigation{align-items:center;display:flex;justify-content:center;margin:20px 0;position:relative;width:100%}.element-display-with-navigation .nav-button{align-items:center;background:#0000001a;border:2px solid #4a90e2;border-radius:50%;box-shadow:0 2px 8px #00000026;color:#4a90e2;cursor:pointer;display:flex;font-size:24px;height:50px;justify-content:center;margin:0 15px;position:relative;transition:all .2s ease;width:50px;z-index:10}.element-display-with-navigation .nav-button:hover{background:#4a90e2;box-shadow:0 4px 12px #0003;color:#fff;transform:scale(1.1)}.element-display-with-navigation .nav-button:active{box-shadow:0 1px 4px #0000001a;transform:scale(.95)}.element-display-with-navigation .nav-button:before{-webkit-font-smoothing:antialiased;display:inline-block;position:relative;text-rendering:auto}.element-display-with-navigation .element-wrapper{flex:1 1;margin:0 10px;max-width:80%}.playback-options{margin-bottom:20px}.playback-options .options-container{background-color:#4a90e21a;border-radius:10px;display:flex;flex-direction:column;gap:15px;margin-top:10px;padding:15px}.option-group{display:flex;flex-direction:column;gap:5px}.option-label{align-items:center;cursor:pointer;display:flex;font-size:1.1rem;font-weight:500}.option-checkbox{cursor:pointer;height:18px;margin-right:10px;width:18px}.option-description{color:#555;font-size:.85rem;font-style:italic;margin-left:28px}.play-interval-control{align-items:center;background-color:#ffffff80;border-radius:6px;display:flex;margin-top:5px;max-width:300px;padding:8px 12px;width:100%}.play-interval-control label{font-weight:500;margin-right:10px;min-width:120px}.play-interval-control input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#4a90e2,#9bc5f8);border-radius:5px;flex:1 1;height:6px;outline:none}.play-interval-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#4a90e2;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:18px;-webkit-transition:all .2s ease;transition:all .2s ease;width:18px}.play-interval-control input[type=range]::-webkit-slider-thumb:hover{background:#3a80d2;transform:scale(1.1)}.play-interval-control span{color:#4a90e2;font-weight:700;margin-left:10px;min-width:30px;text-align:center}.element-wrapper{align-items:center;display:flex;height:200px;justify-content:center;margin:20px auto;max-width:300px;overflow:hidden;position:relative;width:100%}.element{animation:scaleIn .4s ease-out;transition:all .3s ease}.element,.element-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.element-container{position:relative}.triangle{border-bottom:200px solid;border-left:100px solid #0000;border-right:100px solid #0000;height:0;width:0}.heart,.star,.triangle{transition:all .3s ease}.heart,.star{align-items:center;display:flex;font-size:10em;height:1em;justify-content:center;line-height:1;transform:scale(.5);transform-origin:center;width:1em}.color-sample{box-shadow:0 4px 8px #0003;transition:all .3s ease}.emoji{font-size:8em;height:1em;line-height:1;transform:scale(.6);transform-origin:center;-webkit-user-select:none;user-select:none;width:1em}.audio-button,.emoji{align-items:center;display:flex;justify-content:center;transition:all .3s ease}.audio-button{background-color:#ff9800;border:none;border-radius:50%;box-shadow:0 2px 4px #0003;color:#fff;cursor:pointer;font-size:18px;height:36px;margin-left:8px;overflow:hidden;padding:0;position:relative;width:36px}.audio-button:hover{background-color:#f57c00;box-shadow:0 4px 8px #0000004d;transform:scale(1.1)}.audio-button:hover:after{animation:pulse 1s infinite;background:#fff3;border-radius:50%;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.audio-button:active{background-color:#e65100;box-shadow:0 1px 2px #0003;transform:scale(.95)}[dir=rtl] .audio-button{margin-left:0;margin-right:8px}.audio-button.loading{animation:pulse 1.5s ease-in-out infinite;background-color:#ffc107}@keyframes wave{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}to{opacity:0;transform:scale(2)}}.audio-button:before{background-color:#ffffff4d;border-radius:50%;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transform:scale(0);width:100%}.audio-button.loading:before{animation:wave 1s infinite}.audio-error{animation:fadeIn .3s ease-in-out;background-color:#ffebeecc;border-radius:4px;color:#d32f2f;font-size:.8rem;margin-top:5px;max-width:200px;padding:5px;text-align:center}.language-labels{align-items:center;animation:fadeIn .5s ease-in-out;margin:15px 0}.labels-container,.language-labels{display:flex;flex-direction:column;width:100%}.labels-container{background-color:#ffffffb3;border-radius:15px;box-shadow:0 4px 15px #0000001a;gap:10px;max-width:300px;padding:10px}.label{align-items:center;animation:slideInUp .5s ease-out;animation-fill-mode:both;background-color:#f8f8f8;border-radius:15px;box-shadow:0 2px 5px #0000001a;display:flex;font-size:1.2rem;margin:5px 0;padding:8px 15px;transition:all .3s ease}.label:first-child{animation-delay:.1s}.label:nth-child(2){animation-delay:.2s}.label:nth-child(3){animation-delay:.3s}.label:hover{background-color:#fff;box-shadow:0 5px 15px #00000026;transform:translateY(-3px)}.rtl{direction:rtl;text-align:right}.language-tag{background-color:var(--primary-color);border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#fff;font-size:.7rem;font-weight:700;margin-right:10px;padding:4px 8px;transition:all .3s ease}.rtl .language-tag{margin-left:10px;margin-right:0}.language-label{flex-grow:1;font-family:Comic Sans MS,Bubblegum Sans,cursive;font-weight:500;transition:all .3s ease}.category-navigation{animation:fadeIn .5s ease-in-out;display:flex;flex-direction:column;gap:15px;margin-bottom:20px;width:100%}.categories-tabs{background-color:#fffc;border-radius:25px;box-shadow:0 2px 10px #0000001a;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:5px}.category-tab{animation:scaleIn .5s ease-out;background-color:#f0f0f0;border:none;border-radius:20px;color:#555;cursor:pointer;font-family:Comic Neue,Comic Sans MS,cursive;font-size:1rem;font-weight:700;overflow:hidden;padding:10px 20px;position:relative;transition:all .3s ease}.category-tab.active{animation:pulse 2s ease-in-out infinite;background-color:var(--primary-color);box-shadow:0 2px 5px #0003;color:#fff}.category-tab.active:after{animation:slideInLeft .3s ease-out;background-color:var(--secondary-color);bottom:0;content:"";height:3px;left:0;position:absolute;width:100%}@keyframes slideInLeft{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.category-tab:hover:not(.active){background-color:#e0e0e0;box-shadow:0 4px 8px #0000001a;transform:translateY(-3px)}.element-navigation{background-color:#fffc;border-radius:30px;box-shadow:0 2px 10px #0000001a;gap:15px;margin-top:10px;padding:10px}.element-navigation,.nav-button{align-items:center;display:flex;justify-content:center}.nav-button{background-color:var(--secondary-color);border:none;border-radius:50%;box-shadow:0 2px 5px #0003;color:#fff;cursor:pointer;font-size:1.2rem;height:40px;transition:all .3s ease;width:40px}.nav-button:hover{background-color:#e84393;transform:scale(1.1)}.nav-button:active{transform:scale(.95)}.current-element-name{background-color:#ffffffe6;border-radius:15px;box-shadow:0 2px 5px #0000001a;color:var(--primary-color);font-family:Bubblegum Sans,cursive;font-size:1.2rem;min-width:120px;padding:5px 15px;text-align:center;text-transform:capitalize;transition:all .3s ease}@media (max-width:768px){.categories-tabs{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}.category-tab{flex:0 0 auto;white-space:nowrap}}
/*# sourceMappingURL=main.f6fad62d.css.map*/