.drawably-host {
  position: relative;
  isolation: isolate;
  font-family: Inter, system-ui, sans-serif;
}

.drawably-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}

.drawably-svg path {
  fill: none;
  stroke: var(--drawably-ink, var(--drawably-stroke, #2724d1));
  stroke-width: var(--drawably-width, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the three frames swap on shared keyframe percentages, so every hide and the
   next show compute to the same instant — the delay-offset version left a
   sub-ms gap where no frame was visible, sampling as a blank-frame flash */
.drawably-boil {
  opacity: 0;
  animation: drawably-boil-0 1200ms step-end infinite;
}

.drawably-boil[data-i="1"] {
  animation-name: drawably-boil-1;
}

.drawably-boil[data-i="2"] {
  animation-name: drawably-boil-2;
}

@keyframes drawably-boil-0 {
  0% { opacity: 1; }
  33.33% { opacity: 0; }
}

@keyframes drawably-boil-1 {
  0% { opacity: 0; }
  33.33% { opacity: 1; }
  66.67% { opacity: 0; }
}

@keyframes drawably-boil-2 {
  0% { opacity: 0; }
  66.67% { opacity: 1; }
  100% { opacity: 0; }
}

.drawably-svg .drawably-blob {
  fill: var(--drawably-ink, var(--drawably-fill, #2724d1));
  stroke: var(--drawably-ink, var(--drawably-fill, #2724d1));
  stroke-width: 4;
}

.drawably-svg .drawably-scribble {
  stroke-width: 1.5;
}

.drawably-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-family: Inter, system-ui, sans-serif;
  color: var(--drawably-ink, var(--drawably-stroke, #2724d1));
  cursor: pointer;
  outline: none;
  transition: transform 120ms ease;
}

.drawably-button:active {
  transform: scale(0.92);
}

.drawably-button--neutral {
  --drawably-stroke: #6e675f;
  --drawably-fill: #6e675f;
}

.drawably-button--danger {
  --drawably-stroke: var(--drawably-error, #d12724);
  --drawably-fill: var(--drawably-error, #d12724);
}

.drawably-button[data-state="error"] {
  --drawably-ink: var(--drawably-error, #d12724);
}

.drawably-button[data-state="success"] {
  --drawably-ink: var(--drawably-success, #188a42);
}

.drawably-button[data-state="loading"] {
  cursor: progress;
  opacity: 0.6;
}

.drawably-button[data-state="loading"] .drawably-boil {
  animation-duration: 450ms;
}

.drawably-button--solid {
  color: var(--drawably-paper, #fff);
}

.drawably-svg .drawably-focus {
  visibility: hidden;
  stroke-width: 1.5;
}

.drawably-host:is(:focus-visible, :has(:focus-visible)) .drawably-focus {
  visibility: visible;
}

.drawably-checkbox,
.drawably-radio {
  display: inline-block;
  width: 22px;
  height: 22px;
}

.drawably-toggle {
  display: inline-block;
  width: 44px;
  height: 24px;
}

:is(.drawably-checkbox, .drawably-radio, .drawably-toggle) input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.drawably-svg .drawably-dot {
  fill: var(--drawably-ink, var(--drawably-fill, #2724d1));
  stroke: var(--drawably-ink, var(--drawably-fill, #2724d1));
  visibility: hidden;
  transform: scale(0.5);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.drawably-radio[data-checked] .drawably-dot {
  visibility: visible;
  transform: scale(1);
}

.drawably-svg .drawably-knob {
  transition: transform 160ms ease-out;
}

/* travel = toggle width 44px minus height 24px; resizing the toggle in CSS
   means overriding this too */
.drawably-toggle[data-checked] .drawably-knob {
  transform: translateX(20px);
}

.drawably-divider {
  display: block;
  height: 10px;
  border: 0;
}

.drawably-svg .drawably-check {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 240ms ease-out;
}

.drawably-checkbox[data-checked] .drawably-check {
  stroke-dashoffset: 0;
}

.drawably-inputbox {
  display: inline-block;
}

.drawably-inputbox input {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.drawably-card {
  padding: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .drawably-boil {
    animation: none;
  }
  .drawably-boil[data-i="0"] {
    opacity: 1;
  }
  .drawably-svg .drawably-check,
  .drawably-svg .drawably-dot,
  .drawably-svg .drawably-knob {
    transition: none;
  }
}