@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600&display=swap";:root{--sb-bg:#0c0f17;--sb-panel:#111626;--sb-border:#1e2437;--sb-text:#e8ebf7;--sb-muted:#9aa3b8;--sb-accent:#7c5dff;--sb-accent-2:#3ed6b0;--sb-shadow:0 20px 40px #00000059}.sidebarSpan{opacity:1;text-align:left;white-space:nowrap;width:100px;font-size:18px;transition:opacity .4s,width .4s}.sidebarSpan.oculto{opacity:0;width:0}.sidebar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-right:1px solid var(--sb-border);width:260px;height:100vh;box-shadow:var(--sb-shadow);color:var(--sb-text);background:linear-gradient(160deg,#111626eb,#0c0f17f5);flex-shrink:0;padding:20px 16px;font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif;transition:width .3s;position:sticky;top:0;left:0;overflow:hidden}#cloud{text-align:center;cursor:pointer;background:0 0;border:none;width:30px;height:auto}.mini-sidebar{width:85px}.mini-sidebar .hero-menu{justify-content:center}.hero-menu{align-items:center;gap:10px;width:100%;height:50px;margin-bottom:20px;display:flex}.hero-menu span{letter-spacing:-.02em;color:var(--sb-text);font-size:20px;font-weight:600}.button{cursor:pointer;border:1px solid var(--sb-border);background:linear-gradient(135deg, var(--sb-accent), #9e8bff);color:#0b0c14;letter-spacing:-.01em;border-radius:12px;justify-content:center;align-items:center;width:100%;height:45px;margin-bottom:20px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .2s;display:flex;box-shadow:0 10px 30px #7c5dff59}.button svg{color:#0b0c14;width:25px}.button span.oculto{opacity:0;width:0}.button:hover{transform:translateY(-1px);box-shadow:0 16px 36px #7c5dff73}.sidebar .nav-item .active{color:var(--sb-text);background:linear-gradient(135deg,#7c5dff2e,#3ed6b01a);border:1px solid #7c5dff73;box-shadow:0 12px 28px #7c5dff33}.sidebar .nav-item .active svg{color:var(--sb-accent)}.nav-item{align-items:center;margin-bottom:5px;list-style:none;display:flex}.nav-item a,.nav-item .item{border:1px solid var(--sb-border);width:100%;height:45px;color:var(--sb-muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff05;border-radius:12px;align-items:center;text-decoration:none;transition:all .25s;display:flex}:is(.nav-item a,.nav-item .item) svg{width:50px;color:var(--sb-text);min-width:50px!important}:is(.nav-item a,.nav-item .item) span.oculto{opacity:0;width:0}.nav-item a:hover{color:var(--sb-text);background:#7c5dff1f;border-color:#7c5dff66;box-shadow:0 8px 24px #7c5dff40}.linea{background:var(--sb-border);border-radius:10px;width:100%;height:1px;margin:20px 0}.black-mode{border:1px solid var(--sb-border);background:#ffffff08;border-radius:12px;justify-content:space-between;align-items:center;width:100%;height:50px;padding:6px 10px;display:flex}.black-mode .info{justify-content:center;align-items:center;gap:10px;width:150px;height:45px;display:flex;overflow:hidden}.black-mode .info svg{width:50px;color:var(--sb-accent);font-size:20px}.mini-sidebar .black-mode{background:0 0;border:none;padding:0}.switch{justify-content:center;align-items:center;min-width:50px;display:flex}#toggleSwitch{align-items:center;display:flex}.slider{cursor:pointer;background:#141a2b;border-radius:99999px;width:50px;height:25px;transition:background-color .4s;position:relative}.slider:after{content:"";background:#f4f7ff;border-radius:50%;width:15px;height:15px;transition:left .4s;position:absolute;top:5px;left:5px}#toggleSwitch input[type=checkbox]:checked+.slider{background:linear-gradient(135deg, var(--sb-accent), #9e8bff)}#toggleSwitch input[type=checkbox]:checked+.slider:after{left:30px}#toggleSwitch input[type=checkbox]{display:none}@media (prefers-color-scheme:system){:root{--sb-bg:#0c0f17;--sb-panel:#111626;--sb-border:#1e2437;--sb-text:#e8ebf7;--sb-muted:#9aa3b8;--sb-accent:#7c5dff;--sb-accent-2:#3ed6b0;--sb-shadow:0 20px 40px #00000059}}.btn-soon{cursor:not-allowed;border:1px solid #0000;border-radius:12px;align-items:center;font-family:Inter,sans-serif;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden}.btn-energy{animation:2s infinite pulseEnergy;background:linear-gradient(135deg, var(--sb-accent), #9e8bff)!important;color:#0b0c14!important;border:1px solid #333!important;box-shadow:0 0 #646cff00!important}.btn-energy .badge{color:#fff;text-transform:uppercase;text-wrap:nowrap;text-align:left;letter-spacing:.5px;background:linear-gradient(135deg,#646cff 0%,#a259ff 100%);border-radius:6px;width:70%;padding:2px 8px;font-size:.7rem}@keyframes pulseEnergy{0%{border-color:#646cff80;box-shadow:0 0 #646cff66}70%{border-color:#333;box-shadow:0 0 0 10px #646cff00}to{border-color:#333;box-shadow:0 0 #646cff00}}#dropdown-main{grid-template-rows:auto;justify-items:center;gap:32px;width:min(960px,90%);margin:50px auto;display:grid}#dropdown-main h2{text-align:center;color:var(--text)}.dropdown{--animation:slideDown;--animation-time:.3s;margin:16px auto 72px;position:relative}.dropdown button{background:linear-gradient(135deg, var(--primary), #9e8bff);color:var(--on-primary);cursor:pointer;letter-spacing:-.01em;border:1px solid #7c5dff59;border-radius:12px;width:220px;padding:12px 14px;font-weight:700;transition:transform .12s,box-shadow .2s;box-shadow:0 12px 30px #7c5dff59}.dropdown button:hover{box-shadow:0 16px 36px #7c5dff73}.dropdown .dropdown-container{--margin-dropdown:16px;border:1px solid var(--surface-container-low);width:100%;top:calc(100% + var(--margin-dropdown));z-index:20;pointer-events:none;visibility:hidden;interpolate-size:allow-keywords;opacity:0;background:linear-gradient(135deg,#111623f2,#0c0f17e6);border-radius:14px;transition:all .3s;position:absolute;left:0;overflow:hidden;box-shadow:0 20px 40px #00000059}.dropdown .dropdown-container:after{content:"";top:calc(0% - var(--margin-dropdown));width:100%;height:var(--margin-dropdown);pointer-events:all;z-index:80;border-top:solid #fff;position:absolute;left:0}.dropdown .dropdown-container ol{flex-direction:column;gap:4px;margin:0;padding:8px;list-style:none;display:flex}.dropdown .dropdown-container ol li{border-bottom:1px solid #ffffff0a;border-radius:10px;width:100%;padding:8px 10px;transition:background .18s,color .18s,border-color .18s}.dropdown .dropdown-container ol li:hover,.dropdown .dropdown-container ol li:focus-within,.dropdown .dropdown-container ol li:active{background:linear-gradient(135deg,#7c5dff59,#3ed6b038);border-color:#7c5dffcc}:is(.dropdown .dropdown-container ol li:hover,.dropdown .dropdown-container ol li:focus-within,.dropdown .dropdown-container ol li:active) a{color:#fff}.dropdown .dropdown-container ol li:last-child{border-bottom:none}.dropdown .dropdown-container ol a{width:100%;color:var(--on-surface-container);font-weight:500;text-decoration:none;display:block}.dropdown .dropdown-container ol a:focus-visible{outline-offset:2px;color:var(--on-primary);background:#7c5dff2e;border-radius:8px;outline:2px solid #7c5dffcc}.dropdown.open .dropdown-container{visibility:visible;pointer-events:all;opacity:1;animation:var(--animation) var(--animation-time) ease forwards}body{background:var(--surface);width:100%;min-height:100vh;color:var(--text);font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif}:root{--primary:#7c5dff;--on-primary:#0b0c14;--secundary:#3ed6b0;--on-secundary:#041410;--surface:#0b0c10;--surface-light:#0f1119;--surface-dark:#07080d;--text:#e9ecf4;--muted:#9aa3b5;--surface-container:#12141c;--surface-container-low:#0f121a;--surface-container-high:#141724;--surface-container-highest:#15192b;--on-surface-container:#e9ecf4;--on-surface-container-variant:#9aa3b5;--primary-container:#1a1f33;--on-primary-container:#dcd7ff;--secundary-container:#0f1f1c;--on-secundary-container:#226d5a;--success:#23896d;--on-success:#e9fff7;--success-container:#10201a;--on-success-container:#c1f0e0}.dark-mode{--surface:#07080d;--surface-light:#0b0c14;--surface-dark:#03040a;--text:#e9ecf4;--muted:#8d95a8}*{box-sizing:border-box;margin:0;padding:0}#root{display:flex;position:relative}.animations-container{flex-direction:column;gap:8px;width:100%;display:flex}.animations-container h3{text-align:center}.animations-list{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.animations-list .animation-element{background:var(--surface-container);width:300px;color:var(--on-surface-container);border:1px solid var(--surface-container-low);border-radius:12px;flex-direction:column;gap:16px;padding:12px;display:flex;box-shadow:0 16px 40px #00000040}.animations-list .animation-element .animation-header{flex-direction:column;display:flex}.animations-list .animation-element .title,.animations-list .animation-element #description{text-align:center}.animations-list .animation-element .title{letter-spacing:-.02em;font-size:24px}.animations-list .animation-element #description{color:var(--on-surface-container-variant);margin:0;font-size:14px}.animations-list .animation-element #time-animation{text-align:end;border:1px solid var(--surface-container-low);width:100px;color:var(--on-surface-container);background:0 0;border-radius:999px;align-self:center;font-size:30px}.animations-list .animation-element .buttons-animations{width:auto;margin:0 auto}.animations-list .animation-element .buttons-animations #copy{background:var(--surface-container-high);color:var(--on-surface-container)}.animations-list .animation-element .buttons-animations #copy svg{place-self:center;width:32px}.animations-list .animation-element .buttons-animations #play{background:var(--primary);color:var(--on-primary)}.animations-list .animation-element .buttons-animations #play svg{place-self:center}.animations-list .animation-element .buttons-animations button{border:1px solid var(--surface-container-low);cursor:pointer;border-radius:12px;width:auto;margin:0 8px;padding:6px;transition:scale .3s}.animations-list .animation-element .buttons-animations button:hover{border-color:var(--primary);scale:1.02}.animations-list .animation-element .buttons-animations button:active{scale:.95}.animations-list .animation-element .buttons-animations svg{width:32px}.animations-list .animation-element.active{background:var(--success);color:var(--on-success);transition:background .3s}.animations-list .animation-element.active #description{color:var(--on-success)}.animations-list .animation-element.active button{background:var(--success-container)!important;color:var(--on-success-container)!important}.animations-list .animation-element.active #play{background:var(--on-success-container)!important;color:var(--success-container)!important}.filters-animations-container{position:relative}.filters-animations-container #selectedFilter{color:#fff;cursor:pointer;background:gray;border:none;border-radius:8px;align-items:center;gap:32px;width:150px;padding:8px;font-size:larger;display:flex}.filters-animations-container #selectedFilter span.typeSelected{flex-grow:1}.filters-animations-container #selectedFilter span.arrow{color:#b8b7b7b9;width:24px;transition:all .3s}.filters-animations-container .filters-list{visibility:hidden;pointer-events:none;background:var(--surface-container-low);width:100%;color:var(--on-surface-container);position:absolute;top:calc(100% + 8px);right:50%;transform:translate(50%)}.filters-animations-container .filters-list ol{flex-direction:column;width:100%;list-style:none;display:flex}.filters-animations-container .filters-list ol li{cursor:pointer;border-bottom:1px solid var(--surface-container-lowest);padding:4px 8px}.filters-animations-container .filters-list ol li:last-child{border-bottom:none}.filters-animations-container .filters-list ol li.active{background:var(--primary);color:var(--on-primary)}.filters-animations-container.open #selectedFilter span.arrow{transform:rotate(180deg)}.filters-animations-container.open .filters-list{visibility:visible;pointer-events:all;animation:.3s forwards slideDown}@media (width<=900px){.animation-element{flex-grow:1}}@keyframes slideDown{0%{opacity:0;translate:0 -20px}to{opacity:1;translate:0}}@keyframes slideUp{0%{opacity:0;translate:0 20px}to{opacity:1;translate:0}}@keyframes slideDownRebount{0%{opacity:0;animation-timing-function:cubic-bezier(.56,-.07,.78,2.03);translate:0 -20px}to{opacity:1;translate:0}}@keyframes slideUpRebount{0%{opacity:0;animation-timing-function:cubic-bezier(.56,-.07,.78,2.03);translate:0 20px}to{opacity:1;translate:0}}@keyframes slideLeftRebount{0%{opacity:0;animation-timing-function:cubic-bezier(.56,-.07,.78,2.03);translate:30px}to{opacity:1;translate:0}}@keyframes slideRightRebount{0%{opacity:0;animation-timing-function:cubic-bezier(.56,-.07,.78,2.03);translate:-30px}to{opacity:1;translate:0}}@keyframes slideRight{0%{opacity:0;translate:30px}to{opacity:1;translate:0}}@keyframes slideLeft{0%{opacity:0;translate:-30px}to{opacity:1;translate:0}}@keyframes popIn{0%{opacity:0;transform-origin:bottom;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popInSlideTop{0%{opacity:0;transform-origin:bottom;transform:scale(.8)translateY(50%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes popInSlideBottom{0%{opacity:0;transform-origin:bottom;transform:scale(.8)translateY(-50%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes popInSlideLeft{0%{opacity:0;transform-origin:bottom;transform:scale(.8)translate(100%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes popInSlideRight{0%{opacity:0;transform-origin:bottom;transform:scale(.8)translate(-100%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes popInTop{0%{opacity:0;transform-origin:top;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popInTopSlideLeft{0%{opacity:0;transform-origin:top;transform:scale(.8)translate(100%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes popInTopSlideRight{0%{opacity:0;transform-origin:top;transform:scale(.8)translate(-100%)}to{opacity:1;transform:scale(1)translate(0%)}}@keyframes flipOpen{0%{transform-origin:top;transform:perspective(400px)rotateX(-90deg)}to{opacity:1;transform:perspective(400px)rotateX(0)}}@keyframes flipOpenSlideLeft{0%{transform-origin:top;transform:perspective(400px)rotateX(-90deg)translate(100%)}to{opacity:1;transform:perspective(400px)rotateX(0)translate(0%)}}@keyframes flipOpenSlideRight{0%{transform-origin:top;transform:perspective(400px)rotateX(-90deg)translate(-100%)}to{opacity:1;transform:perspective(400px)rotateX(0)translate(0%)}}@keyframes flipOpenSlideUp{0%{transform-origin:bottom;transform:perspective(400px)rotateX(-90deg)translateY(50%)}to{opacity:1;transform:perspective(400px)rotateX(0)translate(0%)}}@keyframes flipOpenSlideDown{0%{transform-origin:bottom;transform:perspective(400px)rotateX(-90deg)translateY(-50%)}to{opacity:1;transform:perspective(400px)rotateX(0)translate(0%)}}@keyframes reveal{0%{height:0}to{opacity:1;height:fit-content}}@keyframes revealBottom{0%{clip-path:inset(100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes softBlur{0%{opacity:1;filter:blur(10px)}to{opacity:1;filter:blur()}}@keyframes appearFromBottomLeft{0%{opacity:0;clip-path:polygon(0% 100%,0% 100%,0% 100%,0% 100%)}to{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}}.code-popover{color:#d4d4d4;background:#1e1e1e;border:1px solid #333;border-radius:12px;width:90%;max-width:650px;margin:auto;padding:1.5rem;box-shadow:0 25px 50px -12px #00000080}.code-popover::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#000000b3}.popover-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.code-block{background:#0d0d0d;border-radius:8px;margin-bottom:1rem;overflow:hidden}.block-header{background:#252526;justify-content:space-between;padding:.5rem 1rem;font-size:.8rem;font-weight:700;display:flex}pre{white-space:pre-wrap;margin:0;padding:1rem;font-family:Fira Code,monospace;font-size:.9rem;overflow-x:auto}.close-icon{color:#fff;cursor:pointer;background:0 0;border:none;font-size:1.5rem}.popover-copy-btn{background:var(--primary-container);color:var(--on-primary-container);cursor:pointer;border:none;border-radius:9999px;padding:4px;transition:all .1s}.popover-copy-btn svg{width:24px}.popover-copy-btn:hover{background:var(--primary);color:var(--on-primary);transition:all .2s}.publish-popover{max-width:540px}.publish-form{flex-direction:column;gap:1rem;display:flex}.form-control{flex-direction:column;gap:.35rem;font-size:.95rem;display:flex}.form-control span{color:#bfbfbf;font-weight:600}.form-control input,.form-control textarea{color:#f5f5f5;background:#0d0d0d;border:1px solid #333;border-radius:10px;padding:.75rem .9rem;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-control input:focus,.form-control textarea:focus{border-color:var(--primary,#646cff);outline:none;box-shadow:0 0 0 3px #6673ff26}.form-actions{justify-content:flex-end;gap:.75rem;margin-top:.25rem;display:flex}.form-actions button{cursor:pointer;border:none;border-radius:10px;padding:.65rem 1.1rem;font-weight:700;transition:transform .1s,box-shadow .2s}.form-actions .ghost{color:#d4d4d4;background:0 0;border:1px solid #333}.form-actions .primary{background:var(--primary-container,#2d2f8a);color:var(--on-primary-container,#f6f7ff)}.form-actions button:hover{transform:translateY(-1px);box-shadow:0 10px 25px -15px #0009}:root{--bg:#0b0c10;--panel:#11131b;--panel-strong:#131623;--border:#1f2230;--muted:#9aa3b5;--text:#e9ecf4;--accent:#7c5dff;--accent-2:#3ed6b0;--shadow:0 20px 50px #00000059;--radius:16px}#main-playground{width:100%;color:var(--text);background:radial-gradient(circle at 20% 20%, #7c5dff14, transparent 35%), radial-gradient(circle at 85% 10%, #3ed6b014, transparent 32%), var(--bg);flex:1;margin:0 auto;padding:32px 24px 64px;font-family:Space Grotesk,Inter,system-ui,-apple-system,sans-serif}#main-playground h2{text-align:center;letter-spacing:-.03em;color:var(--text);margin-bottom:12px;font-size:clamp(32px,6vw,48px)}#main-playground .hero-subtitle{text-align:center;max-width:720px;color:var(--muted);margin:0 auto 32px;font-size:18px;line-height:1.6}.hero-section{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,#7c5dff1f,#3ed6b014);gap:8px;padding:24px;display:grid}.workspace{grid-template-columns:1.05fr .95fr;align-items:start;gap:18px;margin-top:28px;display:grid}@media (width<=1100px){.workspace{grid-template-columns:1fr}}.playground-window{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.tabs-header{background:var(--panel-strong);border-bottom:1px solid var(--border);justify-content:space-between;gap:12px;padding:10px 12px;display:flex}.tabs-container{border:1px solid var(--border);background:linear-gradient(135deg,gray,#494747,#000);border-radius:999px;gap:6px;height:50px;padding:4px;display:inline-flex}.tabs-container button{position:relative;color:#fff!important}.tabs-container button.active{color:var(--on-secundary);background:var(--secundary)!important}.tabs-header button{color:var(--muted);cursor:pointer;z-index:5;background:0 0;border:none;border-radius:999px;padding:10px 14px;font-size:.92rem;font-weight:500;transition:all .2s}.buttons-header{align-items:center;gap:12px;display:flex}.buttons-header #publish{background:linear-gradient(135deg, var(--accent), #9e8bff);color:#0c0c13;cursor:pointer;border:none;border-radius:12px;padding:10px 16px;font-size:.95rem;font-weight:600;transition:transform .1s,box-shadow .2s;box-shadow:0 12px 30px #7c5dff59}.buttons-header #publish:hover{transform:translateY(-1px);box-shadow:0 16px 40px #7c5dff73}.buttons-header #copy{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#ffffff0f;border-radius:12px;place-items:center;padding:8px 10px;transition:all .2s;display:grid}.buttons-header #copy svg{width:32px}.buttons-header #copy:hover{border-color:var(--accent);color:var(--accent)}.tabs-content{padding:0}.preview-container{background:radial-gradient(circle at 50% 0,#7c5dff1a,#0000 40%),radial-gradient(circle at 10% 20%,#3ed6b014,#0000 35%),#0d1018;justify-content:center;min-height:340px;padding:28px;display:flex}iframe#new-iframe-publication{border:1px solid var(--border);background:#0b0c10;border-radius:12px;width:100%;max-width:960px;height:340px;box-shadow:inset 0 0 0 1px #ffffff05}.editor-panel{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,#131623e6,#10121cf2);overflow:hidden}.panel-header{border-bottom:1px solid var(--border);color:var(--text);justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;display:flex}.panel-header p{margin:0;font-size:16px;font-weight:600}.panel-hint{color:var(--muted);font-size:13px}