/* 习惯打卡 (spec §37): the child's 今天的习惯 panel (the homework panel's look: homework.css .hwk /
   .hwk-task, tinted mint), the week and month cells, and the parents' pages — 待确认, the habit list,
   templates, the editor, 补记 and 统计. §12: side-by-side items share one class, minmax(0, 1fr) columns
   and equal rows; every cell of a week or month row is the same size; long names end in "…". Colours
   come from tokens.css (--mint, --mint-soft, --mint-ink) and the shared tokens. */

:root {
  --hb-grad-1: #4FD9C6;
  --hb-grad-2: #12A594;
  --hb-on: #FFFFFF; /* marks on a full mint cell */
  --hb-cell: 30px;
  --hb-pic-sm: 40px;
  --hb-pic-md: 56px;
  --hb-pic-lg: 72px;
}
@media (prefers-color-scheme: dark) {
  :root { --hb-on: #0E2A27; }
}

/* ======================= The child: 今天的习惯 (spec §37.3) ======================= */
.hbk-head-icon { background: linear-gradient(135deg, var(--hb-grad-1), var(--hb-grad-2)); }
.hbk .hw-ring-fill, .hbk .hw-ring.is-complete .hw-ring-fill { stroke: var(--mint); }
.hbk .hw-ring-label svg { color: var(--mint); }

.hbk-item { --sub-soft: var(--mint-soft); --sub-ink: var(--mint-ink); position: relative; }
/* The picture sits on a white tile instead of the homework's solid subject tile. */
.hbk-item .hbk-tile { background: var(--surface); box-shadow: var(--shadow-1); }
.hbk-item .hbk-tile .hbk-tile-art { width: 84%; height: 84%; }
.hbk-meta { display: inline-flex; flex-shrink: 1; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbk-meta svg { flex-shrink: 0; width: 18px; height: 18px; stroke-width: 2.2; }
.hbk-meta.is-streak { color: var(--warning-text); }
/* One line for the target, kept (invisible) without one: every habit card of a panel is as tall (§12). */
.hbk-item .hwk-detail { -webkit-line-clamp: 1; }
.hbk-item .hwk-detail.is-empty { visibility: hidden; }
.hbk-reward { gap: 4px; padding: 0 9px 0 5px; }
.hbk-reward[hidden] { display: none; }
.hbk-coin-box { display: inline-grid; width: 18px; height: 18px; }
.hbk-coin { width: 100%; height: 100%; }
/* With a status badge (waiting, done, sent back) the coins chip steps aside: the badge says it. */
.hwk-task.hbk-item:is(.is-pending, .is-approved, .is-returned) .hbk-reward { display: none; }

/* 「完成了」: the card pops and a few sparks fly from the button (cheer() in kid-card.js). */
.hbk-burst { position: absolute; inset: 0; pointer-events: none; }
.hbk-spark {
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--pineapple);
  opacity: 0;
}
.hbk-spark--1, .hbk-spark--5 { background: var(--mint); }
.hbk-spark--2, .hbk-spark--6 { background: var(--coral); }
.hbk-spark--3, .hbk-spark--7 { background: var(--accent); border-radius: 3px; }
.hbk-spark--0 { --dx: -110px; --dy: -46px; }
.hbk-spark--1 { --dx: -70px; --dy: -86px; }
.hbk-spark--2 { --dx: -22px; --dy: -104px; }
.hbk-spark--3 { --dx: 30px; --dy: -96px; }
.hbk-spark--4 { --dx: 74px; --dy: -80px; }
.hbk-spark--5 { --dx: 112px; --dy: -40px; }
.hbk-spark--6 { --dx: -140px; --dy: -8px; }
.hbk-spark--7 { --dx: 140px; --dy: -6px; }
.hbk-item.is-cheering { animation: hbk-pop 520ms var(--ease-spring); }
.hbk-item.is-cheering .hbk-spark { animation: hbk-spark 760ms var(--ease-out) forwards; }
@keyframes hbk-pop { 35% { transform: scale(1.03); } }
@keyframes hbk-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(0.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); }
}

/* The foot: today's coins (on the child home the whole foot opens the week). Pinned to the bottom,
   so a panel as tall as the homework next to it ends with it. */
.hbk-foot {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: auto;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: var(--r-l);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.hbk-foot[hidden] { display: none; }
.hbk-foot--link { grid-template-columns: 36px minmax(0, 1fr) 36px; transition: transform var(--dur-1) var(--ease-out); }
.hbk-foot--link:active { transform: scale(0.98); }
.hbk-foot-coin-box { display: grid; width: 36px; height: 36px; }
.hbk-foot-coin { width: 100%; height: 100%; }
.hbk-foot-words { display: grid; gap: 1px; min-width: 0; }
.hbk-foot-text, .hbk-foot-sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hbk-foot-text { font-size: 18px; font-weight: 800; }
.hbk-foot-sub { font-size: 14px; font-weight: 600; color: var(--mint-ink); }
.hbk-foot-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--mint-ink); box-shadow: var(--shadow-1); }
.hbk-foot-go svg { width: 20px; height: 20px; stroke-width: 2.4; }
.hbk-empty-art { width: 120px; height: 120px; }

/* The child's own page: the panel and 这一周 side by side in landscape, equally tall. */
.hbk-kid-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--gap); }
@media (orientation: landscape) and (min-width: 900px) {
  .hbk-kid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hbk-kid-grid > .kid-slot > .kid-panel { width: 100%; }
.hbk-week { padding: var(--kid-pad, 18px); border-radius: var(--r-xl); }
.page--hbk-kid .hb-card-title { font-size: var(--kid-head-fs, 24px); }
.page--hbk-kid .pz-stat-value { font-size: 34px; }
@media (min-width: 700px) {
  .page--hbk-kid .pz-stat-value { font-size: 44px; }
  .page--hbk-kid .pz-stat-label { font-size: 15px; }
}

/* ======================= Week and month cells ======================= */
/* The name column never gets narrower than --hb-name-min (a four-character name with its picture on a
   375px phone); the seven day columns share the rest equally. */
.hb-week { --hb-name-min: 104px; display: grid; gap: 8px; }
.hb-week-row { display: grid; grid-template-columns: minmax(var(--hb-name-min), 1.8fr) repeat(7, minmax(0, 1fr)); align-items: center; gap: 4px; min-height: var(--hb-cell); }
.hb-week-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hb-week-art { display: grid; flex-shrink: 0; width: 30px; height: 30px; }
.hb-week-art svg { width: 100%; height: 100%; }
.hb-week-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 700; }
.hb-week-day { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-3); }
.hb-week-day.is-today { color: var(--mint-ink); }
.hb-week--kid { --hb-cell: 40px; --hb-name-min: 160px; gap: 10px; }
.hb-week--kid .hb-week-art { width: 40px; height: 40px; }
.hb-week--kid .hb-week-label { font-size: 18px; font-weight: 800; }
.hb-week--kid .hb-week-day { font-size: 16px; }

.hb-cell {
  justify-self: center;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: min(var(--hb-cell), 100%);
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 50%;
  color: var(--text-3);
  background: transparent;
}
.hb-cell svg { width: 62%; height: 62%; stroke-width: 2.8; }
.hb-cell[data-state="done"] { background: var(--mint); color: var(--hb-on); }
.hb-cell[data-state="wait"] { background: var(--warning-soft); color: var(--warning-text); }
.hb-cell[data-state="back"] { background: var(--danger-soft); color: var(--danger); }
.hb-cell[data-state="today"] { border: 2px dashed var(--mint); }
.hb-cell[data-state="missed"] { border-color: var(--line-strong); }
/* Still to come: a dotted, fainter ring — not the solid ring of 「没做」 (the key lists it when shown). */
.hb-cell[data-state="later"] { border-style: dotted; border-color: var(--line-strong); opacity: 0.6; }
.hb-cell[data-state="rest"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }

.hb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12px; color: var(--text-3); }
/* Each item on one line, its key a fixed 14px circle (a %-width inside an item sized by its content would
   shrink both). */
.hb-legend-item { display: inline-flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; }
.hb-cell--key { --hb-cell: 14px; flex: none; width: var(--hb-cell); border-width: 1.5px; }
.hb-cal-key { flex: none; }
.hb-cell--key[data-state="rest"]::after { width: 4px; height: 4px; }
.page--hbk-kid .hb-legend { font-size: 14px; }

/* ======================= Parents ======================= */
.page--habits .page-body > .hb-section:first-child > .hb-section-label { margin-top: 36px; }
.hb-switcher { margin: 6px 0 12px; }
.hb-lead { margin-bottom: 4px; text-wrap: balance; }
.hb-section-label { justify-content: space-between; }
.hb-section-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hb-section-title > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-section-title svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--mint-ink); }
.hb-section-hint { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.hb-all { flex-shrink: 0; margin: -6px 0; }
.hb-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: var(--text-on-brand);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.hb-tab-badge[hidden] { display: none; }
.badge-icon--mint { background: linear-gradient(135deg, var(--hb-grad-1), var(--hb-grad-2)); }

/* A habit picture on a soft mint tile; one size per use. */
.hb-pic { display: grid; place-items: center; flex-shrink: 0; width: var(--hb-pic-sm); height: var(--hb-pic-sm); border-radius: 12px; background: var(--mint-soft); }
.hb-pic--md { width: var(--hb-pic-md); height: var(--hb-pic-md); border-radius: 16px; }
.hb-pic--lg { width: var(--hb-pic-lg); height: var(--hb-pic-lg); border-radius: 20px; }
.hb-pic-svg { width: 82%; height: 82%; }

.hb-card { padding: var(--card-pad); }
.hb-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hb-card-title { font-size: 18px; font-weight: 800; }
.hb-card-hint { flex-shrink: 0; font-size: 13px; color: var(--text-3); }
.hb-week-skel { height: 200px; border-radius: var(--r-m); }

.hb-none { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--text-2); font-size: 15px; }
.hb-none svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--positive); }
.hb-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 26px;
  padding: 28px 20px;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: center;
  text-decoration: none;
}
.hb-empty p { font-size: 14px; color: var(--text-2); }
.hb-empty:active { transform: scale(0.98); }
.hb-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--mint-ink); background: var(--mint-soft); }
.hb-empty-icon svg { width: 34px; height: 34px; }
.hb-foot-note { margin: 18px 8px 0; font-size: 12px; line-height: 1.6; color: var(--text-3); text-align: center; }
.hb-skel { border-radius: var(--r-l); }
.hb-skel--req { height: 132px; }

/* 待确认: equal cards, two per row on wide screens. */
.hb-reqs { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: var(--gap); }
@media (min-width: 700px) { .hb-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-reqs > .card { margin-top: 0; }
.hb-req { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; height: 100%; padding: var(--card-pad); }
.hb-req-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hb-req-text { display: grid; gap: 2px; min-width: 0; }
.hb-req-who, .hb-req-coins { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-req-coins { color: var(--text-3); }
.hb-req-name { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.hb-two .btn { width: 100%; }

/* One child today, and the habit list. */
.hb-list .row::before { left: 68px; }
.hb-row, .hb-manage-row { gap: 10px; min-height: 64px; padding-right: 8px; }
.hb-row-main { padding: 6px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.hb-more { flex-shrink: 0; }
.hb-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.hb-state svg { width: 15px; height: 15px; stroke-width: 2.6; }
.hb-state[data-state="pending"] { background: var(--warning-soft); color: var(--warning-text); }
.hb-state[data-state="approved"] { background: var(--positive-soft); color: var(--positive); }
.hb-state[data-state="returned"] { background: var(--danger-soft); color: var(--danger); }
.hb-state[data-state="rest"] { background: transparent; color: var(--text-3); }
.hb-row.is-rest .hb-pic, .hb-row.is-rest .row-main { opacity: 0.6; }
.hb-manage-actions { margin-top: 0; }
.hb-manage-row.is-off .hb-pic, .hb-manage-row.is-off .row-main { opacity: 0.5; }

/* 一键添加: equal tiles (picture, name, target), four per row (two below 360px). */
.hb-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: var(--gap); }
@media (min-width: 360px) { .hb-tpls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hb-tpl {
  --hb-pic-md: 48px;
  position: relative;
  display: grid;
  grid-template-rows: var(--hb-pic-md) 22px 18px;
  justify-items: center;
  align-content: center;
  row-gap: 6px;
  height: 100%;
  min-width: 0;
  min-height: 124px;
  padding: 12px 4px 10px;
  border: 0;
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font: inherit;
  color: var(--text);
  transition: transform var(--dur-1) var(--ease-out);
}
.hb-tpl:active { transform: scale(0.96); }
.hb-tpl-name, .hb-tpl-sub { width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.hb-tpl-name { font-size: 15px; font-weight: 800; line-height: 22px; }
.hb-tpl-sub { font-size: 12px; line-height: 18px; color: var(--text-3); }
.hb-tpl-mark { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--hb-on); }
.hb-tpl-mark svg { width: 14px; height: 14px; stroke-width: 2.8; }
.hb-tpl.is-added .hb-tpl-mark { background: var(--positive-soft); color: var(--positive); }
.hb-tpl.is-added .hb-pic, .hb-tpl.is-added .hb-tpl-name { opacity: 0.6; }
.hb-tpl--skel { min-height: 124px; box-shadow: none; }

/* ---------- Sheets ---------- */
.hb-icon-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.hb-icon-grid .ip-tile { padding: 6px 2px 4px; }
.hb-icon-art { width: 100%; height: 100%; }
.hb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hb-days[hidden] { display: none; }
.hb-day {
  min-width: 0;
  height: 44px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2), color var(--dur-2);
}
.hb-day:active { transform: scale(0.94); }
.hb-day[aria-pressed="true"] { border-color: var(--mint); background: var(--mint); color: var(--hb-on); }
.hb-form-list { margin-top: 16px; }
.hb-form-row { gap: 12px; }
.hb-form-row .row-sub--wrap { line-height: 1.4; }
.hb-form .form-error { margin-top: 12px; }

.hb-backfill-head { display: grid; grid-template-columns: var(--hb-pic-md) minmax(0, 1fr); align-items: center; gap: 12px; }
.hb-backfill-text { display: grid; gap: 2px; min-width: 0; }
.hb-backfill-text strong { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-backfill-text span { font-size: 13px; color: var(--text-3); }
.hb-backfill-list { margin-top: 14px; }
.hb-backfill-list .row::before { left: 16px; }
.hb-backfill-row { gap: 12px; min-height: 56px; }
.hb-backfill-row .btn, .hb-backfill-row .hb-state { flex-shrink: 0; min-width: 76px; }
.hb-backfill-skel { height: 392px; }
.hb-older { margin-top: 16px; }
.hb-older-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hb-older-go { min-height: 52px; }

/* ---------- 统计 ---------- */
.hb-month { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: 2px; }
.hb-month-title { text-align: center; font-size: 20px; font-weight: 800; color: var(--hero-text); }
.hb-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hb-cal-head { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-3); }
.hb-cal-day {
  display: grid;
  place-content: center;
  justify-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
}
.hb-cal-num { font-size: 15px; font-weight: 800; line-height: 1.1; }
.hb-cal-count { font-size: 10px; font-weight: 700; line-height: 1.2; opacity: 0.8; }
.hb-cal-day[data-tone="all"] { background: var(--mint); color: var(--hb-on); }
.hb-cal-day[data-tone="some"] { background: var(--mint-soft); color: var(--mint-ink); }
.hb-cal-day[data-tone="none"] { background: var(--surface-2); color: var(--text-2); }
.hb-cal-day[data-tone="today"] { border: 2px dashed var(--mint); background: transparent; }
.hb-cal-day[data-tone="rest"], .hb-cal-day[data-tone="later"] { background: transparent; color: var(--text-3); }
.hb-cal-day.is-today:not([data-tone="today"]) { box-shadow: 0 0 0 2px var(--accent); }
.hb-cal-blank { aspect-ratio: 1 / 1; }
.hb-cal-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); }
.hb-cal-key[data-tone="all"] { background: var(--mint); }
.hb-cal-key[data-tone="some"] { background: var(--mint-soft); box-shadow: inset 0 0 0 1.5px var(--mint); }
.hb-cal-key[data-tone="rest"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.hb-cal-skel { height: 320px; border-radius: var(--r-m); }

.hb-habit-cards { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--gap); }
@media (min-width: 700px) { .hb-habit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hb-habit-cards > .card { margin-top: 0; }
.hb-habit { display: grid; align-content: start; gap: 12px; height: 100%; padding: var(--card-pad); }
.hb-habit.is-off .hb-pic, .hb-habit.is-off .hb-habit-name { opacity: 0.55; }
.hb-habit-head { display: grid; grid-template-columns: var(--hb-pic-md) minmax(0, 1fr); align-items: center; gap: 12px; }
.hb-habit-text { display: grid; gap: 6px; min-width: 0; }
.hb-habit-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hb-habit-title .hb-chip { flex: none; }
.hb-habit-name { min-width: 0; font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.hb-chip svg { width: 14px; height: 14px; stroke-width: 2.2; }
.hb-chip--flame svg { color: var(--warning); }
.hb-chip--off { background: var(--surface-3); color: var(--text-3); }
/* Each habit's month: flatter cells, so a card stays short on a phone. */
.hb-cal--mini { gap: 4px; }
.hb-cell--day { width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; padding: 0; }
.hb-cal--mini .hb-cal-blank { aspect-ratio: 3 / 2; }
.hb-cell--day[data-state="later"] { border-color: transparent; }
.hb-cell--day[data-state="rest"]::after { content: none; }
.hb-cell--day[data-state="rest"], .hb-cell--day[data-state="later"] { color: var(--text-3); opacity: 0.6; }
.hb-cell--day[data-state="missed"], .hb-cell--day[data-state="today"] { color: var(--text-2); }
button.hb-cell--day { transition: transform var(--dur-1) var(--ease-out); }
button.hb-cell--day:active { transform: scale(0.9); }
.hb-legend-card .hb-legend { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .hbk-item.is-cheering, .hbk-item.is-cheering .hbk-spark { animation: none; }
}