:root{
  --withifi-ux-ink:#283247;
  --withifi-ux-muted:#657286;
  --withifi-ux-surface:rgba(255,255,255,.9);
  --withifi-ux-border:rgba(55,73,96,.1);
  --withifi-ux-shadow:0 20px 55px rgba(45,72,92,.09);
  --withifi-ux-focus:#377d70;
  --withifi-ux-accent:#bce5d7;
  --withifi-ux-wash:#f2faf7;
}

body[data-withifi-ux-world="taalwereld"]{--withifi-ux-accent:#d9c9ee;--withifi-ux-wash:#faf6fd;--withifi-ux-focus:#795a9b}
body[data-withifi-ux-world="woordenwereld"]{--withifi-ux-accent:#f2d2bd;--withifi-ux-wash:#fff8f3;--withifi-ux-focus:#955f3f}
body[data-withifi-ux-world="getallenwereld"]{--withifi-ux-accent:#b9deec;--withifi-ux-wash:#f3fbfe;--withifi-ux-focus:#326e84}
body[data-withifi-ux-world="denkwereld"]{--withifi-ux-accent:#f2dda5;--withifi-ux-wash:#fffaf0;--withifi-ux-focus:#826a2f}
body[data-withifi-ux-world="klokkijken"]{--withifi-ux-accent:#bfe4d7;--withifi-ux-wash:#f3fbf8;--withifi-ux-focus:#3e7564}
body[data-withifi-ux-world="rustmoment"]{--withifi-ux-accent:#cadbea;--withifi-ux-wash:#f5f9fc;--withifi-ux-focus:#526f88}

body[data-withifi-ux="active"]{
  overflow-x:hidden;
  color:var(--withifi-ux-ink);
  background:linear-gradient(145deg,var(--withifi-ux-wash),#fff 58%,#fdfaf6);
}

body[data-withifi-ux="active"] *,
body[data-withifi-ux="active"] *::before,
body[data-withifi-ux="active"] *::after{box-sizing:border-box}

body[data-withifi-ux="active"] .withifi-ux-main{
  min-width:0;
  isolation:isolate;
}

body[data-withifi-ux="active"] .withifi-ux-title{
  max-width:18ch;
  margin-inline:auto;
  color:var(--withifi-ux-ink);
  font-size:clamp(2.05rem,5.2vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.045em;
  text-wrap:balance;
}

body[data-withifi-ux="active"] .withifi-ux-control:focus-visible{
  outline:3px solid color-mix(in srgb,var(--withifi-ux-focus) 42%,transparent)!important;
  outline-offset:4px!important;
}

body[data-withifi-ux="active"] button.withifi-ux-control,
body[data-withifi-ux="active"] a.withifi-ux-control{
  min-height:44px;
  touch-action:manipulation;
}

body[data-withifi-page-kind="world"] .elementor-widget-heading h2,
body[data-withifi-page-kind="world"] .elementor-widget-heading h3,
body[data-withifi-page-kind="explanation"] .elementor-widget-heading h2,
body[data-withifi-page-kind="rest"] .elementor-widget-heading h2{
  color:var(--withifi-ux-ink);
  line-height:1.15;
  letter-spacing:-.025em;
  text-wrap:balance;
}

body[data-withifi-page-kind="world"] .elementor-widget-text-editor,
body[data-withifi-page-kind="explanation"] .elementor-widget-text-editor,
body[data-withifi-page-kind="rest"] .elementor-widget-text-editor{
  color:var(--withifi-ux-muted);
  line-height:1.65;
}

body[data-withifi-page-kind="world"] .elementor-element.e-con,
body[data-withifi-page-kind="explanation"] .elementor-element.e-con,
body[data-withifi-page-kind="rest"] .elementor-element.e-con{
  min-width:0;
}

body[data-withifi-page-kind="world"] .elementor-widget-wrap > .elementor-element,
body[data-withifi-page-kind="explanation"] .elementor-widget-wrap > .elementor-element{
  max-width:100%;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-exercise{
  width:min(960px,calc(100% - 28px));
  margin:clamp(24px,5vw,64px) auto;
  padding:clamp(24px,4.5vw,52px)!important;
  border:1px solid var(--withifi-ux-border);
  border-radius:30px;
  background:var(--withifi-ux-surface);
  box-shadow:var(--withifi-ux-shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

body[data-withifi-page-kind="exercise"] .withifi-ux-question{
  display:block;
  max-width:24ch;
  margin:0 auto clamp(28px,5vw,46px)!important;
  color:var(--withifi-ux-ink)!important;
  font-size:clamp(1.8rem,4.4vw,3.35rem)!important;
  font-weight:850!important;
  line-height:1.13!important;
  letter-spacing:-.035em;
  text-align:center;
  text-wrap:balance;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-answers{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(14px,2.5vw,22px)!important;
  width:100%;
  margin:clamp(28px,5vw,48px) auto 0!important;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-answers button,
body[data-withifi-page-kind="exercise"] .withifi-ux-answers [role="button"]{
  min-width:min(190px,100%);
  min-height:60px;
  padding:15px 24px!important;
  border:1px solid color-mix(in srgb,var(--withifi-ux-focus) 18%,transparent)!important;
  border-radius:19px!important;
  background:rgba(255,255,255,.98)!important;
  color:var(--withifi-ux-ink)!important;
  box-shadow:0 10px 26px rgba(45,72,92,.08)!important;
  font:inherit!important;
  font-size:clamp(1rem,2vw,1.22rem)!important;
  font-weight:800!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-answers button:hover,
body[data-withifi-page-kind="exercise"] .withifi-ux-answers button:focus-visible{
  border-color:color-mix(in srgb,var(--withifi-ux-focus) 50%,transparent)!important;
  box-shadow:0 14px 32px rgba(45,72,92,.13)!important;
  transform:translateY(-2px);
}

body[data-withifi-page-kind="exercise"] .withifi-ux-feedback,
body[data-withifi-page-kind="exercise"] .withifi-ux-support{
  max-width:58ch;
  margin:18px auto 0!important;
  color:var(--withifi-ux-muted)!important;
  line-height:1.6!important;
  text-align:center;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-progress-bar{
  display:block;
  min-height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--withifi-ux-accent),color-mix(in srgb,var(--withifi-ux-focus) 42%,white))!important;
}

body[data-withifi-page-kind="exercise"] .withifi-ux-next{
  margin-top:24px!important;
  text-align:center;
}

body[data-withifi-page-kind="child-dashboard"] [data-withifi-child-progress],
body[data-withifi-page-kind="parent-dashboard"] [data-withifi-parent-progress]{
  width:min(1180px,calc(100% - 28px));
  margin:clamp(28px,5vw,64px) auto;
}

body[data-withifi-page-kind="child-dashboard"] .ifi-progress-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}

body[data-withifi-page-kind="parent-dashboard"] .ifi-progress-page > h2{
  margin:clamp(34px,5vw,58px) 0 16px;
  font-size:clamp(1.45rem,3vw,2rem);
}

body[data-withifi-page-kind="parent-dashboard"] .ifi-progress-card{
  min-width:0;
  overflow-wrap:anywhere;
}

@media(max-width:767px){
  body[data-withifi-ux="active"] header.elementor-location-header .elementor-nav-menu--main{
    display:none!important;
  }
  body[data-withifi-ux="active"] header.elementor-location-header .elementor-menu-toggle{
    display:flex!important;
    min-width:48px;
    min-height:48px;
  }
  body[data-withifi-ux="active"] header.elementor-location-header .elementor-nav-menu--dropdown{
    position:absolute;
    z-index:100;
    inset:calc(100% + 8px) 12px auto;
    max-height:min(70vh,520px);
    overflow:auto;
    border:1px solid var(--withifi-ux-border);
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--withifi-ux-shadow);
  }
  body[data-withifi-ux="active"] .withifi-ux-title{
    max-width:15ch;
    font-size:clamp(2rem,11vw,3.25rem);
  }
  body[data-withifi-page-kind="exercise"] .withifi-ux-exercise{
    width:min(100% - 18px,960px);
    padding:26px 16px!important;
    border-radius:24px;
  }
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers{
    flex-direction:column;
    align-items:stretch;
  }
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers button,
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers [role="button"]{
    width:100%;
    min-width:0;
  }
  body[data-withifi-page-kind="child-dashboard"] [data-withifi-child-progress],
  body[data-withifi-page-kind="parent-dashboard"] [data-withifi-parent-progress]{
    width:min(100% - 18px,1180px);
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-withifi-ux="active"] *,
  body[data-withifi-ux="active"] *::before,
  body[data-withifi-ux="active"] *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers button:hover,
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers button:focus-visible{transform:none}
}

@media(forced-colors:active){
  body[data-withifi-page-kind="exercise"] .withifi-ux-exercise,
  body[data-withifi-page-kind="exercise"] .withifi-ux-answers button{border:2px solid CanvasText!important}
}