/* Shared color and contrast layer for every WattPix page type. */
.canvas-wrap,
.compare,
#afterClip{background:var(--bg,#f4f7fb)!important;background-image:none!important}

html:not([data-theme=dark]) .dropzone p,
html:not([data-theme=dark]) .dropzone small,
html:not([data-theme=dark]) .home-example small{color:#68758a}

html[data-theme=dark]{
  --ink:#f7f9fd;
  --muted:#c3ccda;
  --line:#3b4960;
  --site-ui-ink:#f7f9fd;
  --site-ui-muted:#c3ccda;
  --site-ui-line:#3b4960;
}

html[data-theme=dark] .demo-card,
html[data-theme=dark] .dropzone,
html[data-theme=dark] .stage-card,
html[data-theme=dark] .controls,
html[data-theme=dark] .batch-panel,
html[data-theme=dark] .feature-grid article,
html[data-theme=dark] .faq-section details,
html[data-theme=dark] .home-about,
html[data-theme=dark] .home-example,
html[data-theme=dark] .security-story,
html[data-theme=dark] .legal-page,
html[data-theme=dark] .tab{color:var(--ink);border-color:var(--line)}

html[data-theme=dark] .tab{color:#cbd4e2}
html[data-theme=dark] .tab.active{color:#ff8069;border-color:#ff765e;background:#1b2940}
html[data-theme=dark] .secondary{color:#e7ecf5;border-color:#46546b;background:#1c2940}
html[data-theme=dark] .secondary:hover{border-color:#697891;background:#24334b}
html[data-theme=dark] .step b{color:#d9e1ed;background:#26344a}
html[data-theme=dark] .step.active b{color:#fff;background:var(--accent)}
html[data-theme=dark] .segmented{background:#111b2c}
html[data-theme=dark] .segmented button{color:#bdc7d7}
html[data-theme=dark] .segmented button.active{color:#ff8069;background:#25334a}
html[data-theme=dark] .text-button{color:#c0cada}

html[data-theme=dark] .auto-badge{color:#f7f9fd;border-color:#45536a;background:linear-gradient(135deg,#1b2940,#111c2f)}
html[data-theme=dark] .auto-badge b{color:#fff}
html[data-theme=dark] .auto-badge small{color:#cbd4e2}
html[data-theme=dark] .busy{color:#fff;background:#0c1422ed}
html[data-theme=dark] .busy>b{color:#fff}
html[data-theme=dark] .busy span{color:#d1d9e6}
html[data-theme=dark] .cancel-job{color:#f2f5fb;border-color:#4b5970;background:#1b2940}
html[data-theme=dark] .cancel-job:hover{color:#ff8b73;border-color:#ff8b73}

html[data-theme=dark] .dropzone p,
html[data-theme=dark] .dropzone small,
html[data-theme=dark] footer,
html[data-theme=dark] footer a,
html[data-theme=dark] .stage-hint,
html[data-theme=dark] .stage-toolbar small,
html[data-theme=dark] .legend{color:#c3ccda}
html[data-theme=dark] footer a:hover{color:#fff}

html[data-theme=dark] .seo-copy p,
html[data-theme=dark] .seo-card,
html[data-theme=dark] .seo-faq details,
html[data-theme=dark] .seo-related,
html[data-theme=dark] .trust-content{color:var(--ink);border-color:var(--line)}

@media(min-width:1101px){
  html[data-theme=dark] .site-main-nav{border:0;background:transparent;box-shadow:none}
}
@media(max-width:1100px){
  html[data-theme=dark] .site-main-nav{color:#f7f9fd;border-color:#3b4960;background:#172237;box-shadow:0 25px 70px #0007}
}