:root{--paper:#e9e7dd;--ink:#14150f;--accent:#0000d7;--u:3px;--barh:56px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#000000;--ink:#fafafa;--accent:#fafafa}}
:root[data-theme=dark]{--paper:#000000;--ink:#fafafa;--accent:#fafafa}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;-webkit-font-smoothing:none}
img,svg,.spr,.mood,.frame,.sframe{image-rendering:pixelated}
svg{display:block}
a{color:inherit;text-decoration:none}
p{max-width:58ch;margin:0 0 .9em}
p:last-child{margin-bottom:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---- the bar: filled and knocked out in light, underlined in dark (§3.2).
   Sticky, and opaque in both modes so nothing shows through it. ---- */
.bar{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);
  padding:calc(var(--u)*3) 0}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bar{background:var(--paper);color:var(--ink);border-bottom:var(--u) solid var(--ink)}}
:root[data-theme=dark] .bar{background:var(--paper);color:var(--ink);border-bottom:var(--u) solid var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:calc(var(--u)*6);position:relative}
.bar #menu,.bar .sw.solo{margin-left:auto}
/* the landing page: face and words side by side, centred in the window, face larger */
.panel.landing{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:calc(100vh - var(--barh,0px));min-height:calc(100dvh - var(--barh,0px))}
.rt>.rt-d{display:block}.rt>.rt-m{display:none}
@font-face{font-family:"HH5x7";src:url(/assets/fonts/hh5x7.woff?v=49f2afe3) format("woff"),url(/assets/fonts/hh5x7.ttf?v=49f2afe3) format("truetype");font-display:block}
/* a run of the house face as text. font-size 7u = one art pixel per u, every advance a whole pixel */
.px{font-family:"HH5x7",ui-monospace,Menlo,monospace;font-size:calc(var(--ud)*7);line-height:calc(var(--ud)*7);
  letter-spacing:0;word-spacing:0;text-transform:uppercase;display:inline-block;vertical-align:top;white-space:nowrap;
  -webkit-font-smoothing:none;font-synthesis:none}
.px.tw{display:block;white-space:normal;line-height:calc(var(--ud)*9);margin:calc(var(--ud)*-1) 0}
.px a,a .px{color:inherit}
/* company copy: real paragraphs in the body mono, left-aligned on a 58ch measure */
.panel.landing.textonly .mb.prose,.panel.landing.textonly .mb .prose{font:15px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;text-align:left}
.prose p{margin:0 0 .9em}.prose p:last-child{margin-bottom:0}.prose a{color:inherit;text-decoration:underline}
.prose h3{margin:1.4em 0 .4em;font:inherit;font-weight:700;text-transform:uppercase}.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 .9em;padding-left:1.4em}.prose li{margin:0 0 .3em}
.prose .draft{opacity:.7}
/* sections on the company page sit one gap apart, whatever the screen height */
.panel.landing.textonly .mods .mod.sec{margin:0 0 calc(var(--u)*8);width:100%}
.panel.landing.textonly .mods .mod.sec .mb{text-align:left}
.panel.landing.textonly .mods .mod.sec .mb.center{text-align:center}
.panel.landing.textonly .mods>.hahalink,.panel.landing.textonly .mods>.hahaloop{margin-bottom:calc(var(--u)*6)}
/* the footer: a row of links, the support button at the edge, then the fine print */
.footlinks{display:flex;gap:calc(var(--u)*7);justify-content:center}
.footlinks a{color:inherit;text-decoration:none}.footlinks a:hover{color:var(--accent)}
body.landing .strip>.footlinks{grid-column:2}
.fine{font:12px/1.7 ui-monospace,"SF Mono",Menlo,Consolas,monospace;text-align:center;padding:calc(var(--u)*3) 0 calc(var(--u)*6)}
.fine a{color:inherit}.fine .sep{opacity:.5;margin:0 .5em}
/* privacy / terms: one page-width box */
.panel.landing.textonly .mods .mod.sec.page{max-width:720px;margin:calc(var(--u)*6) auto calc(var(--u)*8)}
.lead{margin-bottom:calc(var(--u)*4)}
.panel.landing .stage{position:static;height:auto;justify-content:center}
.panel.landing .frame{--z:7}
/* the landing page with no face: one column, every line centred on the axis */
.panel.landing.textonly{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:stretch;text-align:center}
.panel.landing.textonly .mods{width:100%;max-width:720px;height:100%;display:flex;flex-direction:column}
.panel.landing.textonly .tw{justify-content:center;text-align:center}
.panel.landing.textonly .acts{justify-content:center;align-items:center;flex-wrap:nowrap;gap:calc(var(--u)*8);margin:calc(var(--u)*5) 0}
.panel.landing.textonly .rt>.rt-m.stack{align-items:center}
.panel.landing.textonly .mh svg{margin:0 auto}.panel.landing.textonly .mh .px{display:block;text-align:center}
/* The MEANWHILE box is its old width again and only as tall as it needs to be
   for the loop at its foot. A gap under the byline, matching the one over the
   headline, so the column reads evenly. */
.hahalink{display:block;color:var(--ink)}
.hahalink:hover{color:var(--accent)}
.panel.landing.textonly .hero .rt{display:block;line-height:0}
/* flex, so the whitespace between the headline and the byline cannot open a
   line box under them -- 40px of it was sitting below the last word. */
.panel.landing.textonly .hero{display:flex;flex-direction:column;align-items:center;padding-bottom:calc(var(--u)*14)}
/* the contact box sits flush on the footer rule */
.panel.landing.textonly .mods{padding-bottom:0}
/* the 404's heading sits outside the panel, so it needs the same axis */
body.landing .wrap>.hero{text-align:center}
body.landing .wrap>.hero .tw{justify-content:center;text-align:center}
body.landing .wrap>.hero p{margin-left:auto;margin-right:auto}
.coopmark{display:inline-block;color:var(--ink)}
.coopmark:hover{color:var(--accent)}
/* the landing page: the bar and footer wordmarks sit on the same centre line
   as the rest of the page; the theme switch and DONATE keep their edges. */
body.landing .bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center}
body.landing .bar #wm,body.landing .bar #wm-dmg{grid-column:2}
body.landing .bar .sw.solo{grid-column:3;justify-self:end;margin-left:0}
body.landing .strip{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center}
body.landing .strip>svg,body.landing .strip>.px{grid-column:2}
body.landing .strip .btn.foot{grid-column:3;justify-self:end;margin-left:0}
/* on a phone the footer name moves left so it clears DONATE */
/* phones: the link row takes the whole line and the support button drops to its own line, right */
@media(max-width:480px){body.landing .strip{grid-template-columns:1fr auto;row-gap:calc(var(--u)*3)}
  body.landing .strip>.tw,body.landing .strip>svg,body.landing .strip>.px,body.landing .strip>.footlinks{grid-column:1/3;grid-row:1;justify-self:start}
  body.landing .strip .btn.foot{grid-column:2;grid-row:2;margin-top:0;padding-top:calc(var(--u)*3)}
  .fine .sep{display:block;height:0;overflow:hidden}}
/* the donate button reaches up to touch the rule above it: pulled up by the
   strip's 9px padding and given that back as top padding, so DONATE stays on
   the same line as the HAHAHAUDIO stamp. */
body.landing .strip .btn.foot{margin-top:calc(var(--u)*-3);padding-top:calc(var(--u)*5)}
/* the footer rule sits as far below the last box as the headline sits below
   the bar: 18px of panel padding + 24px here = the 42px above. */
body.landing .strip{margin-top:0}
/* p carries a 58ch measure; on the centred page that measure is centred too,
   otherwise centred text sits off the page axis by half the slack. */
.panel.landing.textonly p{margin-left:auto;margin-right:auto}
/* the box copy in Silkscreen -- the face Co-Operator's own wordmark is set in.
   16px is 2x its 8px design size, so the pixels stay square. */
.panel.landing.textonly .mb{font-family:"Silkscreen",ui-monospace,"SF Mono",Menlo,monospace;font-size:16px;line-height:1.5}
/* the HAHA loop in the gap under the headline: 3 frames on a 2x2 sheet (the
   4th cell is empty), 1s each, drawn in Pixel Buddy. 32x32 art pixels shown
   at x4, so the grid stays square; x3 on a phone. */
.hahaloop{display:block;margin:calc(var(--u)*8) auto calc(var(--u)*2);width:128px;height:60px;
  background:url(/assets/sprites/hahaloop-light.png) 0 0/256px 256px no-repeat;
  image-rendering:pixelated;animation:hahaloop 3s step-end infinite}
@keyframes hahaloop{0%{background-position:0 -36px}33.333%{background-position:-128px -36px}66.666%{background-position:0 -164px}100%{background-position:0 -36px}}
/* light mode draws in ink on a white ground; dark mode is the inverse,
   the same way the wave sprite swaps. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hahaloop{background-image:url(/assets/sprites/hahaloop.png)}}
:root[data-theme=dark] .hahaloop{background-image:url(/assets/sprites/hahaloop.png)}
/* The logo sprite carries 36px of empty art above the letters and 32px below
   at x4, so a 15px margin there reads as ~49px on screen. The boxes get that
   same optical gap, not the same CSS number. */
/* the MEANWHILE box rides in the middle of the room between the byline and
   the contact box: its auto margins split the free space evenly. */
.panel.landing.textonly .mod:not(.narrow){margin-top:auto;margin-bottom:auto}
/* the contact box holds one short line, so it hugs it instead of running
   the full measure like the MEANWHILE box. */
/* the contact box sits at the foot of the window; everything above keeps
   the spacing it already had. */
.panel.landing.textonly .mod.narrow{width:max-content;max-width:100%;margin:0 auto}
/* The index: the three gaps -- bar to headline, byline to MEANWHILE, MEANWHILE
   to contact -- share the free height equally, so nothing floats. */
.panel.landing.textonly.even .mods{padding-top:0;padding-bottom:0}
.panel.landing.textonly.even .hero{padding:0;margin-top:auto}
.panel.landing.textonly.even .hahalink,.panel.landing.textonly.even .modlink{margin-top:auto;margin-bottom:0}
.panel.landing.textonly.even .hahalink .hahaloop{margin:0 auto}
.panel.landing.textonly.even .modlink .mod{margin:0}
.modlink{display:block}
.panel.landing.textonly.even .mod.narrow{margin-top:auto;margin-bottom:0}
/* the menu: a box of jumps under the bar. Opening, closing and the jump are cuts (§7). */
.menu{position:absolute;right:20px;top:calc(100% + var(--u)*2);z-index:60;background:var(--paper);color:var(--ink);
  border:var(--u) solid var(--ink);display:flex;flex-direction:column;min-width:240px}
.menu[hidden]{display:none}
.menu a{display:flex;padding:calc(var(--u)*3) calc(var(--u)*4);border-bottom:var(--u) solid var(--ink)}
.menu a:hover{color:var(--accent)}
.menu a[aria-current=true]{background:var(--ink);color:var(--paper)}
.menu .sw{margin:calc(var(--u)*3) calc(var(--u)*4);align-self:flex-start}
.sec{scroll-margin-top:calc(var(--barh) + var(--stageh, 0px) + var(--u)*4)}
.sec > .vh{position:absolute}
.nl{display:flex;gap:calc(var(--u)*3);flex-wrap:wrap;margin-top:calc(var(--u)*3)}
.nl input{font:inherit;background:var(--paper);color:var(--ink);border:var(--u) solid var(--ink);
  padding:calc(var(--u)*3) calc(var(--u)*4);min-width:0;flex:1 1 180px;border-radius:0;-webkit-appearance:none}
.nl input::placeholder{color:var(--ink);opacity:.6}
.post{padding:calc(var(--u)*4) 0;border-bottom:var(--u) solid var(--ink)}.post:last-child{border-bottom:0}
.post h3{margin:calc(var(--u)*2) 0;font:inherit}
.yt{aspect-ratio:16/9;border:var(--u) solid var(--ink);margin:calc(var(--u)*3) 0}.yt iframe{width:100%;height:100%;border:0;display:block}
.names{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6) calc(var(--u)*8)}
#wm-dmg{display:none}
html.damaged #wm{display:none}html.damaged #wm-dmg{display:block}

/* A switch is a box; ON is inverted (§5). */
.sw{background:transparent;color:inherit;border:var(--u) solid currentColor;padding:calc(var(--u)*1) calc(var(--u)*2);
  cursor:pointer;font:inherit;line-height:0}
.sw[aria-pressed=true]{background:currentColor}
/* the theme switch: sun | moon, the side you are on filled in */
.sw.theme{padding:0;display:inline-flex;--on:var(--ink)}
.sw.theme[aria-pressed=true]{background:transparent}
.sw.theme span{display:block;padding:calc(var(--u)*1) calc(var(--u)*2)}
.sw.theme[aria-pressed=false] .sun,.sw.theme[aria-pressed=true] .moon{background:currentColor}
:root .sw.theme[aria-pressed=false] .sun svg,:root .sw.theme[aria-pressed=true] .moon svg{color:var(--on)}
:root .sw.theme[aria-pressed=true] .sun svg,:root .sw.theme[aria-pressed=false] .moon svg{color:inherit}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bar .sw.theme{--on:var(--paper)}}
:root[data-theme=dark] .bar .sw.theme{--on:var(--paper)}
.menu .sw.theme{--on:var(--paper)}
/* the footer stamp; on the landing page the footer sits at the foot of the window */
.mood.stamp{margin-left:auto}
.btn.foot{margin-left:auto;padding:calc(var(--u)*2) calc(var(--u)*3)}
body.landing{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.landing .wrap{width:100%;box-sizing:border-box}
body.landing main{flex:1;display:flex;flex-direction:column}
body.landing main>.wrap{flex:1;display:flex;flex-direction:column}
body.landing .panel.landing{flex:1;min-height:0}
.sw[aria-pressed=true] svg{color:var(--ink)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .sw[aria-pressed=true] svg{color:var(--paper)}}
:root[data-theme=dark] .sw[aria-pressed=true] svg{color:var(--paper)}

/* ---- modules: a box with its own title bar (§9) ---- */
.mod{border:var(--u) solid var(--ink);margin-bottom:calc(var(--u)*6)}
.mod.inv{background:var(--ink);color:var(--paper)}.mod.inv .mh{background:var(--paper);color:var(--ink)}
.mod.inv .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mod.inv .mb .rule,.mod.inv .post{border-color:var(--paper)}
.mod.inv .mb .rule{background:var(--paper)}
.mod.inv .yt{border-color:var(--paper)}
.mod.inv .spr-wave{background-image:url(/assets/sprites/wave-dark.png)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .mod.inv .spr-wave{background-image:url(/assets/sprites/wave.png)}}
:root[data-theme=dark] .mod.inv .spr-wave{background-image:url(/assets/sprites/wave.png)}
.mod.dense .mb{padding:0 calc(var(--u)*4)}
/* a question you click into. The summary is the whole closed box. */
.ask summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:calc(var(--u)*4);
  padding:calc(var(--u)*4);background:var(--paper);color:var(--ink);user-select:none;-webkit-user-select:none}
.ask summary::-webkit-details-marker{display:none}
.ask summary .q{margin:0;flex:1 1 0;min-width:0}   /* basis 0: MORE/LESS always keeps its room */
.ask summary .more{margin-left:auto;flex:0 0 auto}
.ask summary:hover .q{color:var(--accent)}
.ask[open] summary{background:var(--ink);color:var(--paper)}
.ask summary .l{display:none}.ask[open] summary .m{display:none}.ask[open] summary .l{display:inline}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mh{margin:0}h1{margin:0;font:inherit}
/* the state word is real: what the page is doing, printed */
.st{display:none}
html.stopped .st-stop{display:block}
html:not(.stopped)[data-section=about] .st-about{display:block}
html:not(.stopped)[data-section=news] .st-news{display:block}
html:not(.stopped)[data-section=plugins] .st-plugins{display:block}
html:not(.stopped)[data-section=club] .st-club{display:block}
html:not(.stopped)[data-section=ambassadors] .st-ambassadors{display:block}
html:not(.stopped):not([data-section]) .st-about{display:block}
.hint{display:flex;gap:calc(var(--u)*3);align-items:center;flex-wrap:wrap}
.mh{background:var(--ink);color:var(--paper);padding:calc(var(--u)*2) calc(var(--u)*4)}
.mb{padding:calc(var(--u)*5) calc(var(--u)*4);overflow-x:hidden;min-width:0}
.mb .rule{height:var(--u);background:var(--ink);margin:calc(var(--u)*4) 0}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:calc(var(--u)*3) calc(var(--u)*5);
  border:var(--u) solid var(--ink)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.off,.btn[disabled]{background:transparent;color:var(--ink);pointer-events:none;cursor:default}
.mod.inv .btn.off,.mod.inv .btn[disabled]{background:transparent;color:var(--paper)}
.nl input[disabled]{opacity:.6}
.stack{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.acts{display:flex;gap:calc(var(--u)*3);flex-wrap:wrap;margin-top:calc(var(--u)*4)}

/* plugin rows: each wears its mood — the face at its own BRUTAL reading */
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"face name price" "face tag tag";
  column-gap:calc(var(--u)*4);row-gap:calc(var(--u)*1);align-items:center;padding:calc(var(--u)*3) 0;
  border-bottom:var(--u) solid var(--ink);touch-action:manipulation}
.row .mood{grid-area:face}.row .nm{grid-area:name}.row .tag{grid-area:tag}.row .price{grid-area:price}
.row:last-child{border-bottom:0}
.row .tag{min-width:0}.row .tag p{margin:0;max-width:none}
.row:hover .nm{color:var(--accent)}
.mood{flex:0 0 auto;width:48px;height:48px;background:#fff url(/assets/art/brutal.png) no-repeat;
  background-size:576px 528px;border:var(--u) solid #ababab}
.mood.shot{width:120px;height:auto;background:none;image-rendering:auto;display:block}
.mood.shot.px{image-rendering:pixelated}

/* ---- the panel: stage (sticky) beside modules. On phones the panel is a
   block and the stage's wrapper dissolves (display:contents), so the sticky
   containing block is the whole tall panel in every browser — Safari scopes a
   grid item's sticky range to its own row, which is why it scrolled away. ---- */
.panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,11fr);gap:calc(var(--u)*8);align-items:stretch}
.stage{position:sticky;top:var(--barh);height:calc(100vh - var(--barh));display:flex;align-items:center;justify-content:center}
.device{display:flex;flex-direction:column;gap:calc(var(--u)*3);align-items:center}
.well{background:#fff;border:var(--u) solid #ababab;padding:calc(var(--u)*3);line-height:0;cursor:pointer;user-select:none;-webkit-user-select:none}
.frame{display:block;--z:5;width:calc(48px * var(--z));height:calc(48px * var(--z));
  background:url(/assets/art/brutal.png) no-repeat;background-size:calc(576px * var(--z)) calc(528px * var(--z))}
.sframe{display:block;--z:3;width:calc(32px * var(--z));height:calc(32px * var(--z));
  background:url(/assets/art/size.png) no-repeat;background-size:calc(256px * var(--z)) calc(224px * var(--z))}
.rd{height:21px;width:96px;overflow:hidden}
.rd svg{transition:none}
.lbl{display:flex;gap:calc(var(--u)*3);align-items:center}
.lbl .l2{display:none}
.lbl.sz .lr{display:flex;gap:calc(var(--u)*3);align-items:center}
.well.sm{cursor:default;padding:calc(var(--u)*2)}

.strip{display:flex;gap:calc(var(--u)*4);align-items:center;border-top:var(--u) solid var(--ink);padding-top:calc(var(--u)*3);margin-top:calc(var(--u)*2)}
.mods{padding:calc(var(--u)*6) 0;min-width:0}
.hero{padding:calc(var(--u)*8) 0 calc(var(--u)*4)}
.hero .big{margin-bottom:calc(var(--u)*3)}
.tw{overflow-wrap:anywhere}

@media(max-width:860px){
  /* no room to centre in at this width; same specificity as the auto-margin
     rule above or it wins here too and the boxes collapse together */
  .panel.landing.textonly .mod:not(.narrow){margin-top:0;margin-bottom:calc(var(--u)*8)}
  /* phones: the sprite and the MEANWHILE box ride 9px higher. The contact
     box keeps its place, so the MEANWHILE box gives that 9px back below. */
  .hahaloop{width:96px;height:45px;background-size:192px 192px;margin:calc(var(--u)*8) auto calc(var(--u)*2)}
  .panel.landing.textonly .hero{padding-bottom:calc(var(--u)*9)}

  @keyframes hahaloop{0%{background-position:0 -27px}33.333%{background-position:-96px -27px}66.666%{background-position:0 -123px}100%{background-position:0 -27px}}
  .wrap{padding:0 14px}
  .menu{left:14px;right:14px}
  .panel{display:block}
  .stagecol{display:contents}
  /* the stage becomes a band: face left, readouts right */
  .stage{height:auto;background:var(--paper);z-index:2;border-bottom:var(--u) solid var(--ink);
    padding:calc(var(--u)*3) 0;justify-content:flex-start}
  .device{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:calc(var(--u)*4);width:100%}
  .hint{flex-basis:100%}
  .frame{--z:3}
  .sframe{--z:2}
  .well{padding:calc(var(--u)*2)}
  .device{align-items:flex-start}
  .side{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u)*3);min-width:0;flex:1 1 0;align-self:stretch}
  .lbl .l3{display:none}.lbl .l2{display:block}
  .lbl{gap:calc(var(--u)*2)}
  .lbl.sz .lr{flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1)}

  .hero{padding:calc(var(--u)*5) 0 calc(var(--u)*3)}
  .panel.landing .stage{position:static;border-bottom:0;justify-content:center;padding:calc(var(--u)*6) 0 calc(var(--u)*2)}
  .panel.landing .device{width:auto;justify-content:center}
  .panel.landing .frame{--z:4}
  /* phones: the next size down for the big words, and the page is only as tall as its content */
  .rt>.rt-d{display:none}.rt>.rt-m{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
  .px{font-size:calc(var(--um,var(--ud))*7);line-height:calc(var(--um,var(--ud))*7)}
  .px.tw{line-height:calc(var(--um,var(--ud))*9);margin:calc(var(--um,var(--ud))*-1) 0}
  body.landing,body.landing .panel.landing{min-height:0}
  body.landing .hero{padding:calc(var(--u)*4) 0 calc(var(--u)*4)}
  body.landing .hero .big{margin-bottom:calc(var(--u)*2)}
  body.landing footer .strip{padding-bottom:calc(var(--u)*4)}
  .mood.shot{width:80px}   /* narrower thumbs on phones so a nine-letter name fits beside them */
  .hero .big .tw{--g:3px}
  .strip{border-top:0;padding-top:0;margin-top:0}
  body.landing .strip{margin-top:0}
  /* even rhythm on phones too: the page fills the screen and the column
     stretches with it, which it cannot do while the panel is a block */
  body.landing:has(.panel.even){min-height:100vh;min-height:100dvh}
  .panel.landing.textonly.even{display:flex;flex-direction:column}
  .panel.landing.textonly.even .mods{flex:1;padding-bottom:calc(var(--u)*6)}
  /* no rule at this width, so nothing to sit flush against */
  .panel.landing.textonly .mods{padding-bottom:calc(var(--u)*6)}
  body.landing .strip .btn.foot{margin-top:0;padding-top:calc(var(--u)*2)}
  .mods{padding-top:calc(var(--u)*5)}
}
@media(min-width:861px){.side{display:contents}}

/* ---- transitions: an ink sheet masked by a 1-bit pattern. Monotonic, so
   nothing flashes (the first version reversed six times a frame). ---- */
#wipe{position:fixed;inset:0;z-index:99;pointer-events:none;display:none;background:var(--ink);image-rendering:pixelated}
html.wipe-out #wipe,html.wipe-in #wipe{display:block}
.w-bars #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-bars #wipe{animation:bars-cover 480ms linear both}
html.wipe-in.w-bars #wipe{animation:bars-uncover 420ms linear both}
@keyframes bars-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNkYGD4z0BDwMRAY8CCxmdkGAWjYBSMgmEIANQrAQglW2DCAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNkYGD4z0BDwMRAY8CCxmdkGAWjYBSMgmEIANQrAQglW2DCAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAI0lEQVR42mNkYGD4z0BDwMRAYzD0LWAhIM/IMApGwSgYBQwA40MBDMv7fOQAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAI0lEQVR42mNkYGD4z0BDwMRAYzD0LWAhIM/IMApGwSgYBQwA40MBDMv7fOQAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwcBbwEKCWkaGUTAKRgFZAADvVwEQOdL6RQAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwcBbwEKCWkaGUTAKRgFZAADvVwEQOdL6RQAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwagFlAMWCvQyMoyCUUAXAAD4XwEUSNL8PAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwagFlAMWCvQyMoyCUUAXAAD4XwEUSNL8PAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYwMLBQyRxGhlEwaAEA/mMBGA2t0r8AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYwMLBQyRxGhlEwaAEA/mMBGA2t0r8AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYMBwtYaGQuI8OwAQABagEcuSJ+jQAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYMBwtYaGQuI8OwAQABagEcuSJ+jQAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes bars-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYMBwtGAUEAAPwEARd9HxTyAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNkYGD4z0BDwMRAYzBqwagFoxYMBwtGAUEAAPwEARd9HxTyAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFQ8CCUTAKKAcA8KYBEU2a8R4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFQ8CCUTAKKAcA8KYBEU2a8R4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwcBbMApGwSigAwAA3nYBC43nQ/MAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwcBbMApGwSigAwAA3nYBC43nQ/MAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAH0lEQVR42mNkYGD4z0BDwMRAY0BzC0bBKBgFo2AwAADFdAEFk+H8hwAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAH0lEQVR42mNkYGD4z0BDwMRAY0BzC0bBKBgFo2AwAADFdAEFk+H8hwAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-columns #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-columns #wipe{animation:columns-cover 480ms linear both}
html.wipe-in.w-columns #wipe{animation:columns-uncover 420ms linear both}
@keyframes columns-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z4AAjAxUBkwMNAajFoxaMAQt+D8aRKMWkAwAOiYCHTRzIdcAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z4AAjAxUBkwMNAajFoxaMAQt+D8aRKMWkAwAOiYCHTRzIdcAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJ0lEQVR42mNkYGD4z4AbMDJQCJgYaAxGLRi1YNSCUQsotIBxSPgAAAbUAR89zJ+6AAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJ0lEQVR42mNkYGD4z4AbMDJQCJgYaAxGLRi1YNSCUQsotIBxSPgAAAbUAR89zJ+6AAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0A8YGQgETAx0BiMLAsYR4No1IJRC0aqBQAKHQEfVrCN4gAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0A8YGQgETAx0BiMLAsYR4No1IJRC0aqBQAKHQEfVrCN4gAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0A6YCRWIRMDjcHIteD/aBCNWjBqwUiyAAD1UAIdi5RMbwAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJUlEQVR42mNkYGD4z0A6YCRWIRMDjcHIteD/aBCNWjBqwUiyAAD1UAIdi5RMbwAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A5YMQlwcRAYzBqwagFoxaMWkBHC/4PmA8Af4wCHRaRGdIAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A5YMQlwcRAYzBqwagFoxaMWkBHC/4PmA8Af4wCHRaRGdIAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNkYGD4z0B9wAhjMDHQGIxaMGrBCLWAcTSIRpgFAAfoAR/MAFPBAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNkYGD4z0B9wAhjMDHQGIxaMGrBCLWAcTSIRpgFAAfoAR/MAFPBAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes columns-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A9wIguwMRAYzBqwagFoxaMWoAJ/g+/IAIA2CsCHXggxKkAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A9wIguwMRAYzBqwagFoxaMWoAJ/g+/IAIA2CsCHXggxKkAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A+YCSkgImBxmDUgqFtAeNoEI1aMGoBcQAACTsBH80gpp4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z0A+YCSkgImBxmDUgqFtAeNoEI1aMGoBcQAACTsBH80gpp4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJ0lEQVR42mNkYGD4z0AYMDKQCZgYaAxGLRg6FvwfDaJRC0YtIB8AAEQSAh0To8R3AAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJ0lEQVR42mNkYGD4z0AYMDKQCZgYaAxGLRg6FvwfDaJRC0YtIB8AAEQSAh0To8R3AAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z4AJGBmoBJgYaAxGLRi1YNSC4WoB42gQIQMAB0UBHzst1LgAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNkYGD4z4AJGBmoBJgYaAxGLRi1YNSC4WoB42gQIQMAB0UBHzst1LgAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-checker #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-checker #wipe{animation:checker-cover 480ms linear both}
html.wipe-in.w-checker #wipe{animation:checker-uncover 420ms linear both}
@keyframes checker-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNgYGD4zwABtKJpavh/hmHtg1EwCkbBKIACAKCjMs4HmE/dAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIUlEQVR42mNgYGD4zwABtKJpavh/hmHtg1EwCkbBKIACAKCjMs4HmE/dAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAI0lEQVR42mNgYGD4zwABtKJpavh/hlEfjPpgQH0wCkYBnQAA2aNmmj3M/74AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAI0lEQVR42mNgYGD4zwABtKJpavh/hlEfjPpgQH0wCkYBnQAA2aNmmj3M/74AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNgYGD4zwABtKJpavh/hlEfjPpg1AejPsDt4uEDADTXmWf47TMeAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNgYGD4zwABtKJpavh/hlEfjPpg1AejPsDt4uEDADTXmWf47TMeAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0BDwMRAY4DLAkYq0/Bgogn9n8aWjPpg1AejPhjyPgAASPCQf2FTBr0AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0BDwMRAY4DLAkYq0/Bgogn9n8aWjPpg1AejPhjyPgAASPCQf2FTBr0AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAK0lEQVR42mNkYGD4z0BDwMRAYzBqwdCzgJFMGp5UaUL/p7Eloz4Y9QGFNABivmC0Fb4YHQAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAK0lEQVR42mNkYGD4z0BDwMRAYzBqwdCzgJFMGp5UaUL/p7Eloz4Y9QGFNABivmC0Fb4YHQAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxZQ3wJGHDS8uKAJ/Z/GlgxxHwAA86cw6AuzJegAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxZQ3wJGHDS8uKAJ/Z/GlgxxHwAA86cw6AuzJegAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes checker-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNkYGD4z0BDwMRAYzBqwagFQ8ACGPhPS/o/jS0Z9cEA+wAAEAhIyckpJ74AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNkYGD4z0BDwMRAYzBqwagFQ8ACGPhPS/o/jS0Z9cEA+wAAEAhIyckpJ74AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNkYGD4z0BDwMRAY0BzC2DgPy3p/zS2ZNQHoz4Y9cGQ9wEAGgaQdcLI708AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNkYGD4z0BDwMRAY0BzC2DgPy3p/zS2ZNQHoz4Y9cGQ9wEAGgaQdcLI708AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNgYGD4zwABtKJpavh/hlEfjPpg1AfDxAejAC8AAHAPj3GTA7KzAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJElEQVR42mNgYGD4zwABtKJpavh/hlEfjPpg1AfDxAejAC8AAHAPj3GTA7KzAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIklEQVR42mNgYGD4zwABtKJpavh/hlEfDAofjIJRMApoDADFxke5pwEn6wAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIklEQVR42mNgYGD4zwABtKJpavh/hlEfDAofjIJRMApoDADFxke5pwEn6wAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-diamond #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-diamond #wipe{animation:diamond-cover 480ms linear both}
html.wipe-in.w-diamond #wipe{animation:diamond-uncover 420ms linear both}
@keyframes diamond-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAQ0lEQVR42u2TwRUAIAhChf13phEysFNx1y/wrHpNOh3gbQjNxZoGyHXCMBKlAKWd7ABoAJBGhOSAbskw3Vk/oPqa1AIWAwwLmqhdqgAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAQ0lEQVR42u2TwRUAIAhChf13phEysFNx1y/wrHpNOh3gbQjNxZoGyHXCMBKlAKWd7ABoAJBGhOSAbskw3Vk/oPqa1AIWAwwLmqhdqgAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVklEQVR42rWUMQ4AIAwCgf//GRdHh7bUS0ycuIYagR6+p4ya4a/7isAYIszxlsCJRAtTeirwRl1aXKo7Ag4E7FbENLyyZCbh1WfKZAAFFRAfcPJtfOEAz7wQEzRM19gAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVklEQVR42rWUMQ4AIAwCgf//GRdHh7bUS0ycuIYagR6+p4ya4a/7isAYIszxlsCJRAtTeirwRl1aXKo7Ag4E7FbENLyyZCbh1WfKZAAFFRAfcPJtfOEAz7wQEzRM19gAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rWTSQ4AIAgDLf//c70bdpCbmk4JVJx88TkjI5Im3LprGbD5ljLgsAHXgIP9hAYVuKuRJbiplUW4ypBOtoNCNCJswb0lYwMexRRTeOajYQKvdskPgVBNSlG+SvASFQT9kpgAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rWTSQ4AIAgDLf//c70bdpCbmk4JVJx88TkjI5Im3LprGbD5ljLgsAHXgIP9hAYVuKuRJbiplUW4ypBOtoNCNCJswb0lYwMexRRTeOajYQKvdskPgVBNSlG+SvASFQT9kpgAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rXUMQ4AIAgDQNv//1lno1AilRU4HEAMHVPkkSXZxGUNm7ispQFPe2jCw14a8atBM35Y/IBvQ1jZ5cdABE8HnG0RXHh2B3Dg6pLRxSt/ETp4ZYAC5AMWjbEQG4g0EKMAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rXUMQ4AIAgDQNv//1lno1AilRU4HEAMHVPkkSXZxGUNm7ispQFPe2jCw14a8atBM35Y/IBvQ1jZ5cdABE8HnG0RXHh2B3Dg6pLRxSt/ETp4ZYAC5AMWjbEQG4g0EKMAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rXTMQ7AIAxDUdv3v3M6dakS2oqPR6Q8gXCsOaV/cXcYCB9nAuHjbEC8NQLjn/8Ae0UO3r7uapUOJlN/oTirJdnFn59sGu9aZBKfamoKX+2BCfxt0byLS9IFN8wMIDdVm8AAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rXTMQ7AIAxDUdv3v3M6dakS2oqPR6Q8gXCsOaV/cXcYCB9nAuHjbEC8NQLjn/8Ae0UO3r7uapUOJlN/oTirJdnFn59sGu9aZBKfamoKX+2BCfxt0byLS9IFN8wMIDdVm8AAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAUUlEQVR42u3TMQ4AIAgDwLb//7OuKpCYWDbZWK6RRiLOwNtwXWTGgyEzHiw14FuImvCyA/srugPwA64C2OhT2fd24eeJ6MazDujEq5LpwgFgAtCOCSCxL34hAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAUUlEQVR42u3TMQ4AIAgDwLb//7OuKpCYWDbZWK6RRiLOwNtwXWTGgyEzHiw14FuImvCyA/srugPwA64C2OhT2fd24eeJ6MazDujEq5LpwgFgAtCOCSCxL34hAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes diamond-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVUlEQVR42u3TMQ4AIQwDQa///2eoDwIFcrpLicRYwgHVM/Q2rAcO4uVdB/HScBjfLDfgnxCa8GvJf8AWQKOPTz8wga9PRBqvOiCJn0omhd+2iAQuSRPwCQoge/npMAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVUlEQVR42u3TMQ4AIQwDQa///2eoDwIFcrpLicRYwgHVM/Q2rAcO4uVdB/HScBjfLDfgnxCa8GvJf8AWQKOPTz8wga9PRBqvOiCJn0omhd+2iAQuSRPwCQoge/npMAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rXUyREAIAgDQJP+e9a3F1GJfIF1RlAUHVXkESWZxGUNk7ispQEPe2jCt7004kuDZnyy+AHvDuHJLj8GxiuCG18NGU58t6Zw4dFDgwNXXwWy+A1SX/sbmmoQGynw8IUAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rXUyREAIAgDQJP+e9a3F1GJfIF1RlAUHVXkESWZxGUNk7ispQEPe2jCt7004kuDZnyy+AHvDuHJLj8GxiuCG18NGU58t6Zw4dFDgwNXXwWy+A1SX/sbmmoQGynw8IUAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAYElEQVR42rWT2xIAIQhCg///Z/Z9pwuJ+VbGwTHF8EO/MxwRi/DVXclAxZxloLCArYGC/zka3MC3GjbBl1o2wqcMNLZoyqP7sAI/TRFSuLMHSODuJiMpgEELMB6EbifsAz43EhU3IDT7AAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAYElEQVR42rWT2xIAIQhCg///Z/Z9pwuJ+VbGwTHF8EO/MxwRi/DVXclAxZxloLCArYGC/zka3MC3GjbBl1o2wqcMNLZoyqP7sAI/TRFSuLMHSODuJiMpgEELMB6EbifsAz43EhU3IDT7AAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAATElEQVR42mNgGGngPxQTDZhINBwbmyoW/CdSjCwL/pMpR5QF/yl0AF4L/pMZP0RbwEiCBYzkBhEjJYYTG8mMlDiAiYIgYBwUOXnoAwBm1A4NTw6eAwAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAATElEQVR42mNgGGngPxQTDZhINBwbmyoW/CdSjCwL/pMpR5QF/yl0AF4L/pMZP0RbwEiCBYzkBhEjJYYTG8mMlDiAiYIgYBwUOXnoAwBm1A4NTw6eAwAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-corners #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-corners #wipe{animation:corners-cover 480ms linear both}
html.wipe-in.w-corners #wipe{animation:corners-uncover 420ms linear both}
@keyframes corners-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAASElEQVR42u2UOw4AIAhDS+9/5zo5GIiD0M239xE+IQAImcAbycVB+c7GrUBHXnpokCef8Pl0sV4RzUVEYyeqXoWmx07DTo78Ake+DAzBKUw2AAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAASElEQVR42u2UOw4AIAhDS+9/5zo5GIiD0M239xE+IQAImcAbycVB+c7GrUBHXnpokCef8Pl0sV4RzUVEYyeqXoWmx07DTo78Ake+DAzBKUw2AAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAWUlEQVR42tWUwQ7AMAhCkf//Z3pdsta0GxzKWZ5BjQVAWKuwpyWDBnhbSwO89dAEf3qra/AHPuUwAH/xhNsVTcBwEzGYRLMzlXvsDOxEO69CH8E6eXZyXOIAbsYRE7ckTxMAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAWUlEQVR42tWUwQ7AMAhCkf//Z3pdsta0GxzKWZ5BjQVAWKuwpyWDBnhbSwO89dAEf3qra/AHPuUwAH/xhNsVTcBwEzGYRLMzlXvsDOxEO69CH8E6eXZyXOIAbsYRE7ckTxMAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rWUURIAIQhCkfvfmb53tqhJ4ld5OmYWAMGrNnHrJ/qqToHqFmEAbvMZgi99DMKnfobhPw4fwD88nu7zhTQbkZLw1SMrBXdrqgR899HUhadukW2GnUt5kjMAT64PHcJ1flYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rWUURIAIQhCkfvfmb53tqhJ4ld5OmYWAMGrNnHrJ/qqToHqFmEAbvMZgi99DMKnfobhPw4fwD88nu7zhTQbkZLw1SMrBXdrqgR899HUhadukW2GnUt5kjMAT64PHcJ1flYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXklEQVR42rVRyREAIQwK9N8z/neiMsHNTyOHgKpSeYPP2cJxSL67GwlguLMEEBo4CqD8QdrBWIQP3B9xfEje4jsBhQL6q4PWHN2HE/LbD5SSOxEpIXc7UGKAQQRWhAveiA8d8xuvqwAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXklEQVR42rVRyREAIQwK9N8z/neiMsHNTyOHgKpSeYPP2cJxSL67GwlguLMEEBo4CqD8QdrBWIQP3B9xfEje4jsBhQL6q4PWHN2HE/LbD5SSOxEpIXc7UGKAQQRWhAveiA8d8xuvqwAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rWUwQoAIAhDnf//z+vSVVpOgyDM9qqViAjGYsvPfNy+AkAxHgFAjLUAaM5JALi+pCn+zM8h8XJdBej+Df5cEV1xxWSKwnSeKZ0NpHF8TpcKdvzBdjU9OHIPHU5yXrYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAXElEQVR42rWUwQoAIAhDnf//z+vSVVpOgyDM9qqViAjGYsvPfNy+AkAxHgFAjLUAaM5JALi+pCn+zM8h8XJdBej+Df5cEV1xxWSKwnSeKZ0NpHF8TpcKdvzBdjU9OHIPHU5yXrYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAU0lEQVR42mNkYGD4z0BDwMRAYzDoLGCEYppYwIiDTRULGIkUI8sCRjLliLKAkdJ4IWQBMXnkPz51TEQaQLYDiI3k/2T6jqRk+p9Uw2ERNFoW4QUArqALHbfnpFIAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAU0lEQVR42mNkYGD4z0BDwMRAYzDoLGCEYppYwIiDTRULGIkUI8sCRjLliLKAkdJ4IWQBMXnkPz51TEQaQLYDiI3k/2T6jqRk+p9Uw2ERNFoW4QUArqALHbfnpFIAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes corners-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVUlEQVR42tWUMQoAMAgDk/7/z+nStUWjDhUEUfDEoAQgDNrCsGUBPD4C4CVuATCYswA0ayEAiwM8ATT1CQMy9yF3Rao0j4qsygCrsAJ1H5ocffj9s9vYhgwdxUyz4wAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAVUlEQVR42tWUMQoAMAgDk/7/z+nStUWjDhUEUfDEoAQgDNrCsGUBPD4C4CVuATCYswA0ayEAiwM8ATT1CQMy9yF3Rao0j4qsygCrsAJ1H5ocffj9s9vYhgwdxUyz4wAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42q2USxZAIQhClf3vmaYNfC8KGpXKpWOfriqWPnqbSzo8wqe1ZdCX8SuDdvIw4cc6BOC/9QjBP3UIwkf9ZEDTgEqLmICfDpkuXLmmdODqQ6OTh7lDJj+7p/YtxVsPHtldHOYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42q2USxZAIQhClf3vmaYNfC8KGpXKpWOfriqWPnqbSzo8wqe1ZdCX8SuDdvIw4cc6BOC/9QjBP3UIwkf9ZEDTgEqLmICfDpkuXLmmdODqQ6OTh7lDJj+7p/YtxVsPHtldHOYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rXTMRIAIQgDwJD//zl2VyE4R6BVlkEkAAh1RHNe5nOIt3c4xNu7NOBlDk34NZdGPDWInYisQGwU2erg2w++LswfPOtATvz2RHLh1QzkwLsha4q//CJNcAA4bloPHfnTfI0AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAX0lEQVR42rXTMRIAIQgDwJD//zl2VyE4R6BVlkEkAAh1RHNe5nOIt3c4xNu7NOBlDk34NZdGPDWInYisQGwU2erg2w++LswfPOtATvz2RHLh1QzkwLsha4q//CJNcAA4bloPHfnTfI0AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAATElEQVR42u2UMQ4AMAgCKf//M32ADG0C6VJ2zijqAiB4LdxrsBiEWx+DcOtnGD44LMAHT/h6rWoGLBcRi53IHZrSY2chE508O6UWZgO1lQ4Prai0eAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAATElEQVR42u2UMQ4AMAgCKf//M32ADG0C6VJ2zijqAiB4LdxrsBiEWx+DcOtnGD44LMAHT/h6rWoGLBcRi53IHZrSY2chE508O6UWZgO1lQ4Prai0eAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-bayer #wipe{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=)}
html.wipe-out.w-bayer #wipe{animation:bayer-cover 480ms linear both}
html.wipe-in.w-bayer #wipe{animation:bayer-uncover 420ms linear both}
@keyframes bayer-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNgYGD4zwABpNIMRPLpB/7TmD/q8tE4GI2DUZcPmE8Arl4yzgElsLYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNgYGD4zwABpNIMRPLpB/7TmD/q8tE4GI2DUZcPmE8Arl4yzgElsLYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNgYGD4zwABtKIxOdTm08UHNAUDEgdDzwcMoz4Y9cEI9gEAWidmmhMw3FQAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAKUlEQVR42mNgYGD4zwABtKIxOdTm08UHNAUDEgdDzwcMoz4Y9cEI9gEAWidmmhMw3FQAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMUlEQVR42mNgYGD4zwABtKJpavh/Bnr5gAGHIFX4o3EwGgdkBQf9Inj4xQFN+DT1AQCjxZln9RiqzAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMUlEQVR42mNgYGD4zwABtKJpavh/Bnr5gAGHIFX4o3EwGgdkBQf9Inj4xQFN+DT1AQCjxZln9RiqzAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMUlEQVR42mNkYGD4z4AAjDTgMzAgCdKERub8J8Anh6atDxiHXRzQgh6Ng9E4GPFxAAAAj51/2x6pFgAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMUlEQVR42mNkYGD4z4AAjDTgMzAgCdKERub8J8Anh6atDxiHXRzQgh6Ng9E4GPFxAAAAj51/2x6pFgAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0AH8J9WNCONfIBh7pDzAf3jAN0n1OaPxsFoHIzoOAAA3NRurYL46MEAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALElEQVR42mNkYGD4z0AH8J9WNCONfIBh7pDzAf3jAN0n1OaPxsFoHIzoOAAA3NRurYL46MEAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAANElEQVR42mNkYGD4z0BDwITEZkSTowqfkR4+oInLkTmjcUCzOCCKHo0DosF/WtGjcUAQAAB3SxQoOQ+PdAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAANElEQVR42mNkYGD4z0BDwITEZkSTowqfkR4+oInLkTmjcUCzOCCKHo0DosF/WtGjcUAQAAB3SxQoOQ+PdAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
@keyframes bayer-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAIElEQVR42mNkYGD4z0BDwMRAYzBqwagFoxaMWjAiLAAAAJ8BHZ2np3EAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALklEQVR42mNkYGD4z0BDwITEZkSTowqfkdY+gIH/tKIZR+Ng+MfBqA9GfUA5AABAAkPVFW7J5AAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALklEQVR42mNkYGD4z0BDwITEZkSTowqfkdY+gIH/tKIZR+Ng+MfBqA9GfUA5AABAAkPVFW7J5AAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMklEQVR42mNkYGD4z4AAjDTgMzAgCVKdhtnISGOf0N4Ho3EwGgeU0f9pbMloHAxwHAAAFxqRmRnBYr8AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAMklEQVR42mNkYGD4z4AAjDTgMzAgCVKdhtnISGOf0N4Ho3EwGgeU0f9pbMloHAxwHAAAFxqRmRnBYr8AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALklEQVR42mNgYGD4zwABtKJpavh/Bnr5gAGHIFX4dI0DmvBH42A0DkbjgMY+AADb549xjICJyAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAALklEQVR42mNgYGD4zwABtKJpavh/Bnr5gAGHIFX4dI0DmvBH42A0DkbjgMY+AADb549xjICJyAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNgYGD4zwABtKLpB/7TmE97l4/GwWgcjMbBaBzg4AMAtKNHuaccz2AAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAJklEQVR42mNgYGD4zwABtKLpB/7TmE97l4/GwWgcjMbBaBzg4AMAtKNHuaccz2AAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAPCAYAAAD+pA/bAAAAFElEQVR42mNgGAWjYBSMglEwBAAABa8AAbqzMR4AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
.w-texture #wipe{-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:192px 192px;mask-size:192px 192px;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAH0lEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAALwYkMAABdG+8JQAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAH0lEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAALwYkMAABdG+8JQAAAABJRU5ErkJggg==)}
html.wipe-out.w-texture #wipe{animation:texture-cover 480ms linear both}
html.wipe-in.w-texture #wipe{animation:texture-uncover 420ms linear both}
@keyframes texture-cover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAH0lEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAALwYkMAABdG+8JQAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAH0lEQVR42u3BAQEAAACCIP+vbkhAAQAAAAAAAAAALwYkMAABdG+8JQAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
14.286%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAYUlEQVR42u3ZMQqAMBBFwb/i/a+8doIgaJEgkZkyYPEgRNitJJ2ryrO+OXvz3Wi9ZXECBAgQ8K195Js8+d/QrpAAAQAAAACQc/g6askXw92YjQrIyhua2Zv6sqkXIOCHAQdJxgkx3eZ+5gAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAYUlEQVR42u3ZMQqAMBBFwb/i/a+8doIgaJEgkZkyYPEgRNitJJ2ryrO+OXvz3Wi9ZXECBAgQ8K195Js8+d/QrpAAAQAAAACQc/g6askXw92YjQrIyhua2Zv6sqkXIOCHAQdJxgkx3eZ+5gAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
28.571%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAh0lEQVR42u2aQQ6AIAwEu8b/f7levaCIRSnMHIkhmbRsClFWxgvrevC9rDObJQcBBFYX2C/SJoLavdW6Ly2EAAITpFDU3KLAVFqzAn/iN9V0DjECCEwqAAAAkBqdRlXZ92Nz7eWIcRoBBLjU90/DplSihUZqobdv+U4FEEBgrPzlVwNaCIEEHJzzEFPkkHqqAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAh0lEQVR42u2aQQ6AIAwEu8b/f7levaCIRSnMHIkhmbRsClFWxgvrevC9rDObJQcBBFYX2C/SJoLavdW6Ly2EAAITpFDU3KLAVFqzAn/iN9V0DjECCEwqAAAAkBqdRlXZ92Nz7eWIcRoBBLjU90/DplSihUZqobdv+U4FEEBgrPzlVwNaCIEEHJzzEFPkkHqqAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
42.857%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAhklEQVR42u3aYQqAMAiGYb/o/ld2JwhGOmvz9WcE7WHTUpLFwh+uK3jvdFy2eQAA0B1wv6gw2TH7HHGEAABoVoWyv1uUXJXO2QHfZK1OEgMAAAAAgNYAFa1JqwB/azHJAQAAAAAAcEZTr4/fvMZwt9NkLjLLd3YAAIDaJFZRl8avBgAABGIAyCwNa/VLVOUAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAhklEQVR42u3aYQqAMAiGYb/o/ld2JwhGOmvz9WcE7WHTUpLFwh+uK3jvdFy2eQAA0B1wv6gw2TH7HHGEAABoVoWyv1uUXJXO2QHfZK1OEgMAAAAAgNYAFa1JqwB/azHJAQAAAAAAcEZTr4/fvMZwt9NkLjLLd3YAAIDaJFZRl8avBgAABGIAyCwNa/VLVOUAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
57.143%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAwUlEQVR42u2awQ7DIAxD44n//+XsPKnaCgRSsudjKVQWdhJSZGZu96GLZz3zw/GywwGBbLQv+p7R9q+1Rr51Oad1GnbmPSRU3gOZEBI6FRoMYRZYUvTIxzHxAvjfh1FtKokVXIKrTBSyhB2wgGLuwwNKzrTD42RiCNzzgLMDEIAABCBAJi5NYHU16qvGW+DB2xcfI73sgSa7rUJv9KS+qJduLWpjGFXUmmRiTBzUF0JCT5SQT9yV2PbrVVz2wANzeANuzyJqHGDdHAAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAwUlEQVR42u2awQ7DIAxD44n//+XsPKnaCgRSsudjKVQWdhJSZGZu96GLZz3zw/GywwGBbLQv+p7R9q+1Rr51Oad1GnbmPSRU3gOZEBI6FRoMYRZYUvTIxzHxAvjfh1FtKokVXIKrTBSyhB2wgGLuwwNKzrTD42RiCNzzgLMDEIAABCBAJi5NYHU16qvGW+DB2xcfI73sgSa7rUJv9KS+qJduLWpjGFXUmmRiTBzUF0JCT5SQT9yV2PbrVVz2wANzeANuzyJqHGDdHAAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
71.429%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA1ElEQVR42u1ZwQ6FIAyjL/z/L9fLOxmNAgM31l08uGDG2lEqSiksgaP+n7h4dy7sTU5rDH/3V4JHbcjlxY7gIfcpb7iT4TsQvgB0tLIVNpbDACMcwKKNpDiw+xgdDaoDJ/Jw4Vqw7kCdMRlWjnZNIS8cwMrJYXBgcisI4WMZkZsDW0gJOoQQBSEVoAJUQExXwoMeyqeFwhdAR/DJa6vQQP/MutSz91L/FWxkLW5vr7euzZmHXCpz18p6gUi8szNHa7U4CX684wAc6h+IA1n+0KgDPXEAH8YuYzfcCuwAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA1ElEQVR42u1ZwQ6FIAyjL/z/L9fLOxmNAgM31l08uGDG2lEqSiksgaP+n7h4dy7sTU5rDH/3V4JHbcjlxY7gIfcpb7iT4TsQvgB0tLIVNpbDACMcwKKNpDiw+xgdDaoDJ/Jw4Vqw7kCdMRlWjnZNIS8cwMrJYXBgcisI4WMZkZsDW0gJOoQQBSEVoAJUQExXwoMeyqeFwhdAR/DJa6vQQP/MutSz91L/FWxkLW5vr7euzZmHXCpz18p6gUi8szNHa7U4CX684wAc6h+IA1n+0KgDPXEAH8YuYzfcCuwAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
85.714%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAj0lEQVR42u3awQ5AQAxF0ffE//9yLVhZCNOZjHK7RZqTtozBkkKS9Tzi4pgbzmvKu95IMjLSeRcVj/IAJ8roRBuYFjoNcbWuYYgBAOhwG2WIaaEDYCoAAACLuWlvc7QQAAAAAAAAAOCnayHTQgAA7ICgAgDmAJzYFMtcy5NYb9iNYAYAABj7ick9f+j4dAU2/JIPZlyXTM8AAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAj0lEQVR42u3awQ5AQAxF0ffE//9yLVhZCNOZjHK7RZqTtozBkkKS9Tzi4pgbzmvKu95IMjLSeRcVj/IAJ8roRBuYFjoNcbWuYYgBAOhwG2WIaaEDYCoAAACLuWlvc7QQAAAAAAAAAOCnayHTQgAA7ICgAgDmAJzYFMtcy5NYb9iNYAYAABj7ick9f+j4dAU2/JIPZlyXTM8AAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3PAQkAIBAAsdP+nd8WwsPWYKeaFrstJyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIPDPA/d6AV9EfcqiAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3PAQkAIBAAsdP+nd8WwsPWYKeaFrstJyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIPDPA/d6AV9EfcqiAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
}
@keyframes texture-uncover{
0.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3PAQkAIBAAsdP+nd8WwsPWYKeaFrstJyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIPDPA/d6AV9EfcqiAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3PAQkAIBAAsdP+nd8WwsPWYKeaFrstJyAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIPDPA/d6AV9EfcqiAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
20.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAWUlEQVR42u3YQQrAIAwAwcT//zk+IYiCCrNXS3WI9NAISdJG2azXwjtqcc86cc7x+wQAAAB8Ru+e0xUCAAAAAAAAAAAAAAAAAAD4F5DR/57Zed4EACRJzzYBToEER28c6uYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAWUlEQVR42u3YQQrAIAwAwcT//zk+IYiCCrNXS3WI9NAISdJG2azXwjtqcc86cc7x+wQAAAB8Ru+e0xUCAAAAAAAAAAAAAAAAAAD4F5DR/57Zed4EACRJzzYBToEER28c6uYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
40.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAATklEQVR42u3XSQ4AEBAAweH/fx4/ILEcUHUVS2dOIgAAuFaZ3Jed83JwX+58T719AgJeC8jFdRMQIECAAAECBAgQ8HFAiTNfWBMAAID9Gk4GBSwCRPvAAAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAATklEQVR42u3XSQ4AEBAAweH/fx4/ILEcUHUVS2dOIgAAuFaZ3Jed83JwX+58T719AgJeC8jFdRMQIECAAAECBAgQ8HFAiTNfWBMAAID9Gk4GBSwCRPvAAAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
60.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3SwQkAIAwEwcT+e44N+PARhMhMAZHljAAAABgqm+7U4W69eH9NX0DA5ZeygAABAgQIGBWQFgAAAPjdBuz+Axy8/Cb9AAAAAElFTkSuQmCC);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3SwQkAIAwEwcT+e44N+PARhMhMAZHljAAAABgqm+7U4W69eH9NX0DA5ZeygAABAgQIGBWQFgAAAPjdBuz+Axy8/Cb9AAAAAElFTkSuQmCC);animation-timing-function:steps(1,end)}
80.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAARklEQVR42u3VMQoAIAwAser//1xXcRFFQSHZXFqODkYAAADAlnJ4XnZzc9iTN/bW3y9wKyAn73ABAQIECFj5IEsAAADAWxrwNgUUv2g9GwAAAABJRU5ErkJggg==);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAARklEQVR42u3VMQoAIAwAser//1xXcRFFQSHZXFqODkYAAADAlnJ4XnZzc9iTN/bW3y9wKyAn73ABAQIECFj5IEsAAADAWxrwNgUUv2g9GwAAAABJRU5ErkJggg==);animation-timing-function:steps(1,end)}
100.000%{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAALElEQVR42u3SoREAAAgDse6/NBgmQEJyV1X7CQAAAMAFNdv+SEhCAAAAwA8NT+wH+bULpGYAAAAASUVORK5CYII=);mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAALElEQVR42u3SoREAAAgDse6/NBgmQEJyV1X7CQAAAMAFNdv+SEhCAAAAwA8NT+wH+bULpGYAAAAASUVORK5CYII=);animation-timing-function:steps(1,end)}
}
/* the Co-Operator link leaves on a clean wipe: no mask, no dither -- a
   solid edge crossing the screen, and out the far side on arrival. */
html.wipe-out.w-sweep #wipe{-webkit-mask:none;mask:none;animation:sweep-cover 480ms ease-in-out both}
html.wipe-in.w-sweep #wipe{-webkit-mask:none;mask:none;animation:sweep-uncover 420ms ease-in-out both}
@keyframes sweep-cover{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes sweep-uncover{from{transform:translateX(0)}to{transform:translateX(100%)}}
.spr-wave{width:calc(64px * var(--s));height:calc(64px * var(--s));background:url(/assets/sprites/wave.png) 0 0/calc(512px * var(--s)) calc(64px * var(--s)) no-repeat;animation:sp-wave 0.8s steps(8) infinite;animation-play-state:paused}
html.moving .spr-wave{animation-play-state:running}
@keyframes sp-wave{to{background-position:-calc(512px * var(--s)) 0}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .spr-wave{background-image:url(/assets/sprites/wave-dark.png)}}
:root[data-theme=dark] .spr-wave{background-image:url(/assets/sprites/wave-dark.png)}
.spr-texture{width:calc(48px * var(--s));height:calc(48px * var(--s));background:var(--ink);-webkit-mask:url(/assets/sprites/texture.png) 0 0/calc(2496px * var(--s)) calc(48px * var(--s)) no-repeat;mask:url(/assets/sprites/texture.png) 0 0/calc(2496px * var(--s)) calc(48px * var(--s)) no-repeat}
@keyframes sp-texture{to{-webkit-mask-position:calc(-2496px * var(--s)) 0;mask-position:calc(-2496px * var(--s)) 0}}
@supports (animation-timeline:scroll()){.spr-texture{animation-name:sp-texture;animation-duration:auto;animation-timing-function:steps(52);animation-fill-mode:both;animation-timeline:scroll(root block)}}
@media(prefers-reduced-motion:reduce){#wipe{display:none!important}.spr{animation:none!important}}