:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #4433A6;--wp--preset--color--contrast: #79F3B1;--wp--preset--color--accent-1: #5644BC;--wp--preset--color--accent-2: #372696;--wp--preset--color--accent-3: #251D51;--wp--preset--color--accent-4: #79F3B1;--wp--preset--color--accent-5: #E8B7FF;--wp--preset--color--accent-6: #79F3B133;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1.502rem, 1.502rem + ((1vw - 0.2rem) * 1.565), 2.5rem);--wp--preset--font-size--large: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.176), 2rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.176), 2.5rem);--wp--preset--font-size--xx-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.412), 3.4rem);--wp--preset--font-family--manrope: Manrope, sans-serif;--wp--preset--font-family--fira-code: "Fira Code", monospace;--wp--preset--spacing--20: 10px;--wp--preset--spacing--30: 20px;--wp--preset--spacing--40: 30px;--wp--preset--spacing--50: clamp(30px, 5vw, 50px);--wp--preset--spacing--60: clamp(30px, 7vw, 70px);--wp--preset--spacing--70: clamp(50px, 7vw, 90px);--wp--preset--spacing--80: clamp(70px, 10vw, 140px);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px 0 #ff000000;--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 60px 6px 0px 0 #fbff00;}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:root { --wp--style--global--content-size: 645px;--wp--style--global--wide-size: 1340px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1.52rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1.52rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1.52rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1.52rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1.52rem;}:root :where(.is-layout-grid){gap: 1.52rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-color: var(--wp--preset--color--base);background-image: url('https://zaxxofficial.com/wp-content/uploads/2021/07/foilbyzaxx.jpg');background-size: cover;background-attachment: fixed;color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--manrope);font-size: var(--wp--preset--font-size--medium);font-style: normal;font-weight: 400;letter-spacing: 0px;line-height: 1.5;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 0;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 0;}a:where(:not(.wp-element-button)){color: currentColor;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{font-weight: 400;letter-spacing: -0.1px;line-height: 1.125;}h1{text-align: left;font-size: var(--wp--preset--font-size--xx-large);}h2{font-size: var(--wp--preset--font-size--x-large);}h3{font-size: var(--wp--preset--font-size--large);}h4{font-size: var(--wp--preset--font-size--medium);}h5{font-size: var(--wp--preset--font-size--small);letter-spacing: 0.5px;}h6{font-size: var(--wp--preset--font-size--small);font-weight: 700;letter-spacing: 1.4px;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: inherit;font-size: var(--wp--preset--font-size--medium);font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: 1rem;padding-right: 2.25rem;padding-bottom: 1rem;padding-left: 2.25rem;text-decoration: none;text-transform: inherit;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);border-color: transparent;color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){outline-color: var(--wp--preset--color--accent-4);outline-offset: 2px;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){font-size: var(--wp--preset--font-size--small);line-height: 1.4;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-manrope-font-family{font-family: var(--wp--preset--font-family--manrope) !important;}.has-fira-code-font-family{font-family: var(--wp--preset--font-family--fira-code) !important;}
/* links, nav and blog titles: one readable look (colour at rest, white + underline on hover) */
html body .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content,html body.page-id-107 .wp-block-post-content > p:has(> a) > a{--zxc:#7dff9a;color:var(--zxc) !important;-webkit-text-fill-color:var(--zxc) !important;text-decoration:none;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;filter:none !important;animation:none !important;translate:none !important;text-shadow:-2px 0 0 #140a2e,2px 0 0 #140a2e,0 -2px 0 #140a2e,0 2px 0 #140a2e,-2px -2px 0 #140a2e,2px -2px 0 #140a2e,-2px 2px 0 #140a2e,3px 3px 0 #140a2e !important}
html body .wp-block-navigation .wp-block-navigation-item:nth-child(4n+2) .wp-block-navigation-item__content,html body.page-id-107 .wp-block-post-content > p:nth-child(4n+2):has(> a) > a{--zxc:#ff5fbf}
html body .wp-block-navigation .wp-block-navigation-item:nth-child(4n+3) .wp-block-navigation-item__content,html body.page-id-107 .wp-block-post-content > p:nth-child(4n+3):has(> a) > a{--zxc:#ffffff}
html body .wp-block-navigation .wp-block-navigation-item:nth-child(4n) .wp-block-navigation-item__content,html body.page-id-107 .wp-block-post-content > p:nth-child(4n):has(> a) > a{--zxc:#1fd6a0}
html body .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"]{text-decoration:underline !important;text-decoration-color:var(--zxc) !important;text-decoration-thickness:3px !important;text-underline-offset:5px !important}
html body :is(h1,h2).wp-block-post-title:not(#zx),html body :is(.wp-block-post-title a,.wp-block-post-navigation-link a):not(#zx){--zxc:#79f3b1;color:#79f3b1 !important;-webkit-text-fill-color:#79f3b1 !important;background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;filter:none !important;animation:none !important;translate:none !important;text-shadow:-2px 0 0 #140a2e,2px 0 0 #140a2e,0 -2px 0 #140a2e,0 2px 0 #140a2e,-2px -2px 0 #140a2e,2px -2px 0 #140a2e,-2px 2px 0 #140a2e,3px 3px 0 #140a2e !important}
html body .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:is(:hover,:focus,:focus-visible,:active),html body.page-id-107 .wp-block-post-content > p:has(> a) > a:is(:hover,:focus,:focus-visible,:active),html body :is(.wp-block-post-title a,.wp-block-post-navigation-link a):is(:hover,:focus,:focus-visible,:active):not(#zx){color:#fff !important;-webkit-text-fill-color:#fff !important;text-decoration:underline !important;text-decoration-color:var(--zxc) !important;text-decoration-thickness:3px !important;text-underline-offset:5px !important}
html body .sober-coin__days,html body .zx-sign__text{animation:none !important}
html body .strobe-border .buchla-slime-box{animation-timing-function:steps(60) !important}
.wp-block-navigation__responsive-container.is-menu-open,.wp-block-navigation__responsive-container-content.is-menu-open{-webkit-backdrop-filter:blur(12px) saturate(1.6) !important;backdrop-filter:blur(12px) saturate(1.6) !important}
html body{background-color:#5e7585 !important}
/* blog articles: soft grey text on a dark panel */
html body.single-post .wp-block-post-content{background:rgba(24,20,40,.86);border-radius:14px;padding-block:1.5rem}
html body.single-post .wp-block-post-content :is(p,li,blockquote,figcaption,h1,h2,h3,h4,h5,h6,em,strong,span,cite){color:#c9ccd4 !important;-webkit-text-fill-color:#c9ccd4 !important;background-image:none !important;filter:none !important;animation:none !important;text-shadow:none !important}
html body.single-post .wp-block-post-content :is(p,li,blockquote,figcaption){font-size:clamp(19px,2.2vw,26px) !important;line-height:1.65 !important}
/* blog articles: pro reading column */
html body.single-post .wp-block-post-content{max-width:760px !important;margin-inline:auto !important;padding:2.5rem clamp(1.25rem,4vw,3rem) !important;background:rgba(20,18,32,.9);border:1px solid rgba(201,204,212,.18);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
html body.single-post .wp-block-post-content > *{max-width:none !important;margin-inline:0 !important}
html body.single-post .wp-block-post-content :is(p,li){margin-block:0 1.25em}
html body.single-post .wp-block-post-content :is(h1,h2,h3,h4){color:#e4e6eb !important;-webkit-text-fill-color:#e4e6eb !important;font-weight:600;line-height:1.3;margin-block:1.8em .6em}
html body.single-post .wp-block-post-content a{color:#8fb8ff !important;-webkit-text-fill-color:#8fb8ff !important;background-image:none !important;animation:none !important;filter:none !important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html body.single-post .wp-block-post-content a:hover{color:#bcd4ff !important;-webkit-text-fill-color:#bcd4ff !important}
html body.single-post .wp-block-post-content img{border-radius:6px}
html body.single-post .wp-block-post-content blockquote{border-left:3px solid rgba(201,204,212,.35);padding-left:1.25rem;margin-inline:0}
/* blog articles: no highlight boxes behind text */
html body.single-post .wp-block-post-content :is(p,h1,h2,h3,h4,h5,h6,li,span,mark).has-background,html body.single-post .wp-block-post-content :is(p,h1,h2,h3,h4,h5,h6,li,span,mark)[class*="-background-color"],html body.single-post .wp-block-post-content :is(p,h1,h2,h3,h4,h5,h6,li,span,mark)[style*="background"]{background:none !important;background-color:transparent !important;padding:0 !important}
/* pipes: steady glow instead of colour-cycling */
html body .strobe-border{animation:none !important;box-shadow:0 0 14px 1px rgba(144,238,144,.6)}
/* coin days text: calm and readable */
html body .sober-coin__days{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#eef0f5 !important;-webkit-text-fill-color:#eef0f5 !important;filter:none !important;text-transform:none !important;font-size:clamp(17px,2vw,24px) !important;font-weight:700 !important;letter-spacing:.02em !important;text-shadow:-1.5px 0 0 #140a2e,1.5px 0 0 #140a2e,0 -1.5px 0 #140a2e,0 1.5px 0 #140a2e,-1px -1px 0 #140a2e,1px -1px 0 #140a2e,-1px 1px 0 #140a2e,2px 2px 0 rgba(20,10,46,.8) !important}/* ==========================================================================
   Face The Sound Earth: site stylesheet

    1. Design tokens
    2. Layout and blocks
    3. Audio player
    4. Slime pipes (.strobe-border)
    5. Site title tank
    6. Media halos
    7. Background blocks inside .strobe-border
    8. Link images (.slime-link-image)
    9. Slime boxes: shared setup
   10. Stranger slime box (.stranger-slime-box)
   11. Buchla slime box (.buchla-slime-box)
   12. Cystic slime box (.cystic-slime-box)
   13. Kirn slime box (.kirn-slime-box)
   14. Pixel hens
   15. Pixel pug stage (.pug-love)
   16. Sobriety coin (.sober-coin)
   17. Graffiti wall (#zx-wall)
   18. Hanging sign (.zx-sign)
   19. Pixel pug artists
   20. Navigation
   21. Reduced motion

   Every animated scene is a self-contained SVG embedded as a data URI, so
   the site needs no image files. Custom properties use the zx- prefix.
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root{--zx-violet:#503aa8;--zx-pink:#f6cff4;--zx-mint:#90ee90;--zx-neon:#39ff14;--zx-white:#ffffff;--zx-audio-bg:#dcd9d5;--zx-gap:4px;--zx-ink:#140a2e;--zx-nav:#3a2a9e;--zx-depth:3px;--zx-pug-art:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-0c1f9c1d6eaa.svg");--zx-s-top:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-2998618f0bc9.svg");--zx-s-left:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-c142bb697970.svg");--zx-s-right:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-8b14dab5fa2a.svg");--zx-s-bottom:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-885b34dabd93.svg");--zx-s-pool:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-06f6a8515580.svg");--zx-ducks:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-4f163bde0ce8.svg");--zx-v-bubbles:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-64fb0a8e3e5a.svg");--zx-s-corner-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'>%3Cdefs>%3CradialGradient id='cg' cx='0' cy='0' r='1.2'>%3Cstop offset='0' stop-color='%23c2ff74'/>%3Cstop offset='.4' stop-color='%237dff2e'/>%3Cstop offset='.8' stop-color='%233cb817'/>%3Cstop offset='1' stop-color='%231d6e0b'/>%3C/radialGradient>%3C/defs>%3Cpath d='M0,0H40V14C26,15 14,19 9,27C7,31 6.5,36 6.5,40H0Z' fill='url(%23cg)'/>%3Cpath d='M40,14C26,15 14,19 9,27C7,31 6.5,36 6.5,40' fill='none' stroke='%231d6e0b' stroke-width='1.6' opacity='.35'/>%3Cpath d='M34,10.5C24,11.5 13,16 7.5,23C5,27 3.6,33 3.4,40' fill='none' stroke='%23f4ffd6' stroke-width='1.3' stroke-linecap='round' opacity='.65'/>%3Ccircle cx='14' cy='14' r='1.4' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.4'/>%3Ccircle cx='7' cy='22' r='.9' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.35'/>%3Ccircle cx='22' cy='12' r='.8' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.35'/>%3C/svg>");--zx-s-corner-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'>%3Cdefs>%3CradialGradient id='cg' cx='0' cy='0' r='1.2'>%3Cstop offset='0' stop-color='%23c2ff74'/>%3Cstop offset='.4' stop-color='%237dff2e'/>%3Cstop offset='.8' stop-color='%233cb817'/>%3Cstop offset='1' stop-color='%231d6e0b'/>%3C/radialGradient>%3C/defs>%3Cg transform='translate(40 0) scale(-1 1)'>%3Cpath d='M0,0H40V14C26,15 14,19 9,27C7,31 6.5,36 6.5,40H0Z' fill='url(%23cg)'/>%3Cpath d='M40,14C26,15 14,19 9,27C7,31 6.5,36 6.5,40' fill='none' stroke='%231d6e0b' stroke-width='1.6' opacity='.35'/>%3Cpath d='M34,10.5C24,11.5 13,16 7.5,23C5,27 3.6,33 3.4,40' fill='none' stroke='%23f4ffd6' stroke-width='1.3' stroke-linecap='round' opacity='.65'/>%3Ccircle cx='14' cy='14' r='1.4' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.4'/>%3Ccircle cx='7' cy='22' r='.9' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.35'/>%3Ccircle cx='22' cy='12' r='.8' fill='%23c2ff74' fill-opacity='.3' stroke='%23f4ffd6' stroke-width='.35'/>%3C/g>%3C/svg>");--zx-s-endmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'>%3Cpath d='M0,40V10C0,3 6,0 16,0H184C194,0 200,3 200,10V40Z'/>%3C/svg>");}


/* ==========================================================================
   2. Layout and blocks
   ========================================================================== */

.wp-block-grid,
.wp-block-gallery,
.wp-block-columns {
    gap: var(--zx-gap) !important;
}

.wp-block-grid > *,
.wp-block-gallery .wp-block-image,
.wp-block-video,
.wp-block-audio {
    margin: 0 !important;
    padding: 0 !important;
}

.match-height-row {
    display: flex !important;
    align-items: stretch !important;
}

/* Lets effects spill past their containers. */
.wp-block-column,
.wp-block-columns,
.wp-block-group,
.strobe-border,
.wp-block-column *,
.wp-block-columns * {
    overflow: visible !important;
}


/* ==========================================================================
   3. Audio player
   ========================================================================== */

.wp-block-columns audio,
.wp-block-audio audio,
audio[controls] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Inverts the native player so it reads light on the dark theme. */
audio[controls],
.wp-block-audio audio {
    background-color: var(--zx-audio-bg) !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

audio[controls]::-webkit-media-controls-panel,
audio[controls]::-webkit-media-controls-enclosure,
.wp-block-audio audio::-webkit-media-controls-panel,
.wp-block-audio audio::-webkit-media-controls-enclosure {
    border-radius: 0 !important;
}

audio[controls]::-webkit-media-controls-panel,
audio[controls]::-webkit-media-controls-enclosure {
    background: var(--zx-audio-bg) !important;
}


/* ==========================================================================
   4. Slime pipes (.strobe-border)
   Every .strobe-border tile is framed by a pixel-art pipe: liquid in the
   theme colours (plus the tile's own slime colour on slime boxes) steps
   around it on ::before, with 2px pixel shading and corner joints on ::after,
   so the pipe never touches the tile's content. The site title box shares it.
   ========================================================================== */

.strobe-border,
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
    --zx-tube: 12px;
    --zx-tube-slime: var(--zx-mint);
    position: relative;
    border: var(--zx-tube) solid transparent !important;
    border-radius: 0;
    animation: zx-tube-glow 6s ease-in-out infinite !important;
}

.strobe-border:has(.stranger-slime-box) { --zx-tube-slime: #7dff2e; }
.strobe-border:has(.buchla-slime-box)   { --zx-tube-slime: #ff4fb0; }
.strobe-border:is(:has(.cystic-slime-box), .cystic-slime-box) { --zx-tube-slime: #ffc02e; }
.strobe-border:has(.kirn-slime-box)     { --zx-tube-slime: #b05cff; }
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) { --zx-tube-slime: #1fd6a0; }

.strobe-border::before,
.strobe-border::after,
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box)::before,
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box)::after {
    content: "";
    position: absolute;
    inset: calc(var(--zx-tube) * -1);
    z-index: 3;
    box-sizing: border-box;
    padding: var(--zx-tube);
    border-radius: inherit;
    pointer-events: none;
    clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
        calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px),
        0 4px, 2px 4px, 2px 2px, 4px 2px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* The liquid: blocks of theme colour stepping around the pipe, pixel style. */
.strobe-border::before,
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box)::before {
    background: linear-gradient(90deg, var(--zx-violet) 0% 12.5%, var(--zx-tube-slime) 12.5% 25%, #ff5fbf 25% 37.5%, var(--zx-tube-slime) 37.5% 50%, var(--zx-mint) 50% 62.5%, var(--zx-violet) 62.5% 75%, var(--zx-tube-slime) 75% 87.5%, var(--zx-violet) 87.5% 100%) 0 0 / 400px 100%;
    animation: zx-tube-flow 8s steps(50) infinite;
}

/* The pipe: 2px pixel shading, lit from the top left like the pug sprites,
   with a joint block at each corner. */
.strobe-border::after,
:is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box)::after {
    background:
        linear-gradient(rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0.45) 2px) 2px 2px / calc(var(--zx-tube) - 4px) calc(var(--zx-tube) - 4px) no-repeat,
        linear-gradient(var(--zx-ink) 0 0) left top / var(--zx-tube) var(--zx-tube) no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0.45) 2px) calc(100% - 2px) 2px / calc(var(--zx-tube) - 4px) calc(var(--zx-tube) - 4px) no-repeat,
        linear-gradient(var(--zx-ink) 0 0) right top / var(--zx-tube) var(--zx-tube) no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0.45) 2px) 2px calc(100% - 2px) / calc(var(--zx-tube) - 4px) calc(var(--zx-tube) - 4px) no-repeat,
        linear-gradient(var(--zx-ink) 0 0) left bottom / var(--zx-tube) var(--zx-tube) no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.9) 0 2px, rgba(255, 255, 255, 0.45) 2px) calc(100% - 2px) calc(100% - 2px) / calc(var(--zx-tube) - 4px) calc(var(--zx-tube) - 4px) no-repeat,
        linear-gradient(var(--zx-ink) 0 0) right bottom / var(--zx-tube) var(--zx-tube) no-repeat,
        linear-gradient(to bottom, var(--zx-ink) 0 2px, rgba(255, 255, 255, 0.85) 2px 4px, rgba(255, 255, 255, 0.3) 4px 6px, transparent 6px 8px, rgba(20, 10, 46, 0.45) 8px 10px, var(--zx-ink) 10px) top / 100% var(--zx-tube) no-repeat,
        linear-gradient(to top, var(--zx-ink) 0 2px, rgba(20, 10, 46, 0.45) 2px 6px, transparent 6px 8px, rgba(255, 255, 255, 0.3) 8px 10px, var(--zx-ink) 10px) bottom / 100% var(--zx-tube) no-repeat,
        linear-gradient(to right, var(--zx-ink) 0 2px, rgba(255, 255, 255, 0.85) 2px 4px, rgba(255, 255, 255, 0.3) 4px 6px, transparent 6px 8px, rgba(20, 10, 46, 0.45) 8px 10px, var(--zx-ink) 10px) left center / var(--zx-tube) calc(100% - var(--zx-tube) * 2) no-repeat,
        linear-gradient(to left, var(--zx-ink) 0 2px, rgba(20, 10, 46, 0.45) 2px 6px, transparent 6px 8px, rgba(255, 255, 255, 0.3) 8px 10px, var(--zx-ink) 10px) right center / var(--zx-tube) calc(100% - var(--zx-tube) * 2) no-repeat;
}

@keyframes zx-tube-flow {
    to { background-position: 400px 0; }
}

@keyframes zx-tube-glow {
    0%, 100% { box-shadow: 0 0 14px 1px rgba(80, 58, 168, 0.75); }
    25%      { box-shadow: 0 0 14px 1px rgba(246, 207, 244, 0.7); }
    50%      { box-shadow: 0 0 14px 1px rgba(144, 238, 144, 0.7); }
    75%      { box-shadow: 0 0 14px 1px rgba(255, 255, 255, 0.6); }
}


/* ==========================================================================
   5. Site title tank
   The mint title box holds teal slime, and its letters carry the pipes'
   stepped liquid colours with a bold outline.
   ========================================================================== */

/* Site title box: teal slime tank (drips off the top, a low pool that never
   reaches the letters). Found automatically as the site title block with a
   background, or the box around it; the class title-slime-box also works. */
body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
    background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-3bf4974af510.svg") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

/* Title letters: the pipes' stepped liquid colours sliding through them,
   with a bold dark outline so they read over the mint at every moment. */
.wp-block-site-title a {
    color: transparent !important;
    background: linear-gradient(90deg, var(--zx-violet) 0% 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) 0 0 / 640px 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 3px var(--zx-ink);
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 0 rgba(20, 10, 46, 0.55));
    animation: zx-title-flow 10s steps(64) infinite !important;
}

@keyframes zx-title-flow {
    to { background-position: 640px 0; }
}


/* ==========================================================================
   6. Media halos
   A faint rim light in a fixed colour around every image and video.
   ========================================================================== */

/* Halos: every image and video gets a faint, fixed rim light in its own
   colour, hugging its edges.
   Colours rotate through the motif by the tile's position in its grid or
   row, so neighbours differ. The glow sits on a layer behind all the tiles
   in that grid (the grid is isolated so no section background covers it,
   and no halo spills over a neighbouring picture). Slime boxes keep their
   flowing theme-colour glow. Kept to a faint rim light so it never competes. */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex):has(:is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-videopress-video, .wp-block-jetpack-videopress, .wp-block-cover)) {
    isolation: isolate;
}

:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 1) { --zx-halo: 79, 168, 255; }   /* blue */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 2) { --zx-halo: 138, 92, 255; }   /* purple */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 3) { --zx-halo: 255, 210, 63; }   /* yellow */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 4) { --zx-halo: 125, 255, 154; }   /* green */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 5) { --zx-halo: 255, 95, 191; }   /* pink */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 6) { --zx-halo: 31, 214, 160; }   /* teal */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 7) { --zx-halo: 255, 154, 63; }   /* orange */
:is(.wp-block-grid, .wp-block-columns, .is-layout-grid, .is-layout-flex) > :nth-child(8n + 8) { --zx-halo: 63, 208, 255; }   /* cyan */

:is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-videopress-video, .wp-block-jetpack-videopress, .wp-block-cover):not([class*="slime-box"] *) {
    position: relative;
    align-self: start;
}

:is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-videopress-video, .wp-block-jetpack-videopress, .wp-block-cover):not([class*="slime-box"] *)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow:
        0 0 3px 1px rgba(var(--zx-halo, 79, 168, 255), 0.45),
        0 0 14px 2px rgba(var(--zx-halo, 79, 168, 255), 0.25);
}

/* Framed tiles without slime (images and videos) glow from the media itself,
   so the frame adds no glow of its own; otherwise it would light up the whole
   column, not just the picture. */
.strobe-border:not(:has([class*="slime-box"])) {
    animation: none !important;
    box-shadow: none !important;
}

/* ---- Depth and pop --------------------------------------------------------
   Tiles in the media hub (any grid holding slime boxes) sit on stepped pixel
   blocks tinted with their own halo colour. Videos get a chunky beveled
   screen frame with a glass glint, and tilt toward you on hover. Gallery
   paintings get the same blocks but stay still; headings get 3D lettering.
   Change --zx-depth to make every block thicker or thinner. */

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > :not([class*="zx-"]):not(:has([class*="zx-"])):not(script),
.entry-content .wp-block-columns .wp-block-image {
    --zx-block: color-mix(in srgb, rgb(var(--zx-halo, 138, 92, 255)) 45%, #140a2e);
    --zx-block-dark: color-mix(in srgb, rgb(var(--zx-halo, 138, 92, 255)) 22%, #140a2e);
    position: relative;
    align-self: start;                                     /* the block hugs the tile, not the whole grid row */
    box-shadow:
        calc(var(--zx-depth) * 1) calc(var(--zx-depth) * 1) 0 var(--zx-block),
        calc(var(--zx-depth) * 2) calc(var(--zx-depth) * 2) 0 var(--zx-block),
        calc(var(--zx-depth) * 3) calc(var(--zx-depth) * 3) 0 var(--zx-block-dark),
        calc(var(--zx-depth) * 4) calc(var(--zx-depth) * 4) 0 var(--zx-ink),
        calc(var(--zx-depth) * 5) calc(var(--zx-depth) * 7) 14px rgba(10, 4, 24, 0.5);
    transition: transform 0.18s steps(3), box-shadow 0.18s steps(3);
}

.entry-content .wp-block-columns .wp-block-image {
    --zx-halo: 138, 92, 255;
    margin: 0 !important;
}

.entry-content .wp-block-columns:has(.wp-block-image) {   /* room between the gallery pictures for their blocks */
    gap: clamp(16px, 3vw, 40px) !important;
    padding: 6px 14px 18px !important;
}

/* Videos: a beveled screen frame and a soft glass glint over the picture. */
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
    box-shadow:
        inset 0 0 0 3px var(--zx-ink),
        inset 6px 6px 0 3px rgba(255, 255, 255, 0.32),
        inset -6px -6px 0 3px rgba(10, 4, 24, 0.7),
        inset 0 0 30px rgba(10, 4, 24, 0.6);
    transition: background-position 0.6s ease;
}

@media (hover: hover) {
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > :not([class*="zx-"]):not(:has([class*="zx-"])):not(script):hover {
        transform: translate(-2px, -2px);
        box-shadow:
            calc(var(--zx-depth) * 1) calc(var(--zx-depth) * 1) 0 var(--zx-block),
            calc(var(--zx-depth) * 2) calc(var(--zx-depth) * 2) 0 var(--zx-block),
            calc(var(--zx-depth) * 3) calc(var(--zx-depth) * 3) 0 var(--zx-block),
            calc(var(--zx-depth) * 4) calc(var(--zx-depth) * 4) 0 var(--zx-block-dark),
            calc(var(--zx-depth) * 5) calc(var(--zx-depth) * 5) 0 var(--zx-ink),
            calc(var(--zx-depth) * 8) calc(var(--zx-depth) * 10) 18px rgba(10, 4, 24, 0.55);
    }

    /* videos tip toward you like a screen being picked up; gallery paintings stay still */
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed):hover {
        transform: perspective(800px) rotateX(3deg) rotateY(-4deg) translate(-3px, -3px);
    }

    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video):hover::after {
        background-position: -20% 0;                       /* the glint sweeps across */
    }

    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > :not([class*="zx-"]):not(:has([class*="zx-"])):not(script):active {
        transform: translate(4px, 4px);
        box-shadow:
            calc(var(--zx-depth) * 1) calc(var(--zx-depth) * 1) 0 var(--zx-block-dark),
            calc(var(--zx-depth) * 2) calc(var(--zx-depth) * 2) 0 var(--zx-ink);
    }
}

/* Section headings: chunky 3D pixel lettering. */
.entry-content :is(h1, h2, h3).wp-block-heading {
    text-shadow:
        1px 1px 0 #3a2a9e,
        2px 2px 0 #3a2a9e,
        3px 3px 0 #2a1a6e,
        4px 4px 0 #2a1a6e,
        5px 5px 0 var(--zx-ink),
        6px 6px 0 var(--zx-ink),
        8px 10px 10px rgba(10, 4, 24, 0.55);
}

/* Slime cards: their block takes the slime's own colour, and the words get a
   chunky ink shadow so they stand up off the slime. */
:is(.wp-block-grid, .is-layout-grid) > :has(.stranger-slime-box) { --zx-halo: 125, 255, 46; }
:is(.wp-block-grid, .is-layout-grid) > :has(.buchla-slime-box)   { --zx-halo: 255, 79, 176; }
:is(.wp-block-grid, .is-layout-grid) > :has(.cystic-slime-box)   { --zx-halo: 255, 192, 46; }
:is(.wp-block-grid, .is-layout-grid) > :has(.kirn-slime-box)     { --zx-halo: 176, 92, 255; }

body [class*="slime-box"] {
    text-shadow: 1px 1px 0 var(--zx-ink), 2px 2px 0 rgba(20, 10, 46, 0.7);
}

/* Slime oozing off the slime cards: drips hang from each card's bottom edge
   and slide down its right side, spilling onto whatever sits below. The drips
   take the card's own slime colour and slowly stretch and settle. */
:is(.wp-block-grid, .is-layout-grid) > :has(.stranger-slime-box) { --zx-drip: #7dff2e; --zx-drip-hi: #d4ff8a; }
:is(.wp-block-grid, .is-layout-grid) > :has(.buchla-slime-box)   { --zx-drip: #ff4fb0; --zx-drip-hi: #ffb3dc; }
:is(.wp-block-grid, .is-layout-grid) > :has(.cystic-slime-box)   { --zx-drip: #ffc02e; --zx-drip-hi: #fff0a8; }
:is(.wp-block-grid, .is-layout-grid) > :has(.kirn-slime-box)     { --zx-drip: #b05cff; --zx-drip-hi: #e2c2ff; }

:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"]) {
    z-index: 2;                                            /* drips spill over the tiles below */
}

:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::after,
:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::before {
    content: "";
    position: absolute;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, var(--zx-drip-hi) 0 8%, var(--zx-drip) 22% 70%, color-mix(in srgb, var(--zx-drip) 70%, #140a2e));
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform-origin: 50% 0;
    filter: drop-shadow(2px 2px 0 rgba(20, 10, 46, 0.55));
}

:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::after {   /* drips along the bottom */
    top: calc(100% - 3px);
    left: 4%;
    right: 4%;
    height: clamp(22px, 3.2vw, 38px);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'>%3Cpath d='M0,0H100V3Q90,4 80,2.6T60,3.2T40,2.4T20,3.4T0,2.6Z'/>%3Cpath d='M3.6,2 Q6,9.0 4.7,16 A1.9,1.9 0 1,0 7.9,16 Q6,9.0 8.4,2Z'/>%3Cpath d='M14.6,2 Q17,5.0 15.7,8 A1.9,1.9 0 1,0 18.9,8 Q17,5.0 19.4,2Z'/>%3Cpath d='M26.6,2 Q29,13.0 27.7,24 A1.9,1.9 0 1,0 30.9,24 Q29,13.0 31.4,2Z'/>%3Cpath d='M38.6,2 Q41,6.5 39.7,11 A1.9,1.9 0 1,0 42.9,11 Q41,6.5 43.4,2Z'/>%3Cpath d='M50.6,2 Q53,10.5 51.7,19 A1.9,1.9 0 1,0 54.9,19 Q53,10.5 55.4,2Z'/>%3Cpath d='M63.6,2 Q66,5.5 64.7,9 A1.9,1.9 0 1,0 67.9,9 Q66,5.5 68.4,2Z'/>%3Cpath d='M74.6,2 Q77,14.0 75.7,26 A1.9,1.9 0 1,0 78.9,26 Q77,14.0 79.4,2Z'/>%3Cpath d='M86.6,2 Q89,7.5 87.7,13 A1.9,1.9 0 1,0 90.9,13 Q89,7.5 91.4,2Z'/>%3Cpath d='M93.6,2 Q96,4.5 94.7,7 A1.9,1.9 0 1,0 97.9,7 Q96,4.5 98.4,2Z'/>%3C/svg>");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'>%3Cpath d='M0,0H100V3Q90,4 80,2.6T60,3.2T40,2.4T20,3.4T0,2.6Z'/>%3Cpath d='M3.6,2 Q6,9.0 4.7,16 A1.9,1.9 0 1,0 7.9,16 Q6,9.0 8.4,2Z'/>%3Cpath d='M14.6,2 Q17,5.0 15.7,8 A1.9,1.9 0 1,0 18.9,8 Q17,5.0 19.4,2Z'/>%3Cpath d='M26.6,2 Q29,13.0 27.7,24 A1.9,1.9 0 1,0 30.9,24 Q29,13.0 31.4,2Z'/>%3Cpath d='M38.6,2 Q41,6.5 39.7,11 A1.9,1.9 0 1,0 42.9,11 Q41,6.5 43.4,2Z'/>%3Cpath d='M50.6,2 Q53,10.5 51.7,19 A1.9,1.9 0 1,0 54.9,19 Q53,10.5 55.4,2Z'/>%3Cpath d='M63.6,2 Q66,5.5 64.7,9 A1.9,1.9 0 1,0 67.9,9 Q66,5.5 68.4,2Z'/>%3Cpath d='M74.6,2 Q77,14.0 75.7,26 A1.9,1.9 0 1,0 78.9,26 Q77,14.0 79.4,2Z'/>%3Cpath d='M86.6,2 Q89,7.5 87.7,13 A1.9,1.9 0 1,0 90.9,13 Q89,7.5 91.4,2Z'/>%3Cpath d='M93.6,2 Q96,4.5 94.7,7 A1.9,1.9 0 1,0 97.9,7 Q96,4.5 98.4,2Z'/>%3C/svg>");
    animation: zx-ooze 7s ease-in-out infinite;
}

:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::before {  /* a run down the right side */
    top: 18%;
    left: calc(100% - 3px);
    width: 9px;
    height: clamp(40px, 6vw, 70px);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/svg>");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/svg>");
    animation: zx-ooze 9s ease-in-out -3s infinite;
}

@keyframes zx-ooze {
    0%, 100% { transform: scaleY(0.82); }
    45%      { transform: scaleY(1.12); }
    60%      { transform: scaleY(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    :is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::before,
    :is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::after,
    body :is(.zx-wall, .zx-track)::after {
        animation: none !important;
    }
}

/* Slime on the media tiles: a slime cap across the top of every video and
   picture tile in the hub, running down its outer sides. Videos keep their
   glass glint underneath the slime. */
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-image, .wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video):not([class*="slime-box"] *) {
    --zx-slime-top: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-184b420d51af.svg");
    --zx-slime-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.45' stop-color='%237dff2e'/>%3Cstop offset='1' stop-color='%233fbf1a'/>%3C/linearGradient>%3C/defs>%3Cpath d='M0,0H7Q9,14 7.5,26Q6,40 8.5,52Q10,62 8,70A4,4 0 1,1 0,72Z' fill='url(%23g)'/>%3Cpath d='M0,74H4Q5,82 4.2,88A2.6,2.6 0 1,1 0,90Z' fill='url(%23g)'/>%3C/svg>");
    --zx-slime-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='0'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.45' stop-color='%237dff2e'/>%3Cstop offset='1' stop-color='%233fbf1a'/>%3C/linearGradient>%3C/defs>%3Cpath d='M14,0H7Q5,16 6.5,30Q8,44 5.5,58Q4.5,66 6,74A4,4 0 1,0 14,76Z' fill='url(%23g)'/>%3Cpath d='M14,80H10Q9,86 9.8,92A2.6,2.6 0 1,0 14,94Z' fill='url(%23g)'/>%3C/svg>");
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) .wp-block-image:not([class*="slime-box"] *)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        var(--zx-slime-top) 0 0 / 100% clamp(16px, 2.6vw, 30px) no-repeat,
        var(--zx-slime-left) 0 0 / clamp(7px, 1vw, 12px) 55% no-repeat,
        var(--zx-slime-right) 100% 0 / clamp(7px, 1vw, 12px) 42% no-repeat;
    filter: drop-shadow(1px 2px 0 rgba(20, 10, 46, 0.5));
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video)::after {
    background:
        var(--zx-slime-top) 0 0 / 100% clamp(16px, 2.6vw, 30px) no-repeat,
        var(--zx-slime-left) 0 0 / clamp(7px, 1vw, 12px) 55% no-repeat,
        var(--zx-slime-right) 100% 0 / clamp(7px, 1vw, 12px) 42% no-repeat,
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
}

@media (hover: hover) {
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video):hover::after {
        background-position: 0 0, 0 0, 100% 0, -20% 0;   /* only the glint sweeps; the slime stays put */
    }
}

/* Slime all over the games: a thick slime cap over the top of the homestead
   wall and the mud course, runs down both sides, and drips hanging off the
   bottom edge. */
body :is(.zx-wall, .zx-track) {
    --zx-slime-top: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-184b420d51af.svg");
    --zx-slime-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.45' stop-color='%237dff2e'/>%3Cstop offset='1' stop-color='%233fbf1a'/>%3C/linearGradient>%3C/defs>%3Cpath d='M0,0H200V6Q186,8 172,5.5T144,6.5T112,5T84,7T56,5.5T28,7T0,5.5Z' fill='url(%23g)'/>%3Cpath d='M11.4,4 Q14,13.0 12.57,22 A1.9500000000000002,1.9500000000000002 0 1,0 15.95,22 Q14,13.0 16.6,4Z' fill='url(%23g)'/>%3Cpath d='M28.4,4 Q31,8.5 29.57,13 A1.9500000000000002,1.9500000000000002 0 1,0 32.95,13 Q31,8.5 33.6,4Z' fill='url(%23g)'/>%3Cpath d='M44.4,4 Q47,19.0 45.57,34 A1.9500000000000002,1.9500000000000002 0 1,0 48.95,34 Q47,19.0 49.6,4Z' fill='url(%23g)'/>%3Cpath d='M63.4,4 Q66,11.0 64.57,18 A1.9500000000000002,1.9500000000000002 0 1,0 67.95,18 Q66,11.0 68.6,4Z' fill='url(%23g)'/>%3Cpath d='M80.4,4 Q83,16.0 81.57,28 A1.9500000000000002,1.9500000000000002 0 1,0 84.95,28 Q83,16.0 85.6,4Z' fill='url(%23g)'/>%3Cpath d='M96.4,4 Q99,8.0 97.57,12 A1.9500000000000002,1.9500000000000002 0 1,0 100.95,12 Q99,8.0 101.6,4Z' fill='url(%23g)'/>%3Cpath d='M114.4,4 Q117,21.0 115.57,38 A1.9500000000000002,1.9500000000000002 0 1,0 118.95,38 Q117,21.0 119.6,4Z' fill='url(%23g)'/>%3Cpath d='M133.4,4 Q136,11.5 134.57,19 A1.9500000000000002,1.9500000000000002 0 1,0 137.95,19 Q136,11.5 138.6,4Z' fill='url(%23g)'/>%3Cpath d='M147.4,4 Q150,17.0 148.57,30 A1.9500000000000002,1.9500000000000002 0 1,0 151.95,30 Q150,17.0 152.6,4Z' fill='url(%23g)'/>%3Cpath d='M168.4,4 Q171,9.0 169.57,14 A1.9500000000000002,1.9500000000000002 0 1,0 172.95,14 Q171,9.0 173.6,4Z' fill='url(%23g)'/>%3Cpath d='M185.4,4 Q188,14.5 186.57,25 A1.9500000000000002,1.9500000000000002 0 1,0 189.95,25 Q188,14.5 190.6,4Z' fill='url(%23g)'/>%3C/svg>");
    --zx-slime-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.45' stop-color='%237dff2e'/>%3Cstop offset='1' stop-color='%233fbf1a'/>%3C/linearGradient>%3C/defs>%3Cpath d='M0,0H7Q9,14 7.5,26Q6,40 8.5,52Q10,62 8,70A4,4 0 1,1 0,72Z' fill='url(%23g)'/>%3Cpath d='M0,74H4Q5,82 4.2,88A2.6,2.6 0 1,1 0,90Z' fill='url(%23g)'/>%3C/svg>");
    --zx-slime-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='0'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.45' stop-color='%237dff2e'/>%3Cstop offset='1' stop-color='%233fbf1a'/>%3C/linearGradient>%3C/defs>%3Cpath d='M14,0H7Q5,16 6.5,30Q8,44 5.5,58Q4.5,66 6,74A4,4 0 1,0 14,76Z' fill='url(%23g)'/>%3Cpath d='M14,80H10Q9,86 9.8,92A2.6,2.6 0 1,0 14,94Z' fill='url(%23g)'/>%3C/svg>");
}

body :is(.zx-wall, .zx-track)::before {                       /* top cap and side runs */
    content: "";
    position: absolute;
    top: -12px;
    left: -10px;
    right: -10px;
    bottom: 10%;
    z-index: 6;
    pointer-events: none;
    background:
        var(--zx-slime-top) 0 0 / 100% clamp(38px, 6vw, 72px) no-repeat,
        var(--zx-slime-left) 0 6px / clamp(12px, 1.6vw, 20px) 70% no-repeat,
        var(--zx-slime-right) 100% 6px / clamp(12px, 1.6vw, 20px) 58% no-repeat;
    filter: drop-shadow(2px 3px 0 rgba(20, 10, 46, 0.55));
}

body .zx-track::before {                                   /* thinner cap on the mud course so the score stays readable */
    top: -18px;
    background-size: 100% clamp(24px, 3.2vw, 40px), clamp(12px, 1.6vw, 20px) 70%, clamp(12px, 1.6vw, 20px) 58%;
}

body :is(.zx-wall, .zx-track)::after {                        /* drips off the bottom */
    content: "";
    position: absolute;
    top: calc(100% - 8px);
    left: -6px;
    right: -6px;
    height: clamp(30px, 4.5vw, 54px);
    z-index: 6;
    pointer-events: none;
    background: var(--zx-slime-bottom) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(2px 3px 0 rgba(20, 10, 46, 0.55));
    transform-origin: 50% 0;
    animation: zx-ooze 8s ease-in-out infinite;
}



/* ==========================================================================
   7. Background blocks inside .strobe-border
   Keeps the room at the top of these blocks where the slime drips hang.
   ========================================================================== */

.strobe-border [class*="background"],
.strobe-border [style*="background"] {
    position: relative !important;
    display: block !important;
    padding-top: 35px !important;
    overflow: hidden !important;
}


/* ==========================================================================
   8. Link images (.slime-link-image)
   ========================================================================== */

.slime-link-image {
    position: relative !important;
    border-radius: 8px !important;
}

.slime-link-image a,
.slime-link-image img {
    display: block !important;
}


/* ==========================================================================
   9. Slime boxes: shared setup
   Each box (sections 9 to 12) only sets --zx-slime, its animated scene. This
   rule stretches that scene over the box. The cystic class also works on a
   wrapper such as a column: the slime then goes on the background block
   directly inside it, unless that block is itself a slime box.

   Every scene: a pool rising and falling on a fixed cycle, drips that
   stretch, snap and fall from a lumpy film along the top, and impacts
   timed to land on the moving surface (crater, bounced bead, swell and
   ripple rings). Drips repeat on half, one or two pool cycles, so to change
   a scene's speed, scale every dur and begin value in it by one factor.
   ========================================================================== */

body :is(.stranger-slime-box, .buchla-slime-box, .cystic-slime-box, .kirn-slime-box),
body .cystic-slime-box > [class*="background"]:not([class*="slime-box"]) {
    background-image: var(--zx-slime) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
}

/* The scene is the animation, so other animations on the box are stopped,
   except on a strobing wrapper, whose border keeps flashing. */
body :is(.stranger-slime-box, .buchla-slime-box, .kirn-slime-box),
body .cystic-slime-box:not(.strobe-border),
body .cystic-slime-box > [class*="background"]:not([class*="slime-box"]) {
    animation: none !important;
}


/* ==========================================================================
   10. Stranger slime box (.stranger-slime-box)
   Lime slime with radioactive glow pulses, foam bubbles and drifting murk,
   and a sickly mutant fish (glowing growths, droopy antenna) that drifts
   slowly through the slime, stopping to turn, face you and blink.
   Pool cycle 17s, deep drain so the text is fully clear at the low point.
   Tuning, inside the SVG:
     values='0 30;0 92;0 30'  Pool high and low (drips are timed to these).
     dur='13s'                Sideways slosh.
     dur='24s' / dur='31s'    Surface wave speed.
   ========================================================================== */

body .stranger-slime-box {
    --zx-slime: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-88d76e24cef4.svg");
}


/* ==========================================================================
   11. Buchla slime box (.buchla-slime-box)
   Bubblegum slime with marbled cream and raspberry swirls. Pool cycle 21s.
   Tuning, inside the SVG:
     values='0 0;0 62;0 0'    Pool high and low (drips are timed to these).
     dur='15.5s'              Sideways slosh.
     dur='29s' / dur='27s'    Surface wave speed.
     filter='url(%23sw)'      The marbled swirl ribbons.
   ========================================================================== */

body .buchla-slime-box {
    --zx-slime: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-b0cd626c0567.svg");
}


/* ==========================================================================
   12. Cystic slime box (.cystic-slime-box)
   Thick honey-gold slime, the slowest of the four, with trapped bubbles
   crawling up through it under a soft light shimmer. Pool cycle 25s.
   Tuning, inside the SVG:
     values='0 0;0 50;0 0'    Pool high and low (drips are timed to these).
     dur='19s'                Sideways slosh.
     dur='33s' / dur='36s'    Surface wave speed.
     stroke='%23fff8c8'       The shimmer bands.
   ========================================================================== */

body .cystic-slime-box {
    --zx-slime: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-fb6211de639e.svg");
}


/* ==========================================================================
   13. Kirn slime box (.kirn-slime-box)
   Ultraviolet slime with mint sparkles. Its link (the paragraph with class
   .slime-card-text) floats on the surface, rising and sinking with the pool.
   Pool cycle 19s starting at -6s; zx-kirn-float shares that timing, and its
   59.375% / 81.875% stops match the pool's values='0 45;0 81;0 45'. Change
   them together.
   ========================================================================== */

body .kirn-slime-box, body.page-id-18 .wpforms-container {
    --zx-slime: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-f3f14f77ca82.svg");
    position: relative !important;
}

body .kirn-slime-box .slime-card-text {
    position: absolute !important;
    top: 59.375%;
    right: 0;
    left: 0;
    z-index: 2;
    margin: 0 !important;
    padding-right: inherit;
    padding-left: inherit;
    translate: 0 -58%;
    transform-origin: 50% 100%;
    animation:
        zx-kirn-float 19s cubic-bezier(0.37, 0, 0.63, 1) -6s infinite,
        zx-kirn-sway 14s ease-in-out infinite;
}

body .kirn-slime-box .slime-card-text a {
    color: var(--zx-mint) !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    text-shadow:
        0 0 10px rgba(144, 238, 144, 0.6),
        0 2px 6px rgba(20, 0, 45, 0.9) !important;
}

@keyframes zx-kirn-float {
    0%, 100% { top: 59.375%; }
    50%      { top: 81.875%; }
}

@keyframes zx-kirn-sway {
    0%, 100% { rotate: -1.5deg; }
    50%      { rotate: 1.5deg; }
}


/* ==========================================================================
   14. Pixel hens
   Four hens live on the slime boxes' top pipes. A brown hen walks the Kirn
   box and a white hen the Cystic box: head-bobbing steps, a hop halfway, wing flaps, three pecks
   at each end, then a turn. They stand
   on the pipe, outside the box, and never block clicks.
   ========================================================================== */

.strobe-border :is(.kirn-slime-box, .cystic-slime-box, .stranger-slime-box, .buchla-slime-box) {
    position: relative !important;
    overflow: visible !important;
}

.strobe-border :is(.kirn-slime-box, .cystic-slime-box)::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 12px);
    left: 4px;
    z-index: 10;
    width: 46px;
    aspect-ratio: 18 / 13;
    background: var(--zx-hen) center / contain no-repeat;
    image-rendering: pixelated;
    transform-origin: 50% 100%;
    pointer-events: none;
    animation: zx-hen-walk var(--zx-hen-time) linear infinite;
}

.strobe-border .kirn-slime-box   { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-a7cad43e5375.svg"); --zx-hen-time: 16s; }
.strobe-border .cystic-slime-box { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-af6dbba399e1.svg"); --zx-hen-time: 13s; }

@keyframes zx-hen-walk {
    0%       { left: 4px; transform: scaleX(1); }
    17%      { left: calc((100% - 50px) * 0.42 + 4px); transform: scaleX(1); }
    18.5%    { transform: scaleX(1) translateY(-7px) rotate(-8deg); }
    20%      { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(1); }
    40%      { left: calc(100% - 50px); transform: scaleX(1); }
    42%, 44%, 46% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); }
    43%, 45%, 47% { left: calc(100% - 50px); transform: scaleX(1); }
    50%      { left: calc(100% - 50px); transform: scaleX(-1); }
    67%      { left: calc((100% - 50px) * 0.58 + 4px); transform: scaleX(-1); }
    68.5%    { transform: scaleX(-1) translateY(-7px) rotate(-8deg); }
    70%      { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); }
    90%      { left: 4px; transform: scaleX(-1); }
    92%, 94%, 96% { left: 4px; transform: scaleX(-1) rotate(24deg); }
    93%, 95%, 97% { left: 4px; transform: scaleX(-1); }
    100%     { left: 4px; transform: scaleX(1); }
}


/* Black hen on the Stranger box: flaps in bursts and flutters up in short hops. */
.strobe-border .stranger-slime-box {
    --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-bf41a21e25d4.svg");
    overflow: visible !important;
}

/* Nesting white hen on the Buchla box: sits on her nest, stands up to reveal a
   new egg, wanders and pecks, then settles back in. */
.strobe-border .buchla-slime-box {
    --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-ee2647421e9e.svg");
    overflow: visible !important;
}

.strobe-border :is(.stranger-slime-box, .buchla-slime-box)::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 12px);
    left: 4px;
    z-index: 10;
    width: 46px;
    aspect-ratio: 18 / 14;
    background: var(--zx-hen) center / contain no-repeat;
    image-rendering: pixelated;
    transform-origin: 50% 100%;
    pointer-events: none;
}

.strobe-border .stranger-slime-box::after { animation: zx-hen-flutter 15s linear infinite; }
.strobe-border .buchla-slime-box::after  { animation: zx-hen-nest 22s linear infinite; }

.strobe-border .buchla-slime-box::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 11px);
    left: 0;
    z-index: 11;
    width: 58px;
    aspect-ratio: 20 / 9;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 6 6' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M1 -1h2v1H1zM0 0h1v1H0zM3 0h1v1H3zM-1 1h1v1H-1zM4 1h1v1H4zM-1 2h1v1H-1zM4 2h1v1H4zM0 3h1v1H0zM3 3h1v1H3zM1 4h2v1H1z'/>%3Cpath fill='%23fff6dc' d='M1 0h2v1H1zM0 1h1v1H0zM2 1h2v1H2zM0 2h4v1H0zM1 3h2v1H1z'/>%3Cpath fill='%23ffffff' d='M1 1h1v1H1z'/>%3C/svg>") 62% 0 / 13px 13px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 6 6' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M1 -1h2v1H1zM0 0h1v1H0zM3 0h1v1H3zM-1 1h1v1H-1zM4 1h1v1H4zM-1 2h1v1H-1zM4 2h1v1H4zM0 3h1v1H0zM3 3h1v1H3zM1 4h2v1H1z'/>%3Cpath fill='%23fff6dc' d='M1 0h2v1H1zM0 1h1v1H0zM2 1h2v1H2zM0 2h4v1H0zM1 3h2v1H1z'/>%3Cpath fill='%23ffffff' d='M1 1h1v1H1z'/>%3C/svg>") 34% 0 / 13px 13px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 20 7' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M2 -1h13v1H2zM1 0h1v1H1zM15 0h2v1H15zM0 1h1v1H0zM17 1h1v1H17zM-1 2h1v1H-1zM18 2h1v1H18zM0 3h1v1H0zM17 3h1v1H17zM1 4h1v1H1zM16 4h1v1H16zM2 5h14v1H2z'/>%3Cpath fill='%23b07a3a' d='M2 0h2v1H2zM5 0h2v1H5zM8 0h2v1H8zM11 0h2v1H11zM14 0h1v1H14zM1 1h1v1H1zM4 1h2v1H4zM8 1h2v1H8zM12 1h2v1H12zM16 1h1v1H16zM0 2h1v1H0zM2 2h2v1H2zM6 2h2v1H6zM10 2h2v1H10zM14 2h2v1H14zM17 2h1v1H17zM1 3h1v1H1zM4 3h2v1H4zM8 3h2v1H8zM12 3h2v1H12zM16 3h1v1H16zM2 4h14v1H2z'/>%3Cpath fill='%237a4f1e' d='M4 0h1v1H4zM7 0h1v1H7zM10 0h1v1H10zM13 0h1v1H13zM2 1h2v1H2zM6 1h2v1H6zM10 1h2v1H10zM14 1h2v1H14zM1 2h1v1H1zM4 2h2v1H4zM8 2h2v1H8zM12 2h2v1H12zM16 2h1v1H16zM2 3h2v1H2zM6 3h2v1H6zM10 3h2v1H10zM14 3h2v1H14z'/>%3C/svg>") 0 100% / 100% auto no-repeat;
    pointer-events: none;
    animation: zx-nest-egg 22s linear infinite;
}

@keyframes zx-hen-flutter {
    0%       { left: 4px; transform: scaleX(1); }
    10%      { left: calc((100% - 50px) * 0.18 + 4px); transform: scaleX(1); }
    12%      { transform: scaleX(1) translateY(-16px) rotate(-6deg); }
    14%      { left: calc((100% - 50px) * 0.3 + 4px); transform: scaleX(1); }
    20%, 22% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1) rotate(24deg); }
    21%, 23% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1); }
    32%      { left: calc((100% - 50px) * 0.62 + 4px); transform: scaleX(1); }
    34%      { transform: scaleX(1) translateY(-20px) rotate(-8deg); }
    36%      { left: calc((100% - 50px) * 0.76 + 4px); transform: scaleX(1); }
    44%      { left: calc(100% - 50px); transform: scaleX(1); }
    46%, 48% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); }
    47%, 49% { left: calc(100% - 50px); transform: scaleX(1); }
    52%      { left: calc(100% - 50px); transform: scaleX(-1); }
    62%      { left: calc((100% - 50px) * 0.7 + 4px); transform: scaleX(-1); }
    64%      { transform: scaleX(-1) translateY(-14px) rotate(-6deg); }
    66%      { left: calc((100% - 50px) * 0.58 + 4px); transform: scaleX(-1); }
    76%, 78% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1) rotate(24deg); }
    77%, 79% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1); }
    86%      { left: calc((100% - 50px) * 0.16 + 4px); transform: scaleX(-1); }
    88%      { transform: scaleX(-1) translateY(-18px) rotate(-8deg); }
    90%      { left: 4px; transform: scaleX(-1); }
    100%     { left: 4px; transform: scaleX(1); }
}

@keyframes zx-hen-nest {
    0%, 26%  { left: 6px; transform: translateY(4px) scaleX(1); }
    10%      { left: 6px; transform: translateY(4px) scaleX(1) rotate(-4deg); }
    18%      { left: 6px; transform: translateY(4px) scaleX(1) rotate(3deg); }
    29%      { left: 6px; transform: translateY(-6px) scaleX(1); }
    31%      { left: 14px; transform: translateY(0) scaleX(1); }
    52%      { left: calc(100% - 50px); transform: scaleX(1); }
    54%, 56%, 58% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); }
    55%, 57%, 59% { left: calc(100% - 50px); transform: scaleX(1); }
    62%      { left: calc(100% - 50px); transform: scaleX(-1); }
    74%      { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); }
    75%, 77% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1) rotate(24deg); }
    76%, 78% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); }
    91%      { left: 6px; transform: scaleX(-1); }
    93%      { left: 6px; transform: scaleX(1); }
    96%      { left: 6px; transform: translateY(4px) scaleX(1); }
    100%     { left: 6px; transform: translateY(4px) scaleX(1); }
}

/* The new egg pops into the nest the moment she stands up. */
@keyframes zx-nest-egg {
    0%, 28.5%     { background-size: 0 0, 13px 13px, 100% auto; }
    29%, 99.5%    { background-size: 13px 13px, 13px 13px, 100% auto; }
    100%          { background-size: 0 0, 13px 13px, 100% auto; }
}


/* ==========================================================================
   15. Pixel pug stage (.pug-love)
   Finnigan (fawn) and Wednesday (black, in headphones at her DJ booth) take
   turns saying "LOVE YOU SLIME!", with a modular synth between them and a
   truss above holding a disco ball and colour-changing moving heads, with a
   rooster dancing on top of the truss, pecking and crowing LETS GO!!!

   The Custom HTML block holding an empty div with the class pug-love is
   only a switch: on any page that has it, the stage sits on the top edge of
   the main navigation menu (never a footer menu, and never the link list
   inside the menu, which shares the class). It floats over the header, so
   it never shifts the layout, and clicks pass straight through it.
   Tuning: left moves it sideways, width sets its size.
   ========================================================================== */


body .pug-love {
    display: none !important;
}

body:has(.pug-love) nav.wp-block-navigation:not(footer nav, .wp-block-navigation nav) {
    position: relative;
}

body:has(.pug-love) nav.wp-block-navigation:not(footer nav, .wp-block-navigation nav)::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 38%;
    z-index: 20;
    width: clamp(300px, 45vw, 690px);
    aspect-ratio: 104 / 90;
    background: var(--zx-pug-art) center / contain no-repeat;
    pointer-events: none;
}

/* Phones and small tablets: tucked toward the right. */
@media (max-width: 781px) {
    body:has(.pug-love) nav.wp-block-navigation:not(footer nav, .wp-block-navigation nav)::before {
        left: auto;
        right: 2%;
        width: min(88vw, 430px);
    }
}


/* ==========================================================================
   16. Sobriety coin (.sober-coin)
   A chrome coin spinning in 3D above a slime puddle where Finnigan and
   Wednesday sit. Front: the years, as real text that the coin's Custom HTML
   block keeps up to date from data-since. Back: the Madeleine L'Engle quote.
   Hovering or clicking pauses the spin. A crowing rooster stands on top,
   and a copyright line sits underneath,
   its year kept current by the same block.
   ========================================================================== */

body .sober-coin {
    --zx-coin-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-f8562d289cf4.svg");
    --zx-coin-back: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-41f9f3776434.svg");
    --zx-coin-stage: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-a15d2910f50f.svg");
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 592 / 400;
    margin: min(15vw, 83px) auto 0;   /* headroom for the rooster (26% of the coin's width) */
    background: var(--zx-coin-stage) center / contain no-repeat;
    perspective: 1400px;
}

body .sober-coin__spin {
    position: absolute;
    top: 0;
    left: 16.2%;
    width: 67.6%;
    aspect-ratio: 1;
    transform-style: preserve-3d;
    cursor: pointer;
    animation: zx-coin-spin 14s linear infinite;
}

body .sober-coin__spin:hover,
body .sober-coin__spin.is-paused {
    animation-play-state: paused;
}

/* Coin thickness: two discs between the faces that show when it turns side-on. */
body .sober-coin__spin::before,
body .sober-coin__spin::after {
    content: "";
    position: absolute;
    inset: 0.6%;
    border-radius: 50%;
    background: #8d949e;
}

body .sober-coin__spin::before { transform: translateZ(-3px); }
body .sober-coin__spin::after  { transform: translateZ(3px); background: #c9ced6; }

body .sober-coin__face {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* WordPress can slip line breaks, empty paragraphs or a paragraph wrapper into
   the HTML block; drop the extras and let wrapped text sit in the stack. */
body .sober-coin__face br,
body .sober-coin__face p:empty {
    display: none !important;
}

body .sober-coin__face > p:not([class]) {
    display: contents !important;
}

/* Shield the coin's text from theme spacing (quote indents, block gaps). */
body .sober-coin__face > * {
    box-sizing: border-box;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center;
    text-indent: 0;
    quotes: none;
}

body .sober-coin__face > *::before,
body .sober-coin__face > *::after {
    content: none !important;
}

body .sober-coin__front {
    background: var(--zx-coin-front) center / contain no-repeat;
    transform: translateZ(4px);
}

body .sober-coin__back {
    background: var(--zx-coin-back) center / contain no-repeat;
    text-align: center;
    transform: rotateY(180deg) translateZ(4px);
}

body .sober-coin__number {
    margin-top: -3cqw !important;
    color: var(--zx-mint);
    font: 900 36cqw / 1 "Arial Black", "Helvetica Neue", Arial, sans-serif;
    text-shadow: 0 0 4cqw rgba(144, 238, 144, 0.7), 0 0.8cqw 0 #140a40, 0 0 1.2cqw #140a40;
}

body .sober-coin__unit {
    margin-top: 1cqw !important;
    padding-left: 2cqw !important;
    color: var(--zx-white);
    font: 900 7.2cqw / 1 "Arial Black", Arial, sans-serif;
    letter-spacing: 2cqw;
    text-shadow: 0 0.5cqw 0 #140a40;
}

body .sober-coin__quote {
    max-width: 56cqw;
    margin: 0;
    color: var(--zx-white);
    font: italic 700 5.6cqw / 1.35 Georgia, serif;
    text-shadow: 0 0.4cqw 0 #140a40;
}

body .sober-coin__author {
    display: block;
    margin-top: 3cqw !important;
    color: var(--zx-mint);
    font: 900 3.6cqw / 1 "Arial Black", Arial, sans-serif;
    font-style: normal;
    letter-spacing: 0.8cqw;
    text-transform: uppercase;
}

body .sober-coin__days {
    margin: 0.6em 0 0;
    color: var(--zx-mint);
    font-weight: 700;
    text-align: center;
}

body .site-copyright__note {
    color: #ff9fd0;
}

/* The rooster: stands on top of the coin (he doesn't spin with it) and crows
   every few seconds, jumping and flapping, with a COCK-A-DOODLE-DOO! bubble. */
body .sober-coin::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 2.2%);
    left: 50%;
    z-index: 5;
    width: 52%;
    aspect-ratio: 74 / 35;
    translate: -50% 0;
    background: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-d8caf514b4b0.svg") center bottom / contain no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Copyright: a small pixel plate in the nav purple (mint edge, hard shadow) so
   it reads cleanly over the foil, in the theme font like the nav. */
body .site-copyright {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 1.2em auto 0;
    padding: 0.55em 0.9em;
    color: var(--zx-mint);
    background: var(--zx-nav);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    box-shadow:
        inset 0 0 0 2px var(--zx-mint),
        inset 2px 2px 0 2px rgba(255, 255, 255, 0.25),
        3px 3px 0 var(--zx-ink);
}

@keyframes zx-coin-spin {
    to { transform: rotateY(360deg); }
}


/* ==========================================================================
   17. Graffiti wall (#zx-wall)
   A whiteboard on a purple pixel brick wall with slime oozing over the top.
   Everyone draws on one shared board in chunky pixel squares; paint is saved
   by the graffiti-wall snippet (Code Snippets plugin) and fades after a week. Below it, the barnyard: eggs to
   hatch, a FEED bag that grows chicks into hens, a TREATS bag for the pugs,
   fetch, a hoop trick and a wood stove that takes logs. The mud course sits
   on top of the wall, or inside a separate zx-track box if one is on the page.
   ========================================================================== */

body .zx-wall,
body .zx-track {
    --zx-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'>%3Crect width='32' height='16' fill='%23241656'/>%3Crect x='-15' y='1' width='14' height='6' fill='%235536c0'/>%3Crect x='-15' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='-15' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='1' y='1' width='14' height='6' fill='%233f259a'/>%3Crect x='1' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='1' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='17' y='1' width='14' height='6' fill='%234a2bb0'/>%3Crect x='17' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='17' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='33' y='1' width='14' height='6' fill='%235a3dc8'/>%3Crect x='33' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='33' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='1' y='9' width='14' height='6' fill='%235a3dc8'/>%3Crect x='1' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='1' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='17' y='9' width='14' height='6' fill='%235536c0'/>%3Crect x='17' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='17' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='33' y='9' width='14' height='6' fill='%234a2bb0'/>%3Crect x='33' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='33' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='49' y='9' width='14' height='6' fill='%234a2bb0'/>%3Crect x='49' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='49' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3C/svg>");
    --zx-wall-cap: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-b43cf5c51606.svg");
    width: min(100%, 920px);
    margin: 2rem auto;
    padding: clamp(18px, 4vw, 40px) clamp(14px, 4vw, 44px) 14px;
    background: var(--zx-brick) 0 0 / 64px 32px;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 4px var(--zx-ink), 6px 6px 0 var(--zx-ink);
}

body .zx-track {                                           /* the mud course in its own box: a clear gap and its own frame */
    margin: 2.5rem auto !important;
    padding-bottom: 0;
    box-shadow: inset 0 0 0 4px var(--zx-ink), 0 0 0 3px #7dff2e, 0 0 0 6px var(--zx-ink), 8px 8px 0 6px var(--zx-ink);
}

body .zx-track .zx-wall__track {
    margin-bottom: 0;
}

body .zx-wall__track {                                     /* the mud course along the top of the wall */
    display: block;
    width: calc(100% + 2 * clamp(14px, 4vw, 44px));
    max-width: none;
    aspect-ratio: 244 / 80;
    margin: calc(-1 * clamp(18px, 4vw, 40px)) calc(-1 * clamp(14px, 4vw, 44px)) 14px;
    image-rendering: pixelated;
    cursor: pointer;
    touch-action: pan-y;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body .zx-wall__board {
    position: relative;
    padding: 10px;
    background: linear-gradient(#e9edf2, #aeb4bd);        /* silver frame */
    box-shadow: inset 0 0 0 3px var(--zx-ink), inset 3px 3px 0 3px rgba(255, 255, 255, 0.8), 5px 5px 0 var(--zx-ink);
}

body .zx-wall__board::before {                             /* slime over the top edge */
    content: "";
    position: absolute;
    top: -4px;
    left: -6px;
    right: -6px;
    z-index: 2;
    height: clamp(44px, 11vw, 96px);
    background: var(--zx-wall-cap) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

body .zx-wall__canvas {
    display: block;
    width: 100%;
    aspect-ratio: 64 / 40;
    background: #fbfcfd;
    box-shadow: inset 0 0 0 2px var(--zx-ink);
    image-rendering: pixelated;
    cursor: crosshair;
    touch-action: none;
}

body .zx-wall__tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px auto 0;
    padding: 8px 12px;
    width: fit-content;
    max-width: 100%;
    background: #8d949e;
    box-shadow: inset 0 0 0 3px var(--zx-ink), inset 3px 3px 0 3px rgba(255, 255, 255, 0.45), 4px 4px 0 var(--zx-ink);
}

body .zx-wall__tray button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font: 900 11px / 1 "Arial Black", Arial, sans-serif;
    letter-spacing: 0.08em;
}

body .zx-wall__marker {                                    /* pixel marker: cap + barrel */
    width: 16px;
    height: 34px;
    background: linear-gradient(var(--c) 0 9px, var(--zx-ink) 9px 11px, #f4f4f4 11px);
    box-shadow: inset 0 0 0 2px var(--zx-ink);
}

body .zx-wall__eraser {
    padding: 8px 10px !important;
    color: var(--zx-ink);
    background: #ffb3d9;
    box-shadow: inset 0 0 0 2px var(--zx-ink);
}

body .zx-wall__size {
    width: 30px;
    height: 30px;
    background:
        radial-gradient(circle, var(--zx-ink) calc(var(--s) * 3px), transparent calc(var(--s) * 3px + 1px)),
        #f4f4f4;
    box-shadow: inset 0 0 0 2px var(--zx-ink);
}

body .zx-wall__tray .is-on {
    translate: 0 -5px;
    outline: 3px solid var(--zx-mint);
}

body .zx-wall__action {
    padding: 8px 10px !important;
    color: var(--zx-ink);
    background: #f4f4f4;
    box-shadow: inset 0 0 0 2px var(--zx-ink);
}

body .zx-wall__ink {
    color: var(--zx-ink);
    font: 900 11px / 1 "Arial Black", Arial, sans-serif;
    letter-spacing: 0.08em;
}

body .zx-wall__wipe {
    padding: 8px 10px !important;
    color: #ffffff;
    background: #e8242c;
    box-shadow: inset 0 0 0 2px var(--zx-ink);
}

body .zx-wall__yard {
    display: block;
    width: 100%;
    aspect-ratio: 244 / 80;
    margin-top: 8px;
    image-rendering: pixelated;
    cursor: pointer;
}

body .zx-wall,
body .zx-track {
    position: relative;
    box-sizing: border-box;
    grid-column: 1 / -1;                                   /* spans the full width if dropped inside a grid */
    justify-self: center;
    align-self: start;
}

body .is-layout-grid > :has(.zx-wall, .zx-track) {                    /* same, when WordPress wraps the block in its own box */
    grid-column: 1 / -1;
    justify-self: stretch;
}

body .zx-wall__puff {                                     /* heart smoke from the wood stove chimney */
    position: absolute;
    z-index: 50;
    width: calc(var(--px) * 7);
    height: calc(var(--px) * 6);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'>%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23a8a2b8'/>%3Cpath d='M1 1h2v1H2v1H1z' fill='%23ece8f4'/>%3C/svg>") 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0;
    animation: zx-puff 11s linear forwards;
}

@keyframes zx-puff {
    0%   { opacity: 0;   transform: translate(0, 0) scale(1); }
    6%   { opacity: 0.9; }
    25%  { transform: translate(calc(var(--drift) * 0.3), -18vh) scale(calc(1 + (var(--grow) - 1) * 0.35)); }
    50%  { transform: translate(calc(var(--drift) * -0.2), -40vh) scale(calc(1 + (var(--grow) - 1) * 0.6)); opacity: 0.7; }
    75%  { transform: translate(calc(var(--drift) * 0.7), -62vh) scale(calc(1 + (var(--grow) - 1) * 0.85)); }
    100% { opacity: 0;   transform: translate(var(--drift), -85vh) scale(var(--grow)); }
}

body .zx-wall__loading {
    margin: 0;
    padding: 2rem 1rem;
    color: var(--zx-mint);
    font: 900 13px / 1.4 "Arial Black", Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
}

body .zx-wall__rules {
    margin: 4px 0 0;
    color: var(--zx-mint);
    font: 900 11px / 1.4 "Arial Black", Arial, sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--zx-ink);
}


/* ==========================================================================
   18. Hanging sign (.zx-sign)
   A barn-plank sign hung on pixel chains that gives an occasional shake
   while a chick rides on top. Custom HTML block: a div "zx-sign zx-sign--farm"
   holding a div "zx-sign__swing" (the chains and board that move), with the
   div "zx-sign__board" and its span "zx-sign__text" inside.
   ========================================================================== */

body .zx-sign {
    --zx-sign-chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' shape-rendering='crispEdges'> %3Cpath d='M0 0h10v11H0zM3 3v5h4V3z' fill-rule='evenodd' fill='%23140a2e'/> %3Cpath d='M1 1h8v9H1zM3 3v5h4V3z' fill-rule='evenodd' fill='%23b8bec8'/> %3Crect x='1' y='1' width='8' height='1' fill='%23f4f4f4'/>%3Crect x='1' y='1' width='1' height='8' fill='%23e4e8ee'/> %3Crect x='1' y='9' width='8' height='1' fill='%237c8494'/> %3Crect x='3' y='10' width='4' height='6' fill='%23140a2e'/>%3Crect x='4' y='10' width='2' height='6' fill='%239aa1ad'/>%3Crect x='4' y='10' width='1' height='6' fill='%23d6dbe2'/>%3C/svg>");
    --zx-sign-hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6' shape-rendering='crispEdges'> %3Crect width='12' height='4' fill='%23140a2e'/>%3Crect x='1' y='1' width='10' height='2' fill='%235a5470'/>%3Crect x='1' y='1' width='10' height='1' fill='%238d949e'/> %3Crect x='5' y='4' width='2' height='2' fill='%23140a2e'/>%3C/svg>");
    position: relative;
    grid-column: 1 / -1;                                   /* full width when it sits in a grid */
    justify-self: stretch;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto 1.5rem;
    container-type: inline-size;                           /* everything sizes to the space it sits in */
    image-rendering: pixelated;
}

body .zx-sign__swing {                                     /* the chains and board: the part that moves */
    position: relative;
    box-sizing: border-box;
    width: min(100%, 760px);
    margin: 0 auto;
    padding-top: clamp(26px, 8cqw, 64px);                  /* room for the chains */
    container-type: inline-size;                           /* the board and its words size to the sign */
    transform-origin: 50% 0;
}

body .is-layout-grid > :has(.zx-sign) {                  /* also when WordPress wraps the block in its own box */
    grid-column: 1 / -1;
}

body .zx-sign__swing::before {                             /* two chains on their hooks */
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: calc(clamp(26px, 8cqw, 64px) + 6px);
    background:
        var(--zx-sign-hook) 0 0 / 30px 15px no-repeat,
        var(--zx-sign-hook) 100% 0 / 30px 15px no-repeat,
        var(--zx-sign-chain) 5px 12px / 20px 32px repeat-y,
        var(--zx-sign-chain) calc(100% - 5px) 12px / 20px 32px repeat-y;
    pointer-events: none;
}

/* Inside a slime-pipe box the chains reach up to the top pipe and tuck in
   behind it, so the sign hangs from the pipe. Raise or lower --zx-sign-reach
   if the chains stop short of the pipe or poke out above it. */
body .strobe-border .zx-sign {
    --zx-sign-reach: 36px;
}

body .strobe-border .zx-sign__swing::before {
    top: calc(-1 * var(--zx-sign-reach));
    height: calc(clamp(26px, 8cqw, 64px) + var(--zx-sign-reach) + 6px);
}

body .zx-sign__board {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: clamp(44px, 13cqw, 104px);
    padding: clamp(6px, 2cqw, 18px) clamp(8px, 4cqw, 40px);
    box-shadow: 0 0 0 3px var(--zx-ink), 6px 6px 0 3px var(--zx-ink);
}

body .zx-sign__text {
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: clamp(14px, 7.2cqw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: transparent;
    background-size: 640px 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: clamp(1.2px, 0.4cqw, 3px) var(--zx-ink);   /* thinner outline on phones so the colours show */
    paint-order: stroke fill;
    filter: drop-shadow(0 clamp(2px, 0.5cqw, 4px) 0 rgba(20, 10, 46, 0.55));
    animation: zx-title-flow 10s steps(64) infinite;
}

/* Barn planks with nail heads, red barn trim and a chick riding on top. */
body .zx-sign--farm .zx-sign__swing {
    animation: zx-sign-shake 7s ease-in-out infinite;
}

body .zx-sign--farm .zx-sign__board {
    border: 6px solid #c8323a;
    background:
        radial-gradient(circle at 10px 10px, var(--zx-ink) 0 2px, #c9ced6 2px 3px, transparent 3.5px),
        radial-gradient(circle at calc(100% - 10px) 10px, var(--zx-ink) 0 2px, #c9ced6 2px 3px, transparent 3.5px),
        radial-gradient(circle at 10px calc(100% - 10px), var(--zx-ink) 0 2px, #c9ced6 2px 3px, transparent 3.5px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--zx-ink) 0 2px, #c9ced6 2px 3px, transparent 3.5px),
        linear-gradient(transparent calc(33.3% - 2px), #6b4423 calc(33.3% - 2px) 33.3%, transparent 33.3% calc(66.6% - 2px), #6b4423 calc(66.6% - 2px) 66.6%, transparent 66.6%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 22px, rgba(20, 10, 46, 0.12) 22px 24px, transparent 24px 41px),
        linear-gradient(#d29a5c, #b07a3a);
    box-shadow: 0 0 0 3px var(--zx-ink), inset 0 0 0 2px #7a1f2e, 6px 6px 0 3px var(--zx-ink);
}

body .zx-sign--farm .zx-sign__board::after {               /* a chick riding the sign */
    content: "";
    position: absolute;
    top: calc(-1 * clamp(16px, 4cqw, 32px) - 9px);
    right: 26%;
    width: clamp(18px, 4.5cqw, 36px);
    height: clamp(16px, 4cqw, 32px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'> %3Cpath d='M3 0h3v1h1v1h1v1h1v1H8v2H7v1H2V6H1V5H0V3h1V2h1V1h1z' fill='%23140a2e'/> %3Cpath d='M3 1PbWWqgKDBDorh525uecKaGZD21FGSoCeR' fill='%23ffd23f'/> %3Crect x='5' y='2' width='1' height='1' fill='%23140a2e'/>%3Crect x='7' y='3' width='1' height='1' fill='%23ff8a1c'/>%3Crect x='3' y='4' width='2' height='1' fill='%23f2b800'/> %3Crect x='3' y='7' width='1' height='1' fill='%23ff8a1c'/>%3Crect x='5' y='7' width='1' height='1' fill='%23ff8a1c'/>%3C/svg>") 0 0 / 100% 100% no-repeat;
    animation: zx-sign-chick 2.4s steps(1) infinite;
    pointer-events: none;
}

body .zx-sign--farm .zx-sign__text {
    font-size: clamp(12px, 4.6cqw, 40px);                  /* room for OFF-GRID HOMESTEADING */
    background-image: linear-gradient(90deg, #e8242c 0% 12.5%, #fff6dc 12.5% 25%, #ffc02e 25% 37.5%, #7dff9a 37.5% 50%, #e8242c 50% 62.5%, #fff6dc 62.5% 75%, #ffc02e 75% 87.5%, #ff5fbf 87.5% 100%);
}

@keyframes zx-sign-shake {
    0%, 80%, 100% { transform: rotate(0deg); }
    83% { transform: rotate(-3deg); }
    86% { transform: rotate(2.6deg); }
    89% { transform: rotate(-1.8deg); }
    92% { transform: rotate(1.1deg); }
    95% { transform: rotate(-0.5deg); }
}

@keyframes zx-sign-chick {
    0%, 40%, 60%, 100% { translate: 0 0; }
    45%, 55% { translate: 0 -4px; }
}


/* ==========================================================================
   19. Pixel pug artists
   Finnigan painting at his easel and Wednesday chopping wood in her flannel.
   Each one is a Custom HTML block holding just an i tag with the class
   zx-pug-painter or zx-pug-chopper. They center themselves wherever they go.
   ========================================================================== */

body :is(.zx-pug-painter, .zx-pug-chopper) {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

body .zx-pug-painter {
    width: clamp(110px, 20vw, 190px);
    aspect-ratio: 40 / 34;
    background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-8fd1ec98c7b1.svg");
}

body .zx-pug-chopper {
    width: clamp(125px, 23vw, 220px);
    aspect-ratio: 46 / 34;
    background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-743971604fe6.svg");
}


/* ==========================================================================
   20. Navigation
   Links get a bold outline and a chunky pixel drop shadow; hovering (or the
   current page) fills them with the title's stepped liquid colours and pops
   them up. The hamburger and close buttons are pixel buttons. On phones the
   menu opens as a frosted purple panel over the right half of the screen.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item__content {
    display: inline-block;
    color: var(--zx-mint) !important;
    -webkit-text-stroke: 2px var(--zx-ink);
    paint-order: stroke fill;
    text-shadow: 3px 3px 0 var(--zx-ink);
}

.wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) {
    color: transparent !important;
    background: linear-gradient(90deg, #ff5fbf 0% 12.5%, var(--zx-white) 12.5% 25%, #7dff9a 25% 37.5%, #ffd23f 37.5% 50%, #1fd6a0 50% 62.5%, var(--zx-white) 62.5% 75%, #ff9fd0 75% 87.5%, #7dff9a 87.5% 100%) 0 0 / 320px 100%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-shadow: none;
    filter: drop-shadow(3px 3px 0 var(--zx-ink));
    translate: -2px -2px;
    animation: zx-title-flow 5s steps(32) infinite;
}

/* Hamburger and close: pixel buttons with a lit edge and a hard shadow. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    padding: 8px !important;
    color: var(--zx-ink) !important;
    background: var(--zx-mint) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 3px var(--zx-ink),
        inset 3px 3px 0 3px rgba(255, 255, 255, 0.7),
        4px 4px 0 var(--zx-ink);
}

.wp-block-navigation__responsive-container-open:is(:hover, :focus-visible),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:is(:hover, :focus-visible) {
    background: linear-gradient(90deg, #ff5fbf 0% 12.5%, var(--zx-white) 12.5% 25%, #7dff9a 25% 37.5%, #ffd23f 37.5% 50%, #1fd6a0 50% 62.5%, var(--zx-white) 62.5% 75%, #ff9fd0 75% 87.5%, #7dff9a 87.5% 100%) 0 0 / 320px 100% !important;
    translate: -2px -2px;
    box-shadow:
        inset 0 0 0 3px var(--zx-ink),
        inset 3px 3px 0 3px rgba(255, 255, 255, 0.5),
        6px 6px 0 var(--zx-ink);
    animation: zx-title-flow 5s steps(32) infinite;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    fill: currentColor;
}


.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container-content.is-menu-open {
    right: 0 !important;
    left: auto !important;
    width: 50% !important;
    max-width: 50% !important;
    background: rgba(20, 10, 64, 0.55) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}

.wp-block-navigation__responsive-container.is-menu-open *:not(.wp-block-navigation-item__content),
.wp-block-navigation__responsive-container-content.is-menu-open *:not(.wp-block-navigation-item__content) {
    background: transparent !important;
}


/* ==========================================================================
   21. Reduced motion
   Visitors who turn off animations in their device settings get still
   frames of every scene instead.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body .zx-pug-painter {
        background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-8ffb89c360f3.svg");
    }

    body .zx-pug-chopper {
        background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-973de2814187.svg");
    }

    body .zx-sign,
    body .zx-sign *,
    body .zx-sign *::before,
    body .zx-sign *::after {
        animation: none !important;
    }

    body .zx-wall__puff {
        display: none;
    }

    .strobe-border,
    .strobe-border::before,
    :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box)::before,
    .wp-block-site-title a,
    .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close,
    body .kirn-slime-box .slime-card-text {
        animation: none !important;
    }

    body .kirn-slime-box .slime-card-text {
        top: 70% !important;
    }

    body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 160' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='210'>%3Cstop offset='0' stop-color='%2334ffa4'/>%3Cstop offset='.07' stop-color='%2306ff99'/>%3Cstop offset='.3' stop-color='%2319a875'/>%3Cstop offset='.65' stop-color='%23107c59'/>%3Cstop offset='1' stop-color='%23073b2b'/>%3C/linearGradient>%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='-100' y1='0' x2='260' y2='0' spreadMethod='repeat'>%3Cstop offset='0' stop-color='%2377ffc0' stop-opacity='.05'/>%3Cstop offset='.18' stop-color='%2377ffc0' stop-opacity='.95'/>%3Cstop offset='.34' stop-color='%2377ffc0' stop-opacity='.1'/>%3Cstop offset='.6' stop-color='%2377ffc0' stop-opacity='.85'/>%3Cstop offset='.78' stop-color='%2377ffc0' stop-opacity='.15'/>%3Cstop offset='1' stop-color='%2377ffc0' stop-opacity='.05'/>%3C/linearGradient>%3Cfilter id='soft' filterUnits='userSpaceOnUse' x='-100' y='0' width='720' height='300'>%3CfeGaussianBlur stdDeviation='2.2'/>%3C/filter>%3C/defs>%3Cg transform='translate(0 90)'>%3Cpath d='M-40,47c53.3,-7.3 156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0V420H-40Z' fill='url(%23b)' opacity='.75'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0V420H-380Z' fill='url(%23b)'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='%231bff99' stroke-opacity='.45' stroke-width='9' filter='url(%23soft)'/>%3Cg transform='translate(0 -1.8)'>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='url(%23c)' stroke-width='1.6'/>%3C/g>%3C/g>%3C/svg>") !important;
    }

    .strobe-border :is(.kirn-slime-box, .cystic-slime-box)::after {
        animation: none;
    }

    .strobe-border .kirn-slime-box   { --zx-hen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 3 18 13' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M10 -1h2v1H10zM9 0h1v1H9zM12 0h1v1H12zM8 1h1v1H8zM12 1h1v1H12zM7 2h1v1H7zM12 2h1v1H12zM7 3h1v1H7zM13 3h1v1H13zM7 4h1v1H7zM14 4h1v1H14zM1 5h2v1H1zM7 5h1v1H7zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM6 6h1v1H6zM12 6h1v1H12zM-1 7h1v1H-1zM4 7h2v1H4zM12 7h1v1H12zM-1 8h1v1H-1zM12 8h1v1H12zM0 9h1v1H0zM12 9h1v1H12zM0 10h1v1H0zM11 10h1v1H11zM1 11h1v1H1zM10 11h1v1H10zM2 12h2v1H2zM5 12h3v1H5zM9 12h1v1H9zM2 13h1v1H2zM5 13h2v1H5zM9 13h1v1H9zM3 14h2v1H3zM7 14h2v1H7z'/>%3Cpath fill='%23e8242c' d='M10 0h2v1H10zM9 1h3v1H9zM12 5h1v1H12z'/>%3Cpath fill='%23a0522d' d='M8 2h4v1H8zM8 3h2v1H8zM11 3h1v1H11zM8 4h4v1H8zM8 5h4v1H8zM7 6h5v1H7zM1 7h2v1H1zM6 7h6v1H6zM1 8h11v1H1zM1 9h2v1H1zM6 9h6v1H6zM1 10h3v1H1zM7 10h4v1H7zM2 11h8v1H2z'/>%3Cpath fill='%23111111' d='M10 3h1v1H10z'/>%3Cpath fill='%23ffb81c' d='M12 3h1v1H12zM12 4h2v1H12z'/>%3Cpath fill='%235a2d12' d='M1 6h2v1H1zM0 7h1v1H0zM3 7h1v1H3zM0 8h1v1H0z'/>%3Cpath fill='%236e3a1a' d='M3 9h3v1H3zM4 10h3v1H4z'/>%3Cpath fill='%23ff8a1c' d='M4 12h1v1H4zM8 12h1v1H8zM3 13h2v1H3zM7 13h2v1H7z'/>%3C/svg>"); }
    .strobe-border .cystic-slime-box { --zx-hen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 3 18 13' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M10 -1h2v1H10zM9 0h1v1H9zM12 0h1v1H12zM8 1h1v1H8zM12 1h1v1H12zM7 2h1v1H7zM12 2h1v1H12zM7 3h1v1H7zM13 3h1v1H13zM7 4h1v1H7zM14 4h1v1H14zM1 5h2v1H1zM7 5h1v1H7zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM6 6h1v1H6zM12 6h1v1H12zM-1 7h1v1H-1zM4 7h2v1H4zM12 7h1v1H12zM-1 8h1v1H-1zM12 8h1v1H12zM0 9h1v1H0zM12 9h1v1H12zM0 10h1v1H0zM11 10h1v1H11zM1 11h1v1H1zM10 11h1v1H10zM2 12h2v1H2zM5 12h3v1H5zM9 12h1v1H9zM2 13h1v1H2zM5 13h2v1H5zM9 13h1v1H9zM3 14h2v1H3zM7 14h2v1H7z'/>%3Cpath fill='%23e8242c' d='M10 0h2v1H10zM9 1h3v1H9zM12 5h1v1H12z'/>%3Cpath fill='%23ffffff' d='M8 2h4v1H8zM8 3h2v1H8zM11 3h1v1H11zM8 4h4v1H8zM8 5h4v1H8zM7 6h5v1H7zM1 7h2v1H1zM6 7h6v1H6zM1 8h11v1H1zM1 9h2v1H1zM6 9h6v1H6zM1 10h3v1H1zM7 10h4v1H7zM2 11h8v1H2z'/>%3Cpath fill='%23111111' d='M10 3h1v1H10z'/>%3Cpath fill='%23ffb81c' d='M12 3h1v1H12zM12 4h2v1H12z'/>%3Cpath fill='%23d9dde4' d='M1 6h2v1H1zM0 7h1v1H0zM3 7h1v1H3zM0 8h1v1H0z'/>%3Cpath fill='%23c9ced6' d='M3 9h3v1H3zM4 10h3v1H4z'/>%3Cpath fill='%23ff8a1c' d='M4 12h1v1H4zM8 12h1v1H8zM3 13h2v1H3zM7 13h2v1H7z'/>%3C/svg>"); }

    .strobe-border :is(.stranger-slime-box, .buchla-slime-box)::after,
    .strobe-border .buchla-slime-box::before {
        animation: none;
    }

    .strobe-border .stranger-slime-box { --zx-hen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 2 18 14' shape-rendering='crispEdges'>%3Cpath fill='%238a8fa3' d='M10 -1h2v1H10zM9 0h1v1H9zM12 0h1v1H12zM8 1h1v1H8zM12 1h1v1H12zM7 2h1v1H7zM12 2h1v1H12zM7 3h1v1H7zM13 3h1v1H13zM7 4h1v1H7zM14 4h1v1H14zM1 5h2v1H1zM7 5h1v1H7zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM6 6h1v1H6zM12 6h1v1H12zM-1 7h1v1H-1zM4 7h2v1H4zM12 7h1v1H12zM-1 8h1v1H-1zM12 8h1v1H12zM0 9h1v1H0zM12 9h1v1H12zM0 10h1v1H0zM11 10h1v1H11zM1 11h1v1H1zM10 11h1v1H10zM2 12h2v1H2zM5 12h3v1H5zM9 12h1v1H9zM2 13h1v1H2zM5 13h2v1H5zM9 13h1v1H9zM3 14h2v1H3zM7 14h2v1H7z'/>%3Cpath fill='%23e8242c' d='M10 0h2v1H10zM9 1h3v1H9zM12 5h1v1H12z'/>%3Cpath fill='%2326262e' d='M8 2h4v1H8zM8 3h2v1H8zM11 3h1v1H11zM8 4h4v1H8zM8 5h4v1H8zM7 6h5v1H7zM1 7h2v1H1zM6 7h6v1H6zM1 8h11v1H1zM1 9h2v1H1zM6 9h6v1H6zM1 10h3v1H1zM7 10h4v1H7zM2 11h8v1H2z'/>%3Cpath fill='%23d9dde4' d='M10 3h1v1H10z'/>%3Cpath fill='%23ffb81c' d='M12 3h1v1H12zM12 4h2v1H12z'/>%3Cpath fill='%234a3d8e' d='M1 6h2v1H1zM0 7h1v1H0zM3 7h1v1H3zM0 8h1v1H0z'/>%3Cpath fill='%233d3d4a' d='M3 9h3v1H3zM4 10h3v1H4z'/>%3Cpath fill='%23ff8a1c' d='M4 12h1v1H4zM8 12h1v1H8zM3 13h2v1H3zM7 13h2v1H7z'/>%3C/svg>"); }
    .strobe-border .buchla-slime-box   { --zx-hen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 2 18 14' shape-rendering='crispEdges'>%3Cpath fill='%23140a2e' d='M10 -1h2v1H10zM9 0h1v1H9zM12 0h1v1H12zM8 1h1v1H8zM12 1h1v1H12zM7 2h1v1H7zM12 2h1v1H12zM7 3h1v1H7zM13 3h1v1H13zM7 4h1v1H7zM14 4h1v1H14zM1 5h2v1H1zM7 5h1v1H7zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM6 6h1v1H6zM12 6h1v1H12zM-1 7h1v1H-1zM4 7h2v1H4zM12 7h1v1H12zM-1 8h1v1H-1zM12 8h1v1H12zM0 9h1v1H0zM12 9h1v1H12zM0 10h1v1H0zM11 10h1v1H11zM1 11h1v1H1zM10 11h1v1H10zM2 12h2v1H2zM5 12h3v1H5zM9 12h1v1H9zM2 13h1v1H2zM5 13h2v1H5zM9 13h1v1H9zM3 14h2v1H3zM7 14h2v1H7z'/>%3Cpath fill='%23e8242c' d='M10 0h2v1H10zM9 1h3v1H9zM12 5h1v1H12z'/>%3Cpath fill='%23ffffff' d='M8 2h4v1H8zM8 3h2v1H8zM11 3h1v1H11zM8 4h4v1H8zM8 5h4v1H8zM7 6h5v1H7zM1 7h2v1H1zM6 7h6v1H6zM1 8h11v1H1zM1 9h2v1H1zM6 9h6v1H6zM1 10h3v1H1zM7 10h4v1H7zM2 11h8v1H2z'/>%3Cpath fill='%23111111' d='M10 3h1v1H10z'/>%3Cpath fill='%23ffb81c' d='M12 3h1v1H12zM12 4h2v1H12z'/>%3Cpath fill='%23d9dde4' d='M1 6h2v1H1zM0 7h1v1H0zM3 7h1v1H3zM0 8h1v1H0z'/>%3Cpath fill='%23c9ced6' d='M3 9h3v1H3zM4 10h3v1H4z'/>%3Cpath fill='%23ff8a1c' d='M4 12h1v1H4zM8 12h1v1H8zM3 13h2v1H3zM7 13h2v1H7z'/>%3C/svg>"); }

    body .stranger-slime-box {
        --zx-slime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 160' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='210'>%3Cstop offset='0' stop-color='%23d4ff8a'/>%3Cstop offset='.07' stop-color='%239dff4f'/>%3Cstop offset='.3' stop-color='%2346d324'/>%3Cstop offset='.65' stop-color='%231f9c18'/>%3Cstop offset='1' stop-color='%230a4a0e'/>%3C/linearGradient>%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='-100' y1='0' x2='260' y2='0' spreadMethod='repeat'>%3Cstop offset='0' stop-color='%23f6ffe0' stop-opacity='.05'/>%3Cstop offset='.18' stop-color='%23f6ffe0' stop-opacity='.95'/>%3Cstop offset='.34' stop-color='%23f6ffe0' stop-opacity='.1'/>%3Cstop offset='.6' stop-color='%23f6ffe0' stop-opacity='.85'/>%3Cstop offset='.78' stop-color='%23f6ffe0' stop-opacity='.15'/>%3Cstop offset='1' stop-color='%23f6ffe0' stop-opacity='.05'/>%3C/linearGradient>%3Cfilter id='soft' filterUnits='userSpaceOnUse' x='-100' y='0' width='720' height='300'>%3CfeGaussianBlur stdDeviation='2.2'/>%3C/filter>%3C/defs>%3Cg transform='translate(0 59)'>%3Cpath d='M-40,47c53.3,-7.3 156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0V420H-40Z' fill='url(%23b)' opacity='.75'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0V420H-380Z' fill='url(%23b)'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='%23c8ff6a' stroke-opacity='.45' stroke-width='9' filter='url(%23soft)'/>%3Cg transform='translate(0 -1.8)'>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='url(%23c)' stroke-width='1.6'/>%3C/g>%3C/g>%3C/svg>");
    }

    body .buchla-slime-box {
        --zx-slime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 160' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='210'>%3Cstop offset='0' stop-color='%23ff9fda'/>%3Cstop offset='.07' stop-color='%23ff6fc1'/>%3Cstop offset='.3' stop-color='%23e04794'/>%3Cstop offset='.65' stop-color='%23cf2073'/>%3Cstop offset='1' stop-color='%238e134a'/>%3C/linearGradient>%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='-100' y1='0' x2='260' y2='0' spreadMethod='repeat'>%3Cstop offset='0' stop-color='%23ffe6f6' stop-opacity='.05'/>%3Cstop offset='.18' stop-color='%23ffe6f6' stop-opacity='.95'/>%3Cstop offset='.34' stop-color='%23ffe6f6' stop-opacity='.1'/>%3Cstop offset='.6' stop-color='%23ffe6f6' stop-opacity='.85'/>%3Cstop offset='.78' stop-color='%23ffe6f6' stop-opacity='.15'/>%3Cstop offset='1' stop-color='%23ffe6f6' stop-opacity='.05'/>%3C/linearGradient>%3Cfilter id='soft' filterUnits='userSpaceOnUse' x='-100' y='0' width='720' height='300'>%3CfeGaussianBlur stdDeviation='2.2'/>%3C/filter>%3C/defs>%3Cg transform='translate(0 40)'>%3Cpath d='M-40,47c53.3,-7.3 156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0V420H-40Z' fill='url(%23b)' opacity='.75'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0V420H-380Z' fill='url(%23b)'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='%23ff85d0' stroke-opacity='.45' stroke-width='9' filter='url(%23soft)'/>%3Cg transform='translate(0 -1.8)'>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='url(%23c)' stroke-width='1.6'/>%3C/g>%3C/g>%3C/svg>");
    }

    body .cystic-slime-box {
        --zx-slime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 160' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='210'>%3Cstop offset='0' stop-color='%23ffe99d'/>%3Cstop offset='.07' stop-color='%23ffe26b'/>%3Cstop offset='.3' stop-color='%23fcb025'/>%3Cstop offset='.65' stop-color='%23e96f00'/>%3Cstop offset='1' stop-color='%23982200'/>%3C/linearGradient>%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='-100' y1='0' x2='260' y2='0' spreadMethod='repeat'>%3Cstop offset='0' stop-color='%23fff9e5' stop-opacity='.05'/>%3Cstop offset='.18' stop-color='%23fff9e5' stop-opacity='.95'/>%3Cstop offset='.34' stop-color='%23fff9e5' stop-opacity='.1'/>%3Cstop offset='.6' stop-color='%23fff9e5' stop-opacity='.85'/>%3Cstop offset='.78' stop-color='%23fff9e5' stop-opacity='.15'/>%3Cstop offset='1' stop-color='%23fff9e5' stop-opacity='.05'/>%3C/linearGradient>%3Cfilter id='soft' filterUnits='userSpaceOnUse' x='-100' y='0' width='720' height='300'>%3CfeGaussianBlur stdDeviation='2.2'/>%3C/filter>%3C/defs>%3Cg transform='translate(0 40)'>%3Cpath d='M-40,47c53.3,-7.3 156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0V420H-40Z' fill='url(%23b)' opacity='.75'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0V420H-380Z' fill='url(%23b)'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='%23ffe382' stroke-opacity='.45' stroke-width='9' filter='url(%23soft)'/>%3Cg transform='translate(0 -1.8)'>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='url(%23c)' stroke-width='1.6'/>%3C/g>%3C/g>%3C/svg>");
    }

    body .kirn-slime-box {
        --zx-slime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 160' preserveAspectRatio='none'>%3Cdefs>%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='210'>%3Cstop offset='0' stop-color='%23d196ff'/>%3Cstop offset='.07' stop-color='%23c061ff'/>%3Cstop offset='.3' stop-color='%23a821f1'/>%3Cstop offset='.65' stop-color='%237c0acb'/>%3Cstop offset='1' stop-color='%2339047b'/>%3C/linearGradient>%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='-100' y1='0' x2='260' y2='0' spreadMethod='repeat'>%3Cstop offset='0' stop-color='%23f2e3ff' stop-opacity='.05'/>%3Cstop offset='.18' stop-color='%23f2e3ff' stop-opacity='.95'/>%3Cstop offset='.34' stop-color='%23f2e3ff' stop-opacity='.1'/>%3Cstop offset='.6' stop-color='%23f2e3ff' stop-opacity='.85'/>%3Cstop offset='.78' stop-color='%23f2e3ff' stop-opacity='.15'/>%3Cstop offset='1' stop-color='%23f2e3ff' stop-opacity='.05'/>%3C/linearGradient>%3Cfilter id='soft' filterUnits='userSpaceOnUse' x='-100' y='0' width='720' height='300'>%3CfeGaussianBlur stdDeviation='2.2'/>%3C/filter>%3C/defs>%3Cg transform='translate(0 52)'>%3Cpath d='M-40,47c53.3,-7.3 156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0s156.7,7.3 210,0s156.7,-7.3 210,0V420H-40Z' fill='url(%23b)' opacity='.75'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0V420H-380Z' fill='url(%23b)'/>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='%23c579ff' stroke-opacity='.45' stroke-width='9' filter='url(%23soft)'/>%3Cg transform='translate(0 -1.8)'>%3Cpath d='M-380,50c45.7,-4.3 134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0s134.3,-4.3 180,0s134.3,4.3 180,0' fill='none' stroke='url(%23c)' stroke-width='1.6'/>%3C/g>%3C/g>%3C/svg>");
    }

    body .sober-coin {
        --zx-coin-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-bfb627f0d339.svg");
        --zx-coin-back: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-ef773a44d891.svg");
        --zx-coin-stage: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-a5e0b1037676.svg");
    }

    body .sober-coin__spin {
        animation: none;
    }

    body .sober-coin::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 74 35' shape-rendering='crispEdges'>%3Cg transform='translate(24 15)'>%3Cpath fill='%23140a2e' d='M12 -1h2v1H12zM11 0h1v1H11zM14 0h1v1H14zM10 1h1v1H10zM15 1h1v1H15zM10 2h1v1H10zM14 2h1v1H14zM9 3h1v1H9zM15 3h1v1H15zM9 4h1v1H9zM16 4h1v1H16zM9 5h1v1H9zM17 5h1v1H17zM9 6h1v1H9zM15 6h2v1H15zM2 7h2v1H2zM9 7h1v1H9zM14 7h1v1H14zM1 8h1v1H1zM4 8h1v1H4zM8 8h1v1H8zM13 8h1v1H13zM0 9h1v1H0zM5 9h1v1H5zM7 9h1v1H7zM13 9h1v1H13zM-1 10h1v1H-1zM5 10h2v1H5zM14 10h1v1H14zM-1 11h1v1H-1zM2 11h1v1H2zM5 11h1v1H5zM15 11h1v1H15zM-1 12h1v1H-1zM1 12h2v1H1zM15 12h1v1H15zM0 13h1v1H0zM2 13h1v1H2zM14 13h1v1H14zM3 14h1v1H3zM13 14h1v1H13zM4 15h1v1H4zM12 15h1v1H12zM5 16h1v1H5zM7 16h2v1H7zM10 16h2v1H10zM4 17h1v1H4zM7 17h1v1H7zM10 17h1v1H10zM5 18h2v1H5zM8 18h2v1H8z'/>%3Cpath fill='%23e8242c' d='M12 0h2v1H12zM11 1h4v1H11zM11 2h3v1H11zM14 6h1v1H14zM13 7h1v1H13z'/>%3Cpath fill='%23ff8a1c' d='M10 3h5v1H10zM10 4h2v1H10zM13 4h2v1H13zM10 5h5v1H10zM10 6h4v1H10zM10 7h3v1H10zM9 8h4v1H9zM8 9h5v1H8zM9 10h3v1H9z'/>%3Cpath fill='%23111111' d='M12 4h1v1H12z'/>%3Cpath fill='%23ffd23f' d='M15 4h1v1H15zM15 5h2v1H15zM6 16h1v1H6zM9 16h1v1H9zM5 17h2v1H5zM8 17h2v1H8z'/>%3Cpath fill='%231f3d2e' d='M2 8h2v1H2zM1 9h1v1H1zM3 9h2v1H3zM0 10h1v1H0zM2 10h1v1H2zM4 10h1v1H4zM0 11h1v1H0zM4 11h1v1H4zM0 12h1v1H0zM4 12h1v1H4zM3 13h1v1H3z'/>%3Cpath fill='%232fbf6a' d='M2 9h1v1H2zM1 10h1v1H1zM3 10h1v1H3zM1 11h1v1H1zM3 11h1v1H3zM3 12h1v1H3z'/>%3Cpath fill='%238a3b12' d='M7 10h2v1H7zM12 10h2v1H12zM6 11h9v1H6zM5 12h10v1H5zM4 13h3v1H4zM11 13h3v1H11zM4 14h3v1H4zM11 14h2v1H11zM5 15h7v1H5z'/>%3Cpath fill='%235a250a' d='M7 13h4v1H7zM7 14h4v1H7z'/>%3C/g>%3C/svg>");
    }

    :root {
        --zx-pug-art: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-b5653b463d8a.svg");
    }
}

/* ==========================================================================
   22. Mutants, more slime and big 3D
   Two sickly slime mutants swim slowly through the Joplin box's ultraviolet
   pool: a six-eyed eel and a four-eyed turtle, both blinking, both weighed
   down by slime. Slime runs heavier over the media tiles (all the way to the
   bottom on the foil-framed video), the games and the gallery paintings.
   The title plaque is a deep, tilted 3D slab, everything in the pug rave is
   bevelled and extruded, and the hens are solid birds that turn to face you
   instead of flipping flat like paper.
   ========================================================================== */

/* The mutants: one layer each, swimming behind the box's words. The box clips
   them, so they slide in from one side and out the other. */
body .kirn-slime-box {
    isolation: isolate;                                    /* lets the mutants swim under the words but over the slime */
}
body .kirn-slime-box::before {
    --zx-eel: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-bd87988b04d9.svg");
    --zx-turtle: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-d1f2b5519950.svg");
    content: "";
    position: absolute;
    top: 60%;
    right: 0;
    bottom: 1%;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background:
        var(--zx-eel) calc(0% - 80px) 22% / clamp(64px, 46%, 92px) auto no-repeat,
        var(--zx-turtle) calc(100% + 60px) 88% / clamp(46px, 34%, 64px) auto no-repeat;
    image-rendering: pixelated;
    opacity: 0.94;
    animation: zx-mutant-swim 84s linear infinite;
}

@keyframes zx-mutant-swim {
    0.00% { background-position: calc(0.00% + -80.0px) 22.0%, calc(100.00% + 60.0px) 93.0%; }
    6.25% { background-position: calc(12.50% + -60.0px) 33.1%, calc(93.75% + 52.5px) 92.9%; }
    12.50% { background-position: calc(25.00% + -40.0px) 13.5%, calc(87.50% + 45.0px) 86.7%; }
    18.75% { background-position: calc(37.50% + -20.0px) 17.4%, calc(81.25% + 37.5px) 82.1%; }
    25.00% { background-position: calc(50.00% + 0.0px) 34.0%, calc(75.00% + 30.0px) 84.8%; }
    31.25% { background-position: calc(62.50% + 20.0px) 17.4%, calc(68.75% + 22.5px) 91.4%; }
    37.50% { background-position: calc(75.00% + 40.0px) 13.5%, calc(62.50% + 15.0px) 93.9%; }
    43.75% { background-position: calc(87.50% + 60.0px) 33.1%, calc(56.25% + 7.5px) 89.1%; }
    50.00% { background-position: calc(100.00% + 80.0px) 22.0%, calc(50.00% + 0.0px) 83.0%; }
    50.01% { background-position: calc(0.00% + -80.0px) 22.0%, calc(49.99% + -0.0px) 82.9%; }
    56.25% { background-position: calc(24.96% + -40.1px) 10.9%, calc(43.75% + -7.5px) 83.1%; }
    62.50% { background-position: calc(49.97% + -0.0px) 30.5%, calc(37.50% + -15.0px) 89.3%; }
    68.75% { background-position: calc(74.97% + 40.0px) 26.6%, calc(31.25% + -22.5px) 93.9%; }
    75.00% { background-position: calc(99.98% + 80.0px) 10.0%, calc(25.00% + -30.0px) 91.2%; }
    81.25% { background-position: calc(100.00% + 80.0px) 26.6%, calc(18.75% + -37.5px) 84.6%; }
    87.50% { background-position: calc(100.00% + 80.0px) 30.5%, calc(12.50% + -45.0px) 82.1%; }
    93.75% { background-position: calc(100.00% + 80.0px) 10.9%, calc(6.25% + -52.5px) 86.9%; }
    100.00% { background-position: calc(100.00% + 80.0px) 22.0%, calc(0.00% + -60.0px) 93.0%; }
}

/* Heavier slime on the media tiles: a thicker cap and runs most of the way down. */
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) .wp-block-image:not([class*="slime-box"] *)::after {
    bottom: calc(-1 * clamp(20px, 3vw, 34px));
    background:
        var(--zx-s-top) 0 0 / 100% clamp(22px, 3.6vw, 40px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(9px, 1.3vw, 15px) 78% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(9px, 1.3vw, 15px) 64% no-repeat,
        var(--zx-s-bottom) 0 100% / 100% clamp(22px, 3.2vw, 36px) no-repeat;
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video)::after {
    background:
        var(--zx-s-top) 0 0 / 100% clamp(22px, 3.6vw, 40px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(9px, 1.3vw, 15px) 80% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(9px, 1.3vw, 15px) 66% no-repeat,
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
}


/* Drips falling off the bottom of every video, hung from the player's wrapper. */
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video) :is(.jetpack-videopress-player__wrapper, .wp-block-embed__wrapper) {
    position: relative;
}
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video) :is(.jetpack-videopress-player__wrapper, .wp-block-embed__wrapper)::after {
    content: "";
    position: absolute;
    top: calc(100% - 6px);
    right: 2%;
    left: 2%;
    z-index: 4;
    height: clamp(24px, 3.6vw, 42px);
    pointer-events: none;
    background: var(--zx-s-bottom) 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(2px 2px 0 rgba(20, 10, 46, 0.55));
    transform-origin: 50% 0;
    animation: zx-ooze 8s ease-in-out -2s infinite;
}

/* The foil-framed video: slime pours over it, runs all the way to the bottom
   and pools there, then drips off long. */
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > .wp-block-jetpack-videopress::after {
    background:
        var(--zx-s-top) 0 0 / 100% clamp(30px, 5vw, 56px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(12px, 1.8vw, 20px) 100% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(12px, 1.8vw, 20px) 100% no-repeat,
        var(--zx-s-pool) 0 100% / 100% clamp(14px, 2.2vw, 24px) no-repeat,
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
}
@media (hover: hover) {
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > .wp-block-jetpack-videopress:hover::after {
        background-position: 0 0, 0 0, 100% 0, 0 100%, -20% 0;
    }
}
:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > .wp-block-jetpack-videopress .jetpack-videopress-player__wrapper::after {
    top: calc(100% - 4px);
    right: -1%;
    left: -1%;
    height: clamp(36px, 5.6vw, 64px);
}

/* Slime cards: a run down the left side as well as the right. */
:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::before {
    left: -6px;
    right: -6px;
    width: auto;
    height: clamp(56px, 9vw, 104px);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cg transform='translate(10 0) scale(-1 1)'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/g>%3C/svg>");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 60' preserveAspectRatio='none'>%3Cg transform='translate(10 0) scale(-1 1)'>%3Cpath d='M0,0H4Q5,12 4.5,22Q4,34 5,44A2.6,2.6 0 1,1 0,46Z'/>%3Cpath d='M0,0H3Q3.6,8 3,14Q2.6,18 3.4,24A1.8,1.8 0 1,1 0,25Z' transform='translate(0 30)'/>%3C/g>%3C/svg>");
    -webkit-mask-size: 9px 100%, 9px 72%;
    mask-size: 9px 100%, 9px 72%;
    -webkit-mask-position: 100% 0, 0 30%;
    mask-position: 100% 0, 0 30%;
}

/* More slime on the games: a fatter cap, runs nearly to the bottom on both
   sides, and longer drips. The mud course keeps a thinner cap for its score. */
body :is(.zx-wall, .zx-track)::before {
    top: -16px;
    left: -12px;
    right: -12px;
    bottom: 4%;
    background:
        var(--zx-slime-top) 0 0 / 100% clamp(50px, 7.6vw, 92px) no-repeat,
        var(--zx-slime-left) 0 8px / clamp(16px, 2.2vw, 28px) 92% no-repeat,
        var(--zx-slime-right) 100% 8px / clamp(16px, 2.2vw, 28px) 84% no-repeat;
}
body .zx-track::before {
    top: -20px;
    background-size: 100% clamp(30px, 4vw, 50px), clamp(16px, 2.2vw, 28px) 92%, clamp(16px, 2.2vw, 28px) 84%;
}
body :is(.zx-wall, .zx-track)::after {
    top: calc(100% - 10px);
    left: -10px;
    right: -10px;
    height: clamp(44px, 6.4vw, 78px);
}

/* The gallery paintings: slime over the top, down both sides and off the
   bottom. They still don't move on hover. */
.entry-content .wp-block-columns .wp-block-image::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(-1 * clamp(20px, 3vw, 34px));
    left: 0;
    z-index: 2;
    pointer-events: none;
    background:
        var(--zx-s-top) 0 0 / 100% clamp(22px, 3.4vw, 38px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(9px, 1.3vw, 15px) 70% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(9px, 1.3vw, 15px) 58% no-repeat,
        var(--zx-s-bottom) 0 100% / 100% clamp(22px, 3.2vw, 36px) no-repeat;
    filter: drop-shadow(1px 2px 0 rgba(20, 10, 46, 0.5));
}

/* The title plaque: a thick slab tipped toward you, extruded fourteen steps
   deep with a hard ink edge, glowing through the theme colours. The letters
   are extruded too. */
body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
    transform: perspective(900px) rotateY(10deg) rotateX(6deg) translateZ(0);
    transform-origin: 0 50%;
    animation: zx-plaque-3d 6s ease-in-out infinite !important;
}
@keyframes zx-plaque-3d {
    0%, 100% { box-shadow:
            1px 1px 0 #1fd6a0,
            2px 2px 0 #1dcb98,
            3px 3px 0 #1cc090,
            4px 4px 0 #1ab688,
            5px 5px 0 #19ab81,
            6px 6px 0 #17a079,
            7px 7px 0 #169571,
            8px 8px 0 #148b69,
            9px 9px 0 #138061,
            10px 10px 0 #117559,
            11px 11px 0 #106a52,
            12px 12px 0 #0e604a,
            13px 13px 0 #0d5542,
            14px 14px 0 #0b4a3a,
            15px 15px 0 #0b0618,
            16px 16px 0 #0b0618,
            18px 22px 18px rgba(10, 4, 24, 0.55),
            0 0 18px 2px rgba(80, 58, 168, 0.75); }
    25%      { box-shadow:
            1px 1px 0 #1fd6a0,
            2px 2px 0 #1dcb98,
            3px 3px 0 #1cc090,
            4px 4px 0 #1ab688,
            5px 5px 0 #19ab81,
            6px 6px 0 #17a079,
            7px 7px 0 #169571,
            8px 8px 0 #148b69,
            9px 9px 0 #138061,
            10px 10px 0 #117559,
            11px 11px 0 #106a52,
            12px 12px 0 #0e604a,
            13px 13px 0 #0d5542,
            14px 14px 0 #0b4a3a,
            15px 15px 0 #0b0618,
            16px 16px 0 #0b0618,
            18px 22px 18px rgba(10, 4, 24, 0.55),
            0 0 18px 2px rgba(246, 207, 244, 0.7); }
    50%      { box-shadow:
            1px 1px 0 #1fd6a0,
            2px 2px 0 #1dcb98,
            3px 3px 0 #1cc090,
            4px 4px 0 #1ab688,
            5px 5px 0 #19ab81,
            6px 6px 0 #17a079,
            7px 7px 0 #169571,
            8px 8px 0 #148b69,
            9px 9px 0 #138061,
            10px 10px 0 #117559,
            11px 11px 0 #106a52,
            12px 12px 0 #0e604a,
            13px 13px 0 #0d5542,
            14px 14px 0 #0b4a3a,
            15px 15px 0 #0b0618,
            16px 16px 0 #0b0618,
            18px 22px 18px rgba(10, 4, 24, 0.55),
            0 0 18px 2px rgba(144, 238, 144, 0.7); }
    75%      { box-shadow:
            1px 1px 0 #1fd6a0,
            2px 2px 0 #1dcb98,
            3px 3px 0 #1cc090,
            4px 4px 0 #1ab688,
            5px 5px 0 #19ab81,
            6px 6px 0 #17a079,
            7px 7px 0 #169571,
            8px 8px 0 #148b69,
            9px 9px 0 #138061,
            10px 10px 0 #117559,
            11px 11px 0 #106a52,
            12px 12px 0 #0e604a,
            13px 13px 0 #0d5542,
            14px 14px 0 #0b4a3a,
            15px 15px 0 #0b0618,
            16px 16px 0 #0b0618,
            18px 22px 18px rgba(10, 4, 24, 0.55),
            0 0 18px 2px rgba(255, 255, 255, 0.6); }
}
body .wp-block-site-title a {
    filter:
        drop-shadow(1px 1px 0 #0d6b51) drop-shadow(1px 1px 0 #0d6b51) drop-shadow(1px 1px 0 #0b5a45)
        drop-shadow(1px 1px 0 #0b5a45) drop-shadow(1px 1px 0 #094a39) drop-shadow(1px 1px 0 #094a39)
        drop-shadow(1px 1px 0 #140a2e) drop-shadow(1px 1px 0 #140a2e)
        drop-shadow(4px 6px 4px rgba(10, 4, 24, 0.55)) !important;
}

/* The coin's rooster: solid, with an extruded edge and a shadow on the coin. */
body .sober-coin::before {
    filter: drop-shadow(1px 1px 0 #0b0618) drop-shadow(1px 1px 0 #0b0618) drop-shadow(0 5px 3px rgba(10, 4, 24, 0.45));
}

/* 3D hens: whole birds (the old box cut their heads off), bevelled and
   extruded, with a front view they show while turning round. */
.strobe-border .kirn-slime-box   { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-90617180de38.svg"); --zx-hen-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-a487e28492d5.svg"); }
.strobe-border .cystic-slime-box { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-f6004477025b.svg"); --zx-hen-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-40858c92ddbf.svg"); }
.strobe-border .stranger-slime-box { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-55da8c2e1b7b.svg"); --zx-hen-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-605198554251.svg"); }
.strobe-border .buchla-slime-box { --zx-hen: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-453a7564e5c3.svg"); --zx-hen-front: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-40858c92ddbf.svg"); }
.strobe-border :is(.kirn-slime-box, .cystic-slime-box, .stranger-slime-box, .buchla-slime-box)::after {
    width: 52px;
    aspect-ratio: 20 / 18;
}
.strobe-border :is(.kirn-slime-box, .cystic-slime-box)::after { animation-name: zx-hen-walk-3d; }
.strobe-border .stranger-slime-box::after { animation-name: zx-hen-flutter-3d; }
.strobe-border .buchla-slime-box::after  { animation-name: zx-hen-nest-3d; }

@keyframes zx-hen-walk-3d {
    0% { left: 4px; transform: scaleX(1); background-image: var(--zx-hen); }
    17% { left: calc((100% - 50px) * 0.42 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    18.5% { transform: scaleX(1) translateY(-7px) rotate(-8deg); background-image: var(--zx-hen); }
    20% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    40% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    42% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    43% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    44% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    45% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    46% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    47% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    47.66% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    47.9% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    49.1% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    49.34% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    50% { left: calc(100% - 50px); transform: scaleX(-1); background-image: var(--zx-hen); }
    67% { left: calc((100% - 50px) * 0.58 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    68.5% { transform: scaleX(-1) translateY(-7px) rotate(-8deg); background-image: var(--zx-hen); }
    70% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    90% { left: 4px; transform: scaleX(-1); background-image: var(--zx-hen); }
    92% { left: 4px; transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    93% { left: 4px; transform: scaleX(-1); background-image: var(--zx-hen); }
    94% { left: 4px; transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    95% { left: 4px; transform: scaleX(-1); background-image: var(--zx-hen); }
    96% { left: 4px; transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    97% { left: 4px; transform: scaleX(-1); background-image: var(--zx-hen); }
    97.66% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    97.9% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    99.1% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    99.34% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    100% { left: 4px; transform: scaleX(1); background-image: var(--zx-hen); }
}

@keyframes zx-hen-flutter-3d {
    0% { left: 4px; transform: scaleX(1); background-image: var(--zx-hen); }
    10% { left: calc((100% - 50px) * 0.18 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    12% { transform: scaleX(1) translateY(-16px) rotate(-6deg); background-image: var(--zx-hen); }
    14% { left: calc((100% - 50px) * 0.3 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    20% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    21% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    22% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    23% { left: calc((100% - 50px) * 0.36 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    32% { left: calc((100% - 50px) * 0.62 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    34% { transform: scaleX(1) translateY(-20px) rotate(-8deg); background-image: var(--zx-hen); }
    36% { left: calc((100% - 50px) * 0.76 + 4px); transform: scaleX(1); background-image: var(--zx-hen); }
    44% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    46% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    47% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    48% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    49% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    49.66% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    49.9% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    51.1% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    51.34% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    52% { left: calc(100% - 50px); transform: scaleX(-1); background-image: var(--zx-hen); }
    62% { left: calc((100% - 50px) * 0.7 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    64% { transform: scaleX(-1) translateY(-14px) rotate(-6deg); background-image: var(--zx-hen); }
    66% { left: calc((100% - 50px) * 0.58 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    76% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    77% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    78% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    79% { left: calc((100% - 50px) * 0.4 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    86% { left: calc((100% - 50px) * 0.16 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    88% { transform: scaleX(-1) translateY(-18px) rotate(-8deg); background-image: var(--zx-hen); }
    90% { left: 4px; transform: scaleX(-1); background-image: var(--zx-hen); }
    92.2% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    93% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    97% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    97.8% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    100% { left: 4px; transform: scaleX(1); background-image: var(--zx-hen); }
}

@keyframes zx-hen-nest-3d {
    0% { left: 6px; transform: translateY(4px) scaleX(1); background-image: var(--zx-hen); }
    10% { left: 6px; transform: translateY(4px) scaleX(1) rotate(-4deg); background-image: var(--zx-hen); }
    18% { left: 6px; transform: translateY(4px) scaleX(1) rotate(3deg); background-image: var(--zx-hen); }
    26% { left: 6px; transform: translateY(4px) scaleX(1); background-image: var(--zx-hen); }
    29% { left: 6px; transform: translateY(-6px) scaleX(1); background-image: var(--zx-hen); }
    31% { left: 14px; transform: translateY(0) scaleX(1); background-image: var(--zx-hen); }
    52% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    54% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    55% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    56% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    57% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    58% { left: calc(100% - 50px); transform: scaleX(1) rotate(24deg); background-image: var(--zx-hen); }
    59% { left: calc(100% - 50px); transform: scaleX(1); background-image: var(--zx-hen); }
    59.66% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    59.9% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    61.1% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    61.34% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    62% { left: calc(100% - 50px); transform: scaleX(-1); background-image: var(--zx-hen); }
    74% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    75% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    76% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    77% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1) rotate(24deg); background-image: var(--zx-hen); }
    78% { left: calc((100% - 50px) * 0.5 + 4px); transform: scaleX(-1); background-image: var(--zx-hen); }
    91% { left: 6px; transform: scaleX(-1); background-image: var(--zx-hen); }
    91.44% { transform: scaleX(-0.5); background-image: var(--zx-hen); }
    91.6% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    92.4% { transform: scaleX(.85); background-image: var(--zx-hen-front); }
    92.56% { transform: scaleX(0.5); background-image: var(--zx-hen); }
    93% { left: 6px; transform: scaleX(1); background-image: var(--zx-hen); }
    96% { left: 6px; transform: translateY(4px) scaleX(1); background-image: var(--zx-hen); }
    100% { left: 6px; transform: translateY(4px) scaleX(1); background-image: var(--zx-hen); }
}

@media (prefers-reduced-motion: reduce) {
    body .kirn-slime-box::before,
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video) :is(.jetpack-videopress-player__wrapper, .wp-block-embed__wrapper)::after,
    .strobe-border :is(.kirn-slime-box, .cystic-slime-box, .stranger-slime-box, .buchla-slime-box)::after {
        animation: none !important;
    }
    body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
        animation: none !important;
        box-shadow:
            1px 1px 0 #1fd6a0,
            2px 2px 0 #1dcb98,
            3px 3px 0 #1cc090,
            4px 4px 0 #1ab688,
            5px 5px 0 #19ab81,
            6px 6px 0 #17a079,
            7px 7px 0 #169571,
            8px 8px 0 #148b69,
            9px 9px 0 #138061,
            10px 10px 0 #117559,
            11px 11px 0 #106a52,
            12px 12px 0 #0e604a,
            13px 13px 0 #0d5542,
            14px 14px 0 #0b4a3a,
            15px 15px 0 #0b0618,
            16px 16px 0 #0b0618,
            18px 22px 18px rgba(10, 4, 24, 0.55),
            0 0 18px 2px rgba(80, 58, 168, 0.75);
    }
}

/* ==========================================================================
   23. Hyper-real slime, Nessie, the octopus, and a flat-on 3D title
   All the frame slime is now glossy and wet: a deep body, a dark lip, a hot
   specular streak, glints on every drip, foam, trapped and rising bubbles,
   and droplets that let go and fall. The pieces are built by the page's
   slime generator, so their markup lives in this section only.
   The mud course wears the Joplin box's ultraviolet slime, with a plain
   band on top so nothing drips over its score. Extra slime is packed in
   wherever the frames showed a gap.
   ========================================================================== */

/* The drawing game: one thick, rounded slime cap over the whole top border
   (no stacked strips), fat runs down both sides tucked under it, long drips
   off the bottom, and glossy slime over the whiteboard. */
body .zx-wall {
    --zx-wall-cap: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-f12b65a9eb25.svg");
}
body .zx-wall::before {
    top: calc(-18px - var(--zx-duck-room));
    left: -14px;
    right: -14px;
    bottom: 3%;
    background:
        var(--zx-ducks) 50% 0 / auto var(--zx-duck-h) no-repeat,
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-18fd589ac351.svg") 0 var(--zx-duck-room) / 100% clamp(84px, 12.4vw, 128px) no-repeat,
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-3aea00d49348.svg") 0 calc(30px + var(--zx-duck-room)) / clamp(20px, 2.8vw, 32px) 94% no-repeat,
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-d722e8e3c5f9.svg") 100% calc(30px + var(--zx-duck-room)) / clamp(20px, 2.8vw, 32px) 90% no-repeat;
}
body .zx-wall::after {
    top: calc(100% - 12px);
    left: -12px;
    right: -12px;
    height: clamp(52px, 7.6vw, 90px);
    background: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-36c3564929cc.svg") 0 0 / 100% 100% no-repeat;
}

/* The mud course: ultraviolet slime. One smooth band rolls over the top edge
   (no drips over the score), runs go down both sides, drips fall off the
   bottom, and its frame line is purple to match. */
body .zx-track {
    box-shadow: inset 0 0 0 4px var(--zx-ink), 0 0 0 3px #b05cff, 0 0 0 6px var(--zx-ink), 8px 8px 0 6px var(--zx-ink);
}
body .zx-track::before {
    top: -30px;
    left: -14px;
    right: -14px;
    bottom: 4%;
    background:
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-db39b395e944.svg") 0 0 / 100% 46px no-repeat,
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-5ddcd3ec7e01.svg") 0 24px / clamp(20px, 2.6vw, 30px) 96% no-repeat,
        url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-4ef0c4ec3443.svg") 100% 24px / clamp(20px, 2.6vw, 30px) 92% no-repeat;
}
body .zx-track::after {
    top: calc(100% - 12px);
    left: -12px;
    right: -12px;
    height: clamp(52px, 7.4vw, 88px);
    background: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-3df88c822f8c.svg") 0 0 / 100% 100% no-repeat;
}

/* Keeps the mud course snappy: its slime is still (painted once), and the
   slime on both games sits on its own layer so it never repaints with the game. */
body .zx-track::before,
body .zx-track::after {
    animation: none !important;
}
body .zx-track::before {                                   /* top band lifted a little off the score */
    top: -37px;
}
body :is(.zx-wall, .zx-track)::before,
body :is(.zx-wall, .zx-track)::after {
    will-change: transform;
    transform: translateZ(0);
}

/* Slime cards' own drips: a wet sheen on the film, glints that catch on
   each drip, and darker, heavier bulbs. */
:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::after,
:is(.wp-block-grid, .is-layout-grid) > :has([class*="slime-box"])::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0 7%, rgba(255, 255, 255, 0) 22% 60%, rgba(10, 4, 24, 0.28) 100%),
        radial-gradient(circle at 32% 78%, rgba(255, 255, 255, 0.85) 0 1.6px, transparent 2.4px) 0 0 / 13px 100%,
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.8px) 5px 0 / 17px 100%,
        linear-gradient(90deg, var(--zx-drip-hi) 0 8%, var(--zx-drip) 22% 70%, color-mix(in srgb, var(--zx-drip) 70%, #140a2e));
}

/* Nessie: surfaces in the honey-gold Memories box. Her humps glide past, then
   both heads rise out of the goo glowing a sickly green, look around, blink
   their mismatched eyes, gag up some slime and sink back down. */
body .cystic-slime-box {
    isolation: isolate;
}
body .cystic-slime-box::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1%;
    left: 0;
    z-index: -1;
    height: 48%;
    pointer-events: none;
    background: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-86a23ff4b92f.svg") 50% 100% / min(96%, 170px) auto no-repeat;
    image-rendering: pixelated;
}

/* The octopus: a goofy glowing mutant in the pink Buchla slime, with arms of
   every size (one sprouts out of his head), flailing and slinging gobs of
   slime. He wanders along the bottom of the box, behind the words. */
body .strobe-border .buchla-slime-box {
    background-image: url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-598751f5c9d9.svg"), var(--zx-slime) !important;
    background-size: clamp(150px, 58%, 210px) auto, 100% 100% !important;   /* the octopus is pixel art now */
    background-position: right 6% bottom -40px, 0 0 !important;
    background-repeat: no-repeat !important;
    animation: zx-octo-wander 28s ease-in-out infinite !important;
}
@keyframes zx-octo-wander {
    0%, 100% { background-position: right 6% bottom -40px, 0 0; }
    25%      { background-position: right 2% bottom -34px, 0 0; }
    50%      { background-position: right 22% bottom -44px, 0 0; }
    75%      { background-position: right 12% bottom -36px, 0 0; }
}

/* Title: no more tilt. It faces you square on as a thick slab, extruded
   eighteen steps deep with bevelled edges, gently lifting off the page and
   settling back, its shadow spreading as it rises. */
body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
    transform: none;
    animation: zx-title-slab 6s ease-in-out infinite !important;
}
@keyframes zx-title-slab {
    0%, 100% { translate: 0 0; box-shadow:
            0.3px 1px 0 #1fd6a0,
            0.7px 2px 0 #1ecd99,
            1.0px 3px 0 #1dc493,
            1.4px 4px 0 #1bbb8c,
            1.8px 5px 0 #1ab286,
            2.1px 6px 0 #19aa7f,
            2.4px 7px 0 #18a179,
            2.8px 8px 0 #169872,
            3.1px 9px 0 #158f6c,
            3.5px 10px 0 #148665,
            3.8px 11px 0 #137d5f,
            4.2px 12px 0 #117458,
            4.5px 13px 0 #106b52,
            4.9px 14px 0 #0f634b,
            5.2px 15px 0 #0e5a45,
            5.6px 16px 0 #0c513e,
            5.9px 17px 0 #0b4838,
            6.3px 18px 0 #0a3f31,
            7px 19px 0 #0b0618,
            7px 21px 0 #0b0618,
            10px 26px 18px rgba(10, 4, 24, 0.55),
            0 0 20px 3px rgba(80, 58, 168, 0.75),
            inset 0 8px 0 rgba(255, 255, 255, 0.30),
            inset 8px 0 0 rgba(255, 255, 255, 0.14),
            inset 0 -12px 0 rgba(10, 4, 24, 0.26),
            inset -10px 0 0 rgba(10, 4, 24, 0.18); }
    25%      { translate: 0 -2px; box-shadow:
            0.3px 1px 0 #1fd6a0,
            0.7px 2px 0 #1ecd99,
            1.0px 3px 0 #1dc493,
            1.4px 4px 0 #1bbb8c,
            1.8px 5px 0 #1ab286,
            2.1px 6px 0 #19aa7f,
            2.4px 7px 0 #18a179,
            2.8px 8px 0 #169872,
            3.1px 9px 0 #158f6c,
            3.5px 10px 0 #148665,
            3.8px 11px 0 #137d5f,
            4.2px 12px 0 #117458,
            4.5px 13px 0 #106b52,
            4.9px 14px 0 #0f634b,
            5.2px 15px 0 #0e5a45,
            5.6px 16px 0 #0c513e,
            5.9px 17px 0 #0b4838,
            6.3px 18px 0 #0a3f31,
            7px 19px 0 #0b0618,
            7px 21px 0 #0b0618,
            10px 28px 21px rgba(10, 4, 24, 0.51),
            0 0 20px 3px rgba(246, 207, 244, 0.7),
            inset 0 8px 0 rgba(255, 255, 255, 0.30),
            inset 8px 0 0 rgba(255, 255, 255, 0.14),
            inset 0 -12px 0 rgba(10, 4, 24, 0.26),
            inset -10px 0 0 rgba(10, 4, 24, 0.18); }
    50%      { translate: 0 -4px; box-shadow:
            0.3px 1px 0 #1fd6a0,
            0.7px 2px 0 #1ecd99,
            1.0px 3px 0 #1dc493,
            1.4px 4px 0 #1bbb8c,
            1.8px 5px 0 #1ab286,
            2.1px 6px 0 #19aa7f,
            2.4px 7px 0 #18a179,
            2.8px 8px 0 #169872,
            3.1px 9px 0 #158f6c,
            3.5px 10px 0 #148665,
            3.8px 11px 0 #137d5f,
            4.2px 12px 0 #117458,
            4.5px 13px 0 #106b52,
            4.9px 14px 0 #0f634b,
            5.2px 15px 0 #0e5a45,
            5.6px 16px 0 #0c513e,
            5.9px 17px 0 #0b4838,
            6.3px 18px 0 #0a3f31,
            7px 19px 0 #0b0618,
            7px 21px 0 #0b0618,
            10px 30px 24px rgba(10, 4, 24, 0.47),
            0 0 20px 3px rgba(144, 238, 144, 0.7),
            inset 0 8px 0 rgba(255, 255, 255, 0.30),
            inset 8px 0 0 rgba(255, 255, 255, 0.14),
            inset 0 -12px 0 rgba(10, 4, 24, 0.26),
            inset -10px 0 0 rgba(10, 4, 24, 0.18); }
    75%      { translate: 0 -2px; box-shadow:
            0.3px 1px 0 #1fd6a0,
            0.7px 2px 0 #1ecd99,
            1.0px 3px 0 #1dc493,
            1.4px 4px 0 #1bbb8c,
            1.8px 5px 0 #1ab286,
            2.1px 6px 0 #19aa7f,
            2.4px 7px 0 #18a179,
            2.8px 8px 0 #169872,
            3.1px 9px 0 #158f6c,
            3.5px 10px 0 #148665,
            3.8px 11px 0 #137d5f,
            4.2px 12px 0 #117458,
            4.5px 13px 0 #106b52,
            4.9px 14px 0 #0f634b,
            5.2px 15px 0 #0e5a45,
            5.6px 16px 0 #0c513e,
            5.9px 17px 0 #0b4838,
            6.3px 18px 0 #0a3f31,
            7px 19px 0 #0b0618,
            7px 21px 0 #0b0618,
            10px 28px 21px rgba(10, 4, 24, 0.51),
            0 0 20px 3px rgba(255, 255, 255, 0.6),
            inset 0 8px 0 rgba(255, 255, 255, 0.30),
            inset 8px 0 0 rgba(255, 255, 255, 0.14),
            inset 0 -12px 0 rgba(10, 4, 24, 0.26),
            inset -10px 0 0 rgba(10, 4, 24, 0.18); }
}
body .wp-block-site-title a {
    filter:
        drop-shadow(0 1px 0 #12a07a) drop-shadow(0 1px 0 #0f8d6b) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(0 1px 0 #095a45) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(0 1px 0 #063d2f) drop-shadow(0 1px 0 #140a2e) drop-shadow(1px 1px 0 #140a2e)
        drop-shadow(3px 7px 4px rgba(10, 4, 24, 0.6)) !important;
}

/* The sobriety coin, smaller. */
body .sober-coin {
    width: min(100%, 200px);
    margin: min(10vw, 52px) auto 0;
}

@media (prefers-reduced-motion: reduce) {
    body .strobe-border .buchla-slime-box {
        animation: none !important;
    }
    body :is(.wp-block-site-title.has-background, .has-background:has(> .wp-block-site-title), .title-slime-box) {
        animation: none !important;
        box-shadow:
            0.3px 1px 0 #1fd6a0,
            0.7px 2px 0 #1ecd99,
            1.0px 3px 0 #1dc493,
            1.4px 4px 0 #1bbb8c,
            1.8px 5px 0 #1ab286,
            2.1px 6px 0 #19aa7f,
            2.4px 7px 0 #18a179,
            2.8px 8px 0 #169872,
            3.1px 9px 0 #158f6c,
            3.5px 10px 0 #148665,
            3.8px 11px 0 #137d5f,
            4.2px 12px 0 #117458,
            4.5px 13px 0 #106b52,
            4.9px 14px 0 #0f634b,
            5.2px 15px 0 #0e5a45,
            5.6px 16px 0 #0c513e,
            5.9px 17px 0 #0b4838,
            6.3px 18px 0 #0a3f31,
            7px 19px 0 #0b0618,
            7px 21px 0 #0b0618,
            10px 26px 18px rgba(10, 4, 24, 0.55),
            0 0 20px 3px rgba(80, 58, 168, 0.75),
            inset 0 8px 0 rgba(255, 255, 255, 0.30),
            inset 8px 0 0 rgba(255, 255, 255, 0.14),
            inset 0 -12px 0 rgba(10, 4, 24, 0.26),
            inset -10px 0 0 rgba(10, 4, 24, 0.18);
    }
}

/* ==========================================================================
   24. Readable lists: blog posts and the links page ("title twin")
   The foil stays. Blog titles, dates, page numbers and links match the site
   title: capitals filled with the same stepped colour blocks (violet, pink,
   white, mint, teal) that slide along in steps, a dark ink outline, and the
   title's stepped green 3D edge. Each line runs a little behind the one
   above it, so the colours ripple down the list.
   ========================================================================== */

body .wp-block-query .wp-block-post-title a,
body .wp-block-query .wp-block-post-date,
body .wp-block-query-pagination :is(a, span.page-numbers),
body.page-id-107 .wp-block-post-content > p:has(> a) > a {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 240px 100% !important;
    background-repeat: repeat !important;
    background-position: 0 0;                              /* not !important, so the colours can slide */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    filter:
        drop-shadow(1.5px 0 0 var(--zx-ink)) drop-shadow(-1.5px 0 0 var(--zx-ink))
        drop-shadow(0 1.5px 0 var(--zx-ink)) drop-shadow(0 -1.5px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 var(--zx-ink));
    animation: zx-twin-flow 10s steps(32) infinite;
}

/* Blog list */
body .wp-block-query .wp-block-post-template > .wp-block-post {
    margin-bottom: 14px !important;
}
body .wp-block-query .wp-block-post > .wp-block-group {
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 24px !important;
}
body .wp-block-query .wp-block-post-title {
    flex: 1 1 24ch;
    font-weight: 800 !important;
    line-height: 1.22;
}
body .wp-block-query .wp-block-post-date {
    flex: none;
    font-size: 18px !important;
    font-weight: 800;
    white-space: nowrap;
    background-size: 120px 100% !important;
}
body .wp-block-query .wp-block-post-date :is(a, time) {
    color: inherit !important;
    text-decoration: none;
}

/* Page numbers under the blog list */
body .wp-block-query-pagination :is(a, span.page-numbers) {
    margin: 0 6px;
    font-size: 22px;
    font-weight: 800;
}

/* Links page */
body.page-id-107 .wp-block-post-content > p:has(> a) {
    background: none !important;
}
body.page-id-107 .wp-block-post-content > p:has(> a) > a {
    font-weight: 800;
}

/* Hover: the line pops up a little and its colours speed up. */
body .wp-block-query .wp-block-post-title a:is(:hover, :focus-visible),
body.page-id-107 .wp-block-post-content > p:has(> a) > a:is(:hover, :focus-visible) {
    translate: -2px -2px;
    animation-duration: 3s;
}

/* The colours ripple down the list instead of all moving together. */
body .wp-block-query .wp-block-post:nth-child(4n+2) :is(.wp-block-post-title a, .wp-block-post-date),
body.page-id-107 .wp-block-post-content > p:nth-child(4n+2) > a { animation-delay: -2.5s !important; }
body .wp-block-query .wp-block-post:nth-child(4n+3) :is(.wp-block-post-title a, .wp-block-post-date),
body.page-id-107 .wp-block-post-content > p:nth-child(4n+3) > a { animation-delay: -5s !important; }
body .wp-block-query .wp-block-post:nth-child(4n) :is(.wp-block-post-title a, .wp-block-post-date),
body.page-id-107 .wp-block-post-content > p:nth-child(4n) > a { animation-delay: -7.5s !important; }

@keyframes zx-twin-flow {
    to { background-position: 240px 0; }
}

@media (prefers-reduced-motion: reduce) {
    body .wp-block-query .wp-block-post-title a,
    body .wp-block-query .wp-block-post-date,
    body .wp-block-query-pagination :is(a, span.page-numbers),
    body.page-id-107 .wp-block-post-content > p:has(> a) > a {
        animation: none;
    }
}

/* ==========================================================================
   25. Mutant duck family and video bubbles
   A pixel-art mutant duck family paddles through the slime on top of the
   drawing game: mama (four eyes, three beaks, neon colours that cycle) flaps
   and struggles, sinking and bobbing and flinging gobs, with four three-eyed,
   two-beaked ducklings paddling hard behind her. Every video gets a glossy
   slime pool along its bottom whose ends sweep up the sides in rounded
   fillets; real-looking bubbles swell out of it, breathe, pop with a ripple
   and splatter gobs (some stick to the glass and slide off). Rounded corner
   fillets blend the top slime into the side runs, and the drip bar under
   each video has rounded ends.
   ========================================================================== */


body .zx-wall {
    --zx-duck-h: clamp(46px, 7.4vw, 70px);
    --zx-duck-room: calc(var(--zx-duck-h) * 0.72);
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video)::after {
    background:
        var(--zx-s-top) 0 0 / 100% clamp(22px, 3.6vw, 40px) no-repeat,
        var(--zx-s-corner-l) 0 0 / clamp(22px, 3.4vw, 38px) clamp(22px, 3.4vw, 38px) no-repeat,
        var(--zx-s-corner-r) 100% 0 / clamp(22px, 3.4vw, 38px) clamp(22px, 3.4vw, 38px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(9px, 1.3vw, 15px) 80% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(9px, 1.3vw, 15px) 66% no-repeat,
        var(--zx-v-bubbles) 0 100% / 100% clamp(34px, 5.4vw, 56px) no-repeat,
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
    will-change: transform;
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > .wp-block-jetpack-videopress.wp-block-jetpack-videopress::after {                 /* the foil-framed video */
    background:
        var(--zx-s-top) 0 0 / 100% clamp(30px, 5vw, 56px) no-repeat,
        var(--zx-s-corner-l) 0 0 / clamp(30px, 4.8vw, 52px) clamp(30px, 4.8vw, 52px) no-repeat,
        var(--zx-s-corner-r) 100% 0 / clamp(30px, 4.8vw, 52px) clamp(30px, 4.8vw, 52px) no-repeat,
        var(--zx-s-left) 0 0 / clamp(12px, 1.8vw, 20px) 100% no-repeat,
        var(--zx-s-right) 100% 0 / clamp(12px, 1.8vw, 20px) 100% no-repeat,
        var(--zx-v-bubbles) 0 100% / 100% clamp(40px, 6.4vw, 64px) no-repeat,
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%) 120% 0 / 250% 100% no-repeat;
}

@media (hover: hover) {
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video):hover::after,
    :is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) > .wp-block-jetpack-videopress.wp-block-jetpack-videopress:hover::after {
        background-position: 0 0, 0 0, 100% 0, 0 0, 100% 0, 0 100%, -20% 0;
    }
}

:is(.wp-block-grid, .is-layout-grid):has([class*="slime-box"]) :is(.wp-block-video, .wp-block-jetpack-videopress, .wp-block-embed.is-type-video) :is(.jetpack-videopress-player__wrapper, .wp-block-embed__wrapper)::after {
    -webkit-mask: var(--zx-s-endmask) 0 0 / 100% 100% no-repeat;
    mask: var(--zx-s-endmask) 0 0 / 100% 100% no-repeat;
}

/* ==========================================================================
   26. Navigation "title twin"
   The menu links (desktop and the phone menu) match the site title and the
   blog titles: stepped colour blocks that slide along, a dark ink outline and
   the stepped green 3D edge. Hovering, or the page you are on, pops the link
   up and speeds up its colours.
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 240px 100% !important;
    background-repeat: repeat !important;
    background-position: 0 0;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: 0;
    text-shadow: none;
    font-weight: 800;
    filter:
        drop-shadow(2px 0 0 var(--zx-ink)) drop-shadow(-2px 0 0 var(--zx-ink))
        drop-shadow(0 2px 0 var(--zx-ink)) drop-shadow(0 -2px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 var(--zx-ink));
    animation: zx-twin-flow 10s steps(32) infinite;
}

.wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) {
    translate: -2px -2px;
    filter:
        drop-shadow(2px 0 0 var(--zx-ink)) drop-shadow(-2px 0 0 var(--zx-ink))
        drop-shadow(0 2px 0 var(--zx-ink)) drop-shadow(0 -2px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 #063d2f) drop-shadow(1px 1px 0 var(--zx-ink))
        drop-shadow(2px 2px 0 var(--zx-ink));
    animation: zx-twin-flow 3s steps(32) infinite;
}

/* the colours ripple across the menu */
.wp-block-navigation .wp-block-navigation-item:nth-child(4n+2) > .wp-block-navigation-item__content { animation-delay: -2.5s; }
.wp-block-navigation .wp-block-navigation-item:nth-child(4n+3) > .wp-block-navigation-item__content { animation-delay: -5s; }
.wp-block-navigation .wp-block-navigation-item:nth-child(4n) > .wp-block-navigation-item__content { animation-delay: -7.5s; }

/* ==========================================================================
   27. Footer site title "title twin"
   The small FACE THE SOUND EARTH in the footer matches the big one and the
   menu: bold capitals, colour blocks sized for its smaller letters, an ink
   outline that doesn't eat the colours, and the stepped green 3D edge.
   ========================================================================== */

footer .wp-block-site-title a {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 240px 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    filter:
        drop-shadow(2px 0 0 var(--zx-ink)) drop-shadow(-2px 0 0 var(--zx-ink))
        drop-shadow(0 2px 0 var(--zx-ink)) drop-shadow(0 -2px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 var(--zx-ink)) !important;
    animation: zx-twin-flow 10s steps(32) infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    footer .wp-block-site-title a {
        animation: none !important;
    }
}

/* ==========================================================================
   28. Sober-day counter "title twin"
   The "days, one day at a time" line at the bottom of the home and blog pages
   matches the titles: colour blocks, ink outline, stepped green 3D edge.
   ========================================================================== */

body .sober-coin__days {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 240px 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    filter:
        drop-shadow(2px 0 0 var(--zx-ink)) drop-shadow(-2px 0 0 var(--zx-ink))
        drop-shadow(0 2px 0 var(--zx-ink)) drop-shadow(0 -2px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 var(--zx-ink)) !important;
    animation: zx-twin-flow 10s steps(32) -4s infinite !important;
}

@media (prefers-reduced-motion: reduce) {
    body .sober-coin__days {
        animation: none !important;
    }
}

/* ==========================================================================
   29. Sobriety coin edge
   A solid rim instead of two thin discs: 48 short pieces (the empty i elements in
   the coin's footer block) stand around the edge of the coin, each one 8px
   deep so the rim meets both faces. They carry fine ridges across the
   thickness, like the reeded edge of a quarter, with darker bevels at both
   faces, and each piece is shaded by where it sits so the rim catches light.
   ========================================================================== */

body .sober-coin__edge {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

body .sober-coin__edge > i {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateZ(var(--a));
}

body .sober-coin__edge > i::before {
    content: "";
    position: absolute;
    top: calc(0.8% - 4px);
    left: 46.6%;
    width: 6.8%;
    height: 8px;
    transform: rotateX(90deg);
    background:
        linear-gradient(180deg, rgba(20, 22, 30, 0.45), rgba(20, 22, 30, 0) 28%, rgba(255, 255, 255, 0.25) 50%, rgba(20, 22, 30, 0) 72%, rgba(20, 22, 30, 0.45)),
        repeating-linear-gradient(90deg, #f2f4f8 0 1px, #9aa1ac 1px 1.6px, #6e7580 1.6px 2.2px);
    filter: brightness(calc(0.9 + 0.3 * cos(var(--a) - 40deg)));
}

/* ==========================================================================
   30. Article pages "title twin"
   Inside a blog post: the post's own title and the previous / next post
   links match the site title (colour blocks that slide, ink outline, stepped
   green 3D edge). The tags and categories are too small for the full 3D
   edge, so they get the same colours with a thin outline and a one-step
   green shadow.
   ========================================================================== */

body.single main .wp-block-post-title:not(.wp-block-query *),
body.single .wp-block-post-navigation-link {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 240px 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    filter:
        drop-shadow(2px 0 0 var(--zx-ink)) drop-shadow(-2px 0 0 var(--zx-ink))
        drop-shadow(0 2px 0 var(--zx-ink)) drop-shadow(0 -2px 0 var(--zx-ink))
        drop-shadow(0 1px 0 #12a07a) drop-shadow(1px 1px 0 #0d7a5d)
        drop-shadow(0 1px 0 #0b6a51) drop-shadow(1px 1px 0 #084c3a)
        drop-shadow(1px 1px 0 var(--zx-ink));
    animation: zx-twin-flow 10s steps(32) infinite;
}

body.single .wp-block-post-navigation-link :is(a, span) {
    color: inherit !important;
    text-decoration: none !important;
}
body.single .wp-block-post-navigation-link a:is(:hover, :focus-visible) {
    filter: brightness(1.15);
}
body.single .post-navigation-link-next {
    animation-delay: -5s;
}

/* Tags and categories under the post */
body .wp-block-post-terms a,
body .wp-block-tag-cloud a {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--zx-violet) 0 12.5%, #ff5fbf 12.5% 25%, var(--zx-white) 25% 37.5%, #7dff9a 37.5% 50%, var(--zx-violet) 50% 62.5%, #1fd6a0 62.5% 75%, var(--zx-white) 75% 87.5%, #ff5fbf 87.5% 100%) !important;
    background-size: 120px 100% !important;
    background-repeat: repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-decoration: none !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    filter:
        drop-shadow(1px 0 0 var(--zx-ink)) drop-shadow(-1px 0 0 var(--zx-ink))
        drop-shadow(0 1px 0 var(--zx-ink)) drop-shadow(0 -1px 0 var(--zx-ink))
        drop-shadow(1px 1px 0 #12a07a);
    animation: zx-twin-flow-s 10s steps(32) infinite;
}
body .wp-block-post-terms a:nth-of-type(3n+2),
body .wp-block-tag-cloud a:nth-of-type(3n+2) { animation-delay: -3.3s; }
body .wp-block-post-terms a:nth-of-type(3n),
body .wp-block-tag-cloud a:nth-of-type(3n) { animation-delay: -6.6s; }
body .wp-block-post-terms,
body .wp-block-tag-cloud {
    font-size: 16px !important;
}

@keyframes zx-twin-flow-s {
    to { background-position: 120px 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.single main .wp-block-post-title:not(.wp-block-query *),
    body.single .wp-block-post-navigation-link,
    body .wp-block-post-terms a,
    body .wp-block-tag-cloud a {
        animation: none;
    }
}

/* ==========================================================================
   31. Tags without rings
   The tags and categories under a post lose the theme's rounded pill
   outline; just the moving title-twin letters remain.
   ========================================================================== */

body .wp-block-post-terms a,
body .wp-block-tag-cloud a {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 2px 4px !important;
}

/* ==========================================================================
   32. Footer: coin, day count and copyright stacked in the middle
   The footer row spreads its pieces apart, which threw the coin to one
   side and the day count to the other. Each now gets its own centered line
   under the title and menu: coin, then the day count, then the copyright.
   ========================================================================== */

footer .sober-coin {
    flex: 0 0 min(100%, 200px);
    margin-left: calc((100% - min(100%, 200px)) / 2) !important;
    margin-right: calc((100% - min(100%, 200px)) / 2) !important;
}
footer .sober-coin__days {
    flex: 0 0 100%;
    text-align: center;
}
footer .site-copyright {
    flex: 0 0 auto;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   33. Article title size
   The title at the top of a blog post is a bit smaller, especially on
   phones: about 26px on a phone, growing to 46px on a wide screen.
   ========================================================================== */

body.single main .wp-block-post-title:not(.wp-block-query *) {
    font-size: clamp(26px, 6.2vw, 46px) !important;
    line-height: 1.18;
}

/* End of stylesheet. */


/* blog articles: panel behind the text matches the contact form's dark indigo glass, same as the mobile menu */
html body.single-post .wp-block-post-content{background:rgba(20,10,64,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px}


/* contact page: the form sits in a dark panel framed by the home page slime, at its natural proportions: drips hang from the top edge and a pool sits along the bottom, both clipped inside the panel. Labels, fields, captcha and Transmit button are centred. Needs the body.page-id-18 .wpforms-container selector added to the --zx-slime rule. To undo, delete this block. */
body.page-id-18 div.wpforms-container.wpforms-container-full:not(:empty){position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;padding:clamp(5rem,9vw,6rem) clamp(1.25rem,5vw,3rem);border-radius:18px;background-color:rgba(20,10,64,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.page-id-18 .wpforms-container::before,body.page-id-18 .wpforms-container::after{content:"";position:absolute;left:50%;width:max(100%,645px);transform:translateX(-50%);z-index:-1;pointer-events:none;aspect-ratio:520/160;background:var(--zx-slime) 0 0/100% 100% no-repeat}
body.page-id-18 .wpforms-container::before{top:0;-webkit-mask-image:linear-gradient(#000 38%,transparent 38%);mask-image:linear-gradient(#000 38%,transparent 38%)}
body.page-id-18 .wpforms-container::after{bottom:0;background:url("https://zaxxofficial.com/wp-content/uploads/zx-cache/svg-ac9da3bcc602.svg") 0 0/100% 100% no-repeat}
body.page-id-18 .wpforms-container .wpforms-field-label{display:block;width:100%;text-align:center}
body.page-id-18 .wpforms-container input.wpforms-field-medium{margin-inline:auto}
@media (max-width:600px){body.page-id-18 div.wpforms-container.wpforms-container-full:not(:empty){margin-inline:12px}}
body.page-id-18 .wpforms-container .wpforms-recaptcha-container,body.page-id-18 .wpforms-container .wpforms-submit-container{display:flex;justify-content:center}
body.page-id-18 .wpforms-container .wpforms-recaptcha-container{margin-inline:auto}

/* contact page: slime rowboat. A pixel rowboat with a fawn pug fishing and a black pug holding a parasol drifts across the slime pool at the bottom of the form. The extra bottom padding keeps the parasol clear of the Transmit button. To undo, delete this block. */
body.page-id-18 div.wpforms-container.wpforms-container-full:not(:empty){padding-bottom:calc(clamp(5rem,9vw,6rem) + 90px)}

/* footer coin a bit smaller (was 200px wide, 24px days text) */
body footer .sober-coin,body .entry-content .sober-coin{width:min(100%,170px) !important;flex:0 0 min(100%,170px) !important;margin-left:calc(0.5 * (100% - min(100%, 170px))) !important;margin-right:calc(0.5 * (100% - min(100%, 170px))) !important}
body footer .sober-coin__days{font-size:20px !important}


/* nav bar: the purple bar uses the same pixel bricks as the games (the --zx-brick tile). To undo, delete this block. */
body nav.wp-block-navigation.has-accent-2-background-color{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'>%3Crect width='32' height='16' fill='%23241656'/>%3Crect x='-15' y='1' width='14' height='6' fill='%235536c0'/>%3Crect x='-15' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='-15' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='1' y='1' width='14' height='6' fill='%233f259a'/>%3Crect x='1' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='1' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='17' y='1' width='14' height='6' fill='%234a2bb0'/>%3Crect x='17' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='17' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='33' y='1' width='14' height='6' fill='%235a3dc8'/>%3Crect x='33' y='1' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='33' y='6' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='1' y='9' width='14' height='6' fill='%235a3dc8'/>%3Crect x='1' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='1' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='17' y='9' width='14' height='6' fill='%235536c0'/>%3Crect x='17' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='17' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='33' y='9' width='14' height='6' fill='%234a2bb0'/>%3Crect x='33' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='33' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3Crect x='49' y='9' width='14' height='6' fill='%234a2bb0'/>%3Crect x='49' y='9' width='14' height='1' fill='%237a62e6' opacity='.6'/>%3Crect x='49' y='14' width='14' height='1' fill='%231d1260' opacity='.6'/>%3C/svg>") 0 0/64px 32px !important;image-rendering:pixelated}
body nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),body nav.wp-block-navigation .wp-block-navigation__container,body nav.wp-block-navigation .wp-block-navigation-item{background:transparent !important}

/* audio players: each takes the colour of the slime it sits under; mint numbers and icons with a thin ink outline (undo by deleting this block) */
body audio[src*="the-Speakers"]{filter:none !important;color-scheme:dark;background-color:#7dff2e !important}
body audio[src*="the-Speakers"]::-webkit-media-controls-panel,body audio[src*="the-Speakers"]::-webkit-media-controls-enclosure{background:#7dff2e !important}
body audio[src*="the-Speakers"]::-webkit-media-controls-current-time-display,body audio[src*="the-Speakers"]::-webkit-media-controls-time-remaining-display{color:#90ee90 !important;font-weight:700;text-shadow:1px 0 0 #140a2e,-1px 0 0 #140a2e,0 1px 0 #140a2e,0 -1px 0 #140a2e}
body audio[src*="the-Speakers"]::-webkit-media-controls-play-button,body audio[src*="the-Speakers"]::-webkit-media-controls-mute-button,body audio[src*="the-Speakers"]::-webkit-media-controls-overflow-button{filter:brightness(0) invert(86%) sepia(30%) saturate(1400%) hue-rotate(68deg) brightness(102%) drop-shadow(1px 0 0 #140a2e) drop-shadow(-1px 0 0 #140a2e) drop-shadow(0 1px 0 #140a2e) drop-shadow(0 -1px 0 #140a2e)}
body audio[src*="berbs"]{filter:none !important;color-scheme:dark;background-color:#ff4fb0 !important}
body audio[src*="berbs"]::-webkit-media-controls-panel,body audio[src*="berbs"]::-webkit-media-controls-enclosure{background:#ff4fb0 !important}
body audio[src*="berbs"]::-webkit-media-controls-current-time-display,body audio[src*="berbs"]::-webkit-media-controls-time-remaining-display{color:#90ee90 !important;font-weight:700;text-shadow:1px 0 0 #140a2e,-1px 0 0 #140a2e,0 1px 0 #140a2e,0 -1px 0 #140a2e}
body audio[src*="berbs"]::-webkit-media-controls-play-button,body audio[src*="berbs"]::-webkit-media-controls-mute-button,body audio[src*="berbs"]::-webkit-media-controls-overflow-button{filter:brightness(0) invert(86%) sepia(30%) saturate(1400%) hue-rotate(68deg) brightness(102%) drop-shadow(1px 0 0 #140a2e) drop-shadow(-1px 0 0 #140a2e) drop-shadow(0 1px 0 #140a2e) drop-shadow(0 -1px 0 #140a2e)}

:root :where(.wp-block-columns-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.wp-block-columns-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.wp-block-columns-is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--50);margin-block-end: 0;}:root :where(.wp-block-columns-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.wp-block-columns-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.wp-block-columns-is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--50);margin-block-end: 0;}:root :where(.wp-block-columns-is-layout-flex){gap: var(--wp--preset--spacing--50);}:root :where(.wp-block-columns-is-layout-grid){gap: var(--wp--preset--spacing--50);}
:root :where(.wp-block-post-date){color: var(--wp--preset--color--contrast);font-size: var(--wp--preset--font-size--small);}
:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){color: var(--wp--preset--color--contrast);text-decoration: none;}
:root :where(.wp-block-post-date a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
:root :where(.wp-block-post-navigation-link){font-size: var(--wp--preset--font-size--medium);}
:root :where(.wp-block-post-terms){font-size: var(--wp--preset--font-size--small);font-weight: 600;}:root :where(.wp-block-post-terms a){white-space: nowrap;}
:root :where(.wp-block-post-title a:where(:not(.wp-element-button))){text-decoration: none;}
:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
:root :where(.wp-block-site-title){font-weight: 700;letter-spacing: -.5px;}
:root :where(.wp-block-site-title a:where(:not(.wp-element-button))){text-decoration: none;}
:root :where(.wp-block-site-title a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
:root :where(.wp-block-navigation){font-size: var(--wp--preset--font-size--medium);}
:root :where(.wp-block-navigation a:where(:not(.wp-element-button))){text-decoration: none;}
:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover){text-decoration: underline;}