*{box-sizing:border-box}

html{
  min-height:100%;
  background:var(--nacht-diep);
}

body{
  position:relative;
  isolation:isolate;
  color:var(--tekst-op-donker);
  font-family:"Trebuchet MS","Avenir Next","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 9% 14%,rgba(255,232,132,.92) 0 1px,transparent 2px),
    radial-gradient(circle at 21% 72%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 38% 24%,rgba(205,234,255,.85) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 55% 80%,rgba(255,232,132,.88) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 18%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 58%,rgba(166,139,250,.8) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 93% 9%,rgba(255,232,132,.8) 0 1px,transparent 2px),
    linear-gradient(145deg,var(--nacht-licht),var(--nacht) 46%,var(--nacht-diep));
  background-size:137px 149px,181px 193px,223px 211px,197px 229px,251px 263px,283px 271px,307px 313px,auto;
}

button,a,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

.knop{
  min-width:44px;
  min-height:44px;
  border:var(--rand-dun) solid rgba(255,255,255,.18)!important;
  border-radius:var(--radius-klein)!important;
  background:linear-gradient(180deg,#fff,var(--maan))!important;
  color:var(--nacht)!important;
  box-shadow:var(--schaduw-knop)!important;
  transition:transform var(--snel) ease,box-shadow var(--snel) ease,filter var(--snel) ease;
}

.knop:hover{filter:brightness(1.04)}
.knop:active{transform:translateY(3px)!important;box-shadow:0 1px 0 rgba(1,7,20,.34)!important}
.knop[aria-pressed="true"]{background:linear-gradient(180deg,var(--ster),#FFC94D)!important;color:var(--nacht)!important}

#appMelding,#slotTip{
  background:var(--melding)!important;
  color:var(--tekst-op-donker)!important;
  border:2px solid var(--ster)!important;
  box-shadow:0 10px 30px rgba(1,7,20,.38)!important;
}

#slotBadge{
  background:
    conic-gradient(var(--ster) calc(var(--p,0) * 1turn),rgba(255,255,255,.22) 0) border-box,
    var(--nacht-licht) padding-box!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.18),0 8px 24px rgba(1,7,20,.42)!important;
}

button:focus-visible,a:focus-visible,input:focus-visible{
  outline:4px solid var(--focus)!important;
  outline-offset:3px!important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (forced-colors:active){
  .knop{border:2px solid ButtonText!important}
}