/* Animación del logo corto y skeletons de carga (sitio y editor) */
.sk-loader { display: inline-grid; place-items: center; color: currentColor; }
.sk-loader svg { overflow: visible; }
.sk-top, .sk-bottom { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .sk-top { animation: sk-top 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .sk-bottom { animation: sk-bottom 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
}
/* Las dos piezas se cruzan como código yendo y viniendo */
@keyframes sk-top {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  25% { transform: translate(18%, 0); opacity: .35; }
  50% { transform: translate(0, 0); opacity: 1; }
}
@keyframes sk-bottom {
  0%, 50%, 100% { transform: translate(0, 0); opacity: 1; }
  75% { transform: translate(-18%, 0); opacity: .35; }
}

/* Skeleton: bloques grises con brillo que pasa */
.sk { position: relative; overflow: hidden; background: var(--sk-base, #8b8b981f); border-radius: 6px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--sk-shine, #ffffff14), transparent); }
@media (prefers-reduced-motion: no-preference) { .sk::after { animation: sk-shine 1.4s ease-in-out infinite; } }
@keyframes sk-shine { to { transform: translateX(100%); } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --sk-base: #0b0b0f0f; --sk-shine: #ffffff99; } }
:root[data-theme="light"] { --sk-base: #0b0b0f0f; --sk-shine: #ffffff99; }

/* Skeleton de un editor de código */
.sk-code { position: absolute; inset: 0; padding: 18px 0 0; display: flex; flex-direction: column; gap: 11px; z-index: 1; background: inherit; }
.sk-line { display: flex; gap: 22px; align-items: center; padding-left: 18px; }
.sk-line .n { width: 14px; height: 9px; flex-shrink: 0; opacity: .6; }
.sk-line .t { height: 10px; }
.sk-center { background: radial-gradient(circle at 50% 50%, var(--code-bg, #121218) 0 50px, transparent 130px); position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; color: var(--muted, #8b8b98); pointer-events: none; }