/* GEBOUWD met gereedschap/donna-bol-bouwen.mjs uit assets/donna-echt/, niet met de hand bewerken. */
.dz {
  --blue:#1466FF;
  --blue-l:#5A8DFF;
  --blue-d:#0A2C75;
  --green:#1FB36B;
  --orange:#F5933A;
  --red:#E5484D;
  --bg0:#0A0C10;
  --bg1:#12151C;
  --bg2:#191D26;
  --tx:#F4F6F8;
  --tx2:rgba(244,246,248,.68);
  --tx3:rgba(244,246,248,.52);
  --ln1:rgba(244,246,248,.08);
  --ln2:rgba(244,246,248,.14);
  --f-head:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --rowh:48px;
  --capq:22px;
  --capa:20px;
}
@media (max-height: 800px) {
  .dz {
    --rowh:44px;
    --capq:20px;
    --capa:18px;
  }
}
.dz,
.dz * {
  box-sizing: border-box;
}
html.dz-html,
html.dz-html body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: #F4F6F8;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dz #veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--e-out);
  background:
    radial-gradient(
      64% 60% at 50% 46%,
      rgba(5, 7, 12, .58) 0%,
      rgba(5, 7, 12, .36) 62%,
      rgba(5, 7, 12, .42) 100%);
}
.dz.dim #veil {
  opacity: 1;
}
@media (prefers-color-scheme: light) {
  .dz #veil {
    background:
      radial-gradient(
        64% 60% at 50% 46%,
        rgba(5, 7, 12, .86) 0%,
        rgba(5, 7, 12, .78) 62%,
        rgba(5, 7, 12, .82) 100%);
  }
}
.dz #aurora {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.dz #stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.dz #orbGlass {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(40, 80, 190, .10) 0%,
      rgba(12, 16, 28, .34) 72%);
}
.dz #orb {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, filter;
}
.dz #pbody {
  position: relative;
}
.dz #brain {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.dz #skin {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, filter;
}
.dz #panel {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(640px, calc(100vw - 64px));
  padding: 20px 24px 24px;
  border-radius: 28px;
  background: rgba(22, 26, 34, .6);
  border: 1px solid rgba(244, 246, 248, .10);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 32px 80px rgba(2, 4, 10, .44),
    0 2px 8px rgba(2, 4, 10, .24),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  transform: translate3d(-50%, 60vh, 0);
}
.dz #panel .glint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  border-radius: 28px 28px 0 0;
  pointer-events: none;
  opacity: .3;
  background:
    radial-gradient(
      46% 100% at 50% 0%,
      rgba(90, 141, 255, .24),
      rgba(90, 141, 255, 0) 100%);
}
.dz #panel .edge {
  position: absolute;
  left: 20%;
  right: 20%;
  top: -1px;
  height: 1px;
  pointer-events: none;
  opacity: .4;
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, 0),
      rgba(190, 212, 255, .95),
      rgba(90, 141, 255, 0));
}
.dz .mono {
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dz .p-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
}
.dz .who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dz .ava {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
}
.dz .ava .im {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(244, 246, 248, .16);
}
.dz .ava img {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -8%;
  object-fit: cover;
  display: block;
}
.dz .ava .ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--blue-l);
  opacity: 0;
}
.dz .name {
  font: 600 15px/1 var(--f-head);
  letter-spacing: -.005em;
  color: var(--tx);
}
.dz .stat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tx2);
}
.dz .sd {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-l);
  box-shadow: 0 0 8px rgba(90, 141, 255, .8);
  flex: none;
}
.dz #panel[data-s=think] .sd {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid rgba(90, 141, 255, .35);
  border-top-color: #AFC8FF;
  animation: dz-spin .6s linear infinite;
}
.dz #panel[data-s=speak] .sd {
  background: #F4F6F8;
  box-shadow: 0 0 10px rgba(170, 198, 255, .9);
}
.dz #panel[data-s=rest] .sd {
  background: rgba(244, 246, 248, .42);
  box-shadow: none;
}
@keyframes dz-spin {
  to {
    transform: rotate(360deg);
  }
}
.dz:not(.rm) #panel[data-s=think] .st {
  background:
    linear-gradient(
      90deg,
      rgba(244, 246, 248, .42) 0%,
      rgba(244, 246, 248, .42) 35%,
      #fff 50%,
      rgba(244, 246, 248, .42) 65%,
      rgba(244, 246, 248, .42) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dz-shim 1.15s linear infinite;
}
@keyframes dz-shim {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}
.dz .meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tx3);
}
.dz #wave {
  width: 88px;
  height: 16px;
  display: block;
}
.dz .grow {
  position: relative;
  height: 0;
  overflow: hidden;
}
.dz .grow.free {
  overflow: visible;
}
.dz .qbox {
  position: relative;
  padding: 16px 4px 4px;
}
.dz .q {
  margin: 0;
  font-size: var(--capq);
  line-height: 1.4;
  color: var(--tx2);
  letter-spacing: -.01em;
  white-space: nowrap;
  transform-origin: 0 0;
  transition: color .6s var(--e-out);
}
.dz .jij {
  position: absolute;
  left: 4px;
  top: 18px;
  color: var(--tx3);
  opacity: 0;
}
.dz .q.dim {
  color: var(--tx3);
}
.dz .ph2 {
  position: absolute;
  left: 4px;
  right: 0;
  top: 16px;
  margin: 0;
  font-size: var(--capq);
  line-height: 1.4;
  color: var(--tx3);
  transition: opacity .4s var(--e-out);
}
.dz .ph2.off {
  opacity: 0;
}
.dz .a {
  margin: 0;
  padding: 8px 4px 6px;
  font-size: var(--capa);
  line-height: 1.5;
  color: var(--tx);
  letter-spacing: -.01em;
}
.dz .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(5px);
  transition:
    opacity .35s var(--e-out),
    transform .5s var(--e-out),
    filter .4s var(--e-out),
    color .8s var(--e-out),
    text-shadow .8s var(--e-out);
}
.dz .w.on {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.dz .q .w.cur {
  color: var(--tx);
}
.dz .a .w:not(.on) {
  position: absolute;
}
.dz .a .w.on {
  color: rgba(244, 246, 248, .88);
}
.dz .a .w.cur {
  color: #fff;
  text-shadow: 0 0 16px rgba(90, 141, 255, .55);
}
.dz #card {
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(244, 246, 248, .07),
      rgba(244, 246, 248, .03));
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .10), inset 0 2px 0 -1px rgba(255, 255, 255, .05);
}
.dz #card .gi {
  position: relative;
  padding: 8px;
}
.dz #card .gi::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  background:
    radial-gradient(
      56% 100% at 50% 0%,
      rgba(90, 141, 255, .14),
      rgba(90, 141, 255, 0) 72%);
}
.dz #card .gi::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, 0),
      rgba(140, 176, 255, .6),
      rgba(90, 141, 255, 0));
}
.dz .c-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
}
.dz .c-head svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.dz .c-title {
  font: 600 17px/24px var(--f-head);
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz .c-meta {
  margin-left: auto;
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
}
.dz .c-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 0;
  padding: 0 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--ln1);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--e-out), transform .7s var(--e-out);
}
.dz .c-row.on {
  height: var(--rowh);
  opacity: 1;
  transform: none;
}
.dz .c-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, 0),
      rgba(90, 141, 255, .16),
      rgba(90, 141, 255, 0));
}
.dz:not(.rm) .c-row.on::after {
  animation: dz-sweep 1.1s var(--e-io) .08s 1 both;
}
@keyframes dz-sweep {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(360%);
    opacity: 0;
  }
}
.dz .chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(244, 246, 248, .34);
}
.dz .c-txt {
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  white-space: nowrap;
}
.dz .c-tag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--ln2);
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx2);
  white-space: nowrap;
}
.dz .c-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.dz .c-foot {
  display: flex;
  align-items: center;
  height: 0;
  padding: 0 8px 0 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--ln1);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--e-out), transform .7s var(--e-out);
}
.dz .c-foot.on {
  height: 64px;
  opacity: 1;
  transform: none;
  overflow: visible;
}
.dz .c-hint {
  font-size: 13px;
  color: var(--tx3);
}
.dz .btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font: 600 14px/1 var(--f-body);
  letter-spacing: -.005em;
  box-shadow: 0 8px 24px rgba(20, 102, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dz .btn kbd {
  font: 500 11px/1 var(--f-mono);
  opacity: .72;
}
.dz.shot *,
.dz.shot *::before,
.dz.shot *::after {
  transition: none !important;
  animation: none !important;
}
.dz.rm .w {
  transform: none;
  filter: none;
}
.dz.rm .c-row,
.dz.rm .c-foot {
  transform: none;
}
.dz.rm #panel[data-s=think] .sd {
  animation: none;
  border-color: #AFC8FF;
}
@media (prefers-reduced-motion: reduce) {
  .dz .w {
    transform: none;
    filter: none;
  }
  .dz .c-row,
  .dz .c-foot {
    transform: none;
  }
}
.dz [hidden] {
  display: none !important;
}
.dz .a.hold .w:not(.on) {
  position: static;
}
.dz.nocard #card {
  display: none;
}
.dz .rv {
  display: none;
}
.dz .rv.on {
  display: block;
  animation: dz-rvin .7s var(--e-out) both;
}
.dz .rv.fx.on {
  display: flex;
}
@keyframes dz-rvin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dz #panel.measure .rv {
  display: block !important;
}
.dz #panel.measure .rv.fx {
  display: flex !important;
}
.dz.rm .rv.on,
.dz.shot .rv.on {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .dz .rv.on {
    animation: none;
  }
}
.dz #gone {
  position: fixed;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(10, 12, 16, .62);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(244, 246, 248, .08);
  font: 500 11px/20px var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx3);
  opacity: 0;
  transition: opacity .8s var(--e-out);
}
.dz #gone.on {
  opacity: 1;
}
.dz #gone kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid rgba(244, 246, 248, .14);
  border-radius: 5px;
  color: var(--tx2);
  font: inherit;
}
.dz #ccap {
  position: fixed;
  right: 200px;
  bottom: 76px;
  width: min(440px, 42vw);
  padding: 14px 20px 16px;
  border-radius: 20px;
  pointer-events: none;
  background: rgba(22, 26, 34, .66);
  border: 1px solid rgba(244, 246, 248, .10);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 24px 64px rgba(2, 4, 10, .44),
    0 2px 8px rgba(2, 4, 10, .24),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity .5s var(--e-out), transform .7s var(--e-out);
  z-index: 5;
}
.dz #ccap.on {
  opacity: 1;
  transform: none;
}
.dz #ccap .cj {
  position: relative;
  margin: 0 0 6px;
  padding-left: 36px;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz #ccap .cj .jij {
  position: absolute;
  left: 0;
  top: 1px;
  opacity: 1;
}
.dz #ccap .cd {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz #ccap .w {
  position: static;
}
.dz #ccap .cd .w.on {
  color: rgba(244, 246, 248, .88);
}
.dz #ccap .cd .w.cur {
  color: #fff;
  text-shadow: 0 0 16px rgba(90, 141, 255, .55);
}
.dz #panel {
  pointer-events: auto;
}
.dz #ccap[data-who=j] #ccd {
  display: none;
}
.dz #ccap[data-who=j] .cj {
  font-size: 17px;
  line-height: 24px;
  color: var(--tx);
  margin: 0;
  padding-left: 40px;
}
.dz #ccap[data-who=j] .cj .jij {
  top: 4px;
}
.dz #ccap[data-who=j] .cj .w.on {
  color: var(--tx);
}
.dz .bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font: 600 14px/1 var(--f-body);
  letter-spacing: -.005em;
  color: var(--tx);
  white-space: nowrap;
  background: none;
  transition:
    background .2s var(--e-out),
    transform .2s var(--e-out),
    box-shadow .2s var(--e-out),
    opacity .2s;
}
.dz .bt:active {
  transform: scale(.97);
}
.dz .bt:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dz .bt svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.dz .bt kbd {
  font: 500 11px/1 var(--f-mono);
  opacity: .72;
}
.dz .bt.p {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px rgba(20, 102, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dz .bt.p:hover {
  background: #2a76ff;
}
.dz .bt.t {
  background: rgba(244, 246, 248, .08);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .06);
}
.dz .bt.t:hover {
  background: rgba(244, 246, 248, .13);
}
.dz .bt.k {
  color: var(--tx2);
}
.dz .bt.k:hover {
  background: rgba(244, 246, 248, .07);
  color: var(--tx);
}
.dz .bt.s {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}
.dz .bt[disabled] {
  opacity: .42;
  pointer-events: none;
}
.dz .grow.free .bt.p {
  box-shadow: 0 8px 24px rgba(20, 102, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.dz .k-foot {
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 12px 0 16px;
  box-shadow: inset 0 1px 0 var(--ln1);
}
.dz .k-foot .sp {
  flex: 1;
}
.dz .k-hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  white-space: nowrap;
}
.dz .sg {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: #0a0c10;
}
.dz .sg svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .sg.ok {
  background: var(--green);
  border-radius: 50%;
}
.dz .sg.jouw {
  background: var(--orange);
  border-radius: 5px;
}
.dz .sg.sleutel {
  background: var(--red);
  border-radius: 3px;
  transform: rotate(45deg);
  width: 13px;
  height: 13px;
  margin: 0 1.5px;
}
.dz .sg.sleutel svg {
  transform: rotate(-45deg);
}
.dz .sg.later {
  background: rgba(244, 246, 248, .12);
  border-radius: 5px;
  color: var(--tx2);
}
.dz .sg.wacht {
  border: 1.5px dashed var(--tx3);
  border-radius: 50%;
  color: var(--tx2);
}
.dz .stw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--tx);
  white-space: nowrap;
}
.dz .lab {
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
}
.dz .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--ln2);
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx2);
  white-space: nowrap;
}
.dz .tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.dz .tag.blue {
  border-color: rgba(20, 102, 255, .4);
  color: #AFC8FF;
  background: rgba(20, 102, 255, .12);
}
.dz .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: rgba(244, 246, 248, .08);
  color: var(--tx);
  font: 500 13px/1 var(--f-body);
  transition: background .2s var(--e-out);
}
.dz .chip:hover {
  background: rgba(244, 246, 248, .13);
}
.dz .chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  color: var(--tx2);
}
.dz .chip small {
  font: 500 11px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--tx3);
}
.dz .chip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dz .av {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
}
.dz .av .f {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 14px/1 var(--f-head);
  letter-spacing: .02em;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(244, 246, 248, .14), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.dz .av .bd {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font: 700 9px/1 var(--f-head);
  color: #fff;
  box-shadow: 0 0 0 2px #1b1f29;
}
.dz .av.sm {
  width: 32px;
  height: 32px;
}
.dz .av.sm .f {
  font-size: 12px;
}
.dz .dph {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex: none;
  box-shadow: 0 0 0 1px rgba(244, 246, 248, .16);
}
.dz .dph img {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -8%;
  object-fit: cover;
  display: block;
}
.dz .tintbox {
  border-radius: 16px;
  background: rgba(20, 102, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(20, 102, 255, .34);
}
.dz .view-in {
  animation: dz-rvin .6s var(--e-out) both;
}
.dz.rm .view-in,
.dz.shot .view-in {
  animation: none;
}
.dz .rij {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  box-shadow: inset 0 1px 0 var(--ln1);
  transition: background .25s var(--e-out);
}
.dz .rij:hover {
  background: rgba(244, 246, 248, .04);
}
.dz .rij:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 12px;
}
.dz .rij.sel {
  background: rgba(20, 102, 255, .16);
}
.dz .rij.first {
  box-shadow: none;
}
.dz .checkc {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(244, 246, 248, .34);
  display: grid;
  place-items: center;
  transition: background .25s var(--e-out), border-color .25s var(--e-out);
}
.dz .checkc svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #0a0c10;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .3s var(--e-out);
}
.dz .checkc.on {
  background: var(--green);
  border-color: var(--green);
}
.dz .checkc.on svg {
  opacity: 1;
  transform: none;
}
.dz .m-prev {
  margin: 0 0 8px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: #1a1e28;
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .07);
}
.dz .m-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dz .m-who {
  min-width: 0;
  flex: 1;
}
.dz .m-name {
  font: 600 15px/20px var(--f-body);
  color: var(--tx);
}
.dz .m-addr {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .m-lab {
  white-space: nowrap;
}
.dz .m-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  min-height: 32px;
}
.dz .m-subj {
  flex: 1;
  min-width: 0;
  font: 600 15px/22px var(--f-body);
  letter-spacing: -.005em;
  color: var(--tx);
}
.dz .m-body {
  position: relative;
  max-height: 50px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--tx2);
  transition: max-height .5s var(--e-out);
}
.dz .m-body p {
  margin: 0;
}
.dz .m-body p + p {
  margin-top: 0;
}
.dz .m-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(26, 30, 40, 0),
      #1a1e28);
  transition: opacity .3s;
}
.dz .m-prev.open .m-body {
  max-height: 160px;
}
.dz .m-prev.open .m-body::after {
  opacity: 0;
}
.dz .m-rest {
  margin-top: 10px !important;
}
.dz .m-att {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.dz .m-att .m-x {
  display: none;
}
.dz .m-prev.open .m-att .m-x {
  display: inline-flex;
}
.dz .m-prev.open .m-att .m-more {
  display: none;
}
.dz .m-prev.open .chip small {
  display: none;
}
.dz .m-toggle {
  height: 28px;
  margin-right: -8px;
  color: var(--tx2);
}
.dz .m-donna {
  margin: 0 0 8px;
  padding: 12px 16px 12px;
}
.dz .md-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dz .md-head .tag {
  margin-left: auto;
}
.dz .md-head .sg {
  width: 20px;
  height: 20px;
}
.dz .md-head .sg svg {
  width: 12px;
  height: 12px;
}
.dz .md-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: var(--tx);
}
.dz .md-row .lab {
  flex: none;
  width: 104px;
}
.dz .md-row b {
  font-weight: 600;
}
.dz .md-concept {
  display: block;
  width: 100%;
  resize: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(10, 12, 16, .38);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .10);
  color: var(--tx);
  font: 14px/20px var(--f-body);
  outline: none;
  height: 124px;
}
.dz .md-concept:focus {
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.dz .md-res {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dz .md-res li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tx);
}
.dz .md-res li .stw {
  margin-left: auto;
  color: var(--tx2);
  font-weight: 400;
}
.dz .k-foot .cnt {
  font: 500 11px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--tx3);
  min-width: 18px;
  text-align: left;
}
.dz .d-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--ln1);
  transition: background .25s var(--e-out);
}
.dz .d-row:hover {
  background: rgba(244, 246, 248, .04);
}
.dz .d-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 12px;
}
.dz .d-row.rv.on {
  display: flex;
}
.dz .d-t {
  flex: none;
  width: 112px;
  font: 500 13px/18px var(--f-mono);
  letter-spacing: .02em;
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
}
.dz .d-late .d-t {
  width: 48px;
  color: var(--tx2);
}
.dz .d-tt {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .d-past .d-tt,
.dz .d-past .d-t,
.dz .d-past .d-st {
  color: var(--tx3);
}
.dz .d-st {
  flex: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
}
.dz .d-dotm {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.dz .d-dotm::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 246, 248, .42);
}
.dz .d-dotm.warn::after {
  border-color: var(--orange);
  background: var(--orange);
}
.dz .d-line {
  display: none;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 16px 0 20px;
}
.dz .d-line.on {
  display: flex;
}
.dz .d-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-l);
  box-shadow: 0 0 10px rgba(90, 141, 255, .9);
  flex: none;
  margin-left: 0;
}
.dz .d-line .lab {
  color: #AFC8FF;
}
.dz .d-hair {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, .6),
      rgba(90, 141, 255, 0));
}
.dz:not(.rm) .d-dot {
  animation: dz-dpulse 2.4s var(--e-io) infinite;
}
@keyframes dz-dpulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(90, 141, 255, .6);
  }
  50% {
    box-shadow: 0 0 14px rgba(90, 141, 255, 1);
  }
}
.dz .d-next {
  margin: 0 4px 6px;
  padding: 14px 16px;
}
.dz .dn-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dz .dn-time {
  flex: none;
  font: 600 28px/32px var(--f-head);
  letter-spacing: -.02em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.dz .dn-main {
  flex: 1;
  min-width: 0;
}
.dz .dn-title {
  font: 600 17px/24px var(--f-head);
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz .dn-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
}
.dz .tag svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .dn-prep {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(20, 102, 255, .28);
}
.dz .dn-prep li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tx);
}
.dz .dn-r {
  margin-left: auto;
  font-size: 13px;
  color: var(--tx3);
}
.dz .d-sum {
  display: none;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  box-shadow: inset 0 1px 0 var(--ln1);
}
.dz .d-sum.on {
  display: block;
}
.dz .d-sum[hidden] {
  display: none !important;
}
.dz .d-pressed {
  box-shadow: 0 8px 24px rgba(31, 179, 107, .3);
}
.dz .k-id {
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.dz .k-id.on {
  display: flex;
}
.dz .k-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background:
    linear-gradient(
      145deg,
      #2cc4b0,
      #0d7f86);
  color: #fff;
  font: 700 15px/1 var(--f-head);
  letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(244, 246, 248, .14), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.dz .k-idm {
  flex: 1;
  min-width: 0;
}
.dz .k-name {
  font: 600 17px/24px var(--f-head);
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz .k-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
}
.dz .k-stats {
  padding: 0 8px 8px;
}
.dz .k-stats.on {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dz .k-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(244, 246, 248, .05);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .07);
}
.dz .k-val {
  font: 600 22px/28px var(--f-head);
  letter-spacing: -.015em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.dz .k-ts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
  white-space: nowrap;
}
.dz .k-ts .tag {
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
}
.dz .k-list .rij {
  height: 40px;
}
.dz .k-ptt {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s var(--e-out);
}
.dz .k-pt.done .k-ptt {
  color: var(--tx3);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 246, 248, .4);
}
.dz .k-pt.done .tag {
  opacity: .5;
}
.dz .k-pt .checkc {
  background: none;
  padding: 0;
  cursor: pointer;
}
.dz .k-pt .checkc.on {
  background: var(--green);
}
.dz .k-pt .checkc:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.dz .k-pt.new {
  animation: dz-rvin .7s var(--e-out) both;
}
.dz .k-in {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(10, 12, 16, .38);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .12);
  color: var(--tx);
  font: 15px var(--f-body);
  outline: none;
}
.dz .k-in:focus {
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.dz .k-in::placeholder {
  color: var(--tx3);
}
.dz .k-ch {
  height: 32px;
}
.dz .b-rows {
  padding: 0;
}
.dz .b-row {
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 16px;
  box-shadow: inset 0 1px 0 var(--ln1);
}
.dz .b-row.on {
  display: flex;
}
.dz .b-ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(244, 246, 248, .07);
  color: var(--tx2);
}
.dz .b-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .b-m {
  flex: 1;
  min-width: 0;
}
.dz .b-t {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .b-s {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .b-s .lab {
  margin-right: 4px;
}
.dz .b-row.undone .b-t {
  color: var(--tx2);
}
.dz .b-bron {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px 8px;
}
.dz .b-bron[hidden] {
  display: none !important;
}
.dz .b-src {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(244, 246, 248, .05);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .07);
}
.dz .b-sh {
  margin: 4px 0 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--tx);
}
.dz .b-sb {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
}
.dz .b-ring {
  width: 20px;
  height: 20px;
  flex: none;
  transform: rotate(-90deg);
}
.dz .b-ring circle {
  fill: none;
  stroke-width: 2;
}
.dz .b-ring .rb {
  stroke: rgba(244, 246, 248, .14);
}
.dz .b-ring .rf {
  stroke: var(--blue-l);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.dz .b-cnt {
  font: 500 11px/16px var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-left: -2px;
}
.dz .b-foot-done .b-ring .rf {
  stroke: var(--green);
}
.dz .q-line {
  padding: 4px 16px 14px;
}
.dz .q-line.on {
  display: block;
}
.dz .q-l {
  font: 500 17px/24px var(--f-body);
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz .q-l b {
  font-weight: 600;
}
.dz .q-opts {
  display: block;
}
.dz .q-opt {
  height: 72px;
  padding: 0 16px;
}
.dz .q-opt.rv {
  display: none;
}
.dz .q-opt.rv.on {
  display: flex;
  animation: dz-rvin .7s var(--e-out) both;
}
.dz .q-opt.hi {
  background: rgba(244, 246, 248, .06);
}
.dz .q-opt.sel.hi {
  background: rgba(20, 102, 255, .2);
}
.dz .q-rd {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(244, 246, 248, .34);
  position: relative;
  transition: border-color .25s var(--e-out), background .25s var(--e-out);
}
.dz .q-rd::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .35s var(--e-out);
}
.dz .q-opt.sel .q-rd {
  border-color: var(--blue-l);
  background: var(--blue);
}
.dz .q-opt.sel .q-rd::after {
  transform: scale(1);
}
.dz .q-m {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz .q-t {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/22px var(--f-body);
  letter-spacing: -.005em;
  color: var(--tx);
}
.dz .q-s {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .q-r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.dz .q-am {
  font: 600 17px/24px var(--f-body);
  letter-spacing: -.01em;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.dz.rm .q-rd::after {
  transition: none;
}
.dz .q-opts.locked .q-opt:not(.sel) {
  opacity: .45;
}
html.dz-los body {
  background:
    radial-gradient(
      90% 80% at 50% 40%,
      rgba(14, 20, 44, .78),
      rgba(5, 7, 12, .86));
}
.dz {
  position: fixed;
  inset: 0;
}
.dz #achter {
  position: fixed;
  inset: 0;
  pointer-events: auto;
}
.dz.dz-hoek #achter {
  pointer-events: none;
}
.dz #stage {
  pointer-events: none;
}
.dz #panel {
  pointer-events: auto;
}
.dz [x-cloak] {
  display: none !important;
}
.dz .dz-a {
  padding: 8px 4px 6px;
}
.dz .dz-a p {
  margin: 0;
}
.dz .dz-a p + p {
  margin-top: .55em;
}
.dz .dz-a ul,
.dz .dz-a ol {
  margin: .4em 0 0;
  padding-left: 1.2em;
}
.dz .dz-a strong {
  font-weight: 600;
}
.dz .dz-a a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 246, 248, .4);
}
.dz .dz-a .crest-donna-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(5px);
  transition:
    opacity .35s var(--e-out),
    transform .5s var(--e-out),
    filter .4s var(--e-out),
    color .8s var(--e-out),
    text-shadow .8s var(--e-out);
}
.dz .dz-a .crest-donna-w.is-gezegd {
  opacity: 1;
  transform: none;
  filter: blur(0);
  color: rgba(244, 246, 248, .88);
}
.dz .dz-a .crest-donna-w.is-nu {
  color: #fff;
  text-shadow: 0 0 16px rgba(90, 141, 255, .55);
}
.dz .dz-a .crest-donna-w:not(.is-gezegd) {
  position: absolute;
}
.dz .dz-a.is-alles .crest-donna-w {
  position: static;
  opacity: 1;
  transform: none;
  filter: none;
}
.dz.rm .dz-a .crest-donna-w {
  transform: none;
  filter: none;
}
.dz .q {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .q.q-een {
  white-space: nowrap;
}
.dz .dz-melding {
  margin: 8px 4px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
}
.dz .dz-melding a {
  color: #AFC8FF;
}
.dz .dz-stemweg {
  margin: 0 4px 8px;
}
.dz .dz-sr {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.dz .dz-sr input {
  width: 1px;
  height: 1px;
}
.dz .dz-rij.on,
.dz .dz-rij.d-next,
.dz .dz-rij.q-opt {
  animation: dz-rvin .7s var(--e-out) both;
  animation-delay: calc(var(--i,0) * 70ms);
}
.dz.rm .dz-rij,
.dz.shot .dz-rij {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .dz .dz-rij {
    animation: none !important;
  }
}
.dz .c-row.dz-rij {
  opacity: 1;
  transform: none;
  transition: background .25s var(--e-out);
}
.dz .c-row.dz-rij.on::after {
  display: none;
}
.dz .c-row .checkc {
  background: none;
  padding: 0;
  cursor: pointer;
}
.dz .c-row .checkc:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.dz .c-row .chk {
  flex: none;
}
.dz .dz-titel {
  flex: 1;
  min-width: 0;
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
}
.dz .dz-titel:hover {
  background: none;
}
.dz .dz-titel:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
.dz .c-row .dz-titel {
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  transition: color .3s var(--e-out);
}
.dz .c-row.is-klaar .dz-titel {
  color: var(--tx3);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 246, 248, .4);
}
.dz .c-row.is-klaar .c-tag {
  opacity: .5;
}
.dz .c-row.is-klaar .checkc {
  background: var(--green);
  border-color: var(--green);
}
.dz .c-row.is-klaar .checkc svg {
  opacity: 1;
  transform: none;
}
.dz .c-row.is-hi,
.dz .rij.hi {
  background: rgba(244, 246, 248, .05);
}
.dz .c-row.dz-leeg .c-txt {
  color: var(--tx2);
}
.dz .k-pt.dz-leeg .k-ptt {
  color: var(--tx2);
}
.dz .k-pt .dz-titel {
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  transition: color .3s var(--e-out);
}
.dz .k-pt.done .dz-titel {
  color: var(--tx3);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 246, 248, .4);
}
.dz .k-pt.done .checkc {
  background: var(--green);
  border-color: var(--green);
}
.dz .k-pt.done .checkc svg {
  opacity: 1;
  transform: none;
}
.dz .c-row.dz-meer .bt {
  margin-left: -8px;
}
.dz .k-list .k-pt .bt.s {
  margin-left: -8px;
}
.dz .k-list.dz-rij.on {
  display: block;
}
.dz [data-flux-button] {
  font: inherit;
}
.dz .btn,
.dz .bt,
.dz .chip,
.dz .rij {
  font-family: inherit;
}
.dz .btn {
  border: 0;
  cursor: pointer;
}
.dz .btn:hover {
  background: #2a76ff;
}
.dz .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.dz .rij {
  border: 0;
  background: none;
  width: 100%;
  height: auto;
}
.dz .q-opt {
  height: 72px;
}
.dz .q-opt:hover {
  background: rgba(244, 246, 248, .05);
}
.dz .q-opt.sel {
  background: rgba(20, 102, 255, .16);
}
.dz .k-foot-in {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dz .dz-donna-foto {
  overflow: hidden;
  background: #161a22;
}
.dz .dz-donna-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.dz .m-donna .md-concept {
  min-height: 112px;
}
.dz .m-donna .view-in,
.dz .view-in {
  animation: dz-rvin .6s var(--e-out) both;
}
.dz .k-foot.rv.fx.on {
  display: flex;
}
.dz .k-foot .bt kbd {
  margin-left: 2px;
}
.dz .m-prev .chip {
  max-width: 100%;
}
.dz .m-att .chip .dz-melding {
  display: none;
}
.dz .b-foot .b-ring .rf {
  transition: stroke-dashoffset .6s var(--e-out);
}
.dz.dz-hoek #ccap {
  pointer-events: auto;
}
.dz #ccap .cd {
  max-height: 7.5em;
  overflow: hidden;
}
.dz .c-foot .dz-gedaan {
  margin-right: auto;
  color: var(--tx2);
}
.dz .c-foot .dz-ongedaan {
  margin-left: auto;
  margin-right: 12px;
}
.dz .k-foot .dz-gedaan {
  color: var(--tx2);
}
.dz .dz-onder {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.dz #pbody {
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dz #pbody::-webkit-scrollbar {
  display: none;
}
.dz.dz-overlay {
  z-index: 80;
  pointer-events: none;
  color: var(--tx);
  color-scheme: dark;
  font: 16px/normal var(--f-body);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dz.dz-overlay.dz-weg {
  visibility: hidden;
}
.dz.dz-overlay #veil {
  background:
    radial-gradient(
      70% 66% at 50% 44%,
      rgba(5, 7, 12, .3) 0%,
      rgba(5, 7, 12, .5) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  transition: opacity .34s var(--e-out);
}
.dz.dz-overlay.dim #veil {
  transition: opacity .7s var(--e-out);
}
:root:not(.dark) .dz.dz-overlay #veil {
  background:
    radial-gradient(
      70% 66% at 50% 44%,
      rgba(5, 7, 12, .5) 0%,
      rgba(5, 7, 12, .7) 100%);
}
@media (prefers-reduced-transparency: reduce) {
  .dz.dz-overlay #veil {
    background: rgba(5, 7, 12, .92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.dz.dz-overlay:not(.dz-open) #achter {
  pointer-events: none;
}
.dz.dz-overlay #ccap:not(.on) {
  pointer-events: none;
}
.dz.dz-overlay .dz-bolknop {
  position: fixed;
  right: 48px;
  bottom: 48px;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}
.dz.dz-overlay .dz-bolknop:hover {
  background: transparent;
}
.dz.dz-overlay .dz-bolknop:focus-visible {
  outline: 2px solid var(--blue-l);
  outline-offset: 2px;
}
.dz .dz-ik {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tx3);
  cursor: pointer;
  flex: none;
  transition:
    background .2s var(--e-out),
    color .2s var(--e-out),
    opacity .2s;
}
.dz .dz-ik:hover {
  background: rgba(244, 246, 248, .08);
  color: var(--tx);
}
.dz .dz-ik:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dz .dz-ik[disabled] {
  opacity: .35;
  pointer-events: none;
}
.dz .dz-ik svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .dz-ik[aria-pressed=true] {
  color: var(--tx2);
}
.dz .meta .dz-ik {
  margin-right: -4px;
}
.dz .meta .dz-ik + .dz-ik {
  margin-right: 4px;
}
.dz .dz-voet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  box-shadow: inset 0 1px 0 var(--ln1);
}
.dz .dz-typveld {
  flex: 1;
  min-width: 0;
}
.dz .dz-typveld [data-flux-input],
.dz .dz-typveld [data-flux-control] {
  background: none;
  box-shadow: none;
  border: 0;
}
.dz .dz-typveld input,
.dz input.dz-invoer {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(10, 12, 16, .38);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .12);
  color: var(--tx);
  font: 15px var(--f-body);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.dz .dz-typveld input:focus {
  box-shadow: inset 0 0 0 1.5px var(--blue);
}
.dz .dz-typveld input::placeholder {
  color: var(--tx3);
  opacity: 1;
}
.dz .dz-stuur {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(244, 246, 248, .08);
  color: var(--tx2);
}
.dz .dz-stuur:hover {
  background: rgba(244, 246, 248, .13);
}
.dz .dz-stuur svg {
  width: 18px;
  height: 18px;
}
body.crest-shell .dz [data-flux-button] {
  border-radius: 0;
  font-weight: inherit;
  corner-shape: round;
}
body.crest-shell .dz .bt,
body.crest-shell .dz .btn {
  border-radius: 12px;
}
body.crest-shell .dz .bt.s {
  border-radius: 10px;
}
body.crest-shell .dz .chip {
  border-radius: 10px;
}
body.crest-shell .dz .checkc {
  border-radius: 50%;
}
body.crest-shell .dz .dz-ik,
body.crest-shell .dz .dz-bolknop {
  border-radius: 50%;
}
body.crest-shell .dz .dz-stuur,
body.crest-shell a.dz-stuur {
  border-radius: 12px;
}
body.crest-shell .dz .rij:focus-visible,
body.crest-shell .dz .d-row:focus-visible {
  border-radius: 12px;
}
body.crest-shell .dz .dz-titel:focus-visible {
  border-radius: 6px;
}
.dz {
  --pw:640px;
  --cw:340px;
  --kh:128px;
  --ow:660px;
}
.dz #cards {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.dz:not(.dz-rond) #cards,
.dz:not(.dz-rond) #kaartGroot {
  display: none;
}
.dz.dz-rond #card {
  display: none;
}
.dz.dz-rond #panel {
  width: var(--pw);
}
.dz .kc {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--kh);
  border-radius: 20px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  outline: none;
  background: rgba(22, 26, 34, .64);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    0 24px 64px rgba(2, 4, 10, .40),
    0 2px 8px rgba(2, 4, 10, .24),
    inset 0 0 0 1px rgba(244, 246, 248, .10),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 calc(44px * var(--l,0)) rgba(20, 102, 255, calc(.36 * var(--l,0)));
}
.dz .kc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(124, 170, 255, .85);
  opacity: var(--l,0);
}
.dz .kc:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dz .kc.open {
  cursor: default;
}
.dz .kc-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.dz .kc-in::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(244, 246, 248, .045);
  opacity: 0;
  transition: opacity .3s var(--e-out);
}
.dz .kc:not(.open):hover .kc-in::before {
  opacity: 1;
}
.dz .kc-glint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72px;
  pointer-events: none;
  background:
    radial-gradient(
      56% 100% at 50% 0%,
      rgba(90, 141, 255, .13),
      rgba(90, 141, 255, 0) 72%);
}
.dz .kc-edge {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, 0),
      rgba(140, 176, 255, .55),
      rgba(90, 141, 255, 0));
}
.dz .kc-c {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--kh);
  padding: 14px 16px 0;
}
.dz .kc-h {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
}
.dz .kc-h > svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--tx2);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .kc-h .tag {
  margin-left: auto;
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: .08em;
}
.dz .kc-t {
  margin-top: 10px;
  font: 600 16px/22px var(--f-head);
  letter-spacing: -.01em;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .kc-s {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .kc-s.m {
  font: 500 11px/18px var(--f-mono);
  letter-spacing: .06em;
  color: var(--tx3);
}
.dz .kc-pr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.dz .kc-pr .kc-t {
  margin: 0;
}
.dz .kc-pr .kc-s {
  margin: 0;
}
.dz .kc-pr .col {
  min-width: 0;
  flex: 1;
}
.dz .kc-f {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ow);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
.dz .kc.open .kc-f {
  pointer-events: auto;
}
.dz .kf-h {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 12px 0 24px;
  box-shadow: inset 0 -1px 0 var(--ln1);
  flex: none;
}
.dz .kf-h > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--tx2);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dz .kf-h .sp {
  flex: 1;
}
.dz .kf-b {
  padding: 20px 24px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dz .kf-b::-webkit-scrollbar {
  display: none;
}
.dz .kf-title {
  margin: 0 0 4px;
  font: 600 22px/30px var(--f-head);
  letter-spacing: -.01em;
  color: var(--tx);
}
.dz .kf-sub {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--tx3);
}
.dz .kf-meer {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
}
.dz .kf-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.dz .kf-top .col {
  min-width: 0;
  flex: 1;
}
.dz .kf-top .kf-title {
  margin: 0;
}
.dz .kf-addr {
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz .kf-text p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 23px;
  color: rgba(244, 246, 248, .86);
}
.dz .kf-text p:last-child {
  margin-bottom: 0;
}
.dz .kf-text ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.dz .kf-text li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(244, 246, 248, .86);
}
.dz .kf-text li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-l);
}
.dz .kf-att {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.dz .kf-att .chip {
  cursor: default;
}
.dz .kf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.dz .kf-stat {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(244, 246, 248, .05);
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .08);
}
.dz .kf-stat .lab {
  display: block;
  margin-bottom: 4px;
}
.dz .kf-stat b {
  display: block;
  font: 600 20px/26px var(--f-head);
  color: var(--tx);
}
.dz .kf-stat small {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: var(--tx3);
  margin-top: 2px;
}
.dz .kf-list {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(244, 246, 248, .08);
}
.dz .kf-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  line-height: 20px;
  color: var(--tx);
  box-shadow: inset 0 1px 0 var(--ln1);
}
.dz .kf-list li:first-child {
  box-shadow: none;
}
.dz .kf-list li .tag {
  margin-left: auto;
}
.dz .kf-list .chk.klaar {
  background: var(--green);
  border-color: var(--green);
}
.dz .kf-li {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dz .kf-rows {
  margin: 0 0 16px;
}
.dz .kf-rows div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 32px;
  font-size: 15px;
  line-height: 24px;
  color: var(--tx);
}
.dz .kf-rows .lab {
  flex: none;
  width: 152px;
}
.dz .kf-box {
  padding: 12px 16px;
  margin-top: 16px;
}
.dz .kf-box .lab {
  display: block;
  margin-bottom: 6px;
  color: #AFC8FF;
}
.dz .kf-box .kf-text li {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}
.dz .kf-box .kf-text li::before {
  top: 8px;
}
.dz .kf-big {
  font: 600 28px/34px var(--f-head);
  letter-spacing: -.015em;
  color: var(--tx);
  margin: 0 0 2px;
}
.dz .kf-ts {
  display: flex;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(244, 246, 248, .82);
}
.dz .kf-ts .lab {
  flex: none;
  width: 44px;
  padding-top: 2px;
}
.dz .kf-laad {
  height: 14px;
  margin: 14px 0 0;
  border-radius: 7px;
  background:
    linear-gradient(
      90deg,
      rgba(244, 246, 248, .05),
      rgba(244, 246, 248, .12),
      rgba(244, 246, 248, .05));
  background-size: 200% 100%;
  animation: dz-shim 1.4s linear infinite;
}
.dz.rm .kf-laad {
  animation: none;
}
.dz .kf-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 16px 0 20px;
  box-shadow: inset 0 1px 0 var(--ln1);
  flex: none;
}
.dz .kf-foot .sp {
  flex: 1;
}
.dz .kf-foot .sp0 {
  flex: 0 0 8px;
}
.dz .k-hint kbd,
.dz .kf-foot kbd {
  display: inline-block;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(244, 246, 248, .14);
  border-radius: 5px;
  font: 500 11px/16px var(--f-mono);
  color: var(--tx2);
}
.dz #kaartGroot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ow);
  height: 0;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  will-change: transform, opacity;
}
.dz #kaartGroot .gs {
  height: 100%;
  overflow: hidden;
}
.dz #kaartGroot.open .gs {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dz #kaartGroot.open .gs::-webkit-scrollbar {
  display: none;
}
.dz #kaartGroot .gi {
  position: relative;
  width: var(--ow);
  max-width: none;
  padding: 8px;
}
.dz #kaartGroot .c-head {
  padding-right: 56px;
}
.dz #kaartGroot .k-foot {
  height: 64px;
}
.dz #kaartGroot .kf-x-hoofd {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  pointer-events: auto;
  visibility: hidden;
  opacity: 0;
}
.dz .kmore {
  position: absolute;
  left: 0;
  top: 0;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  background: rgba(22, 26, 34, .64);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--ln2), 0 8px 24px rgba(2, 4, 10, .3);
  font: 500 11px/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx2);
  white-space: nowrap;
}
.dz .kmore:hover {
  color: var(--tx);
}
.dz .kmore:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.dz .dz-a .crest-donna-w.ref {
  background:
    linear-gradient(
      90deg,
      rgba(90, 141, 255, .55),
      rgba(90, 141, 255, .55)) 0 100%/100% 1px no-repeat;
  padding-bottom: 1px;
}
.dz .dz-a .crest-donna-w.ref.is-nu {
  background-image:
    linear-gradient(
      90deg,
      rgba(150, 186, 255, .95),
      rgba(150, 186, 255, .95));
}
.dz #gA.clip {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      #000 calc(100% - 20px),
      transparent);
  mask-image:
    linear-gradient(
      180deg,
      #000 calc(100% - 20px),
      transparent);
}
.dz.shot .kc *,
.dz.shot .kc {
  transition: none !important;
}
.donna-bol {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.donna-bol .dz {
  position: absolute;
  inset: 0;
}
.donna-bol .dz #stage {
  position: absolute;
  inset: 0;
}
.donna-bol .dz #aurora {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.donna-bol .dz #brain {
  width: 100%;
  height: 100%;
}
.donna-bol .donna-bol-stomp {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 640px;
  opacity: 0;
  pointer-events: none;
}
.donna-bol .donna-bol-stomp,
.donna-bol .donna-bol-stomp * {
  visibility: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}