/* =============================================================================
   ScriptLab · estilo cartoon (cel-shading)
   Sacado de scriptlab.info (scriptlab-web: global.css, Button.astro, StudioCard,
   ScriptCard, CheckoutModal). HTML/CSS puro: vale para NUI de FiveM y para webs.

   Receta del estilo:
   - Colores planos: negro grisaceo (#202126 / #191a1e) y blanco roto (#efefeb).
   - Linea de tinta: borde 1.5px #0b0c0e (2px en tarjetas grandes).
   - Canto 3D: box-shadow apilada hacia abajo, primero el color del canto y luego
     la tinta que lo rodea (0 3px 0 canto, 0 4px 0 1px tinta).
   - Brillo arriba: inset 0 1px 0 (claro) en las piezas oscuras.
   - Movimiento con rebote: cubic-bezier(0.34, 1.56, 0.64, 1).
   Prefijo de todas las clases: sl-
   ============================================================================= */

:root {
  /* Paleta */
  --sl-ink: #0b0c0e; /* tinta: bordes y siluetas */
  --sl-graphite: #1b1c20;
  --sl-card: #191a1e; /* fondo de tarjeta grande */
  --sl-panel: #202126; /* fondo de panel / tecla oscura */
  --sl-panel-hover: #292a2f;
  --sl-panel-light: #303136; /* brillo superior de las piezas oscuras */
  --sl-panel-edge: #0d0e10; /* canto de las piezas oscuras */
  --sl-paper: #efefeb; /* cara de las piezas blancas */
  --sl-paper-edge: #676970; /* canto de las piezas blancas */
  --sl-white: #ffffff;
  --sl-text: #c2c4c9; /* texto normal sobre oscuro */
  --sl-text-dim: #a9abb1;
  --sl-steel: #8a8d95; /* etiquetas, notas */
  --sl-line: rgba(255, 255, 255, 0.1); /* separadores dentro de paneles */

  /* Avisos */
  --sl-hint-bg: #2a2618;
  --sl-hint-text: #f0e2b8;
  --sl-error-bg: #2a1a1c;
  --sl-error-text: #f0c4c8;

  /* Sombras-canto ya montadas */
  --sl-edge-dark: inset 0 1px 0 var(--sl-panel-light), 0 3px 0 var(--sl-panel-edge), 0 4px 0 1px var(--sl-ink);
  --sl-edge-dark-pressed: inset 0 1px 0 var(--sl-panel-light), 0 0 0 var(--sl-panel-edge), 0 1px 0 1px var(--sl-ink);
  --sl-edge-light: 0 2px 0 var(--sl-paper-edge), 0 3px 0 1px var(--sl-ink);
  --sl-edge-light-lg: inset 0 1.5px 0 rgb(255 255 255 / 70%), 0 3px 0 var(--sl-paper-edge), 0 4px 0 1px var(--sl-ink);
  --sl-edge-card: inset 0 2px 0 var(--sl-panel-light), 0 6px 0 var(--sl-panel-edge), 0 8px 0 2px var(--sl-ink),
    0 18px 30px -10px rgb(0 0 0 / 65%);

  /* Tipografia (Geist; en NUI mejor descargarla y servirla local) */
  --sl-font: 'Geist', system-ui, sans-serif;
  --sl-font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Movimiento */
  --sl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tecla 3D: variables animables (giro, luz y pulsacion) */
@property --press {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --dx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --dy {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 115%;
}
@property --lx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --ly {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -15%;
}

/* ---------------------------------------------------------------------------
   Base opcional: aplicala al contenedor raiz de la interfaz.
   (En NUI el body debe quedar transparente para ver el juego detras.)
   --------------------------------------------------------------------------- */
.sl-root {
  font-family: var(--sl-font);
  color: var(--sl-text);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
.sl-root *,
.sl-root *::before,
.sl-root *::after {
  box-sizing: border-box;
}
.sl-root input,
.sl-root textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------------------------------------------------------------------------
   Texto
   --------------------------------------------------------------------------- */
.sl-label {
  margin: 0;
  font-family: var(--sl-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sl-steel);
}
.sl-title {
  margin: 0;
  font-family: var(--sl-font);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--sl-white);
}
.sl-title--xl {
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.sl-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--sl-text);
}
.sl-text b {
  color: var(--sl-white);
  font-weight: 600;
}
.sl-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--sl-steel);
}
.sl-code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--sl-panel-edge);
  font-family: var(--sl-font-mono);
  font-size: 12px;
  color: var(--sl-white);
}
.sl-divider {
  height: 0;
  border: 0;
  border-top: 1px solid var(--sl-line);
  margin: 18px 0;
}

/* ---------------------------------------------------------------------------
   Contenedores
   --------------------------------------------------------------------------- */
/* Tarjeta grande (ventana, modal, menu principal) */
.sl-card {
  position: relative;
  padding: 30px 30px 26px;
  border: 2px solid var(--sl-ink);
  border-radius: 22px;
  background: var(--sl-card);
  box-shadow: var(--sl-edge-card);
  color: var(--sl-text);
}
.sl-card--pop {
  animation: sl-pop 0.5s var(--sl-spring);
}

/* Panel interior oscuro con tinta, brillo y canto */
.sl-box {
  padding: 10px 14px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 13px;
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  color: var(--sl-text);
}
/* Fila pulsable (enlace, opcion de menu) */
.sl-box--link {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.25s;
}
.sl-box--link:hover {
  background: var(--sl-panel-hover);
}
.sl-box--link > svg:last-child {
  margin-left: auto;
  transition: transform 0.3s var(--sl-ease-out);
}
.sl-box--link:hover > svg:last-child {
  transform: translateX(3px);
}

/* Lista en panel: filas separadas por linea fina */
.sl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.5px solid var(--sl-ink);
  border-radius: 13px;
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  overflow: hidden;
}
.sl-list > li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--sl-text);
}
.sl-list > li + li {
  border-top: 1px solid var(--sl-line);
}
.sl-list b {
  font-weight: 600;
  color: var(--sl-white);
}
.sl-list .sl-end {
  margin-left: auto;
  text-align: right;
  color: var(--sl-text-dim);
}

/* Avisos: panel tintado con tinta, brillo y canto, y una baldosa de icono a la izquierda
   ("!" en el aviso, "×" en el error). Al aparecer, el aviso hace "pop" y el error tiembla.
   <div class="sl-hint">Texto, admite <b>negrita</b></div>  ·  <div class="sl-error">...</div> */
.sl-hint,
.sl-error {
  --tint: var(--sl-hint-bg);
  --tint-light: #3d3622;
  --tint-edge: #17140b;
  --icon-face: var(--sl-hint-text);
  --icon-edge: #a8925a;
  position: relative;
  min-height: 46px;
  padding: 12px 14px 12px 48px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 12px;
  background: var(--tint);
  box-shadow: inset 0 1px 0 var(--tint-light), 0 3px 0 var(--tint-edge), 0 4px 0 1px var(--sl-ink);
  color: var(--sl-hint-text);
  font-size: 13px;
  line-height: 1.5;
  animation: sl-hint-in 0.5s var(--sl-spring) both;
}
.sl-hint b,
.sl-error b {
  color: var(--sl-white);
  font-weight: 600;
}
.sl-hint::before,
.sl-error::before {
  content: '!';
  position: absolute;
  top: 10px;
  left: 11px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 7px;
  background: var(--icon-face);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 55%), 0 2px 0 var(--icon-edge), 0 3px 0 1px var(--sl-ink);
  color: var(--sl-ink);
  font-family: var(--sl-font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-6deg);
}
.sl-error {
  --tint: var(--sl-error-bg);
  --tint-light: #3e2629;
  --tint-edge: #170c0e;
  --icon-face: var(--sl-error-text);
  --icon-edge: #a8636b;
  color: var(--sl-error-text);
  animation: sl-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.sl-error::before {
  content: '×';
  font-size: 17px;
  transform: rotate(6deg);
}

/* Fondo de modal */
.sl-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(5 5 7 / 72%);
  backdrop-filter: blur(6px);
  animation: sl-fade 0.3s var(--sl-ease-out);
}

/* ---------------------------------------------------------------------------
   Fichas, etiquetas e iconos
   --------------------------------------------------------------------------- */
/* Ficha blanca con canto */
.sl-chip {
  display: inline-block;
  padding: 5px 9px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 8px;
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sl-ink);
}
/* Ficha oscura */
.sl-chip--dark {
  background: var(--sl-panel);
  box-shadow: 0 2px 0 var(--sl-ink), 0 3px 0 1px var(--sl-ink);
  color: var(--sl-paper);
}
.sl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Etiqueta pequena en mono (NEW, v1.0, estado...) */
.sl-tag {
  display: inline-block;
  flex: none;
  padding: 3px 8px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 6px;
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light);
  color: var(--sl-ink);
  font-family: var(--sl-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sl-tag--dark {
  background: var(--sl-panel);
  box-shadow: 0 2px 0 var(--sl-ink), 0 3px 0 1px var(--sl-ink);
  color: #d1d2d5;
}
/* Pegatina torcida (descuentos, "-20%") */
.sl-tag--sticker {
  padding: 2px 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: rotate(-4deg);
}

/* Cifra destacada en ficha blanca */
.sl-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px 5px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 9px;
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light);
  color: var(--sl-ink);
  font-family: var(--sl-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sl-stat b {
  font-family: var(--sl-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: none;
}

/* Icono en baldosa blanca */
.sl-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 7px;
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light);
  color: var(--sl-ink);
}
.sl-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Precio tachado */
.sl-price-old {
  position: relative;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--sl-text-dim);
}
.sl-price-old::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  border-radius: 2px;
  background: #d4d5d9;
  transform: rotate(-4deg);
}

/* ---------------------------------------------------------------------------
   Boton pequeno plano (cerrar, iconos): se hunde al pulsar
   --------------------------------------------------------------------------- */
.sl-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--sl-ink);
  border-radius: 9px;
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  color: var(--sl-text);
  cursor: pointer;
  transition: transform 0.3s var(--sl-spring), box-shadow 0.3s, color 0.2s;
}
.sl-iconbtn:hover {
  color: var(--sl-white);
}
.sl-iconbtn:active {
  transform: translateY(3px);
  box-shadow: var(--sl-edge-dark-pressed);
}
.sl-iconbtn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
/* Posicion tipica de la X en una tarjeta */
.sl-card > .sl-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ---------------------------------------------------------------------------
   Formularios (mismo lenguaje: tinta, hundido hacia dentro)
   --------------------------------------------------------------------------- */
.sl-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 11px;
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
  color: var(--sl-white);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.2s;
}
.sl-input::placeholder {
  color: var(--sl-steel);
}
.sl-input:focus {
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light), 0 0 0 2px var(--sl-paper);
}

/* Interruptor: <label class="sl-switch"><input type="checkbox"><span></span></label> */
.sl-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: none;
  cursor: pointer;
}
.sl-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sl-switch span {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sl-ink);
  border-radius: 999px;
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
  transition: background 0.25s;
}
.sl-switch span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 50%;
  background: var(--sl-panel);
  box-shadow: inset 0 1px 0 var(--sl-panel-light), 0 2px 0 var(--sl-ink);
  transition: transform 0.4s var(--sl-spring), background 0.25s;
}
.sl-switch input:checked + span {
  background: var(--sl-paper-edge);
}
.sl-switch input:checked + span::after {
  transform: translateX(20px);
  background: var(--sl-paper);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 70%), 0 2px 0 var(--sl-ink);
}
.sl-switch input:focus-visible + span {
  outline: 2px solid var(--sl-white);
  outline-offset: 2px;
}

/* Barra de progreso: carril hundido con relleno blanco */
.sl-progress {
  height: 10px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 6px;
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
  overflow: hidden;
}
.sl-progress > i {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: 4px;
  background: var(--sl-paper);
  transition: width 0.6s var(--sl-spring);
}

/* ---------------------------------------------------------------------------
   CONTROLES (sacados del ordenador "24/7 OS" de sl_shops)
   --------------------------------------------------------------------------- */

/* Busqueda con lupa (campo hundido):
   <label class="sl-search"><svg viewBox="0 0 16 16"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
     <input placeholder="Buscar producto"></label> */
.sl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 11px;
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
  transition: box-shadow 0.2s;
}
.sl-search:focus-within {
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light), 0 0 0 2px var(--sl-paper);
}
.sl-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--sl-steel);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sl-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--sl-white);
  font-family: var(--sl-font);
  font-size: 14px;
  outline: none;
}
.sl-search input::placeholder {
  color: var(--sl-steel);
}

/* Filtros en pildora: la activa en blanco. Se hunden al pulsar.
   <div class="sl-pills"><button class="sl-pill is-active">Todo</button><button class="sl-pill">Bebidas</button></div> */
.sl-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sl-pill {
  padding: 5px 11px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 999px;
  background: var(--sl-panel);
  box-shadow: 0 2px 0 var(--sl-ink);
  color: var(--sl-text);
  font-family: var(--sl-font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s var(--sl-ease-out), color 0.18s var(--sl-ease-out), transform 0.3s var(--sl-spring);
}
.sl-pill:hover {
  background: var(--sl-panel-hover);
}
.sl-pill.is-active {
  background: var(--sl-paper);
  color: var(--sl-ink);
}
.sl-pill:active {
  transform: translateY(2px);
  box-shadow: none;
  transition-duration: 0.08s;
}

/* Contador con − y +: teclitas blancas y la cifra en un hueco oscuro (se puede escribir).
   <span class="sl-stepper"><button data-step="-1">−</button><input type="number" value="12" min="0" max="240"><button data-step="1">+</button></span>
   scriptlab-cartoon.js suma/resta (data-step = cuanto) respetando min y max, y lanza "input". */
.sl-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sl-stepper button {
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1.5px solid var(--sl-ink);
  border-radius: 7px;
  background: var(--sl-paper);
  box-shadow: 0 2px 0 var(--sl-paper-edge), 0 3px 0 1px var(--sl-ink);
  color: var(--sl-ink);
  font-family: var(--sl-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.sl-stepper button:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sl-paper-edge), 0 1px 0 1px var(--sl-ink);
}
.sl-stepper button:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.sl-stepper input {
  width: 52px;
  height: 26px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 7px;
  background: var(--sl-panel-edge);
  color: var(--sl-white);
  font-family: var(--sl-font-mono);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.sl-stepper input::-webkit-outer-spin-button,
.sl-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sl-stepper input:focus {
  box-shadow: 0 0 0 2px var(--sl-paper);
}

/* Deslizador: carril hundido, relleno verde y bola blanca con tinta. Un <input type="range"> invisible
   encima hace el trabajo (teclado y raton); el JS pone --value (0..100%) al moverlo.
   Opcionales: <i class="sl-slider-mark" style="--at:40%"> (referencia, p. ej. precio base) y la clase
   is-loss (relleno rojo).
   <span class="sl-slider"><i class="sl-slider-fill"></i><i class="sl-slider-knob"></i><input type="range" min="0" max="100" value="60"></span> */
.sl-slider {
  --value: 50%;
  position: relative;
  display: block;
  height: 16px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 8px;
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
}
.sl-slider > i {
  position: absolute;
  top: 0;
  bottom: 0;
}
.sl-slider-fill {
  left: 0;
  width: var(--value);
  border-radius: 6px;
  background: #7ee08a;
  transition: width 0.12s;
}
.sl-slider.is-loss .sl-slider-fill {
  background: #e5534b;
}
.sl-slider-mark {
  top: -4px !important;
  bottom: -4px !important;
  left: var(--at, 50%);
  width: 2px;
  translate: -1px 0;
  background: var(--sl-steel);
}
.sl-slider-knob {
  top: 50% !important;
  bottom: auto !important;
  left: var(--value);
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border: 1.5px solid var(--sl-ink);
  border-radius: 50%;
  background: var(--sl-paper);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 70%), 0 2px 0 var(--sl-ink);
  transition: left 0.12s, scale 0.3s var(--sl-spring);
  pointer-events: none;
}
.sl-slider:active .sl-slider-knob {
  scale: 1.18;
}
.sl-slider input[type='range'] {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.sl-slider:focus-within {
  outline: 2px solid var(--sl-white);
  outline-offset: 3px;
}

/* Fila de permiso: baldosa de icono, nombre e interruptor. Encendida, la baldosa pasa a blanca.
   <label class="sl-perm"><span class="sl-perm-icon"><svg>…</svg></span><span class="sl-perm-name">Caja</span>
     <span class="sl-switch"><input type="checkbox"><span></span></span></label>
   (el JS pone is-on segun el checkbox) */
.sl-perm {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 10px;
  background: var(--sl-panel-edge);
  cursor: pointer;
  transition: background 0.2s;
}
.sl-perm.is-on {
  background: var(--sl-panel-light);
}
.sl-perm-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1.5px solid var(--sl-ink);
  border-radius: 7px;
  background: var(--sl-panel);
  color: var(--sl-steel);
  transition: background 0.2s, color 0.2s;
}
.sl-perm-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-perm.is-on .sl-perm-icon {
  background: var(--sl-paper);
  color: var(--sl-ink);
}
.sl-perm-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sl-text);
}
.sl-perm .sl-switch {
  transform: scale(0.8);
  transform-origin: right;
}

/* Boton de mantener pulsado para confirmar (pagar, vender, despedir): se llena mientras se mantiene y
   confirma al llenarse; si se suelta antes, se vacia. sl-hold--danger para lo que no tiene vuelta atras.
   <button class="sl-hold" data-hold="700" data-hold-label="Mantén pulsado…">Pagar 1.200 $</button>
   Al confirmar lanza el evento "sl-confirm". is-blocked: no se puede (tiembla y lanza "sl-blocked"). */
.sl-hold {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 13px;
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light-lg);
  color: var(--sl-ink);
  font-family: var(--sl-font);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s;
}
.sl-hold:active:not(.is-blocked) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--sl-paper-edge), 0 2px 0 1px var(--sl-ink);
}
.sl-hold-fill {
  position: absolute;
  inset: 0;
  background: #7ee08a;
  transform: scaleX(var(--hold, 0));
  transform-origin: left;
}
.sl-hold-text {
  position: relative;
}
.sl-hold--danger {
  background: var(--sl-error-bg);
  box-shadow: var(--sl-edge-dark);
  color: var(--sl-error-text);
}
.sl-hold--danger .sl-hold-fill {
  background: #e46a60;
}
.sl-hold.is-blocked {
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  color: var(--sl-steel);
  font-size: 13.5px;
  cursor: not-allowed;
}
.sl-hold.is-shaking {
  animation: sl-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.sl-hold.is-done {
  animation: sl-hold-squash 0.45s var(--sl-spring);
}

/* Cifra que rueda al cambiar (dinero, unidades): destella en verde al subir y en rojo al bajar.
   <span class="sl-counter" data-suffix=" $">1200</span>  ·  SLCartoon.count(el, 1500) */
.sl-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s, transform 0.3s var(--sl-spring);
}
.sl-counter.is-up {
  color: #7ee08a;
  transform: translateY(-1px) scale(1.06);
}
.sl-counter.is-down {
  color: #f08a80;
  transform: translateY(1px) scale(0.97);
}

/* Tecla pequeña (atajos en paneles y etiquetas del juego): <kbd class="sl-kbd">E</kbd>
   is-pressed: hundida (al pulsarla en el juego). */
.sl-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 5px;
  background: var(--sl-paper);
  box-shadow: 0 1.5px 0 var(--sl-paper-edge), 0 2.5px 0 0.5px var(--sl-ink);
  color: var(--sl-ink);
  font-family: var(--sl-font-mono);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.12s var(--sl-ease-out), box-shadow 0.12s var(--sl-ease-out);
}
.sl-kbd.is-pressed {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sl-paper-edge), 0 0.5px 0 0.5px var(--sl-ink);
}

/* ---------------------------------------------------------------------------
   Pasos (stepper). <ol class="sl-steps"><li class="sl-step is-done"><b></b>Texto</li>...
   Estados: is-done (check), is-current (blanca, pop + anillo)
   --------------------------------------------------------------------------- */
.sl-steps {
  counter-reset: sl-step;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sl-steel);
  transition: color 0.3s;
}
.sl-step::before,
.sl-step::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(-50% + 22px);
  right: calc(50% + 22px);
  height: 7px;
  border-radius: 4px;
}
.sl-step::before {
  border: 1.5px solid var(--sl-ink);
  background: var(--sl-panel-edge);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 45%), 0 1px 0 var(--sl-panel-light);
}
.sl-step::after {
  right: auto;
  width: 0;
  margin: 1.5px;
  height: 4px;
  background: var(--sl-paper);
  transition: width 0.6s var(--sl-spring);
}
.sl-step.is-current::after,
.sl-step.is-done::after {
  width: calc(100% - 44px - 3px);
}
.sl-step:first-child::before,
.sl-step:first-child::after {
  display: none;
}
.sl-step b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 9px;
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  font-family: var(--sl-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--sl-steel);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.sl-step b::before {
  counter-increment: sl-step;
  content: counter(sl-step);
}
.sl-step.is-done b::before {
  content: '✓';
  font-family: var(--sl-font);
  font-size: 14px;
}
.sl-step.is-current,
.sl-step.is-done {
  color: var(--sl-white);
}
.sl-step.is-current b,
.sl-step.is-done b {
  background: var(--sl-paper);
  box-shadow: var(--sl-edge-light-lg);
  color: var(--sl-ink);
}
.sl-step.is-current b {
  animation: sl-step-pop 0.55s var(--sl-spring);
}
.sl-step.is-current b::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--sl-paper);
  border-radius: 13px;
  opacity: 0;
  animation: sl-step-ring 1.8s 0.4s var(--sl-ease-out) infinite;
}

/* ---------------------------------------------------------------------------
   Insignia de exito: circulo-tecla blanco que cae con squash & stretch
   <div class="sl-badge"><svg viewBox="0 0 24 24"><path class="sl-tick" d="M6 12.5l4 4 8-9"/></svg></div>
   --------------------------------------------------------------------------- */
.sl-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--sl-ink);
  border-radius: 50%;
  background: var(--sl-paper);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 75%), inset -6px -7px 0 -2px rgb(0 0 0 / 9%), 0 5px 0 var(--sl-paper-edge),
    0 7px 0 2px var(--sl-ink);
  color: var(--sl-ink);
  transform-origin: 50% 100%;
  animation: sl-badge-pop 0.75s cubic-bezier(0.3, 0.8, 0.4, 1) both;
}
.sl-badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-tick {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: sl-tick-draw 0.4s 0.38s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Cargando: ficha oscura con tres bolitas blancas con tinta que saltan en ola
   (se agachan, saltan estirandose y aterrizan aplastandose).
   <div class="sl-loading"><span class="sl-dots"><i></i><i></i><i></i></span>Esperando respuesta…</div>
   .sl-dots tambien sirve suelto (dentro de un boton, una lista...). */
.sl-loading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 15px 9px 12px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 12px;
  background: var(--sl-panel);
  box-shadow: var(--sl-edge-dark);
  color: var(--sl-text);
  font-size: 13px;
}
.sl-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 18px;
  padding-bottom: 2px;
}
.sl-dots i {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 50%;
  background: var(--sl-paper);
  box-shadow: 0 2px 0 var(--sl-ink);
  transform-origin: 50% 100%;
  animation: sl-dot-hop 1.1s cubic-bezier(0.3, 0.8, 0.4, 1) infinite;
}
.sl-dots i:nth-child(2) {
  animation-delay: 0.13s;
}
.sl-dots i:nth-child(3) {
  animation-delay: 0.26s;
}

/* Ruedita sencilla (por si hace falta algo minimo dentro de un texto) */
.sl-spinner::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: sl-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------------------------
   TECLA 3D (boton principal)
   Marcado minimo: <button class="sl-key">Comprar</button>
   scriptlab-cartoon.js le mete las 12 capas y la cara. Opciones:
     sl-key--ghost (oscura), sl-key--sm, sl-key--square (icono), data-arrow (flecha)
   La tecla blanca (solid) es la de por defecto.
   --------------------------------------------------------------------------- */
.sl-key {
  --face: var(--sl-paper);
  --wall: var(--sl-paper-edge);
  --ink-line: var(--sl-ink);
  --line-w: 1.5px;
  --shade: rgba(0, 0, 0, 0.1);
  --light: rgba(255, 255, 255, 0.7);
  --text: var(--sl-ink);
  --step: 2px;
  --drop: 0.45px;
  --grow: 0.00588;
  --rx: 0deg;
  --ry: 0deg;
  --press: 0;
  --hover-s: 1;
  --shift: 0px;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 12px;
  perspective: 340px;
  font-family: var(--sl-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
  transform: translateX(var(--shift));
  transition: transform 0.5s var(--sl-spring);
}
.sl-key[hidden] {
  display: none !important;
}
.sl-key--ghost {
  --face: var(--sl-panel);
  --wall: var(--sl-ink);
  --ink-line: #000;
  --shade: rgba(0, 0, 0, 0.42);
  --light: rgba(255, 255, 255, 0.1);
  --text: var(--sl-white);
}
.sl-key[disabled],
.sl-key.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.sl-key-block {
  position: relative;
  display: block;
  border-radius: inherit;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--press) * var(--step) * -8)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--hover-s));
  transition: transform 0.5s var(--sl-spring), --press 0.5s var(--sl-spring);
}

@media (hover: hover) {
  .sl-key:hover {
    z-index: 1;
  }
  .sl-key:hover,
  .sl-key.is-hover {
    --hover-s: 1.08;
  }
  .sl-key.is-down {
    --hover-s: 1.04;
  }
  /* Las teclas vecinas se apartan para dejar sitio a la que crece */
  .sl-key:hover + .sl-key {
    --shift: var(--make-room, 14px);
  }
  .sl-key:hover + .sl-key + .sl-key {
    --shift: calc(var(--make-room, 14px) * 0.5);
  }
  .sl-key:has(+ .sl-key:hover) {
    --shift: calc(var(--make-room, 14px) * -1);
  }
  .sl-key:has(+ .sl-key + .sl-key:hover) {
    --shift: calc(var(--make-room, 14px) * -0.5);
  }
}

.sl-key-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wall);
  transform: translate3d(
      0,
      calc(var(--i) * var(--drop) * (1 - var(--press))),
      calc(var(--i) * var(--step) * -1 * (1 - var(--press) * 0.75))
    )
    scale(calc(1 + var(--i) * var(--grow) * (1 - var(--press) * 0.75)));
  pointer-events: none;
}
.sl-key-layer:nth-last-of-type(2) {
  box-shadow: 0 0 0 var(--line-w) var(--ink-line), 0 14px 22px -10px rgba(0, 0, 0, 0.8);
}

.sl-key-face {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: inherit;
  border: var(--line-w) solid var(--ink-line);
  background: var(--face);
  transform: translateZ(0.5px);
}
.sl-key--ghost .sl-key-face {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.sl-key-face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(38% 55% at var(--lx) var(--ly), var(--light) 0 35%, transparent 65%),
    radial-gradient(125% 150% at var(--dx) var(--dy), var(--shade) 0 38%, transparent 52%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: --dx 0.5s var(--sl-spring), --dy 0.5s var(--sl-spring), --lx 0.5s var(--sl-spring),
    --ly 0.5s var(--sl-spring);
}
.sl-key.is-down {
  --press: 1;
}
.sl-key.is-down .sl-key-block {
  transition: transform 0.1s ease-out, --press 0.1s ease-out;
}

.sl-key-arrow {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--sl-spring);
}
.sl-key:hover .sl-key-arrow {
  transform: translateX(3px);
}

.sl-key--sm {
  --step: 1px;
  --drop: 0.3px;
  --grow: 0.00294;
  font-size: 14px;
  border-radius: 10px;
}
.sl-key--sm .sl-key-face {
  padding: 8px 15px;
}
.sl-key--square {
  border-radius: 7px;
}
.sl-key--square .sl-key-face {
  width: 36px;
  height: 36px;
  padding: 0;
}
.sl-key--square .sl-key-face svg {
  width: 18px;
  height: 18px;
}
/* Ocupar todo el ancho del contenedor */
.sl-key--block {
  display: block;
  width: 100%;
}
.sl-key--block .sl-key-face {
  display: flex;
  width: 100%;
}

.sl-key:focus-visible .sl-key-face {
  outline: 2px solid var(--sl-white);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   BOTON SENCILLO (sin capas ni giro 3D; solo CSS, no necesita el JS)
   Mismo aspecto de tecla: tinta, cara plana y canto. Al pasar el raton sube 1px
   y al pulsar se hunde hasta tapar el canto.
   <button class="sl-btn">Aceptar</button>
   Opciones: sl-btn--ghost (oscuro), sl-btn--sm, sl-btn--square, sl-btn--block
   --------------------------------------------------------------------------- */
.sl-btn {
  --edge: 4px; /* alto del canto */
  --face: var(--sl-paper);
  --edge-c: var(--sl-paper-edge);
  --hi: rgb(255 255 255 / 70%);
  --text: var(--sl-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 5px; /* deja sitio al canto, que no ocupa espacio */
  padding: 13px 22px;
  border: 1.5px solid var(--sl-ink);
  border-radius: 12px;
  background: var(--face);
  box-shadow: inset 0 1.5px 0 var(--hi), inset 0 -2px 0 rgb(0 0 0 / 12%), 0 var(--edge) 0 var(--edge-c),
    0 calc(var(--edge) + 1px) 0 1px var(--sl-ink);
  color: var(--text);
  font-family: var(--sl-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
  transform: translateY(0);
  transition: transform 0.35s var(--sl-spring), box-shadow 0.35s var(--sl-spring), background 0.2s;
}
.sl-btn--ghost {
  --face: var(--sl-panel);
  --edge-c: var(--sl-panel-edge);
  --hi: var(--sl-panel-light);
  --text: var(--sl-white);
}
@media (hover: hover) {
  .sl-btn:hover {
    --edge: 5px;
    transform: translateY(-1px);
  }
  .sl-btn--ghost:hover {
    --face: var(--sl-panel-hover);
  }
}
.sl-btn:active {
  --edge: 0px;
  transform: translateY(4px);
  transition-duration: 0.08s;
}
.sl-btn[disabled],
.sl-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.sl-btn:focus-visible {
  outline: 2px solid var(--sl-white);
  outline-offset: 3px;
}
.sl-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--sl-spring);
}
/* Iconos rellenos: <svg fill="currentColor"> */
.sl-btn svg[fill='currentColor'] {
  fill: currentColor;
  stroke: none;
}
/* Flecha: <svg class="sl-arrow" viewBox="0 0 16 16"><path d="M3 8h10M9 4l4 4-4 4"/></svg> */
.sl-btn:hover .sl-arrow {
  transform: translateX(3px);
}
.sl-btn--sm {
  --edge: 3px;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 14px;
}
@media (hover: hover) {
  .sl-btn--sm:hover {
    --edge: 4px;
  }
}
.sl-btn--sm:active {
  --edge: 0px;
  transform: translateY(3px);
}
.sl-btn--square {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 9px;
}
.sl-btn--square svg {
  width: 18px;
  height: 18px;
}
.sl-btn--block {
  display: flex;
  width: 100%;
}

/* Fila de teclas */
.sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Saltito para llamar la atencion sobre una tecla: el.classList.add('is-spotlight') */
.sl-key.is-spotlight {
  transform-origin: 50% 100%;
  animation: sl-hop 1.4s cubic-bezier(0.3, 0.8, 0.4, 1) 2;
}

/* Entrada escalonada: <div class="sl-stagger"> con hijos style="--k:0", "--k:1"... */
.sl-stagger > * {
  animation: sl-rise 0.6s calc(var(--k, 0) * 60ms + 120ms) var(--sl-ease-out) both;
}

/* ---------------------------------------------------------------------------
   Animaciones
   --------------------------------------------------------------------------- */
@keyframes sl-fade {
  from {
    opacity: 0;
  }
}
@keyframes sl-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.92);
  }
}
@keyframes sl-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes sl-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes sl-step-pop {
  0% {
    transform: scale(0.7);
  }
  55% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sl-step-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes sl-badge-pop {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(0.35);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1.24, 0.78);
  }
  52% {
    transform: scale(0.88, 1.14);
  }
  72% {
    transform: scale(1.06, 0.95);
  }
  86% {
    transform: scale(0.98, 1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sl-hint-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    transform: none;
  }
}
@keyframes sl-shake {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  15% {
    opacity: 1;
    transform: translateX(-6px) rotate(-1deg);
  }
  30% {
    transform: translateX(5px) rotate(0.8deg);
  }
  45% {
    transform: translateX(-4px) rotate(-0.5deg);
  }
  60% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-1px);
  }
  100% {
    transform: none;
  }
}
@keyframes sl-dot-hop {
  0%,
  60%,
  100% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(0) scale(1.25, 0.75);
  }
  28% {
    transform: translateY(-8px) scale(0.85, 1.15);
  }
  46% {
    transform: translateY(0) scale(1.2, 0.8);
  }
}
@keyframes sl-hold-squash {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.04, 0.9);
  }
  60% {
    transform: scale(0.98, 1.04);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sl-tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sl-hop {
  0% {
    transform: translateY(0) scale(1);
  }
  12% {
    transform: translateY(2px) scale(1.06, 0.92);
  }
  30% {
    transform: translateY(-10px) scale(0.95, 1.07);
  }
  46% {
    transform: translateY(0) scale(1.07, 0.93);
  }
  58% {
    transform: scale(0.98, 1.02);
  }
  70%,
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-key-block,
  .sl-key {
    transition: none;
  }
  .sl-card--pop,
  .sl-backdrop,
  .sl-stagger > *,
  .sl-step.is-current b,
  .sl-step.is-current b::after,
  .sl-badge,
  .sl-hint,
  .sl-error,
  .sl-dots i,
  .sl-key.is-spotlight,
  .sl-hold.is-shaking,
  .sl-hold.is-done {
    animation: none;
  }
  .sl-tick {
    animation: none;
    stroke-dashoffset: 0;
  }
}