/* ==========================================================================
   components.css — Botones, inputs, chips, badges, fracciones .fr y fichas
   ========================================================================== */

/* ---------- Controles de formulario (Estética de Tiza) ---------- */

/* SVG Border-Image de tiza dibujada a mano (24x24, slice 6 == border-image-width 6px sin reescalado) */
:root {
  --chalk-border-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.2%20Q%2012%201.8%2022.5%203.0%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2022.2%2012%2020.8%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2022.5%2020.8%20Q%2012%2022.2%201.5%2021.0%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%201.8%2012%203.2%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%202.7%20Q%207%203.5%2013%202.6%20T%2022.5%203.3%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2021.3%201.5%20Q%2020.5%207%2021.4%2013%20T%2020.7%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.3%20Q%2017%2020.5%2011%2021.4%20T%201.5%2020.7%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%202.7%2022.5%20Q%203.5%2017%202.6%2011%20T%203.3%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-3: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.0%20Q%2012%203.8%2022.5%202.8%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2020.2%2012%2021.2%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.0%20Q%2012%2020.2%201.5%2021.2%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%203.8%2012%202.8%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23ece8dc%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.92%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-1-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.2%20Q%2012%201.8%2022.5%203.0%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2022.2%2012%2020.8%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2020.8%20Q%2012%2022.2%201.5%2021.0%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%201.8%2012%203.2%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-2-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%202.7%20Q%207%203.5%2013%202.6%20T%2022.5%203.3%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.3%201.5%20Q%2020.5%207%2021.4%2013%20T%2020.7%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.3%20Q%2017%2020.5%2011%2021.4%20T%201.5%2020.7%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%202.7%2022.5%20Q%203.5%2017%202.6%2011%20T%203.3%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-3-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.0%20Q%2012%203.8%2022.5%202.8%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2020.2%2012%2021.2%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.0%20Q%2012%2020.2%201.5%2021.2%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%203.8%2012%202.8%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 6px stretch;
  --chalk-border-1-pressed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.2%20Q%2012%201.8%2022.5%203.0%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2022.2%2012%2020.8%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2020.8%20Q%2012%2022.2%201.5%2021.0%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%201.8%2012%203.2%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 7px stretch;
  --chalk-border-2-pressed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%202.7%20Q%207%203.5%2013%202.6%20T%2022.5%203.3%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.3%201.5%20Q%2020.5%207%2021.4%2013%20T%2020.7%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.3%20Q%2017%2020.5%2011%2021.4%20T%201.5%2020.7%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%202.7%2022.5%20Q%203.5%2017%202.6%2011%20T%203.3%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 7px stretch;
  --chalk-border-3-pressed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M%201.5%203.0%20Q%2012%203.8%2022.5%202.8%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2021.0%201.5%20Q%2020.2%2012%2021.2%2022.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%2022.5%2021.0%20Q%2012%2020.2%201.5%2021.2%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3Cpath%20d%3D%27M%203.0%2022.5%20Q%203.8%2012%202.8%201.5%27%20fill%3D%27none%27%20stroke%3D%27%23e6d38a%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-opacity%3D%270.95%27/%3E%3C/svg%3E") 6 / 7px stretch;
  --chalk-border-rest: var(--chalk-border-1);
  --chalk-border-hover: var(--chalk-border-1-hover);
  --chalk-border-active: var(--chalk-border-1-pressed);
}

button:not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.button:not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.fn-reveal,
input[type="number"],
input[type="text"] {
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  background-color: transparent;
  border: 6px solid transparent;
  border-image: var(--chalk-border-1);
  min-height: 44px;
  padding: 4px 10px;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
  cursor: pointer;
  transition: color 0.15s, transform 0.1s;
}

/* Asignación de 3 variantes de bordes dibujados a mano */
button:nth-of-type(3n+1):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.button:nth-of-type(3n+1):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:nth-of-type(3n+1):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
select:nth-of-type(3n+1) {
  border-image: var(--chalk-border-1);
}

button:nth-of-type(3n+2):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.button:nth-of-type(3n+2):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:nth-of-type(3n+2):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
select:nth-of-type(3n+2) {
  border-image: var(--chalk-border-2);
}

button:nth-of-type(3n):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.button:nth-of-type(3n):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:nth-of-type(3n):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
select:nth-of-type(3n) {
  border-image: var(--chalk-border-3);
}

/* Pestañas y opciones de quiz/retos sin caja en reposo */
.tab,
.fn-quiz-btn,
.seq-check__opt-btn,
button[data-answer] {
  border: 0;
  border-image: none;
}

/* Select nativo con flecha de tiza */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  background-color: transparent;
  border: 6px solid transparent;
  border-image: var(--chalk-border-1);
  min-height: 44px;
  padding: 4px 30px 4px 8px;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M2.5 4.5 L6 8 L9.5 4.5' fill='none' stroke='%23ece8dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  transition: color 0.15s;
}

select option,
select optgroup {
  background-color: var(--bg);
  color: var(--ink);
}

@media (hover: hover) {
  button:hover:nth-of-type(3n+1):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .button:hover:nth-of-type(3n+1):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .btn:hover:nth-of-type(3n+1):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  select:hover:nth-of-type(3n+1) {
    color: var(--yellow);
    border-image: var(--chalk-border-1-hover);
  }

  button:hover:nth-of-type(3n+2):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .button:hover:nth-of-type(3n+2):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .btn:hover:nth-of-type(3n+2):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  select:hover:nth-of-type(3n+2) {
    color: var(--yellow);
    border-image: var(--chalk-border-2-hover);
  }

  button:hover:nth-of-type(3n):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .button:hover:nth-of-type(3n):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  .btn:hover:nth-of-type(3n):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
  select:hover:nth-of-type(3n) {
    color: var(--yellow);
    border-image: var(--chalk-border-3-hover);
  }

  .tab:hover,
  .fn-quiz-btn:hover {
    background: transparent;
    color: var(--yellow);
  }

  input[type="checkbox"]:hover:not(:disabled) {
    border-image: var(--chalk-border-1-hover);
  }
}

/* Estado presionado persistente (aria-pressed="true", botones de lentes y filtros) */
button[aria-pressed="true"]:not(.tab):not(.chip):not(.site-nav__sound-btn):not(.abs-token):not(.af-token),
.btn[aria-pressed="true"],
.btn--on {
  color: var(--yellow);
}

button[aria-pressed="true"]:not(.tab):not(.chip):not(.site-nav__sound-btn):not(.abs-token):not(.af-token),
.button[aria-pressed="true"],
.btn[aria-pressed="true"] {
  border-width: 7px;
  border-color: var(--yellow);
  color: var(--yellow);
}

button[aria-pressed="true"]:nth-of-type(3n+1):not(.tab):not(.chip):not(.site-nav__sound-btn):not(.abs-token):not(.af-token),
.btn[aria-pressed="true"]:nth-of-type(3n+1) {
  border-image: var(--chalk-border-1-pressed);
  transform: rotate(-0.6deg);
}

button[aria-pressed="true"]:nth-of-type(3n+2):not(.tab):not(.chip):not(.site-nav__sound-btn):not(.abs-token):not(.af-token),
.btn[aria-pressed="true"]:nth-of-type(3n+2) {
  border-image: var(--chalk-border-2-pressed);
  transform: rotate(0.6deg);
}

button[aria-pressed="true"]:nth-of-type(3n):not(.tab):not(.chip):not(.site-nav__sound-btn):not(.abs-token):not(.af-token),
.btn[aria-pressed="true"]:nth-of-type(3n) {
  border-image: var(--chalk-border-3-pressed);
  transform: rotate(-0.4deg);
}

/* Estado :active momentáneo */
button:active:not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.button:active:not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:active:not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.fn-reveal:active {
  color: var(--yellow);
}

button:active:nth-of-type(3n+1):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:active:nth-of-type(3n+1):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn) {
  border-image: var(--chalk-border-1-pressed);
  transform: rotate(-0.6deg) scale(0.98);
}

button:active:nth-of-type(3n+2):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:active:nth-of-type(3n+2):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn) {
  border-image: var(--chalk-border-2-pressed);
  transform: rotate(0.6deg) scale(0.98);
}

button:active:nth-of-type(3n):not(:disabled):not(.tab):not(.fn-quiz-btn):not([data-answer]):not(.seq-check__opt-btn):not(.vn-ctrl-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn),
.btn:active:nth-of-type(3n):not(:disabled):not(.seq-check__opt-btn):not(.vn-trigger):not(.seq-doubt-btn):not(.chip):not(.vn-fab):not(.af-token):not(.abs-token):not(.seq-token):not(.vn-btn-next):not(.site-nav__sound-btn):not(.scratchpad-btn):not(.scratchpad-toggle-btn):not(.scratchpad-color-dot):not(.scratchpad-size-btn) {
  border-image: var(--chalk-border-3-pressed);
  transform: rotate(-0.4deg) scale(0.98);
}

select:active,
select.is-active {
  border-image: var(--chalk-border-1-pressed);
  color: var(--yellow);
}

button:disabled,
.button:disabled,
.btn:disabled,
select:disabled,
input[type="range"]:disabled,
input[type="checkbox"]:disabled,
input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Foco accesible universal: outline 2px solid var(--yellow) con 3px offset (NO se anula en :active) */
button:focus-visible,
button.is-focus-visible,
.button:focus-visible,
.btn:focus-visible,
.btn.is-focus-visible,
select:focus-visible,
select.is-focus-visible,
input:focus-visible,
input.is-focus-visible,
a:focus-visible,
a.is-focus-visible,
.tab:focus-visible,
.tab.is-focus-visible,
.fn-quiz-btn:focus-visible,
.fn-quiz-btn.is-focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

input[type="number"],
input[type="text"] {
  cursor: text;
  background-color: transparent;
}

input[type="number"] {
  width: 96px;
}

/* Checkbox dibujado a mano (28x28px, área táctil >= 44px) */
input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin: 0;
  background-color: transparent;
  border: 6px solid transparent;
  border-image: var(--chalk-border-1);
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  position: relative;
  box-sizing: border-box;
  flex: none;
}

input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 14px;
  border: solid var(--green);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  margin-top: -3px;
  border-radius: 1px;
  transition: transform 0.12s ease-in-out;
}

input[type="checkbox"]:checked {
  border-image: var(--chalk-border-1-hover);
}

input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
  user-select: none;
  box-sizing: border-box;
}

/* Sliders de rango: pista fina de tiza 2px y manija 22x22px */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  flex: 1;
  min-width: 120px;
}

/* Pista WebKit */
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--muted);
  border-radius: 1px;
}

/* Pista Firefox */
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--muted);
  border-radius: 1px;
}

/* Manija WebKit (22x22px, tiza rellena var(--ink) con borde var(--bg)) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent);
  margin-top: -10px; /* Centrado: (2 - 22)/2 = -10px */
  cursor: grab;
  transition: transform 0.1s, background 0.1s;
}

input[type="range"]:active::-webkit-slider-thumb,
input[type="range"].is-active::-webkit-slider-thumb {
  cursor: grabbing;
  background: var(--yellow);
  transform: scale(1.15);
}

/* Manija Firefox */
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 0 2px color-mix(in srgb, var(--ink) 40%, transparent);
  cursor: grab;
  transition: transform 0.1s, background 0.1s;
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"].is-active::-moz-range-thumb {
  cursor: grabbing;
  background: var(--yellow);
  transform: scale(1.15);
}

/* Foco en Range Thumb */
input[type="range"]:focus-visible,
input[type="range"].is-focus-visible {
  outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb,
input[type="range"].is-focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--yellow) 50%, transparent);
}

input[type="range"]:focus-visible::-moz-range-thumb,
input[type="range"].is-focus-visible::-moz-range-thumb {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--yellow) 50%, transparent);
}

output {
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  font-weight: 700;
}

/* Botón conmutable (aria-pressed) */
.toggle[aria-pressed="true"],
.btn--on {
  background: transparent;
  color: var(--yellow);
  border-image: var(--chalk-border-active);
}

.btn--primary {
  background: transparent;
  color: var(--blue);
  border-image: var(--chalk-border-rest);
  font-weight: 400;
}

/* Chips (presets y botones de modo compactos): min-height 44px para accesibilidad */
.chip {
  min-height: 44px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius, 6px);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--yellow);
}

.chip--ghost {
  background: transparent;
  border-style: dashed;
  opacity: 0.85;
}

.chip--alaska {
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--yellow, #ffd700);
  background: rgba(255, 215, 0, 0.08);
  font-weight: 500;
  gap: 6px;
}

.chip--alaska:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.7);
  color: #fff;
}

/* Divisor de tiza dibujada a mano (.chalk-stroke) */
.chalk-stroke {
  display: block;
  position: relative;
  width: calc(100% + 28px);
  margin-left: -14px;
  height: 14px;
  margin-top: 18px;
  margin-bottom: 18px;
  transform: rotate(-0.45deg);
  transform-origin: 0% 50%;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 16' preserveAspectRatio='none' width='1000' height='16'%3E%3Cdefs%3E%3ClinearGradient id='cf' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ece8dc' stop-opacity='0.95'/%3E%3Cstop offset='15%25' stop-color='%23ece8dc' stop-opacity='0.85'/%3E%3Cstop offset='42%25' stop-color='%23ece8dc' stop-opacity='0.58'/%3E%3Cstop offset='70%25' stop-color='%23ece8dc' stop-opacity='0.24'/%3E%3Cstop offset='88%25' stop-color='%23ece8dc' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%23ece8dc' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='cd' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ece8dc' stop-opacity='0.5'/%3E%3Cstop offset='50%25' stop-color='%23ece8dc' stop-opacity='0.18'/%3E%3Cstop offset='85%25' stop-color='%23ece8dc' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 7.5 Q 260 5.8 520 7.8 T 925 6.8' fill='none' stroke='url(%23cf)' stroke-width='3.2' stroke-linecap='butt'/%3E%3Cpath d='M 2 9.0 Q 230 7.8 480 9.2 T 820 8.2' fill='none' stroke='url(%23cd)' stroke-width='1.4' stroke-linecap='butt' stroke-dasharray='14 3 6 4 28 5 9 3'/%3E%3C/svg%3E");
  border: none;
  pointer-events: none;
}

.chalk-stroke--alt {
  width: calc(100% + 22px);
  margin-left: -8px;
  transform: rotate(0.4deg);
  transform-origin: 0% 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 16' preserveAspectRatio='none' width='1000' height='16'%3E%3Cdefs%3E%3ClinearGradient id='cfa' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ece8dc' stop-opacity='0.92'/%3E%3Cstop offset='18%25' stop-color='%23ece8dc' stop-opacity='0.80'/%3E%3Cstop offset='48%25' stop-color='%23ece8dc' stop-opacity='0.52'/%3E%3Cstop offset='75%25' stop-color='%23ece8dc' stop-opacity='0.19'/%3E%3Cstop offset='90%25' stop-color='%23ece8dc' stop-opacity='0.03'/%3E%3Cstop offset='100%25' stop-color='%23ece8dc' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='cda' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23ece8dc' stop-opacity='0.45'/%3E%3Cstop offset='55%25' stop-color='%23ece8dc' stop-opacity='0.15'/%3E%3Cstop offset='85%25' stop-color='%23ece8dc' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 8.0 Q 280 9.6 540 7.0 T 910 8.2' fill='none' stroke='url(%23cfa)' stroke-width='3' stroke-linecap='butt'/%3E%3Cpath d='M 4 6.8 Q 240 8.4 500 6.2 T 790 7.2' fill='none' stroke='url(%23cda)' stroke-width='1.2' stroke-linecap='butt' stroke-dasharray='12 4 8 3 24 6 10 4'/%3E%3C/svg%3E");
}

/* Subrayado ondeado de tiza para frases clave */
.chalk-wavy {
  display: inline;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6' width='16' height='6'%3E%3Cpath d='M0 3 Q 4 0.5, 8 3 T 16 3' fill='none' stroke='%237ba7c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom 1px;
  background-size: 16px 6px;
  padding-bottom: 5px;
}

/* Campo slider: <label> + range + <output> */
.field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
}

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.field__label {
  font-size: 1rem;
  color: var(--muted);
  min-width: 90px;
  white-space: nowrap;
}

.field__out {
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  font-weight: 600;
  min-width: 56px;
  text-align: right;
}

.label-sm {
  font-size: 1rem;
  color: var(--muted);
}

/* ---------- Badges / diagnósticos ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

.inline-mark {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle;
  margin-left: 6px;
}

.badge--ok {
  color: var(--green);
  background: transparent;
  border: none;
}

.badge--warn {
  color: var(--yellow);
  background: transparent;
  border: none;
}

.badge--err {
  color: var(--pink);
  background: transparent;
  border: none;
}

.badge--info {
  color: var(--blue);
  background: transparent;
  border: none;
}

.badge--sm {
  font-size: 1rem;
  padding: 0;
  border-radius: 0;
}

.text-ok {
  color: var(--green);
}

.text-err {
  color: var(--pink);
}

.text-warn {
  color: var(--yellow);
}

.text-muted {
  color: var(--muted);
}

/* Avisos */
.notice {
  padding: 6px 0;
  background: transparent;
  border: none;
  color: var(--ink);
  border-radius: 0;
  margin: 0 0 12px;
}

.notice--ok {
  color: var(--ink);
  background: transparent;
}
.notice--ok > strong:first-child,
.notice--ok .notice-tag {
  color: var(--green);
}

.notice--warn {
  color: var(--ink);
  background: transparent;
}
.notice--warn > strong:first-child,
.notice--warn .notice-tag {
  color: var(--yellow);
}

.notice--err {
  color: var(--ink);
  background: transparent;
}
.notice--err > strong:first-child,
.notice--err .notice-tag {
  color: var(--pink);
}

.notice--err > strong:first-child {
  display: inline;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 3.5 Q 5 0.5, 10 3.5 T 20 3.5' fill='none' stroke='%23e3a1a1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") bottom left / 16px 4px repeat-x;
  padding-bottom: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.notice--blue {
  color: var(--ink);
  background: transparent;
}
.notice--blue > strong:first-child,
.notice--blue .notice-tag {
  color: var(--blue);
}

.notice strong {
  font-weight: 700;
}

.status {
  min-height: 26px;
  font-weight: 500;
}

.form-error {
  font-size: 1rem;
  color: var(--pink);
  min-height: 20px;
  margin: 4px 0 0;
}

/* ---------- Fracción horizontal estricta (dos pisos) ---------- */
.fr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  min-width: max-content;
  padding: 0 3px;
}

.fr > .top,
.fr > .bot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 4px;
}

.fr > .bar {
  align-self: stretch;
  height: 1.5px;
  position: relative;
  min-width: 0;
  line-height: 0;
  overflow: visible;
  opacity: .9;
  background: var(--ink);
}

.fr__bar-svg {
  position: absolute;
  left: 0;
  top: -1.25px;
  width: 100%;
  height: 4px;
  display: block;
  pointer-events: none;
}

.fr--sm > .top,
.fr--sm > .bot {
  min-height: 20px;
}

/* Expresión matemática en línea */
.eq {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-hand);
  font-size: 1.125rem;
}

.eq--lg {
  font-size: 1.375rem;
}

.eq .op {
  color: var(--muted);
  font-size: 1.1em;
  padding: 0 2px;
}

.eq var,
.math-var {
  font-style: italic;
}

.num {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.unit {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.0625rem;
  color: var(--muted);
}

/* Contenedor de expresión destacado */
.expr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 7px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  min-height: auto;
  overflow-x: auto;
  margin: 0 0 12px;
}

.expr > .op {
  font-size: 1.375rem;
  color: var(--muted);
}

.dot {
  color: var(--muted);
}

/* ---------- Fichas (tokens) ---------- */
.token {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: none;
  font-weight: 600;
  line-height: 1.25;
  background: transparent;
  vertical-align: middle;
  transition: transform .25s, opacity .25s;
}

.token__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.token__text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.token--wanted {
  color: var(--blue);
}

.token--pending {
  color: var(--yellow);
}

.token--stacked {
  color: var(--pink);
}

.token--neutral {
  color: var(--green);
}

/* Lista de pasos */
.steps {
  padding-left: 22px;
  color: var(--muted);
}

.steps li {
  margin: 7px 0;
}

/* Tarjetas de dato (stat) */
.stat {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.stat__label {
  font-size: 1rem;
  color: var(--muted);
  white-space: nowrap;
}

.stat__label::after {
  content: ": ";
  color: var(--muted);
}

.stat__value {
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 700;
}

/* ---------- Plano cartesiano (js/core/plot.js) ---------- */
.plot {
  background: transparent;
  border: none;
  border-radius: 0;
  touch-action: none;
  user-select: none;
}

.plot-grid {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  stroke-opacity: 0.10;
}

.plot-axis {
  stroke: var(--muted);
  stroke-width: 1.4;
}

.plot-arrowhead {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chalk-icon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  max-width: none;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chalk-icon * {
  vector-effect: non-scaling-stroke;
}

.chalk-icon--check {
  color: var(--green);
}

.chalk-icon--cross {
  color: var(--pink);
}

.chalk-icon--lock {
  color: var(--yellow);
}

.plot-tick {
  font-size: var(--svg-scale-caveat, 20px);
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

.plot-axis-label {
  font-size: var(--svg-scale-caveat, 20px);
  font-style: italic;
  font-family: var(--font-math);
  fill: var(--ink);
}

.plot-label {
  font-size: var(--svg-scale-caveat, 20px);
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.plot-label:not([fill]) {
  fill: var(--ink);
}

.plot-label--muted {
  fill: var(--muted);
}

.plot-label--yellow,
svg text[fill="var(--yellow)"] {
  fill: var(--yellow);
}

.plot-curve {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plot-dot {
  fill: var(--blue);
  stroke: var(--card);
  stroke-width: 1.5;
}

.plot-dot--open {
  fill: var(--card);
  stroke: var(--blue);
  stroke-width: 2.5;
}

/* ==========================================================================
   VISUAL NOVEL HUD — "MODO ALASKA" (Reutilizable en todas las vistas)
   ========================================================================== */

.vn-hud {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 9999;
  max-width: 860px;
  width: calc(100vw - 4rem);
  box-sizing: border-box;
  pointer-events: none;
}

.vn-hud.is-visible {
  pointer-events: none;
}

/* Acceso persistente al diálogo: un Chibi en lugar de un rótulo de texto. */
.vn-fab {
  display: grid;
  position: fixed;
  right: 2rem;
  bottom: 1.5rem;
  z-index: 10000;
  width: 80px;
  padding: 10px;
  overflow: hidden;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--ink);
  border-radius: 15%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.vn-fab__avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.18);
  pointer-events: none;
}

.vn-fab:hover {
  transform: scale(1.08);
  border-color: var(--ink);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

.vn-fab.is-hidden {
  display: none;
}

.vn-box {
  display: none !important;
}

.vn-hud.is-visible:not(.is-minimized) .vn-box {
  display: flex !important;
  pointer-events: auto;
}

/* Cuadro de diálogo estilo pizarrón con doble borde de tiza */
.vn-box {
  background: rgba(14, 23, 18, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 28px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: stretch;
  min-height: 250px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  user-select: none;
}

/* Sprite de Alaska */
.vn-sprite-wrap {
  width: 215px;
  min-height: 250px;
  align-self: flex-end;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  margin-left: 8px;
  margin-bottom: -2px;
  pointer-events: none;
}

.vn-sprite {
  height: 100%;
  max-height: 380px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* Animaciones de Sprite */
@keyframes vn-shake-anim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-1.5deg); }
  40% { transform: translateX(5px) rotate(1.5deg); }
  60% { transform: translateX(-3px) rotate(-1deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}

.vn-shake {
  animation: vn-shake-anim 0.38s ease-in-out;
}

@keyframes vn-pop-anim {
  0% { transform: scale(0.92) translateY(6px); }
  60% { transform: scale(1.05) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

.vn-pop {
  animation: vn-pop-anim 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (prefers-reduced-motion: reduce) {
  .vn-shake,
  .vn-pop,
  .vn-hud {
    animation: none !important;
    transition: none !important;
  }
}

/* Interior del cuadro */
.vn-box__inner {
  flex: 1;
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 18px 14px 12px;
  cursor: default;
}

.vn-box__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.vn-nameplate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vn-name {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: 0.5px;
}

.vn-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(230, 211, 138, 0.12);
  border: 1px solid rgba(230, 211, 138, 0.32);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.82rem;
  color: var(--yellow);
  line-height: 1.3;
  font-weight: 500;
}

.vn-tag__icon {
  flex-shrink: 0;
}

.vn-box__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -2px;
}

button.vn-ctrl-btn,
.vn-ctrl-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-image: none;
  color: var(--ink);
  font-size: 0.95rem;
  min-height: 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.vn-ctrl-btn .chalk-icon {
  width: 14px;
  height: 14px;
  color: currentColor;
}

button.vn-ctrl-btn:hover,
.vn-ctrl-btn:hover {
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(230, 211, 138, 0.45);
}

/* Área de texto con máquina de escribir */
.vn-text {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
  min-height: 0;
  margin-bottom: 8px;
}

.vn-text code {
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--chalk);
}

.vn-box__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  position: relative;
  flex-shrink: 0;
}

.vn-box__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -6px;
  width: calc(100% + 12px);
  height: 2px;
  transform: rotate(-0.25deg);
  transform-origin: left center;
  background: linear-gradient(
    92deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.06) 90%,
    transparent 100%
  );
  pointer-events: none;
}

.vn-counter {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vn-btn-next {
  min-height: 34px;
  padding: 4px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--yellow);
  background: rgba(230, 211, 138, 0.12);
  border: 1px solid rgba(230, 211, 138, 0.35);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.vn-btn-next:hover {
  background: rgba(230, 211, 138, 0.22);
  border-color: var(--yellow);
  transform: translateY(-1px);
}

.vn-btn-next:active {
  transform: translateY(0);
}

/* Fila de botones disparadores de Alaska (.vn-trigger-row) */
.vn-trigger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px 0;
}

/* Botón disparador dentro de secciones (.vn-trigger) */
.vn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--yellow);
  background: rgba(230, 211, 138, 0.08);
  border: 1px solid rgba(230, 211, 138, 0.32);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.vn-trigger--base {
  color: var(--teal);
  background: rgba(126, 200, 200, 0.08);
  border-color: rgba(126, 200, 200, 0.35);
}

.vn-trigger__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: currentColor;
}

.vn-trigger:hover {
  background: rgba(230, 211, 138, 0.16);
  border-color: var(--yellow);
  transform: translateY(-1px);
}

.vn-trigger--base:hover {
  background: rgba(126, 200, 200, 0.16);
  border-color: var(--teal);
}

.vn-trigger:active {
  transform: translateY(0);
}

/* Indicadores vectoriales/CSS de punto abierto vs cerrado (inmunes a la fuente) */
.va-dot {
  display: inline-block;
  width: 0.74em;
  height: 0.74em;
  border-radius: 50%;
  border: 2.2px solid currentColor;
  vertical-align: -0.09em;
  margin: 0 0.18em;
  box-sizing: border-box;
  flex-shrink: 0;
}

.va-dot--open {
  background: var(--bg, #1b261e);
}

.va-dot--closed {
  background: currentColor;
}

/* Responsive en tabletas (≤ 900px) */
@media (max-width: 900px) {
  .vn-hud {
    bottom: 1rem;
    right: 1rem;
    max-width: 720px;
    width: calc(100vw - 2rem);
  }

  .vn-fab {
    right: 1rem;
    bottom: 1rem;
  }

  .vn-box {
    min-height: 220px;
  }

  .vn-sprite-wrap {
    width: 180px;
    min-height: 220px;
    align-self: flex-end;
  }

  .vn-sprite {
    max-height: 320px;
  }

  .vn-text {
    font-size: 1.04rem;
    flex: 1;
    min-height: 0;
  }
}

/* Responsive en móviles (≤ 600px y 375px) */
@media (max-width: 600px) {
  .vn-hud {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    max-width: calc(100vw - 1rem);
  }

  .vn-fab {
    right: 0.65rem;
    bottom: 0.65rem;
    width: 58px;
    height: 58px;
  }

  .vn-box {
    flex-direction: row;
    align-items: stretch;
    min-height: 140px;
    border-radius: 8px;
  }

  .vn-sprite-wrap {
    align-self: flex-end;
    width: 105px;
    height: auto;
    min-height: 155px;
    margin-left: 4px;
    margin-bottom: -2px;
  }

  .vn-sprite {
    max-height: 180px;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
  }

  .vn-box__inner {
    align-self: stretch;
    padding: 8px 10px 8px 6px;
  }

  .vn-text {
    font-size: 0.94rem;
    flex: 1;
    min-height: 0;
    line-height: 1.45;
  }

  .vn-name {
    font-size: 1.05rem;
  }

  .vn-role {
    display: none;
  }

  .vn-tag {
    font-size: 0.74rem;
    padding: 1px 6px;
  }
}

/* Ocultar en impresión */
@media print {
  .vn-hud,
  .vn-trigger,
  .vn-fab {
    display: none !important;
  }
}

/* ---------- Botón de sonido compacto en la barra de navegación ---------- */
button.site-nav__sound-btn,
.site-nav__sound-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 4px solid transparent;
  border-image: var(--chalk-border-1);
  padding: 3px 8px;
  min-height: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: color 0.15s, opacity 0.15s;
}

.site-nav__sound-icon {
  flex-shrink: 0;
  display: inline-block;
  pointer-events: none;
}

button.site-nav__sound-btn:hover,
.site-nav__sound-btn:hover {
  color: var(--ink);
  border-image: var(--chalk-border-1-hover);
}

button.site-nav__sound-btn[aria-pressed="true"],
.site-nav__sound-btn[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
}

button.site-nav__sound-btn[aria-pressed="false"],
.site-nav__sound-btn[aria-pressed="false"] {
  color: var(--muted);
  opacity: 0.72;
}

button.site-nav__sound-btn:focus-visible,
.site-nav__sound-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ==========================================================================
   PIZARRÓN BORRADOR Y TRAZO LIBRE FLOTANTE (.scratchpad-*)
   Lápiz, goma de borrar y trazo inteligente para cálculos en pantalla.
   ========================================================================== */

.scratchpad-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9100;
  pointer-events: none;
  display: block;
  touch-action: none;
}

.scratchpad-canvas.is-active {
  pointer-events: auto;
  cursor: crosshair;
}

.scratchpad-canvas.is-eraser {
  cursor: none;
}

.scratchpad-eraser-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px dashed #ece8dc;
  background: rgba(236, 232, 220, 0.14);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 9150;
  display: none;
  box-sizing: border-box;
  will-change: transform;
}

.scratchpad-container {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9200;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.scratchpad-toggle-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(18, 28, 22, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--ink);
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
  padding: 0;
}

.scratchpad-toggle-btn:hover {
  transform: scale(1.08);
  border-color: var(--yellow);
}

.scratchpad-toggle-btn.is-open {
  background: rgba(30, 48, 36, 0.98);
  border-color: var(--yellow);
  color: var(--yellow);
}

.scratchpad-toolbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(18, 28, 22, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  max-width: calc(100vw - 5rem);
  animation: scratchpad-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scratchpad-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.scratchpad-group,
.scratchpad-colors,
.scratchpad-sizes,
.scratchpad-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scratchpad-colors {
  padding: 0 6px;
  border-left: 1px dashed var(--line, var(--border));
  border-right: 1px dashed var(--line, var(--border));
}

.scratchpad-sizes {
  padding: 0 6px;
  border-right: 1px dashed var(--line, var(--border));
}

.scratchpad-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  padding: 4px 8px;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  min-height: 32px;
  height: 32px;
  box-sizing: border-box;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.scratchpad-btn:hover {
  background: rgba(236, 232, 220, 0.1);
  color: var(--yellow);
}

.scratchpad-btn.is-active {
  background: rgba(238, 212, 159, 0.16);
  border-color: var(--yellow);
  color: var(--yellow);
}

.scratchpad-btn--icon {
  padding: 4px 7px;
}

.scratchpad-btn--close {
  color: var(--muted);
}

.scratchpad-btn--close:hover {
  color: var(--pink);
}

.scratchpad-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.scratchpad-color-dot {
  width: 18px;
  height: 18px;
  min-height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.12s, border-color 0.12s;
}

.scratchpad-color-dot:hover {
  transform: scale(1.2);
}

.scratchpad-color-dot.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  transform: scale(1.15);
}

.scratchpad-size-btn {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.12s, border-color 0.12s;
}

.scratchpad-size-preview {
  border-radius: 50%;
  background-color: var(--ink);
  display: block;
}

.scratchpad-size-btn:hover {
  background: rgba(236, 232, 220, 0.1);
}

.scratchpad-size-btn.is-active {
  border-color: var(--yellow);
  background: rgba(238, 212, 159, 0.16);
}

.scratchpad-size-btn.is-active .scratchpad-size-preview {
  background-color: var(--yellow);
}

@media (max-width: 600px) {
  .scratchpad-container {
    bottom: 0.75rem;
    left: 0.75rem;
  }

  .scratchpad-toolbar {
    max-width: calc(100vw - 4.5rem);
    padding: 6px 8px;
    gap: 6px;
  }

  .scratchpad-btn__text {
    display: none;
  }
}

@media print {
  .scratchpad-canvas,
  .scratchpad-container,
  .scratchpad-eraser-cursor {
    display: none !important;
  }
}