:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-50: rgb(247, 247, 247);
    --color-gray-100: rgb(239, 239, 239);
    --color-gray-200: rgb(223, 223, 223);
    --color-gray-300: rgb(202, 202, 202);
    --color-gray-400: rgb(168, 168, 168);
    --color-gray-500: rgb(135, 135, 135);
    --color-gray-600: rgb(109, 109, 109);
    --color-gray-700: rgb(78, 78, 78);
    --color-gray-800: rgb(55, 55, 55);
    --color-gray-900: rgb(38, 38, 38);
    --color-gray-1000: rgb(25, 25, 25);
    --color-purple: #a239ca;
    --color-electric-green: #3AE660;
    --color-blue: #4717f6;
    --color-green: #3AE660;
    --color-red: #ff533d;
    --color-yellow: #e5e338;
    --12px: .75rem;
    --14px: .875rem;
    --16px: 1rem;
    --18px: 1.125rem;
    --20px: 1.25rem;
    --22px: 1.375rem;
    --24px: 1.5rem;
    --28px: 1.75rem;
    --32px: 2rem;
    --36px: 2.25rem;
    --40px: 2.5rem;
    --44px: 2.75rem;
    --48px: 3rem;
    --56px: 3.5rem;
    --64px: 4rem;
    --80px: 5rem;
    --96px: 6rem;
    --112px: 7rem;
    --128px: 8rem
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

/*! https://github.com/a11yproject/a11yproject.com/blob/main/src/css/base/_resets.scss */
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

a img {
    border: none
}

b,
strong {
    font-weight: 700
}

button,
input[type=button] {
    border: 0
}

em,
cite,
i {
    font-style: italic
}

img,
figure,
picture {
    border: 0;
    display: block;
    height: auto;
    max-width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500
}

sub {
    text-transform: lowercase;
    font-size: inherit;
    font-variant-position: sub
}

sup {
    text-transform: lowercase;
    font-variant-position: super
}

textarea {
    overflow: auto;
    resize: vertical
}

@font-face {
    font-family: Atlas Grotesk;
    src: url(https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Atlas Grotesk;
    src: url(https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Tiempos Text;
    src: url(https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Tiempos Text;
    src: url(https://pudding.cool/assets/fonts/tiempos/TiemposTextWeb-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

@font-face {
    font-family: Atlas Typewriter;
    src: url(https://pudding.cool/assets/fonts/atlas/AtlasTypewriter-Medium-Web.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: swap
}

body {
    background-color: var(--color-bg, white);
    color: var(--color-fg, black);
    line-height: 1.4;
    font-family: var(--font-body, serif);
    font-feature-settings: "kern" 1, "onum" 0, "liga" 0, "tnum" 1;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    -webkit-tap-highlight-color: transparent
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 16px 0
}

mark {
    background-color: var(--color-mark, yellow);
    padding: 0 4px
}

a {
    color: var(--color-link, blue);
    text-decoration: 2px underline var(--color-link, blue)
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto
}

input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-input-bg, whitesmoke);
    color: var(--color-input-fg, black);
    border-radius: var(--border-radius, 0);
    border: none;
    font-family: var(--font-form, sans-serif);
    font-size: inherit;
    outline: 1px solid var(--color-border, ray);
    padding: 8px
}

button,
select,
a[role=button],
input[type=submit],
input[type=reset],
input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-button-bg, lightgray);
    color: var(--color-button-fg, black);
    border-radius: var(--border-radius, 0);
    border: none;
    font-family: var(--font-form, sans-serif);
    font-size: inherit;
    outline: none;
    padding: 8px;
    text-decoration: none
}

button,
a[role=button],
input[type=button],
input[type=checkbox],
input[type=radio],
input[type=range],
input[type=submit],
input[type=reset],
select {
    cursor: pointer
}

input[type=button],
input[type=range],
input[type=submit],
input[type=reset],
select {
    display: inline-block
}

button:disabled,
a[role=button]:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
    opacity: .5;
    cursor: not-allowed
}

input[type=range] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    padding: 0;
    outline: none
}

button:focus,
a:focus,
a[role=button]:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
a[role=button]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: 2px solid transparent
}

button:disabled,
a[role=button]:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .5
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed
}

table caption,
td,
th {
    text-align: left
}

td,
th {
    padding: 8px 0;
    vertical-align: top;
    word-wrap: break-word
}

thead {
    border-bottom: 1px solid var(--color-border, lightgray)
}

tfoot {
    border-top: 1px solid var(--color-border, lightgray)
}

::-moz-placeholder {
    color: var(--color-placeholder, gray)
}

:-ms-input-placeholder {
    color: var(--color-placeholder, gray)
}

::-ms-input-placeholder {
    color: var(--color-placeholder, gray)
}

::placeholder {
    color: var(--color-placeholder, gray)
}

::-moz-selection {
    background-color: var(--color-selection, lightgray)
}

::selection {
    background-color: var(--color-selection, lightgray)
}

select {
    padding-right: 24px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A);
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: auto 50%
}

ol,
ul {
    padding-left: 16px
}

.skip-to-main {
    border: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute
}

.skip-to-main:focus {
    background-color: var(--color-gray-900, black);
    color: var(--color-white, white);
    width: auto;
    height: auto;
    padding: 8px;
    z-index: var(--z-overlay, 1000)
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.text-outline {
    --stroke-width: 1px;
    --stroke-width-n: calc(var(--stroke-width) * -1);
    text-shadow: var(--stroke-width-n) var(--stroke-width-n) 0 var(--color-text-outline, #fff), 0 var(--stroke-width-n) 0 var(--color-text-outline, #fff), var(--stroke-width) var(--stroke-width-n) 0 var(--color-text-outline, #fff), var(--stroke-width) 0 0 var(--color-text-outline, #fff), var(--stroke-width) var(--stroke-width) 0 var(--color-text-outline, #fff), 0 var(--stroke-width) 0 var(--color-text-outline, #fff), var(--stroke-width-n) var(--stroke-width) 0 var(--color-text-outline, #fff), var(--stroke-width-n) 0 0 var(--color-text-outline, #fff)
}

@media (hover: hover) and (pointer: fine) {

    button:hover,
    a[role=button]:hover,
    input[type=button]:hover,
    input[type=submit]:hover,
    input[type=reset]:hover {
        background: var(--color-button-hover, lightgray)
    }

    button:disabled:hover,
    a[role=button]:disabled:hover,
    input[type=button]:disabled:hover,
    input[type=submit]:disabled:hover,
    input[type=reset]:disabled:hover {
        opacity: .5;
        cursor: not-allowed;
        background: var(--color-button-bg, lightgray)
    }
}

:root {
    --sans: "Atlas Grotesk", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    --serif: "Tiempos Text", Iowan Old Style, Times New Roman, Times, serif;
    --mono: "Atlas Typewriter", Menlo, Consolas, Monaco, monospace;
    --z-bottom: -100;
    --z-middle: 0;
    --z-top: 100;
    --z-overlay: 1000;
    --border-radius: 3px;
    --font-body: var(--serif);
    --font-form: var(--mono);
    --color-bg: var(--color-white);
    --color-fg: var(--color-gray-200);
    --color-primary: var(--color-black);
    --color-link: var(--color-black);
    --color-secondary-gray: var(--color-gray-600);
    --color-link-hover: var(--color-gray-600);
    --color-focus: var(--color-electric-green);
    --color-mark: var(--color-yellow);
    --color-selection: var(--color-gray-300);
    --color-border: var(--color-gray-300);
    --color-button-bg: var(--color-gray-900);
    --color-button-fg: var(--color-gray-100);
    --color-button-hover: var(--color-gray-700);
    --color-input-bg: var(--color-gray-50);
    --color-input-fg: var(--color-gray-900);
    --color-placeholder: var(--color-gray-500);
    --color-default-story-bg: var(--color-gray-100);
    --font-size-giant: clamp(3rem, 4vw, 5rem);
    --font-size-large: clamp(1.5rem, 2.5vw, 2.5rem);
    --font-size-medium: clamp(1rem, 1.75vw, 1.5rem);
    --font-size-small: clamp(15px, 1.25vw, 1rem);
    --font-size-xsmall: clamp(12px, 1vw, .8rem);
    --font-weight-bold: 900;
    --font-weight-normal: 400;
    --font-weight-thin: 100;
    --margin: 16px;
    --width-column-wide: 1280px;
    --width-column-regular: 720px;
    --width-padded: 80vw;
    --margin-left: 10vw;
    --width-padded-mobile: 90vw;
    --margin-left-mobile: 5vw;
    --left-tilt: -2deg;
    --right-tilt: 2deg;
    --left-tilt-double: -4deg;
    --right-tilt-double: 4deg;
    --transition-fast: .1s;
    --transition-medium: .2s;
    --transition-slow: .5s;
    --transition-ease: ease-in;
    --fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 30%, rgba(255, 255, 255, 1) 50%);
    --1s: 1ms
}

@media screen and (prefers-color-scheme:dark) {
    :root {
        --color-bg: var(--color-gray-1000);
        --color-fg: var(--color-gray-100);
        --color-primary: var(--color-gray-1000);
        --color-secondary-gray: var(--color-gray-400);
        --color-link: var(--color-gray-100);
        --color-link-hover: var(--color-gray-400);
        --color-focus: var(--color-electric-green);
        --color-mark: var(--color-yellow);
        --color-selection: var(--color-gray-300);
        --color-border: var(--color-gray-700);
        --color-button-bg: var(--color-gray-100);
        --color-button-fg: var(--color-gray-900);
        --color-button-hover: var(--color-gray-300);
        --color-input-bg: var(--color-gray-900);
        --color-input-fg: var(--color-gray-50);
        --color-placeholder: var(--color-gray-400);
        --color-default-story-bg: var(--color-gray-800);
        --fade: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(25, 25, 25, .8) 30%, rgba(25, 25, 25, 1) 50%)
    }
}

@media screen and (prefers-reduced-motion: no-preference) {
    :root {
        --1s: 1s
    }
}

h1 {
    font-size: var(--48px, 48px)
}

h2 {
    font-size: var(--36px, 36px)
}

h3 {
    font-size: var(--28px, 28px)
}

h4 {
    font-size: var(--24px, 24px)
}

h5 {
    font-size: var(--22px, 22px)
}

h6 {
    font-size: var(--20px, 20px)
}

main {
    max-width: var(--width-column-wide);
    margin: 0 auto;
    padding: 0
}

svg {
    display: block;
    width: 100%;
    height: auto
}

.column-wide {
    max-width: var(--width-column-wide);
    padding: 0 16px
}

.column-regular {
    max-width: var(--width-column-regular);
    padding: 0 16px
}

.column-regular a:hover {
    color: var(--color-link-hover);
    text-decoration: underline 2px var(--color-link-hover)
}

.column-regular h2 {
    font-family: var(--sans);
    font-weight: var(--font-weight-bold);
    margin-top: 64px
}

.upper {
    text-transform: uppercase
}

.inner strong,
li strong {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased
}

input[type=search],
input[type=text],
textarea {
    font-size: 16px
}

button,
input[type=submit] {
    text-transform: uppercase;
    background: var(--color-fg);
    color: var(--color-bg);
    border-radius: 2px;
    padding: 12px;
    font-size: var(--font-size-xsmall)
}

nav.svelte-1elx88z {
    position: fixed;
    top: 0;
    right: 0;
    max-width: 360px;
    height: 100svh;
    z-index: calc(var(--z-overlay) + 1);
    background: var(--color-fg);
    color: var(--color-bg);
    visibility: hidden;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%);
    -webkit-transition: -webkit-transform var(--transition-medium);
    transition: -webkit-transform var(--transition-medium);
    transition: transform var(--transition-medium);
    transition: transform var(--transition-medium), -webkit-transform var(--transition-medium)
}

nav.visible.svelte-1elx88z {
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0)
}

h4.svelte-1elx88z {
    font-family: var(--mono);
    font-size: var(--font-size-xsmall);
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased
}

.links.svelte-1elx88z {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    gap: 32px;
    padding: 0 24px
}

.links.svelte-1elx88z>div:where(.svelte-1elx88z) {
    width: 50%
}

.links.svelte-1elx88z ul:where(.svelte-1elx88z) {
    padding: 0;
    margin: 0;
    list-style-type: none
}

.links.svelte-1elx88z li:where(.svelte-1elx88z) {
    font-family: var(--sans);
    padding: 0;
    margin: 0 0 8px;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.links.svelte-1elx88z li:where(.svelte-1elx88z) a:where(.svelte-1elx88z) {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: currentColor;
    text-decoration: none
}

.links.svelte-1elx88z li:where(.svelte-1elx88z) a:where(.svelte-1elx88z) span:where(.svelte-1elx88z) {
    margin-left: 4px;
    border: none;
    text-decoration: none
}

.links.svelte-1elx88z li:where(.svelte-1elx88z):hover img:where(.svelte-1elx88z) {
    -webkit-transform: rotate(var(--left-tilt-double)) scale(1.05);
    transform: rotate(var(--left-tilt-double)) scale(1.05)
}

.follow.svelte-1elx88z img:where(.svelte-1elx88z) {
    width: 48px
}

.follow.svelte-1elx88z li:where(.svelte-1elx88z):hover span:where(.svelte-1elx88z) {
    color: var(--color-link-hover)
}

.btn-close.svelte-1elx88z {
    display: -webkit-box;
    display: flex;
    justify-self: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background: transparent
}

.btn-close svg path,
.btn-close svg circle {
    stroke: var(--color-bg)
}

.btn-close:hover svg path,
.btn-close:hover svg circle {
    stroke: var(--color-link-hover)
}

header.svelte-72btqc {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    font-family: var(--sans);
    padding-top: 32px;
    padding-bottom: 16px;
    margin: 0 auto;
    max-height: 100px
}

header.svelte-72btqc>div:where(.svelte-72btqc) {
    width: 30%
}

.menu.svelte-72btqc {
    max-width: 100px
}

ul.svelte-72btqc {
    padding: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

li.svelte-72btqc {
    list-style-type: none;
    width: 100%;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25)
}

li.svelte-72btqc:hover {
    -webkit-transform: rotate(var(--right-tilt)) scale(1.05);
    transform: rotate(var(--right-tilt)) scale(1.05)
}

li.svelte-72btqc a:where(.svelte-72btqc) {
    display: block;
    max-width: 150px
}

li.svelte-72btqc:nth-of-type(1) {
    -webkit-transform: rotate(var(--left-tilt));
    transform: rotate(var(--left-tilt))
}

li.svelte-72btqc:nth-of-type(3) {
    -webkit-transform: rotate(var(--right-tilt));
    transform: rotate(var(--right-tilt))
}

li.svelte-72btqc:nth-of-type(3):hover {
    -webkit-transform: rotate(var(--right-tilt-double)) scale(1.05);
    transform: rotate(var(--right-tilt-double)) scale(1.05)
}

li.svelte-72btqc:nth-of-type(1):hover {
    -webkit-transform: rotate(0deg) scale(1.05);
    transform: rotate(0) scale(1.05)
}

li.svelte-72btqc:nth-of-type(2) {
    width: 40%;
    display: none
}

li.svelte-72btqc:nth-of-type(1) {
    display: none
}

.stories.svelte-72btqc {
    display: none
}

.stories-mobile.svelte-72btqc {
    display: block;
    font-family: var(--sans);
    margin-bottom: 64px;
    text-align: center;
    margin-top: 10px
}

.stories.svelte-72btqc p:where(.svelte-72btqc) {
    margin: 0;
    font-size: var(--14px);
    line-height: 1.325
}

.stories.svelte-72btqc strong:where(.svelte-72btqc) {
    display: inline-block
}

.wordmark.svelte-72btqc {
    width: 200px;
    margin: 0 0 0 -16px;
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: start;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25)
}

.wordmark.svelte-72btqc:hover {
    -webkit-transform: rotate(var(--left-tilt)) scale(1.05);
    transform: rotate(var(--left-tilt)) scale(1.05)
}

.wordmark.svelte-72btqc a:where(.svelte-72btqc) {
    border: none;
    display: block;
    color: var(--color-fg);
    max-width: 16em
}

.wordmark.svelte-72btqc a:where(.svelte-72btqc):hover {
    background-color: transparent
}

button.svelte-72btqc {
    background: none;
    border: none;
    padding: 0;
    line-height: 1
}

@media only screen and (min-width: 600px) {
    .wordmark.svelte-72btqc {
        width: 40%
    }

    li.svelte-72btqc {
        width: 33.33%
    }

    li.svelte-72btqc:nth-of-type(2) {
        width: 50%
    }

    .menu.svelte-72btqc {
        width: 350px;
        max-width: none
    }

    li.svelte-72btqc:nth-of-type(1),
    li.svelte-72btqc:nth-of-type(2) {
        display: inline-block
    }

    .stories-mobile.svelte-72btqc {
        text-align: left;
        -webkit-transform: translate(0, 5px);
        transform: translateY(5px)
    }
}

@media only screen and (min-width: 960px) {
    .stories.svelte-72btqc {
        display: inline-block;
        max-width: 300px
    }

    .stories-mobile.svelte-72btqc {
        display: none
    }

    .wordmark.svelte-72btqc {
        margin: 0 auto;
        -webkit-box-pack: center;
        justify-content: center
    }

    header.svelte-72btqc {
        margin-bottom: 24px
    }
}

.promo.svelte-72btqc {
    background-color: var(--color-fg);
    color: var(--color-bg);
    text-align: center;
    padding: 16px
}

.promo.svelte-72btqc p:where(.svelte-72btqc) {
    margin: 0
}

.promo.svelte-72btqc p:where(.svelte-72btqc) a:where(.svelte-72btqc) {
    font-family: var(--mono);
    color: var(--color-bg);
    text-decoration-color: var(--color-bg);
    font-size: var(--14px)
}

footer.svelte-1n6ip51 {
    margin-top: 60px
}

.c.svelte-1n6ip51 {
    max-width: calc(var(--width-column-wide, 1280px) - var(--margin, 16px) * 2);
    padding: 16px;
    margin: 32px auto 100px;
    font-family: var(--sans)
}

.top.svelte-1n6ip51 {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0 0 64px
}

.text.svelte-1n6ip51 {
    font-size: var(--28px, 28px);
    text-align: center;
    max-width: 900px
}

.images.svelte-1n6ip51 {
    width: 100%
}

.images.svelte-1n6ip51 ul:where(.svelte-1n6ip51) {
    width: 100%;
    padding: 0;
    display: -webkit-box;
    display: flex;
    margin: 0 auto;
    gap: 32px
}

.images.svelte-1n6ip51 ul:where(.svelte-1n6ip51) {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
}

.images.svelte-1n6ip51 ul:where(.svelte-1n6ip51) li:where(.svelte-1n6ip51) {
    width: 100%;
    margin: 0;
    list-style-type: none;
    padding: 0;
    --padding: clamp(16px, 12vw, 36px)
}

.bottom.svelte-1n6ip51 {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    align-items: stretch;
    gap: 48px
}

.cta-wrapper.svelte-1n6ip51 {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    gap: 48px
}

.cta-wrapper.svelte-1n6ip51 section:where(.svelte-1n6ip51) {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    gap: 0px
}

.links.svelte-1n6ip51 {
    width: 100%;
    min-width: 300px
}

.links.svelte-1n6ip51 p.title:where(.svelte-1n6ip51) {
    font-family: var(--mono);
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font-size-xsmall, 14px);
    -webkit-font-smoothing: antialiased
}

.links.svelte-1n6ip51 .inner:where(.svelte-1n6ip51) {
    display: -webkit-box;
    width: 100%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 16px
}

p.svelte-1n6ip51 {
    color: var(--color-fg)
}

a.svelte-1n6ip51 {
    font-weight: 700;
    color: var(--color-fg);
    -webkit-text-decoration: 2px underline var(--color-fg);
    text-decoration: 2px underline var(--color-fg);
    -webkit-font-smoothing: antialiased
}

a.svelte-1n6ip51:hover {
    color: var(--color-link-hover);
    -webkit-text-decoration: 2px underline var(--color-link-hover);
    text-decoration: 2px underline var(--color-link-hover)
}

a.svelte-1n6ip51:hover+.arrow:where(.svelte-1n6ip51) {
    left: -2px
}

a:hover+.arrow svg path {
    stroke: var(--color-link-hover, blue)
}

ul.svelte-1n6ip51 {
    padding: 0
}

.about.svelte-1n6ip51,
.follow.svelte-1n6ip51 {
    width: 50%
}

li.svelte-1n6ip51 {
    list-style-type: none;
    font-size: var(--14px)
}

.text-wrapper.svelte-1n6ip51 {
    width: 100%
}

.text-wrapper.svelte-1n6ip51 p:where(.svelte-1n6ip51) {
    font-size: var(--14px)
}

.img-wrapper.svelte-1n6ip51 {
    width: 100%;
    max-width: 160px;
    height: 160px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.links.svelte-1n6ip51 .img-wrapper:where(.svelte-1n6ip51) {
    max-width: none;
    width: 100%;
    height: auto
}

.donate.svelte-1n6ip51 img:where(.svelte-1n6ip51) {
    -webkit-transform: rotate(var(--right-tilt, 2deg));
    transform: rotate(var(--right-tilt, 2deg));
    width: 100%;
    max-width: 180px;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25)
}

.donate.svelte-1n6ip51 .img-wrapper:where(.svelte-1n6ip51):hover img:where(.svelte-1n6ip51) {
    -webkit-transform: rotate(0) scale(1.05);
    transform: rotate(0) scale(1.05)
}

.subscribe.svelte-1n6ip51 img:where(.svelte-1n6ip51) {
    width: 100%;
    max-width: 180px;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25)
}

.subscribe.svelte-1n6ip51 .img-wrapper:where(.svelte-1n6ip51):hover img:where(.svelte-1n6ip51) {
    -webkit-transform: rotate(var(--left-tilt, -2deg)) scale(1.05);
    transform: rotate(var(--left-tilt, -2deg)) scale(1.05)
}

.wordmark.svelte-1n6ip51 {
    -webkit-transform: rotate(var(--left-tilt, -2deg));
    transform: rotate(var(--left-tilt, -2deg));
    max-width: 360px;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25)
}

.wordmark.svelte-1n6ip51:hover {
    -webkit-transform: rotate(0) scale(1.05);
    transform: rotate(0) scale(1.05)
}

.arrow.svelte-1n6ip51 {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 4px;
    left: -4px;
    -webkit-transition: left calc(var(--1s) * .25);
    transition: left calc(var(--1s) * .25)
}

@media only screen and (min-width: 400px) {
    .images.svelte-1n6ip51 ul:where(.svelte-1n6ip51) li:where(.svelte-1n6ip51) {
        width: calc(50% - 16px);
        padding: 0
    }
}

@media only screen and (min-width: 720px) {
    .bottom.svelte-1n6ip51 {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        align-items: stretch;
        gap: 48px
    }

    .cta-wrapper.svelte-1n6ip51 {
        width: 66.66%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        gap: 48px
    }

    .cta-wrapper.svelte-1n6ip51 section:where(.svelte-1n6ip51) {
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        gap: 24px
    }

    .text-wrapper.svelte-1n6ip51 {
        width: 66.66%
    }

    .text-wrapper.svelte-1n6ip51 p:where(.svelte-1n6ip51) {
        font-size: var(--16px, 16px)
    }

    .img-wrapper.svelte-1n6ip51 {
        width: 33.33%;
        max-width: 160px;
        height: 160px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center
    }

    .links.svelte-1n6ip51 {
        width: 33.33%
    }

    li.svelte-1n6ip51 {
        font-size: var(--16px, 16px)
    }

    .arrow.svelte-1n6ip51 {
        width: 24px;
        height: 24px;
        top: 6px;
        left: -4px
    }

    .images.svelte-1n6ip51 ul:where(.svelte-1n6ip51) li:where(.svelte-1n6ip51) {
        width: calc(25% - 24px);
        padding: 32px 0
    }

    .text.svelte-1n6ip51 {
        font-size: var(--20px, 20px)
    }
}

@media only screen and (min-width: 960px) {
    .cta-wrapper.svelte-1n6ip51 {
        width: 66.66%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        gap: 48px
    }

    .cta-wrapper.svelte-1n6ip51 section:where(.svelte-1n6ip51) {
        width: 50%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        gap: 0
    }

    .text-wrapper.svelte-1n6ip51 {
        width: 100%
    }

    .img-wrapper.svelte-1n6ip51 {
        max-width: none;
        width: 100%;
        height: 180px
    }

    .links.svelte-1n6ip51 .img-wrapper:where(.svelte-1n6ip51) {
        max-width: none;
        height: 180px
    }

    .subscribe.svelte-1n6ip51 img:where(.svelte-1n6ip51) {
        max-width: 200px
    }

    .text.svelte-1n6ip51 {
        font-size: var(--28px, 28px)
    }
}