.app{max-width:1200px;margin:0 auto}.app-header{text-align:center;color:#fff;margin-bottom:40px}.app-header h1{font-size:3rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.2rem;opacity:.9}.animations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px;margin-bottom:40px}.animation-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.animation-card:hover{transform:translateY(-5px);box-shadow:0 8px 12px #0003}.animation-preview{display:flex;align-items:center;justify-content:center;flex:1;width:100%}.animation-card h3{margin-top:20px;color:#333;font-size:1.2rem}.animation-description{margin-top:12px;color:#666;font-size:.85rem;text-align:center;line-height:1.4;padding:0 10px}.favourite-label{margin-top:8px;color:green;font-size:.9rem;font-weight:500}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:16px;padding:40px;max-width:600px;width:90%;position:relative;animation:slideUp .3s}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:2rem;cursor:pointer;color:#666;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.close-button:hover{background:#f0f0f0}.modal-content h2{margin-bottom:30px;color:#333;text-align:center}.modal-animation{display:flex;align-items:center;justify-content:center;min-height:200px;background:#f9f9f9;border-radius:8px;padding:40px}@media (max-width: 768px){.animations-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.app-header h1{font-size:2rem}}.three-dots-page{background:#fff}.three-dots-page .app-header{color:#000}.three-dots-page .app-header h1{color:#000;text-shadow:none}.mirage-page{background:#fff;min-height:100vh;padding:40px 20px}.mirage-page .app-header{color:#2d3748;margin-bottom:50px}.mirage-page .app-header h1{color:#2d3748;text-shadow:none;font-size:2.5rem;margin-bottom:10px}.mirage-page .app-header p{color:#4a5568;font-size:1.1rem;margin-bottom:20px}.mirage-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1400px;margin:0 auto}.mirage-card-wide{grid-column:span 1;width:100%}.mirage-card-full-row{grid-column:1 / -1;width:100%;max-width:100%}.mirage-card-row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;width:100%}.mirage-card-row .mirage-card{width:100%;max-width:100%}@media (max-width: 1200px){.mirage-card-wide{grid-column:span 1;width:100%}.mirage-card-full-row{width:100%}.mirage-card-row{grid-template-columns:repeat(2,1fr);gap:16px}.mirage-card-row .mirage-card{width:100%}}@media (max-width: 768px){.mirage-card-wide{grid-column:span 1;width:100%}.mirage-card-full-row{width:100%}.mirage-card-row{grid-template-columns:1fr;gap:16px}.mirage-card-row .mirage-card{width:100%}}.mirage-card{background:#fff;border-radius:16px;padding:10px;box-shadow:0 4px 6px #00000012,0 1px 3px #0000000f;transition:all .3s ease;display:flex;flex-direction:column;border:1px solid #e2e8f0;position:relative}.mirage-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001f,0 4px 8px #00000014;z-index:100}.mirage-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f1f5f9}.mirage-card-header h3{margin:0;color:#1a202c;font-size:1.25rem;font-weight:600}.mirage-card-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.mirage-card-content{display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px;background:transparent;border-radius:12px;margin-bottom:16px}.mirage-card-content-use-case{background:#fff;min-height:100px;padding:16px}.mirage-card-content-phrase{background:transparent;min-height:120px;padding:20px}.mirage-phrase-container{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%;justify-content:flex-start}.mirage-phrase-container .mirage-container{display:inline-flex;align-items:center;vertical-align:middle}.mirage-phrase-text{color:#4a5568;font-size:.875rem;margin:0;font-weight:500;min-height:24px;font-family:Arial,sans-serif;line-height:1;display:flex;align-items:center}.mirage-message-state{background:#f8fafc;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;width:100%}.mirage-message-text{font-family:Arial,sans-serif;font-size:.875rem;color:#2d3748;margin:0}.mirage-button-state{background:#ffc627;color:#000;border:none;border-radius:9999px;padding:12px 24px;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-family:Arial,sans-serif;transition:all .2s ease;width:auto;min-width:100px}.mirage-button-state:active:not(:disabled){transform:translateY(0)}.mirage-button-pressed{transform:scale(.95);background:#ffb300}.mirage-button-submitting{opacity:.7;cursor:not-allowed}.mirage-button-saved{background:#d1d5db;color:#374151;cursor:not-allowed;opacity:1}.mirage-button-state:disabled{cursor:not-allowed}.mirage-button-text{opacity:.7}.mirage-model-dropdown-wrapper{position:relative;width:100%;max-width:400px}.mirage-model-dropdown-trigger{font-family:Arial,sans-serif;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s}.mirage-model-dropdown-trigger:hover{border-color:#9ca3af}.mirage-model-dropdown-selected{flex:1}.mirage-model-dropdown-trigger .mirage-model-name{font-weight:600;font-size:.875rem;color:#1a202c}.mirage-model-info{font-size:.8125rem;color:#4a5568;font-weight:400}.mirage-dropdown-arrow{color:#6b7280;font-size:.75rem;margin-left:12px;transition:transform .2s}.mirage-model-dropdown-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px #0000001a;max-height:300px;overflow-y:auto;z-index:100}.mirage-model-option{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f1f5f9;transition:background .15s}.mirage-model-option:last-child{border-bottom:none}.mirage-model-option:hover{background:#f8fafc}.mirage-model-option.selected{background:#f1f5f9}.mirage-model-option .mirage-model-name{font-weight:600;font-size:.9375rem;color:#1a202c;margin-bottom:2px}.mirage-model-option .mirage-model-info{font-size:.8125rem;color:#4a5568;font-weight:400}.mirage-card-footer{margin-top:auto;padding-top:12px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:12px}.mirage-card-footer code{background:#f1f5f9;color:#475569;padding:4px 8px;border-radius:4px;font-size:.85rem;font-family:Courier New,monospace}.mirage-code-button{background:#667eea;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s;align-self:flex-start}.mirage-code-button:hover{background:#5568d3}.mirage-code-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s;padding:20px}.mirage-code-modal-content{background:#fff;border-radius:16px;padding:40px;max-width:900px;width:100%;max-height:90vh;position:relative;animation:slideUp .3s;overflow-y:auto}.mirage-code-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:2rem;cursor:pointer;color:#666;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s;z-index:10}.mirage-code-modal-close:hover{background:#f0f0f0}.mirage-code-viewer{display:flex;flex-direction:column;gap:16px}.mirage-code-section{background:#1e293b;border-radius:8px;overflow:hidden}.mirage-code-header{background:#0f172a;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #334155}.mirage-code-header span{color:#e2e8f0;font-size:.875rem;font-weight:600;font-family:Courier New,monospace}.mirage-code-header button{background:#667eea;color:#fff;border:none;border-radius:4px;padding:4px 12px;font-size:.75rem;cursor:pointer;transition:background .2s}.mirage-code-header button:hover{background:#5568d3}.mirage-code-section pre{margin:0;padding:16px;overflow-x:auto;background:#1e293b}.mirage-code-section code{color:#e2e8f0;font-size:.8125rem;font-family:Courier New,Monaco,Consolas,monospace;line-height:1.6;background:transparent;padding:0;white-space:pre}.mirage-card-use-case{border-left:4px solid #667eea}.mirage-loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.mirage-loading-text{color:#4a5568;font-size:1rem;margin:0;text-align:center;font-weight:500}.mirage-inline-state{display:flex;align-items:center;gap:12px;color:#2d3748;font-size:1rem;font-weight:500}.mirage-button{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;font-weight:500;cursor:not-allowed;transition:opacity .2s;opacity:.8}.mirage-button:disabled{cursor:not-allowed}.mirage-card-state{width:100%}.mirage-card-state-header{display:flex;align-items:center;gap:12px;padding:12px;background:#f8fafc;border-radius:8px;color:#2d3748;font-size:.95rem;font-weight:500}@media (max-width: 768px){.mirage-cards-container{grid-template-columns:1fr;gap:20px}.mirage-page .app-header h1{font-size:2rem}}.dots-container{display:flex;align-items:center;justify-content:center;gap:10px}.dot{width:12px;height:12px;border-radius:50%;background-color:#8c1d40;animation:bounce 1.4s infinite ease-in-out both}@keyframes bounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}.container_855a57{--uib-dot-size: calc(var(--uib-size) * .4);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:var(--uib-size);width:var(--uib-size)}.inner_eef15b{position:relative;display:flex;align-items:center;justify-content:center;height:var(--uib-size);width:var(--uib-size);animation:rotate_57bfe8 calc(var(--uib-speed) * 1.667) infinite linear}.inner_eef15b:before,.inner_eef15b:after{content:"";position:absolute;height:var(--uib-dot-size);width:var(--uib-dot-size);border-radius:50%;background-color:var(--uib-color);flex-shrink:0;transition:background-color .3s ease}.inner_eef15b:before{animation:orbit_60733f var(--uib-speed) linear infinite}.inner_eef15b:after{animation:orbit_60733f var(--uib-speed) linear calc(var(--uib-speed) / -2) infinite}@keyframes rotate_57bfe8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes orbit_60733f{0%{transform:translate(calc(var(--uib-size) * .25)) scale(.73684);opacity:.65}5%{transform:translate(calc(var(--uib-size) * .235)) scale(.684208);opacity:.58}10%{transform:translate(calc(var(--uib-size) * .182)) scale(.631576);opacity:.51}15%{transform:translate(calc(var(--uib-size) * .129)) scale(.578944);opacity:.44}20%{transform:translate(calc(var(--uib-size) * .076)) scale(.526312);opacity:.37}25%{transform:translate(0) scale(.47368);opacity:.3}30%{transform:translate(calc(var(--uib-size) * -.076)) scale(.526312);opacity:.37}35%{transform:translate(calc(var(--uib-size) * -.129)) scale(.578944);opacity:.44}40%{transform:translate(calc(var(--uib-size) * -.182)) scale(.631576);opacity:.51}45%{transform:translate(calc(var(--uib-size) * -.235)) scale(.684208);opacity:.58}50%{transform:translate(calc(var(--uib-size) * -.25)) scale(.73684);opacity:.65}55%{transform:translate(calc(var(--uib-size) * -.235)) scale(.789472);opacity:.72}60%{transform:translate(calc(var(--uib-size) * -.182)) scale(.842104);opacity:.79}65%{transform:translate(calc(var(--uib-size) * -.129)) scale(.894736);opacity:.86}70%{transform:translate(calc(var(--uib-size) * -.076)) scale(.947368);opacity:.93}75%{transform:translate(0) scale(1);opacity:1}80%{transform:translate(calc(var(--uib-size) * .076)) scale(.947368);opacity:.93}85%{transform:translate(calc(var(--uib-size) * .129)) scale(.894736);opacity:.86}90%{transform:translate(calc(var(--uib-size) * .182)) scale(.842104);opacity:.79}95%{transform:translate(calc(var(--uib-size) * .235)) scale(.789472);opacity:.72}to{transform:translate(calc(var(--uib-size) * .25)) scale(.73684);opacity:.65}}.dot-stream-container{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--uib-size) * .18);width:var(--uib-size)}.dot-stream-inner{--uib-dot-size: calc(var(--uib-size) * .18);position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--uib-size);height:var(--uib-dot-size)}.dot-stream-dot{position:absolute;top:calc(50% - var(--uib-dot-size) / 2);left:calc(0px - var(--uib-dot-size) / 2);display:block;height:var(--uib-dot-size);width:var(--uib-dot-size);border-radius:50%;background-color:var(--uib-color);animation:dot-stream-stream var(--uib-speed) linear infinite both;transition:background-color .3s ease}.dot-stream-dot:nth-child(2){animation-delay:calc(var(--uib-speed) * -.2)}.dot-stream-dot:nth-child(3){animation-delay:calc(var(--uib-speed) * -.4)}.dot-stream-dot:nth-child(4){animation-delay:calc(var(--uib-speed) * -.6)}.dot-stream-dot:nth-child(5){animation-delay:calc(var(--uib-speed) * -.8)}@keyframes dot-stream-stream{0%,to{transform:translate(0) scale(0)}50%{transform:translate(calc(var(--uib-size) * .5)) scale(1)}99.999%{transform:translate(calc(var(--uib-size))) scale(0)}}.mirage-container{--uib-dot-size: calc(var(--uib-size) * .23);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--uib-size);height:var(--uib-dot-size)}.mirage-inner{position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--uib-size);height:var(--uib-dot-size)}.mirage-svg{filter:url(#uib-mirage-filter);overflow:visible}.mirage-dot{position:absolute;cy:calc(var(--uib-dot-size) / 2);cx:0;r:calc(var(--uib-dot-size) / 2);display:block;height:var(--uib-dot-size);width:var(--uib-dot-size);fill:var(--uib-color);animation:mirage-stream var(--uib-speed) linear infinite both;transition:fill .3s ease;transform-origin:center;transform-box:fill-box}.mirage-dot:nth-child(2){animation-delay:calc(var(--uib-speed) * -.2)}.mirage-dot:nth-child(3){animation-delay:calc(var(--uib-speed) * -.4)}.mirage-dot:nth-child(4){animation-delay:calc(var(--uib-speed) * -.6)}.mirage-dot:nth-child(5){animation-delay:calc(var(--uib-speed) * -.8)}@keyframes mirage-stream{0%,to{transform:translate(0) scale(0)}50%{transform:translate(calc(var(--uib-size) * .5)) scale(1)}99.999%{transform:translate(calc(var(--uib-size))) scale(0)}}.ball{--size: 20px;--timing: .7s;--displace: 70px;border-radius:50%;width:var(--size);height:var(--size);background:#000;margin-right:var(--displace);animation:animation321 var(--timing) infinite alternate cubic-bezier(.68,-.55,.265,1.55)}@keyframes animation321{0%{background:#8c1d40;transform:translate(var(--displace))}to{background:#ffc627;transform:translate(00px)}}.rotating-loader{--size: 20px;display:flex;gap:.6rem}.box{width:var(--size);height:var(--size);background:#8c1d40;animation:rotate 2s infinite}.box:nth-child(2){animation-delay:.25s}.box:nth-child(3){animation-delay:.5s}@keyframes rotate{50%{transform:rotate(180deg)}}.gooey-loader{width:12em;height:3em;position:relative;overflow:hidden;border-bottom:8px solid #000;filter:url(#goo)}.gooey-loader:before{content:"";width:22em;height:18em;background:red;position:absolute;border-radius:50%;left:-2em;bottom:-18em;animation:wee1 2s linear infinite}.gooey-loader:after{content:"";width:16em;height:12em;background:#0ff;position:absolute;border-radius:50%;left:-4em;bottom:-12em;animation:wee2 2s linear infinite .75s}@keyframes wee1{0%{transform:translate(-10em) rotate(0)}to{transform:translate(7em) rotate(180deg)}}@keyframes wee2{0%{transform:translate(-8em) rotate(0)}to{transform:translate(8em) rotate(180deg)}}.jelly{--uib-size: 40px;--uib-speed: .8s;--uib-color: #2c2b2b;position:relative;height:calc(var(--uib-size) / 2);width:var(--uib-size);filter:url(#uib-jelly-ooze);animation:rotate72317 calc(var(--uib-speed) * 2) linear infinite}.jelly:before,.jelly:after{content:"";position:absolute;top:0%;left:25%;width:50%;height:100%;background:var(--uib-color);border-radius:100%}.jelly:before{animation:shift-left var(--uib-speed) ease infinite}.jelly:after{animation:shift-right var(--uib-speed) ease infinite}.jelly-maker{width:0;height:0;position:absolute}@keyframes rotate72317{0%,49.999%,to{transform:none}50%,99.999%{transform:rotate(90deg)}}@keyframes shift-left{0%,to{transform:translate(0)}50%{transform:scale(.65) translate(-75%)}}@keyframes shift-right{0%,to{transform:translate(0)}50%{transform:scale(.65) translate(75%)}}.container{width:200px;height:150px;margin:0 auto;transform:rotate(90deg)}.ball{width:10px;height:10px;margin:10px auto;border-radius:50px}.ball:nth-child(1){background:#000;animation:right2 1s infinite ease-in-out}.ball:nth-child(2){background:#000;animation:left2 1.1s infinite ease-in-out}.ball:nth-child(3){background:#000;animation:right2 1.05s infinite ease-in-out}.ball:nth-child(4){background:#000;animation:left2 1.15s infinite ease-in-out}.ball:nth-child(5){background:#000;animation:right2 1.1s infinite ease-in-out}.ball:nth-child(6){background:#000;animation:left2 1.05s infinite ease-in-out}.ball:nth-child(7){background:#000;animation:right2 1s infinite ease-in-out}@keyframes right2{0%{transform:translate(-15px)}50%{transform:translate(15px)}to{transform:translate(-15px)}}@keyframes left2{0%{transform:translate(15px)}50%{transform:translate(-15px)}to{transform:translate(15px)}}.blobs{width:300px;height:300px;position:absolute;overflow:hidden;border-radius:70px;transform-style:preserve-3d}.blobs .blob-center{transform-style:preserve-3d;position:absolute;background:#1d1d1d;top:50%;left:50%;width:30px;height:30px;transform-origin:left top;transform:scale(.9) translate(-50%,-50%);animation:blob-grow_2 linear 3.4s infinite;border-radius:50%;box-shadow:0 -10px 40px -5px #1d1d1d}.blob{position:absolute;background:#1d1d1d;top:50%;left:50%;width:30px;height:30px;border-radius:50%;animation:blobs_2 ease-out 3.4s infinite;transform:scale(.9) translate(-50%,-50%);transform-origin:center top;opacity:0}.blob:nth-child(1){-webkit-animation-delay:.2s;animation-delay:.2s}.blob:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s}.blob:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}.blob:nth-child(4){-webkit-animation-delay:.8s;animation-delay:.8s}.blob:nth-child(5){-webkit-animation-delay:1s;animation-delay:1s}@keyframes blobs_2{0%{opacity:0;transform:scale(0) translate(calc(-330px - 50%),-50%)}1%{opacity:1}35%,65%{opacity:1;transform:scale(.9) translate(-50%,-50%)}99%{opacity:1}to{opacity:0;transform:scale(0) translate(calc(330px - 50%),-50%)}}@keyframes blob-grow_2{0%,39%{transform:scale(0) translate(-50%,-50%)}40%,42%{transform:scaleY(.9) translate(-50%,-50%)}43%,44%{transform:scale(1.2,1.1) translate(-50%,-50%)}45%,46%{transform:scale(1.3,1.2) translate(-50%,-50%)}47%,48%{transform:scale(1.4,1.3) translate(-50%,-50%)}52%{transform:scale(1.5,1.4) translate(-50%,-50%)}54%{transform:scale(1.7,1.6) translate(-50%,-50%)}58%{transform:scale(1.8,1.7) translate(-50%,-50%)}68%,70%{transform:scale(1.7,1.5) translate(-50%,-50%)}78%{transform:scale(1.6,1.4) translate(-50%,-50%)}80%,81%{transform:scale(1.5,1.4) translate(-50%,-50%)}82%,83%{transform:scale(1.4,1.3) translate(-50%,-50%)}84%,85%{transform:scale(1.3,1.2) translate(-50%,-50%)}86%,87%{transform:scale(1.2,1.1) translate(-50%,-50%)}90%,91%{transform:scaleY(.9) translate(-50%,-50%)}92%,to{transform:scale(0) translate(-50%,-50%)}}.shadow-loader{width:15px;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:-20px 0,20px 0;animation:l18 1s infinite}@keyframes l18{25%{box-shadow:-20px -20px,20px 20px}50%{box-shadow:0 -20px,0 20px}75%{box-shadow:20px -20px,-20px 20px}to{box-shadow:20px 0,-20px 0}}.leap-frog{--uib-size: 40px;--uib-speed: 2s;--uib-color: rgb(37, 37, 149);position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--uib-size);height:var(--uib-size)}.leap-frog__dot{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%}.leap-frog__dot:before{content:"";display:block;height:calc(var(--uib-size) * .22);width:calc(var(--uib-size) * .22);border-radius:50%;background-color:var(--uib-color);will-change:transform}.leap-frog__dot:nth-child(1){animation:leapFrog var(--uib-speed) ease infinite}.leap-frog__dot:nth-child(2){transform:translate(calc(var(--uib-size) * .4));animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5) infinite}.leap-frog__dot:nth-child(3){transform:translate(calc(var(--uib-size) * .8)) rotate(0);animation:leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3) infinite}@keyframes leapFrog{0%{transform:translate(0) rotate(0)}33.333%{transform:translate(0) rotate(180deg)}66.666%{transform:translate(calc(var(--uib-size) * -.4)) rotate(180deg)}99.999%{transform:translate(calc(var(--uib-size) * -.8)) rotate(180deg)}to{transform:translate(0) rotate(0)}}.circle-rotating-loader{height:15px;aspect-ratio:4;--_g: no-repeat radial-gradient(farthest-side, #4319ec 90%, #3604ff);background:var(--_g) left,var(--_g) right;background-size:25% 100%;display:grid}.circle-rotating-loader:before,.circle-rotating-loader:after{content:"";height:inherit;aspect-ratio:1;grid-area:1/1;margin:auto;border-radius:50%;transform-origin:-100% 50%;background:#2600fff8;animation:l49 1s infinite linear}.circle-rotating-loader:after{transform-origin:200% 50%;--s: -1;animation-delay:-.5s}@keyframes l49{58%,to{transform:rotate(calc(var(--s, 1) * 1turn))}}.jumping-loader{position:relative;display:flex;gap:.3em}.jumping-loader:before{content:"";position:absolute;left:0;top:0;width:100%;height:2em;filter:blur(45px);background-color:#e299ff;background-image:radial-gradient(at 52% 57%,hsla(11,83%,72%,1) 0px,transparent 50%),radial-gradient(at 37% 57%,hsla(175,78%,66%,1) 0px,transparent 50%)}.jumping-loader__circle{--size__loader: .6em;width:var(--size__loader);height:var(--size__loader);border-radius:50%;animation:jumping-loader__circle__jumping 2s infinite;background-color:#b499ff}.jumping-loader__circle:nth-child(2n){animation-delay:.3s;background-color:#e499ff}.jumping-loader__circle:nth-child(3n){animation-delay:.6s}@keyframes jumping-loader__circle__jumping{0%,to{transform:translateY(0)}25%{transform:translateY(-15px) scale(.5)}50%{transform:translateY(0)}75%{transform:translateY(5px) scale(.9)}}.metronome-container{--uib-size: 40px;--uib-color: black;--uib-speed: 1.6s;position:relative;top:8%;display:flex;align-items:center;justify-content:flex-start;height:var(--uib-size);width:var(--uib-size)}.metronome-dot{position:absolute;top:13.5%;left:0;display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%;animation:swing var(--uib-speed) linear infinite}.metronome-dot:before{content:"";height:25%;width:25%;border-radius:50%;background-color:var(--uib-color);transition:background-color .3s ease}.metronome-dot:nth-child(1){animation-delay:calc(var(--uib-speed) * -.36)}.metronome-dot:nth-child(2){animation-delay:calc(var(--uib-speed) * -.27);opacity:.8}.metronome-dot:nth-child(2):before{transform:scale(.9)}.metronome-dot:nth-child(3){animation-delay:calc(var(--uib-speed) * -.18);opacity:.6}.metronome-dot:nth-child(3):before{transform:scale(.8)}.metronome-dot:nth-child(4){animation-delay:calc(var(--uib-speed) * -.09);opacity:.4}.metronome-dot:nth-child(4):before{transform:scale(.7)}@keyframes swing{0%{transform:rotate(0)}15%{transform:rotate(0)}50%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}