* {
        box-sizing: border-box
    }

    :after,
    :before {
        box-sizing: inherit
    }

    body,
    dd,
    dl,
    dt,
    figcaption,
    figure,
    h1,
    h2,
    h3,
    h4,
    li,
    ol,
    p,
    ul {
        margin: 0;
        padding: 0
    }

    body {
        -ms-overflow-style: -ms-autohiding-scrollbar;
        scroll-behavior: smooth;
        font-size: 1rem;
        min-height: 100vh
    }

    ol[class],
    ul[class] {
        list-style: none
    }

    a:not([class]) {
        text-decoration: underline;
        text-decoration-skip-ink: auto;
        cursor: pointer
    }

    input::-webkit-input-placeholder,
    select::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        line-height: normal
    }

    img {
        max-width: 100%
    }

    @media(prefers-reduced-motion:reduce) {
        * {
            -webkit-animation: none !important;
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important
        }
    }

    .sf-flow {
        --flow-space: 1em
    }

    .sf-flow>*+* {
        margin-top: 1em;
        margin-top: var(--flow-space)
    }

    .align-start {
        align-items: flex-start
    }

    .align-center {
        align-items: center
    }

    .align-end {
        align-items: flex-end
    }

    .bg-mint {
        background: #6fdcbf
    }

    .bg-mint-no-swop {
        background: #6fdcbf
    }

    .bg-mint-up {
        background: #a5d4bb
    }

    .bg-mint-down {
        background: #55af96
    }

    .bg-lilac {
        background: #ae8fdb
    }

    .bg-lilac-no-swop {
        background: #ae8fdb
    }

    .bg-sea {
        background: #72cada
    }

    .bg-highlight {
        background: #ae8fdb
    }

    .bg-lilac-up {
        background: #b1b1d8
    }

    .bg-sherbet {
        background: #fef8b4
    }

    .bg-rose {
        background: #dc849b
    }

    .bg-marshmellow {
        background: #d695b6
    }

    .bg-peach {
        background: #f2c3c0
    }

    .bg-biscuit {
        background: #ad998a
    }

    .bg-oat {
        background: #cbc1bd
    }

    .bg-light {
        background: #f7f7f7
    }

    .bg-light-down {
        background: #fafafa
    }

    .bg-light-down-2 {
        background: #f4f5f5
    }

    .bg-light-down-3 {
        background: #ecedee
    }

    .bg-light-fade {
        background: #eeebef
    }

    .bg-mid {
        background: #ccc
    }

    .bg-dark {
        background: #404040
    }

    .bg-dark-down {
        background: #303145
    }

    .bg-dark-no-swop {
        background: #404040
    }

    .color-mint {
        color: #6fdcbf
    }

    .color-mint-no-swop {
        color: #6fdcbf
    }

    .color-mint-up {
        color: #a5d4bb
    }

    .color-mint-down {
        color: #55af96
    }

    .color-lilac {
        color: #ae8fdb
    }

    .color-lilac-no-swop {
        color: #ae8fdb
    }

    .color-sea {
        color: #72cada
    }

    .color-highlight {
        color: #ae8fdb
    }

    .color-lilac-up {
        color: #b1b1d8
    }

    .color-sherbet {
        color: #fef8b4
    }

    .color-rose {
        color: #dc849b
    }

    .color-marshmellow {
        color: #d695b6
    }

    .color-peach {
        color: #f2c3c0
    }

    .color-biscuit {
        color: #ad998a
    }

    .color-oat {
        color: #cbc1bd
    }

    .color-light {
        color: #f7f7f7
    }

    .color-light-down {
        color: #fafafa
    }

    .color-light-down-2 {
        color: #f4f5f5
    }

    .color-light-down-3 {
        color: #ecedee
    }

    .color-light-fade {
        color: #eeebef
    }

    .color-mid {
        color: #ccc
    }

    .color-dark {
        color: #404040
    }

    .color-dark-down {
        color: #303145
    }

    .color-dark-no-swop {
        color: #404040
    }

    .box-block {
        display: block
    }

    .box-flex {
        display: flex
    }

    .box-inline-flex {
        display: inline-flex
    }

    .box-hide {
        display: none
    }

    .font-base {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
    }

    .font-sans-serif {
        font-family: Mosk, sans-serif
    }

    .font-cursive {
        font-family: Jenthill, sans-serif
    }

    .gap-top-300 {
        margin-top: .8rem
    }

    .gap-top-500 {
        margin-top: 1.25rem
    }

    .gap-top-600 {
        margin-top: 1.56rem
    }

    .gap-top-700 {
        margin-top: 1.95rem
    }

    .gap-top-800 {
        margin-top: 2.44rem
    }

    .gap-top-900 {
        margin-top: 3.05rem
    }

    .gap-top-base {
        margin-top: 1rem
    }

    .gap-top-max {
        margin-top: 4rem
    }

    .gap-top-x-lg {
        margin-top: 6rem
    }

    .gap-bottom-300 {
        margin-bottom: .8rem
    }

    .gap-bottom-500 {
        margin-bottom: 1.25rem
    }

    .gap-bottom-600 {
        margin-bottom: 1.56rem
    }

    .gap-bottom-700 {
        margin-bottom: 1.95rem
    }

    .gap-bottom-800 {
        margin-bottom: 2.44rem
    }

    .gap-bottom-900 {
        margin-bottom: 3.05rem
    }

    .gap-bottom-base {
        margin-bottom: 1rem
    }

    .gap-bottom-max {
        margin-bottom: 4rem
    }

    .gap-bottom-x-lg {
        margin-bottom: 6rem
    }

    .leading-tight {
        line-height: 1.2
    }

    .leading-mid {
        line-height: 1.5
    }

    .measure-long {
        max-width: 75ch
    }

    .measure-short {
        max-width: 60ch
    }

    .measure-compact {
        max-width: 40ch
    }

    .pad-top-300 {
        padding-top: .8rem
    }

    .pad-top-500 {
        padding-top: 1.25rem
    }

    .pad-top-600 {
        padding-top: 1.56rem
    }

    .pad-top-700 {
        padding-top: 1.95rem
    }

    .pad-top-800 {
        padding-top: 2.44rem
    }

    .pad-top-900 {
        padding-top: 3.05rem
    }

    .pad-top-base {
        padding-top: 1rem
    }

    .pad-top-max {
        padding-top: 4rem
    }

    .pad-top-x-lg {
        padding-top: 6rem
    }

    .pad-bottom-300 {
        padding-bottom: .8rem
    }

    .pad-bottom-500 {
        padding-bottom: 1.25rem
    }

    .pad-bottom-600 {
        padding-bottom: 1.56rem
    }

    .pad-bottom-700 {
        padding-bottom: 1.95rem
    }

    .pad-bottom-800 {
        padding-bottom: 2.44rem
    }

    .pad-bottom-900 {
        padding-bottom: 3.05rem
    }

    .pad-bottom-base {
        padding-bottom: 1rem
    }

    .pad-bottom-max {
        padding-bottom: 4rem
    }

    .pad-bottom-x-lg {
        padding-bottom: 6rem
    }

    .pad-left-300 {
        padding-left: .8rem
    }

    .pad-left-500 {
        padding-left: 1.25rem
    }

    .pad-left-600 {
        padding-left: 1.56rem
    }

    .pad-left-700 {
        padding-left: 1.95rem
    }

    .pad-left-800 {
        padding-left: 2.44rem
    }

    .pad-left-900 {
        padding-left: 3.05rem
    }

    .pad-left-base {
        padding-left: 1rem
    }

    .pad-left-max {
        padding-left: 4rem
    }

    .pad-left-x-lg {
        padding-left: 6rem
    }

    .space-between {
        justify-content: space-between
    }

    .space-around {
        justify-content: space-around
    }

    .space-before {
        justify-content: flex-end
    }

    .stack-300 {
        z-index: 0
    }

    .stack-400 {
        z-index: 10
    }

    .stack-500 {
        z-index: 20
    }

    .stack-600 {
        z-index: 30
    }

    .stack-700 {
        z-index: 40
    }

    .text-300 {
        font-size: .8rem
    }

    .text-500 {
        font-size: 1.25rem
    }

    .text-600 {
        font-size: 1.56rem
    }

    .text-700 {
        font-size: 1.95rem
    }

    .text-800 {
        font-size: 2.44rem
    }

    .text-900 {
        font-size: 3.05rem
    }

    .text-base {
        font-size: 1rem
    }

    .text-max {
        font-size: 4rem
    }

    .text-x-lg {
        font-size: 6rem
    }

    .weight-light {
        font-weight: 300
    }

    .weight-regular {
        font-weight: 400
    }

    .weight-mid {
        font-weight: 600
    }

    .weight-bold {
        font-weight: 700
    }

    .width-full {
        width: 100%
    }

    .width-half {
        width: 50%
    }

    .width-quarter {
        width: 25%
    }

    .width-third {
        width: 33.3333333333%
    }

    @media screen and (min-width: 48rem) {
        .md\:align-start {
            align-items: flex-start
        }

        .md\:align-center {
            align-items: center
        }

        .md\:align-end {
            align-items: flex-end
        }

        .md\:box-block {
            display: block
        }

        .md\:box-flex {
            display: flex
        }

        .md\:box-inline-flex {
            display: inline-flex
        }

        .md\:box-hide {
            display: none
        }

        .md\:space-between {
            justify-content: space-between
        }

        .md\:space-around {
            justify-content: space-around
        }

        .md\:space-before {
            justify-content: flex-end
        }

        .md\:text-300 {
            font-size: .8rem
        }

        .md\:text-500 {
            font-size: 1.25rem
        }

        .md\:text-600 {
            font-size: 1.56rem
        }

        .md\:text-700 {
            font-size: 1.95rem
        }

        .md\:text-800 {
            font-size: 2.44rem
        }

        .md\:text-900 {
            font-size: 3.05rem
        }

        .md\:text-base {
            font-size: 1rem
        }

        .md\:text-max {
            font-size: 4rem
        }

        .md\:text-x-lg {
            font-size: 6rem
        }

        .md\:width-full {
            width: 100%
        }

        .md\:width-half {
            width: 50%
        }

        .md\:width-quarter {
            width: 25%
        }

        .md\:width-third {
            width: 33.3333333333%
        }
    }

    :root {
        --color-mint: #6fdcbf;
        --color-mint-no-swop: #6fdcbf;
        --color-mint-up: #a5d4bb;
        --color-mint-down: #55af96;
        --color-lilac: #ae8fdb;
        --color-lilac-no-swop: #ae8fdb;
        --color-sea: #72cada;
        --color-highlight: #ae8fdb;
        --color-lilac-up: #b1b1d8;
        --color-sherbet: #fef8b4;
        --color-rose: #dc849b;
        --color-marshmellow: #d695b6;
        --color-peach: #f2c3c0;
        --color-biscuit: #ad998a;
        --color-oat: #cbc1bd;
        --color-light: #f7f7f7;
        --color-light-down: #fafafa;
        --color-light-down-2: #f4f5f5;
        --color-light-down-3: #ecedee;
        --color-light-fade: #eeebef;
        --color-mid: #cccccc;
        --color-dark: #404040;
        --color-dark-down: #303145;
        --color-dark-no-swop: #404040
    }

    @font-face {
        font-family: Mosk;
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url(fonts/mosk-600.woff2) format("woff2"), url(fonts/mosk-600.woff) format("woff")
    }

    @font-face {
        font-family: Mosk;
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url(fonts/mosk-900.woff2) format("woff2"), url(fonts/mosk-900.woff) format("woff")
    }

    @font-face {
        font-family: Jenthill;
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(fonts/jenthill.woff2) format("woff2"), url(fonts/jenthill.woff) format("woff")
    }

    body {
        line-height: 1.75;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        font-size: var(--step-0)
    }

    h1,
    h2,
    h3 {
        font-family: Mosk, sans-serif;
        letter-spacing: .04em
    }

    .headline {
        font-size: var(--step-7);
        line-height: 1.1
    }

    .h1 {
        font-size: var(--step-6);
        line-height: 1.2
    }

    .h2 {
        font-size: var(--step-5);
        line-height: 1.2
    }

    .h3,
    h1 {
        font-size: var(--step-4);
        line-height: 1.2
    }

    .h4,
    h2 {
        font-size: var(--step-3);
        line-height: 1.2
    }

    .h5,
    h3 {
        font-size: var(--step-2);
        letter-spacing: 1.2;
        line-height: 1.5
    }

    .h6,
    h4,
    h5,
    h6 {
        font-size: var(--step-1);
        letter-spacing: .02em;
        line-height: 1.8
    }

    .small,
    small {
        font-size: var(--step--1);
        line-height: 1
    }

    .p {
        font-size: var(--step-0)
    }

    .spacing-md {
        letter-spacing: .05rem
    }

    :root {
        --fluid-min-width: 320;
        --fluid-max-width: 2000;
        --fluid-min-size: 16;
        --fluid-max-size: 19;
        --fluid-min-ratio: 1.2;
        --fluid-max-ratio: 1.25;
        --fluid-screen: 100vw;
        --fluid-bp: calc((var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) / ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16)))
    }

    @media screen and (min-width: 2000px) {
        :root {
            --fluid-screen: calc(var(--fluid-max-width) * 1px)
        }
    }

    :root {
        --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
        --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));
        --fluid-min-scale--1: var(--fluid-min-ratio) * var(--fluid-min-negative);
        --fluid-max-scale--1: var(--fluid-max-ratio) * var(--fluid-max-negative);
        --fluid-min-size--1: (var(--fluid-min-size) * var(--fluid-min-scale--1))/15;
        --fluid-max-size--1: (var(--fluid-max-size) * var(--fluid-max-scale--1))/15;
        --step--1: calc(((var(--fluid-min-size--1) * 1rem) + (var(--fluid-max-size--1) - var(--fluid-min-size--1)) * var(--fluid-bp)));
        --fluid-min-scale-0: var(--fluid-min-ratio);
        --fluid-max-scale-0: var(--fluid-max-ratio);
        --fluid-min-size-0: (var(--fluid-min-size))/16;
        --fluid-max-size-0: (var(--fluid-max-size))/16;
        --step-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));
        --fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
        --fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
        --fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0))/20;
        --fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0))/16;
        --step-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));
        --fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
        --fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
        --fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1))/20;
        --fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1))/16;
        --step-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));
        --fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
        --fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
        --fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2))/16;
        --fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2))/16;
        --step-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));
        --fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
        --fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
        --fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3))/16;
        --fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3))/16;
        --step-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));
        --fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
        --fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
        --fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4))/16;
        --fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4))/16;
        --step-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
        --fluid-min-scale-6: var(--fluid-min-scale-5) * var(--fluid-min-ratio);
        --fluid-max-scale-6: var(--fluid-max-scale-5) * var(--fluid-max-ratio);
        --fluid-min-size-6: (var(--fluid-min-size) * var(--fluid-min-scale-5))/20;
        --fluid-max-size-6: (var(--fluid-max-size) * var(--fluid-max-scale-5))/16;
        --step-6: calc(((var(--fluid-min-size-6) * 1rem) + (var(--fluid-max-size-6) - var(--fluid-min-size-6)) * var(--fluid-bp)));
        --fluid-min-scale-7: var(--fluid-min-scale-6) * var(--fluid-min-ratio);
        --fluid-max-scale-7: var(--fluid-max-scale-6) * var(--fluid-max-ratio);
        --fluid-min-size-7: (var(--fluid-min-size) * var(--fluid-min-scale-6))/20;
        --fluid-max-size-7: (var(--fluid-max-size) * var(--fluid-max-scale-6))/16;
        --step-7: calc(((var(--fluid-min-size-7) * 1rem) + (var(--fluid-max-size-7) - var(--fluid-min-size-7)) * var(--fluid-bp)))
    }
    :root {
        --btt-shadow: #404040;
        --btt-face: #6fdcbf;
        --btt-icon: #404040;
        --btt-border: #404040;
    }

    .night {
        --btt-shadow: #f7f7f7;
        --btt-icon: #ffffff;
        --btt-border: #f7f7f7;
    }

    .night {
        -webkit-font-smoothing: antialiased;
        --color-mint: hsl(316, 30%, 36%);
        --color-highlight: hsl(240, 33%, 77%);
        --color-lilac: hsl(263, 29%, 32%);
        --color-peach: hsl(316, 30%, 36%);
        --color-sherbet: hsl(257, 8%, 18%);
        --color-sherbet-fade: hsl(260, 24%, 18%);
        --color-marshmellow: hsl(314, 22%, 42%);
        --color-light: hsl(274, 4%, 15%);
        --color-light-fade: hsl(274, 4%, 16%);
        --color-light-down: hsl(274, 4%, 16%);
        --color-light-down-2: hsl(274, 4%, 18%);
        --color-light-down-3: hsl(274, 4%, 20%);
        --color-mid: hsl(0, 0%, 80%);
        --color-dark: hsl(0, 0%, 98%);
        --color-dark-opacity: hsla(0, 0%, 98%, 0.3);
        --color-dark-down: hsl(0, 0%, 98%);
        --color-mint-selection: rgba(119, 64, 105, 0.9);
        --color-lilac-selection: rgba(76, 58, 105, 0.9);
        --color-light-selection: rgba(38, 37, 40, 0.99);
        --color-dark-selection: rgba(250, 250, 250, 0.99)
    }

    .day {
        --color-mint: hsl(164, 61%, 65%);
        --color-mint-up: hsl(148, 35%, 74%);
        --color-mint-down: hsl(163, 36%, 51%);
        --color-lilac: hsl(264, 51%, 71%);
        --color-sea: hsl(189, 58%, 65%);
        --color-highlight: hsl(264, 51%, 71%);
        --color-lilac-up: hsl(240, 33%, 77%);
        --color-sherbet: hsl(55, 97%, 85%);
        --color-sherbet-fade: hsl(55, 100%, 94%);
        --color-rose: hsl(344, 56%, 69%);
        --color-marshmellow: hsl(329, 44%, 71%);
        --color-peach: hsl(4, 65%, 85%);
        --color-biscuit: hsl(26, 18%, 61%);
        --color-oat: hsl(17, 12%, 77%);
        --color-light: hsl(0, 0%, 97%);
        --color-light-fade: hsl(300, 11%, 96%);
        --color-light-down: hsl(210, 4%, 98%);
        --color-light-down-2: hsl(210, 4%, 96%);
        --color-light-down-3: hsl(210, 4%, 93%);
        --color-mid: hsl(0, 0%, 80%);
        --color-dark: hsl(0, 0%, 25%);
        --color-dark-opacity: hsla(0, 0%, 25%, 0.3);
        --color-dark-down: hsl(237, 18%, 23%);
        --color-mint-selection: rgba(111, 220, 191, 0.9);
        --color-lilac-selection: rgba(173, 143, 219, 0.9);
        --color-light-selection: rgba(247, 247, 247, 0.99);
        --color-dark-selection: rgba(64, 64, 64, 0.99)
    }

    pre {
        --color-mint: hsl(164, 61%, 65%);
        --color-lilac: hsl(264, 51%, 71%);
        --color-sea: hsl(189, 58%, 65%);
        --color-sherbet: hsl(55, 97%, 85%);
        --color-rose: hsl(344, 56%, 69%);
        --color-marshmellow: hsl(329, 44%, 71%);
        --color-peach: hsl(4, 65%, 85%);
        --color-light: hsl(0, 0%, 97%);
        --color-dark-down: hsl(237, 18%, 23%)
    }

    html {
        color: var(--color-dark)
    }

    body {
        position: relative;
        scroll-behavior: smooth;
        color: var(--color-dark);
        --color-selection: var(--color-mint);
        --color-selection-bg: var(--color-light-selection);
        background-color: var(--color-light-fade)
    }

    ::-webkit-scrollbar {
        width: 11px
    }

    * {
        scrollbar-width: auto;
        scrollbar-color: var(--color-mint) var(--color-sherbet-fade)
    }

    ::-webkit-scrollbar-track {
        background: var(--color-sherbet-fade)
    }

    ::-webkit-scrollbar-thumb {
        background-color: #ffffff;
        mix-blend-mode: difference;
        border-radius: 6px;
        border: 0
    }
    main {
        overflow: hidden
    }

    .main-content {
        position: relative;
        z-index: 1
    }

    .slide-out {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%
    }

    .feedbackForm {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .feedbackForm>* {
        max-width: 600px;
        margin-top: 6rem
    }

    .speaking {
        --color-selection: var(--color-peach);
        --color-selection-bg: var(--color-dark-selection)
    }

    .speaking .Speaking__image {
        min-width: 50%;
        max-width: 600px;
        height: 400px
    }

    .speaking .Speaking__talks {
        margin-top: 5rem
    }

    .speaking {
        background-color: var(--color-sherbet)
    }

    .night .logo {
        --color-mint: hsl(240, 33%, 77%);
        --color-highlight: hsl(316, 30%, 36%)
    }

    ::-moz-selection {
        color: var(--color-selection);
        background-color: var(--color-selection-bg)
    }

    ::selection {
        color: var(--color-selection);
        background-color: var(--color-selection-bg)
    }

    .night ::selection {
        color: var(--color-selection);
        background-color: var(--color-selection-bg)
    }

    .outline::selection {
        color: var(--color-selection);
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1.5px;
        -webkit-text-stroke-color: var(--color-selection)
    }

    .posts {
        --color-selection: var(--color-dark);
        --color-selection-bg: var(--color-mint-selection)
    }

    .logo {
        width: 54rem;
        max-width: 12vw;
        visibility: visible;
        overflow: visible;
        display: inline-block;
    }

    main:focus {
        outline: 0
    }

    hr {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--color-mint);
        border: none;
        opacity: 1;
        margin: 1.95rem auto
    }

    a:not([class]) {
        position: relative;
        display: inline;
        padding: .1rem .2rem 4px .1rem;
        white-space: pre;
        text-decoration: none;
        z-index: 1;
        font-weight: 700;
        line-height: 1;
        background: 0 0;
        white-space: no-wrap;
        color: inherit
    }

    a:not([class]):after,
    a:not([class]):before {
        content: "";
        position: absolute;
        background-color: var(--color-lilac-no-swop);
        height: 3px;
        width: 100%;
        left: 0;
        bottom: 0
    }

    a:not([class]):after {
        transform-origin: center right;
        transition: all cubic-bezier(.39, .575, .565, 1) .8s
    }

    a:not([class]):before {
        transform-origin: center left;
        transform: scaleX(0);
        transition: transform cubic-bezier(.39, .575, .565, 1) .6s
    }

    a:not([class]):hover:after {
        transform: scaleX(0);
        transition: transform cubic-bezier(.39, .575, .565, 1) .3s
    }

    a:not([class]):hover:before {
        transform: scaleX(1)
    }

    a.unstyled {
        color: inherit
    }

    .underline__text {
        line-height: 1;
        display: inline;
        background-image: linear-gradient(transparent 50%, var(--underline) 50%, var(--underline) 85%, transparent 85%, transparent 100%);
        background-repeat: no-repeat;
        background-size: 0 100%
    }

    .underline:hover .underline__text {
        transition: .5s cubic-bezier(.645, .045, .355, 1);
        background-size: 100% 100%
    }

    a.arrow {
        position: relative;
        padding-right: 1.25rem;
        text-decoration: none;
        font-family: Mosk, sans-serif;
        letter-spacing: .05rem
    }

    a.arrow::after {
        content: "";
        line-height: 1.2;
        position: absolute;
        height: 100%;
        width: 1rem;
        background-repeat: no-repeat;
        top: 0;
        right: 0;
        background-position: 0 50%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' aria-hidden='true'%3E%3Cpath fill='%23404040' d='M1 4h11.59l-2.3-2.29A1 1 0 0111.71.29l4 4a1 1 0 010 1.41l-4 4a1 1 0 01-1.41-1.41L12.59 6H1a1 1 0 010-2z'/%3E%3C/svg%3E");
        transition: transform ease-out .2s
    }

    a.arrow:hover::after {
        transform: translateX(.3rem)
    }

    .night a.arrow::after {
        filter: invert(1)
    }

    .button {
        display: inline-block;
        position: relative;
        padding: .5rem 1.25rem;
        background-color: var(--color-dark);
        color: var(--color-dark);
        font-family: Mosk, sans-serif;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: .02em
    }

    .button:after {
        position: absolute;
        content: attr(data-content);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--color-light);
        color: var(--color-dark);
        border: solid 2px var(--color-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-.3rem, -.3rem);
        transition: transform .2s cubic-bezier(.34, 1.56, .64, 1)
    }

    .button:hover:after {
        transform: translate(0, 0)
    }

    .night .button:after {
        background-color: var(--color-lilac)
    }

    .videos {
        margin: 0 1rem;
        max-width: 500px
    }

    .videos>*+* {
        margin-top: 1rem
    }

    @media(min-width: 48rem) {
        .videos {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 2rem;
            margin: 0 1rem
        }

        .videos>*+* {
            margin-top: 0
        }
    }

    #heading-schedule~p img {
        display: block;
        max-width: 500px;
        margin: 0 auto
    }

    input[type=range] {
        width: 100%;
        margin: 7.3px 0;
        background-color: transparent;
        -webkit-appearance: none
    }

    input[type=range]:focus {
        outline: 0
    }

    input[type=range]::-webkit-slider-runnable-track {
        background: var(--color-lilac);
        border: none;
        border-radius: 24.9px;
        width: 100%;
        height: 11.4px;
        cursor: pointer
    }

    input[type=range]::-webkit-slider-thumb {
        margin-top: -7.5px;
        width: 26px;
        height: 26px;
        background: var(--color-mint);
        border: 0;
        border-radius: 15px;
        cursor: pointer;
        -webkit-appearance: none
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: var(--color-lilac)
    }

    input[type=range]::-moz-range-track {
        background: var(--color-lilac);
        border: none;
        width: 100%;
        height: 11.4px;
        cursor: pointer
    }

    input[type=range]::-moz-range-thumb {
        width: 26px;
        height: 26px;
        background: var(--color-mint);
        border: 0;
        border-radius: 15px;
        cursor: pointer
    }

    input[type=range]::-ms-track {
        background: 0 0;
        border-color: transparent;
        border-width: 8.2px 0;
        color: transparent;
        width: 100%;
        height: 11.4px;
        cursor: pointer
    }

    input[type=range]::-ms-thumb {
        width: 26px;
        height: 26px;
        background: var(--color-mint);
        border: 0;
        border-radius: 15px;
        cursor: pointer;
        margin-top: 0
    }

    input[type=range]:focus::-ms-fill-lower {
        background: var(--color-lilac)
    }

    input[type=range]:focus::-ms-fill-upper {
        background: var(--color-lilac)
    }

    @supports(-ms-ime-align:auto) {
        input[type=range] {
            margin: 0
        }
    }

    article input[type=range] {
        max-width: 300px;
        display: block;
        margin: 0 auto
    }

    .radio {
        width: 33%;
        min-width: 250px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        margin-bottom: 12px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer
    }

    .checkmark {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border-radius: 50%;
        margin-right: .5rem;
        border: solid 2px var(--color-mint)
    }

    .radio input:checked~.checkmark {
        background-color: var(--color-mint)
    }

    .radio:after {
        content: "";
        position: absolute;
        display: none
    }

    .radio input:checked~.checkmark:after {
        display: block
    }

    .radio .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        width: 60%;
        height: 60%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: #fff
    }

    .post__footer h2 a,
    .skip-link:not(:focus),
    .visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap
    }

    .wrapper {
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: calc(1rem + (8 - 1) * ((100vw - 20rem)/ (100 - 20)));
        padding-right: calc(1rem + (8 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .wrapper-sm {
        max-width: 55rem;
        padding-left: calc(1rem + (4 - 1) * ((100vw - 20rem)/ (100 - 20)));
        padding-right: calc(1rem + (4 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .wrapper-md {
        max-width: 65rem;
        padding-left: calc(1rem + (4 - 1) * ((100vw - 20rem)/ (100 - 20)));
        padding-right: calc(1rem + (4 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .wrapper-lg {
        max-width: 95rem
    }

    @media screen and (min-width: 100em) {

        .wrapper,
        .wrapper-lg {
            padding-left: 8rem;
            padding-right: 8rem
        }

        .wrapper-md,
        .wrapper-sm {
            padding-left: 4rem;
            padding-right: 4rem
        }
    }

    @media(min-width: 48rem) {
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 1rem
        }
    }

    .pad-before-x-sm {
        padding-top: calc(.75rem + (1 - .75) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-after-x-sm {
        padding-bottom: calc(.75rem + (1 - .75) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-around-x-sm {
        padding-top: calc(.75rem + (1 - .75) * ((100vw - 20rem)/ (100 - 20)));
        padding-bottom: calc(.75rem + (1 - .75) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-before-sm {
        padding-top: calc(1rem + (1.5 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-after-sm {
        padding-bottom: calc(1rem + (1.5 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-around-sm {
        padding-top: calc(1rem + (1.5 - 1) * ((100vw - 20rem)/ (100 - 20)));
        padding-bottom: calc(1rem + (1.5 - 1) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-before {
        padding-top: calc(2rem + (4 - 2) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-after {
        padding-bottom: calc(2rem + (4 - 2) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-around {
        padding-top: calc(2rem + (4 - 2) * ((100vw - 20rem)/ (100 - 20)));
        padding-bottom: calc(2rem + (4 - 2) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-before-lg {
        padding-top: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-after-lg {
        padding-bottom: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-around-lg {
        padding-top: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)));
        padding-bottom: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-before-xlg {
        padding-top: calc(7.5rem + (10 - 7.5) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-after-xlg {
        padding-bottom: calc(7.5rem + (10 - 7.5) * ((100vw - 20rem)/ (100 - 20)))
    }

    .pad-around-xlg {
        padding-top: calc(7.5rem + (10 - 7.5) * ((100vw - 20rem)/ (100 - 20)));
        padding-bottom: calc(7.5rem + (10 - 7.5) * ((100vw - 20rem)/ (100 - 20)))
    }

    @media screen and (min-width: 100em) {
        .pad-before-x-sm {
            padding-top: 1rem
        }

        .pad-after-x-sm {
            padding-bottom: 1rem
        }

        .pad-around-x-sm {
            padding-top: 1rem;
            padding-bottom: 1rem
        }

        .pad-before-sm {
            padding-top: 1.5rem
        }

        .pad-after-sm {
            padding-bottom: 1.5rem
        }

        .pad-around-sm {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem
        }

        .pad-before {
            padding-top: 4rem
        }

        .pad-after {
            padding-bottom: 4rem
        }

        .pad-around {
            padding-top: 4rem;
            padding-bottom: 4rem
        }

        .pad-before-lg {
            padding-top: 6rem
        }

        .pad-after-lg {
            padding-bottom: 6rem
        }

        .pad-around-lg {
            padding-top: 6rem;
            padding-bottom: 6rem
        }

        .pad-before-xlg {
            padding-top: 10rem
        }

        .pad-after-xlg {
            padding-bottom: 10rem
        }

        .pad-around-xlg {
            padding-top: 10rem;
            padding-bottom: 10rem
        }
    }

    .u-center {
        display: block;
        margin: 0 auto;
        text-align: center
    }

    .heading-permalink {
        color: var(--color-lilac-no-swop);
        font-size: var(--step-1);
        margin-left: 1rem
    }

    .Intro {
        position: relative;
        background-color: var(--color-light);
        color: var(--color-dark);
        border: solid 3px var(--color-dark);
        background-color: var(--color-light);
        box-shadow: .5rem .5rem 0 0 var(--color-dark-down);
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 80vw;
        margin: 0 auto
    }

    .Intro__svg {
        position: absolute;
        height: 200px;
        top: -58px;
        left: -181px;
        z-index: -1
    }

    .Intro:after {
        pointer-events: none;
        content: "";
        position: absolute;
        width: 18vw;
        height: 18vw;
        min-width: 150px;
        min-height: 150px;
        right: -20%;
        bottom: -12%;
        border-radius: 100%;
        background-color: var(--color-mint);
        z-index: -2
    }

    .Intro:before {
        pointer-events: none;
        content: "";
        position: absolute;
        width: 18vw;
        height: 18vw;
        min-width: 150px;
        min-height: 150px;
        right: -14%;
        bottom: -15%;
        border-radius: 100%;
        border: solid 3px var(--color-dark);
        z-index: -1
    }

    .Intro__summary {
        z-index: 1;
        position: relative;
        --flow-space: 1.25rem
    }

    .Intro__list>*+* {
        padding-left: .5rem
    }

    .Intro__list-item {
        display: inline-block
    }

    .Intro__list-link {
        color: inherit;
        text-decoration: none;
        border-bottom: 2px solid var(--color-mint)
    }

    .Intro__meta {
        position: relative;
        padding-left: .9rem;
        padding-top: 1.5rem;
        --flow-space: 0.75rem
    }

    .Intro__meta:after {
        content: "";
        position: absolute;
        width: 3.5rem;
        height: 150%;
        left: 0;
        top: 0;
        background-color: var(--color-lilac);
        border: 2px solid var(--color-dark);
        z-index: -1
    }

    .Intro__meta-item {
        display: flex;
        align-items: center
    }

    .Intro__icon {
        width: 1.5rem;
        margin-right: 2rem;
        color: var(--color-dark)
    }

    .Intro__heading {
        display: inline;
        background-image: linear-gradient(transparent 0, transparent 55%, var(--color-peach) 55%, var(--color-peach) 90%, transparent 90%, transparent 100%);
        background-repeat: no-repeat;
        background-size: 0 100%;
        animation: underline .5s 1s cubic-bezier(.645, .045, .355, 1) forwards
    }

    .Intro__copy {
        position: relative
    }

    .Intro--compact {
        max-width: 20ex
    }

    .Intro__list-item {
        list-style: none
    }

    .Intro__tag {
        text-decoration: none
    }

    .posts .Intro__heading:only-child {
        display: block;
        padding-bottom: 1.5rem;
        background-image: none
    }

    @media screen and (min-width: 800px) {
        .Intro {
            box-shadow: 1rem 1rem 0 0 var(--color-dark)
        }

        .Intro__inner {
            display: flex
        }

        .Intro__heading {
            border: none
        }

        .Intro__copy {
            width: 50%;
            margin-left: 2rem
        }

        .Intro__byline {
            margin-right: 2rem
        }

        .Intro__copy:only-child {
            width: 100%
        }

        .Intro__icon {
            width: 2rem
        }

        .Intro__svg {
            height: 250px;
            top: -90px;
            left: -100px
        }

        .Intro__meta {
            margin-left: 2rem;
            --flow-space: 1rem
        }

        .Intro__meta:after {
            width: 4rem;
            height: 170%;
            left: 0
        }

        .Intro__summary {
            margin-top: 0
        }

        .Intro:after {
            right: -16%;
            bottom: -30%
        }

        .Intro:before {
            right: -14%;
            bottom: -34%
        }
    }

    .writing {
        --color-selection: var(--color-peach);
        --color-selection-bg: var(--color-dark-selection)
    }

    .writing .Intro:after {
        background-color: var(--color-lilac)
    }

    @keyframes underline {
        to {
            background-size: 8rem 100%
        }
    }

    .tags .Intro:after {
        background-color: var(--color-marshmellow)
    }

    .tags .Intro__heading {
        display: inline;
        background-image: linear-gradient(transparent 0, transparent 55%, var(--color-peach) 55%, var(--color-peach) 90%, transparent 90%, transparent 100%)
    }

    @keyframes underline {
        to {
            background-size: 8rem 100%
        }
    }

    .post img {
        margin: 0 auto;
        display: block
    }

    .post__intro {
        position: relative;
        z-index: 1
    }

    .post__body {
        --flow-space: 2.44rem
    }

    .post__body h2+*,
    .post__body h3+* {
        --flow-space: 1.25rem
    }

    .post__body h2,
    .post__body h3 {
        position: relative;
        line-height: 1.2
    }

    .post__body h2 code,
    .post__body h3 code {
        font-size: var(--step-2)
    }

    .post__body pre {
        position: relative;
        border-radius: 15px
    }

    /* Hide scrollbars globally, keep scrolling functional */
    * {
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* old Edge/IE */
    }

    ::-webkit-scrollbar {
        display: none;                /* Chrome, Safari, new Edge */
    }

    .post__body code {
        font-size: var(--step-0);
        white-space: pre;
        color: var(--color-lilac-no-swop);
        font-weight: 700;
        margin-left: .5ch;
        margin-right: .5ch
    }

    .post__body pre>code {
        overflow: auto;
        position: unset;
        width: 100%;
        margin-right: 0;
        --color-selection: var(--color-lilac);
        --color-selection-bg: var(--color-light-selection)
    }

    .post__body pre[class*=language-] {
        overflow: visible;
        margin-top: 2rem
    }

    .post__body pre[class*=language-]:after {
        font-family: Mosk, sans-serif;
        font-size: var(--step--1);
        position: absolute;
        content: "";
        bottom: 100%;
        right: 1.5rem;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        background-color: inherit;
        color: var(--color-lilac-up);
        padding: .5rem .5rem 0 .5rem;
        min-width: 3rem;
        text-align: center;
        letter-spacing: 1px
    }

    .post__body pre[class*=language-]+pre[class*=language-] {
        margin-top: 4rem
    }

    .post__body pre.language-css:after {
        content: "CSS"
    }

    .post__body pre.language-svg:after {
        content: "SVG"
    }

    .post__body pre.language-html:after {
        content: "HTML"
    }

    .post__body pre.language-js:after {
        content: "JS"
    }

    .post__body pre.language-json:after {
        content: "data.html"
    }

    .post__body blockquote {
        border-left: .4rem solid var(--color-mint);
        margin-left: 0;
        padding-left: 1.25rem;
        font-style: italic;
        font-weight: 700;
        color: var(--color-dark-down);
        font-size: var(--step-0)
    }

    .post__body blockquote p {
        opacity: .85;
        padding: 1.25rem 0
    }

    .post__body ol,
    .post__body ul {
        margin-left: 1.25rem
    }

    .post__body li+li {
        margin-top: .8rem
    }

    .post__body .video-player,
    .post__body .video-player+*,
    .post__body figure,
    .post__body figure+*,
    .post__body pre>code {
        --flow-space: 4rem
    }

    .post__body .video-player,
    .post__body figure,
    .post__body pre>code {
        width: 100%;
        max-width: 80rem;
        margin-left: 50%;
        transform: translateX(-50%);
        position: relative
    }

    .post__body .video-player,
    .post__body figure img {
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
    }

    .post__body figure img {
        position: relative;
        z-index: 1
    }

    .post__body figcaption {
        font-size: .8em;
        font-style: italic;
        margin: .5rem auto 0 auto;
        padding: 0 1.25rem
    }

    .post__body pre>code {
        display: block;
        font-size: var(--step-0)
    }

    @media screen and (min-width: 800px) {
        .post__body pre>code {
            padding: 1.25rem
        }
    }

    .post__footer {
        background: var(--color-mint)
    }

    .post__footer h2 {
        flex-shrink: 0;
        margin-right: 1rem
    }

    .post__footer a {
        background: var(--color-bg);
        padding: .4rem .6rem
    }

    .post__footer .nav {
        text-transform: none
    }

    .Post-list__items {
        margin-left: -1.5rem;
        margin-right: -1.5rem
    }

    .Post-list__item {
        --flow-space: 1rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column
    }

    .Post-list__item__heading {
        --underline: var(--color-peach);
        text-decoration: none;
        color: var(--color-dark);
        margin-top: 2rem
    }

    .Post-list__item__image {
        display: none
    }

    .Post-list__item__date {
        position: relative;
        display: block;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(125, 125, 125, .255) 50%, rgba(255, 255, 255, 0) calc(50% + 3px), rgba(255, 255, 255, 0) 100%)
    }

    .Post-list__item__date time {
        padding-right: 1rem;
        background-color: var(--color-light-fade)
    }

    .Post-list__item__tag+.Post-list__item__tag {
        padding-left: .75rem;
        margin-left: .5rem;
        border-left: solid 1px var(--color-dark)
    }

    .Post-list__item__meta {
        padding-bottom: 3rem
    }

    .Post-list__item footer {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(125, 125, 125, .255) 50%, rgba(255, 255, 255, 0) calc(50% + 3px), rgba(255, 255, 255, 0) 100%)
    }

    .Post-list__item footer a {
        color: var(--color-dark);
        text-transform: capitalize;
        text-decoration: none;
        transition: color .15s ease-out
    }

    .Post-list__item footer a:hover {
        color: var(--color-lilac-no-swop)
    }

    .Post-list__item footer a:hover:after {
        filter: invert(.4) sepia(1) saturate(2.5) hue-rotate(214deg) brightness(.99)
    }

    .Post-list__item footer>* {
        background-color: var(--color-light-fade)
    }

    .Post-list__item footer>:nth-child(1) {
        padding-right: 1rem
    }

    .Post-list__item footer>:nth-child(2) {
        padding-left: 1rem
    }

    .Post-list__link {
        color: var(--color-mint);
        text-decoration: underline
    }

    .Post-list__link:hover {
        text-decoration: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, var(--color-lilac) 50%)
    }

    @media screen and (min-width: 800px) {
        .Post-list__items {
            display: flex;
            flex-wrap: wrap
        }

        .Post-list__item {
            --flow-space: 0;
            width: 50%
        }

        .Post-list__item>* {
            --flow-space: 1rem
        }

        .Post-list__item__image {
            display: block;
            border-radius: 10px;
            width: 100%;
            height: 230px;
            object-fit: cover
        }
    }

    @media screen and (min-width: 1000px) {
        .Post-list__item {
            --flow-space: 0;
            width: 33%
        }
    }

    .Workshop {
        --color-selection: var(--color-lilac);
        --color-selection-bg: var(--color-dark-selection);
        background-color: var(--color-sherbet)
    }

    .Workshop__heading {
        max-width: 16ch
    }

    .Workshop__intro {
        max-width: 65ch
    }

    .Workshop__feedback {
        position: relative;
        z-index: 1
    }

    .Workshop .Browser {
        padding: 2rem 0 0 0;
        overflow: hidden
    }

    .Workshop iframe {
        max-width: 100%
    }

    .Workshop__tweets .twitter-tweet {
        max-width: 400px !important;
        margin: 0 auto
    }

    .Workshop__footer {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .Workshop .Blockquote {
        margin-top: 3rem;
        position: relative;
        margin-left: 0;
        padding: 0;
        font-style: italic;
        padding-left: 2rem;
        border-left: solid 3px var(--color-lilac);
        z-index: 1;
        max-width: 60ch;
        margin-right: 1rem
    }

    .Workshop .Blockquote:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -8px;
        height: 2em;
        background-color: var(--color-sherbet);
        width: 10px;
        margin-top: -1em
    }

    .Workshop .Blockquote svg {
        content: "";
        position: absolute;
        top: 50%;
        left: -.5em;
        width: .8em;
        height: .8em;
        margin-top: -.4em
    }

    .Workshop__subcontent ul {
        list-style: none;
        padding: 0;
        margin-top: 1rem;
        margin-left: 1.5rem;
        margin-bottom: 3rem
    }

    .Workshop__subcontent li {
        position: relative;
        margin-top: .3rem
    }

    .Workshop__subcontent li::before {
        position: absolute;
        background-color: var(--color-lilac);
        border-radius: 50%;
        content: "";
        display: inline-block;
        left: -1.2rem;
        top: .7em;
        height: 8px;
        width: 8px
    }

    .Workshop .Speaking__image {
        max-width: 500px;
        height: 400px;
        margin-top: 0
    }

    .Workshop__slides-cont iframe {
        min-height: 300px;
        width: 100%
    }

    @media screen and (min-width: 600px) {
        .Workshop__tweets {
            display: flex;
            flex-wrap: wrap;
            margin-left: -1rem;
            margin-right: -1rem
        }

        .Workshop__tweets .twitter-tweet {
            width: 50% !important;
            padding: 1rem
        }
    }

    @media screen and (min-width: 1000px) {
        .Workshop__head {
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .Workshop__head>* {
            flex: 1 1 50%
        }

        .Workshop__head .button {
            margin-top: 0
        }

        .Workshop__cta {
            display: flex;
            justify-content: center
        }

        .Workshop__intro {
            padding-right: 2rem
        }

        .Workshop__resources {
            display: flex;
            margin-left: -1rem;
            margin-right: -1rem
        }

        .Workshop__resources>* {
            flex: 1 1 50%
        }

        .Workshop__subcontent {
            margin-right: 3rem
        }

        .Workshop__video {
            padding: 1rem;
            margin-top: 0
        }

        .Workshop__slides {
            padding: 1rem
        }

        .Workshop__slides-cont {
            position: relative;
            height: 0;
            padding-bottom: 63%
        }

        .Workshop__slides-cont iframe {
            height: 100%;
            width: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute
        }
    }

    @media screen and (min-width: 1000px) {
        .Workshop__tweets .twitter-tweet {
            width: 33.33% !important
        }
    }

    code[class*=language-],
    pre[class*=language-] {
        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
        line-height: 1.375;
        direction: ltr;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        background: var(--color-dark-down);
        color: #e6a3de
    }

    code[class*=language-] ::-moz-selection,
    code[class*=language-]::-moz-selection,
    pre[class*=language-] ::-moz-selection,
    pre[class*=language-]::-moz-selection {
        text-shadow: none
    }

    code[class*=language-] ::selection,
    code[class*=language-]::selection,
    pre[class*=language-] ::selection,
    pre[class*=language-]::selection {
        text-shadow: none
    }

    pre[class*=language-] {
        padding: 1em;
        margin: 1rem 0;
        overflow: auto
    }

    :not(pre)>code[class*=language-] {
        padding: .1em;
        border-radius: .3em
    }

    .token.cdata,
    .token.doctype,
    .token.prolog {
        color: var(--color-sea)
    }

    .token.comment {
        color: rgba(255, 255, 255, .5)
    }

    .token.punctuation {
        color: var(--color-sea)
    }

    .token.namespace {
        opacity: .7
    }

    .token.number,
    .token.operator,
    .token.tag {
        color: var(--color-marshmellow)
    }

    .token.function,
    .token.property {
        color: var(--color-lilac)
    }

    .token.atrule-id,
    .token.selector,
    .token.tag-id {
        color: var(--color-marshmellow)
    }

    .token.attr-name,
    code.language-javascript {
        color: var(--color-lilac)
    }

    .language-css .token.string,
    .language-scss .token.string,
    .style .token.string,
    .token.atrule,
    .token.attr-value,
    .token.boolean,
    .token.control,
    .token.directive,
    .token.entity,
    .token.keyword,
    .token.regex,
    .token.statement,
    .token.string,
    .token.unit,
    .token.url,
    code.language-css,
    code.language-scss {
        color: var(--color-sea)
    }

    .token.placeholder,
    .token.variable {
        color: #47ebb4
    }

    .token.deleted {
        text-decoration: line-through
    }

    .token.inserted {
        border-bottom: 1px dotted var(--color-rose);
        text-decoration: none
    }

    .token.italic {
        font-style: italic
    }

    .token.bold,
    .token.important {
        font-weight: 700
    }

    .token.important {
        color: var(--color-mint)
    }

    .token.entity {
        cursor: help
    }

    pre>code.highlight {
        outline: .4em solid #6fdcbf;
        outline-offset: .4em
    }

    .line-numbers .line-numbers-rows {
        border-right-color: #1f2932
    }

    .line-numbers-rows>span:before {
        color: #2c3847
    }

    .line-highlight {
        background: rgba(255, 110, 243, .2);
        background: -webkit-linear-gradient(left, rgba(255, 110, 243, .2) 70%, rgba(255, 110, 243, 0));
        background: linear-gradient(to right, rgba(255, 110, 243, .2) 70%, rgba(255, 110, 243, 0))
    }

    .video-player {
        position: relative;
        padding-top: 56.25%
    }

    .video-player>iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .post .video-player {
        padding-top: 63%
    }

    @media(min-width: 48rem) {
        .post .video-player {
            padding-top: 66%
        }
    }

    .skip-link:focus {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        padding: .8rem 1.25rem 1rem 1.25rem;
        background-color: var(--color-action-bg);
        color: var(--color-action-text);
        line-height: 1;
        text-decoration: none;
        font-weight: 700
    }

    .Site-head {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3
    }

    .Site-head__site-name {
        font-weight: 700;
        text-decoration: none;
        color: var(--color-text)
    }

    @media screen and (min-width: 800px) {
        .Site-head {
            background-color: transparent
        }
    }

    .night a[data-id]:before {
        filter: invert(1)
    }

    .nav {
        position: fixed;
        background-color: var(--color-light);
        bottom: 0;
        left: 0;
        right: 0;
        border-top: solid 2px var(--color-dark);
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        font-family: Mosk, sans-serif;
        font-size: .8rem;
        font-weight: 600;
        padding-bottom: env(safe-area-inset-bottom)
    }

    .nav__list>*+* {
        margin-left: 1.25rem
    }

    .nav__item {
        padding: 1.1rem 0 .8rem 0;
        flex-shrink: 0
    }

    .nav__item a {
        width: 100%;
        position: relative;
        display: block;
        color: currentColor;
        text-decoration: none;
        margin-top: 1rem;
        position: relative
    }

    .nav__item a:hover:after,
    .nav__item a[aria-current=page]:after {
        opacity: 1
    }

    .nav__item a:after {
        opacity: 0;
        content: "";
        position: absolute;
        bottom: -75%;
        left: 0;
        right: 0;
        width: 100%;
        height: 1rem;
        background-image: url("data:image/svg+xml,%3Csvg width='53' height='4' viewBox='0 0 53 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M51.9 3C49 3 49 1 46.2 1c-2.8 0-2.8 2-5.7 2-2.8 0-2.8-2-5.7-2C32 1 32 3 29.1 3c-2.8 0-2.8-2-5.7-2-2.8 0-2.8 2-5.6 2S15 1 12.1 1C9.5 1 9.5 3 6.7 3 3.8 3 3.8 1 1 1' stroke='%23404040' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='52.9' height='4' fill='%23404040'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: opacity .3s ease-out
    }

    .nav__item a[data-id]:before {
        content: "";
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: -140%;
        left: 50%;
        transform: translateX(-50%)
    }

    .nav__item a[data-id=workshop]:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M60.92 75.24a6.7 6.7 0 01-3.14-.78l-11-5.77a6.3 6.3 0 00-5.85 0L30 74.46a6.7 6.7 0 01-3.14.78 6.75 6.75 0 01-6.66-7.91l2.09-12.22a6.29 6.29 0 00-1.81-5.58l-8.88-8.65a6.76 6.76 0 013.7-11.53l12.27-1.79a6.27 6.27 0 004.74-3.44L37.81 13a6.76 6.76 0 0112.12 0l5.49 11.12a6.26 6.26 0 004.74 3.44l12.27 1.79a6.76 6.76 0 013.75 11.53l-8.88 8.65a6.29 6.29 0 00-1.81 5.58l2.09 12.22a6.76 6.76 0 01-6.66 7.91z' fill='%23c1c1c1'/%3E%3Cpath d='M43.87 11.53a4.4 4.4 0 014 2.48l5.5 11.13a8.59 8.59 0 006.46 4.7l12.27 1.78a4.46 4.46 0 012.47 7.61l-8.88 8.66a8.6 8.6 0 00-2.47 7.6l2.1 12.23a4.48 4.48 0 01-4.4 5.28 4.43 4.43 0 01-2.07-.53l-11-5.77a8.63 8.63 0 00-8 0l-11 5.77a4.44 4.44 0 01-6.48-4.7l2.1-12.23A8.6 8.6 0 0022 47.89l-8.89-8.66a4.47 4.47 0 012.48-7.61l12.31-1.78a8.63 8.63 0 006.48-4.7L39.87 14a4.4 4.4 0 014-2.48m0-4.6A9 9 0 0035.74 12l-5.49 11.1a4 4 0 01-3 2.19L15 27.07a9.06 9.06 0 00-5 15.45l8.89 8.66A4 4 0 0120 54.72l-2.1 12.22A9 9 0 0031 76.49l11-5.77a4 4 0 011.86-.45 4 4 0 011.85.45l11 5.77a8.92 8.92 0 004.21 1.06A9.08 9.08 0 0069.85 67l-2.1-12.23a4 4 0 011.15-3.54l8.88-8.65a9.06 9.06 0 00-5-15.46l-12.29-1.83a4 4 0 01-3-2.19L52 12a9 9 0 00-8.12-5.05z' fill='%23404040'/%3E%3Cpath d='M43.89 11.53a4.4 4.4 0 00-4 2.48l-5.51 11.13a8.63 8.63 0 01-6.48 4.7l-12.27 1.78a4.47 4.47 0 00-2.48 7.61L22 47.89a8.6 8.6 0 012.47 7.6l-2.1 12.23a4.47 4.47 0 006.48 4.7l11-5.77a8.5 8.5 0 014-1z' fill='%23efefef'/%3E%3Cpath d='M43.43 23.48s2.68 5.81 5.92 11.52' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E%0A")
    }

    .nav__item a[data-id=speaking]:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M42.52 52.66a12.77 12.77 0 01-12.74-12.74V22.61a12.16 12.16 0 013.74-9 12.67 12.67 0 0118 0 12.16 12.16 0 013.74 9v17.31a12.77 12.77 0 01-12.74 12.74z' fill='%23c1c1c1'/%3E%3Cpath d='M42.52 12.16a9.87 9.87 0 017.37 3.07A9.84 9.84 0 0153 22.61v17.31a10.48 10.48 0 01-10.48 10.44 9.8 9.8 0 01-7.37-3.07 9.83 9.83 0 01-3.07-7.37V22.61a9.84 9.84 0 013.07-7.38 9.84 9.84 0 017.37-3.07m0-4.6A14.45 14.45 0 0031.9 12a14.49 14.49 0 00-4.42 10.63v17.29a15.09 15.09 0 0015 15 15.09 15.09 0 0015-15V22.61A14.49 14.49 0 0053.14 12a14.46 14.46 0 00-10.62-4.44z' fill='%23404040'/%3E%3Cpath d='M19 31.69V39a23.57 23.57 0 0047.14 0v-7.56' fill='none' stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='42.52' y1='62.56' x2='42.52' y2='77.58' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='26.84' y1='76.34' x2='58.2' y2='76.34' fill='none' stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cpath d='M42.48 7.56A14.49 14.49 0 0031.9 12a14.49 14.49 0 00-4.42 10.63v17.29a15.09 15.09 0 0015 15z' fill='%23efefef'/%3E%3Cpath d='M42.52 12.16a9.87 9.87 0 017.37 3.07A9.84 9.84 0 0153 22.61v17.31a10.48 10.48 0 01-10.48 10.44 9.8 9.8 0 01-7.37-3.07 9.83 9.83 0 01-3.07-7.37V22.61a9.84 9.84 0 013.07-7.38 9.84 9.84 0 017.37-3.07m0-4.6A14.45 14.45 0 0031.9 12a14.49 14.49 0 00-4.42 10.63v17.29a15.09 15.09 0 0015 15 15.09 15.09 0 0015-15V22.61A14.49 14.49 0 0053.14 12a14.46 14.46 0 00-10.62-4.44z' fill='%23404040'/%3E%3Cpath d='M41.24 18.39a6.35 6.35 0 016.35 6.34V32' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E")
    }

    .nav__item a[data-id=writing]:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M17.49 73.63a6.48 6.48 0 01-6.32-7.78l2.7-13.24a13 13 0 013.54-6.56l34-34a9.2 9.2 0 0113 0l8 8a9.2 9.2 0 010 13l-34 34a13.21 13.21 0 01-6.53 3.57l-13 2.83a7.21 7.21 0 01-1.39.15z' fill='%23c1c1c1'/%3E%3Cpath d='M57.93 11.63a6.89 6.89 0 014.87 2l8 8a6.9 6.9 0 010 9.74l-34 34a10.86 10.86 0 01-5.39 2.94l-13 2.83a4.78 4.78 0 01-.91.1 4.18 4.18 0 01-4.07-5L16.14 53a10.75 10.75 0 012.9-5.4l34-34a6.83 6.83 0 014.87-2m0-4.6a11.39 11.39 0 00-8.12 3.37l-34 34a15.27 15.27 0 00-4.16 7.73L8.92 65.39a8.78 8.78 0 008.57 10.54 8.53 8.53 0 001.88-.21l13-2.82a15.37 15.37 0 007.67-4.19l34-34a11.49 11.49 0 000-16.25l-8-8A11.43 11.43 0 0057.93 7z' fill='%23404040'/%3E%3Crect x='27.93' y='41.29' width='40.13' height='11.1' transform='rotate(-45 48.00071 46.837455)' fill='%23efefef'/%3E%3Cline x1='36.89' y1='66.2' x2='17.93' y2='47.24' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='67.23' y1='35.86' x2='48.26' y2='16.9' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cpath d='M18.4 71.23L24.28 70l-9.63-9.63-1.23 6a4.18 4.18 0 004.98 4.86z' fill='%23404040'/%3E%3Cline x1='28.59' y1='55.9' x2='57.33' y2='27.16' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='34.53' y1='38.8' x2='46.4' y2='27.05' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cpath d='M57 16.74a2.2 2.2 0 012.55-.11' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E")
    }

    .nav__item a[data-id=playing]:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M43.89 80.25a2.28 2.28 0 01-1.15-.31 2.32 2.32 0 01-1.15-2.06l.47-14.74a2.32 2.32 0 01.6-1.47l17-18.73a2.29 2.29 0 011.71-.76 2.37 2.37 0 01.9.18 2.31 2.31 0 011.39 2.28L62 68.29a2.29 2.29 0 01-1.08 1.79L45.11 79.9a2.33 2.33 0 01-1.22.35z' fill='%23efefef'/%3E%3Cpath d='M61.33 44.48l-1.67 23.65L43.89 78l.47-14.73 17-18.74m0-4.6a4.63 4.63 0 00-3.42 1.51L41 60.13a4.58 4.58 0 00-1.18 2.94L39.3 77.8a4.59 4.59 0 004.59 4.75 4.51 4.51 0 002.43-.7L62.1 72a4.59 4.59 0 002.15-3.58l1.67-23.62a4.6 4.6 0 00-4.58-4.92z' fill='%23404040'/%3E%3Cpath d='M8.86 45.22a2.29 2.29 0 01-1.95-3.52l9.82-15.77a2.28 2.28 0 011.79-1.08l23.65-1.67h.16a2.3 2.3 0 011.54 4l-18.74 17a2.22 2.22 0 01-1.47.59z' fill='%23c1c1c1'/%3E%3Cpath d='M42.33 25.47l-18.74 17-14.73.48 9.82-15.77 23.65-1.68m0-4.6H42l-23.64 1.66a4.59 4.59 0 00-3.58 2.15L5 40.49a4.6 4.6 0 003.91 7H9L23.74 47a4.54 4.54 0 002.94-1.19l18.74-17a4.6 4.6 0 00-3.09-8z' fill='%23404040'/%3E%3Cpath d='M41.7 63.68a2.3 2.3 0 01-1.63-.68L23.68 46.62A2.31 2.31 0 0123 45a2.29 2.29 0 01.67-1.62l29-29c4-4 11.3-6.82 17.72-6.82a17.55 17.55 0 016.15 1 2.24 2.24 0 01.9.51 2.33 2.33 0 01.68 1.1c2.88 7.76-.7 18.74-5.78 23.83l-29 29a2.3 2.3 0 01-1.64.68z' fill='%23c1c1c1'/%3E%3Cpath d='M70.43 9.83a15.27 15.27 0 015.48.93c2.62 6.81-.69 17.06-5.21 21.58l-29 29L25.31 45l29-29c3.41-3.41 10.09-6.14 16.09-6.14m0-4.6c-7 0-14.94 3.08-19.35 7.49l-29 29a4.6 4.6 0 000 6.51l16.39 16.37a4.6 4.6 0 006.51 0l29-29c5.69-5.69 9.55-17.53 6.34-26.25a4.39 4.39 0 00-.8-1.49 4.65 4.65 0 00-2.27-1.53 20 20 0 00-6.81-1.11z' fill='%23404040'/%3E%3Cpath d='M75.94 10.79c2.61 6.8-.7 17-5.22 21.56l-29 29-8.2-8.15z' fill='%23efefef'/%3E%3Cpath d='M60.26 21.25a3.66 3.66 0 105.18 0 3.65 3.65 0 00-5.18 0z' fill='none' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='36.99' y1='41.7' x2='47.49' y2='31.7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E%0A")
    }

    .nav__item-hover {
        margin: 0;
        line-height: 1;
        text-decoration: none
    }

    .nav__item-hover-inner {
        display: block;
        position: relative;
        font-weight: 400;
        letter-spacing: .06rem;
        line-height: 1.25
    }

    .nav__item-hover-inner[data-hover] {
        color: var(--color-dark)
    }

    .nav__item-hover-inner::before {
        content: attr(data-hover);
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        color: var(--color-highlight);
        transition: all cubic-bezier(1, 0, 0, 1) .3s
    }

    .nav__item-hover-inner::after {
        content: attr(data-hover);
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        color: var(--color-dark);
        transition: all cubic-bezier(1, 0, 0, 1) .3s .2s
    }

    @media(hover: hover) {

        .nav__item:hover .nav__item-hover-inner::after,
        .nav__item:hover .nav__item-hover-inner::before {
            width: 100%
        }
    }

    @media screen and (min-width: 800px) {
        .nav {
            font-size: var(--step-0);
            background-color: transparent;
            position: relative;
            border-top: none;
            display: block;
            margin-left: auto
        }

        .nav a {
            margin-top: 0
        }

        .nav a[data-id]:before {
            display: none
        }
    }

    .night .nav__item a:after {
        filter: invert(1)
    }

    .switch {
        display: inline-flex;
        align-items: center;
        margin: 5px 0;
        font-size: 0;
        flex-grow: 0;
        margin-left: 1rem
    }

    .switch .switch__toggle {
        position: relative;
        cursor: pointer
    }

    .switch__checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none
    }

    .switch__checkbox:focus {
        outline: 2px solid var(--lilac)
    }

    .switch__checkbox:focus:not(:focus-visible) {
        outline: 0
    }

    .switch__checkbox:focus-visible {
        box-shadow: 0 0 0 2px var(--lilac) inset
    }

    .switch .switch__toggle::after,
    .switch .switch__toggle::before {
        content: "";
        display: block;
        margin: 0 3px;
        transition: transform .2s cubic-bezier(.4, 0, .2, 1);
        background: #fff;
        background: radial-gradient(circle, #fff 0, #a8ebfb 100%)
    }

    .switch .switch__toggle::before {
        height: 1.9rem;
        width: 3.2rem;
        border-radius: 999px;
        border: solid 2px #fff
    }

    .switch .switch__toggle::after {
        position: absolute;
        top: .15rem;
        left: .15rem;
        height: 1.6rem;
        width: 1.6rem;
        border-radius: 50%;
        background-color: #fff0a4;
        background: linear-gradient(130deg, #ffc851 0, #fff0a4 45%, #ffc851 45%, #fcb045 100%);
        border: solid .1rem #ff9b04
    }

    .switch__checkbox:checked+.switch__toggle::after,
    .switch__checkbox:checked+.switch__toggle::before {
        background: #d5d5d5;
        background: radial-gradient(circle, #d5d5d5 0, #525065 100%)
    }

    .switch__checkbox:checked+.switch__toggle::after {
        transform: translate(calc(2.9rem - 100%)) rotate(180deg);
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 288'%3E%3Cg style='isolation:isolate'%3E%3Cg id='ARTBOARD_1' data-name='ARTBOARD 1'%3E%3Ccircle cx='145.27' cy='145.27' r='142.73' fill='%23fafbfb'/%3E%3Ccircle cx='55.47' cy='94.18' r='22.47' fill='%23e0e0e0'/%3E%3Cpath d='M34.92 96.1a22.47 22.47 0 0137.37-16.81A22.46 22.46 0 1040.58 111a22.37 22.37 0 01-5.66-14.9z' fill='%23bdbdbd'/%3E%3Cpath d='M56.36 71.71h-.45A22.47 22.47 0 1133 94.62v.45a23.36 23.36 0 1023.36-23.36z' fill='%23f5f5f5'/%3E%3Ccircle cx='204.69' cy='54.82' r='11.23' fill='%23e0e0e0'/%3E%3Cpath d='M194.42 55.78a11.23 11.23 0 0118.68-8.41 11.23 11.23 0 10-15.86 15.85 11.21 11.21 0 01-2.82-7.44z' fill='%23bdbdbd'/%3E%3Cpath d='M205.13 43.58h-.22A11.23 11.23 0 11193.46 55v.22a11.68 11.68 0 1011.67-11.68z' fill='%23f5f5f5'/%3E%3Ccircle cx='244' cy='168.75' r='28.03' fill='%23e0e0e0'/%3E%3Cpath d='M218.37 171.15a28 28 0 0146.61-21 28 28 0 10-39.56 39.56 27.89 27.89 0 01-7.05-18.56z' fill='%23bdbdbd'/%3E%3Cpath d='M245.11 140.72h-.56A28 28 0 11216 169.3v.56a29.14 29.14 0 1029.14-29.14z' fill='%23f5f5f5'/%3E%3Ccircle cx='169.09' cy='234.24' r='28.03' fill='%23e0e0e0'/%3E%3Cpath d='M143.46 236.64a28 28 0 0146.61-21 28 28 0 10-39.56 39.56 27.94 27.94 0 01-7.05-18.56z' fill='%23bdbdbd'/%3E%3Cpath d='M170.2 206.21h-.55a28 28 0 11-28.58 28.57v.56a29.14 29.14 0 1029.14-29.14zM143.33 185.82h-.18a9.55 9.55 0 11-9.74 9.74v.19a9.94 9.94 0 109.93-9.94z' fill='%23f5f5f5'/%3E%3Cg%3E%3Ccircle cx='269.89' cy='129.15' r='10.81' fill='%23e0e0e0'/%3E%3Cpath d='M260 130.07a10.8 10.8 0 0118-8.07 10.8 10.8 0 10-15.25 15.25 10.74 10.74 0 01-2.75-7.18z' fill='%23bdbdbd'/%3E%3Cpath d='M270.32 118.34h-.22a10.81 10.81 0 11-11 11v.22a11.24 11.24 0 1011.24-11.24z' fill='%23f5f5f5'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M84.11 142.52a14.25 14.25 0 11-14.25-14.24 14.25 14.25 0 0114.25 14.24z' fill='%23e0e0e0'/%3E%3Cpath d='M56.83 143.74a14.25 14.25 0 0123.7-10.66 14.25 14.25 0 10-20.11 20.11 14.2 14.2 0 01-3.59-9.45z' fill='%23bdbdbd'/%3E%3Cpath d='M70.43 128.28h-.29a14.25 14.25 0 11-14.52 14.52v.29a14.81 14.81 0 1014.81-14.81z' fill='%23f5f5f5'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='102.28' cy='90.55' r='11.94' transform='rotate(-45 102.287505 90.551128)' fill='%23e0e0e0'/%3E%3Cpath d='M91.37 91.57a11.93 11.93 0 0119.85-8.93 11.93 11.93 0 10-16.85 16.84 11.85 11.85 0 01-3-7.91z' fill='%23bdbdbd'/%3E%3Cpath d='M102.75 78.61h-.23a11.94 11.94 0 11-12.17 12.18V91a12.41 12.41 0 1012.4-12.41z' fill='%23f5f5f5'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='80.77' cy='225.56' r='8.05' transform='rotate(-45 80.776413 225.551314)' fill='%23e0e0e0'/%3E%3Cpath d='M73.41 226.24a8 8 0 0113.39-6 8.05 8.05 0 10-11.37 11.36 8.06 8.06 0 01-2.02-5.36z' fill='%23bdbdbd'/%3E%3Cpath d='M81.09 217.51h-.16a8.05 8.05 0 11-8.2 8.2.92.92 0 000 .16 8.37 8.37 0 108.37-8.36z' fill='%23f5f5f5'/%3E%3C/g%3E%3Cpath d='M145.27 227.13a154.55 154.55 0 01-142.2-94q-.51 6-.52 12.12a142.73 142.73 0 10285.45 0q0-6.12-.52-12.12a154.55 154.55 0 01-142.21 94z' fill='%23212121' opacity='.1' style='mix-blend-mode:multiply'/%3E%3Cpath d='M145.27 259.62A159 159 0 016.35 178.09a142.75 142.75 0 00277.85 0 159.05 159.05 0 01-138.93 81.53z' fill='%23212121' opacity='.1' style='mix-blend-mode:multiply'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        border: solid .1rem gray
    }

    .Illustration .beam {
        opacity: 0
    }

    @keyframes flicker {
        20% {
            opacity: .1
        }

        23% {
            opacity: 0
        }

        26% {
            opacity: .15
        }

        30% {
            opacity: 0
        }

        35% {
            opacity: .2
        }

        38% {
            opacity: .1
        }

        100% {
            opacity: .4
        }
    }

    #light {
        cursor: pointer
    }

    .night .Illustration {
        filter: brightness(90%) saturate(90%)
    }

    .night .beam {
        animation: flicker .8s .2s forwards
    }

    .Hero {
        background-color: var(--color-light-fade);
        min-height: 100vh
    }

    .Hero__svg {
        display: none;
        align-self: flex-start
    }

    .Hero__inner {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center
    }

    .Hero__eyebrow {
        transform: rotate(-5deg);
        transform-origin: bottom left
    }

    .Hero__eyebrow span {
        opacity: .9
    }

    .Hero__heading {
        position: relative;
        z-index: 1;
        letter-spacing: .6px
    }

    .Hero__heading .outline {
        color: var(--color-dark);
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1.5px;
        -webkit-text-stroke-color: var(--color-dark)
    }

    .Hero__heading .outline:hover {
        -webkit-text-fill-color: var(--color-dark)
    }

    .Hero__heading a {
        text-decoration: none
    }

    .Hero .js-hover-talk {
        position: relative;
        z-index: 3
    }

    .Hero .js-hover-talk svg {
        opacity: 0;
        display: none;
        position: absolute;
        width: 200px;
        bottom: 100%;
        left: 100%;
        z-index: 1;
        pointer-events: none
    }

    .Hero .js-hover-talk:hover {
        position: relative
    }

    .Hero .js-hover-talk:hover svg {
        opacity: 0;
        display: block
    }

    .Hero .js-hover-write {
        position: relative;
        z-index: 2
    }

    .Hero .js-hover-write span {
        position: absolute;
        font-size: 2rem;
        top: 50%;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 1
    }

    .Hero .js-fun:hover,
    .Hero .js-hover-talk:hover,
    .Hero .js-hover-write:hover {
        cursor: pointer
    }

    @media screen and (min-width: 800px) {
        .Hero {
            position: relative
        }

        .Hero__inner {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center
        }

        .Hero__content {
            width: 49%
        }

        .Hero__svg {
            display: block;
            height: 100vh;
            flex-grow: 1
        }

        .Hero:after {
            content: "";
            position: absolute;
            width: 68%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: var(--color-mint);
            z-index: 0;
            max-width: 1800px
        }
    }

    @media screen and (min-width: 1900px) {
        .Hero__content {
            width: 45%
        }
    }

    .Posts-intro {
        --color-selection-bg: var(--color-dark-selection);
        --color-selection: var(--color-lilac);
        background-color: var(--color-lilac);
        min-height: 100vh
    }

    .Posts-intro__inner {
        display: flex;
        align-items: center;
        flex-direction: column
    }

    .Posts-intro__heading {
        color: var(--color-dark);
        letter-spacing: .6px;
        align-self: flex-start
    }

    @media screen and (min-width: 800px) {
        .Posts-intro__inner {
            display: grid;
            grid-template-columns: 1fr 2rem .33fr .33fr .33fr .33fr;
            grid-template-rows: auto 1fr 2rem .5fr 1fr
        }

        .Posts-intro__inner .Browser {
            margin-top: 0
        }

        .Posts-intro__inner .Browser:nth-of-type(1) {
            grid-column: 1/span 1;
            grid-row: 2/span 3
        }

        .Posts-intro__inner .Browser:nth-of-type(2) {
            grid-column: 3/span 3;
            grid-row: 4/span 2
        }

        .Posts-intro__inner .Browser:nth-of-type(3) {
            grid-column: 4/span 3;
            grid-row: 1/span 2
        }

        .Posts-intro__inner .button {
            grid-column: 1/span 1;
            grid-row: 5/span 1;
            justify-self: center;
            align-self: center
        }

        .Posts-intro__heading {
            margin-bottom: 1.5rem;
            grid-column: 1/span 1;
            grid-row: 1/span 1
        }
    }

    .Browser {
        --underline: var(--color-peach);
        color: var(--color-dark);
        position: relative;
        background-color: var(--color-light);
        border-radius: 20px;
        border: solid 2px var(--color-dark);
        padding: 4rem 1rem 1rem;
        z-index: 1;
        display: flex;
        flex-direction: column
    }

    .Browser video-player {
        width: 100%;
        margin-top: 2rem
    }

    .Browser__heading {
        color: var(--color-dark);
        text-decoration: none;
        padding-bottom: .5rem
    }

    .Browser__heading:after {
        content: "";
        position: absolute;
        top: 2rem;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0
    }

    .Browser p {
        margin-bottom: 1rem;
        margin-top: 1rem
    }

    .Browser__footer {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .Browser__footer a {
        color: var(--color-dark);
        z-index: 1;
        text-decoration: none;
        font-family: Mosk, sans-serif;
        font-weight: 600;
        border-bottom: 1.5px solid transparent;
        transition: border-color .1s ease-out
    }

    .Browser__footer a.none:hover {
        border-color: var(--color-peach)
    }

    .Browser:after {
        position: absolute;
        content: "";
        width: 100%;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--color-dark);
        top: 2rem
    }

    .Browser:before {
        position: absolute;
        content: "";
        width: 4rem;
        left: 1rem;
        height: 1.5rem;
        top: .5rem;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 21'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23404040'/%3E%3Ccircle cx='40' cy='10' r='10' fill='%23404040'/%3E%3Ccircle cx='70' cy='10' r='10' fill='%23404040'/%3E%3C/g%3E%3C/svg%3E%0A")
    }

    .night .Browser {
        --underline: var(--color-mint);
        color: var(--color-dark);
        background-color: var(--color-lilac)
    }

    .night .Browser:before {
        filter: invert(1) brightness(1.3)
    }

    .Speaking {
        background-color: var(--color-sherbet);
        min-height: 100vh;
        --color-selection-bg: var(--color-dark-selection);
        --color-selection: var(--color-peach)
    }

    .Speaking__heading {
        color: var(--color-dark);
        margin-bottom: 1rem
    }

    .Speaking__image {
        margin: 3.5rem auto 0;
        position: relative;
        display: block;
        border: solid 2px var(--color-dark);
        -webkit-box-shadow: .5rem .5rem 0 0 var(--color-dark);
        -moz-box-shadow: .5rem .5rem 0 0 var(--color-dark);
        box-shadow: .5rem .5rem 0 0 var(--color-dark);
        width: 90%;
        height: 250px;
        max-width: 400px;
        transform: translateX(-.5rem);
        filter: saturate(.7)
    }

    .Speaking__image img {
        object-fit: cover;
        height: 100%;
        width: 100%
    }

    .Speaking__image figcaption {
        position: absolute;
        top: -1.2rem;
        left: 1.8rem;
        padding: .5rem 1.25rem;
        background-color: var(--color-light);
        color: var(--color-dark);
        border: solid 2px var(--color-dark);
        font-family: Mosk, sans-serif;
        -webkit-box-shadow: .3rem .3rem 0 0 var(--color-dark);
        -moz-box-shadow: .3rem .3rem 0 0 var(--color-dark);
        box-shadow: .3rem .3rem 0 0 var(--color-dark)
    }

    .Speaking__talks {
        margin-top: 4rem;
        --flow-space: 2em
    }

    .Speaking__link {
        display: block;
        color: var(--color-dark);
        font-weight: 700;
        text-decoration: underline;
        text-decoration-skip-ink: auto
    }

    @media screen and (min-width: 800px) {
        .Speaking__heading {
            margin-bottom: 1.5rem;
            margin-top: 3rem
        }

        .Speaking__intro {
            display: flex;
            justify-content: space-between
        }

        .Speaking__text {
            padding-right: 3rem;
            max-width: 60ch
        }

        .Speaking__talks {
            --flow-space: 4em;
            margin-top: 8rem
        }
    }

    .night .Speaking figcaption {
        background-color: var(--color-sherbet)
    }

    .Card {
        --underline: var(--color-peach)
    }

    .Card__type {
        align-self: flex-start;
        margin-bottom: .5rem;
        transform: rotate(-5deg);
        transform-origin: bottom left;
        padding-left: .2rem
    }

    .Card__link {
        text-decoration: none;
        color: var(--color-dark)
    }

    @media screen and (min-width: 800px) {
        .Card {
            display: flex;
            justify-content: space-between
        }

        .Card__link {
            width: 65%;
            position: relative
        }

        .Card__link:after {
            content: "";
            position: absolute;
            width: 20%;
            height: 2px;
            background-color: var(--color-dark);
            top: .75rem;
            right: calc(100% + 2rem)
        }
    }

    .night .Card {
        --underline: var(--color-mint)
    }

    .Contact {
        --color-selection: var(--color-sherbet);
        --color-selection-bg: var(--color-dark-selection);
        min-height: 100vh;
        background-color: var(--color-mint);
        padding-left: 1rem;
        padding-right: 1rem;
        display: flex;
        align-items: center
    }

    .Contact__inner {
        background-color: var(--color-light);
        display: grid;
        grid-template-rows: repeat(3, auto);
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 2.4rem, var(--color-light) 2.4rem, var(--color-light) 100%)
    }

    .Contact__inner .link {
        color: var(--color-dark);
        z-index: 1;
        text-decoration: none;
        font-family: Mosk, sans-serif;
        font-weight: 600;
        border-bottom: 1.5px solid var(--color-mint)
    }

    .Contact__heading {
        margin-bottom: 1rem;
        grid-row: 3/span 1
    }

    .Contact__svg {
        width: 80%;
        margin: 0 auto
    }

    .Contact__social {
        display: inline-block
    }

    .Contact__social a {
        font-size: 0;
        color: var(--color-dark);
        transition: color .2s ease-out
    }

    .Contact__social a:hover {
        color: var(--color-mint)
    }

    .Contact__social svg {
        height: 1.2rem
    }

    .Contact__social *+* {
        margin-left: 1rem
    }

    @media screen and (min-width: 800px) {
        .Contact__inner {
            width: 100%;
            grid-template-columns: auto 55%;
            grid-template-rows: repeat(2, auto)
        }

        .Contact__heading {
            align-self: end;
            grid-row: 2/span 1;
            grid-column: 1/span 2
        }

        .Contact__content {
            grid-row: 1/span 1;
            grid-column: 1/span 1
        }

        .Contact__svg {
            margin-bottom: 2rem;
            align-self: center;
            width: 100%;
            max-width: 800px;
            grid-row: 1/span 2;
            grid-column: 2/span 1
        }
    }

    .night .Contact {
        --underline: var(--color-mint)
    }

    .Featured {
        --underline: var(--color-marshmellow)
    }

    .Featured__tabs {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 2rem
    }

    .Featured__inner {
        display: flex;
        flex-direction: column;
        flex-direction: column-reverse
    }

    .Featured .Browser {
        padding: 2rem 0 0 0;
        overflow: hidden
    }

    .Featured .video-player {
        width: 100%;
        width: calc(100% + 4px);
        margin-bottom: -2px;
        margin-left: -2px
    }

    .Featured .video-player iframe {
        bottom: -2px
    }

    .Featured__loader {
        position: absolute;
        width: 30%;
        min-width: 100px;
        transform-origin: center;
        animation: rotate infinite 1s linear paused both;
        z-index: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        opacity: 0
    }

    @keyframes rotate {
        to {
            transform: translate(-50%, -50%) rotate(360deg)
        }
    }

    .Featured__link {
        display: block;
        position: relative;
        background-color: var(--color-dark)
    }

    .Featured__link-inner {
        --flow-space: 0.5em;
        box-shadow: 0 0 0 2px var(--color-dark) inset;
        padding: 1rem 1.5rem;
        background-color: var(--color-light);
        transition: transform .2s ease-out, background-color .2s ease-out
    }

    .Featured__link * {
        pointer-events: none
    }

    .Featured__link[aria-selected=true] .Featured__link-inner {
        transform: translate(.5rem, -.5rem);
        background-color: var(--color-peach)
    }

    .Featured__tab+.Featured__tab .Featured__link-inner {
        border-top: none;
        margin-top: -2px
    }

    .Featured__link {
        text-decoration: none;
        color: var(--color-dark)
    }

    @media screen and (min-width: 800px) {
        .Featured {
            --underline: var(--color-marshmellow)
        }

        .Featured__tabs {
            margin-right: 1.5rem;
            margin-top: 0;
            padding-left: 0
        }

        .Featured__inner {
            flex-direction: row;
            align-items: flex-start
        }

        .Featured .Browser {
            flex-shrink: 0;
            flex-grow: 1
        }
    }

    .night .Featured__link-inner {
        background-color: var(--color-sherbet)
    }

    .Events {
        display: flex;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 1rem
    }

    .Events__item {
        flex: 1 0 220px;
        max-width: 350px;
        padding: 1.5rem 1rem;
        background-color: var(--color-sherbet-fade);
        border-radius: 20px
    }

    .Events>*+* {
        margin-left: .5rem
    }

    .Events__link {
        color: var(--color-dark);
        text-align: center
    }

    .Events__svg {
        width: 1rem;
        margin-right: .5rem
    }

    .Events__row {
        display: flex;
        align-items: center;
        white-space: nowrap
    }

    /* =========================
    GLOBAL FIX
    ========================= */

    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }


    /* =========================
    SKILLS SECTION
    ========================= */

    .skills-section {
        padding: 100px 8%;
        min-height: 100vh;
        background: #dd859c;
        transition: .5s ease;
        overflow: hidden;
    }


    /* =========================
    HEADER
    ========================= */

    .skills-header {
        margin-bottom: 70px;
    }


    .skills-header h2 {
        color: rgb(64 64 64);
        font-size: 55px;
        margin: 15px 0;
    }


    /* =========================
    CARD GRID
    ========================= */

    .skills-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        align-items: stretch;
    }

    .skill-box {
        min-height: 360px;

        background: rgba(255, 255, 255, .15);
        backdrop-filter: blur(18px);

        border: 1px solid rgb(64, 64, 64, 0.2);

        border-radius: 30px;

        padding: 35px;

        display: flex;
        flex-direction: column;

        transition: .5s;
    }

    .skill-box:hover {
        transform: translateY(-10px);
    }

    .skill-box h3 {
        color: rgb(64 64 64);
        text-align: center;
        margin-bottom: 30px;
        font-size: 24px;
    }


    /* =========================
    ICONS
    ========================= */

    .icon-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .tech {
        text-align: center;
        transition: .3s;
    }

    .tech:hover {
        transform: translateY(-6px);
    }

    .tech i {
        color: rgb(64 64 64);
        font-size: 60px;
    }

    .tech p {
        color: rgb(64 64 64);
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
    }


    /* =========================
    MOBILE
    ========================= */

    @media(max-width:768px) {

        .skills-section {
            padding: 80px 6%;
        }

        .skills-header h2 {
            font-size: 38px;
        }

        .skills-container {
            grid-template-columns: 1fr;
        }

        .icon-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .skill-box {
            min-height: auto;
        }

    }

    /* =========================
    DARK MODE
    ========================= */

    .dark .skills-section,
    .night .skills-section {
        background: rgb(164, 51, 83);
    }

    .dark .skill-box,
    .night .skill-box {
        background: rgb(164, 51, 83);
        border: 1px solid rgba(255, 255, 255, .15);
    }

    .dark .skills-header p,
    .dark .skills-header h2,
    .dark .skill-box h3,
    .dark .tech p,

    .night .skills-header p,
    .night .skills-header h2,
    .night .skill-box h3,
    .night .tech p {
        color: white;
    }

    .dark .tech i,
    .night .tech i {
        color: #ffe6ec;
    }

    .dark .skills-header span,
    .night .skills-header span {
        background: white;
    }

    html {
        scroll-behavior: smooth;
    }

    .none svg {
        width: 28px;
        height: 28px;
    }

    @font-face {
        font-family: 'Cursive H5';
        src: url('fonts/CursiveH5.ttf') format('truetype');
    }

    .logo {
        width: 250px;
        height: auto;
    }

    .logo-text {
        fill: none;
        stroke: var(--color-highlight);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;

        /* handwriting animation */
        stroke-dasharray: 1200;
        stroke-dashoffset: 1200;
        animation: drawLogo 4s ease forwards;
    }

    @keyframes drawLogo {
        to {
            stroke-dashoffset: 0;
        }
    }

    .logo{
        width: 350px;
        height:auto;
    }

    .logo-text{
        font-family: 'Allura', cursive;
        font-size: 230px;

        fill:none;
        stroke: var(--color-highlight);
        stroke-width:2.2;

        stroke-linecap:round;
        stroke-linejoin:round;

        /* handwriting animation */
        stroke-dasharray:1200;
        stroke-dashoffset:1200;
        animation: drawLogo 3.5s ease forwards;
    }

    @keyframes drawLogo{
        to{
            stroke-dashoffset:0;
        }
    }


    /* =========================
    SKILLS: staggered rise-in
    ========================= */

    .skill-box {
        opacity: 0;
        transform: translateY(30px);
    }

    .skill-box.is-visible {
        animation: skillRiseIn .7s ease-out forwards;
    }

    .skill-box.is-visible:nth-child(1) { animation-delay: 0s; }
    .skill-box.is-visible:nth-child(2) { animation-delay: .12s; }
    .skill-box.is-visible:nth-child(3) { animation-delay: .24s; }
    .skill-box.is-visible:nth-child(4) { animation-delay: .36s; }

    @keyframes skillRiseIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .icon-grid .tech i {
        transition: color .25s ease;
    }

    .tech:hover i {
        color: var(--color-mint);
    }


    /* =========================
    CERTIFICATIONS SECTION
    ========================= */

    .certs-section {
        position: relative;
        padding: 110px 8%;
        min-height: 100vh;
        background: #dfb697;
        transition: .5s ease;
        overflow: hidden;
    }

    .certs-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(64, 64, 64, .06), transparent 38%, rgba(64, 64, 64, .04));
        pointer-events: none;
    }

    .certs-header {
        position: relative;
        z-index: 1;
        margin-bottom: 42px;
        max-width: 760px;
    }

    .certs-header__eyebrow {
        display: inline-block;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: rgba(64, 64, 64, .08);
        color: rgb(64 64 64 / .8);
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .certs-header h2 {
        color: rgb(64 64 64);
        font-size: clamp(2.2rem, 3.5vw, 3.4rem);
        margin: 0 0 10px;
    }

    .certs-header__intro {
        color: rgb(64 64 64 / .78);
        font-size: 1.02rem;
        line-height: 1.7;
        max-width: 620px;
    }

    .certs-container {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 28px;
        align-items: stretch;
    }

    .cert-card {
        position: relative;
        min-height: 420px;
        padding: 0;
        background: rgba(239, 220, 197, 0.78);
        border: 1px solid rgb(64 64 64 / .12);
        border-radius: 28px;
        box-shadow: 0 20px 45px rgb(64 64 64 / .12);
        backdrop-filter: blur(10px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        text-align: left;
        opacity: 0;
        transform: translateY(24px) scale(.96);
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }

    .cert-card:hover {
        transform: translateY(-10px) scale(1.01);
        box-shadow: 0 28px 55px rgb(64 64 64 / .18);
        border-color: rgb(64 64 64 / .28);
    }

    .cert-card.is-visible {
        animation: certRiseIn .65s cubic-bezier(.2, .9, .2, 1) forwards;
    }

    .cert-card.is-visible:nth-child(1) { animation-delay: 0s; }
    .cert-card.is-visible:nth-child(2) { animation-delay: .12s; }
    .cert-card.is-visible:nth-child(3) { animation-delay: .24s; }
    .cert-card.is-visible:nth-child(4) { animation-delay: .36s; }

    @keyframes certRiseIn {
        0% {
            opacity: 0;
            transform: translateY(24px) scale(.96);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .cert-card__media {
        position: relative;
        height: 220px;
        overflow: hidden;
        background: #ece3dc;
    }

    .cert-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

    .cert-card:hover .cert-card__media img {
        transform: scale(1.05);
    }

    .cert-card__badge {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: .45rem .7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        color: rgb(64 64 64);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        box-shadow: 0 8px 20px rgb(64 64 64 / .12);
    }

    .cert-card__content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 22px 24px 24px;
        flex: 1;
    }

    .cert-card__pill {
        display: inline-flex;
        align-self: flex-start;
        padding: .35rem .65rem;
        border-radius: 999px;
        background: rgb(64 64 64 / .08);
        color: rgb(64 64 64 / .8);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .cert-card h3 {
        color: rgb(64 64 64);
        font-size: 1.2rem;
        line-height: 1.35;
        margin: 2px 0 0;
    }

    .cert-card__issuer {
        color: rgb(64 64 64 / .78);
        font-size: .95rem;
        font-weight: 600;
    }

    .cert-card__footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid rgb(64 64 64 / .1);
    }

    .cert-card__date {
        color: rgb(64 64 64 / .65);
        font-size: .9rem;
    }

    .cert-card__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgb(64 64 64);
        color: #fff;
        font-size: 1rem;
        transition: transform .25s ease;
    }

    .cert-card:hover .cert-card__arrow {
        transform: translate(2px, -2px);
    }

    @media (max-width: 768px) {
        .certs-section { padding: 80px 6%; }
        .certs-header { margin-bottom: 32px; }
        .certs-container { grid-template-columns: 1fr; }
        .cert-card { min-height: auto; }
        .cert-card__media { height: 200px; }
    }

    .dark .certs-section,
    .night .certs-section {
        background-color: #6f5c50;
        background-image:
            radial-gradient(circle at top left, rgba(255, 255, 255, .18), transparent 30%),
            linear-gradient(135deg, #6f5c50 0%, #5a463d 100%);
    }

    .dark .certs-header__eyebrow,
    .night .certs-header__eyebrow {
        background: rgba(255, 255, 255, .12);
        color: rgba(255, 255, 255, .8);
    }

    .dark .cert-card,
    .night .cert-card {
        background: rgba(255, 255, 255, .12);
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .16);
    }

    .dark .certs-header h2,
    .dark .certs-header__intro,
    .dark .cert-card h3,
    .dark .cert-card__issuer,
    .dark .cert-card__date,
    .dark .cert-card__pill,
    .night .certs-header h2,
    .night .certs-header__intro,
    .night .cert-card h3,
    .night .cert-card__issuer,
    .night .cert-card__date,
    .night .cert-card__pill {
        color: white;
    }

    .dark .cert-card__badge,
    .night .cert-card__badge {
        background: rgba(255, 255, 255, .9);
        color: #6f5c50;
    }

    .dark .cert-card__footer,
    .night .cert-card__footer {
        border-top-color: rgba(255, 255, 255, .15);
    }

    .dark .cert-card__arrow,
    .night .cert-card__arrow {
        background: white;
        color: #6f5c50;
    }
    .cert-card,
    .cert-card:link,
    .cert-card:visited,
    .cert-card:hover,
    .cert-card:active {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }



    /* =========================
    (echoes the <g id="BOOKS"> shelf in the Hero illustration)
    ========================= */

        .skills-shelf-section {
            padding: 100px 8%;
            min-height: 100vh;
            background: #dd859c;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .skills-shelf-header {
        text-align: center;
        margin-bottom: 60px;
        width: 100%;
    }

    .skills-shelf-header h2 {
        color: var(--color-dark);
        font-size: 55px;
        margin: 15px 0 5px;
        text-align: left;
    }

        .skills-shelf-header p {
            color: rgb(64 64 64 / .75);
            font-size: 15px;
        }

        .bookcase {
            width: 100%;
            max-width: 900px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px 60px;
        }

        .shelf-unit {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .shelf-label {
        color: rgb(64 64 64);
        font-family: Mosk, sans-serif;
        font-weight: 600;
        font-size: 25px;
        margin-bottom: 16px;
        align-self: flex-start;
    }

        .bookshelf {
            position: relative;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 8px;
            padding-bottom: 6px;
        }

        .book {
            position: relative;
        }

        .book-spine {
            width: 42px;
            height: 150px;
            background: var(--book-color);
            border-radius: 4px 4px 0 0;
            box-shadow: inset -6px 0 10px rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.15);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 12px;
            cursor: pointer;
            transform-origin: bottom center;
            transition: transform .3s cubic-bezier(.34,1.56,.64,1);
        }

        .book-spine span {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 11px;
            font-weight: 700;
            color: rgb(65, 56, 56);
            letter-spacing: .03em;
            pointer-events: none;
            white-space: nowrap;
        }

        .book:hover .book-spine {
            transform: translateY(-12px) rotate(-4deg);
        }

        .book.is-active .book-spine {
            transform: translateY(-34px) rotate(-2deg);
            box-shadow: inset -6px 0 10px rgba(0,0,0,.12), 0 18px 22px rgba(0,0,0,.25);
        }

        .book-page {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        width: 170px;
        background: #ffffff;
        color: rgb(64, 64, 64);
        font-size: 12px;
        line-height: 1.5;
        padding: 12px 14px;
        border-radius: 10px;
        box-shadow: 0 12px 24px rgba(0,0,0,.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
        z-index: 5;
        margin-bottom: 8px;
    }

    .book-page::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-top-color: #ffffff;
    }.book-page {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        width: 170px;
        background: #ffffff;
        color: rgb(64, 64, 64);
        font-size: 12px;
        line-height: 1.5;
        padding: 12px 14px;
        border-radius: 10px;
        box-shadow: 0 12px 24px rgba(0,0,0,.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
        z-index: 5;
        margin-bottom: 8px;
    }

    .book-page::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-top-color: #ffffff;
    }
        .book.is-active .book-page {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }

        .bookshelf-plank {
            width: 100%;
            height: 14px;
            background: rgb(64 64 64);
            border-radius: 3px;
            margin-top: -2px;
            box-shadow: 0 6px 0 rgba(0,0,0,.1);
        }

        @media (max-width: 768px) {
            .skills-shelf-section { padding: 80px 6%; }
            .skills-shelf-header h2 { font-size: 38px; }
            .bookcase {
                grid-template-columns: 1fr;
                gap: 45px;
            }
            .book-spine { width: 36px; height: 120px; }
            .book-page { width: 140px; font-size: 11px; }
        }

        .night .skills-shelf-section {
            background: rgb(164, 51, 83);
        }

        .night .shelf-label {
            color: rgb(188, 178, 178);
        }





    .back-to-top {
        position: fixed;
        right: 1.25rem;
        bottom: 5.5rem;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 50;
        opacity: 0;
        visibility: hidden;
        transform: translateY(1rem);
        transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility .3s;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back-to-top::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: var(--btt-shadow);
    }

    .back-to-top__face {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: var(--btt-face);
        border: solid 2px var(--btt-border);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-.3rem, -.3rem);
        transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .35s ease;
    }

    .back-to-top:hover .back-to-top__face {
        transform: translate(0, 0);
    }

    .back-to-top:active .back-to-top__face {
        transform: translate(.05rem, .05rem);
    }

    .back-to-top__face svg {
        width: 1.3rem;
        height: 1.3rem;
        fill: var(--btt-icon);
        pointer-events: none;
    }

    @media screen and (min-width: 800px) {
        .back-to-top {
            bottom: 2rem;
        }
    }