<!DOCTYPE html>
<!-- IMPORTANT: If you modify this file, you may also need to modify app/views/posts/post_email.html.erb --><html style="--parent-color: var(--color); color-scheme: light; --spacer-1: 4px; --spacer-2: 8px; --spacer-3: 12px; --spacer-4: 16px; --spacer-5: 24px; --spacer-6: 32px; --spacer-7: 48px; --spacer-8: 64px; --border-radius-1: 4px; --border-radius-2: 8px; --border-radius-3: 160px; --box-shadow-1: 4px 4px 0px var(--color); --box-shadow-2: 8px 8px 0px var(--color); --z-index-base: 0; --z-index-overlay: 1; --z-index-above-overlay: 2; --z-index-header: 3; --z-index-menubar: 10; --z-index-modal: 20; --z-index-tooltip: 30; --pink: #ff90e8; --purple: #90a8ed; --green: #23a094; --orange: #ffc900; --red: #dc341e; --yellow: #f1f333; --breakpoint-sm: 640px; --breakpoint-lg: 1024px; --success: 35 160 148; --contrast-success: 0 0 0; --warning: 255 201 0; --contrast-warning: 0 0 0; --danger: 220 52 30; --contrast-danger: 255 255 255; --info: 144 168 237; --contrast-info: 0 0 0; --accent: 255 144 232; --contrast-accent: 0 0 0; --primary: 0 0 0; --contrast-primary: 255 255 255; --black: 0 0 0; --contrast-black: 255 255 255; --filled: 255 255 255; --contrast-filled: 0 0 0; --color: 0 0 0; --body-bg: #ffffff; --border-alpha: 1; --font-family: ABC Favorit,Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif; --border-width: 1px; --big-icon-size: 1.25em; --active-bg: rgb(var(--filled)); --main-stack-width: 448px; --dynamic-grid: min(100%, calc((500px - 100%) * 1000)); --disabled-opacity: 0.3; --form-element-height: 48.4px; --transition-duration: 0.14s; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; height: 100%; width: 100%; overflow-wrap: anywhere; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale = 1.0, width=device-width">
<style>@font-face {
font-family: "ABC Favorit"; src: url(https://assets.gumroad.com/packs/static/bdd9bd6d88896bf1d116.woff2);
}
@font-face {
font-family: "ABC Favorit"; src: url(https://assets.gumroad.com/packs/static/8805053696e04753ae08.woff2); font-style: italic;
}
@font-face {
font-family: "ABC Favorit"; src: url(https://assets.gumroad.com/packs/static/6a85036ef2ebb92752d4.woff2); font-weight: 700;
}
@font-face {
font-family: "ABC Favorit"; src: url(https://assets.gumroad.com/packs/static/55243d2dafec568c8a44.woff2); font-weight: 700; font-style: italic;
}
body {
height: 100%; width: 100%; overflow-wrap: anywhere;
}
body {
font-size: 16px; line-height: 1.4; font-family: var(--font-family); font-feature-settings: "ss11", "ss04"; background-color: var(--body-bg); -webkit-font-smoothing: antialiased; color: rgb(var(--color));
}
body:not(.mac) *::-webkit-scrollbar {
width: 12px; background-color: rgb(var(--color)/0.1);
}
body:not(.mac) *::-webkit-scrollbar-thumb {
background-color: rgb(var(--color)/0.5); border-radius: 8px;
}
ul.inline > li:not(:last-child)::after {
content: " \b7 ";
}
details > summary::before {
margin-right: 4px;
}
details.toggle > summary::before {
content: none;
}
[role=menu] [role^=menuitem]:hover {
background-color: var(--active-bg);
}
a.stretched-link::before {
content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.stretched-link.link::before {
content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
dl dt::after {
content: ":";
}
table > thead th[aria-sort]:after {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=tree] [role=treeitem][aria-expanded] > .content::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.pill.expandable::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.pill.select::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.pill.dismissable::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.combobox datalist[aria-multiselectable=true] option[aria-selected=true]:after {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.combobox datalist[aria-multiselectable=true] [role=option][aria-selected=true]:after {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
input[type=checkbox]:not([role=switch]):checked::after {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=alert].info::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=status].info::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=alert].warning::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=status].warning::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=alert].danger::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=status].danger::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=alert].success::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
[role=status].success::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-google::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-zoom::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-discord::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-kindle::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-android::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-apple::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-stripe::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-paypal::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-twitter::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
.button-facebook::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
details > summary::before {
content: "\a0"; display: inline-block; background: currentColor; min-height: max(1lh, 1em); width: 1em; mask-position: 50% 50%; mask-size: 120%; mask-repeat: no-repeat; flex-shrink: 0;
}
table > thead th[aria-sort]::after {
content: "\a0";
}
.rich-text .embed [aria-grabbed]::after {
content: "\a0";
}
[role=tree] [role=treeitem] [aria-grabbed]::after {
content: "\a0";
}
.rows > * [aria-grabbed]::after {
content: "\a0";
}
.combobox datalist[aria-multiselectable=true] option[aria-selected=true]::after {
content: "\a0";
}
.combobox datalist[aria-multiselectable=true] [role=option][aria-selected=true]::after {
content: "\a0";
}
input[type=checkbox]:not([role=switch]):checked::after {
content: "\a0";
}
.brand-icon::after {
content: "\a0";
}
.logo-full::after {
content: "\a0";
}
.icon::after {
content: "\a0";
}
[role=alert].info::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIuMDJjLTUuNTI0IDAtMTAgNC40NzctMTAgMTBzNC40NzYgMTAgMTAgMTBjNS41MjIgMCAxMC00LjQ3NyAxMC0xMHMtNC40NzgtMTAtMTAtMTBabTAgNWExIDEgMCAxIDEtLjAwMSAyIDEgMSAwIDAgMSAwLTJabTAgM2ExIDEgMCAwIDEgMSAxdjVhMSAxIDAgMCAxLTIgMHYtNWExIDEgMCAwIDEgMS0xWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
[role=status].info::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIuMDJjLTUuNTI0IDAtMTAgNC40NzctMTAgMTBzNC40NzYgMTAgMTAgMTBjNS41MjIgMCAxMC00LjQ3NyAxMC0xMHMtNC40NzgtMTAtMTAtMTBabTAgNWExIDEgMCAxIDEtLjAwMSAyIDEgMSAwIDAgMSAwLTJabTAgM2ExIDEgMCAwIDEgMSAxdjVhMSAxIDAgMCAxLTIgMHYtNWExIDEgMCAwIDEgMS0xWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
input[type=checkbox]:not([role=switch]):checked::after {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTUgMTMuMDA3IDQgNCAxMC0xMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
}
table > thead th[aria-sort=descending]:after {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5IDkuMDA3LTcgNy03LTciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
[role=tree] [role=treeitem][aria-expanded] > .content::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5IDkuMDA3LTcgNy03LTciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
.pill.expandable::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5IDkuMDA3LTcgNy03LTciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
.pill.select::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5IDkuMDA3LTcgNy03LTciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
details[open] > summary::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE5IDkuMDA3LTcgNy03LTciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
[role=tree] [role=treeitem][aria-expanded=false] > .content::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkgNS4wMDcgNyA3LTcgNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
}
details > summary::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkgNS4wMDcgNyA3LTcgNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
}
table > thead th[aria-sort=ascending]:after {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTUgMTUuMDA3IDctNyA3IDciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
}
.combobox datalist[aria-multiselectable=true] option[aria-selected=true]:after {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyMS42MWE5LjYgOS42IDAgMSAwIDAtMTkuMiA5LjYgOS42IDAgMCAwIDAgMTkuMlptNC40NS0xMS4xNTJhMS4yIDEuMiAwIDAgMC0xLjY5OC0xLjY5N2wtMy45NTEgMy45NTItMS41NTItMS41NTJhMS4yIDEuMiAwIDAgMC0xLjY5NyAxLjY5N2wyLjQgMi40YTEuMiAxLjIgMCAwIDAgMS42OTcgMGw0LjgtNC44WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
.combobox datalist[aria-multiselectable=true] [role=option][aria-selected=true]:after {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyMS42MWE5LjYgOS42IDAgMSAwIDAtMTkuMiA5LjYgOS42IDAgMCAwIDAgMTkuMlptNC40NS0xMS4xNTJhMS4yIDEuMiAwIDAgMC0xLjY5OC0xLjY5N2wtMy45NTEgMy45NTItMS41NTItMS41NTJhMS4yIDEuMiAwIDAgMC0xLjY5NyAxLjY5N2wyLjQgMi40YTEuMiAxLjIgMCAwIDAgMS42OTcgMGw0LjgtNC44WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
[role=alert].success::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyMS42MWE5LjYgOS42IDAgMSAwIDAtMTkuMiA5LjYgOS42IDAgMCAwIDAgMTkuMlptNC40NS0xMS4xNTJhMS4yIDEuMiAwIDAgMC0xLjY5OC0xLjY5N2wtMy45NTEgMy45NTItMS41NTItMS41NTJhMS4yIDEuMiAwIDAgMC0xLjY5NyAxLjY5N2wyLjQgMi40YTEuMiAxLjIgMCAwIDAgMS42OTcgMGw0LjgtNC44WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
[role=status].success::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyMS42MWE5LjYgOS42IDAgMSAwIDAtMTkuMiA5LjYgOS42IDAgMCAwIDAgMTkuMlptNC40NS0xMS4xNTJhMS4yIDEuMiAwIDAgMC0xLjY5OC0xLjY5N2wtMy45NTEgMy45NTItMS41NTItMS41NTJhMS4yIDEuMiAwIDAgMC0xLjY5NyAxLjY5N2wyLjQgMi40YTEuMiAxLjIgMCAwIDAgMS42OTcgMGw0LjgtNC44WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
[role=alert].warning::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyLjM0NGExNC4zNDUgMTQuMzQ1IDAgMCAxLTkuNCAzLjY2NWMtLjEzMS43ODEtLjIgMS41ODMtLjIgMi40MDIgMCA2LjI3IDQuMDA4IDExLjYwMyA5LjYgMTMuNTggNS41OTMtMS45NzcgOS42LTcuMzEgOS42LTEzLjU4IDAtLjgxOC0uMDY4LTEuNjItLjE5OS0yLjQwMmExNC4zNDUgMTQuMzQ1IDAgMCAxLTkuNC0zLjY2NVptMS4yIDE0LjQ2N2ExLjIgMS4yIDAgMSAxLTIuNCAwIDEuMiAxLjIgMCAwIDEgMi40IDBabTAtOC40YTEuMiAxLjIgMCAxIDAtMi40IDB2My42YTEuMiAxLjIgMCAxIDAgMi40IDB2LTMuNloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
}
[role=status].warning::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyLjM0NGExNC4zNDUgMTQuMzQ1IDAgMCAxLTkuNCAzLjY2NWMtLjEzMS43ODEtLjIgMS41ODMtLjIgMi40MDIgMCA2LjI3IDQuMDA4IDExLjYwMyA5LjYgMTMuNTggNS41OTMtMS45NzcgOS42LTcuMzEgOS42LTEzLjU4IDAtLjgxOC0uMDY4LTEuNjItLjE5OS0yLjQwMmExNC4zNDUgMTQuMzQ1IDAgMCAxLTkuNC0zLjY2NVptMS4yIDE0LjQ2N2ExLjIgMS4yIDAgMSAxLTIuNCAwIDEuMiAxLjIgMCAwIDEgMi40IDBabTAtOC40YTEuMiAxLjIgMCAxIDAtMi40IDB2My42YTEuMiAxLjIgMCAxIDAgMi40IDB2LTMuNloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
}
[role=alert].danger::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDEuOTY1Yy01LjUyNCAwLTEwIDQuNDc3LTEwIDEwczQuNDc2IDEwIDEwIDEwYzUuNTIyIDAgMTAtNC40NzcgMTAtMTBzLTQuNDc4LTEwLTEwLTEwbS0zIDZjLjI1NSAwIC41MjMuMDg2LjcxOC4yODFMMTIgMTAuNTI3bDIuMjgxLTIuMjhjLjE5Ni0uMTk2LjQ2My0uMjgyLjcyLS4yODIuMjU1IDAgLjUyMi4wODYuNzE4LjI4MWExLjAzIDEuMDMgMCAwIDEgMCAxLjQzOGwtMi4yOCAyLjI4MSAyLjI4IDIuMjgxYTEuMDMgMS4wMyAwIDAgMSAwIDEuNDM4IDEuMDMgMS4wMyAwIDAgMS0xLjQzOCAwTDEyIDEzLjQwNGwtMi4yODIgMi4yOGExLjAzIDEuMDMgMCAwIDEtMS40MzggMCAxLjAzIDEuMDMgMCAwIDEgMC0xLjQzOGwyLjI4MS0yLjI4LTIuMjgtMi4yODJhMS4wMyAxLjAzIDAgMCAxIDAtMS40MzggMSAxIDAgMCAxIC43MTgtLjI4Ii8+PC9zdmc+);
}
[role=status].danger::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTEyIDEuOTY1Yy01LjUyNCAwLTEwIDQuNDc3LTEwIDEwczQuNDc2IDEwIDEwIDEwYzUuNTIyIDAgMTAtNC40NzcgMTAtMTBzLTQuNDc4LTEwLTEwLTEwbS0zIDZjLjI1NSAwIC41MjMuMDg2LjcxOC4yODFMMTIgMTAuNTI3bDIuMjgxLTIuMjhjLjE5Ni0uMTk2LjQ2My0uMjgyLjcyLS4yODIuMjU1IDAgLjUyMi4wODYuNzE4LjI4MWExLjAzIDEuMDMgMCAwIDEgMCAxLjQzOGwtMi4yOCAyLjI4MSAyLjI4IDIuMjgxYTEuMDMgMS4wMyAwIDAgMSAwIDEuNDM4IDEuMDMgMS4wMyAwIDAgMS0xLjQzOCAwTDEyIDEzLjQwNGwtMi4yODIgMi4yOGExLjAzIDEuMDMgMCAwIDEtMS40MzggMCAxLjAzIDEuMDMgMCAwIDEgMC0xLjQzOGwyLjI4MS0yLjI4LTIuMjgtMi4yODJhMS4wMyAxLjAzIDAgMCAxIDAtMS40MzggMSAxIDAgMCAxIC43MTgtLjI4Ii8+PC9zdmc+);
}
.pill.dismissable::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTYgMTggMTggNk02IDZsMTIgMTIiLz48L3N2Zz4=);
}
.button-google::before {
mask-size: 100%;
}
.button-zoom::before {
mask-size: 100%;
}
.button-discord::before {
mask-size: 100%;
}
.button-kindle::before {
mask-size: 100%;
}
.button-android::before {
mask-size: 100%;
}
.button-apple::before {
mask-size: 100%;
}
.button-stripe::before {
mask-size: 100%;
}
.button-paypal::before {
mask-size: 100%;
}
.button-twitter::before {
mask-size: 100%;
}
.button-facebook::before {
mask-size: 100%;
}
.button-facebook::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjAxNCAyLjAwM2MtNS41MjMgMC0xMCA0LjQ3Ny0xMCAxMCAwIDQuODE1IDMuNDQ1IDguODkgOC4wMDEgOS44MDV2LTYuODA1aC0ydi0zaDJ2LTNhMy4wMDcgMy4wMDcgMCAwIDEgMy0zaDN2M2gtMmExLjAxIDEuMDEgMCAwIDAtMSAxdjJoM2wtMSAzaC0ybC4wMDYgNi45NjJjNS4wMzItLjUyMiA4Ljk5My00Ljc5MiA4Ljk5My05Ljk2MiAwLTUuNTIzLTQuNDc3LTEwLTEwLTEwWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}
.button-twitter::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE3Ljc1MSAzaDMuMDY3bC02LjcgNy42NThMMjIgMjEuMDc4aC02LjE3MmwtNC44MzMtNi4zMi01LjUzMSA2LjMyaC0zLjA3bDcuMTY3LTguMTlMMiAzaDYuMzI4bDQuMzcgNS43NzdMMTcuNzUgM1ptLTEuMDc2IDE2LjI0MmgxLjdMNy40MDQgNC43NEg1LjU4bDExLjA5NCAxNC41MDNaIi8+PC9zdmc+);
}
.button-paypal::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIxIDkuNzg1YzAgLjQ4Mi0uMDU4Ljk3Ni0uMTUyIDEuNDY0LS43NjIgMy45NzctMy4zNzEgNS4zNTEtNi43MDQgNS4zNTFoLS41MTVhLjgzLjgzIDAgMCAwLS44MTcuNzFsLS43MjMgNC41ODJhLjgzMi44MzIgMCAwIDEtLjgxNy43MDhIOC44MWEuNTcyLjU3MiAwIDAgMS0uNTY2LS42NTlsMS4yNDgtNy45OTIuMDU2LS4wNWgxLjkzOWM0LjcxMSAwIDcuNjU4LTIuMzU2IDguNTI2LTYuODExLjczLjczMi45ODcgMS42ODguOTg3IDIuNjk3Wk04LjIwNiAxMy42MTJjLjEwNC0uNzQ0LjQxMy0xLjA2IDEuMjQ2LTEuMDYxbDIuMDM0LS4wMDJjNC4xMTcgMCA2LjQ3OC0xLjg4MSA3LjIyLTUuNzUxQzE5LjQyNyAzLjA3OCAxNi44MTYgMSAxMy4yOCAxSDYuNjdhLjk1Ljk1IDAgMCAwLS45MzQuODFDMy42NjIgMTUuMTYzIDMuMDYyIDE4LjU1OCAzLjAwMSAxOS41OTRhLjU3My41NzMgMCAwIDAgLjU3MS42MDVoMy41OWwxLjA0NC02LjU4NloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
}
.button-stripe::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE4LjI1IDNINS43NUEyLjc1MyAyLjc1MyAwIDAgMCAzIDUuNzV2MTIuNUEyLjc1MyAyLjc1MyAwIDAgMCA1Ljc1IDIxaDEyLjVBMi43NTMgMi43NTMgMCAwIDAgMjEgMTguMjVWNS43NUEyLjc1MyAyLjc1MyAwIDAgMCAxOC4yNSAzWm0tNi41IDE0LjVjLTEuMTA0IDAtMi4yMTctLjI4NS0zLjA4NS0uNTg1YS4yNDcuMjQ3IDAgMCAxLS4xNjUtLjIzNnYtMi4zM2MwLS4wOS4wOS0uMTUyLjE3Mi0uMTE2LjU4My4yNTEgMS42MzQuNjQ3IDIuNjY2Ljc1NS40NzQuMDUuOTM5LS4wMDIgMS4yLS4yNzNhLjgyOC44MjggMCAwIDAgLjIxMS0uNTc5YzAtLjIyMy0uMDQzLS43NDYtMS4yNjctMS4xMDYtMS4xLS4zMDktMy4yMzItMS4wMTktMy4yMzItMy4yOCAwLTEuNDk5IDEuMDQ3LTMuMjUgNC0zLjI1IDEuMTA0IDAgMi4yMTcuMjg1IDMuMDg1LjU4NS4xLjAzNS4xNjUuMTMuMTY1LjIzNnYyLjMyNmMwIC4wOS0uMDkuMTUxLS4xNzIuMTE1LS41ODItLjI1NC0xLjYyOC0uNjUyLTIuNjYxLS43NDQtLjQ2Ny0uMDU5LS45NzUtLjAxNC0xLjIyMy4yM2EuNjYuNjYgMCAwIDAtLjE5NC40NzJjMCAuMTkxLjAwNi42MTggMS4yNDUuOTk1IDIuMTYuNjMgMy4yNTUgMS43NzcgMy4yNTUgMy40MSAwIDEuNTU3LTEuMDQ3IDMuMzc1LTQgMy4zNzVaIiBmaWxsPSIjMDAwIi8+PC9zdmc+);
}
.button-apple::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExLjQ5MyAxNi4xMTJjLS44NjguODQzLTEuODI2LjcxMi0yLjc0LjMxNC0uOTctLjQwNS0xLjg1OC0uNDMtMi44ODMgMC0xLjI3Ny41NTItMS45NTQuMzkxLTIuNzIzLS4zMTRDLTEuMTk0IDExLjY0My0uNTUzIDQuODM1IDQuMzggNC41OGMxLjE5Ny4wNjQgMi4wMzUuNjYxIDIuNzQuNzEgMS4wNDctLjIxMiAyLjA1LS44MjMgMy4xNzEtLjc0MiAxLjM0OC4xMDggMi4zNTUuNjQgMy4wMjggMS41OTctMi43NzEgMS42NjYtMi4xMTUgNS4zMTguNDMxIDYuMzQzLS41MSAxLjMzOC0xLjE2MyAyLjY2LTIuMjU5IDMuNjM3bC4wMDItLjAxMlpNNy4wMjMgNC41MzFDNi44OTQgMi41NDQgOC41MDQuOTEgMTAuMzU2Ljc1Yy4yNTUgMi4yOS0yLjA4MiA0LjAwNS0zLjMzMSAzLjc4WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
.button-android::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMuNzUgNy43NzVILjI1Qy40NjYgNS41IDEuNzc0IDMuNTU3IDMuNzA1IDIuNTE3TDIuNTg1LjU5YS4yMjcuMjI3IDAgMCAxIC4zOTItLjIyNmwxLjEzNSAxLjk1M0E2Ljk1NSA2Ljk1NSAwIDAgMSA3IDEuNzA0YzEuMDQ4IDAgMi4wMjIuMjE5IDIuODg4LjYxMkwxMS4wMjIuMzYzYS4yMjUuMjI1IDAgMCAxIC4zMDktLjA4MmMuMTA3LjA2My4xNDYuMi4wODIuMzA4bC0xLjEyIDEuOTI4YzEuOTMzIDEuMDQgMy4yNDEgMi45ODMgMy40NTcgNS4yNThaTTEwLjA5OCA1Ljg5YS41NjMuNTYzIDAgMSAwIDAtMS4xMjUuNTY0LjU2NCAwIDAgMC0uNTY2LjU2M2MwIC4zMS4yNTMuNTYyLjU2Ni41NjJabS02LjE5NyAwYS41NjMuNTYzIDAgMSAwIDAtMS4xMjUuNTY0LjU2NCAwIDAgMC0uNTY2LjU2M2MwIC4zMS4yNTMuNTYyLjU2Ni41NjJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.button-kindle::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjA5MSAxMy43NTdjLTUuNzQyIDIuNzQ1LTkuMzA1LjQ0OC0xMS41ODctLjk0Ny0uMTQtLjA4OC0uMzguMDItLjE3My4yNi43Ni45MjYgMy4yNTEgMy4xNTggNi41MDIgMy4xNTggMy4yNTMgMCA1LjE4OS0xLjc4NCA1LjQzLTIuMDk1LjI0MS0uMzA4LjA3MS0uNDc4LS4xNzItLjM3NlptMS42MTMtLjg5NWMtLjE1NC0uMjAyLS45MzgtLjI0LTEuNDMtLjE3OS0uNDk0LjA2LTEuMjM2LjM2My0xLjE3MS41NDUuMDMzLjA2OC4xLjAzNy40NC4wMDcuMzQtLjAzNCAxLjI5My0uMTU1IDEuNDkxLjEwNS4yLjI2My0uMzA0IDEuNTE0LS4zOTYgMS43MTYtLjA4OC4yMDIuMDM0LjI1NC4yMDEuMTIuMTY1LS4xMzUuNDYzLS40ODMuNjYzLS45NzUuMTk4LS40OTUuMzItMS4xODYuMjAyLTEuMzRaIiBmaWxsPSIjMDAwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4yMyA4LjE1NGMwIC43Mi4wMTggMS4zMjEtLjM0NCAxLjk2MS0uMjkyLjUyLS43NTYuODQtMS4yNzMuODQtLjcwNyAwLTEuMTE5LS41NC0xLjExOS0xLjM0IDAtMS41NzUgMS40MDYtMS44NjIgMi43MzYtMS44NjJ2LjQwMVptMS44NTYgNC41MDdhLjM4My4zODMgMCAwIDEtLjQzNC4wNDVjLS42MTEtLjUxLS43Mi0uNzQ3LTEuMDU3LTEuMjMzLTEuMDEgMS4wMzUtMS43MjQgMS4zNDQtMy4wMzMgMS4zNDQtMS41NDggMC0yLjc1NS0uOTYtMi43NTUtMi44ODEgMC0xLjUwMS44MS0yLjUyMyAxLjk2Mi0zLjAyMyAxLS40NDIgMi4zOTUtLjUyIDMuNDYxLS42NDJ2LS4yNGMwLS40MzkuMDM0LS45Ni0uMjIyLTEuMzM5LS4yMjUtLjM0LS42NTUtLjQ4LTEuMDMzLS40OC0uNzAyIDAtMS4zMjguMzYtMS40OCAxLjExLS4wMzIuMTY2LS4xNTQuMzMtLjMyLjMzOEw1LjM5IDUuNDY3Yy0uMTUtLjAzNC0uMzE2LS4xNTYtLjI3NS0uMzg3LjQxMi0yLjE3NSAyLjM2Ni0yLjgzIDQuMTE2LTIuODMuODk2IDAgMi4wNjYuMjQgMi43NzMuOTIuODk1Ljg0LjgxIDEuOTYyLjgxIDMuMTgydjIuODgxYzAgLjg2Ni4zNTcgMS4yNDYuNjk0IDEuNzE0LjExOS4xNjcuMTQ1LjM2Ny0uMDA2LjQ5Mi0uMzc1LjMxNS0xLjA0My45LTEuNDEgMS4yMjdsLS4wMDYtLjAwNSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0xNC4wOTEgMTMuNzU3Yy01Ljc0MiAyLjc0NS05LjMwNS40NDgtMTEuNTg3LS45NDctLjE0LS4wODgtLjM4LjAyLS4xNzMuMjYuNzYuOTI2IDMuMjUxIDMuMTU4IDYuNTAyIDMuMTU4IDMuMjUzIDAgNS4xODktMS43ODQgNS40My0yLjA5NS4yNDEtLjMwOC4wNzEtLjQ3OC0uMTcyLS4zNzZabTEuNjEzLS44OTVjLS4xNTQtLjIwMi0uOTM4LS4yNC0xLjQzLS4xNzktLjQ5NC4wNi0xLjIzNi4zNjMtMS4xNzEuNTQ1LjAzMy4wNjguMS4wMzcuNDQuMDA3LjM0LS4wMzQgMS4yOTMtLjE1NSAxLjQ5MS4xMDUuMi4yNjMtLjMwNCAxLjUxNC0uMzk2IDEuNzE2LS4wODguMjAyLjAzNC4yNTQuMjAxLjEyLjE2NS0uMTM1LjQ2My0uNDgzLjY2My0uOTc1LjE5OC0uNDk1LjMyLTEuMTg2LjIwMi0xLjM0WiIgZmlsbD0iIzAwMCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuMjMgOC4xNTRjMCAuNzIuMDE4IDEuMzIxLS4zNDQgMS45NjEtLjI5Mi41Mi0uNzU2Ljg0LTEuMjczLjg0LS43MDcgMC0xLjExOS0uNTQtMS4xMTktMS4zNCAwLTEuNTc1IDEuNDA2LTEuODYyIDIuNzM2LTEuODYydi40MDFabTEuODU2IDQuNTA3YS4zODMuMzgzIDAgMCAxLS40MzQuMDQ1Yy0uNjExLS41MS0uNzItLjc0Ny0xLjA1Ny0xLjIzMy0xLjAxIDEuMDM1LTEuNzI0IDEuMzQ0LTMuMDMzIDEuMzQ0LTEuNTQ4IDAtMi43NTUtLjk2LTIuNzU1LTIuODgxIDAtMS41MDEuODEtMi41MjMgMS45NjItMy4wMjMgMS0uNDQyIDIuMzk1LS41MiAzLjQ2MS0uNjQydi0uMjRjMC0uNDM5LjAzNC0uOTYtLjIyMi0xLjMzOS0uMjI1LS4zNC0uNjU1LS40OC0xLjAzMy0uNDgtLjcwMiAwLTEuMzI4LjM2LTEuNDggMS4xMS0uMDMyLjE2Ni0uMTU0LjMzLS4zMi4zMzhMNS4zOSA1LjQ2N2MtLjE1LS4wMzQtLjMxNi0uMTU2LS4yNzUtLjM4Ny40MTItMi4xNzUgMi4zNjYtMi44MyA0LjExNi0yLjgzLjg5NiAwIDIuMDY2LjI0IDIuNzczLjkyLjg5NS44NC44MSAxLjk2Mi44MSAzLjE4MnYyLjg4MWMwIC44NjYuMzU3IDEuMjQ2LjY5NCAxLjcxNC4xMTkuMTY3LjE0NS4zNjctLjAwNi40OTItLjM3NS4zMTUtMS4wNDMuOS0xLjQxIDEuMjI3bC0uMDA2LS4wMDUiIGZpbGw9IiMwMDAiLz48L3N2Zz4=);
}
.button-discord::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjIzOCAzLjExN2ExNC44NDUgMTQuODQ1IDAgMCAwLTMuNjY0LTEuMTM3LjA1Ni4wNTYgMCAwIDAtLjA1OS4wMjggMTAuMzUgMTAuMzUgMCAwIDAtLjQ1Ni45MzcgMTMuNzAzIDEzLjcwMyAwIDAgMC00LjExNSAwIDkuNDgzIDkuNDgzIDAgMCAwLS40NjQtLjkzNy4wNTguMDU4IDAgMCAwLS4wNTgtLjAyOCAxNC44MyAxNC44MyAwIDAgMC0zLjY2NCAxLjEzNy4wNTMuMDUzIDAgMCAwLS4wMjQuMDJDLjQgNi42MjUtLjI0IDEwLjAyNS4wNzQgMTMuMzg0YS4wNjUuMDY1IDAgMCAwIC4wMjQuMDQyIDE0LjkyNyAxNC45MjcgMCAwIDAgNC40OTQgMi4yNzIuMDU4LjA1OCAwIDAgMCAuMDY0LS4wMmMuMzQ2LS40NzQuNjU0LS45NzIuOTItMS40OTZhLjA1Ny4wNTcgMCAwIDAtLjAzMi0uMDggOS44MzEgOS44MzEgMCAwIDEtMS40MDQtLjY2OS4wNTguMDU4IDAgMCAxLS4wMDYtLjA5NiA3LjY3IDcuNjcgMCAwIDAgLjI3OS0uMjE4LjA1Ni4wNTYgMCAwIDEgLjA1OC0uMDA4YzIuOTQ2IDEuMzQ1IDYuMTM1IDEuMzQ1IDkuMDQ2IDBhLjA1NS4wNTUgMCAwIDEgLjA2LjAwN2MuMDkuMDc0LjE4NC4xNDkuMjc5LjIyYS4wNTguMDU4IDAgMCAxLS4wMDUuMDk1IDkuMjI4IDkuMjI4IDAgMCAxLTEuNDA1LjY2OS4wNTcuMDU3IDAgMCAwLS4wMy4wOGMuMjcuNTIzLjU3OCAxLjAyMi45MTggMS40OTUuMDE0LjAyLjA0LjAyOC4wNjMuMDIxYTE0Ljg3NyAxNC44NzcgMCAwIDAgNC41MDItMi4yNzIuMDU4LjA1OCAwIDAgMCAuMDIzLS4wNDJjLjM3Ni0zLjg4Mi0uNjI4LTcuMjU1LTIuNjYtMTAuMjQ1YS4wNDYuMDQ2IDAgMCAwLS4wMjQtLjAyMXptLTkuMjIzIDguMjJjLS44ODcgMC0xLjYxOC0uODEzLTEuNjE4LTEuODEzcy43MTctMS44MTUgMS42MTgtMS44MTVjLjkwOCAwIDEuNjMyLjgyMiAxLjYxOCAxLjgxNSAwIDEtLjcxNyAxLjgxNC0xLjYxOCAxLjgxNHptNS45ODEgMGMtLjg4NyAwLTEuNjE4LS44MTMtMS42MTgtMS44MTNzLjcxNy0xLjgxNSAxLjYxOC0xLjgxNWMuOTA4IDAgMS42MzIuODIyIDEuNjE4IDEuODE1IDAgMS0uNzEgMS44MTQtMS42MTggMS44MTR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.button-zoom::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEuMjY3IDBDLjU2NyAwIDAgLjY0IDAgMS40Mjl2Ni45MjhDMCAxMC4zNyAxLjQ0NiAxMiAzLjIzIDEybDcuNTAzLS4wNzFjLjcgMCAxLjI2Ny0uNjQgMS4yNjctMS40Mjl2LTdDMTIgMS40ODggMTAuMjg0IDAgOC41IDBIMS4yNjdabTEyLjQ0NSAyLjcyOEMxMy4yNiAzLjE3NSAxMyAzLjgyIDEzIDQuNXYyLjljMCAuNjc4LjI2IDEuMzI0LjcxMiAxLjc3MmwyLjgxNyAyLjQ4Yy41NzMuNTY3IDEuNDcxLjEwOCAxLjQ3MS0uNzUyVjEuMTM1YzAtLjg2LS44OTgtMS4zMTgtMS40NzEtLjc1MmwtMi44MTcgMi4zNDVaIiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.button-google::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggLjUxYTcuNDg2IDcuNDg2IDAgMCAwLTcuNSA3LjVjMCA0LjE2NSAzLjM1NyA3LjUgNy41IDcuNSAzLjU5NSAwIDcuNDkxLTIuODU0IDcuNS03LjU0NlY2LjUxMUg4djNoNC4xOTRjLS42MiAxLjc0MS0yLjI0IDMtNC4xOTUgM2E0LjUgNC41IDAgMSAxIDAtOWMxLjA1NCAwIDIuMDMyLjM1MyAyLjc4Ny45NjguMjQ1LS4yNDUgMS43MTMtMS43MTggMi4xODktMi4wOThDMTEuNjUyIDEuMTk2IDkuOTIyLjUxMSA3Ljk5OS41MTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
[role=alert].success::before {
width: 1lh; color: rgb(var(--success)); grid-column: -3;
}
[role=status].success::before {
width: 1lh; color: rgb(var(--success)); grid-column: -3;
}
[role=alert].danger::before {
width: 1lh; color: rgb(var(--danger)); grid-column: -3;
}
[role=status].danger::before {
width: 1lh; color: rgb(var(--danger)); grid-column: -3;
}
[role=alert].warning::before {
width: 1lh; color: rgb(var(--warning)); grid-column: -3;
}
[role=status].warning::before {
width: 1lh; color: rgb(var(--warning)); grid-column: -3;
}
[role=alert].info::before {
width: 1lh; color: rgb(var(--info)); grid-column: -3;
}
[role=status].info::before {
width: 1lh; color: rgb(var(--info)); grid-column: -3;
}
.button:hover:not(:active):not(:disabled) {
transform: translate(-4px, -4px); box-shadow: 4px 4px 0px rgb(var(--color));
}
.outline-success.button:hover:not(:disabled) {
background-color: rgb(var(--success)); --color: var(--contrast-success); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-danger.button:hover:not(:disabled) {
background-color: rgb(var(--danger)); --color: var(--contrast-danger); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-warning.button:hover:not(:disabled) {
background-color: rgb(var(--warning)); --color: var(--contrast-warning); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-info.button:hover:not(:disabled) {
background-color: rgb(var(--info)); --color: var(--contrast-info); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-primary.button:hover:not(:disabled) {
background-color: rgb(var(--primary)); --color: var(--contrast-primary); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-black.button:hover:not(:disabled) {
background-color: rgb(var(--black)); --color: var(--contrast-black); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-accent.button:hover:not(:disabled) {
background-color: rgb(var(--accent)); --color: var(--contrast-accent); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.outline-filled.button:hover:not(:disabled) {
background-color: rgb(var(--filled)); --color: var(--contrast-filled); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.primary.button:hover:not(:disabled) {
background-color: rgb(var(--accent)); --color: var(--contrast-accent); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
input:not([type]):focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=email]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=time]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=date]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=datetime-local]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=number]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=password]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=search]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=tel]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=text]:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=url]:focus-within {
outline: 2px solid rgb(var(--accent));
}
textarea:focus-within {
outline: 2px solid rgb(var(--accent));
}
select:focus-within {
outline: 2px solid rgb(var(--accent));
}
.input:focus-within {
outline: 2px solid rgb(var(--accent));
}
.textarea:focus-within {
outline: 2px solid rgb(var(--accent));
}
input[type=radio]:checked::after {
content: ""; background-color: rgb(var(--color)); border-radius: 100%; height: 100%; display: block;
}
input[type=checkbox]:not([role=switch]):checked::after {
display: block; margin-inline: auto;
}
input[role=switch]::after {
background: currentColor; border-radius: 160px; content: ""; height: calc(1.25em - 6px); width: calc(1.25em - 6px); position: absolute; top: 2px; left: 3px; transition-timing-function: ease-out; transition-duration: var(--transition-duration); transition-property: all;
}
input[role=switch]:checked::after {
left: calc(100% - 1.25em + 3px); background-color: rgb(var(--contrast-accent));
}
.combobox datalist option:focus {
background-color: rgb(var(--primary)); --color: var(--contrast-primary); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.combobox datalist [role=option]:focus {
background-color: rgb(var(--primary)); --color: var(--contrast-primary); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.combobox datalist .option:focus {
background-color: rgb(var(--primary)); --color: var(--contrast-primary); --parent-color: inherit; color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1);
}
.combobox datalist[aria-multiselectable=true] option[aria-selected=true]:after {
color: rgb(var(--success)); margin-left: auto;
}
.combobox datalist[aria-multiselectable=true] [role=option][aria-selected=true]:after {
color: rgb(var(--success)); margin-left: auto;
}
@keyframes loading {
}
.pill.dismissable::before {
float: right; margin-left: 8px;
}
.pill.expandable::before {
float: right; margin-left: 8px;
}
.pill.select::before {
float: right; margin-left: 8px;
}
.price::before {
content: ""; top: 0; bottom: 0; position: absolute; border-style: solid; border-width: calc(4px + .5lh);
}
.price::after {
content: ""; top: 0; bottom: 0; position: absolute; border-style: solid; border-width: calc(4px + .5lh);
}
.price::before {
border-color: rgb(var(--parent-color)/var(--border-alpha)); right: 0; border-left-width: 1px;
}
.price::after {
border-color: rgb(var(--accent)); right: 1px; border-left: none;
}
.price::before {
border-right: solid rgba(0, 0, 0, 0) 1em;
}
.price::after {
border-right: solid rgba(0, 0, 0, 0) 1em;
}
article.product-card:hover {
box-shadow: 4px 4px 0px rgb(var(--color));
}
.product-card:hover {
box-shadow: 4px 4px 0px rgb(var(--color));
}
.rich-text pre:hover .copy-wrapper {
display: initial;
}
.rich-text :has(> .actions-menu)::before {
content: ""; position: absolute; inset: 0 100% 0 -48px;
}
.rich-text :has(> .actions-menu):hover:not(:has(.react-renderer:hover)) > .actions-menu {
display: unset; grid-column: unset;
}
.rich-text .embed .content > .thumbnail:hover .placeholder {
border-color: rgb(var(--accent)); color: rgb(var(--accent));
}
.rich-text .embed .content > .thumbnail:not(:hover) img + .placeholder {
opacity: 0;
}
.rich-text-editor-toolbar[role=toolbar] .toolbar-item:hover {
background-color: rgb(var(--color)/0.1);
}
.rich-text-editor-toolbar[role=toolbar] [role=separator]::before {
content: none;
}
.ProseMirror[contenteditable=true]:focus-within {
outline: none;
}
.ProseMirror[contenteditable=true] figure br::selection {
background: none;
}
.ProseMirror[contenteditable=true] figure img::selection {
background: rgb(var(--color)/0.5);
}
.rich-text-editor .textarea:focus-within {
outline: 2px solid rgb(var(--accent));
}
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder); pointer-events: none; float: left; height: 0; color: rgb(var(--color)/0.5);
}
.ProseMirror .node-image.is-empty .figcaption::before {
content: attr(data-placeholder); pointer-events: none; float: left; height: 0; color: rgb(var(--color)/0.5);
}
.stack > details summary::before {
grid-column: 2;
}
table > tbody > *[aria-selected]:hover {
cursor: pointer; background-color: var(--active-bg);
}
table > tfoot > *[aria-selected]:hover {
cursor: pointer; background-color: var(--active-bg);
}
table > tbody > * > *[aria-busy=true]::after {
content: ""; display: block; background-color: rgb(var(--color)/0.1); animation: loading 1s infinite linear alternate; border-radius: 4px; height: 1lh; aspect-ratio: 3;
}
table > tfoot > * > *[aria-busy=true]::after {
content: ""; display: block; background-color: rgb(var(--color)/0.1); animation: loading 1s infinite linear alternate; border-radius: 4px; height: 1lh; aspect-ratio: 3;
}
table > tbody > * > *[data-label]:before {
display: block; font-weight: bold; margin-bottom: 8px; content: attr(data-label);
}
table > tfoot > * > *[data-label]:before {
display: block; font-weight: bold; margin-bottom: 8px; content: attr(data-label);
}
table > thead th[aria-sort]:after {
margin-left: 4px;
}
table > thead th[aria-sort=none]:after {
background-color: rgba(0, 0, 0, 0);
}
.email > .main [role=alert]::before {
content: unset !important;
}
.email > .main [role=status]::before {
content: unset !important;
}
.email > .footer [role=alert]::before {
content: unset !important;
}
.email > .footer [role=status]::before {
content: unset !important;
}
body {
height: auto; min-height: 100%;
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #242423; --primary: 221 221 221; --contrast-primary: 0 0 0; --color: 221 221 221; --filled: 0 0 0; --contrast-filled: 221 221 221; --contrast-black: 221 221 221; --border-alpha: 0.35;
}
:host {
--body-bg: #242423; --primary: 221 221 221; --contrast-primary: 0 0 0; --color: 221 221 221; --filled: 0 0 0; --contrast-filled: 221 221 221; --contrast-black: 221 221 221; --border-alpha: 0.35;
}
}
@media (min-width: 640px) {
[role=alert] .close {
grid-column: 2;
}
[role=status] .close {
grid-column: 2;
}
article.product > section > section.details {
grid-template-columns: auto auto minmax(max-content, 1fr);
}
.product.product-card > section > section.details {
grid-template-columns: auto auto minmax(max-content, 1fr);
}
article.product > section > section.details > :nth-child(2):last-child {
grid-column: 2/-1;
}
.product.product-card > section > section.details > :nth-child(2):last-child {
grid-column: 2/-1;
}
article.product > section > section.details .user:first-child {
grid-column: unset;
}
.product.product-card > section > section.details .user:first-child {
grid-column: unset;
}
article.product > section > section.details .rating {
grid-column: unset;
}
.product.product-card > section > section.details .rating {
grid-column: unset;
}
.rich-text .embed {
grid-template-columns: minmax(30%, 1fr) auto;
}
[role=tree] [role=treeitem] {
grid-template-columns: minmax(30%, 1fr) auto;
}
.rows > * {
grid-template-columns: minmax(30%, 1fr) auto;
}
.rich-text-editor-toolbar[role=toolbar] [role=separator] {
display: flex;
}
.email > .main table.two-product-card-table > tbody > tr > td {
display: revert !important; width: 50% !important;
}
.email > .footer table.two-product-card-table > tbody > tr > td {
display: revert !important; width: 50% !important;
}
.email > .main table.two-product-card-table > tbody > tr > td:first-child {
padding-right: 8px !important; padding-bottom: 0 !important;
}
.email > .footer table.two-product-card-table > tbody > tr > td:first-child {
padding-right: 8px !important; padding-bottom: 0 !important;
}
.email > .main table.two-product-card-table > tbody > tr > td:last-child {
padding-left: 8px !important;
}
.email > .footer table.two-product-card-table > tbody > tr > td:last-child {
padding-left: 8px !important;
}
.email > .main > * {
padding: 24px !important;
}
.announcement .main > .header {
padding: 0 !important;
}
.announcement .main > *:not(.header) {
padding: 32px !important;
}
.post .main > * {
padding: 0 !important;
}
}
@media (min-width: 1024px) {
form > section:not(.squished form > section) {
gap: 0 64px; padding-bottom: 16px; grid-template-columns: 25% 1fr;
}
form > section:not(.squished form > section) > * {
margin-bottom: 32px; grid-column: 2;
}
form > section:not(.squished form > section) > header {
grid-column: 1/2; grid-row: 1/10;
}
.product-card form > section:not(.squished form > section) > .header {
grid-column: 1/2; grid-row: 1/10;
}
.product-card-grid {
--min-grid-absolute-size: 256px;
}
.product-card-grid.narrow {
--min-grid-absolute-size: 192px;
}
.product-cta h3 {
display: unset;
}
.product-cta .rating {
display: flex;
}
.product-cta {
padding: 16px max((100% - 1140px)/2, 64px);
}
article.product-card header h4 {
font-size: 18.4px; line-height: 1.4;
}
.product-card header h4 {
font-size: 18.4px; line-height: 1.4;
}
.product-card .header h4 {
font-size: 18.4px; line-height: 1.4;
}
article.product-card small {
display: unset;
}
.product-card small {
display: unset;
}
article.product-card .detail {
display: unset;
}
.product-card .detail {
display: unset;
}
article.product-card.horizontal {
grid-template-columns: auto 1fr;
}
.product-card.horizontal {
grid-template-columns: auto 1fr;
}
article.product-card.horizontal > figure {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha)); border-bottom: none; border-radius: 4px 0 0 4px;
}
.product-card.horizontal > figure {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha)); border-bottom: none; border-radius: 4px 0 0 4px;
}
article.product-card.horizontal > figure img {
height: 0; min-height: 100%;
}
.product-card.horizontal > figure img {
height: 0; min-height: 100%;
}
article.product-card.horizontal section {
gap: 32px; padding: 16px 24px;
}
.product-card.horizontal section {
gap: 32px; padding: 16px 24px;
}
article.product-card.horizontal header {
grid-template-rows: repeat(auto-fit, minmax(0, min-content)); padding: 0; border-bottom: none;
}
.product-card.horizontal header {
grid-template-rows: repeat(auto-fit, minmax(0, min-content)); padding: 0; border-bottom: none;
}
.product-card.horizontal .header {
grid-template-rows: repeat(auto-fit, minmax(0, min-content)); padding: 0; border-bottom: none;
}
article.product-card.horizontal footer > * {
padding: 0; border-right: none;
}
.product-card.horizontal footer > * {
padding: 0; border-right: none;
}
.product-card.horizontal .footer > * {
padding: 0; border-right: none;
}
article.product-card.horizontal h3 {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.product-card.horizontal h3 {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
article.product-card.horizontal small {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.product-card.horizontal small {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
article.product-card.horizontal.big small {
white-space: unset; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.product-card.horizontal.big small {
white-space: unset; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
article.product {
grid-template-columns: 2fr 1fr;
}
.product.product-card {
grid-template-columns: 2fr 1fr;
}
article.product > section:first-of-type {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
.product.product-card > section:first-of-type {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
.rich-text .actions-menu {
display: none; bottom: unset; top: 24px; left: -8px; translate: -100% 0;
}
.stack:not(.squished .stack).two-columns {
grid-template-columns: 1fr 1fr;
}
.stack:not(.squished .stack).two-columns > :nth-child(odd) {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
.stack:not(.squished .stack).two-columns > :nth-child(2) {
border-top: none;
}
table > tbody > * > *.icon-cell {
width: 80px; min-width: 80px;
}
table > tfoot > * > *.icon-cell {
width: 80px; min-width: 80px;
}
table > tbody > * > *.icon-cell img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
table > tfoot > * > *.icon-cell img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
table > tbody > * > * > .actions {
justify-content: end;
}
table:not(.squished table) {
display: revert;
}
table:not(.squished table) > * {
display: revert;
}
table:not(.squished table) > thead {
display: revert; border: none;
}
table:not(.squished table) > thead > * {
display: revert; border: none;
}
table:not(.squished table) > thead > * > * {
display: revert; border: none;
}
table:not(.squished table) > tbody {
display: revert; border: none;
}
table:not(.squished table) > tbody > * {
display: revert; border: none;
}
table:not(.squished table) > tbody > * > * {
display: revert; border: none;
}
table:not(.squished table) > tfoot {
display: revert; border: none;
}
table:not(.squished table) > tfoot > * {
display: revert; border: none;
}
table:not(.squished table) > tfoot > * > * {
display: revert; border: none;
}
table:not(.squished table) > caption {
margin-bottom: 16px;
}
table:not(.squished table) > tbody > * > * {
border-top: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tfoot > * > * {
border-top: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tbody > * > *:first-child {
border-left: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tfoot > * > *:first-child {
border-left: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tbody > * > *:last-child {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tfoot > * > *:last-child {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tbody > * > *[data-label]:before {
display: none;
}
table:not(.squished table) > tfoot > * > *[data-label]:before {
display: none;
}
table:not(.squished table) > tbody > * > *.icon-cell {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tfoot > * > *.icon-cell {
border-right: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tbody:last-child > tr:last-child > * {
border-bottom: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tfoot:last-child > tr:last-child > * {
border-bottom: solid 1px rgb(var(--parent-color)/var(--border-alpha));
}
table:not(.squished table) > tbody > :first-child > :first-child {
border-top-left-radius: 4px;
}
table:not(.squished table) > tbody > :first-child > :last-child {
border-top-right-radius: 4px;
}
table:not(.squished table) > :last-child > :last-child > :first-child {
border-bottom-left-radius: 4px;
}
table:not(.squished table) > :last-child > :last-child > :last-child {
border-bottom-right-radius: 4px;
}
}
</style>
</head>
<body style='--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; height: auto; width: 100%; overflow-wrap: anywhere; font-size: 16px; line-height: 1.4; font-family: var(--font-family); font-feature-settings: "ss11", "ss04"; background-color: var(--body-bg); -webkit-font-smoothing: antialiased; color: rgb(var(--color)); min-height: 100%; margin: 0; padding: 0; border-style: solid; border-width: 0;' bgcolor="var(--body-bg)">
<div class="email " style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-size: 16px; line-height: 1.4; margin: 0; padding: 12px; border-style: solid; border-width: 0;">
<div class="main" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 448px; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 16px auto; padding: 0; border-style: solid; border-width: 1px;">
<div class="receipt" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 12px; border-style: solid; border-width: 0 0 1px;">
<div class="info-row" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; overflow: hidden; margin: 0 0 8px; padding: 0; border-style: solid; border-width: 0;">
<span class="info-label" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-weight: bold; float: left; margin: 0; padding: 0; border-style: solid; border-width: 0;">Order ID:</span>
<span class="info-value" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; float: right; margin: 0; padding: 0; border-style: solid; border-width: 0;">nsPAlL2Q87Ax1GkqQfd00Q==</span>
</div>
<div class="info-row with-top-margin" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; overflow: hidden; margin: 4px 0 8px; padding: 0; border-style: solid; border-width: 0;">
<span class="info-label" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-weight: bold; float: left; margin: 0; padding: 0; border-style: solid; border-width: 0;">Order date:</span>
<span class="info-value" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; float: right; margin: 0; padding: 0; border-style: solid; border-width: 0;">Sep 18, 2025</span>
</div>
<div class="info-row with-top-margin" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; overflow: hidden; margin: 4px 0 8px; padding: 0; border-style: solid; border-width: 0;">
<span class="info-label" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-weight: bold; float: left; margin: 0; padding: 0; border-style: solid; border-width: 0;">Total:</span>
<span class="info-value" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; float: right; margin: 0; padding: 0; border-style: solid; border-width: 0;">$2.99</span>
</div>
</div>
<div style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 12px; border-style: solid; border-width: 0 0 1px;">
<div class="item" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; border-radius: 4px; overflow: hidden; margin: 0; padding: 0; border-style: solid; border-width: 1px;">
<div class="product-checkout-cell" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table; table-layout: fixed; width: 100%; height: 128px; margin: 0; padding: 0; border-style: solid; border-width: 0 0 1px;">
<div class="figure" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table-cell; width: 128px; background: url(https://assets.gumroad.com/packs/static/b47cbdb8030bef7eda53.png) 0% 0% / cover; margin: 0; padding: 0; border-style: solid; border-width: 0 1px 0 0;">
<a target="_blank" href="https://track.gumroad.com/CL0/https:%2F%2Fbybaobab.gumroad.com%2Fl%2FoFttE/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/kpxP0uVJd_-fcRoRhpi9iUiJua-8PTsyoAMJZbGKgdE=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;"><img alt="Hair Brush Set for Procreate!" src="https://assets.gumroad.com/assets/native_types/thumbnails/digital-d4b2a661e31ec353551a8dae9996b1e75b1e629e363d683aaa5fd2fb1213311c.png" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: block; margin: 0; padding: 0; border-style: solid; border-width: 0;"></a>
</div>
<div class="section" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table-cell; margin: 0; padding: 16px; border-style: solid; border-width: 0;">
<div class="content" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table; table-layout: fixed; width: 100%; height: 100%; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<div class="section" title="Hair Brush Set for Procreate!" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table-row; height: 100%; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<h4 style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-size: 16px; line-height: 1.4; font-weight: bold; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-height: 22.4px; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<a target="_blank" href="https://track.gumroad.com/CL0/https:%2F%2Fbybaobab.gumroad.com%2Fl%2FoFttE/2/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/OkS_VpXLxqT7KSYe73VNIP6DsTbolS_wVd9Mjj-Uz7k=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;">Hair Brush Set for Procreate!</a>
</h4>
</div>
<div class="section" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: table-row; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<div class="section" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-height: 22.4px; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<div class="footer" title="bybaobab" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-size: 14px; line-height: 1.3; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<a target="_blank" href="https://track.gumroad.com/CL0/https:%2F%2Fbybaobab.gumroad.com/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/YJNo3GBqSxsaST4RUD4oW0XHPuF4KY2uwONfqU9nE5o=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;"><img alt="Avatar of bybaobab" class="user-avatar" src="https://public-files.gumroad.com/8u1zvvmtn4t9zu9wlfa4doi0gy6p" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; border-radius: 160px; width: 1.25em; aspect-ratio: 1; flex-shrink: 0; display: inline; margin: 0 8px 0 0; padding: 0; border-style: solid; border-width: 1px;"></a>
<span style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<a target="_blank" href="https://track.gumroad.com/CL0/https:%2F%2Fbybaobab.gumroad.com/2/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/i7UleUSFdznFBmZuW_RQd9eIvYmUrB1fn7Ul6gxKyeI=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;">bybaobab</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="details" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 16px; border-style: solid; border-width: 0;">
<a class="button primary" href="https://track.gumroad.com/CL0/https:%2F%2Fgumroad.com%2Fd%2F40562246f53dc8cee1ed77c902b24e1d/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/9oKMGMTNgP-mq0JLdP6l9rv9NrpANP7IU2hGFpMbbUw=423" style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: #fff; text-decoration: none; cursor: pointer; background-color: #000; font-size: 16px; line-height: 1.4; border-radius: 4px; font-family: inherit; display: block; align-items: center; justify-content: center; gap: 8px; transition-timing-function: ease-out; transition-duration: var(--transition-duration); transition-property: transform; --color: var(--contrast-primary); --active-bg: rgb(var(--color)/0.1); text-align: center; width: unset; margin: 0; padding: 12px 16px; border-style: solid; border-width: 1px;">View content</a>
<table class="table-stack" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; border-spacing: 0; width: 100%; display: revert; gap: 0; margin: 16px 0 0; padding: 0; border-style: solid; border-width: 0;">
<tbody style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; margin: 0; padding: 0; border-style: none; border-width: 0;">
<tr style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; border-radius: 4px; background-color: rgb(var(--filled)); --color: var(--contrast-filled); color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1); margin: 0 0 16px; padding: 0; border-style: none; border-width: 1px;" bgcolor="rgb(var(--filled))">
<td style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: middle; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: left; display: revert; border-top-left-radius: 4px; border-top-right-radius: 4px; margin: 0; padding: 16px; border-style: solid solid none; border-width: 1px 1px 0;" align="left" valign="middle">
<span style="font-weight: bold; --parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">Variant</span>
<br style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">
standard
</td>
</tr>
<tr style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; border-radius: 4px; background-color: rgb(var(--filled)); --color: var(--contrast-filled); color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1); margin: 0; padding: 0; border-style: none; border-width: 1px;" bgcolor="rgb(var(--filled))">
<td style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: middle; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: left; display: revert; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin: 0; padding: 16px; border-style: solid; border-width: 1px;" align="left" valign="middle">
<span style="font-weight: bold; --parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">Product price</span>
<br style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">
$2.99
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 12px; border-style: solid solid none; border-width: 0 0 1px;">
<h3 style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; font-size: 18.4px; line-height: 1.4; font-weight: normal; margin: 0; padding: 0; border-style: solid; border-width: 0;">Payment info</h3>
<div style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 16px 0 0; padding: 0; border-style: solid; border-width: 0;">
All charges are processed in United States Dollars. Your bank or financial institution may apply their own fees for currency conversion.
</div>
<div style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 16px 0 0; padding: 0; border-style: solid; border-width: 0;">
The charge will be listed as GUMRD.COM* on your credit card statement.
</div>
<table class="table-stack" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; border-spacing: 0; width: 100%; display: revert; gap: 0; margin: 16px 0 0; padding: 0; border-style: solid; border-width: 0;">
<tbody style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; margin: 0; padding: 0; border-style: none; border-width: 0;">
<tr style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; border-radius: 4px; background-color: rgb(var(--filled)); --color: var(--contrast-filled); color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1); margin: 0 0 16px; padding: 0; border-style: none; border-width: 1px;" bgcolor="rgb(var(--filled))">
<td style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: middle; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: left; display: revert; border-top-left-radius: 4px; border-top-right-radius: 4px; margin: 0; padding: 16px; border-style: solid solid none; border-width: 1px 1px 0;" align="left" valign="middle">
<span style="font-weight: bold; --parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">Hair Brush Set for Procreate!</span>
<br style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">
$2.99
</td>
</tr>
<tr style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; border-radius: 4px; background-color: rgb(var(--filled)); --color: var(--contrast-filled); color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1); margin: 0; padding: 0; border-style: none; border-width: 1px;" bgcolor="rgb(var(--filled))">
<td style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: middle; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: left; display: revert; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin: 0; padding: 16px; border-style: solid; border-width: 1px;" align="left" valign="middle">
<a href="https://track.gumroad.com/CL0/https:%2F%2Fgumroad.com%2Fpurchases%2FnsPAlL2Q87Ax1GkqQfd00Q==%2Fgenerate_invoice%3Femail=drazigreen2011%2540gmail.com/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/IKQmPor69WTGYUcBtgWGeDLaGXfQjmeVA8Bo0ZStw9s=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;">Generate invoice</a>
</td>
</tr>
</tbody>
</table>
<table class="table-stack" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; border-spacing: 0; width: 100%; display: revert; gap: 0; margin: 16px 0 0; padding: 0; border-style: solid; border-width: 0;">
<tbody style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; margin: 0; padding: 0; border-style: none; border-width: 0;">
<tr style="--parent-color: inherit; box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: revert; border-radius: 4px; background-color: rgb(var(--filled)); --color: var(--contrast-filled); color: rgb(var(--color)); --active-bg: rgb(var(--color)/0.1); margin: 0; padding: 0; border-style: none; border-width: 1px;" bgcolor="rgb(var(--filled))">
<td style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: middle; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: left; display: revert; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin: 0; padding: 16px; border-style: solid; border-width: 1px;" align="left" valign="middle">
<span style="font-weight: bold; --parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">Payment method</span>
<br style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">
VISA *3842
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 448px; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; text-align: center; margin: 32px auto 16px; padding: 0; border-style: solid; border-width: 0;" align="center">
<div class="paragraphs" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; display: block; flex-direction: column; gap: 16px; margin: 0; padding: 0; border-style: solid; border-width: 0;">
<p style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0 0 12px; padding: 0; border-style: solid; border-width: 0;">
<a href="https://track.gumroad.com/CL0/https:%2F%2Fgumroad.com%2Fpurchases%2FeyJ2IjoiMSIsImQiOiJqcDBiUFUzQmZwOGI5bk9acFJXK0lMZGFZZEhQMS9lOXBSMHFKMzBiS3diOHVpVWVxWkJPZklLblVxaW80VGgyVU81VFJMR1ZaWHc5UVhGWkc5ZXFrbTMvMWh4NFptV3NlWW1YRHU5YU1kZz0tLVpESi93RzE3SWRaYkZSSUotLTNkTm12dWZNVnh6ZmN0U1VoTnFmK0E9PSJ9%2Funsubscribe/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/__cpB5vFP08313b9kAidZp1ZmX3rQ-EgcZmbqimm4ds=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: underline; cursor: pointer; margin: 0; padding: 0; border-style: solid; border-width: 0;">Unsubscribe</a>
</p>
<p style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0; padding: 0; border-style: solid; border-width: 0;">548 Market St, San Francisco, CA 94104-5401, USA</p>
</div>
<a class="wordmark" href="https://track.gumroad.com/CL0/https:%2F%2Fgumroad.com%2F/1/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/GcvY5R7coTnlxvnHFU8WWI-gYr2bDmzokVZ6nkQX1q4=423" style="--parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; color: var(--color); text-decoration: none; cursor: pointer; display: inline-block; margin: 32px 0 0; padding: 0; border-style: solid; border-width: 0;">
Powered by
<img src="https://assets.gumroad.com/assets/email/wordmark_logo-98d469a5bb4ace8306c56bf2709a0588070d63d31e84de614ca9021c1957c30d.png" alt="Gumroad" style="width: 138px; height: 18px; --parent-color: var(--color); box-sizing: border-box; min-width: 0; max-width: 100%; vertical-align: text-bottom; background-origin: padding-box; --border: solid 1px rgb(var(--parent-color)/var(--border-alpha)); --outline: 2px solid rgb(var(--accent)); --gray-1: 0.1; --gray-2: 0.2; --gray-3: 0.5; margin: 0 0 0 4px; padding: 0; border-style: solid; border-width: 0;" width="138" height="18">
</a>
</div>
</div>
<img alt="" src="http://track.gumroad.com/CI0/010001995edd95bc-a63ad784-f05a-47b2-94a8-e92a9a94c92f-000000/2lYU9KxkT1vVHGIPW7AQVs_5S38jxXi-geUG0dF3BJI=423" style="display: none; width: 1px; height: 1px;">
</body>
</html>