.kc-widget, .kc-widget * { box-sizing: border-box; }
.kc-widget {
  --kc-surface: #fffdf7;
  --kc-text: #22251f;
  --kc-muted: #51584b;
  --kc-board: #17251d;
  --kc-dots: #c8f5b3;
  --kc-link: #245535;
  --kc-focus: #2158a8;
  --kc-border: #bcc5b5;
  --kc-space: 1rem;
  --kc-postal-ink: #2e4d68;
  --kc-postal-guide: #b8b4a7;
  --kc-postal-weight: 6;
  color: var(--kc-text);
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: .5rem;
  padding: clamp(1rem, 3vw, 2rem);
  font: inherit;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}
.kc-widget[hidden], .kc-widget [hidden] { display: none !important; }
.kc-widget .kc-title { margin: 0 0 .25rem; font: inherit; font-weight: 700; font-size: 1.3em; }
.kc-widget .kc-date { color: var(--kc-muted); font-size: .9em; margin: 0 0 var(--kc-space); }
.kc-widget .kc-message { margin: 0 0 var(--kc-space); white-space: pre-line; }
.kc-widget .kc-unit-grid { display: flex; flex-wrap: wrap; gap: var(--kc-space); margin-block: var(--kc-space); }
.kc-widget .kc-unit { min-width: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.kc-widget .kc-digits { max-width: 100%; }
.kc-widget .kc-digits--dotmatrix { display: flex; flex-wrap: wrap; gap: .15rem; padding: .65rem; border-radius: .3rem; color: var(--kc-dots); background: var(--kc-board); }
.kc-widget .kc-digits--dotmatrix svg { width: 1.7em; height: 2.38em; fill: currentColor; flex-shrink: 0; }
.kc-widget .kc-digits--plain { font: inherit; font-size: 3em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--kc-text); overflow-wrap: anywhere; }
.kc-widget .kc-unit-grid--postal .kc-unit { flex: 0 1 auto; }
.kc-widget .kc-digits--postal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25em; width: 3em; }
.kc-widget .kc-digits--postal svg { display: block; width: 100%; height: auto; }
.kc-widget .kc-postal-guide { fill: var(--kc-postal-guide); }
.kc-widget .kc-postal-ink { fill: none; stroke: var(--kc-postal-ink); stroke-width: var(--kc-postal-weight); stroke-linecap: round; stroke-linejoin: round; }
.kc-widget .kc-unit-label { align-self: stretch; text-align: center; margin-top: .3rem; color: var(--kc-muted); }
.kc-widget .kc-action { display: inline-block; color: var(--kc-link); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.kc-widget .kc-explanation { color: var(--kc-muted); font-size: .85em; margin: 0 0 var(--kc-space); }
.kc-widget .kc-remainder { font-weight: 600; }
.kc-widget .kc-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: var(--kc-space); font-size: .85em; }
.kc-widget button { font: inherit; padding: .35rem .65rem; border: 1px solid var(--kc-muted); border-radius: .25rem; color: var(--kc-text); background: var(--kc-surface); cursor: pointer; }
.kc-widget :is(a, button):focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 3px; }
.kc-widget .kc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (forced-colors: active) {
  .kc-widget .kc-digits--dotmatrix { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
  .kc-widget .kc-digits--plain { color: CanvasText; }
  .kc-widget .kc-postal-guide { fill: GrayText; }
  .kc-widget .kc-postal-ink { stroke: CanvasText; }
}

.kc-widget.kc-widget--compact {
  border: 0;
  border-radius: 0;
  padding: .65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 1rem;
}
.kc-widget--compact [data-kc-output] { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 1rem; }
.kc-widget--compact .kc-compact-line { margin: 0; font-size: 1em; font-weight: 600; text-align: center; }
.kc-widget--compact :is(.kc-date, .kc-message, .kc-controls) { margin: 0; }