.chk-animated-checkmark {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-animated-checkmark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-animated-checkmark-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease 0.12s, border-color 0.2s ease 0.12s, transform 0.15s ease;
}
.chk-animated-checkmark-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.85em;
  height: 0.85em;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-animated-checkmark input:checked + .chk-animated-checkmark-box {
  background: var(--c);
  border-color: var(--c);
  transition-delay: 0s;
}
.chk-animated-checkmark input:checked + .chk-animated-checkmark-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.12s;
}
.chk-animated-checkmark input:active + .chk-animated-checkmark-box {
  transform: scale(0.88);
}
.chk-animated-checkmark input:focus-visible + .chk-animated-checkmark-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-custom-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-custom-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0.125em solid currentColor;
  border-radius: 0.25em;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.chk-custom-checkbox input::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: var(--c);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: transform 0.12s ease-in;
}
.chk-custom-checkbox input:checked {
  border-color: var(--c);
}
.chk-custom-checkbox input:checked::before {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-custom-checkbox input:active {
  transform: scale(0.9);
}
.chk-custom-checkbox input:focus-visible {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-accent-color-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-accent-color-checkbox input {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  font-size: inherit;
  accent-color: var(--c);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-accent-color-checkbox:hover input {
  transform: scale(1.12);
}
.chk-accent-color-checkbox input:active {
  transform: scale(0.88);
  transition-duration: 0.1s;
}
.chk-accent-color-checkbox input:focus-visible {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-round-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-round-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  margin: 0;
  font: inherit;
  background: transparent;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-round-checkbox input::after {
  content: "";
  box-sizing: border-box;
  width: 0.36em;
  height: 0.66em;
  margin-top: -0.14em;
  border: solid #fff;
  border-width: 0 0.14em 0.14em 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease-in;
}
.chk-round-checkbox input:checked {
  background: var(--c);
  border-color: var(--c);
}
.chk-round-checkbox input:checked::after {
  transform: rotate(45deg) scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) 0.05s;
}
.chk-round-checkbox input:focus-visible {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-animated-circle-checkmark {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-animated-circle-checkmark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-animated-circle-checkmark-icon {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  stroke-width: 2;
}
.chk-animated-circle-checkmark-track {
  stroke: color-mix(in srgb, currentColor 38%, transparent);
}
.chk-animated-circle-checkmark-ring {
  stroke: var(--c);
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-dashoffset 0.3s ease-in 0.1s;
}
.chk-animated-circle-checkmark-tick {
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.12s ease-in;
}
.chk-animated-circle-checkmark input:checked + .chk-animated-circle-checkmark-icon {
  animation: chk-animated-circle-checkmark-bump 0.35s ease 0.62s;
}
.chk-animated-circle-checkmark input:checked + .chk-animated-circle-checkmark-icon .chk-animated-circle-checkmark-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-animated-circle-checkmark input:checked + .chk-animated-circle-checkmark-icon .chk-animated-circle-checkmark-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.3, 0, 0.2, 1) 0.38s;
}
.chk-animated-circle-checkmark input:focus-visible + .chk-animated-circle-checkmark-icon {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-animated-circle-checkmark-bump {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.14); }
}

.chk-css-only-checkmark {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-css-only-checkmark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-css-only-checkmark-box {
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease 0.2s, border-color 0.2s ease 0.2s;
}
.chk-css-only-checkmark-box::before,
.chk-css-only-checkmark-box::after {
  content: "";
  position: absolute;
  height: 0.14em;
  border-radius: 0.07em;
  background: var(--c);
  transform-origin: 0.07em 50%;
}
.chk-css-only-checkmark-box::before {
  left: 0.15em;
  top: 0.51em;
  width: 0.48em;
  transform: rotate(45deg) scaleX(0);
  transition: transform 0.12s ease-in 0.12s;
}
.chk-css-only-checkmark-box::after {
  left: 0.39em;
  top: 0.75em;
  width: 0.83em;
  transform: rotate(-48.5deg) scaleX(0);
  transition: transform 0.14s ease-in;
}
.chk-css-only-checkmark input:checked + .chk-css-only-checkmark-box {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: var(--c);
  transition-delay: 0s;
}
.chk-css-only-checkmark input:checked + .chk-css-only-checkmark-box::before {
  transform: rotate(45deg) scaleX(1);
  transition: transform 0.15s cubic-bezier(0.5, 0, 0.9, 0.6);
}
.chk-css-only-checkmark input:checked + .chk-css-only-checkmark-box::after {
  transform: rotate(-48.5deg) scaleX(1);
  transition: transform 0.24s cubic-bezier(0.1, 0.4, 0.3, 1) 0.14s;
}
.chk-css-only-checkmark input:focus-visible + .chk-css-only-checkmark-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-morphing-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-morphing-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-morphing-checkbox-box {
  position: relative;
  flex: none;
  width: 1.25em;
  height: 1.25em;
}
.chk-morphing-checkbox-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 1.25em;
  height: 1.25em;
  border: 0.14em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.22em;
  transition:
    width 0.3s cubic-bezier(0.5, 0, 0.3, 1),
    height 0.3s cubic-bezier(0.5, 0, 0.3, 1),
    transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
    border-width 0.3s ease,
    border-color 0.25s ease,
    border-radius 0.25s ease;
}
.chk-morphing-checkbox input:checked + .chk-morphing-checkbox-box::before {
  width: 0.6em;
  height: 1.3em;
  border-width: 0.22em;
  border-color: transparent var(--c) var(--c) transparent;
  border-radius: 0 0 0.12em 0;
  transform: translate(0.325em, -0.26em) rotate(45deg);
}
.chk-morphing-checkbox input:focus-visible + .chk-morphing-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
  border-radius: 0.22em;
}

.chk-fill-from-center-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-fill-from-center-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-fill-from-center-checkbox-box {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  overflow: hidden;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: border-color 0.2s ease 0.1s;
}
.chk-fill-from-center-checkbox-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6em;
  height: 1.6em;
  margin: -0.8em 0 0 -0.8em;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.5, 0, 1, 1) 0.1s;
}
.chk-fill-from-center-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  width: 0.85em;
  height: 0.85em;
  stroke: #fff;
  stroke-width: 3.2;
  opacity: 0;
  transform: translateY(0.3em) scale(0.6);
  transition: opacity 0.12s ease, transform 0.15s ease-in;
}
.chk-fill-from-center-checkbox input:checked + .chk-fill-from-center-checkbox-box {
  border-color: var(--c);
  transition-delay: 0s;
}
.chk-fill-from-center-checkbox input:checked + .chk-fill-from-center-checkbox-box::before {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0, 0, 0.2, 1);
}
.chk-fill-from-center-checkbox input:checked + .chk-fill-from-center-checkbox-box svg {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease 0.18s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s;
}
.chk-fill-from-center-checkbox input:focus-visible + .chk-fill-from-center-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

@property --chk-radial-wipe-checkbox-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.chk-radial-wipe-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-radial-wipe-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-radial-wipe-checkbox-box {
  --chk-radial-wipe-checkbox-turn: 0deg;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  background: conic-gradient(var(--c) var(--chk-radial-wipe-checkbox-turn), transparent 0);
  transition: --chk-radial-wipe-checkbox-turn 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.12s, border-color 0.2s ease 0.3s;
}
.chk-radial-wipe-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.85em;
  height: 0.85em;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.12s ease-in;
}
.chk-radial-wipe-checkbox input:checked + .chk-radial-wipe-checkbox-box {
  --chk-radial-wipe-checkbox-turn: 360deg;
  border-color: var(--c);
  transition: --chk-radial-wipe-checkbox-turn 0.45s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.2s ease;
}
.chk-radial-wipe-checkbox input:checked + .chk-radial-wipe-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s ease-out 0.4s;
}
.chk-radial-wipe-checkbox input:focus-visible + .chk-radial-wipe-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-bounce-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-bounce-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-bounce-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.32em;
  transform-origin: 50% 100%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-bounce-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.85em;
  height: 0.85em;
  stroke: #fff;
  stroke-width: 3.2;
  transform: scale(0);
  transition: transform 0.15s ease-in;
}
.chk-bounce-checkbox input:checked + .chk-bounce-checkbox-box {
  background: var(--c);
  border-color: var(--c);
  animation: chk-bounce-checkbox-squash 0.6s cubic-bezier(0.3, 0.1, 0.3, 1);
}
.chk-bounce-checkbox input:checked + .chk-bounce-checkbox-box svg {
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) 0.15s;
}
.chk-bounce-checkbox input:focus-visible + .chk-bounce-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-bounce-checkbox-squash {
  0%, 100% { transform: scale(1, 1); }
  18% { transform: scale(1.28, 0.72); }
  38% { transform: scale(0.82, 1.2); }
  58% { transform: scale(1.1, 0.92); }
  78% { transform: scale(0.97, 1.03); }
}

.chk-material-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
  gap: 0.75em;}
.chk-material-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-material-checkbox-box {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125em;
  height: 1.125em;
  border: 0.125em solid color-mix(in srgb, currentColor 60%, transparent);
  border-radius: 0.125em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chk-material-checkbox-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em 0 0 -1.25em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chk-material-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.85em;
  height: 0.85em;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  transition: stroke-dashoffset 0.1s linear;
}
.chk-material-checkbox:hover .chk-material-checkbox-box::before {
  opacity: 0.07;
  transform: scale(1);
}
.chk-material-checkbox input:active + .chk-material-checkbox-box::before {
  opacity: 0.16;
  transform: scale(1);
}
.chk-material-checkbox input:checked + .chk-material-checkbox-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-material-checkbox input:checked + .chk-material-checkbox-box::before {
  background: var(--c);
  animation: chk-material-checkbox-ripple 0.55s cubic-bezier(0.2, 0, 0, 1);
}
.chk-material-checkbox input:checked + .chk-material-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
}
.chk-material-checkbox input:focus-visible + .chk-material-checkbox-box::before {
  opacity: 0.18;
  transform: scale(1);
}
.chk-material-checkbox input:focus-visible + .chk-material-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-material-checkbox-ripple {
  from { opacity: 0.35; transform: scale(0.4); }
  to { opacity: 0; transform: scale(1); }
}

.chk-neumorphic-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --surface: color-mix(in srgb, var(--c) 6%, #e4e8ee);
  --shade: color-mix(in srgb, var(--c) 14%, #a3adbd);
  gap: 0.8em;
  padding: 0.9em 1.3em;
  border-radius: 1em;
  background: var(--surface);
  color: color-mix(in srgb, var(--c) 20%, #4b5563);
  font-weight: 500;}
.chk-neumorphic-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-neumorphic-checkbox-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.4em;
  background: var(--surface);
  box-shadow:
    0.22em 0.22em 0.45em var(--shade),
    -0.22em -0.22em 0.45em #fff,
    inset 0 0 0 transparent,
    inset 0 0 0 transparent;
  transition: box-shadow 0.35s ease;
}
.chk-neumorphic-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.95em;
  height: 0.95em;
  stroke: var(--c);
  stroke-width: 3;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  filter: drop-shadow(0 0 0.1em color-mix(in srgb, var(--c) 45%, transparent));
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-neumorphic-checkbox input:checked + .chk-neumorphic-checkbox-box {
  box-shadow:
    0 0 0 transparent,
    0 0 0 transparent,
    inset 0.15em 0.15em 0.3em var(--shade),
    inset -0.15em -0.15em 0.3em #fff;
}
.chk-neumorphic-checkbox input:checked + .chk-neumorphic-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.chk-neumorphic-checkbox input:focus-visible + .chk-neumorphic-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-3d-push-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-3d-push-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-3d-push-checkbox-key {
  --edge: color-mix(in srgb, var(--c) 30%, #94a3b8);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid var(--edge);
  border-radius: 0.35em;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  box-shadow: 0 0.25em 0 var(--edge);
  transform: translateY(-0.125em);
  transition:
    transform 0.18s cubic-bezier(0.3, 0.7, 0.4, 1),
    box-shadow 0.18s cubic-bezier(0.3, 0.7, 0.4, 1),
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.chk-3d-push-checkbox-key svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.95em;
  height: 0.95em;
  stroke: #fff;
  stroke-width: 3.2;
  transform: scale(0);
  transition: transform 0.12s ease-in;
}
.chk-3d-push-checkbox input:checked + .chk-3d-push-checkbox-key {
  --edge: color-mix(in srgb, var(--c) 62%, #000);
  background: var(--c);
  box-shadow: 0 0.06em 0 var(--edge);
  transform: translateY(0.065em);
}
.chk-3d-push-checkbox input:checked + .chk-3d-push-checkbox-key svg {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.7, 0.64, 1) 0.06s;
}
.chk-3d-push-checkbox input:active + .chk-3d-push-checkbox-key {
  box-shadow: 0 0 0 var(--edge);
  transform: translateY(0.125em);
}
.chk-3d-push-checkbox input:focus-visible + .chk-3d-push-checkbox-key {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-3d-flip-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-3d-flip-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-3d-flip-checkbox-card {
  position: relative;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border-radius: 0.3em;
  transform: perspective(4em) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.chk-3d-flip-checkbox-front,
.chk-3d-flip-checkbox-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 0.3em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.chk-3d-flip-checkbox-front {
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
}
.chk-3d-flip-checkbox-back {
  display: grid;
  place-items: center;
  background: var(--c);
  transform: rotateY(180deg);
}
.chk-3d-flip-checkbox-back svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
}
.chk-3d-flip-checkbox input:checked + .chk-3d-flip-checkbox-card {
  transform: perspective(4em) rotateY(180deg);
}
.chk-3d-flip-checkbox input:focus-visible + .chk-3d-flip-checkbox-card {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-neon-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --glow: color-mix(in srgb, var(--c) 55%, #fff);
  gap: 0.75em;
  padding: 0.75em 1.25em;
  border-radius: 0.75em;
  background: #0b0d17;
  color: #94a3b8;
  letter-spacing: 0.02em;}
.chk-neon-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-neon-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.1em solid color-mix(in srgb, var(--c) 80%, transparent);
  border-radius: 0.3em;
  box-shadow: 0 0 0 transparent, inset 0 0 0 transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.chk-neon-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.9em;
  height: 0.9em;
  stroke: var(--glow);
  stroke-width: 3;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  filter: drop-shadow(0 0 0.12em var(--c));
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-neon-checkbox-text {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.chk-neon-checkbox input:checked + .chk-neon-checkbox-box {
  border-color: var(--glow);
  box-shadow: 0 0 0.5em var(--c), inset 0 0 0.35em color-mix(in srgb, var(--c) 60%, transparent);
  animation: chk-neon-checkbox-flicker 0.6s linear;
}
.chk-neon-checkbox input:checked + .chk-neon-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.25s;
}
.chk-neon-checkbox input:checked ~ .chk-neon-checkbox-text {
  color: #fff;
  text-shadow: 0 0 0.5em var(--c);
}
.chk-neon-checkbox input:focus-visible + .chk-neon-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-neon-checkbox-flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.3; }
  16% { opacity: 1; }
  28% { opacity: 0.45; }
  40% { opacity: 1; }
  52% { opacity: 0.75; }
}

.chk-hand-drawn-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.5em;}
.chk-hand-drawn-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-hand-drawn-checkbox-icon {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 1.75em;
  height: 1.75em;
  overflow: visible;
}
.chk-hand-drawn-checkbox-box {
  stroke: currentColor;
  stroke-width: 1.8;
  opacity: 0.75;
}
.chk-hand-drawn-checkbox-tick {
  stroke: var(--c);
  stroke-width: 3.2;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-hand-drawn-checkbox-text {
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 1.1em;
}
.chk-hand-drawn-checkbox input:checked + .chk-hand-drawn-checkbox-icon {
  animation: chk-hand-drawn-checkbox-jolt 0.4s ease-out 0.3s;
}
.chk-hand-drawn-checkbox input:checked + .chk-hand-drawn-checkbox-icon .chk-hand-drawn-checkbox-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
.chk-hand-drawn-checkbox input:focus-visible + .chk-hand-drawn-checkbox-icon {
  outline: 0.1em dashed var(--c);
  outline-offset: 0.1em;
  border-radius: 0.2em;
}
@keyframes chk-hand-drawn-checkbox-jolt {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-6deg) scale(1.05); }
  65% { transform: rotate(3deg); }
}

.chk-liquid-fill-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-liquid-fill-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-liquid-fill-checkbox-box {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4em;
  height: 1.4em;
  overflow: hidden;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.35em;
  transition: border-color 0.3s ease 0.2s;
}
.chk-liquid-fill-checkbox-liquid {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3.2em;
  height: 3.2em;
  margin-left: -1.6em;
  transform: translateY(1.4em);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.8, 0.5) 0.1s;
}
.chk-liquid-fill-checkbox-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 39%;
  background: var(--c);
  animation: chk-liquid-fill-checkbox-turn 2.4s linear infinite;
}
.chk-liquid-fill-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.12s ease-in;
}
.chk-liquid-fill-checkbox input:checked + .chk-liquid-fill-checkbox-box {
  border-color: var(--c);
  transition-delay: 0s;
}
.chk-liquid-fill-checkbox input:checked + .chk-liquid-fill-checkbox-box .chk-liquid-fill-checkbox-liquid {
  transform: translateY(-0.3em);
  transition: transform 0.8s cubic-bezier(0.25, 0.6, 0.3, 1);
}
.chk-liquid-fill-checkbox input:checked + .chk-liquid-fill-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.5s;
}
.chk-liquid-fill-checkbox input:focus-visible + .chk-liquid-fill-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-liquid-fill-checkbox-turn {
  to { transform: rotate(360deg); }
}

.chk-line-to-checkmark {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-line-to-checkmark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-line-to-checkmark-box {
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-line-to-checkmark-short,
.chk-line-to-checkmark-long {
  position: absolute;
  left: -0.07em;
  top: -0.07em;
  height: 0.14em;
  border-radius: 0.07em;
  background: #fff;
  transform-origin: 0.07em 50%;
  transition: transform 0.2s ease-in;
}
.chk-line-to-checkmark-short {
  width: 0.465em;
  transform: translate(0.525em, 0.525em) rotate(180deg) scaleX(0);
}
.chk-line-to-checkmark-long {
  width: 0.777em;
  transform: translate(0.525em, 0.525em) rotate(0deg) scaleX(0);
}
.chk-line-to-checkmark input:checked + .chk-line-to-checkmark-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-line-to-checkmark input:checked + .chk-line-to-checkmark-box .chk-line-to-checkmark-short {
  transform: translate(0.43em, 0.75em) rotate(225deg) scaleX(1);
  animation: chk-line-to-checkmark-short 0.55s;
}
.chk-line-to-checkmark input:checked + .chk-line-to-checkmark-box .chk-line-to-checkmark-long {
  transform: translate(0.43em, 0.75em) rotate(-47.5deg) scaleX(1);
  animation: chk-line-to-checkmark-long 0.55s;
}
.chk-line-to-checkmark input:focus-visible + .chk-line-to-checkmark-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-line-to-checkmark-short {
  0% { transform: translate(0.525em, 0.525em) rotate(180deg) scaleX(0); animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
  38% { transform: translate(0.525em, 0.525em) rotate(180deg) scaleX(0.88); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  100% { transform: translate(0.43em, 0.75em) rotate(225deg) scaleX(1); }
}
@keyframes chk-line-to-checkmark-long {
  0% { transform: translate(0.525em, 0.525em) rotate(0deg) scaleX(0); animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
  38% { transform: translate(0.525em, 0.525em) rotate(0deg) scaleX(0.53); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  100% { transform: translate(0.43em, 0.75em) rotate(-47.5deg) scaleX(1); }
}

.chk-tick-and-cross-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-tick-and-cross-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-tick-and-cross-checkbox-box {
  --no: color-mix(in srgb, #ef4444 78%, currentColor);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.125em solid color-mix(in srgb, var(--no) 55%, transparent);
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--no) 10%, transparent);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-tick-and-cross-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  grid-area: 1 / 1;
  width: 0.9em;
  height: 0.9em;
  stroke-width: 3.2;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.chk-tick-and-cross-checkbox-cross {
  stroke: var(--no);
}
.chk-tick-and-cross-checkbox-tick {
  stroke: #fff;
  opacity: 0;
  transform: rotate(-90deg) scale(0.3);
}
.chk-tick-and-cross-checkbox input:checked + .chk-tick-and-cross-checkbox-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-tick-and-cross-checkbox input:checked + .chk-tick-and-cross-checkbox-box .chk-tick-and-cross-checkbox-cross {
  opacity: 0;
  transform: rotate(90deg) scale(0.3);
}
.chk-tick-and-cross-checkbox input:checked + .chk-tick-and-cross-checkbox-box .chk-tick-and-cross-checkbox-tick {
  opacity: 1;
  transform: none;
}
.chk-tick-and-cross-checkbox input:focus-visible + .chk-tick-and-cross-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-square-to-circle-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-square-to-circle-checkbox-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
}
.chk-square-to-circle-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  grid-area: 1 / 1;
  width: 1.375em;
  height: 1.375em;
  margin: 0;
  font: inherit;
  background: transparent;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 18%;
  cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease;
}
.chk-square-to-circle-checkbox svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  grid-area: 1 / 1;
  width: 0.875em;
  height: 0.875em;
  stroke: #fff;
  stroke-width: 3.2;
  pointer-events: none;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.15s ease-in;
}
.chk-square-to-circle-checkbox input:checked {
  border-radius: 50%;
  background: var(--c);
  border-color: var(--c);
}
.chk-square-to-circle-checkbox input:checked + svg {
  transform: rotate(0deg) scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.chk-square-to-circle-checkbox input:focus-visible {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-big-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.75em;
  padding: 0.4em 1em 0.4em 0.4em;
  border-radius: 0.8em;
  font-weight: 500;
  transition: background-color 0.2s ease;}
.chk-big-checkbox:hover {
  background: color-mix(in srgb, var(--c) 8%, transparent);
}
.chk-big-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-big-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border: 0.14em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.45em;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.chk-big-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1.4em;
  height: 1.4em;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-big-checkbox input:checked + .chk-big-checkbox-box {
  background: var(--c);
  border-color: var(--c);
  animation: chk-big-checkbox-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-big-checkbox input:checked + .chk-big-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.chk-big-checkbox input:active + .chk-big-checkbox-box {
  transform: scale(0.9);
}
.chk-big-checkbox input:focus-visible + .chk-big-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-big-checkbox-pop {
  0% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.chk-gradient-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --c2: color-mix(in oklab, var(--c), #ec4899 65%);
  --grad: linear-gradient(135deg, var(--c), var(--c2));
  font-weight: 600;}
.chk-gradient-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-gradient-checkbox-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border-radius: 0.35em;
}
.chk-gradient-checkbox-box::before,
.chk-gradient-checkbox-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
}
.chk-gradient-checkbox-box::before {
  padding: 0.14em;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.chk-gradient-checkbox-box::after {
  clip-path: circle(0% at 0% 100%);
  transition: clip-path 0.3s cubic-bezier(0.5, 0, 0.75, 0) 0.1s;
}
.chk-gradient-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.12s ease-in;
}
.chk-gradient-checkbox-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: currentColor;
  transition: color 0.35s ease;
}
.chk-gradient-checkbox input:checked + .chk-gradient-checkbox-box::after {
  clip-path: circle(142% at 0% 100%);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-gradient-checkbox input:checked + .chk-gradient-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.28s ease-out 0.32s;
}
.chk-gradient-checkbox input:checked ~ .chk-gradient-checkbox-text {
  color: transparent;
}
.chk-gradient-checkbox input:focus-visible + .chk-gradient-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-sliding-checkmark {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-sliding-checkmark input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-sliding-checkmark-box {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  overflow: hidden;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: border-color 0.2s ease 0.15s;
}
.chk-sliding-checkmark-fill {
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-sliding-checkmark-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
  opacity: 0;
  transform: translateX(-1.1em);
  transition: opacity 0.12s ease, transform 0s linear 0.15s;
}
.chk-sliding-checkmark input:checked + .chk-sliding-checkmark-box {
  border-color: var(--c);
  transition-delay: 0s;
}
.chk-sliding-checkmark input:checked + .chk-sliding-checkmark-box .chk-sliding-checkmark-fill {
  transform: scaleX(1);
  transform-origin: left;
}
.chk-sliding-checkmark input:checked + .chk-sliding-checkmark-box svg {
  opacity: 1;
  transform: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s, opacity 0.1s ease 0.12s;
}
.chk-sliding-checkmark input:focus-visible + .chk-sliding-checkmark-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-pixel-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-pixel-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-pixel-checkbox-icon {
  display: block;
  flex: none;
  width: 1.625em;
  height: 1.625em;
  shape-rendering: crispEdges;
}
.chk-pixel-checkbox-shadow {
  fill: color-mix(in srgb, currentColor 30%, transparent);
}
.chk-pixel-checkbox-frame {
  fill: currentColor;
}
.chk-pixel-checkbox-fill {
  fill: var(--c);
  opacity: 0;
  transition: opacity 0.2s steps(2, jump-none);
}
.chk-pixel-checkbox-tick {
  fill: #fff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.16s steps(4, end);
}
.chk-pixel-checkbox-text {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chk-pixel-checkbox input:checked + .chk-pixel-checkbox-icon {
  animation: chk-pixel-checkbox-hop 0.24s steps(1, end);
}
.chk-pixel-checkbox input:checked + .chk-pixel-checkbox-icon .chk-pixel-checkbox-fill {
  opacity: 1;
  transition: opacity 0.24s steps(3, jump-none);
}
.chk-pixel-checkbox input:checked + .chk-pixel-checkbox-icon .chk-pixel-checkbox-tick {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.4s steps(8, end) 0.2s;
}
.chk-pixel-checkbox input:focus-visible + .chk-pixel-checkbox-icon {
  outline: 0.125em dashed var(--c);
  outline-offset: 0.15em;
}
@keyframes chk-pixel-checkbox-hop {
  0% { transform: translateY(-0.125em); }
  50% { transform: translateY(0.0625em); }
  100% { transform: translateY(0); }
}

.chk-confetti-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-confetti-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-confetti-checkbox-box {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-confetti-checkbox-bit {
  --d: -1.25em;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.24em;
  height: 0.24em;
  margin: -0.12em 0 0 -0.12em;
  border-radius: 0.04em;
  background: var(--c);
  opacity: 0;
  pointer-events: none;
}
.chk-confetti-checkbox-bit:nth-child(even) {
  --d: -1.6em;
}
.chk-confetti-checkbox-bit:nth-child(4n + 2) {
  background: #f59e0b;
  border-radius: 50%;
}
.chk-confetti-checkbox-bit:nth-child(4n + 3) {
  background: #ec4899;
}
.chk-confetti-checkbox-bit:nth-child(4n + 4) {
  background: #10b981;
  border-radius: 50%;
}
.chk-confetti-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.12s ease-in;
}
.chk-confetti-checkbox input:checked + .chk-confetti-checkbox-box {
  background: var(--c);
  border-color: var(--c);
  animation: chk-confetti-checkbox-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-confetti-checkbox input:checked + .chk-confetti-checkbox-box .chk-confetti-checkbox-bit {
  animation: chk-confetti-checkbox-burst 0.75s cubic-bezier(0.15, 0.7, 0.3, 1) calc(var(--i) * 15ms);
}
.chk-confetti-checkbox input:checked + .chk-confetti-checkbox-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.15s;
}
.chk-confetti-checkbox input:focus-visible + .chk-confetti-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-confetti-checkbox-pop {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
@keyframes chk-confetti-checkbox-burst {
  0% { opacity: 1; transform: rotate(calc(var(--i) * 45deg)) translateY(-0.4em) scale(0.4) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 45deg + 20deg)) translateY(var(--d)) scale(1) rotate(180deg); }
}

.chk-stamp-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;
  font-weight: 600;}
.chk-stamp-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-stamp-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.14em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.25em;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.chk-stamp-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1.5em;
  height: 1.5em;
  overflow: visible;
  stroke: var(--c);
  stroke-width: 3.6;
  opacity: 0;
  transform: rotate(-10deg) scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease-in;
}
.chk-stamp-checkbox input:checked + .chk-stamp-checkbox-box {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  animation: chk-stamp-checkbox-flinch 0.3s ease-out 0.2s;
}
.chk-stamp-checkbox input:checked + .chk-stamp-checkbox-box svg {
  opacity: 1;
  transform: rotate(-10deg) scale(1);
  animation: chk-stamp-checkbox-slam 0.38s;
}
.chk-stamp-checkbox input:focus-visible + .chk-stamp-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-stamp-checkbox-slam {
  0% { opacity: 0; transform: rotate(-26deg) scale(2.3); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  55% { opacity: 1; transform: rotate(-8deg) scale(0.9); animation-timing-function: ease-out; }
  78% { transform: rotate(-11deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}
@keyframes chk-stamp-checkbox-flinch {
  0%, 100% { transform: none; }
  30% { transform: scale(0.88) rotate(2deg); }
  65% { transform: scale(1.04) rotate(-1deg); }
}

.chk-tailwind-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.625em;}
.chk-tailwind-checkbox-box {
  display: grid;
  place-items: center;
  flex: none;
}
.chk-tailwind-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  grid-area: 1 / 1;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
  font: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 0.25em;
  box-shadow: 0 1px 2px color-mix(in srgb, currentColor 10%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-tailwind-checkbox:hover input {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
}
.chk-tailwind-checkbox input:checked {
  background: var(--c);
  border-color: var(--c);
}
.chk-tailwind-checkbox:hover input:checked {
  background: color-mix(in srgb, var(--c) 85%, #000);
}
.chk-tailwind-checkbox svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  grid-area: 1 / 1;
  width: 0.875em;
  height: 0.875em;
  stroke: #fff;
  stroke-width: 2.4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.125em) scale(0.75);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.chk-tailwind-checkbox input:checked + svg {
  opacity: 1;
  transform: none;
}
.chk-tailwind-checkbox input:focus-visible {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-brutalist-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.75em;}
.chk-brutalist-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-brutalist-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid currentColor;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: 0.22em 0.22em 0 currentColor;
  transition:
    transform 0.12s cubic-bezier(0.5, 0, 0.75, 0),
    box-shadow 0.12s cubic-bezier(0.5, 0, 0.75, 0),
    background-color 0.15s ease;
}
.chk-brutalist-checkbox-box svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transform: scale(0);
  transition: transform 0.1s ease-in;
}
.chk-brutalist-checkbox-text {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chk-brutalist-checkbox input:checked + .chk-brutalist-checkbox-box {
  background: var(--c);
  box-shadow: 0 0 0 currentColor;
  transform: translate(0.22em, 0.22em);
}
.chk-brutalist-checkbox input:checked + .chk-brutalist-checkbox-box svg {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.2, 2, 0.5, 1) 0.1s;
}
.chk-brutalist-checkbox input:focus-visible + .chk-brutalist-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-outline-to-solid-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-outline-to-solid-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-outline-to-solid-checkbox-box {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 0 var(--c);
  transition: box-shadow 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.12s, border-color 0.3s ease 0.12s;
}
.chk-outline-to-solid-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
  opacity: 0;
  transform: translateY(-0.4em) scale(0.8);
  transition: opacity 0.12s ease, transform 0.15s ease-in;
}
.chk-outline-to-solid-checkbox input:checked + .chk-outline-to-solid-checkbox-box {
  border-color: var(--c);
  box-shadow: inset 0 0 0 0.6em var(--c);
  transition: box-shadow 0.35s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.15s ease;
}
.chk-outline-to-solid-checkbox input:checked + .chk-outline-to-solid-checkbox-box svg {
  opacity: 1;
  transform: none;
  transition: opacity 0.15s ease 0.28s, transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1) 0.28s;
}
.chk-outline-to-solid-checkbox input:focus-visible + .chk-outline-to-solid-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-spin-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chk-spin-checkbox input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-spin-checkbox-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.375em;
  height: 1.375em;
  border-radius: 0.3em;
}
.chk-spin-checkbox-box::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 0.125em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease;
}
.chk-spin-checkbox-box svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  width: 0.9em;
  height: 0.9em;
  stroke: #fff;
  stroke-width: 3.2;
  transform: rotate(-120deg) scale(0);
  transition: transform 0.15s ease-in;
}
.chk-spin-checkbox input:checked + .chk-spin-checkbox-box::before {
  background: var(--c);
  border-color: var(--c);
  transform: rotate(180deg);
}
.chk-spin-checkbox input:checked + .chk-spin-checkbox-box svg {
  transform: rotate(0deg) scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
}
.chk-spin-checkbox input:focus-visible + .chk-spin-checkbox-box {
  outline: 0.125em solid var(--c);
  outline-offset: 0.18em;
}

.chk-todo-strikethrough {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-todo-strikethrough input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-todo-strikethrough-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.35em;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-todo-strikethrough-box svg {
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-todo-strikethrough-text {
  position: relative;
  transition: opacity 0.3s ease;
}
.chk-todo-strikethrough-text::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 53%;
  height: 0.09em;
  min-height: 1px;
  border-radius: 1em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-todo-strikethrough:hover .chk-todo-strikethrough-box {
  border-color: var(--c);
}
.chk-todo-strikethrough:active .chk-todo-strikethrough-box {
  transform: scale(0.88);
}
.chk-todo-strikethrough input:checked + .chk-todo-strikethrough-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-todo-strikethrough input:checked + .chk-todo-strikethrough-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
.chk-todo-strikethrough input:checked ~ .chk-todo-strikethrough-text {
  opacity: 0.5;
  transition-delay: 0.25s;
}
.chk-todo-strikethrough input:checked ~ .chk-todo-strikethrough-text::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.chk-todo-strikethrough input:focus-visible + .chk-todo-strikethrough-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-todo-task-card {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 13em;
  padding: 0.7em 0.9em;
  border: 0.07em solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.8em;
  overflow: hidden;
  line-height: 1.25;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;}
.chk-todo-task-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-todo-task-card-sweep {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-todo-task-card-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-todo-task-card-dot svg {
  width: 0.95em;
  height: 0.95em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-todo-task-card-body {
  display: grid;
  flex: 1;
  min-width: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.chk-todo-task-card-title {
  font-weight: 600;
}
.chk-todo-task-card-meta {
  font-size: 0.72em;
  opacity: 0.6;
}
.chk-todo-task-card-done {
  flex: none;
  padding: 0.25em 0.65em;
  border-radius: 1em;
  background: var(--c);
  color: #fff;
  font-size: 0.68em;
  font-weight: 600;
  opacity: 0;
  transform: translateX(0.8em) scale(0.6);
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.chk-todo-task-card input:checked ~ .chk-todo-task-card-sweep {
  transform: scaleX(1);
  transition-duration: 0.5s;
}
.chk-todo-task-card input:checked ~ .chk-todo-task-card-dot {
  background: var(--c);
  border-color: var(--c);
  animation: chk-todo-task-card-pop 0.5s ease-out;
}
.chk-todo-task-card input:checked ~ .chk-todo-task-card-dot svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s ease-out 0.15s;
}
.chk-todo-task-card input:checked ~ .chk-todo-task-card-body {
  transform: translateX(0.25em);
  opacity: 0.55;
}
.chk-todo-task-card input:checked ~ .chk-todo-task-card-done {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease 0.2s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.chk-todo-task-card input:focus-visible ~ .chk-todo-task-card-dot {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-todo-task-card-pop {
  0% { transform: scale(1); }
  30% { transform: scale(0.72, 0.66); }
  60% { transform: scale(1.18); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.chk-checklist-progress-bar {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  --p: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: 12em;
  line-height: 1.3;
  counter-reset: chk-checklist-progress-bar-done;}
.chk-checklist-progress-bar-head {
  order: -2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8em;
}
.chk-checklist-progress-bar-title {
  font-weight: 600;
}
.chk-checklist-progress-bar-count {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.chk-checklist-progress-bar-count::before {
  content: counter(chk-checklist-progress-bar-done) " / 3 done";
}
.chk-checklist-progress-bar-track {
  order: -1;
  height: 0.32em;
  margin-bottom: 0.4em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  overflow: hidden;
}
.chk-checklist-progress-bar-fill {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c);
  transform: scaleX(var(--p));
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}
.chk-checklist-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent);
  transform: translateX(-100%);
}
.chk-checklist-progress-bar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.12em 0;
  font-size: 0.85em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-checklist-progress-bar-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-checklist-progress-bar-item input:checked {
  counter-increment: chk-checklist-progress-bar-done;
}
.chk-checklist-progress-bar-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-checklist-progress-bar-box svg {
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-checklist-progress-bar-text {
  transition: opacity 0.3s ease;
}
.chk-checklist-progress-bar-item input:checked + .chk-checklist-progress-bar-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-checklist-progress-bar-item input:checked + .chk-checklist-progress-bar-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.05s;
}
.chk-checklist-progress-bar-item input:checked ~ .chk-checklist-progress-bar-text {
  opacity: 0.5;
}
.chk-checklist-progress-bar-item input:focus-visible + .chk-checklist-progress-bar-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item input:checked) {
  --p: 0.3333;
}
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(1) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(2) input:checked),
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(1) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(3) input:checked),
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(2) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(3) input:checked) {
  --p: 0.6667;
}
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(1) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(2) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(3) input:checked) {
  --p: 1;
}
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(1) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(2) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(3) input:checked) .chk-checklist-progress-bar-count {
  color: var(--c);
  opacity: 1;
}
.chk-checklist-progress-bar:has(.chk-checklist-progress-bar-item:nth-of-type(1) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(2) input:checked):has(.chk-checklist-progress-bar-item:nth-of-type(3) input:checked) .chk-checklist-progress-bar-fill::after {
  animation: chk-checklist-progress-bar-shine 0.9s ease-in-out 0.45s;
}
@keyframes chk-checklist-progress-bar-shine {
  to { transform: translateX(100%); }
}

.chk-card-select {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: 14.5em;
  padding: 0.85em 0.9em 0.85em 0.85em;
  line-height: 1.25;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;}
.chk-card-select input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-card-select-frame {
  position: absolute;
  inset: 0;
  border: 0.08em solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.9em;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, background-color 0.25s ease;
}
.chk-card-select-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-card-select-icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.chk-card-select-text {
  position: relative;
  display: grid;
  flex: 1;
}
.chk-card-select-title {
  font-weight: 600;
}
.chk-card-select-sub {
  font-size: 0.72em;
  opacity: 0.6;
}
.chk-card-select-badge {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.1em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-card-select-badge svg {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-card-select:hover .chk-card-select-frame {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
.chk-card-select input:checked + .chk-card-select-frame {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 6%, transparent);
  box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--c) 22%, transparent);
}
.chk-card-select input:checked ~ .chk-card-select-icon {
  background: var(--c);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}
.chk-card-select input:checked ~ .chk-card-select-badge {
  background: var(--c);
  border-color: var(--c);
  animation: chk-card-select-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-card-select input:checked ~ .chk-card-select-badge svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s ease-out 0.15s;
}
.chk-card-select input:focus-visible + .chk-card-select-frame {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-card-select-pop {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

.chk-heart-like {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-heart-like input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-heart-like-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
}
.chk-heart-like-icon svg {
  position: relative;
  width: 1.4em;
  height: 1.4em;
  fill: transparent;
  stroke: color-mix(in srgb, currentColor 38%, transparent);
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.chk-heart-like-ring {
  position: absolute;
  inset: 0;
  border: 0.85em solid var(--c);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}
.chk-heart-like-dots {
  position: absolute;
  inset: 0;
}
.chk-heart-like-dots i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.2em;
  height: 0.2em;
  margin: -0.1em;
  border-radius: 50%;
  background: var(--c);
  transform: rotate(calc(var(--i) * 45deg)) translateY(-0.6em) scale(0);
}
.chk-heart-like-dots i:nth-child(even) {
  background: color-mix(in srgb, var(--c) 55%, transparent);
}
.chk-heart-like-text {
  transition: color 0.2s ease;
}
.chk-heart-like:hover .chk-heart-like-icon svg {
  stroke: var(--c);
}
.chk-heart-like input:checked + .chk-heart-like-icon svg {
  fill: var(--c);
  stroke: var(--c);
  animation: chk-heart-like-beat 0.6s ease-out;
}
.chk-heart-like input:checked + .chk-heart-like-icon .chk-heart-like-ring {
  animation: chk-heart-like-ring 0.4s ease-out;
}
.chk-heart-like input:checked + .chk-heart-like-icon .chk-heart-like-dots i {
  animation: chk-heart-like-dot 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) 0.12s both;
}
.chk-heart-like input:checked ~ .chk-heart-like-text {
  color: var(--c);
}
.chk-heart-like input:focus-visible + .chk-heart-like-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-heart-like-beat {
  0%, 20% { transform: scale(0); }
  55% { transform: scale(1.25); }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes chk-heart-like-ring {
  0% { opacity: 1; transform: scale(0.2); border-width: 0.85em; }
  100% { opacity: 1; transform: scale(1.3); border-width: 0; }
}
@keyframes chk-heart-like-dot {
  0% { transform: rotate(calc(var(--i) * 45deg)) translateY(-0.5em) scale(0); }
  30% { transform: rotate(calc(var(--i) * 45deg)) translateY(-1em) scale(1.2); }
  100% { transform: rotate(calc(var(--i) * 45deg + 15deg)) translateY(-1.3em) scale(0); }
}

.chk-terms-agree-button {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  gap: 0.9em;
  line-height: 1.3;}
.chk-terms-agree-button-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-terms-agree-button-label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-terms-agree-button-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-terms-agree-button-box svg {
  width: 0.82em;
  height: 0.82em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-terms-agree-button-link {
  text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent);
  text-underline-offset: 0.18em;
}
.chk-terms-agree-button-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 0.6em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 600;
  opacity: 0.5;
  pointer-events: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}
.chk-terms-agree-button-icons {
  display: grid;
  width: 1em;
  height: 1em;
}
.chk-terms-agree-button-icons svg {
  grid-area: 1 / 1;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-terms-agree-button-arrow {
  opacity: 0;
  transform: translateX(-0.6em);
}
.chk-terms-agree-button-label input:checked + .chk-terms-agree-button-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-terms-agree-button-label input:checked + .chk-terms-agree-button-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.05s;
}
.chk-terms-agree-button-label input:focus-visible + .chk-terms-agree-button-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-btn {
  background: var(--c);
  color: #fff;
  opacity: 1;
  pointer-events: auto;
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-lock {
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
}
.chk-terms-agree-button:has(input:checked) .chk-terms-agree-button-arrow {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.chk-terms-agree-button-btn:active {
  transform: scale(0.97);
}
.chk-terms-agree-button-btn:focus-visible {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-filter-chips {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  max-width: 15em;}
.chk-filter-chips-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.85em 0.4em 0.7em;
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.25s ease;
}
.chk-filter-chips-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-filter-chips-bg {
  position: absolute;
  inset: 0;
  border: 0.09em solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 2em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-filter-chips-icon {
  position: relative;
  flex: none;
  width: 0.75em;
  height: 0.75em;
}
.chk-filter-chips-icon i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.15em;
  margin-top: -0.075em;
  border-radius: 1em;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-filter-chips-icon i:first-child {
  transform: translate(0, 0) rotate(0deg) scaleX(0.85);
}
.chk-filter-chips-icon i:last-child {
  transform: translate(0, 0) rotate(-90deg) scaleX(0.85);
}
.chk-filter-chips-text {
  position: relative;
}
.chk-filter-chips-chip:hover .chk-filter-chips-bg {
  border-color: var(--c);
}
.chk-filter-chips-chip:has(input:checked) {
  color: #fff;
}
.chk-filter-chips-chip input:checked + .chk-filter-chips-bg {
  background: var(--c);
  border-color: var(--c);
  animation: chk-filter-chips-press 0.35s ease-out;
}
.chk-filter-chips-chip input:checked ~ .chk-filter-chips-icon i:first-child {
  transform: translate(-0.18em, 0.11em) rotate(43deg) scaleX(0.4);
}
.chk-filter-chips-chip input:checked ~ .chk-filter-chips-icon i:last-child {
  transform: translate(0.11em, 0.01em) rotate(-47deg) scaleX(0.75);
}
.chk-filter-chips-chip input:focus-visible + .chk-filter-chips-bg {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-filter-chips-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.chk-image-checkbox {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: flex;
  gap: 0.6em;}
.chk-image-checkbox-tile {
  --sky: color-mix(in srgb, var(--c) 30%, #dbeafe);
  --far: color-mix(in srgb, var(--c) 55%, #475569);
  --near: color-mix(in srgb, var(--c) 70%, #0f172a);
  --sun: 72% 28%;
  --peak1: 30% 42%;
  --peak2: 70% 58%;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-image-checkbox-tile:nth-of-type(2) {
  --sky: linear-gradient(#fcd9a8, color-mix(in srgb, var(--c) 30%, #f9a8d4));
  --far: color-mix(in srgb, var(--c) 40%, #7c3aed);
  --near: color-mix(in srgb, var(--c) 45%, #3b0764);
  --sun: 35% 58%;
  --peak1: 68% 50%;
  --peak2: 18% 70%;
}
.chk-image-checkbox-tile:nth-of-type(3) {
  --sky: linear-gradient(#0b1026, color-mix(in srgb, var(--c) 45%, #1e1b4b));
  --far: color-mix(in srgb, var(--c) 35%, #334155);
  --near: color-mix(in srgb, var(--c) 25%, #020617);
  --sun: 28% 30%;
  --peak1: 62% 46%;
  --peak2: 25% 66%;
}
.chk-image-checkbox-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-image-checkbox-frame {
  display: block;
  width: 4.4em;
  height: 4.4em;
  border-radius: 0.7em;
  transition: background-color 0.3s ease;
}
.chk-image-checkbox-pic {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.7em;
  background:
    radial-gradient(circle at var(--sun), #fff7d6 0 0.42em, transparent 0.46em),
    conic-gradient(from 135deg at var(--peak2), var(--near) 90deg, transparent 0),
    conic-gradient(from 135deg at var(--peak1), var(--far) 90deg, transparent 0),
    var(--sky);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), border-radius 0.35s ease;
}
.chk-image-checkbox-badge {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border: 0.1em solid rgb(255 255 255 / 0.9);
  border-radius: 50%;
  background: rgb(15 23 42 / 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-image-checkbox-badge svg {
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-image-checkbox-caption {
  font-size: 0.72em;
  opacity: 0.7;
}
.chk-image-checkbox-tile:hover .chk-image-checkbox-pic {
  transform: scale(0.96);
}
.chk-image-checkbox-tile input:checked + .chk-image-checkbox-frame {
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.chk-image-checkbox-tile input:checked + .chk-image-checkbox-frame .chk-image-checkbox-pic {
  transform: scale(0.8);
  border-radius: 0.45em;
}
.chk-image-checkbox-tile input:checked ~ .chk-image-checkbox-badge {
  background: var(--c);
  border-color: var(--c);
  transform: scale(1.12);
}
.chk-image-checkbox-tile input:checked ~ .chk-image-checkbox-badge svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.25s ease-out 0.1s;
}
.chk-image-checkbox-tile input:focus-visible + .chk-image-checkbox-frame {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-star-favorite {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-star-favorite input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-star-favorite-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.4em;
}
.chk-star-favorite-icon svg {
  width: 1.45em;
  height: 1.45em;
  fill: transparent;
  stroke: color-mix(in srgb, currentColor 38%, transparent);
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.chk-star-favorite-sparks {
  position: absolute;
  inset: 0;
}
.chk-star-favorite-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.12em;
  height: 0.32em;
  margin: -0.16em -0.06em;
  border-radius: 1em;
  background: var(--c);
  transform: rotate(calc(var(--i) * 72deg + 36deg)) translateY(-0.7em) scaleY(0);
}
.chk-star-favorite-text {
  transition: color 0.25s ease;
}
.chk-star-favorite input:checked ~ .chk-star-favorite-text {
  color: var(--c);
}
.chk-star-favorite:hover .chk-star-favorite-icon svg {
  stroke: var(--c);
}
.chk-star-favorite input:checked + .chk-star-favorite-icon svg {
  fill: var(--c);
  stroke: var(--c);
  animation: chk-star-favorite-spin 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.chk-star-favorite input:checked + .chk-star-favorite-icon .chk-star-favorite-sparks i {
  animation: chk-star-favorite-spark 0.5s ease-out 0.3s both;
}
.chk-star-favorite input:focus-visible + .chk-star-favorite-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-star-favorite-spin {
  0% { transform: rotate(-72deg) scale(0.4); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes chk-star-favorite-spark {
  0% { transform: rotate(calc(var(--i) * 72deg + 36deg)) translateY(-0.6em) scaleY(0); }
  40% { transform: rotate(calc(var(--i) * 72deg + 36deg)) translateY(-0.95em) scaleY(1); }
  100% { transform: rotate(calc(var(--i) * 72deg + 36deg)) translateY(-1.25em) scaleY(0); }
}

.chk-indeterminate-checkbox-group {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  gap: 0.3em;
  line-height: 1.3;}
.chk-indeterminate-checkbox-group-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
}
.chk-indeterminate-checkbox-group-kids {
  display: grid;
  gap: 0.2em;
  margin-left: 0.55em;
  padding-left: 1em;
  border-left: 0.08em solid color-mix(in srgb, currentColor 18%, transparent);
}
.chk-indeterminate-checkbox-group-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.9em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-indeterminate-checkbox-group-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-indeterminate-checkbox-group-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-indeterminate-checkbox-group-box svg {
  grid-area: 1 / 1;
  width: 0.82em;
  height: 0.82em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-indeterminate-checkbox-group-dash {
  grid-area: 1 / 1;
  width: 0.55em;
  height: 0.13em;
  border-radius: 1em;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-indeterminate-checkbox-group-item input:checked + .chk-indeterminate-checkbox-group-box,
.chk-indeterminate-checkbox-group:has(input:checked) .chk-indeterminate-checkbox-group-parent {
  background: var(--c);
  border-color: var(--c);
}
.chk-indeterminate-checkbox-group-item input:checked + .chk-indeterminate-checkbox-group-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.05s;
}
.chk-indeterminate-checkbox-group:has(input:checked) .chk-indeterminate-checkbox-group-dash {
  transform: scaleX(1);
}
.chk-indeterminate-checkbox-group:not(:has(input:not(:checked))) .chk-indeterminate-checkbox-group-dash {
  transform: scaleX(0);
  transition-duration: 0.15s;
}
.chk-indeterminate-checkbox-group:not(:has(input:not(:checked))) .chk-indeterminate-checkbox-group-parent svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.12s;
}
.chk-indeterminate-checkbox-group-item input:focus-visible + .chk-indeterminate-checkbox-group-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-checkbox-list-group {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  width: 12em;
  border: 0.07em solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.75em;
  overflow: hidden;
  line-height: 1.3;}
.chk-checkbox-list-group-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.55em 0.8em 0.55em 0.95em;
  font-size: 0.9em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-checkbox-list-group-row + .chk-checkbox-list-group-row {
  border-top: 0.07em solid color-mix(in srgb, currentColor 12%, transparent);
}
.chk-checkbox-list-group-row input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-checkbox-list-group-tint {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chk-checkbox-list-group-tint::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.2em;
  background: var(--c);
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-checkbox-list-group-text {
  position: relative;
  transition: color 0.2s ease;
}
.chk-checkbox-list-group-row svg {
  position: relative;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-checkbox-list-group-row:hover .chk-checkbox-list-group-tint {
  opacity: 0.5;
}
.chk-checkbox-list-group-row input:checked + .chk-checkbox-list-group-tint {
  opacity: 1;
}
.chk-checkbox-list-group-row input:checked + .chk-checkbox-list-group-tint::before {
  transform: scaleY(1);
}
.chk-checkbox-list-group-row input:checked ~ .chk-checkbox-list-group-text {
  color: var(--c);
}
.chk-checkbox-list-group-row input:checked ~ svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
}
.chk-checkbox-list-group-row input:focus-visible + .chk-checkbox-list-group-tint {
  outline: 0.12em solid var(--c);
  outline-offset: -0.12em;
}

.chk-addon-price-total {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  gap: 0.4em;
  width: 13em;
  line-height: 1.3;
  counter-reset: chk-addon-price-total-sum 12;}
.chk-addon-price-total-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.7em;
  font-size: 0.85em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-addon-price-total-row input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-addon-price-total-row input:checked {
  counter-increment: chk-addon-price-total-sum var(--price);
}
.chk-addon-price-total-frame {
  position: absolute;
  inset: 0;
  border: 0.09em solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.7em;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.chk-addon-price-total-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border: 0.13em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.3em;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chk-addon-price-total-box svg {
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-addon-price-total-name {
  position: relative;
  flex: 1;
  font-weight: 500;
}
.chk-addon-price-total-price {
  position: relative;
  padding: 0.15em 0.55em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 0.85em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.chk-addon-price-total-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0.15em 0 0;
  padding: 0 0.2em;
  font-size: 0.85em;
  opacity: 0.85;
}
.chk-addon-price-total-sum {
  font-size: 1.25em;
  font-variant-numeric: tabular-nums;
}
.chk-addon-price-total-sum::after {
  content: "$" counter(chk-addon-price-total-sum) "/mo";
}
.chk-addon-price-total-row:hover .chk-addon-price-total-frame {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
.chk-addon-price-total-row input:checked + .chk-addon-price-total-frame {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
}
.chk-addon-price-total-row input:checked ~ .chk-addon-price-total-box {
  background: var(--c);
  border-color: var(--c);
}
.chk-addon-price-total-row input:checked ~ .chk-addon-price-total-box svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s ease-out 0.05s;
}
.chk-addon-price-total-row input:checked ~ .chk-addon-price-total-price {
  background: var(--c);
  color: #fff;
  animation: chk-addon-price-total-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-addon-price-total-row input:focus-visible + .chk-addon-price-total-frame {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-addon-price-total-bump {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

.chk-grocery-list-scribble {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  gap: 0.15em;
  padding: 0.7em 1.4em 0.8em 1.1em;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", "Marker Felt", cursive;
  line-height: 1.35;
  transform: rotate(-1.5deg);}
.chk-grocery-list-scribble-title {
  margin: 0 0 0.1em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--c);
}
.chk-grocery-list-scribble-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.05em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-grocery-list-scribble-item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-grocery-list-scribble-box {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, currentColor 55%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 0.2em;
}
.chk-grocery-list-scribble-tick {
  stroke: var(--c);
  stroke-width: 2.8;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.2s ease-in;
}
.chk-grocery-list-scribble-text {
  position: relative;
  transition: opacity 0.3s ease;
}
.chk-grocery-list-scribble-line {
  position: absolute;
  left: -0.2em;
  top: 20%;
  width: calc(100% + 0.4em);
  height: 60%;
  overflow: visible;
  fill: none;
  stroke: var(--c);
  stroke-width: 0.1em;
  stroke-linecap: round;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.25s ease-in;
}
.chk-grocery-list-scribble-item input:checked + .chk-grocery-list-scribble-box .chk-grocery-list-scribble-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.5, 0, 0.3, 1);
}
.chk-grocery-list-scribble-item input:checked ~ .chk-grocery-list-scribble-text {
  opacity: 0.55;
}
.chk-grocery-list-scribble-item input:checked ~ .chk-grocery-list-scribble-text .chk-grocery-list-scribble-line {
  clip-path: inset(0 -5% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.6, 0, 0.3, 1) 0.2s;
}
.chk-grocery-list-scribble-item input:focus-visible + .chk-grocery-list-scribble-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-bookmark-save {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.45em;}
.chk-bookmark-save input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-bookmark-save-icon {
  display: grid;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.3em;
}
.chk-bookmark-save-icon svg {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: color-mix(in srgb, currentColor 38%, transparent);
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: stroke 0.25s ease;
}
.chk-bookmark-save-outline {
  grid-area: 1 / 1;
}
.chk-bookmark-save-fill {
  grid-area: 1 / 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.25s ease-in;
}
.chk-bookmark-save-fill svg {
  fill: var(--c);
  stroke: var(--c);
}
.chk-bookmark-save-words {
  display: flex;
  flex-direction: column;
  height: 1.3em;
  overflow: hidden;
}
.chk-bookmark-save-words > span {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.chk-bookmark-save:hover .chk-bookmark-save-outline {
  stroke: var(--c);
}
.chk-bookmark-save input:checked + .chk-bookmark-save-icon {
  animation: chk-bookmark-save-drop 0.5s ease-out;
}
.chk-bookmark-save input:checked + .chk-bookmark-save-icon .chk-bookmark-save-outline {
  stroke: var(--c);
}
.chk-bookmark-save input:checked + .chk-bookmark-save-icon .chk-bookmark-save-fill {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-bookmark-save input:checked ~ .chk-bookmark-save-words > span {
  transform: translateY(-100%);
  color: var(--c);
}
.chk-bookmark-save input:focus-visible + .chk-bookmark-save-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-bookmark-save-drop {
  0% { transform: translateY(0); }
  35% { transform: translateY(0.2em) scaleY(1.08); }
  65% { transform: translateY(-0.08em) scaleY(0.97); }
  100% { transform: translateY(0); }
}

.chk-thumbs-up-counter {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.45em;
  padding: 0.45em 0.95em 0.45em 0.8em;}
.chk-thumbs-up-counter input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-thumbs-up-counter-bg {
  position: absolute;
  inset: 0;
  border: 0.08em solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 2em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-thumbs-up-counter-thumb {
  position: relative;
  width: 1.3em;
  height: 1.3em;
  fill: transparent;
  stroke: color-mix(in srgb, currentColor 75%, transparent);
  stroke-width: 1.7;
  stroke-linejoin: round;
  transform-origin: 25% 85%;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.chk-thumbs-up-counter-count {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 1.3em;
  overflow: hidden;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.chk-thumbs-up-counter-count > span {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-thumbs-up-counter:hover .chk-thumbs-up-counter-bg {
  border-color: var(--c);
}
.chk-thumbs-up-counter input:checked + .chk-thumbs-up-counter-bg {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border-color: var(--c);
}
.chk-thumbs-up-counter input:checked ~ .chk-thumbs-up-counter-thumb {
  fill: var(--c);
  stroke: var(--c);
  animation: chk-thumbs-up-counter-flick 0.6s ease-out;
}
.chk-thumbs-up-counter input:checked ~ .chk-thumbs-up-counter-count {
  color: var(--c);
}
.chk-thumbs-up-counter input:checked ~ .chk-thumbs-up-counter-count > span {
  transform: translateY(-100%);
  transition-delay: 0.15s;
}
.chk-thumbs-up-counter input:focus-visible + .chk-thumbs-up-counter-bg {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-thumbs-up-counter-flick {
  0% { transform: rotate(0deg) translateY(0) scale(1); }
  25% { transform: rotate(14deg) translateY(0.06em) scale(0.9); }
  60% { transform: rotate(-22deg) translateY(-0.18em) scale(1.18); }
  80% { transform: rotate(4deg) translateY(0) scale(0.98); }
  100% { transform: rotate(0deg) translateY(0) scale(1); }
}

.chk-emoji-smile {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-emoji-smile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-emoji-smile-face {
  position: relative;
  flex: none;
  width: 1.7em;
  height: 1.7em;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, currentColor 75%, transparent);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.chk-emoji-smile-eye {
  position: absolute;
  top: 30%;
  left: 27%;
  width: 0.19em;
  height: 0.24em;
  border-radius: 50%;
  background: currentColor;
}
.chk-emoji-smile-eye + .chk-emoji-smile-eye {
  left: auto;
  right: 27%;
}
.chk-emoji-smile-mouth {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 0.66em;
  height: 0.12em;
  margin-left: -0.33em;
  border-radius: 0.06em;
  background: currentColor;
  transition: height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.35s ease, top 0.35s ease;
}
.chk-emoji-smile-text {
  transition: color 0.25s ease;
}
.chk-emoji-smile:hover .chk-emoji-smile-face {
  border-color: var(--c);
}
.chk-emoji-smile input:checked + .chk-emoji-smile-face {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
  animation: chk-emoji-smile-wiggle 0.6s ease-out;
}
.chk-emoji-smile input:checked + .chk-emoji-smile-face .chk-emoji-smile-eye {
  animation: chk-emoji-smile-blink 0.35s ease-in-out 0.25s;
}
.chk-emoji-smile input:checked + .chk-emoji-smile-face .chk-emoji-smile-mouth {
  top: 52%;
  height: 0.34em;
  border-radius: 0.05em 0.05em 0.33em 0.33em;
}
.chk-emoji-smile input:checked ~ .chk-emoji-smile-text {
  color: var(--c);
}
.chk-emoji-smile input:focus-visible + .chk-emoji-smile-face {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-emoji-smile-wiggle {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-14deg) scale(1.12); }
  60% { transform: rotate(9deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes chk-emoji-smile-blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.15); }
}

.chk-eye-show-password {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-eye-show-password input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-eye-show-password-icon {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
  border-radius: 0.3em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.25s ease;
}
.chk-eye-show-password-lid {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: scaleY(-1);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1.3);
}
.chk-eye-show-password-pupil {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.2s ease-in;
}
.chk-eye-show-password-lashes {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: transform 0.25s ease 0.1s, opacity 0.2s ease 0.1s;
}
.chk-eye-show-password-text {
  transition: color 0.25s ease;
}
.chk-eye-show-password input:checked ~ .chk-eye-show-password-text {
  color: var(--c);
}
.chk-eye-show-password:hover .chk-eye-show-password-icon {
  color: var(--c);
}
.chk-eye-show-password input:checked + .chk-eye-show-password-icon {
  color: var(--c);
}
.chk-eye-show-password input:checked + .chk-eye-show-password-icon .chk-eye-show-password-lid {
  transform: scaleY(1);
}
.chk-eye-show-password input:checked + .chk-eye-show-password-icon .chk-eye-show-password-pupil {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.chk-eye-show-password input:checked + .chk-eye-show-password-icon .chk-eye-show-password-lashes {
  opacity: 0;
  transform: scaleY(0);
  transition-delay: 0s;
}
.chk-eye-show-password input:focus-visible + .chk-eye-show-password-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-bell-notify {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.75em;}
.chk-bell-notify input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-bell-notify-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.35em;
}
.chk-bell-notify-bell {
  width: 1.4em;
  height: 1.4em;
  fill: transparent;
  stroke: color-mix(in srgb, currentColor 70%, transparent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 12%;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.chk-bell-notify-clapper {
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.chk-bell-notify-wave {
  --dir: -1;
  position: absolute;
  top: 18%;
  left: -0.3em;
  width: 0.45em;
  height: 0.9em;
  border: 0.11em solid transparent;
  border-left-color: var(--c);
  border-radius: 50%;
  opacity: 0;
}
.chk-bell-notify-bell + .chk-bell-notify-wave {
  --dir: 1;
  left: auto;
  right: -0.3em;
  border-left-color: transparent;
  border-right-color: var(--c);
}
.chk-bell-notify-text {
  transition: color 0.25s ease;
}
.chk-bell-notify:hover .chk-bell-notify-bell {
  stroke: var(--c);
}
.chk-bell-notify input:checked + .chk-bell-notify-icon .chk-bell-notify-bell {
  fill: var(--c);
  stroke: var(--c);
  animation: chk-bell-notify-ring 0.9s ease-in-out;
}
.chk-bell-notify input:checked + .chk-bell-notify-icon .chk-bell-notify-clapper {
  animation: chk-bell-notify-clap 0.9s ease-in-out 0.06s;
}
.chk-bell-notify input:checked + .chk-bell-notify-icon .chk-bell-notify-wave {
  animation: chk-bell-notify-wave 0.8s ease-out 0.1s;
}
.chk-bell-notify input:checked ~ .chk-bell-notify-text {
  color: var(--c);
}
.chk-bell-notify input:focus-visible + .chk-bell-notify-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-bell-notify-ring {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(22deg); }
  28% { transform: rotate(-18deg); }
  44% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  76% { transform: rotate(4deg); }
}
@keyframes chk-bell-notify-clap {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-35%); }
  40% { transform: translateX(30%); }
  60% { transform: translateX(-18%); }
  80% { transform: translateX(8%); }
}
@keyframes chk-bell-notify-wave {
  0% { opacity: 0; transform: translateX(0) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--dir) * 0.3em)) scale(1.1); }
}

.chk-pin-to-top {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-pin-to-top input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-pin-to-top-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.35em;
}
.chk-pin-to-top-pin {
  position: relative;
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: color-mix(in srgb, currentColor 70%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 88%;
  transform: rotate(40deg) translateY(0) scaleY(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), stroke 0.25s ease;
}
.chk-pin-to-top-head {
  fill: transparent;
  transition: fill 0.25s ease;
}
.chk-pin-to-top-shadow {
  position: absolute;
  left: 50%;
  bottom: 0.02em;
  width: 0.5em;
  height: 0.14em;
  margin-left: -0.25em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 25%, transparent);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.chk-pin-to-top-text {
  transition: color 0.25s ease;
}
.chk-pin-to-top:hover .chk-pin-to-top-pin {
  stroke: var(--c);
}
.chk-pin-to-top input:checked + .chk-pin-to-top-icon .chk-pin-to-top-pin {
  stroke: var(--c);
  transform: rotate(0deg) translateY(0) scaleY(1);
  animation: chk-pin-to-top-press 0.55s ease-out;
}
.chk-pin-to-top input:checked + .chk-pin-to-top-icon .chk-pin-to-top-head {
  fill: var(--c);
}
.chk-pin-to-top input:checked + .chk-pin-to-top-icon .chk-pin-to-top-shadow {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.chk-pin-to-top input:checked ~ .chk-pin-to-top-text {
  color: var(--c);
}
.chk-pin-to-top input:focus-visible + .chk-pin-to-top-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-pin-to-top-press {
  0% { transform: rotate(40deg) translateY(0) scaleY(1); }
  40% { transform: rotate(-6deg) translateY(-0.28em) scaleY(1); }
  65% { transform: rotate(0deg) translateY(0.05em) scaleY(0.9); }
  100% { transform: rotate(0deg) translateY(0) scaleY(1); }
}

.chk-light-bulb {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-light-bulb input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-light-bulb-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.35em;
}
.chk-light-bulb-glow {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 2.4em;
  height: 2.4em;
  margin: -1.2em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 35%, transparent), transparent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chk-light-bulb-rays i {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 0.1em;
  height: 0.26em;
  margin: -0.13em -0.05em;
  border-radius: 1em;
  background: var(--c);
  transform: rotate(var(--a)) translateY(-0.95em) scaleY(0);
  transition: transform 0.15s ease-in;
}
.chk-light-bulb-bulb {
  position: relative;
  width: 1.8em;
  height: 1.8em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.25s ease;
}
.chk-light-bulb-glass {
  fill: var(--c);
  fill-opacity: 0;
  transition: fill-opacity 0.25s ease;
}
.chk-light-bulb-filament {
  transition: stroke 0.25s ease;
}
.chk-light-bulb-text {
  transition: color 0.25s ease;
}
.chk-light-bulb:hover .chk-light-bulb-bulb {
  color: var(--c);
}
.chk-light-bulb input:checked + .chk-light-bulb-icon .chk-light-bulb-bulb {
  color: var(--c);
}
.chk-light-bulb input:checked + .chk-light-bulb-icon .chk-light-bulb-glass {
  fill-opacity: 1;
  animation: chk-light-bulb-flicker 0.6s linear;
}
.chk-light-bulb input:checked + .chk-light-bulb-icon .chk-light-bulb-filament {
  stroke: #fff;
}
.chk-light-bulb input:checked + .chk-light-bulb-icon .chk-light-bulb-glow {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease 0.35s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.chk-light-bulb input:checked + .chk-light-bulb-icon .chk-light-bulb-rays i {
  transform: rotate(var(--a)) translateY(-0.95em) scaleY(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.4s + var(--d) * 0.06s);
}
.chk-light-bulb input:checked ~ .chk-light-bulb-text {
  color: var(--c);
}
.chk-light-bulb input:focus-visible + .chk-light-bulb-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-light-bulb-flicker {
  0% { fill-opacity: 0.15; }
  15% { fill-opacity: 1; }
  25% { fill-opacity: 0.3; }
  40% { fill-opacity: 1; }
  50% { fill-opacity: 0.6; }
  60%, 100% { fill-opacity: 1; }
}

.chk-padlock-lock {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.65em;}
.chk-padlock-lock input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-padlock-lock-icon {
  position: relative;
  flex: none;
  width: 1.3em;
  height: 1.7em;
  border-radius: 0.25em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  transition: color 0.25s ease;
}
.chk-padlock-lock-shackle {
  position: absolute;
  left: 0.22em;
  top: 0.1em;
  width: 0.86em;
  height: 0.66em;
  border: 0.14em solid currentColor;
  border-bottom: 0;
  border-radius: 0.43em 0.43em 0 0;
  transform-origin: 0.07em 100%;
  transform: rotate(-28deg) translateY(0);
  transition: transform 0.3s ease;
}
.chk-padlock-lock-body {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 0.96em;
  border: 0.14em solid currentColor;
  border-radius: 0.25em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.chk-padlock-lock-hole {
  width: 0.15em;
  height: 0.3em;
  border-radius: 0.1em;
  background: currentColor;
  transition: background-color 0.25s ease;
}
.chk-padlock-lock-text {
  transition: color 0.25s ease;
}
.chk-padlock-lock:hover .chk-padlock-lock-icon {
  color: var(--c);
}
.chk-padlock-lock input:checked + .chk-padlock-lock-icon {
  color: var(--c);
}
.chk-padlock-lock input:checked + .chk-padlock-lock-icon .chk-padlock-lock-shackle {
  transform: rotate(0deg) translateY(0);
  animation: chk-padlock-lock-snap 0.5s ease-out;
}
.chk-padlock-lock input:checked + .chk-padlock-lock-icon .chk-padlock-lock-body {
  background: var(--c);
  animation: chk-padlock-lock-clunk 0.4s ease-out 0.25s;
}
.chk-padlock-lock input:checked + .chk-padlock-lock-icon .chk-padlock-lock-hole {
  background: #fff;
}
.chk-padlock-lock input:checked ~ .chk-padlock-lock-text {
  color: var(--c);
}
.chk-padlock-lock input:focus-visible + .chk-padlock-lock-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-padlock-lock-snap {
  0% { transform: rotate(-28deg) translateY(0); }
  45% { transform: rotate(0deg) translateY(-0.14em); }
  70% { transform: rotate(0deg) translateY(0.04em); }
  100% { transform: rotate(0deg) translateY(0); }
}
@keyframes chk-padlock-lock-clunk {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-7deg); }
  65% { transform: rotate(4deg); }
}

.chk-sun-moon-dark-mode {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chk-sun-moon-dark-mode input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-sun-moon-dark-mode-icon {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
}
.chk-sun-moon-dark-mode-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.55em var(--c);
  transform: rotate(0deg) scale(0.64);
  transition: box-shadow 0.4s cubic-bezier(0.5, 0, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-sun-moon-dark-mode-rays i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.12em;
  height: 0.26em;
  margin: -0.13em -0.06em;
  border-radius: 1em;
  background: var(--c);
  transform: rotate(calc(var(--i) * 45deg)) translateY(-0.7em) scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.15s + var(--i) * 0.02s), opacity 0.2s ease 0.15s;
}
.chk-sun-moon-dark-mode-star {
  position: absolute;
  top: 0.1em;
  right: 0.05em;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.chk-sun-moon-dark-mode-star + .chk-sun-moon-dark-mode-star {
  top: 0.62em;
  right: -0.14em;
  width: 0.14em;
  height: 0.14em;
}
.chk-sun-moon-dark-mode-text {
  transition: color 0.25s ease;
}
.chk-sun-moon-dark-mode input:checked + .chk-sun-moon-dark-mode-icon .chk-sun-moon-dark-mode-core {
  box-shadow: inset 0.38em -0.3em 0 0 var(--c);
  transform: rotate(-20deg) scale(1);
}
.chk-sun-moon-dark-mode input:checked + .chk-sun-moon-dark-mode-icon .chk-sun-moon-dark-mode-rays i {
  opacity: 0;
  transform: rotate(calc(var(--i) * 45deg + 90deg)) translateY(-0.3em) scale(0);
  transition: transform 0.3s ease-in, opacity 0.2s ease 0.1s;
}
.chk-sun-moon-dark-mode input:checked + .chk-sun-moon-dark-mode-icon .chk-sun-moon-dark-mode-star {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}
.chk-sun-moon-dark-mode input:checked + .chk-sun-moon-dark-mode-icon .chk-sun-moon-dark-mode-star + .chk-sun-moon-dark-mode-star {
  transition-delay: 0.45s;
}
.chk-sun-moon-dark-mode input:checked ~ .chk-sun-moon-dark-mode-text {
  color: var(--c);
}
.chk-sun-moon-dark-mode input:focus-visible + .chk-sun-moon-dark-mode-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-mark-as-read-envelope {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-mark-as-read-envelope input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-mark-as-read-envelope-env {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.25em;
  margin-top: 0.45em;
  border-radius: 0.18em;
  perspective: 5em;
}
.chk-mark-as-read-envelope-back,
.chk-mark-as-read-envelope-front {
  position: absolute;
  inset: 0;
  border-radius: 0.18em;
  transition: background-color 0.3s ease;
}
.chk-mark-as-read-envelope-back {
  background: color-mix(in srgb, currentColor 50%, #6b7280);
}
.chk-mark-as-read-envelope-front {
  z-index: 3;
  background: color-mix(in srgb, currentColor 30%, #9ca3af);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.chk-mark-as-read-envelope-paper {
  position: absolute;
  z-index: 2;
  left: 0.22em;
  right: 0.22em;
  top: 0.12em;
  height: 1em;
  border-radius: 0.08em;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 0) 0.18em 0.2em / 0.8em 0.08em no-repeat,
    linear-gradient(color-mix(in srgb, var(--c) 30%, transparent) 0 0) 0.18em 0.38em / 0.95em 0.08em no-repeat,
    #fff;
  transform: translateY(0);
  transition: transform 0.25s ease-in;
}
.chk-mark-as-read-envelope-flap {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  border-radius: 0.18em 0.18em 0 0;
  background: color-mix(in srgb, currentColor 18%, #d1d5db);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transform: rotateX(0deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1) 0.2s, z-index 0s linear 0.3s, background-color 0.3s ease;
}
.chk-mark-as-read-envelope-dot {
  position: absolute;
  z-index: 5;
  top: -0.2em;
  right: -0.2em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.chk-mark-as-read-envelope-text {
  transition: opacity 0.3s ease;
}
.chk-mark-as-read-envelope input:checked ~ .chk-mark-as-read-envelope-text {
  opacity: 0.6;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-back {
  background: color-mix(in srgb, var(--c) 60%, #000);
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-front {
  background: var(--c);
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-flap {
  z-index: 1;
  background: color-mix(in srgb, var(--c) 70%, #fff);
  transform: rotateX(180deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1), z-index 0s linear 0.18s, background-color 0.3s ease;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-paper {
  transform: translateY(-0.5em);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-dot {
  transform: scale(0);
  transition: transform 0.2s ease-in;
}
.chk-mark-as-read-envelope input:focus-visible + .chk-mark-as-read-envelope-env {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

.chk-weekday-picker {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  display: grid;
  justify-items: center;
  gap: 0.5em;}
.chk-weekday-picker-label {
  font-size: 0.75em;
  font-weight: 600;
  opacity: 0.65;
}
.chk-weekday-picker-days {
  display: flex;
  gap: 0.3em;
  isolation: isolate;
}
.chk-weekday-picker-day {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.chk-weekday-picker-day input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-weekday-picker-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, transparent);
  transition: background-color 0.25s ease;
}
.chk-weekday-picker-bg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 50%;
  width: calc(100% + 0.3em);
  background: var(--c);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.chk-weekday-picker-letter {
  position: relative;
  font-size: 0.8em;
  font-weight: 600;
  transition: color 0.2s ease;
}
.chk-weekday-picker-day:hover .chk-weekday-picker-bg {
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.chk-weekday-picker-day input:checked + .chk-weekday-picker-bg {
  background: var(--c);
  animation: chk-weekday-picker-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chk-weekday-picker-day input:checked ~ .chk-weekday-picker-letter {
  color: #fff;
}
.chk-weekday-picker-day:has(input:checked) + .chk-weekday-picker-day input:checked + .chk-weekday-picker-bg::before {
  transform: scaleX(1);
  transition-delay: 0.1s;
}
.chk-weekday-picker-day input:focus-visible + .chk-weekday-picker-bg {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-weekday-picker-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

.chk-speaker-mute {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.5em;}
.chk-speaker-mute input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-speaker-mute-icon {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
  border-radius: 0.3em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.25s ease;
}
.chk-speaker-mute-cone {
  fill: transparent;
  transform-box: fill-box;
  transform-origin: 100% 50%;
  transition: fill 0.25s ease;
}
.chk-speaker-mute-wave {
  transform-box: view-box;
  transform-origin: 48% 50%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.25s ease 0.15s;
}
.chk-speaker-mute-wave + .chk-speaker-mute-wave {
  transition-delay: 0.25s;
}
.chk-speaker-mute-x {
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-speaker-mute-text {
  transition: color 0.25s ease;
}
.chk-speaker-mute:hover .chk-speaker-mute-icon {
  color: var(--c);
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon {
  color: var(--c);
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon .chk-speaker-mute-cone {
  fill: var(--c);
  animation: chk-speaker-mute-thump 0.4s ease-out 0.2s;
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon .chk-speaker-mute-wave {
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.25s ease-in 0.08s, opacity 0.2s ease 0.1s;
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon .chk-speaker-mute-wave + .chk-speaker-mute-wave {
  transition-delay: 0s;
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon .chk-speaker-mute-x {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s ease-out 0.3s;
}
.chk-speaker-mute input:checked + .chk-speaker-mute-icon .chk-speaker-mute-x + .chk-speaker-mute-x {
  transition-delay: 0.45s;
}
.chk-speaker-mute input:checked ~ .chk-speaker-mute-text {
  color: var(--c);
}
.chk-speaker-mute input:focus-visible + .chk-speaker-mute-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-speaker-mute-thump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.85); }
}

.chk-rocket-launch {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.55em;}
.chk-rocket-launch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-rocket-launch-pad {
  position: relative;
  flex: none;
  width: 1.9em;
  height: 2.4em;
  border-radius: 0.3em;
}
.chk-rocket-launch-pad::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0.1em;
  height: 0.08em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 25%, transparent);
}
.chk-rocket-launch-craft {
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  width: 1.65em;
  height: 1.65em;
  margin-left: -0.825em;
  transform: translate(0, 0);
  transition: transform 0.4s ease-in;
}
.chk-rocket-launch-craft svg {
  position: relative;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, currentColor 70%, transparent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.25s ease;
}
.chk-rocket-launch-body {
  fill: transparent;
  transition: fill 0.25s ease;
}
.chk-rocket-launch-window {
  fill: transparent;
  transition: fill 0.25s ease;
}
.chk-rocket-launch-flame {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 0.4em;
  height: 0.6em;
  margin-left: -0.2em;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(#fde68a, #f97316);
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 0.15s ease-in;
}
.chk-rocket-launch-smoke {
  position: absolute;
  bottom: 0.05em;
  left: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-left: -0.2em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transform: translateX(0) scale(0);
}
.chk-rocket-launch-text {
  transition: color 0.25s ease;
}
.chk-rocket-launch:hover .chk-rocket-launch-craft svg {
  color: var(--c);
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-craft {
  transform: translate(0, -0.45em);
  animation: chk-rocket-launch-lift 0.7s ease-in, chk-rocket-launch-hover 1.6s ease-in-out 0.7s infinite alternate;
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-craft svg {
  color: var(--c);
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-body {
  fill: var(--c);
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-window {
  fill: #fff;
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-flame {
  transform: scaleY(1);
  transition: transform 0.2s ease-out 0.25s;
  animation: chk-rocket-launch-flicker 0.14s ease-in-out 0.45s infinite alternate;
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-smoke {
  --x: -0.45em;
  animation: chk-rocket-launch-puff 0.8s ease-out 0.3s both;
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-smoke + .chk-rocket-launch-smoke {
  --x: 0em;
  animation-delay: 0.35s;
}
.chk-rocket-launch input:checked + .chk-rocket-launch-pad .chk-rocket-launch-smoke + .chk-rocket-launch-smoke + .chk-rocket-launch-smoke {
  --x: 0.45em;
  animation-delay: 0.4s;
}
.chk-rocket-launch input:checked ~ .chk-rocket-launch-text {
  color: var(--c);
}
.chk-rocket-launch input:focus-visible + .chk-rocket-launch-pad {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-rocket-launch-lift {
  0% { transform: translate(0, 0); }
  8% { transform: translate(-0.03em, 0); }
  16% { transform: translate(0.03em, 0); }
  24% { transform: translate(-0.03em, 0); }
  32% { transform: translate(0.03em, 0); }
  40% { transform: translate(0, 0); }
  100% { transform: translate(0, -0.45em); }
}
@keyframes chk-rocket-launch-hover {
  from { transform: translate(0, -0.45em); }
  to { transform: translate(0, -0.33em); }
}
@keyframes chk-rocket-launch-flicker {
  from { transform: scaleY(1) scaleX(1); }
  to { transform: scaleY(0.72) scaleX(0.85); }
}
@keyframes chk-rocket-launch-puff {
  0% { opacity: 1; transform: translateX(0) scale(0); }
  50% { opacity: 1; transform: translateX(calc(var(--x) * 0.7)) scale(1); }
  100% { opacity: 0; transform: translateX(var(--x)) scale(1.3); }
}

.chk-cat-paw {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-cat-paw input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-cat-paw-slot {
  position: relative;
  flex: none;
  width: 1.35em;
  height: 1.35em;
}
.chk-cat-paw-box {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0.12em solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 0.35em;
  transform-origin: 50% 100%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chk-cat-paw-print {
  width: 0.95em;
  height: 0.95em;
  fill: #fff;
  transform: scale(0);
  transition: transform 0.15s ease-in;
}
.chk-cat-paw-reach {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 1.3em;
  height: 2.6em;
  margin-left: -0.65em;
  overflow: hidden;
  pointer-events: none;
}
.chk-cat-paw-arm {
  position: absolute;
  left: 0.15em;
  right: 0.15em;
  bottom: 0;
  height: 2.4em;
  border-radius: 0.5em;
  background:
    repeating-linear-gradient(180deg, transparent 0 0.32em, rgb(146 64 14 / 0.25) 0.32em 0.44em) 0 0 / 100% 55% no-repeat,
    #f4a259;
  transform: translateY(-110%);
}
.chk-cat-paw-arm i,
.chk-cat-paw-arm b {
  position: absolute;
  border-radius: 50%;
  background: #f9a8d4;
}
.chk-cat-paw-arm i {
  bottom: 0.5em;
  width: 0.2em;
  height: 0.24em;
}
.chk-cat-paw-arm i:nth-child(1) {
  left: 0.12em;
}
.chk-cat-paw-arm i:nth-child(2) {
  left: 0.4em;
  bottom: 0.6em;
}
.chk-cat-paw-arm i:nth-child(3) {
  left: 0.68em;
}
.chk-cat-paw-arm b {
  left: 50%;
  bottom: 0.12em;
  width: 0.5em;
  height: 0.36em;
  margin-left: -0.25em;
}
.chk-cat-paw-text {
  transition: color 0.25s ease 0.4s;
}
.chk-cat-paw input:checked ~ .chk-cat-paw-text {
  color: var(--c);
}
.chk-cat-paw:hover .chk-cat-paw-box {
  border-color: var(--c);
}
.chk-cat-paw input:checked + .chk-cat-paw-slot .chk-cat-paw-box {
  background: var(--c);
  border-color: var(--c);
  transition-delay: 0.36s;
  animation: chk-cat-paw-squash 1s ease-out;
}
.chk-cat-paw input:checked + .chk-cat-paw-slot .chk-cat-paw-print {
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
}
.chk-cat-paw input:checked + .chk-cat-paw-slot .chk-cat-paw-arm {
  animation: chk-cat-paw-press 1s cubic-bezier(0.45, 0, 0.3, 1);
}
.chk-cat-paw input:focus-visible + .chk-cat-paw-slot .chk-cat-paw-box {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-cat-paw-press {
  0% { transform: translateY(-110%) scaleY(1); }
  32% { transform: translateY(0) scaleY(1); }
  42% { transform: translateY(0.08em) scaleY(0.94); }
  62% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(-110%) scaleY(1); }
}
@keyframes chk-cat-paw-squash {
  0%, 32% { transform: scale(1); }
  42% { transform: scale(1.08, 0.8); }
  58% { transform: scale(0.97, 1.04); }
  72%, 100% { transform: scale(1); }
}

.chk-not-a-robot {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;
  width: 13.5em;
  padding: 0.8em 0.9em;
  border: 0.08em solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.55em;
  background: color-mix(in srgb, currentColor 4%, transparent);}
.chk-not-a-robot input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-not-a-robot-slot {
  position: relative;
  flex: none;
  width: 1.45em;
  height: 1.45em;
}
.chk-not-a-robot-box {
  position: absolute;
  inset: 0;
  border: 0.14em solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 0.25em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.chk-not-a-robot-check {
  position: absolute;
  inset: -0.1em;
  width: calc(100% + 0.2em);
  height: calc(100% + 0.2em);
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.15s ease-in;
}
.chk-not-a-robot-text {
  flex: 1;
  font-weight: 500;
}
.chk-not-a-robot-shield {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: transparent;
  stroke: color-mix(in srgb, currentColor 45%, transparent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.chk-not-a-robot:hover .chk-not-a-robot-box {
  border-color: var(--c);
}
.chk-not-a-robot input:checked + .chk-not-a-robot-slot .chk-not-a-robot-box {
  opacity: 0;
  transform: rotate(0deg) scale(0.3);
  animation: chk-not-a-robot-spin 1s linear;
}
.chk-not-a-robot input:checked + .chk-not-a-robot-slot .chk-not-a-robot-check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.95s;
}
.chk-not-a-robot input:checked ~ .chk-not-a-robot-shield {
  fill: color-mix(in srgb, var(--c) 25%, transparent);
  stroke: var(--c);
  transition-delay: 1.1s;
}
.chk-not-a-robot input:focus-visible + .chk-not-a-robot-slot {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-not-a-robot-spin {
  0% { opacity: 1; transform: rotate(0deg) scale(1); border-radius: 0.25em; }
  18% { opacity: 1; transform: rotate(60deg) scale(0.8); border-radius: 50%; border-color: color-mix(in srgb, var(--c) 22%, transparent); border-top-color: var(--c); background: transparent; }
  82% { opacity: 1; transform: rotate(700deg) scale(0.8); border-radius: 50%; border-color: color-mix(in srgb, var(--c) 22%, transparent); border-top-color: var(--c); background: transparent; }
  100% { opacity: 0; transform: rotate(760deg) scale(0.3); border-radius: 50%; border-color: color-mix(in srgb, var(--c) 22%, transparent); border-top-color: var(--c); background: transparent; }
}

.chk-gift-box {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-gift-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-gift-box-icon {
  position: relative;
  flex: none;
  width: 1.6em;
  height: 1.7em;
  border-radius: 0.3em;
}
.chk-gift-box-prize {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 1em;
  height: 1em;
  margin: -0.5em;
  fill: #fbbf24;
  stroke: #d97706;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform: translate(0, 0.3em) scale(0.2) rotate(0deg);
  transition: transform 0.25s ease-in;
}
.chk-gift-box-base,
.chk-gift-box-lid {
  position: absolute;
  background: linear-gradient(90deg, transparent 42%, rgb(255 255 255 / 0.8) 42% 58%, transparent 58%), var(--c);
}
.chk-gift-box-base {
  left: 0.12em;
  right: 0.12em;
  bottom: 0;
  height: 0.95em;
  border-radius: 0.1em 0.1em 0.15em 0.15em;
  transform-origin: 50% 100%;
}
.chk-gift-box-lid {
  left: 0;
  right: 0;
  top: 0.42em;
  height: 0.36em;
  border-radius: 0.1em;
  background-color: color-mix(in srgb, var(--c) 80%, #000);
  transform-origin: 0 100%;
  transform: translate(0, 0) rotate(0deg);
  transition: transform 0.3s ease-in 0.1s;
}
.chk-gift-box-lid b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.34em;
  height: 0.26em;
  margin-left: -0.33em;
  border: 0.09em solid color-mix(in srgb, var(--c) 80%, #000);
  border-radius: 50%;
  transform: rotate(-25deg);
  transform-origin: 100% 100%;
}
.chk-gift-box-lid b + b {
  margin-left: -0.01em;
  transform: rotate(25deg);
  transform-origin: 0 100%;
}
.chk-gift-box-text {
  transition: color 0.25s ease;
}
.chk-gift-box input:checked + .chk-gift-box-icon .chk-gift-box-base {
  animation: chk-gift-box-squash 0.5s ease-out;
}
.chk-gift-box input:checked + .chk-gift-box-icon .chk-gift-box-lid {
  transform: translate(-0.04em, -0.08em) rotate(-38deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.chk-gift-box input:checked + .chk-gift-box-icon .chk-gift-box-prize {
  transform: translate(0.22em, -0.82em) scale(1) rotate(360deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.25s;
}
.chk-gift-box input:checked ~ .chk-gift-box-text {
  color: var(--c);
}
.chk-gift-box input:focus-visible + .chk-gift-box-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}
@keyframes chk-gift-box-squash {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.08, 0.82); }
  55% { transform: scale(0.97, 1.06); }
  100% { transform: scale(1, 1); }
}

.chk-growing-plant {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.6em;}
.chk-growing-plant input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-growing-plant-icon {
  position: relative;
  flex: none;
  width: 1.6em;
  height: 2.15em;
  border-radius: 0.3em;
}
.chk-growing-plant-icon i {
  position: absolute;
  left: 50%;
}
.chk-growing-plant-pot {
  bottom: 0;
  width: 1.2em;
  height: 0.75em;
  margin-left: -0.6em;
  background: linear-gradient(#c2410c 0 0.2em, #ea7a45 0.2em);
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.chk-growing-plant-stem {
  bottom: 0.65em;
  width: 0.12em;
  height: 1.1em;
  margin-left: -0.06em;
  border-radius: 0.1em;
  background: #2f9e5b;
  transform-origin: 50% 100%;
  transform: scaleY(0.42);
  transition: transform 0.3s ease-in 0.1s;
}
.chk-growing-plant-leaf-l,
.chk-growing-plant-leaf-r {
  bottom: 1.1em;
  width: 0.6em;
  height: 0.32em;
  background: #3fbf73;
  transition: transform 0.25s ease-in;
}
.chk-growing-plant-leaf-r {
  border-radius: 0 100%;
  transform-origin: 0 100%;
  transform: translateY(0.12em) scale(0.5) rotate(-10deg);
}
.chk-growing-plant-leaf-l {
  margin-left: -0.6em;
  border-radius: 100% 0;
  transform-origin: 100% 100%;
  transform: translateY(0.12em) scale(0.5) rotate(10deg);
}
.chk-growing-plant-bud {
  bottom: 1.55em;
  width: 0.5em;
  height: 0.5em;
  margin-left: -0.25em;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0 0.08em, var(--c) 0.09em);
  box-shadow: 0 0 0 0.06em color-mix(in srgb, var(--c) 35%, transparent);
  transform: translateY(0.6em) scale(0);
  transition: transform 0.2s ease-in;
}
.chk-growing-plant-text {
  transition: color 0.25s ease;
}
.chk-growing-plant input:checked + .chk-growing-plant-icon .chk-growing-plant-stem {
  transform: scaleY(1);
  transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.chk-growing-plant input:checked + .chk-growing-plant-icon .chk-growing-plant-leaf-r {
  transform: translateY(0) scale(1) rotate(-25deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.chk-growing-plant input:checked + .chk-growing-plant-icon .chk-growing-plant-leaf-l {
  transform: translateY(0) scale(1) rotate(25deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.chk-growing-plant input:checked + .chk-growing-plant-icon .chk-growing-plant-bud {
  transform: translateY(0) scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
}
.chk-growing-plant input:checked ~ .chk-growing-plant-text {
  color: var(--c);
}
.chk-growing-plant input:focus-visible + .chk-growing-plant-icon {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}