/* ── Two-Pointer Animation Component ──
   BBG-styled: 1px borders, system monospace, #149F76 accents
   ────────────────────────────────────────────────────────── */

.tp-anim {
  background: #fff;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 16px;
  padding: 32px 24px;
  margin: 32px 0;
}

/* ── Array cells ── */

.tp-anim__cells {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  min-height: 80px;
}

.tp-anim__cell {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  background: #fff;
  transition: all 0.35s ease;
}

.tp-anim__cell--left {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.15);
}

.tp-anim__cell--right {
  background: #FFF3E0;
  border-color: #E67E22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

.tp-anim__cell--swap {
  animation: tp-swap-pulse 0.4s ease;
}

@keyframes tp-swap-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Character value */
.tp-anim__val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

/* Index label below cell */
.tp-anim__idx {
  position: absolute;
  bottom: -20px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 11px;
  color: #999;
}

/* Pointer badge above cell */
.tp-anim__badge {
  position: absolute;
  top: -24px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.25s ease;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
}

.tp-anim__badge--visible {
  opacity: 1;
}

.tp-anim__badge--left {
  background: #149F76;
  color: #fff;
}

.tp-anim__badge--right {
  background: #E67E22;
  color: #fff;
}

/* ── Info panel ── */

.tp-anim__info {
  text-align: center;
  padding: 16px 20px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  min-height: 56px;
  margin-bottom: 20px;
}

.tp-anim__step {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
  margin-bottom: 4px;
}

.tp-anim__action {
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

.tp-anim__highlight {
  color: #149F76;
  font-weight: 600;
}

/* ── Controls ── */

.tp-anim__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tp-anim__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.tp-anim__btn svg {
  width: 14px;
  height: 14px;
}

.tp-anim__btn--primary {
  background: #149F76;
  color: #fff;
}

.tp-anim__btn--primary:hover:not(:disabled) {
  background: #118a67;
}

.tp-anim__btn--secondary {
  background: #fff;
  color: var(--color-text-primary, #282828);
  border: 1px solid var(--color-border, #D4D4D4);
}

.tp-anim__btn--secondary:hover:not(:disabled) {
  background: #F5F5F5;
}

.tp-anim__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Legend ── */

.tp-anim__legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 10px 16px;
  background: var(--color-bg-page, #FAFAFA);
  border-radius: 8px;
}

.tp-anim__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary, #666);
}

.tp-anim__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid;
}

.tp-anim__legend-swatch--left {
  background: #E8F5E9;
  border-color: #149F76;
}

.tp-anim__legend-swatch--right {
  background: #FFF3E0;
  border-color: #E67E22;
}

/* ── Swatch (inline legend markers used by newer animations) ── */

.tp-anim__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Status panel (shared by newer animations) ── */

.tp-anim__status-wrap {
  text-align: center;
  padding: 14px 20px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  min-height: 56px;
  margin-bottom: 20px;
}

.tp-anim__status {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
  margin-bottom: 4px;
}

.tp-anim__detail {
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

/* ── Default button appearance (when no --primary/--secondary modifier) ── */

.tp-anim__btn:not(.tp-anim__btn--primary):not(.tp-anim__btn--secondary) {
  background: #fff;
  color: var(--color-text-primary, #282828);
  border: 1px solid var(--color-border, #D4D4D4);
}

.tp-anim__btn:not(.tp-anim__btn--primary):not(.tp-anim__btn--secondary):hover:not(:disabled) {
  background: #F5F5F5;
}

/* ── Two-Sum Animation extras ── */

.ts-anim__target {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary, #666);
  margin-bottom: 20px;
  padding: 8px 16px;
  background: var(--color-bg-page, #FAFAFA);
  border-radius: 8px;
  border: 1px solid var(--color-border, #D4D4D4);
}

.ts-anim__target strong {
  color: #149F76;
  font-size: 18px;
}

.ts-anim__sum {
  text-align: center;
  min-height: 28px;
  margin-bottom: 16px;
}

.ts-anim__sum-calc {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  color: var(--color-text-secondary, #666);
  padding: 4px 16px;
  background: #F9F9F9;
  border-radius: 6px;
}

.ts-anim__sum-calc strong {
  color: var(--color-text-primary, #282828);
}

.ts-anim__sum-calc--match {
  background: #E8F5E9;
  color: #149F76;
}

.ts-anim__sum-calc--match strong {
  color: #149F76;
}

.ts-anim__cell--match {
  background: #E8F5E9 !important;
  border-color: #149F76 !important;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.25) !important;
}


/* ── Remove-Duplicates Animation extras ── */

.rd-anim__cells {
  min-height: 90px;
}

/* Slow pointer (write) — blue */
.rd-anim__cell--slow {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Fast pointer (read) — orange */
.rd-anim__cell--fast {
  border-color: #E67E22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

/* Unique (cleaned) portion */
.rd-anim__cell--unique {
  background: #EEF2FF;
}

/* When slow + fast overlap, slow wins border */
.rd-anim__cell--slow.rd-anim__cell--fast {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 0 0 6px rgba(230, 126, 34, 0.1);
}

/* Badge colors */
.rd-anim__badge--slow {
  background: #2563EB;
  color: #fff;
}

.rd-anim__badge--fast {
  background: #E67E22;
  color: #fff;
}

/* Legend swatches */
.rd-anim__swatch--slow {
  background: #EEF2FF;
  border-color: #2563EB;
}

.rd-anim__swatch--fast {
  background: #FFF3E0;
  border-color: #E67E22;
}

.rd-anim__swatch--done {
  background: #E8F5E9;
  border-color: #149F76;
}


/* ── Responsive ── */

@media (max-width: 480px) {
  .tp-anim {
    padding: 20px 12px;
    overflow-x: auto;
  }

  .tp-anim__cells {
    gap: 4px;
    margin-bottom: 32px;
  }

  .tp-anim__cell {
    width: 36px;
    height: 36px;
  }

  .tp-anim__val {
    font-size: 15px;
  }

  .tp-anim__idx {
    font-size: 10px;
    bottom: -16px;
  }

  .tp-anim__badge {
    top: -20px;
    font-size: 10px;
    padding: 1px 6px;
  }

  .tp-anim__controls {
    gap: 8px;
  }

  .tp-anim__btn {
    padding: 6px 14px;
    font-size: 12px;
  }

  .tp-anim__btn svg {
    width: 12px;
    height: 12px;
  }

  .tp-anim__legend {
    gap: 8px 16px;
    flex-wrap: wrap;
  }

  .tp-anim__legend-item {
    font-size: 11px;
  }

  .ts-anim__target {
    font-size: 13px;
    padding: 6px 12px;
  }

  .ts-anim__target strong {
    font-size: 15px;
  }

  .ts-anim__sum-calc {
    font-size: 14px;
  }

  /* Remove Duplicates has 10 cells — needs smaller sizing on mobile */
  .rd-anim__cells {
    gap: 3px;
  }

  .rd-anim__cells .tp-anim__cell {
    width: 27px;
    height: 27px;
  }

  .rd-anim__cells .tp-anim__val {
    font-size: 12px;
  }

  .rd-anim__cells .tp-anim__badge {
    font-size: 8px;
    padding: 1px 3px;
  }

  .rd-anim__cells .tp-anim__idx {
    font-size: 9px;
    bottom: -14px;
  }
}

@media (max-width: 360px) {
  .tp-anim {
    padding: 16px 8px;
  }

  .tp-anim__cells {
    gap: 3px;
  }

  .tp-anim__cell {
    width: 32px;
    height: 32px;
  }

  .tp-anim__val {
    font-size: 14px;
  }

  .tp-anim__btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .rd-anim__cells {
    gap: 2px;
  }

  .rd-anim__cells .tp-anim__cell {
    width: 24px;
    height: 24px;
  }

  .rd-anim__cells .tp-anim__val {
    font-size: 11px;
  }

  .rd-anim__cells .tp-anim__idx {
    font-size: 8px;
    bottom: -13px;
  }
}


/* ── Container With Most Water Animation ──
   Vertical bar chart with water overlay
   ─────────────────────────────────────── */

.cw-anim__area-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 20px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-text-secondary, #666);
  min-height: 40px;
}

.cw-anim__area-current {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 13px;
}

.cw-anim__area-current strong {
  color: #3B82F6;
}

.cw-anim__area-max {
  font-size: 13px;
  font-weight: 500;
}

.cw-anim__area-max strong {
  color: #149F76;
  font-size: 16px;
}

.cw-anim__chart {
  position: relative;
  margin-bottom: 40px;
  min-height: 200px;
}

.cw-anim__bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.cw-anim__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.cw-anim__height-label {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 11px;
  color: #999;
  margin-bottom: 4px;
}

.cw-anim__bar {
  width: 40px;
  background: #E5E7EB;
  border: 1px solid #D1D5DB;
  border-radius: 4px 4px 0 0;
  transition: all 0.35s ease;
  min-height: 2px;
}

.cw-anim__bar--left {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.15);
}

.cw-anim__bar--right {
  background: #FFF3E0;
  border-color: #E67E22;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.15);
}

.cw-anim__bar--best {
  background: #DBEAFE;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.cw-anim__bar-idx {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.cw-anim__pointer-badge {
  position: absolute;
  bottom: -32px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
}

.cw-anim__pointer-badge--left {
  background: #149F76;
  color: #fff;
}

.cw-anim__pointer-badge--right {
  background: #E67E22;
  color: #fff;
}

/* Water legend swatch */
.cw-anim__swatch--water {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.5);
}

/* ── Container Water responsive ── */

@media (max-width: 480px) {
  .cw-anim__area-display {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 6px 12px;
  }

  .cw-anim__area-current,
  .cw-anim__area-max {
    font-size: 12px;
  }

  .cw-anim__area-max strong {
    font-size: 14px;
  }

  .cw-anim__bars {
    gap: 4px;
  }

  .cw-anim__bar {
    width: 28px;
  }

  .cw-anim__height-label {
    font-size: 9px;
  }

  .cw-anim__bar-idx {
    font-size: 9px;
  }

  .cw-anim__pointer-badge {
    font-size: 9px;
    padding: 1px 5px;
    bottom: -28px;
  }
}

@media (max-width: 360px) {
  .cw-anim__bars {
    gap: 3px;
  }

  .cw-anim__bar {
    width: 24px;
  }

  .cw-anim__height-label {
    font-size: 8px;
  }

  .cw-anim__bar-idx {
    font-size: 8px;
  }

  .cw-anim__pointer-badge {
    font-size: 8px;
    padding: 1px 4px;
    bottom: -26px;
  }
}


/* ── Three Sum Animation ──
   Fixed element (i) + two-pointer sweep
   ──────────────────────────────────── */

/* Triplets display panel */
.ts3-anim__triplets {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary, #666);
  padding: 8px 16px;
  margin-bottom: 16px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  min-height: 36px;
}

.ts3-anim__triplets strong {
  color: #149F76;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 13px;
}

/* Sum display (reuses ts-anim__sum from two-sum) */
.ts3-anim__sum {
  text-align: center;
  min-height: 28px;
  margin-bottom: 16px;
}

/* Fixed element (i) — purple */
.ts3-anim__cell--fixed {
  background: #F3E8FF;
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.ts3-anim__badge--fixed {
  background: #7C3AED;
  color: #fff;
}

/* Legend swatch for fixed element */
.ts3-anim__swatch--fixed {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #F3E8FF;
  border: 1px solid #7C3AED;
}

/* ── Three Sum responsive ── */

@media (max-width: 480px) {
  .ts3-anim__triplets {
    font-size: 12px;
    padding: 6px 10px;
  }

  .ts3-anim__triplets strong {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .ts3-anim__triplets {
    font-size: 11px;
    padding: 4px 8px;
  }

  .ts3-anim__triplets strong {
    font-size: 10px;
  }
}

/* ─── Trapping Rain Water (Day 6) ─── */

.trw-anim__water-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafb;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #475569;
  flex-wrap: wrap;
  gap: 4px;
}

.trw-anim__water-current {
  font-size: 13px;
}

.trw-anim__water-current strong {
  color: #3b82f6;
  font-weight: 700;
}

.trw-anim__water-total {
  font-size: 13px;
}

.trw-anim__water-total strong {
  color: #149F76;
  font-weight: 700;
  font-size: 15px;
}

.trw-anim__chart {
  position: relative;
  margin-bottom: 12px;
  min-height: 180px;
}

.trw-anim__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.trw-anim__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 32px;
}

.trw-anim__height-label {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 2px;
  font-weight: 500;
}

.trw-anim__bar {
  width: 100%;
  background: #e2e8f0;
  border-radius: 3px 3px 0 0;
  transition: background 0.3s ease, height 0.3s ease;
  min-height: 2px;
}

.trw-anim__bar--left {
  background: #149F76;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.25);
}

.trw-anim__bar--right {
  background: #f97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}

.trw-anim__bar--processed {
  background: #cbd5e1;
}

.trw-anim__water-fill {
  width: 100%;
  background: rgba(59, 130, 246, 0.35);
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.trw-anim__bar-idx {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

.trw-anim__pointer-badge {
  position: absolute;
  bottom: -22px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}

.trw-anim__pointer-badge--left {
  background: #149F76;
}

.trw-anim__pointer-badge--right {
  background: #f97316;
}

.trw-anim__swatch--water {
  background: rgba(59, 130, 246, 0.35) !important;
}

/* Trapping Rain Water responsive */
@media (max-width: 480px) {
  .trw-anim__col {
    width: 24px;
  }

  .trw-anim__bars {
    gap: 3px;
  }

  .trw-anim__height-label {
    font-size: 9px;
  }

  .trw-anim__bar-idx {
    font-size: 8px;
  }

  .trw-anim__water-display {
    font-size: 12px;
    padding: 6px 10px;
  }

  .trw-anim__water-current,
  .trw-anim__water-total {
    font-size: 11px;
  }

  .trw-anim__water-total strong {
    font-size: 13px;
  }

  .trw-anim__pointer-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}

@media (max-width: 360px) {
  .trw-anim__col {
    width: 20px;
  }

  .trw-anim__bars {
    gap: 2px;
  }

  .trw-anim__height-label {
    font-size: 8px;
  }

  .trw-anim__bar-idx {
    font-size: 7px;
  }

  .trw-anim__pointer-badge {
    font-size: 8px;
    padding: 0 3px;
    bottom: -20px;
  }
}


/* ── Move Zeroes Animation ──
   Cell-based read/write pointer visualization
   ──────────────────────────────────────────── */

.mz-anim__cells {
  min-height: 90px;
}

/* Write pointer — green */
.mz-anim__cell--write {
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.15);
}

/* Read pointer — orange */
.mz-anim__cell--read {
  border-color: #E67E22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

/* Placed non-zero cells */
.mz-anim__cell--placed {
  background: #E8F5E9;
}

/* When write + read overlap, write wins border */
.mz-anim__cell--write.mz-anim__cell--read {
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.15), 0 0 0 6px rgba(230, 126, 34, 0.1);
}

/* Done state: zero cells grayed */
.mz-anim__cell--zero {
  background: #F5F5F5;
  color: #999;
}

.mz-anim__cell--zero .tp-anim__val {
  color: #999;
}

/* Badge colors */
.mz-anim__badge--write {
  background: #149F76;
  color: #fff;
}

.mz-anim__badge--read {
  background: #E67E22;
  color: #fff;
}

/* Legend swatches */
.mz-anim__swatch--write {
  background: #E8F5E9;
  border-color: #149F76;
}

.mz-anim__swatch--read {
  background: #FFF3E0;
  border-color: #E67E22;
}

.mz-anim__swatch--placed {
  background: #E8F5E9;
  border-color: #149F76;
}


/* ── Sliding Window Animation ──
   Cell-based window highlighting with sum/max stats
   ───────────────────────────────────────────────── */

/* Cell row */
.sw-anim__row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  min-height: 80px;
  align-items: flex-end;
}

/* Individual cell */
.sw-anim__cell {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  background: #fff;
  transition: all 0.35s ease;
}

.sw-anim__cell-value {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1A);
  line-height: 1;
}

.sw-anim__cell-index {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--color-text-secondary, #666);
  margin-top: 2px;
}

/* Window highlight — green background */
.sw-anim__cell--window {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.15);
}

/* Entering cell — blue accent */
.sw-anim__cell--entering {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
  background: #E3F2FD;
}

/* Cell that is both window AND entering */
.sw-anim__cell--window.sw-anim__cell--entering {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2), 0 0 0 6px rgba(20, 159, 118, 0.1);
  background: #E3F2FD;
}

/* Leaving cell — red/faded */
.sw-anim__cell--leaving {
  border-color: #E53935;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
  background: #FFEBEE;
  opacity: 0.7;
}

/* Stats row */
.sw-anim__stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 16px;
  padding: 8px 16px;
  background: var(--color-bg-page, #FAFAFA);
  border-radius: 8px;
}

.sw-anim__stat {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
}

.sw-anim__stat--max {
  color: #149F76;
}

/* Legend items — colored dot before text */
.sw-anim__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary, #666);
}

.sw-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid;
}

.sw-anim__legend--window::before {
  background: #E8F5E9;
  border-color: #149F76;
}

.sw-anim__legend--entering::before {
  background: #E3F2FD;
  border-color: #2196F3;
}

.sw-anim__legend--leaving::before {
  background: #FFEBEE;
  border-color: #E53935;
}

/* ── Sliding Window responsive ── */
@media (max-width: 480px) {
  .sw-anim__cell {
    width: 46px;
    height: 46px;
  }

  .sw-anim__row {
    gap: 8px;
  }

  .sw-anim__cell-value {
    font-size: 16px;
  }

  .sw-anim__cell-index {
    font-size: 9px;
  }

  .sw-anim__stats {
    gap: 20px;
  }

  .sw-anim__stat {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .sw-anim__cell {
    width: 40px;
    height: 40px;
  }

  .sw-anim__row {
    gap: 4px;
  }

  .sw-anim__cell-value {
    font-size: 14px;
  }

  .sw-anim__cell-index {
    font-size: 8px;
  }

  .sw-anim__stat {
    font-size: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════
   LONGEST SUBSTRING Animation — Day 10
   Variable-size sliding window with hash set display.
   CSS prefix: .ls-anim__
   ═══════════════════════════════════════════════════════════ */

.ls-anim__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ── Badge row (L/R pointers) ── */
.ls-anim__badge-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 22px;
}

.ls-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  min-height: 20px;
  border-radius: 4px;
}

.ls-anim__badge--left {
  background: #FFF3E0;
  color: #E65100;
  border: 1px solid #FFB74D;
}

.ls-anim__badge--right {
  background: #E3F2FD;
  color: #1565C0;
  border: 1px solid #64B5F6;
}

/* When both L and R are at same position */
.ls-anim__badge--left.ls-anim__badge--right {
  background: linear-gradient(135deg, #FFF3E0 50%, #E3F2FD 50%);
  color: #4A148C;
  border: 1px solid #CE93D8;
}

/* ── Cells row ── */
.ls-anim__row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.ls-anim__cell {
  width: 42px;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s ease;
  position: relative;
}

.ls-anim__cell-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}

.ls-anim__cell-index {
  font-size: 10px;
  color: #999;
  line-height: 1;
}

/* Window highlight (in current window) */
.ls-anim__cell--window {
  background: #E8F5E9;
  border-color: #149F76;
}

.ls-anim__cell--window .ls-anim__cell-value {
  color: #0D6B4F;
}

/* Entering cell (right pointer just added) */
.ls-anim__cell--entering {
  border-color: #2196F3;
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Evicted cell (removed from window) */
.ls-anim__cell--evicted {
  background: #FFEBEE;
  border-color: #E53935;
  opacity: 0.6;
}

.ls-anim__cell--evicted .ls-anim__cell-value {
  color: #C62828;
  text-decoration: line-through;
}

/* ── Set display ── */
.ls-anim__set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 6px 16px;
  background: #F5F5F5;
  border-radius: 6px;
  border: 1px solid #E0E0E0;
}

.ls-anim__set-label {
  font-weight: 700;
  color: #555;
}

.ls-anim__set-content {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: #149F76;
  font-weight: 600;
}

/* ── Stats row ── */
.ls-anim__stats {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.ls-anim__stat {
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.ls-anim__stat--max {
  color: #149F76;
}

/* ── Legend ── */
.ls-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  margin-right: 14px;
}

.ls-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid;
}

.ls-anim__legend--window::before {
  background: #E8F5E9;
  border-color: #149F76;
}

.ls-anim__legend--entering::before {
  background: #E3F2FD;
  border-color: #2196F3;
}

.ls-anim__legend--evicted::before {
  background: #FFEBEE;
  border-color: #E53935;
}

/* ── Longest Substring responsive ── */
@media (max-width: 480px) {
  .ls-anim__cell {
    width: 38px;
    height: 44px;
  }

  .ls-anim__row {
    gap: 6px;
  }

  .ls-anim__badge-row {
    gap: 6px;
  }

  .ls-anim__badge-slot {
    width: 38px;
    font-size: 10px;
  }

  .ls-anim__cell-value {
    font-size: 16px;
  }

  .ls-anim__cell-index {
    font-size: 9px;
  }

  .ls-anim__set-row {
    font-size: 12px;
    padding: 4px 10px;
  }

  .ls-anim__stats {
    gap: 16px;
  }

  .ls-anim__stat {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .ls-anim__cell {
    width: 32px;
    height: 38px;
  }

  .ls-anim__row {
    gap: 4px;
  }

  .ls-anim__badge-row {
    gap: 4px;
  }

  .ls-anim__badge-slot {
    width: 32px;
    font-size: 9px;
  }

  .ls-anim__cell-value {
    font-size: 14px;
  }

  .ls-anim__cell-index {
    font-size: 8px;
  }

  .ls-anim__set-row {
    font-size: 11px;
    padding: 3px 8px;
  }

  .ls-anim__stat {
    font-size: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════
   MINIMUM WINDOW SUBSTRING — Day 11
   CSS prefix: .mw-anim__
   13 cells: desktop 26px + 3px gap = 374px
   ═══════════════════════════════════════════════════════════ */

.mw-anim__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
}

/* Badge row for L/R pointers */
.mw-anim__badge-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  min-height: 22px;
}

.mw-anim__badge-slot {
  width: 26px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: monospace;
  border-radius: 3px;
}

.mw-anim__badge--left {
  background: #f97316;
  color: #fff;
}

.mw-anim__badge--right {
  background: #3b82f6;
  color: #fff;
}

.mw-anim__badge--left.mw-anim__badge--right {
  background: linear-gradient(135deg, #f97316 50%, #3b82f6 50%);
  color: #fff;
}

/* Cells row */
.mw-anim__row {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.mw-anim__cell {
  width: 26px;
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s ease;
}

.mw-anim__cell-value {
  font-size: 13px;
  font-weight: 600;
  font-family: monospace;
  line-height: 1;
}

.mw-anim__cell-index {
  font-size: 8px;
  color: #9ca3af;
  line-height: 1;
  margin-top: 1px;
}

/* Cell states */
.mw-anim__cell--window {
  background: #dcfce7;
  border-color: #149F76;
}

.mw-anim__cell--entering {
  border-color: #3b82f6;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.mw-anim__cell--shrunk {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.mw-anim__cell--best {
  background: #fef9c3;
  border-color: #eab308;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.3);
}

/* Frequency display */
.mw-anim__freq-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 6px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.mw-anim__freq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.25s ease;
}

.mw-anim__freq-item--satisfied {
  background: #dcfce7;
  border-color: #149F76;
}

.mw-anim__freq-char {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
  color: #374151;
}

.mw-anim__freq-count {
  font-size: 11px;
  font-family: monospace;
  color: #6b7280;
}

.mw-anim__freq-item--satisfied .mw-anim__freq-count {
  color: #149F76;
  font-weight: 600;
}

/* Stats row */
.mw-anim__stats {
  display: flex;
  gap: 20px;
  justify-content: center;
  font-size: 13px;
}

.mw-anim__stat {
  font-family: monospace;
  color: #374151;
}

.mw-anim__stat--best {
  color: #149F76;
  font-weight: 600;
}

/* Legend items */
.mw-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
}

.mw-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid;
}

.mw-anim__legend--window::before {
  background: #dcfce7;
  border-color: #149F76;
}

.mw-anim__legend--entering::before {
  background: #fff;
  border-color: #3b82f6;
}

.mw-anim__legend--shrunk::before {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.mw-anim__legend--best::before {
  background: #fef9c3;
  border-color: #eab308;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .mw-anim__cell {
    width: 24px;
    height: 30px;
  }

  .mw-anim__row {
    gap: 2px;
  }

  .mw-anim__badge-row {
    gap: 2px;
  }

  .mw-anim__badge-slot {
    width: 24px;
    font-size: 8px;
  }

  .mw-anim__cell-value {
    font-size: 11px;
  }

  .mw-anim__cell-index {
    font-size: 7px;
  }

  .mw-anim__freq-row {
    gap: 4px;
    padding: 4px 8px;
  }

  .mw-anim__freq-item {
    padding: 3px 6px;
  }

  .mw-anim__freq-char {
    font-size: 12px;
  }

  .mw-anim__freq-count {
    font-size: 10px;
  }

  .mw-anim__stats {
    font-size: 12px;
    gap: 12px;
  }

  .mw-anim__stat {
    font-size: 12px;
  }

  .mw-anim__container {
    gap: 8px;
    padding: 16px 8px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .mw-anim__cell {
    width: 20px;
    height: 26px;
  }

  .mw-anim__row {
    gap: 2px;
  }

  .mw-anim__badge-row {
    gap: 2px;
  }

  .mw-anim__badge-slot {
    width: 20px;
    font-size: 7px;
  }

  .mw-anim__cell-value {
    font-size: 10px;
  }

  .mw-anim__cell-index {
    font-size: 6px;
  }

  .mw-anim__freq-row {
    gap: 3px;
    padding: 3px 6px;
  }

  .mw-anim__freq-item {
    padding: 2px 4px;
  }

  .mw-anim__freq-char {
    font-size: 10px;
  }

  .mw-anim__freq-count {
    font-size: 9px;
  }

  .mw-anim__stats {
    font-size: 11px;
  }

  .mw-anim__stat {
    font-size: 11px;
  }
}


/* ═══════════════════════════════════════════════════════
   Permutation in String — Day 12
   Fixed-size sliding window with frequency maps.
   CSS prefix: .ps-anim__
   8 cells: desktop 42px + 8px gap = 392px
            480px: 38px + 6px = 346px
            360px: 32px + 4px = 284px
   ═══════════════════════════════════════════════════════ */

.ps-anim__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

/* Badge row */
.ps-anim__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 20px;
}

.ps-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  min-height: 16px;
}

.ps-anim__badge--left {
  color: #149F76;
}

.ps-anim__badge--right {
  color: #f97316;
}

/* Cell row */
.ps-anim__row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ps-anim__cell {
  width: 42px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s ease;
}

.ps-anim__cell-value {
  font-size: 14px;
  font-weight: 600;
  font-family: monospace;
  color: #1f2937;
  line-height: 1;
}

.ps-anim__cell-index {
  font-size: 9px;
  color: #9ca3af;
  font-family: monospace;
  line-height: 1;
  margin-top: 2px;
}

/* Cell states */
.ps-anim__cell--window {
  background: #dcfce7;
  border-color: #149F76;
}

.ps-anim__cell--entering {
  border-color: #3b82f6;
  border-width: 2px;
}

.ps-anim__cell--leaving {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.ps-anim__cell--match {
  background: #fef9c3;
  border-color: #eab308;
  border-width: 2px;
}

/* Frequency row */
.ps-anim__freq-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.ps-anim__freq-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.25s ease;
}

.ps-anim__freq-item--satisfied {
  background: #dcfce7;
  border-color: #149F76;
}

.ps-anim__freq-char {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
}

.ps-anim__freq-count {
  font-size: 12px;
  font-family: monospace;
  color: #6b7280;
}

/* Stats */
.ps-anim__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 13px;
}

.ps-anim__stat {
  font-family: monospace;
  color: #374151;
}

.ps-anim__stat--result {
  color: #6b7280;
}

.ps-anim__stat--found {
  color: #149F76;
  font-weight: 600;
}

/* Legend items */
.ps-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
}

.ps-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid;
}

.ps-anim__legend--window::before {
  background: #dcfce7;
  border-color: #149F76;
}

.ps-anim__legend--entering::before {
  background: #fff;
  border-color: #3b82f6;
}

.ps-anim__legend--leaving::before {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.ps-anim__legend--match::before {
  background: #fef9c3;
  border-color: #eab308;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .ps-anim__cell {
    width: 38px;
    height: 32px;
  }

  .ps-anim__row {
    gap: 6px;
  }

  .ps-anim__badge-row {
    gap: 6px;
  }

  .ps-anim__badge-slot {
    width: 38px;
    font-size: 9px;
  }

  .ps-anim__cell-value {
    font-size: 12px;
  }

  .ps-anim__cell-index {
    font-size: 8px;
  }

  .ps-anim__freq-row {
    gap: 6px;
    padding: 4px 8px;
  }

  .ps-anim__freq-item {
    padding: 3px 6px;
  }

  .ps-anim__freq-char {
    font-size: 12px;
  }

  .ps-anim__freq-count {
    font-size: 10px;
  }

  .ps-anim__stats {
    font-size: 12px;
    gap: 12px;
  }

  .ps-anim__stat {
    font-size: 12px;
  }

  .ps-anim__container {
    gap: 8px;
    padding: 16px 8px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .ps-anim__cell {
    width: 32px;
    height: 28px;
  }

  .ps-anim__row {
    gap: 4px;
  }

  .ps-anim__badge-row {
    gap: 4px;
  }

  .ps-anim__badge-slot {
    width: 32px;
    font-size: 8px;
  }

  .ps-anim__cell-value {
    font-size: 11px;
  }

  .ps-anim__cell-index {
    font-size: 7px;
  }

  .ps-anim__freq-row {
    gap: 4px;
    padding: 3px 6px;
  }

  .ps-anim__freq-item {
    padding: 2px 4px;
  }

  .ps-anim__freq-char {
    font-size: 11px;
  }

  .ps-anim__freq-count {
    font-size: 9px;
  }

  .ps-anim__stats {
    font-size: 11px;
  }

  .ps-anim__stat {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════
   Longest Repeating Character Replacement — Day 13
   Variable-size sliding window with max-frequency budget.
   CSS prefix: .lr-anim__
   7 cells: desktop 42px + 8px gap = 342px
            480px: 38px + 6px = 302px
            360px: 32px + 4px = 244px
   ═══════════════════════════════════════════════════════ */

.lr-anim__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

/* Badge row */
.lr-anim__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 20px;
}

.lr-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  min-height: 16px;
}

.lr-anim__badge--left {
  color: #149F76;
}

.lr-anim__badge--right {
  color: #f97316;
}

/* Cell row */
.lr-anim__row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.lr-anim__cell {
  width: 42px;
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s ease;
}

.lr-anim__cell-value {
  font-size: 14px;
  font-weight: 600;
  font-family: monospace;
  color: #1f2937;
  line-height: 1;
}

.lr-anim__cell-index {
  font-size: 9px;
  color: #9ca3af;
  font-family: monospace;
  line-height: 1;
  margin-top: 2px;
}

/* Cell states */
.lr-anim__cell--window {
  background: #dcfce7;
  border-color: #149F76;
}

.lr-anim__cell--entering {
  border-color: #3b82f6;
  border-width: 2px;
}

.lr-anim__cell--shrunk {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.lr-anim__cell--best {
  background: #fef9c3;
  border-color: #eab308;
  border-width: 2px;
}

/* Frequency row */
.lr-anim__freq-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.lr-anim__freq-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: all 0.25s ease;
}

.lr-anim__freq-item--max {
  background: #dcfce7;
  border-color: #149F76;
}

.lr-anim__freq-char {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
}

.lr-anim__freq-count {
  font-size: 12px;
  font-family: monospace;
  color: #6b7280;
}

/* Stats */
.lr-anim__stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}

.lr-anim__stat {
  font-family: monospace;
  color: #374151;
}

.lr-anim__stat--result {
  color: #6b7280;
}

.lr-anim__stat--found {
  color: #149F76;
  font-weight: 600;
}

.lr-anim__stat--over {
  color: #ef4444;
  font-weight: 600;
}

/* Legend items */
.lr-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
}

.lr-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid;
}

.lr-anim__legend--window::before {
  background: #dcfce7;
  border-color: #149F76;
}

.lr-anim__legend--entering::before {
  background: #fff;
  border-color: #3b82f6;
}

.lr-anim__legend--shrunk::before {
  background: #fef2f2;
  border-color: #ef4444;
  opacity: 0.6;
}

.lr-anim__legend--best::before {
  background: #fef9c3;
  border-color: #eab308;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .lr-anim__cell {
    width: 38px;
    height: 32px;
  }

  .lr-anim__row {
    gap: 6px;
  }

  .lr-anim__badge-row {
    gap: 6px;
  }

  .lr-anim__badge-slot {
    width: 38px;
    font-size: 9px;
  }

  .lr-anim__cell-value {
    font-size: 12px;
  }

  .lr-anim__cell-index {
    font-size: 8px;
  }

  .lr-anim__freq-row {
    gap: 6px;
    padding: 4px 8px;
  }

  .lr-anim__freq-item {
    padding: 3px 6px;
  }

  .lr-anim__freq-char {
    font-size: 12px;
  }

  .lr-anim__freq-count {
    font-size: 10px;
  }

  .lr-anim__stats {
    font-size: 12px;
    gap: 8px;
  }

  .lr-anim__stat {
    font-size: 12px;
  }

  .lr-anim__container {
    gap: 8px;
    padding: 16px 8px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .lr-anim__cell {
    width: 32px;
    height: 28px;
  }

  .lr-anim__row {
    gap: 4px;
  }

  .lr-anim__badge-row {
    gap: 4px;
  }

  .lr-anim__badge-slot {
    width: 32px;
    font-size: 8px;
  }

  .lr-anim__cell-value {
    font-size: 11px;
  }

  .lr-anim__cell-index {
    font-size: 7px;
  }

  .lr-anim__freq-row {
    gap: 4px;
    padding: 3px 6px;
  }

  .lr-anim__freq-item {
    padding: 2px 4px;
  }

  .lr-anim__freq-char {
    font-size: 11px;
  }

  .lr-anim__freq-count {
    font-size: 9px;
  }

  .lr-anim__stats {
    font-size: 11px;
  }

  .lr-anim__stat {
    font-size: 11px;
  }
}


/* ══════════════════════════════════════════════════════════
   Fruit Into Baskets Animation — Day 14
   Variable-size window, at most 2 distinct fruit types.
   CSS prefix: .fb-anim__
   ══════════════════════════════════════════════════════════ */

.fb-anim__container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Badge row (L/R pointers) ── */
.fb-anim__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 20px;
}

.fb-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  min-height: 16px;
  line-height: 16px;
}

.fb-anim__badge--left {
  color: #149F76;
}

.fb-anim__badge--right {
  color: #E67E22;
}

/* ── Cell row ── */
.fb-anim__row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.fb-anim__cell {
  width: 42px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.fb-anim__cell-value {
  font-size: 15px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1.2;
}

.fb-anim__cell-index {
  font-size: 9px;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Cell states */
.fb-anim__cell--window {
  background: #E8F5E9;
  border-color: #149F76;
}

.fb-anim__cell--entering {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.fb-anim__cell--shrunk {
  background: #FFEBEE;
  border-color: #EF5350;
  opacity: 0.5;
}

.fb-anim__cell--best {
  background: #FFF9C4;
  border-color: #F9A825;
  box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.25);
}

/* ── Basket display ── */
.fb-anim__basket-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #F9FAFB;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
}

.fb-anim__basket-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.fb-anim__basket-items {
  display: flex;
  gap: 8px;
}

.fb-anim__basket-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #E8F5E9;
  border: 1px solid #149F76;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.fb-anim__basket-type {
  font-size: 13px;
  font-weight: 700;
  color: #149F76;
}

.fb-anim__basket-count {
  font-size: 11px;
  color: #555;
}

/* ── Stats row ── */
.fb-anim__stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.fb-anim__stat {
  font-size: 13px;
  color: #555;
}

.fb-anim__stat--result {
  font-weight: 700;
  color: #333;
}

.fb-anim__stat--over {
  color: #EF5350;
  font-weight: 700;
}

.fb-anim__stat--found {
  color: #149F76;
}

/* ── Legend ── */
.fb-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  margin-right: 12px;
}

.fb-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid;
}

.fb-anim__legend--window::before {
  background: #E8F5E9;
  border-color: #149F76;
}

.fb-anim__legend--entering::before {
  background: #E3F2FD;
  border-color: #2196F3;
}

.fb-anim__legend--shrunk::before {
  background: #FFEBEE;
  border-color: #EF5350;
  opacity: 0.5;
}

.fb-anim__legend--best::before {
  background: #FFF9C4;
  border-color: #F9A825;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .fb-anim__cell {
    width: 38px;
    height: 34px;
  }

  .fb-anim__row {
    gap: 6px;
  }

  .fb-anim__badge-row {
    gap: 6px;
  }

  .fb-anim__badge-slot {
    width: 38px;
    font-size: 9px;
  }

  .fb-anim__cell-value {
    font-size: 13px;
  }

  .fb-anim__cell-index {
    font-size: 8px;
  }

  .fb-anim__basket-row {
    padding: 6px 8px;
    gap: 6px;
  }

  .fb-anim__basket-label {
    font-size: 11px;
  }

  .fb-anim__basket-item {
    padding: 2px 6px;
  }

  .fb-anim__basket-type {
    font-size: 12px;
  }

  .fb-anim__basket-count {
    font-size: 10px;
  }

  .fb-anim__stats {
    font-size: 12px;
    gap: 12px;
  }

  .fb-anim__stat {
    font-size: 12px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .fb-anim__cell {
    width: 32px;
    height: 28px;
  }

  .fb-anim__row {
    gap: 4px;
  }

  .fb-anim__badge-row {
    gap: 4px;
  }

  .fb-anim__badge-slot {
    width: 32px;
    font-size: 8px;
  }

  .fb-anim__cell-value {
    font-size: 11px;
  }

  .fb-anim__cell-index {
    font-size: 7px;
  }

  .fb-anim__basket-row {
    padding: 4px 6px;
    gap: 4px;
  }

  .fb-anim__basket-label {
    font-size: 10px;
  }

  .fb-anim__basket-items {
    gap: 4px;
  }

  .fb-anim__basket-item {
    padding: 2px 4px;
  }

  .fb-anim__basket-type {
    font-size: 11px;
  }

  .fb-anim__basket-count {
    font-size: 9px;
  }

  .fb-anim__stats {
    font-size: 11px;
    gap: 8px;
  }

  .fb-anim__stat {
    font-size: 11px;
  }
}


/* ── Subarrays with K Different Integers Animation (Day 15) ──
   Dual-window: atMost(K) on top, atMost(K-1) on bottom.
   CSS prefix: .sk-anim__
   ──────────────────────────────────────────────────────────── */

.sk-anim__container {
  padding: 24px 20px;
}

.sk-anim__section {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 12px;
  background: #FAFAFA;
}

.sk-anim__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}

.sk-anim__section-title--top {
  background: #E8F5E9;
  color: #149F76;
}

.sk-anim__section-title--bot {
  background: #FFF3E0;
  color: #E67E22;
}

/* Badge row */
.sk-anim__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 18px;
}

.sk-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 16px;
  line-height: 16px;
}

.sk-anim__badge--left {
  color: #149F76;
}

.sk-anim__badge--right {
  color: #E67E22;
}

/* Cell row */
.sk-anim__row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.sk-anim__cell {
  position: relative;
  width: 42px;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.sk-anim__cell-value {
  font-size: 14px;
  font-weight: 600;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: #1a1a1a;
  line-height: 1;
}

.sk-anim__cell-index {
  font-size: 9px;
  color: #999;
  line-height: 1;
  margin-top: 2px;
}

.sk-anim__cell--window {
  background: #E8F5E9;
  border-color: #149F76;
}

.sk-anim__cell--entering {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.sk-anim__cell--shrunk {
  background: #FFEBEE;
  border-color: #EF5350;
  opacity: 0.6;
}

/* Freq display */
.sk-anim__freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  min-height: 32px;
  margin-bottom: 10px;
}

.sk-anim__freq-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  flex-shrink: 0;
}

.sk-anim__freq-items {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sk-anim__freq-item {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 6px;
  background: #F5F5F5;
}

.sk-anim__freq-type {
  font-size: 12px;
  font-weight: 700;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: #149F76;
}

.sk-anim__freq-count {
  font-size: 10px;
  color: #666;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Stats row */
.sk-anim__stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: #333;
}

.sk-anim__stat {
  font-size: 13px;
}

.sk-anim__stat--result {
  font-weight: 700;
  color: #149F76;
}

.sk-anim__stat--over {
  color: #EF5350;
}

/* Result row (the formula) */
.sk-anim__result-row {
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: #333;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.sk-anim__result-row--done {
  background: #E8F5E9;
  border-color: #149F76;
  color: #149F76;
}

/* Legend items */
.sk-anim__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  margin-right: 12px;
}

.sk-anim__legend-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #D4D4D4;
}

.sk-anim__legend--window::before {
  background: #E8F5E9;
  border-color: #149F76;
}

.sk-anim__legend--entering::before {
  background: #E3F2FD;
  border-color: #2196F3;
}

.sk-anim__legend--shrunk::before {
  background: #FFEBEE;
  border-color: #EF5350;
  opacity: 0.6;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .sk-anim__container {
    padding: 16px 12px;
  }

  .sk-anim__section {
    padding: 10px;
    margin-bottom: 14px;
  }

  .sk-anim__section-title {
    font-size: 11px;
  }

  .sk-anim__cell {
    width: 36px;
    height: 32px;
  }

  .sk-anim__row {
    gap: 6px;
  }

  .sk-anim__badge-row {
    gap: 6px;
  }

  .sk-anim__badge-slot {
    width: 36px;
    font-size: 9px;
  }

  .sk-anim__cell-value {
    font-size: 12px;
  }

  .sk-anim__cell-index {
    font-size: 7px;
  }

  .sk-anim__freq-row {
    padding: 4px 6px;
    gap: 4px;
  }

  .sk-anim__freq-label {
    font-size: 10px;
  }

  .sk-anim__freq-items {
    gap: 4px;
  }

  .sk-anim__freq-item {
    padding: 2px 4px;
  }

  .sk-anim__freq-type {
    font-size: 11px;
  }

  .sk-anim__freq-count {
    font-size: 9px;
  }

  .sk-anim__stats {
    font-size: 11px;
    gap: 8px;
  }

  .sk-anim__stat {
    font-size: 11px;
  }

  .sk-anim__result-row {
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .sk-anim__cell {
    width: 30px;
    height: 28px;
  }

  .sk-anim__row {
    gap: 4px;
  }

  .sk-anim__badge-row {
    gap: 4px;
  }

  .sk-anim__badge-slot {
    width: 30px;
    font-size: 8px;
  }

  .sk-anim__cell-value {
    font-size: 11px;
  }

  .sk-anim__cell-index {
    font-size: 7px;
  }

  .sk-anim__result-row {
    font-size: 10px;
    padding: 6px 8px;
  }
}


/* ══════════════════════════════════════════════════════════
   Two Sum Hash Map Animation — Day 17
   Hash map lookup: for each num, check complement in map.
   CSS prefix: .tsh-anim__
   ══════════════════════════════════════════════════════════ */

/* ── Target display ── */
.tsh-anim__target-row {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #149F76;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: #E8F5E9;
  border: 1px solid #B2DFDB;
  border-radius: 8px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

/* center the target row within tp-anim */
.tsh-anim {
  text-align: center;
}

.tsh-anim > * {
  text-align: left;
}

.tsh-anim > .tsh-anim__target-row {
  text-align: center;
}

/* ── Badge row (pointer labels above cells) ── */
.tsh-anim__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 20px;
}

.tsh-anim__badge-slot {
  width: 42px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  min-height: 16px;
  line-height: 16px;
  color: #888;
}

.tsh-anim__badge--active {
  color: #2196F3;
}

.tsh-anim__badge--match {
  color: #149F76;
  font-size: 12px;
}

/* ── Cell row (array elements) ── */
.tsh-anim__row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tsh-anim__cell {
  width: 42px;
  height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.tsh-anim__cell-value {
  font-size: 15px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  line-height: 1.2;
}

.tsh-anim__cell-index {
  font-size: 9px;
  color: #888;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Cell states */
.tsh-anim__cell--seen {
  background: #FFF9C4;
  border-color: #F9A825;
}

.tsh-anim__cell--current {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.tsh-anim__cell--match {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.25);
}

/* ── Hash Map display ── */
.tsh-anim__map-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  min-height: 40px;
}

.tsh-anim__map-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  flex-shrink: 0;
  padding-top: 3px;
}

.tsh-anim__map-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tsh-anim__map-empty {
  font-size: 13px;
  color: #999;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  padding-top: 2px;
}

.tsh-anim__map-entry {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #333;
  transition: all 0.3s ease;
}

.tsh-anim__map-entry--new {
  background: #E3F2FD;
  border-color: #2196F3;
  color: #1565C0;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

.tsh-anim__map-entry--match {
  background: #E8F5E9;
  border-color: #149F76;
  color: #149F76;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.2);
}

/* ── Complement display row ── */
.tsh-anim__comp-row {
  text-align: center;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #555;
  margin-bottom: 12px;
  min-height: 20px;
}

.tsh-anim__comp-row strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .tsh-anim__cell {
    width: 38px;
    height: 34px;
  }

  .tsh-anim__row {
    gap: 6px;
  }

  .tsh-anim__badge-row {
    gap: 6px;
  }

  .tsh-anim__badge-slot {
    width: 38px;
    font-size: 9px;
  }

  .tsh-anim__cell-value {
    font-size: 13px;
  }

  .tsh-anim__cell-index {
    font-size: 8px;
  }

  .tsh-anim__target-row {
    font-size: 12px;
    padding: 4px 10px;
  }

  .tsh-anim__map-wrap {
    padding: 8px 10px;
    gap: 6px;
  }

  .tsh-anim__map-label {
    font-size: 11px;
  }

  .tsh-anim__map-entry {
    font-size: 11px;
    padding: 2px 6px;
  }

  .tsh-anim__comp-row {
    font-size: 12px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .tsh-anim__cell {
    width: 32px;
    height: 28px;
  }

  .tsh-anim__row {
    gap: 4px;
  }

  .tsh-anim__badge-row {
    gap: 4px;
  }

  .tsh-anim__badge-slot {
    width: 32px;
    font-size: 8px;
  }

  .tsh-anim__cell-value {
    font-size: 11px;
  }

  .tsh-anim__cell-index {
    font-size: 7px;
  }

  .tsh-anim__target-row {
    font-size: 11px;
    padding: 3px 8px;
  }

  .tsh-anim__map-wrap {
    padding: 6px 8px;
    gap: 4px;
    flex-direction: column;
  }

  .tsh-anim__map-label {
    font-size: 10px;
    padding-top: 0;
  }

  .tsh-anim__map-items {
    gap: 4px;
  }

  .tsh-anim__map-entry {
    font-size: 10px;
    padding: 2px 4px;
  }

  .tsh-anim__comp-row {
    font-size: 11px;
  }
}


/* ══════════════════════════════════════════════════════════
   Group Anagrams Animation — Day 18
   Sort-key grouping: sort each word, group by sorted form.
   CSS prefix: .ga-anim__
   ══════════════════════════════════════════════════════════ */

/* ── Section labels ── */
.ga-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* ── Word row (input words) ── */
.ga-anim__word-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ga-anim__word-cell {
  padding: 6px 12px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  transition: all 0.3s ease;
}

.ga-anim__word-cell--current {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.ga-anim__word-cell--processed {
  background: #F5F5F5;
  border-color: #D4D4D4;
  color: #999;
}

/* ── Sort display row ── */
.ga-anim__sort-row {
  text-align: center;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #555;
  margin-bottom: 16px;
  min-height: 20px;
}

.ga-anim__sort-row strong {
  color: #149F76;
  font-weight: 700;
}

/* ── Groups display ── */
.ga-anim__groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 50px;
}

.ga-anim__empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 12px;
}

.ga-anim__group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  background: #F9FAFB;
  transition: all 0.3s ease;
}

.ga-anim__group-key {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  flex-shrink: 0;
  min-width: 40px;
}

.ga-anim__group-words {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ga-anim__group-word {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.ga-anim__group-word--new {
  background: #fff;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .ga-anim__word-cell {
    padding: 4px 8px;
    font-size: 12px;
  }

  .ga-anim__word-row {
    gap: 6px;
  }

  .ga-anim__sort-row {
    font-size: 12px;
  }

  .ga-anim__group {
    padding: 6px 10px;
    gap: 6px;
  }

  .ga-anim__group-key {
    font-size: 11px;
    min-width: 32px;
  }

  .ga-anim__group-word {
    font-size: 11px;
    padding: 2px 6px;
  }

  .ga-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .ga-anim__word-cell {
    padding: 3px 6px;
    font-size: 11px;
  }

  .ga-anim__word-row {
    gap: 4px;
  }

  .ga-anim__sort-row {
    font-size: 11px;
  }

  .ga-anim__group {
    padding: 4px 8px;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }

  .ga-anim__group-key {
    font-size: 10px;
  }

  .ga-anim__group-words {
    gap: 4px;
  }

  .ga-anim__group-word {
    font-size: 10px;
    padding: 2px 4px;
  }

  .ga-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   Day 19 — Valid Anagram Animation  (.va-anim__)
   ═══════════════════════════════════════════════════════════ */

.va-anim {
  max-width: 540px;
}

.va-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 14px;
}

.va-anim__section-label:first-child {
  margin-top: 0;
}

.va-anim__char-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.va-anim__char-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
  transition: all 0.3s ease;
}

.va-anim__char-cell--current {
  border-color: #149F76;
  background: #E8F5E9;
  color: #0B6E4F;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.15);
}

.va-anim__char-cell--processed {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
}

.va-anim__char-cell--negative {
  border-color: #EF5350;
  background: #FFEBEE;
  color: #C62828;
  box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.15);
}

/* Frequency map */
.va-anim__map-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 42px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.va-anim__empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 0;
}

.va-anim__map-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.3s ease;
  min-width: 36px;
}

.va-anim__map-entry--active {
  border-color: #149F76;
  background: #E8F5E9;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.12);
}

.va-anim__map-entry--negative {
  border-color: #EF5350;
  background: #FFEBEE;
  box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.12);
}

.va-anim__map-entry--zero {
  opacity: 0.5;
}

.va-anim__map-key {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
}

.va-anim__map-val {
  font-size: 16px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #149F76;
}

.va-anim__map-entry--negative .va-anim__map-val {
  color: #EF5350;
}

.va-anim__map-entry--zero .va-anim__map-val {
  color: #94a3b8;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .va-anim__char-cell {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .va-anim__char-row {
    gap: 3px;
  }

  .va-anim__map-entry {
    padding: 3px 6px;
    min-width: 30px;
  }

  .va-anim__map-key {
    font-size: 11px;
  }

  .va-anim__map-val {
    font-size: 14px;
  }

  .va-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .va-anim__char-cell {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .va-anim__char-row {
    gap: 2px;
  }

  .va-anim__map-entry {
    padding: 2px 4px;
    min-width: 26px;
  }

  .va-anim__map-key {
    font-size: 10px;
  }

  .va-anim__map-val {
    font-size: 12px;
  }

  .va-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   Day 20 — Top K Frequent Elements Animation  (.tkf-anim__)
   ═══════════════════════════════════════════════════════════ */

.tkf-anim {
  max-width: 560px;
}

.tkf-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 14px;
}

.tkf-anim__section-label:first-child {
  margin-top: 0;
}

.tkf-anim__arr-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tkf-anim__arr-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
  transition: all 0.3s ease;
}

.tkf-anim__arr-cell--current {
  border-color: #149F76;
  background: #E8F5E9;
  color: #0B6E4F;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.15);
}

.tkf-anim__arr-cell--processed {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
}

/* Frequency map */
.tkf-anim__map-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 42px;
  margin-bottom: 4px;
}

.tkf-anim__empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 0;
}

.tkf-anim__map-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.3s ease;
  min-width: 36px;
}

.tkf-anim__map-entry--active {
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.12);
}

.tkf-anim__map-key {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
}

.tkf-anim__map-val {
  font-size: 16px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #149F76;
}

/* Buckets */
.tkf-anim__buckets-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.tkf-anim__bucket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.tkf-anim__bucket-row--active {
  border-color: #149F76;
  background: #E8F5E9;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.12);
}

.tkf-anim__bucket-idx {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #64748b;
  min-width: 24px;
}

.tkf-anim__bucket-contents {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tkf-anim__bucket-chip {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.tkf-anim__bucket-chip--highlight {
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.2);
}

.tkf-anim__empty-bucket {
  font-size: 11px;
  color: #cbd5e1;
  font-style: italic;
}

/* Result */
.tkf-anim__result-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 32px;
  margin-bottom: 4px;
}

.tkf-anim__result-chip {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  border: 2px solid #149F76;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.1);
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .tkf-anim__arr-cell {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .tkf-anim__arr-row {
    gap: 3px;
  }

  .tkf-anim__map-entry {
    padding: 3px 6px;
    min-width: 30px;
  }

  .tkf-anim__map-key {
    font-size: 11px;
  }

  .tkf-anim__map-val {
    font-size: 14px;
  }

  .tkf-anim__bucket-row {
    padding: 3px 6px;
    gap: 6px;
  }

  .tkf-anim__bucket-chip {
    padding: 2px 8px;
    font-size: 11px;
  }

  .tkf-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .tkf-anim__arr-cell {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .tkf-anim__arr-row {
    gap: 2px;
  }

  .tkf-anim__map-entry {
    padding: 2px 4px;
    min-width: 26px;
  }

  .tkf-anim__map-key {
    font-size: 10px;
  }

  .tkf-anim__map-val {
    font-size: 12px;
  }

  .tkf-anim__bucket-row {
    padding: 2px 4px;
    gap: 4px;
  }

  .tkf-anim__bucket-idx {
    font-size: 10px;
    min-width: 20px;
  }

  .tkf-anim__bucket-chip {
    padding: 2px 6px;
    font-size: 10px;
  }

  .tkf-anim__result-chip {
    padding: 3px 8px;
    font-size: 12px;
  }

  .tkf-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   Day 21 — Longest Consecutive Sequence Animation  (.lc-anim__)
   ═══════════════════════════════════════════════════════════ */

.lc-anim {
  max-width: 560px;
}

.lc-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 14px;
}

.lc-anim__section-label:first-child {
  margin-top: 0;
}

.lc-anim__set-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.lc-anim__set-cell {
  min-width: 36px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
  padding: 0 6px;
  transition: all 0.3s ease;
}

.lc-anim__set-cell--start {
  border-color: #149F76;
  background: #E8F5E9;
  color: #0B6E4F;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.2);
}

.lc-anim__set-cell--sequence {
  border-color: #2196F3;
  background: #E3F2FD;
  color: #1565C0;
}

.lc-anim__set-cell--skip {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
}

.lc-anim__set-cell--best {
  border-color: #149F76;
  background: #E8F5E9;
  color: #0B6E4F;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.15);
}

/* Check display */
.lc-anim__check-wrap {
  min-height: 28px;
  margin: 8px 0;
}

.lc-anim__check-text {
  font-size: 13px;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.lc-anim__check-yes {
  color: #EF5350;
}

.lc-anim__check-no {
  color: #149F76;
}

/* Sequence display */
.lc-anim__seq-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 32px;
  margin-bottom: 4px;
}

.lc-anim__empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}

.lc-anim__seq-chip {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  background: #E3F2FD;
  border: 1px solid #2196F3;
  color: #1565C0;
}

.lc-anim__len-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  margin-left: 4px;
}

.lc-anim__len-badge--best {
  background: #E8F5E9;
  color: #0B6E4F;
}

/* Best display */
.lc-anim__best-wrap {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 32px;
  margin-bottom: 4px;
}

.lc-anim__best-chip {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  background: #E8F5E9;
  border: 1px solid #149F76;
  color: #0B6E4F;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .lc-anim__set-cell {
    min-width: 30px;
    height: 27px;
    font-size: 11px;
    padding: 0 4px;
  }

  .lc-anim__set-row {
    gap: 3px;
  }

  .lc-anim__check-text {
    font-size: 11px;
  }

  .lc-anim__seq-chip,
  .lc-anim__best-chip {
    padding: 2px 8px;
    font-size: 11px;
  }

  .lc-anim__len-badge {
    font-size: 10px;
  }

  .lc-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .lc-anim__set-cell {
    min-width: 26px;
    height: 24px;
    font-size: 10px;
    padding: 0 3px;
  }

  .lc-anim__set-row {
    gap: 2px;
  }

  .lc-anim__check-text {
    font-size: 10px;
  }

  .lc-anim__seq-chip,
  .lc-anim__best-chip {
    padding: 2px 6px;
    font-size: 10px;
  }

  .lc-anim__len-badge {
    font-size: 9px;
    padding: 1px 6px;
  }

  .lc-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   Day 22 — Subarray Sum Equals K Animation  (.ssk-anim__)
   ═══════════════════════════════════════════════════════════ */

.ssk-anim {
  max-width: 540px;
}

.ssk-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 14px;
}

.ssk-anim__section-label:first-child {
  margin-top: 0;
}

.ssk-anim__arr-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ssk-anim__arr-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
  transition: all 0.3s ease;
}

.ssk-anim__arr-cell--current {
  border-color: #149F76;
  background: #E8F5E9;
  color: #0B6E4F;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.15);
}

.ssk-anim__arr-cell--processed {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
}

/* Prefix sum display */
.ssk-anim__prefix-wrap {
  min-height: 24px;
  margin: 8px 0;
}

.ssk-anim__prefix-text {
  font-size: 13px;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Map */
.ssk-anim__map-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 42px;
  margin-bottom: 4px;
}

.ssk-anim__map-init {
  font-size: 13px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  padding: 8px 0;
}

.ssk-anim__map-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.3s ease;
  min-width: 36px;
}

.ssk-anim__map-entry--active {
  border-color: #149F76;
  background: #E8F5E9;
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.12);
}

.ssk-anim__map-key {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
}

.ssk-anim__map-val {
  font-size: 16px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #149F76;
}

/* Result */
.ssk-anim__result-wrap {
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ssk-anim__result-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.ssk-anim__result-count {
  font-size: 20px;
  font-weight: 800;
  color: #149F76;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  transition: all 0.3s ease;
}

.ssk-anim__result-count--flash {
  color: #2196F3;
  transform: scale(1.2);
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .ssk-anim__arr-cell {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .ssk-anim__arr-row {
    gap: 3px;
  }

  .ssk-anim__prefix-text {
    font-size: 11px;
  }

  .ssk-anim__map-entry {
    padding: 3px 6px;
    min-width: 30px;
  }

  .ssk-anim__map-key {
    font-size: 11px;
  }

  .ssk-anim__map-val {
    font-size: 14px;
  }

  .ssk-anim__result-count {
    font-size: 18px;
  }

  .ssk-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .ssk-anim__arr-cell {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .ssk-anim__arr-row {
    gap: 2px;
  }

  .ssk-anim__prefix-text {
    font-size: 10px;
  }

  .ssk-anim__map-entry {
    padding: 2px 4px;
    min-width: 26px;
  }

  .ssk-anim__map-key {
    font-size: 10px;
  }

  .ssk-anim__map-val {
    font-size: 12px;
  }

  .ssk-anim__result-count {
    font-size: 16px;
  }

  .ssk-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   Day 23 — Encode and Decode Strings Animation  (.ed-anim__)
   ═══════════════════════════════════════════════════════════ */

.ed-anim {
  max-width: 560px;
}

.ed-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 14px;
}

.ed-anim__section-label:first-child {
  margin-top: 0;
}

/* Input row */
.ed-anim__input-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ed-anim__input-chip {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.ed-anim__input-chip--active {
  box-shadow: 0 0 0 2px rgba(20, 159, 118, 0.2);
  transform: scale(1.05);
}

/* Encoded string */
.ed-anim__encoded-wrap {
  min-height: 36px;
  margin-bottom: 4px;
}

.ed-anim__empty {
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
  padding: 8px 0;
}

.ed-anim__encoded-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.ed-anim__encoded-char {
  width: 24px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.ed-anim__encoded-char--highlight {
  background: #FFF9C4;
  border-color: #F9A825;
  box-shadow: 0 0 0 1px rgba(249, 168, 37, 0.2);
}

.ed-anim__encoded-char--length {
  background: #E8F5E9;
  border-color: #149F76;
  color: #0B6E4F;
}

.ed-anim__encoded-char--delim {
  background: #FFF3E0;
  border-color: #E67E22;
  color: #BF5B04;
}

.ed-anim__encoded-char--data {
  background: #E3F2FD;
  border-color: #2196F3;
  color: #1565C0;
}

/* Decoded chips */
.ed-anim__decoded-wrap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 32px;
  margin-bottom: 4px;
}

.ed-anim__decoded-chip {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

/* ── Responsive: 480px ──────────────────────── */
@media (max-width: 480px) {
  .ed-anim__input-chip,
  .ed-anim__decoded-chip {
    padding: 3px 8px;
    font-size: 11px;
  }

  .ed-anim__encoded-char {
    width: 20px;
    height: 24px;
    font-size: 12px;
  }

  .ed-anim__input-row,
  .ed-anim__decoded-wrap {
    gap: 4px;
  }

  .ed-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ──────────────────────── */
@media (max-width: 360px) {
  .ed-anim__input-chip,
  .ed-anim__decoded-chip {
    padding: 2px 6px;
    font-size: 10px;
  }

  .ed-anim__encoded-char {
    width: 17px;
    height: 22px;
    font-size: 11px;
  }

  .ed-anim__input-row,
  .ed-anim__decoded-wrap {
    gap: 3px;
  }

  .ed-anim__section-label {
    font-size: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 4: STACKS & QUEUES (Days 25-32)
   ═══════════════════════════════════════════════════════════ */


/* ── Valid Parentheses Animation (Day 25) ──
   CSS prefix:   .vp-anim__
   ────────────────────────────────────────── */

.vp-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.vp-anim__input-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vp-anim__input-cell {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.vp-anim__cell-value {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.vp-anim__cell-index {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 10px;
  color: #999;
  position: absolute;
  bottom: 2px;
}

.vp-anim__input-cell--current {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
}

.vp-anim__input-cell--processed {
  opacity: 0.45;
}

.vp-anim__input-cell--match {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.2);
}

.vp-anim__input-cell--error {
  background: #FFEBEE;
  border-color: #EF5350;
  box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.vp-anim__stack-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vp-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.vp-anim__stack-cell {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.vp-anim__stack-cell--top {
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

.vp-anim__stack-top-label {
  font-size: 11px;
  color: #999;
  font-style: italic;
}

.vp-anim__info-panel {
  text-align: center;
  padding: 14px 20px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  min-height: 56px;
  margin-bottom: 20px;
}

.vp-anim__info-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
  margin-bottom: 4px;
}

.vp-anim__info-status--match {
  color: #149F76;
}

.vp-anim__info-status--error {
  color: #EF5350;
}

.vp-anim__info-detail {
  font-size: 13px;
  color: var(--color-text-muted, #666);
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .vp-anim__input-cell {
    width: 36px;
    height: 36px;
  }
  .vp-anim__cell-value {
    font-size: 15px;
  }
  .vp-anim__stack-cell {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .vp-anim__input-row,
  .vp-anim__stack-wrap {
    gap: 5px;
  }
  .vp-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .vp-anim__input-cell {
    width: 30px;
    height: 30px;
  }
  .vp-anim__cell-value {
    font-size: 13px;
  }
  .vp-anim__cell-index {
    font-size: 9px;
  }
  .vp-anim__stack-cell {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .vp-anim__section-label {
    font-size: 10px;
  }
}


/* ── Min Stack Animation (Day 26) ──
   CSS prefix:   .ms-anim__
   ────────────────────────────────── */

.ms-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ms-anim__ops-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.ms-anim__op-chip {
  padding: 4px 12px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 100px;
  background: #fff;
  color: var(--color-text-primary, #282828);
  transition: all 0.3s ease;
}

.ms-anim__op-chip--active {
  background: #E3F2FD;
  border-color: #2196F3;
  color: #1565C0;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.ms-anim__op-chip--done {
  opacity: 0.45;
}

.ms-anim__stack-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  min-height: 48px;
}

.ms-anim__empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.ms-anim__stack-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.ms-anim__stack-entry--top {
  border-color: #2196F3;
  background: #F3F8FF;
}

.ms-anim__stack-entry--min {
  border-left: 3px solid #149F76;
}

.ms-anim__stack-entry--active {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.ms-anim__stack-entry--removed {
  background: #FFEBEE;
  border-color: #EF5350;
  opacity: 0.7;
  text-decoration: line-through;
}

.ms-anim__entry-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.ms-anim__entry-min {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 11px;
  color: #149F76;
  background: #E8F5E9;
  padding: 2px 6px;
  border-radius: 4px;
}

.ms-anim__entry-badge {
  font-size: 11px;
  color: #999;
  margin-left: auto;
}

.ms-anim__min-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  margin-bottom: 20px;
}

.ms-anim__min-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
}

.ms-anim__min-value {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 18px;
  font-weight: 700;
  color: #149F76;
  transition: all 0.3s ease;
}

.ms-anim__min-value--updated {
  animation: ms-min-pulse 0.4s ease;
}

.ms-anim__min-value--highlight {
  color: #149F76;
  text-shadow: 0 0 8px rgba(20, 159, 118, 0.3);
  animation: ms-min-pulse 0.4s ease;
}

@keyframes ms-min-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .ms-anim__op-chip {
    padding: 3px 8px;
    font-size: 11px;
  }
  .ms-anim__stack-entry {
    padding: 6px 10px;
    gap: 8px;
  }
  .ms-anim__entry-val {
    font-size: 14px;
  }
  .ms-anim__min-value {
    font-size: 16px;
  }
  .ms-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .ms-anim__op-chip {
    padding: 2px 6px;
    font-size: 10px;
  }
  .ms-anim__stack-entry {
    padding: 5px 8px;
    gap: 6px;
  }
  .ms-anim__entry-val {
    font-size: 13px;
  }
  .ms-anim__entry-min {
    font-size: 10px;
  }
  .ms-anim__min-value {
    font-size: 14px;
  }
  .ms-anim__section-label {
    font-size: 10px;
  }
}


/* ── Daily Temperatures Animation (Day 27) ──
   CSS prefix:   .dt-anim__
   ────────────────────────────────────────────── */

.dt-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dt-anim__row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dt-anim__cell {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.dt-anim__cell-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.dt-anim__cell-idx {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 9px;
  color: #666;
  position: absolute;
  bottom: 2px;
}

.dt-anim__cell--active {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

.dt-anim__cell--popped {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
}

.dt-anim__cell--resolved {
  opacity: 0.5;
}

.dt-anim__conn-area {
  min-height: 32px;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.dt-anim__conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  border-radius: 8px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 13px;
}

.dt-anim__conn-label {
  font-weight: 600;
  color: #E65100;
}

.dt-anim__conn-label--to {
  color: #149F76;
}

.dt-anim__conn-arrow {
  color: #999;
}

.dt-anim__conn-diff {
  color: #149F76;
  font-weight: 700;
}

.dt-anim__stack-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  min-height: 48px;
  align-items: center;
}

.dt-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.dt-anim__stack-cell {
  border-color: #2196F3;
  box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.2);
}

.dt-anim__res-cell {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.dt-anim__res-cell--set {
  background: #E8F5E9;
  border-color: #149F76;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .dt-anim__cell,
  .dt-anim__res-cell {
    width: 38px;
    height: 38px;
  }
  .dt-anim__cell-val {
    font-size: 12px;
  }
  .dt-anim__cell-idx {
    font-size: 8px;
  }
  .dt-anim__row,
  .dt-anim__stack-row {
    gap: 4px;
  }
  .dt-anim__conn {
    font-size: 11px;
    padding: 3px 10px;
  }
  .dt-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .dt-anim__cell,
  .dt-anim__res-cell {
    width: 32px;
    height: 32px;
  }
  .dt-anim__cell-val {
    font-size: 10px;
  }
  .dt-anim__cell-idx {
    font-size: 7px;
  }
  .dt-anim__row,
  .dt-anim__stack-row {
    gap: 3px;
  }
  .dt-anim__section-label {
    font-size: 10px;
  }
}


/* ── RPN (Reverse Polish Notation) Animation (Day 28) ──
   CSS prefix:   .rpn-anim__
   ────────────────────────────────────────────────────── */

.rpn-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.rpn-anim__tokens-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.rpn-anim__token {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.rpn-anim__token-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.rpn-anim__token-idx {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 9px;
  color: #999;
  position: absolute;
  bottom: 2px;
}

.rpn-anim__token--active {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
}

.rpn-anim__token--number.rpn-anim__token--active {
  background: #E8F5E9;
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.2);
}

.rpn-anim__token--operator.rpn-anim__token--active {
  background: #FFF3E0;
  border-color: #E67E22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}

.rpn-anim__token--done {
  opacity: 0.4;
}

.rpn-anim__expr {
  text-align: center;
  min-height: 36px;
  padding: 6px 16px;
  margin-bottom: 16px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 600;
  color: transparent;
  background: #F5F5F5;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.rpn-anim__expr--visible {
  color: #E67E22;
  background: #FFF8E1;
  border: 1px solid #FFD54F;
}

.rpn-anim__stack-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rpn-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.rpn-anim__stack-val {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
  transition: all 0.3s ease;
}

.rpn-anim__stack-val--top {
  background: #E3F2FD;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.rpn-anim__stack-top-label {
  font-size: 11px;
  color: #999;
  font-style: italic;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .rpn-anim__token {
    width: 36px;
    height: 36px;
  }
  .rpn-anim__token-val {
    font-size: 14px;
  }
  .rpn-anim__stack-val {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .rpn-anim__tokens-row,
  .rpn-anim__stack-wrap {
    gap: 5px;
  }
  .rpn-anim__expr {
    font-size: 14px;
  }
  .rpn-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .rpn-anim__token {
    width: 30px;
    height: 30px;
  }
  .rpn-anim__token-val {
    font-size: 12px;
  }
  .rpn-anim__token-idx {
    font-size: 8px;
  }
  .rpn-anim__stack-val {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .rpn-anim__tokens-row,
  .rpn-anim__stack-wrap {
    gap: 3px;
  }
  .rpn-anim__expr {
    font-size: 12px;
  }
  .rpn-anim__section-label {
    font-size: 10px;
  }
}


/* ── Next Greater Element Animation (Day 29) ──
   CSS prefix:   .nge-anim__
   ──────────────────────────────────────────────── */

.nge-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.nge-anim__row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.nge-anim__cell {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.nge-anim__cell-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.nge-anim__cell-idx {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 9px;
  color: #666;
  position: absolute;
  bottom: 2px;
}

.nge-anim__cell--active {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

.nge-anim__cell--popped {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
}

.nge-anim__cell--resolved {
  opacity: 0.5;
}

.nge-anim__conn-area {
  min-height: 32px;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.nge-anim__conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  border-radius: 8px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 13px;
}

.nge-anim__conn-label {
  font-weight: 600;
  color: #E65100;
}

.nge-anim__conn-label--to {
  color: #149F76;
}

.nge-anim__conn-arrow {
  color: #999;
}

.nge-anim__conn-diff {
  color: #149F76;
  font-weight: 700;
}

.nge-anim__stack-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  min-height: 48px;
  align-items: center;
}

.nge-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.nge-anim__stack-cell {
  border-color: #2196F3;
  box-shadow: 0 0 0 1px rgba(33, 150, 243, 0.2);
}

.nge-anim__res-cell {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
}

.nge-anim__res-cell--set {
  background: #E8F5E9;
  border-color: #149F76;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .nge-anim__cell,
  .nge-anim__res-cell {
    width: 38px;
    height: 38px;
  }
  .nge-anim__cell-val {
    font-size: 12px;
  }
  .nge-anim__cell-idx {
    font-size: 8px;
  }
  .nge-anim__row,
  .nge-anim__stack-row {
    gap: 4px;
  }
  .nge-anim__conn {
    font-size: 11px;
    padding: 3px 10px;
  }
  .nge-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .nge-anim__cell,
  .nge-anim__res-cell {
    width: 32px;
    height: 32px;
  }
  .nge-anim__cell-val {
    font-size: 10px;
  }
  .nge-anim__cell-idx {
    font-size: 7px;
  }
  .nge-anim__row,
  .nge-anim__stack-row {
    gap: 3px;
  }
  .nge-anim__section-label {
    font-size: 10px;
  }
}


/* ── Histogram Rectangle Animation (Day 30) ──
   CSS prefix:   .hr-anim__
   ──────────────────────────────────────────────── */

.hr-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hr-anim__hist-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  min-height: 140px;
  padding: 0 10px;
}

.hr-anim__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hr-anim__bar {
  position: relative;
  width: 40px;
  min-height: 10px;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 4px 4px 0 0;
  background: #E3F2FD;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
}

.hr-anim__bar--active {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  background: #FFF8E1;
}

.hr-anim__bar--popped {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
  background: #FFEBEE;
}

.hr-anim__bar--in-stack {
  border-color: #2196F3;
  background: #E3F2FD;
}

.hr-anim__bar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 159, 118, 0.25);
  border-radius: 4px 4px 0 0;
  display: none;
}

.hr-anim__bar-overlay--visible {
  display: block;
}

.hr-anim__bar-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.hr-anim__bar-idx {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 9px;
  color: #666;
}

.hr-anim__stack-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  min-height: 36px;
  align-items: center;
}

.hr-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.hr-anim__stack-cell {
  padding: 4px 10px;
  border: 1px solid #2196F3;
  border-radius: 6px;
  background: #F3F8FF;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary, #282828);
  transition: all 0.3s ease;
}

.hr-anim__area-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 14px;
  font-weight: 600;
}

.hr-anim__cur-area {
  color: var(--color-text-primary, #282828);
}

.hr-anim__cur-area-val {
  color: #2196F3;
  font-size: 16px;
}

.hr-anim__max-area {
  color: var(--color-text-primary, #282828);
}

.hr-anim__max-area-val {
  color: #E53935;
  font-size: 16px;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .hr-anim__bar {
    width: 32px;
  }
  .hr-anim__bar-val {
    font-size: 10px;
  }
  .hr-anim__bar-idx {
    font-size: 8px;
  }
  .hr-anim__hist-wrap {
    gap: 3px;
    min-height: 110px;
  }
  .hr-anim__stack-cell {
    padding: 3px 7px;
    font-size: 11px;
  }
  .hr-anim__area-row {
    gap: 14px;
    font-size: 12px;
    padding: 8px 12px;
  }
  .hr-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .hr-anim__bar {
    width: 26px;
  }
  .hr-anim__bar-val {
    font-size: 9px;
  }
  .hr-anim__bar-idx {
    font-size: 7px;
  }
  .hr-anim__hist-wrap {
    gap: 2px;
    min-height: 90px;
  }
  .hr-anim__stack-cell {
    padding: 2px 5px;
    font-size: 10px;
  }
  .hr-anim__area-row {
    gap: 10px;
    font-size: 11px;
  }
  .hr-anim__section-label {
    font-size: 10px;
  }
}


/* ── Queue Using Stacks Animation (Day 31) ──
   CSS prefix:   .qs-anim__
   ──────────────────────────────────────────────── */

.qs-anim__section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.qs-anim__ops-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.qs-anim__op-chip {
  padding: 4px 12px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 100px;
  background: #fff;
  color: var(--color-text-primary, #282828);
  transition: all 0.3s ease;
}

.qs-anim__op-chip--active {
  background: #E3F2FD;
  border-color: #2196F3;
  color: #1565C0;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.qs-anim__op-chip--done {
  opacity: 0.45;
}

.qs-anim__stacks-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}

.qs-anim__stack-col {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qs-anim__stack-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary, #282828);
  margin-bottom: 4px;
}

.qs-anim__stack-sublabel {
  font-size: 10px;
  color: var(--color-text-muted, #666);
  margin-bottom: 10px;
  font-style: italic;
}

.qs-anim__stack-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 60px;
  width: 100%;
  align-items: center;
}

.qs-anim__stack-cell {
  width: 52px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 8px;
  background: #fff;
  transition: all 0.3s ease;
  position: relative;
}

.qs-anim__cell-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary, #282828);
}

.qs-anim__cell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 8px;
  color: #999;
  background: #fff;
  padding: 0 3px;
  border-radius: 3px;
  border: 1px solid var(--color-border, #D4D4D4);
}

.qs-anim__stack-cell--top {
  border-color: #2196F3;
  background: #F3F8FF;
}

.qs-anim__stack-cell--active {
  border-color: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
  background: #FFF8E1;
}

.qs-anim__stack-cell--transfer {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
  background: #E3F2FD;
}

.qs-anim__stack-cell--returned {
  border-color: #149F76;
  box-shadow: 0 0 0 3px rgba(20, 159, 118, 0.25);
  background: #E8F5E9;
}

.qs-anim__stack-empty {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

.qs-anim__arrow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}

.qs-anim__arrow {
  font-size: 28px;
  color: #D4D4D4;
  transition: all 0.3s ease;
  line-height: 1;
}

.qs-anim__arrow--active {
  color: #2196F3;
  transform: scale(1.15);
}

.qs-anim__return-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-bg-page, #FAFAFA);
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 10px;
  margin-bottom: 16px;
  min-height: 40px;
}

.qs-anim__return-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #666);
}

.qs-anim__return-value {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 18px;
  font-weight: 700;
  color: transparent;
  transition: all 0.3s ease;
}

.qs-anim__return-value--visible {
  color: #149F76;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .qs-anim__op-chip {
    padding: 3px 8px;
    font-size: 11px;
  }
  .qs-anim__stacks-container {
    gap: 10px;
  }
  .qs-anim__stack-col {
    max-width: 140px;
  }
  .qs-anim__stack-cell {
    width: 44px;
    height: 32px;
  }
  .qs-anim__cell-val {
    font-size: 14px;
  }
  .qs-anim__arrow {
    font-size: 22px;
  }
  .qs-anim__return-row {
    padding: 8px 12px;
  }
  .qs-anim__section-label {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .qs-anim__op-chip {
    padding: 2px 6px;
    font-size: 10px;
  }
  .qs-anim__stacks-container {
    gap: 6px;
  }
  .qs-anim__stack-col {
    max-width: 110px;
  }
  .qs-anim__stack-cell {
    width: 38px;
    height: 28px;
  }
  .qs-anim__cell-val {
    font-size: 12px;
  }
  .qs-anim__arrow {
    font-size: 18px;
    min-width: 32px;
  }
  .qs-anim__return-row {
    padding: 6px 10px;
    gap: 6px;
  }
  .qs-anim__return-value {
    font-size: 15px;
  }
  .qs-anim__section-label {
    font-size: 10px;
  }
}


/* ── Reverse Linked List Animation (Day 33) ──
   CSS prefix:   .rl-anim__
   ──────────────────────────────────────────────── */

.rl-anim__ptr-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 4px;
  min-height: 22px;
}

.rl-anim__ptr-slot {
  width: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  transition: color 0.3s ease;
}

.rl-anim__ptr--prev {
  color: #1565C0;
}

.rl-anim__ptr--curr {
  color: #F9A825;
}

.rl-anim__ptr--next {
  color: #E65100;
}

.rl-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

.rl-anim__node {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border, #D4D4D4);
  border-radius: 50%;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.rl-anim__node-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary, #282828);
}

.rl-anim__arrow {
  font-size: 20px;
  color: var(--color-text-muted, #666);
  padding: 0 4px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.rl-anim__arrow--reversed {
  color: #149F76;
  font-weight: 700;
}

.rl-anim__arrow--hidden {
  opacity: 0.2;
}

.rl-anim__null {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 13px;
  color: #999;
  font-style: italic;
  flex-shrink: 0;
}

/* Node states */
.rl-anim__node--prev {
  border-color: #2196F3;
  background: #E3F2FD;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.rl-anim__node--curr {
  border-color: #ffd700;
  background: #FFF8E1;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}

.rl-anim__node--next {
  border-color: #FF9800;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.rl-anim__node--reversed {
  border-color: #149F76;
  background: #E8F5E9;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .rl-anim__node {
    width: 42px;
    height: 42px;
  }
  .rl-anim__node-val {
    font-size: 15px;
  }
  .rl-anim__arrow {
    font-size: 16px;
    padding: 0 2px;
  }
  .rl-anim__ptr-row {
    gap: 18px;
  }
  .rl-anim__ptr-slot {
    width: 42px;
    font-size: 10px;
  }
  .rl-anim__null {
    font-size: 11px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .rl-anim__node {
    width: 36px;
    height: 36px;
  }
  .rl-anim__node-val {
    font-size: 13px;
  }
  .rl-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .rl-anim__ptr-row {
    gap: 12px;
  }
  .rl-anim__ptr-slot {
    width: 36px;
    font-size: 9px;
  }
  .rl-anim__null {
    font-size: 10px;
  }
}

/* ================================================================
   Day 34 – Cycle Detection (Floyd's Tortoise & Hare)
   Prefix: .cd-anim__
   ================================================================ */

/* ── Layout ── */
.cd-anim__ptr-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  min-height: 22px;
  margin-bottom: 4px;
}

.cd-anim__ptr-slot {
  width: 44px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #666;
  min-height: 16px;
}

.cd-anim__ptr--slow { color: #4CAF50; }
.cd-anim__ptr--fast { color: #FF9800; }
.cd-anim__ptr--both { color: #7B1FA2; }
.cd-anim__ptr--met  { color: #F44336; }

.cd-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

/* ── Node circles ── */
.cd-anim__node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  position: relative;
  flex-shrink: 0;
}

.cd-anim__node-val {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

/* ── Node states ── */
.cd-anim__node--slow {
  border-color: #4CAF50;
  background: #E8F5E9;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}
.cd-anim__node--slow .cd-anim__node-val { color: #2E7D32; }

.cd-anim__node--fast {
  border-color: #FF9800;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}
.cd-anim__node--fast .cd-anim__node-val { color: #E65100; }

.cd-anim__node--both {
  border-color: #7B1FA2;
  background: #F3E5F5;
  box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.2);
}
.cd-anim__node--both .cd-anim__node-val { color: #4A148C; }

.cd-anim__node--met {
  border-color: #F44336;
  background: #FFEBEE;
  box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.25);
}
.cd-anim__node--met .cd-anim__node-val { color: #B71C1C; }

.cd-anim__node--cycle-start {
  border-color: #F44336;
  background: #FFCDD2;
  box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.35);
}
.cd-anim__node--cycle-start .cd-anim__node-val { color: #B71C1C; font-weight: 800; }

/* ── Arrows ── */
.cd-anim__arrow {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Cycle-back indicator ── */
.cd-anim__cycle-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.cd-anim__cycle-arrow {
  font-size: 12px;
  color: #F44336;
  font-weight: 600;
  padding: 4px 10px;
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .cd-anim__node {
    width: 38px;
    height: 38px;
  }
  .cd-anim__node-val {
    font-size: 13px;
  }
  .cd-anim__arrow {
    font-size: 15px;
    padding: 0 2px;
  }
  .cd-anim__ptr-row {
    gap: 14px;
  }
  .cd-anim__ptr-slot {
    width: 38px;
    font-size: 10px;
  }
  .cd-anim__cycle-arrow {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .cd-anim__node {
    width: 34px;
    height: 34px;
  }
  .cd-anim__node-val {
    font-size: 12px;
  }
  .cd-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .cd-anim__ptr-row {
    gap: 10px;
  }
  .cd-anim__ptr-slot {
    width: 34px;
    font-size: 9px;
  }
  .cd-anim__cycle-arrow {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ================================================================
   Day 35 — Merge Two Sorted Lists  (.ms-anim__)
   ================================================================ */

/* ── Label rows ── */
.ms-anim__label {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 4px 0;
  text-align: center;
}

.ms-anim__label--merged {
  color: #149F76;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #ccc;
}

/* ── Node rows (list1, list2, merged) ── */
.ms-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.ms-anim__merged-row {
  min-height: 48px;
}

/* ── Node circles ── */
.ms-anim__node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, opacity 0.25s;
  position: relative;
  flex-shrink: 0;
}

.ms-anim__node-val {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

/* ── Node states ── */

/* Current pointer on list1 (blue) */
.ms-anim__node--ptr1 {
  border-color: #1976D2;
  background: #E3F2FD;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}
.ms-anim__node--ptr1 .ms-anim__node-val { color: #0D47A1; }

/* Current pointer on list2 (orange) */
.ms-anim__node--ptr2 {
  border-color: #E65100;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.2);
}
.ms-anim__node--ptr2 .ms-anim__node-val { color: #BF360C; }

/* Just picked (green flash) */
.ms-anim__node--picked {
  border-color: #149F76;
  background: #E8F5E9;
  box-shadow: 0 0 0 4px rgba(20, 159, 118, 0.3);
}
.ms-anim__node--picked .ms-anim__node-val { color: #0B7A56; }

/* Already consumed (gray/faded) */
.ms-anim__node--used {
  border-color: #CFD8DC;
  background: #ECEFF1;
  opacity: 0.5;
}
.ms-anim__node--used .ms-anim__node-val { color: #90A4AE; }

/* Node in merged row (green border) */
.ms-anim__node--merged {
  border-color: #149F76;
  background: #F1FBF7;
}
.ms-anim__node--merged .ms-anim__node-val { color: #0B7A56; }

/* Just added to merged (pulse glow) */
.ms-anim__node--just-added {
  border-color: #149F76;
  background: #C8F7E1;
  box-shadow: 0 0 0 4px rgba(20, 159, 118, 0.35);
  animation: ms-pulse 0.5s ease-out;
}

@keyframes ms-pulse {
  0%   { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(20, 159, 118, 0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 0 4px rgba(20, 159, 118, 0.35); }
}

/* ── Arrows ── */
.ms-anim__arrow {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
}

.ms-anim__arrow--merged {
  color: #149F76;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .ms-anim__node {
    width: 38px;
    height: 38px;
  }
  .ms-anim__node-val {
    font-size: 13px;
  }
  .ms-anim__arrow {
    font-size: 15px;
    padding: 0 2px;
  }
  .ms-anim__label {
    font-size: 11px;
  }
  .ms-anim__merged-row {
    min-height: 42px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .ms-anim__node {
    width: 34px;
    height: 34px;
  }
  .ms-anim__node-val {
    font-size: 12px;
  }
  .ms-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .ms-anim__label {
    font-size: 10px;
  }
  .ms-anim__merged-row {
    min-height: 38px;
  }
}

/* ================================================================
   Day 36 – Remove Nth Node From End (Two Pointers)
   Prefix: .rn-anim__
   ================================================================ */

/* ── Layout ── */
.rn-anim__ptr-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 22px;
  margin-bottom: 4px;
  gap: 0;
}

.rn-anim__ptr-row--below {
  margin-top: 4px;
  margin-bottom: 0;
  align-items: flex-start;
}

.rn-anim__ptr-label {
  width: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: transparent;
  min-height: 16px;
  flex-shrink: 0;
}

.rn-anim__ptr-label--fast { color: #E65100; }
.rn-anim__ptr-label--slow { color: #1976D2; }

.rn-anim__ptr-spacer {
  width: 26px;
  flex-shrink: 0;
}

.rn-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}

/* ── Node circles ── */
.rn-anim__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.rn-anim__node-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* ── Node states ── */
.rn-anim__node--dummy {
  border-style: dashed;
  border-color: #bbb;
  background: #f5f5f5;
}
.rn-anim__node--dummy .rn-anim__node-val {
  color: #999;
  font-style: italic;
}

.rn-anim__node--fast {
  border-color: #E65100;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.2);
}
.rn-anim__node--fast .rn-anim__node-val { color: #E65100; }

.rn-anim__node--slow {
  border-color: #1976D2;
  background: #E3F2FD;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}
.rn-anim__node--slow .rn-anim__node-val { color: #1565C0; }

.rn-anim__node--target {
  border-color: #C62828;
  background: #FFEBEE;
  box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.25);
}
.rn-anim__node--target .rn-anim__node-val { color: #B71C1C; }

.rn-anim__node--removed {
  border-color: #90A4AE;
  background: #ECEFF1;
  text-decoration: line-through;
}
.rn-anim__node--removed .rn-anim__node-val {
  color: #90A4AE;
  text-decoration: line-through;
}

/* ── Arrows ── */
.rn-anim__arrow {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity 0.3s ease;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .rn-anim__node {
    width: 40px;
    height: 40px;
  }
  .rn-anim__node-val {
    font-size: 13px;
  }
  .rn-anim__arrow {
    font-size: 15px;
    padding: 0 2px;
  }
  .rn-anim__ptr-label {
    width: 40px;
    font-size: 10px;
  }
  .rn-anim__ptr-spacer {
    width: 19px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .rn-anim__node {
    width: 34px;
    height: 34px;
  }
  .rn-anim__node-val {
    font-size: 12px;
  }
  .rn-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .rn-anim__ptr-label {
    width: 34px;
    font-size: 9px;
  }
  .rn-anim__ptr-spacer {
    width: 15px;
  }
}

/* ================================================================
   Day 37 – Reorder List (Find Middle + Reverse + Merge)
   Prefix: .ro-anim__
   ================================================================ */

/* ── Phase label ── */
.ro-anim__phase-label {
  font-size: 13px;
  font-weight: 700;
  color: #149F76;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

/* ── Pointer row ── */
.ro-anim__ptr-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  min-height: 20px;
  margin-bottom: 4px;
}

.ro-anim__ptr-slot {
  width: 48px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  min-height: 16px;
  color: #666;
}

.ro-anim__ptr--slow { color: #4CAF50; }
.ro-anim__ptr--fast { color: #FF9800; }

/* ── Nodes row ── */
.ro-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 8px;
}

/* ── Node circles ── */
.ro-anim__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.ro-anim__node-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* ── Node states ── */
.ro-anim__node--slow {
  border-color: #4CAF50;
  background: #E8F5E9;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.ro-anim__node--fast {
  border-color: #FF9800;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.ro-anim__node--first-half {
  border-color: #1976D2;
  background: #E3F2FD;
}

.ro-anim__node--second-half {
  border-color: #7B1FA2;
  background: #F3E5F5;
}

.ro-anim__node--reversing {
  border-color: #E65100;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.15);
}

.ro-anim__node--consumed {
  opacity: 0.35;
}

.ro-anim__node--placed {
  border-color: #149F76;
  background: #C8F7E1;
}

.ro-anim__node--just-added {
  box-shadow: 0 0 0 4px rgba(20, 159, 118, 0.35);
  animation: ro-pulse 0.5s ease-out;
}

@keyframes ro-pulse {
  0%   { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(20, 159, 118, 0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 0 4px rgba(20, 159, 118, 0.35); }
}

/* ── Arrows ── */
.ro-anim__arrow {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
  transition: all 0.3s ease;
}

.ro-anim__arrow--cut {
  color: #C62828;
  font-weight: 700;
  font-size: 22px;
}

.ro-anim__arrow--reversed {
  color: #7B1FA2;
  font-weight: 700;
}

.ro-anim__arrow--result {
  color: #149F76;
}

/* ── Result row & labels ── */
.ro-anim__result-row {
  min-height: 52px;
  border: 1px dashed #bbb;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.ro-anim__label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-align: center;
  margin-bottom: 4px;
}

.ro-anim__label--result {
  color: #149F76;
  margin-top: 8px;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .ro-anim__node {
    width: 40px;
    height: 40px;
  }
  .ro-anim__node-val {
    font-size: 13px;
  }
  .ro-anim__arrow {
    font-size: 15px;
    padding: 0 2px;
  }
  .ro-anim__ptr-slot {
    width: 40px;
    font-size: 10px;
  }
  .ro-anim__phase-label {
    font-size: 12px;
  }
  .ro-anim__label {
    font-size: 11px;
  }
  .ro-anim__result-row {
    min-height: 44px;
    padding: 6px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .ro-anim__node {
    width: 34px;
    height: 34px;
  }
  .ro-anim__node-val {
    font-size: 12px;
  }
  .ro-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .ro-anim__ptr-slot {
    width: 34px;
    font-size: 9px;
  }
  .ro-anim__phase-label {
    font-size: 11px;
  }
  .ro-anim__label {
    font-size: 10px;
  }
  .ro-anim__result-row {
    min-height: 38px;
    padding: 4px;
  }
}

/* ================================================================
   Day 38 – Copy List with Random Pointer (Hash Map Approach)
   Prefix: .cr-anim__
   ================================================================ */

/* ── Labels ── */
.cr-anim__label {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  text-align: center;
  margin-bottom: 4px;
  margin-top: 12px;
}

.cr-anim__label--map {
  color: #7B1FA2;
}

.cr-anim__label--clone {
  color: #43A047;
}

/* ── Nodes row ── */
.cr-anim__nodes-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

/* ── Node circles ── */
.cr-anim__node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #90A4AE;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
}

.cr-anim__node-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 15px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.cr-anim__node-idx {
  font-size: 9px;
  color: #999;
  position: absolute;
  top: 2px;
  right: 6px;
}

.cr-anim__random-label {
  font-size: 9px;
  color: #7B1FA2;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Node states ── */
.cr-anim__node--original {
  border-color: #90A4AE;
  background: #fff;
}

.cr-anim__node--active {
  border-color: #1976D2;
  background: #E3F2FD;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}

.cr-anim__node--clone {
  border-color: #43A047;
  background: #fff;
}

.cr-anim__node--wiring {
  border-color: #E65100;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.2);
}

.cr-anim__node--done {
  border-color: #2E7D32;
  background: #E8F5E9;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

/* ── Arrows ── */
.cr-anim__arrow {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
  flex-shrink: 0;
  line-height: 1;
}

.cr-anim__arrow--clone {
  color: #43A047;
}

.cr-anim__arrow--clone-null {
  color: #43A047;
  font-size: 14px;
}

/* ── Hash map row ── */
.cr-anim__map-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.cr-anim__map-entry {
  font-size: 11px;
  font-weight: 600;
  color: #7B1FA2;
  background: #F3E5F5;
  border: 1px solid #CE93D8;
  border-radius: 4px;
  padding: 2px 8px;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .cr-anim__node {
    width: 46px;
    height: 46px;
  }
  .cr-anim__node-val {
    font-size: 13px;
  }
  .cr-anim__node-idx {
    font-size: 8px;
  }
  .cr-anim__random-label {
    font-size: 8px;
  }
  .cr-anim__arrow {
    font-size: 15px;
    padding: 0 2px;
  }
  .cr-anim__label {
    font-size: 11px;
  }
  .cr-anim__map-entry {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .cr-anim__node {
    width: 40px;
    height: 40px;
  }
  .cr-anim__node-val {
    font-size: 12px;
  }
  .cr-anim__node-idx {
    font-size: 7px;
  }
  .cr-anim__random-label {
    font-size: 7px;
  }
  .cr-anim__arrow {
    font-size: 14px;
    padding: 0 1px;
  }
  .cr-anim__label {
    font-size: 10px;
  }
  .cr-anim__map-entry {
    font-size: 9px;
    padding: 1px 4px;
  }
}


/* ── Binary Search Animation (Day 41) ──
   CSS prefix:   .bs-anim__
   ──────────────────────────────────────────────── */

.bs-anim__ptr-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
  min-height: 22px;
}

.bs-anim__ptr-slot {
  width: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  transition: color 0.3s ease;
}

.bs-anim__ptr--left {
  color: #1565C0;
}

.bs-anim__ptr--right {
  color: #E65100;
}

.bs-anim__ptr--mid {
  color: #F9A825;
}

.bs-anim__ptr--found {
  color: #2E7D32;
}

.bs-anim__cells-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
}

.bs-anim__cell {
  width: 52px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 6px;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
  gap: 2px;
}

.bs-anim__cell-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary, #282828);
}

.bs-anim__cell-idx {
  font-size: 10px;
  color: var(--color-text-muted, #666);
}

/* Cell states */
.bs-anim__cell--active {
  border-color: #42A5F5;
  background: #E3F2FD;
  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
}

.bs-anim__cell--mid {
  border-color: #FFA726;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3);
}

.bs-anim__cell--found {
  border-color: #66BB6A;
  background: #E8F5E9;
  box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.3);
}

.bs-anim__cell--eliminated {
  border-color: #BDBDBD;
  background: #F5F5F5;
  opacity: 0.5;
}

.bs-anim__target-row {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-primary, #282828);
  margin-bottom: 12px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .bs-anim__ptr-row {
    gap: 2px;
  }
  .bs-anim__ptr-slot {
    width: 40px;
    font-size: 9px;
  }
  .bs-anim__cells-row {
    gap: 2px;
  }
  .bs-anim__cell {
    width: 40px;
    height: 44px;
  }
  .bs-anim__cell-val {
    font-size: 13px;
  }
  .bs-anim__cell-idx {
    font-size: 8px;
  }
  .bs-anim__target-row {
    font-size: 12px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .bs-anim__ptr-slot {
    width: 34px;
    font-size: 8px;
  }
  .bs-anim__cell {
    width: 34px;
    height: 40px;
  }
  .bs-anim__cell-val {
    font-size: 12px;
  }
  .bs-anim__cell-idx {
    font-size: 7px;
  }
  .bs-anim__target-row {
    font-size: 11px;
  }
}


/* ── Find Minimum in Rotated Array Animation (Day 44) ──
   CSS prefix:   .fm-anim__
   ──────────────────────────────────────────────── */

.fm-anim__ptr-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
  min-height: 22px;
}

.fm-anim__ptr-slot {
  width: 52px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  transition: color 0.3s ease;
}

.fm-anim__ptr--left {
  color: #1565C0;
}

.fm-anim__ptr--right {
  color: #E65100;
}

.fm-anim__ptr--mid {
  color: #F9A825;
}

.fm-anim__ptr--found {
  color: #2E7D32;
}

.fm-anim__cells-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}

.fm-anim__cell {
  width: 52px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #D4D4D4);
  border-radius: 6px;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
  gap: 2px;
}

.fm-anim__cell-val {
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary, #282828);
}

.fm-anim__cell-idx {
  font-size: 10px;
  color: var(--color-text-muted, #666);
}

/* Cell states */
.fm-anim__cell--active {
  border-color: #42A5F5;
  background: #E3F2FD;
  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
}

.fm-anim__cell--mid {
  border-color: #FFA726;
  background: #FFF3E0;
  box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3);
}

.fm-anim__cell--cmp-right {
  border-color: #AB47BC;
  background: #F3E5F5;
  box-shadow: 0 0 0 3px rgba(171, 71, 188, 0.3);
}

.fm-anim__cell--found {
  border-color: #66BB6A;
  background: #E8F5E9;
  box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.3);
}

.fm-anim__cell--eliminated {
  border-color: #BDBDBD;
  background: #F5F5F5;
  opacity: 0.5;
}

.fm-anim__cmp-row {
  text-align: center;
  font-size: 13px;
  font-family: var(--font-mono, 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace);
  color: var(--color-text-primary, #282828);
  padding: 6px 12px;
  margin-bottom: 12px;
  background: #FFFDE7;
  border: 1px solid #FFF59D;
  border-radius: 6px;
}

/* ── Responsive: 480px ── */
@media (max-width: 480px) {
  .fm-anim__ptr-row {
    gap: 2px;
  }
  .fm-anim__ptr-slot {
    width: 40px;
    font-size: 9px;
  }
  .fm-anim__cells-row {
    gap: 2px;
  }
  .fm-anim__cell {
    width: 40px;
    height: 44px;
  }
  .fm-anim__cell-val {
    font-size: 13px;
  }
  .fm-anim__cell-idx {
    font-size: 8px;
  }
  .fm-anim__cmp-row {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ── Responsive: 360px ── */
@media (max-width: 360px) {
  .fm-anim__ptr-slot {
    width: 34px;
    font-size: 8px;
  }
  .fm-anim__cell {
    width: 34px;
    height: 40px;
  }
  .fm-anim__cell-val {
    font-size: 12px;
  }
  .fm-anim__cell-idx {
    font-size: 7px;
  }
  .fm-anim__cmp-row {
    font-size: 10px;
    padding: 3px 6px;
  }
}