/* The page background; with bg.js. A preset is only these properties. */
html[data-bg]{--bg-a:var(--ground,var(--bg,#8AB6F0));--bg-b:#C5DBF8;--bg-k:1;--bg-from:0;--bg-to:100;--bg-soft:200;--bg-shape:gradient;}
html[data-bg="lift"]{--bg-shape:lift;--bg-b:#D0E2F9;--bg-from:4;--bg-to:92;}
html[data-bg="bands"]{--bg-shape:bands;--bg-b:#ADCCF5;--bg-soft:220;}
html[data-bg="gradient"]{--bg-shape:gradient;--bg-b:#C5DBF8;}
html[data-bg="washes"]{--bg-shape:washes;--bg-b:#C5DBF8;--bg-soft:360;}
html[data-bg="lighter"]{--bg-shape:lift;--bg-a:#A1C5F3;--bg-b:#D5E5FA;--bg-from:4;--bg-to:92;}
html[data-bg="stairs"]{--bg-shape:stairs;--bg-a:#F5F9FF;--bg-b:#6B9CDB;--bg-k:1;--bg-soft:800;}

html[data-bg] body{background-color:var(--bg-a);}
html[data-bg-mode="page"]{min-height:100%;}
html[data-bg-mode="page"] body{background-image:var(--bg-paint,none);background-repeat:no-repeat;background-size:100% auto;}
html[data-bg-mode] header.top:not(.shell){background-color:var(--bg-a);}
@media (min-width:769px){html[data-bg-mode] header.top:not(.shell) .wordmark{background-color:var(--bg-a);}}
@media (max-width:768px){
  html[data-bg-mode] .t1-words > section:is([data-scene="split"],[data-scene="yours"],[data-scene="pick"],[data-scene="runs"],[data-scene="film29"]) > .st.st-flow:not(.fl-wide){
    background-color:var(--bg-here,var(--bg-a));transition:none;}
}
html[data-bg-mode] header.top.shell .wordmark{background-color:transparent;}