.mdr-dakkapel {
  --mdr-ink: #203a45;
  --mdr-accent: #22616e;
  --mdr-line: #cedce0;
  --mdr-paper: #f5f9fa;
  width: 100%;
  color: var(--mdr-ink);
  font-family: inherit;
}
.mdr-dakkapel *, .mdr-dakkapel *::before, .mdr-dakkapel *::after { box-sizing: border-box; }
.mdr-dakkapel [hidden] { display: none !important; }
.mdr-dakkapel__intro { margin: 0 0 22px; }
.mdr-dakkapel__intro h2 { color: inherit; margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.8rem); }
.mdr-dakkapel__intro p { margin: 0 0 6px; }
.mdr-dakkapel__eyebrow { color: var(--mdr-accent); font-weight: 700; }
.mdr-dakkapel__grid {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.5fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: start;
}
.mdr-dakkapel__panel, .mdr-dakkapel__viewer {
  min-width: 0;
  border: 1px solid var(--mdr-line);
  border-radius: 16px;
  background: var(--mdr-paper);
  padding: clamp(14px, 2vw, 25px);
}
.mdr-dakkapel__viewer { position: sticky; top: 24px; }
.mdr-dakkapel__viewer h3, .mdr-dakkapel [data-receipt] h3 { color: inherit; margin: 0 0 5px; }
.mdr-dakkapel__stage, .mdr-dakkapel__fallback {
  background: #e9f3f5;
  border-radius: 12px;
  overflow: hidden;
}
.mdr-dakkapel__stage { height: clamp(260px, 43vw, 540px); }
.mdr-dakkapel__stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.mdr-dakkapel__stage canvas:active { cursor: grabbing; }
.mdr-dakkapel__fallback svg { display: block; width: 100%; height: auto; }
.mdr-dakkapel__steps {
  margin: 0 0 20px;
  padding: 0 0 8px;
  list-style: none;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--mdr-line);
}
.mdr-dakkapel__steps li { flex: 1 1 0; min-width: 0; font-size: .72rem; line-height: 1.25; }
.mdr-dakkapel__steps li span:first-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid var(--mdr-line);
  background: white;
  font-weight: 700;
}
.mdr-dakkapel__steps [aria-current="step"] span:first-child { color: white; background: var(--mdr-accent); border-color: var(--mdr-accent); }
.mdr-dakkapel__step-label { overflow-wrap: break-word; }
.mdr-dakkapel fieldset { margin: 0; border: 0; padding: 0; min-width: 0; }
.mdr-dakkapel [data-step] > legend { margin-bottom: 13px; font-size: 1.15rem; font-weight: 700; color: inherit; }
.mdr-dakkapel__field { margin-bottom: 15px; }
.mdr-dakkapel__field > label, .mdr-dakkapel__choices > legend {
  display: block;
  margin: 0 0 5px;
  font-weight: 600;
  color: inherit;
}
.mdr-dakkapel__field input:not([type="radio"]), .mdr-dakkapel__field select, .mdr-dakkapel__field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--mdr-line);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--mdr-ink);
  background: white;
  font: inherit;
}
.mdr-dakkapel__option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--mdr-line);
  border-radius: 8px;
  background: white;
  margin: 0 0 5px;
  cursor: pointer;
  color: inherit;
}
.mdr-dakkapel__option:has(input:checked) { border-color: var(--mdr-accent); background: #e7f1f3; }
.mdr-dakkapel__option input { accent-color: var(--mdr-accent); margin: 4px 0 0; flex: 0 0 auto; }
.mdr-dakkapel :is(button, input, select, textarea, canvas):focus-visible { outline: 2px solid var(--mdr-accent); outline-offset: 2px; }
.mdr-dakkapel__buttons { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mdr-dakkapel__buttons button {
  min-height: 44px;
  border-radius: 7px;
  border: 1px solid var(--mdr-accent);
  padding: 7px 13px;
  background: white;
  color: var(--mdr-accent);
  font: inherit;
  cursor: pointer;
}
.mdr-dakkapel__buttons button:is([data-next], [data-send]) { color: white; background: var(--mdr-accent); }
.mdr-dakkapel__buttons button:disabled { opacity: .65; cursor: wait; }
.mdr-dakkapel__viewer-buttons { margin: 10px 0; }
.mdr-dakkapel__hint, .mdr-dakkapel [data-summary] { margin: 6px 0; font-size: .88rem; }
.mdr-dakkapel [data-summary] { overflow-wrap: anywhere; }
.mdr-dakkapel__error { color: #a12424; margin: 4px 0 0; font-size: .86rem; }
.mdr-dakkapel [data-form-status]:empty { display: none; }
.mdr-dakkapel__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .mdr-dakkapel__grid { grid-template-columns: minmax(0, 1fr); }
  .mdr-dakkapel__viewer { grid-row: 1; position: static; }
  .mdr-dakkapel__stage { height: clamp(215px, 62vw, 350px); }
}