@charset "UTF-8";:root {
    --color-primary: #ab79d6;
    --color-on-primary: #351d4a;
    --color-secondary: #d367c1;
    --color-secondary-2: #c481b8;
    --color-secondary2: #4caf50;
    --color-background: #27272c;
    --color-on-background: #c5c5ce;
    --color-background-alt: #1e1c22;
    --color-background-alt-alpha: #1e1c22bf;
    --color-inverse: #fff;
    --color-gray: #8e8e8e;
    --color-yellow: #dedf40;
    --color-green: #62cb5c;
    --color-blue: #00bbcb;
    --color-on-blue: #004a09;
    --gradient: var(--color-secondary) 10%,var(--color-yellow) 25%,var(--color-green) 50%,var(--color-blue) 75%,var(--color-primary) 90%;
    --gradient2: var(--color-secondary2) 10%,var(--color-secondary2) 25%,var(--color-secondary2) 50%,var(--color-secondary2) 75%,var(--color-secondary2) 90%;
    --brand-font: "Kanit",serif;
    --brand-font-weight: 800;
    --brand-font-alt: "Baloo 2",system-ui,sans-serif;
    --brand-font-alt-weight: normal;
    --brand-font-alt-weight-bold: 500;
    --color-button-confirm: #4caf50;
    --color-button-confirm-on: #004a09;     
    --color-button-remove: #f87169;
    --color-button-remove-on: #f4dcda;
}



data-episode {

content: "hello";

}


*,:after,:before {
    box-sizing: border-box
}

blockquote,body,dd,dl,figure,h1,h2,h3,h4,p {
    margin: 0
}

:where(ul,ol):where([role=list]) {
    list-style: none;
    margin: 0;
    padding: 0
}

html:focus-within {
    scroll-behavior: smooth
}



a:not([class]) {
    text-decoration-thickness: max(.08em,1px);
    text-underline-offset: .15em
}

img,picture,svg {
    /* display: block;
    max-width: 100% */
}

img[width] {
    height: auto
}



:target {
    scroll-margin-top: 2rem
}

:focus {
    scroll-margin-bottom: 8vh
}

button,input,select,textarea {
    font: inherit
}

@media (prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,:after,:before {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        scroll-behavior: auto!important;
        transition-duration: .01ms!important
    }
}

@font-face {
    font-display: swap;
    font-family: Kanit;
    font-style: normal;
    font-weight: 800;
    src: local("Kanit ExtraBold"),local("Kanit-ExtraBold"),url(../fonts/kanit/Kanit-ExtraBoldItalic.ttf) format("ttf")
}

@font-face {
    font-display: swap;
    font-family: Baloo\ 2;
    font-style: normal;
    font-weight: 400;
    src: local("Baloo 2 Regular"),local("Baloo-2-Regular"),url(../fonts/baloo_2/Baloo2-Regular.ttf) format("ttf")
}

@font-face {
    font-display: swap;
    font-family: Baloo\ 2;
    font-style: normal;
    font-weight: var(--brand-font-alt-weight-bold);
    src: local("Baloo 2 Medium"),local("Baloo-2-Medium"),url(../fonts/baloo_2/Baloo2-Medium.ttf) format("ttf")
}

:is(.h2,.h3,h4) {
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: calc(4px + 2ex);
    margin-bottom: .65em;
    overflow-wrap: break-word
}

h1 {
    font-family: var(--brand-font);
    font-size: clamp(2rem,1rem + 5vw,4rem);
    font-weight: var(--brand-font-weight);
    letter-spacing: .04em;
    line-height: 1.1
}

.card__title,.h2,.h3,.lead,h2,h3 {
    font-family: var(--brand-font-alt)
}

.card__title,.h3,h3 {
    font-weight: var(--brand-font-alt-weight-bold)
}

.h2,h2 {
    font-size: clamp(1.85rem,1rem + 5vw,3rem);
    font-weight: var(--brand-font-alt-weight);
    line-height: 1.2
}

article .h2 {
    color: var(--color-secondary)
}

.h3,h3 {
    font-size: clamp(1.55rem,1rem + 3vw,2.15rem);
    line-height: 1.2
}

article .h3 {
    color: var(--color-primary)
}

h4 {
    color: var(--color-inverse);
    font-size: 1.25rem;
    letter-spacing: .03em
}

.logo-m {
    font-family: var(--brand-font);
    font-weight: var(--brand-font-weight);
    position: relative
}

.logo-m:before {
    background-color: var(--color-background-alt);
    content: "";
    padding: 70%;
    position: absolute;
    transform: rotate(45deg) translateX(-20%);
    z-index: -1
}

.hero--home h1,.hero--home h1:first-letter {
    -webkit-text-fill-color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(-2deg,var(--color-secondary) 10%,var(--color-primary) 70%)
}

.hero--home h1 {
    line-height: .8;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: left
}

@media (max-width: 75ch) {
    .hero--home h1 {
        max-width:10ch
    }
}

.hero--home h1:before {
    background-color: var(--color-background-alt);
    content: "";
    left: 0;
    padding: 1em;
    position: absolute;
    top: 0;
    transform: rotate(45deg) translateX(-22%);
    z-index: -1
}

.hero--home h1:first-letter {
    float: left;
    font-size: 1.75em
}

.hero--home h1 em {
    display: block;
    font-size: .5em;
    margin-top: .25em
}

article>*+:not([class]):not(details) {
    margin-top: 1.15em
}

article>*+.h2 {
    margin-top: 2em
}

article>*+.h3 {
    margin-top: 1.5em
}

article>ol,article>ul {
    margin-bottom: 2em
}

article>ol li+li,article>ul li+li {
    margin-top: .75em
}

.heading-wrapper {
    display: flex;
    gap: .15em
}

.anchor {
    font-size: max(.75em,1.75rem);
    line-height: 1;
    opacity: .6;
    order: -1;
    text-decoration: none
}

.anchor [hidden] {
    display: block
}

.anchor:hover {
    opacity: 1
}

::marker {
    color: var(--color-primary)
}

::selection {
    background-color: var(--color-yellow);
    color: var(--color-background);
    -webkit-text-fill-color: var(--color-background)
}

code:not([class*=language]) {
    color: var(--color-secondary);
    display: inline-block;
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
    font-size: .92em;
    padding: 0 .15em
}

/* a:not(.demo *),button:not(.demo *),input:not(.demo *),textarea:not(.demo *) {
    --outline-size: max(2px,0.08em);
    --outline-style: solid;
    --outline-color: currentColor
}

a:not(.demo *):focus,button:not(.demo *):focus,input:not(.demo *):focus,textarea:not(.demo *):focus {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset,var(--outline-size))
}

a:not(.demo *):focus-visible,button:not(.demo *):focus-visible,input:not(.demo *):focus-visible,textarea:not(.demo *):focus-visible {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset,var(--outline-size))
}

a:not(.demo *):focus:not(:focus-visible),button:not(.demo *):focus:not(:focus-visible),input:not(.demo *):focus:not(:focus-visible),textarea:not(.demo *):focus:not(:focus-visible) {
    outline: none
} */

a:not([class*=button]) {
    border-radius: .15em;
    color: var(--color-blue)
}

a:not([class*=button]) code {
    color: currentColor;
    font-size: .87em;
    line-height: 0;
    padding: 0;
    text-decoration: underline
}

.lead {
    font-size: 1.35rem;
    letter-spacing: .01em;
    line-height: 1.3
}

.hero .lead {
    align-items: center;
    display: grid;
    gap: .5em;
    grid-template-columns: 8vw auto 8vw;
    justify-content: center;
    letter-spacing: .03em;
    position: relative;
    text-align: center
}

.hero .lead:after,.hero .lead:before {
    background: linear-gradient(to right,var(--gradient));
    content: "";
    height: 1px;
    width: 100%
}

blockquote {
    color: var(--color-inverse);
    font-size: 1.2rem;
    letter-spacing: .02em;
    margin: var(--bq-margin,3rem) 0;
    padding: .5rem 1.5rem
}

blockquote:first-child {
    color: var(--color-primary);
    margin: 0 auto 3rem;
    max-width: 60ch;
    text-align: center
}

blockquote:not(:first-child) {
    border-image: linear-gradient(var(--gradient-angle,to bottom),var(--gradient)) 1;
    border-style: solid;
    border-width: 0 0 0 2px;
    position: relative
}

blockquote cite {
    color: var(--color-inverse);
    font-size: .75em
}

blockquote cite a:not([class]) {
    color: inherit
}

hr {
    background: linear-gradient(to right,var(--gradient));
    border: none;
    height: 1px;
    margin: 3rem auto;
    max-width: 10rem
}

.office-hours li {
    font-size: 1.5rem
}

body,html {
     overflow-x: hidden;
}



main {
    margin-bottom: 8vh;
    margin-top: 8vh
}

footer {
    padding-bottom: .5rem;
    padding-top: .5rem
}

footer p {
    font-size: .9rem
}

footer .row {
    --gap: 2rem 1rem
}

article {
    --width: auto;
    max-width: 80ch;
    width: var(--width)
}

article .heading-wrapper,article>:not(img):not(details):not([class]),article>pre[class*=language] {
    margin-left: auto;
    margin-right: auto;
    width: min(100%,50rem)
}

article img {
    margin-left: auto;
    margin-right: auto;
    max-height: 40vh
}

.carbon-ad {
    --outline-offset: 0.25rem;
    min-height: 134px
}

.carbon-ad>[id] {
    position: relative;
    z-index: 1
}

.carbon-ad>[id]>span {
    display: grid;
    font-size: 1rem;
    grid-template-areas: "ad";
    line-height: 1.15
}

.carbon-ad>[id]>span>* {
    grid-area: ad
}

.carbon-ad a {
    text-decoration: none
}

.carbon-wrap {
    --carbon-direction: column;
    align-items: center;
    display: flex;
    flex-direction: var(--carbon-direction);
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center
}

.carbon-wrap>a:last-child {
    flex: 1 0 15ch;
    margin-bottom: 1rem;
    margin-top: 1rem
}

a.carbon-poweredby {
    color: var(--color-gray);
    font-size: .9rem;
    line-height: 1;
    padding-top: 34px;
    place-self: end
}

@media (min-width: 1200px) {
    .post-wrapper {
        align-items:start;
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr min(80ch,60vw) 1fr
    }
}

.post-wrapper article,.post-wrapper aside {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 2rem)
}

.post-wrapper aside {
    display: grid;
    gap: 1rem;
    max-width: 30ch
}

.post-wrapper aside details {
    margin-top: 0
}

.post-wrapper aside details summary {
    background: none;
    border: none;
    color: var(--color-inverse);
    font-size: 1rem;
    font-weight: 700;
    width: -moz-fit-content;
    width: fit-content
}

.post-wrapper aside p {
    color: var(--color-primary)
}

.post-wrapper aside a,.post-wrapper aside p {
    font-size: 1rem
}

.post-wrapper aside img {
    border-radius: 50%;
    justify-self: center;
    width: min(10ch,25vw)
}

.postpage {
    position: relative
}

.postpage:before {
    color: var(--color-background-alt-alpha);
    content: attr(data-episode);
    font-family: var(--brand-font);
    font-size: clamp(15rem,35vw,30rem);
    font-weight: var(--brand-font-weight);
    line-height: .5;
    position: absolute;
    right: calc(50% - 20vw);
    top: 0;
    transform: translateX(30%);
    width: 1ch;
    z-index: -1
}

.postpage .carbon-ad {
    border: 1px dashed var(--color-secondary);
    border-radius: .5rem;
    margin: 5vh auto;
    padding: 1rem;
    width: min(45ch,100%)
}

.postpage .carbon-wrap {
    --carbon-direction: row
}

.postpage>.row {
    margin-top: 4vh
}

.landing-page h2 {
    max-width: 20ch
}

.landing-page>footer {
    margin-top: auto
}

.cp_embed_wrapper {
    height: max(60vh,20rem);
    margin: 2rem 0
}

.cp_embed_wrapper iframe {
    height: 100%
}

.halfway {
    height: 1px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: 1px
}

code[class*=language-],pre[class*=language-] {
    background: none;
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: normal;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
    tab-size: 4
}

pre[class*=language-] {
    border-radius: .3em;
    margin: 2rem 0;
    max-width: calc(100vw - 2rem);
    overflow: auto;
    padding: 1em
}

:not(pre)>code[class*=language-],pre[class*=language-] {
    background: var(--color-background-alt);
    background-image: linear-gradient(8deg,var(--color-background-alt),var(--color-background))
}

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

.token.cdata,.token.comment,.token.doctype,.token.prolog {
    color: #d4d0ab
}

.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag {
    color: var(--color-blue)
}

.token.boolean,.token.number {
    color: var(--color-green)
}

.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string {
    color: var(--color-primary)
}

.language-css .token.string,.language-scss .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable {
    color: var(--color-secondary)
}

.token.function {
    color: var(--color-green)
}

.token.atrule,.token.attr-value {
    color: var(--color-on-background-alt)
}

.token.keyword {
    color: var(--color-blue)
}

.token.important,.token.regex {
    color: var(--color-yellow)
}

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

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

@media screen and (-ms-high-contrast:active) {
    code[class*=language-],pre[class*=language-] {
        background: window;
        color: windowText
    }

    :not(pre)>code[class*=language-],pre[class*=language-] {
        background: window
    }

    .token.important {
        background: highlight;
        color: window;
        font-weight: 400
    }

    .token.atrule,.token.attr-value,.token.function,.token.keyword,.token.operator,.token.selector {
        font-weight: 700
    }

    .token.attr-value,.token.comment,.token.doctype,.token.function,.token.keyword,.token.operator,.token.property,.token.string {
        color: highlight
    }

    .token.attr-value,.token.url {
        font-weight: 400
    }
}

.container {
    margin-left: auto;
    margin-right: auto;
    width: min(var(--content-max,120ch),100% - 2rem)
}

.column-container {
    --gap: 2rem;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill,minmax(min(100%,25ch),1fr))
}

.hero {
    --padding: 10vh;
    --min-height: 40vh;
    --content-max: 70ch;
    display: grid;
    min-height: var(--min-height);
    padding-bottom: var(--padding);
    padding-top: var(--padding);
    place-content: center;
    text-align: center
}

.landing-page .hero {
    --padding: 5vh;
    --min-height: unset
}

.hero .lead {
    margin-top: 5vh
}

.hero .lead a {
    color: inherit
}

.hero .lead+.button {
    margin-top: 3vh
}

.row {
    --gap: 0.5rem;
    --justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: var(--justify-content)
}

.flex-container,.row {
    display: flex;
    gap: var(--gap)
}

.flex-container {
    --gap: 1rem;
    flex-direction: column
}

.flex-container .row {
    --justify-content: flex-start;
    margin-top: auto
}

.section {
    margin-bottom: var(--section-margin,8vh);
    margin-top: var(--section-margin,8vh);
    padding-bottom: var(--section-padding,4vh);
    padding-top: var(--section-padding,4vh)
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mbs-medium {
    margin-top: max(5vh,3rem)
}

.text-align-center {
    text-align: center
}

.equalize-headings :is(h2,h3) {
    align-items: center;
    display: flex;
    min-height: 2.5em
}

.gradient-border {
    border-image: linear-gradient(to right,var(--gradient)) 1;
    border-style: solid;
    border-width: 0;
    border-top-width: var(--gradient-width,.25rem)
}

.promo {
    --gradient-angle: 35deg;
    border-image: linear-gradient(var(--gradient-angle,to bottom),var(--gradient)) 1;
    border-style: solid;
    border-width: 8px;
    margin: 8vh auto;
    padding: 2rem 1.5rem;
    text-align: center;
    width: min(var(--promo-width,40rem),100%)
}

.promo a {
    color: var(--color-secondary)
}

header+.promo {
    margin-top: 0
}

.promo--wide {
    --promo-width: 80ch
}

.promo--centered {
    display: grid;
    justify-items: center
}

.promo--centered p {
    max-width: 30ch;
    width: 100%
}

.pill {
    border: 2px solid;
    border-radius: 100vmax;
    color: var(--color-green);
    font-size: .9em;
    font-weight: 700;
    line-height: 1;
    padding: .15em .5em
}

.color-primary {
    color: var(--color-primary)
}

.color-secondary {
    color: var(--color-secondary)
}

.color-gray {
    color: var(--color-gray)
}

.background--secondary-alt {
    background-color: #c338ac;
    color: #fff
}

.background--secondary-alt a:not([class]) {
    color: inherit
}

.background--secondary-alt .button-outlined {
    --button-focus-inner: var(--color-secondary)
}

[hidden] {
    display: none
}

.nav {
    display: grid;
    font-size: 1rem;
    grid-template-columns: auto 8rem auto;
    line-height: 1.2;
    place-content: center;
    place-items: center;
    text-align: center
}

.nav .logo-m {
    color: var(--color-inverse);
    font-size: 3rem;
    line-height: 1;
    text-decoration: none;
    -webkit-text-fill-color: var(--color-background-alt)
}

.nav .logo-m:before {
    animation: gradient 15s linear infinite;
    animation-direction: alternate;
    background-image: linear-gradient(35deg,var(--gradient));
    background-size: 1000% 100%;
    border: 2px solid var(--color-background-alt);
    padding: 140%;
    top: -50%;
    transform: rotate(45deg) translateX(-46%)
}

.nav .logo-m:focus {
    outline: none
}

.nav .logo-m:focus:before {
    box-shadow: 0 0 0 4px var(--color-secondary)
}

.nav a:not([class]) {
    text-decoration: none
}

.nav a:not([class]):hover {
    text-decoration: underline
}

@keyframes gradient {
    0% {
        background-position: 0
    }

    to {
        background-position: 100%
    }
}

.button {
    --button-background: var(--color-primary);
    --button-color: var(--color-on-primary);
    --outline-color: #0000;
    align-items: center;
    background-color: var(--button-background);
    border: 2px solid #0000;
    border-radius: .5em;
    color: var(--button-color);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--brand-font-alt);
    font-weight: var(--brand-font-alt-weight-bold);
    gap: .5em;
    justify-content: center;
    line-height: calc(4px + 2ex);
    min-width: 10ch;
    padding: .55em .75em .5em;
    text-align: center;
    text-decoration: none;
    transition: none .18s ease-in-out;
    transition-property: background-color,color,border-color
}

.button.confirm{

    --button-background: var(--color-button-confirm);
    --button-color: var(--color-button-confirm-on);
    padding: 0.35em 0.75em 0.35em;
}

.button.remove{

    --button-background: var(--color-button-remove);
    --button-color: var(--color-button-remove-on);
    padding: 0.35em 0.75em 0.35em;
}

.button.cancel{
    
    --button-background: var(--color-button-remove-on);
    --button-color: var(--color-button-remove);
    padding: 0.35em 0.75em 0.35em;
}

.button.yes{

    --button-background: var(--color-button-confirm);
    --button-color: var(--color-button-confirm-on);
    padding: 0.35em 0.75em 0.35em;
}

.button.no{

    --button-background: var(--color-button-remove);
    --button-color: var(--color-button-remove-on);
    padding: 0.35em 0.75em 0.35em;
}



.button:focus {
    box-shadow: 0 0 0 max(.15em,2px) var(--button-focus-inner,var(--button-color)),0 0 0 max(.3em,2px) var(--button-focus-outer,var(--button-background))
}

.button:active,.button:hover {
    background-color: var(--button-hover-background-color,var(--button-color));
    color: var(--button-hover-color,var(--button-background))
}

.button:active:not(.button-outlined),.button:hover:not(.button-outlined) {
    border-color: var(--button-hover-border-color,currentColor)
}

.button--secondary {
    --button-background: var(--color-secondary);
    --button-color: var(--color-on-secondary)
}

.button--blue {
    --button-background: var(--color-blue);
    --button-color: var(--color-on-blue)
}

.button-outlined {
    --button-background: #0000;
    --button-color: var(--color-blue);
    --button-hover-color: var(--color-on-blue);
    --button-focus-inner: var(--color-background);
    --button-focus-outer: var(--color-blue);
    border-color: var(--button-color)
}

.button-outlined--inverse {
    --button-background: #0000;
    --button-color: var(--color-inverse);
    --button-hover-background-color: #ffffff29;
    --button-hover-color: currentColor;
    --button-focus-outer: currentColor
}

.button__icon {
    flex-shrink: 0;
    height: 1em;
    width: 1em
}

.button-icon {
    --button-background: #0000;
    --button-color: var(--color-inverse);
    --button-hover-background-color: #ffffff29;
    --button-hover-color: currentColor;
    --button-focus-outer: currentColor;
    border-radius: 50%;
    height: 1.75em;
    min-width: unset;
    padding: .15em;
    width: 1.75em
}

.button--small {
    font-size: 1rem
}



.card:after,.card:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: skewY(var(--skew));
    z-index: -2
}

.card__content {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    justify-items: center
}

.card__content p {
    font-size: 1.05rem;
    line-height: 1.75
}

.card__content2 {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    justify-items: center
}

.card__content2 p {
    font-size: 1.05rem;
    line-height: 1.75
}

.card--teaser {
    justify-content: center
}

.card--teaser:before {
    border-radius: .25rem;
    background-color: var(--color-background);
    outline-offset: -1px
}

.card--teaser .card__content {
    place-content: center
}


.card--teaser2 {
    justify-content: center
}

.card--teaser2:before {
    border-radius: .25rem;
    outline: 1px dashed var(--color-secondary);
    outline-offset: -1px
}

.card--teaser2 .card__content2 {
    place-content: center
}


.card--text img {
    border-radius: 50%
}

.card--episode {
    --message: "Pick me!"
}



.card--episode .card__title {
    justify-self: start
}

.card--episode .card__title.peekaboo:before {
    color: var(--color-inverse);
    content: "✨ " var(--message);
    font-size: .75em;
    font-weight: 400;
    left: 2rem;
    position: absolute;
    text-transform: uppercase;
    top: 3rem
}

.card--episode:nth-of-type(3) {
    --message: "This is a great one!"
}

.card--episode:nth-of-type(4) {
    --message: "You'll love this one!"
}

.card--episode:nth-of-type(5) {
    --message: "Check this one out!"
}

.card--episode .card__content a:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@supports selector(:focus-within) {
    .card--episode .card__content a {
        --outline-color: #0000
    }
}

.card--episode .card__content:before {
    content: attr(data-episode);
    font-family: var(--brand-font-alt);
    font-size: 2rem;
    opacity: .65;
    position: absolute;
    right: 1rem;
    top: 0
}

.card--episode:before,
.card--text:before {
    background-image: linear-gradient(35deg,var(--gradient));
    border-radius: .25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform .24s ease-in;
}

.card--episode:after,
.card--text:after {
    background-image: linear-gradient(to bottom,var(--color-background-alt-alpha),var(--color-background-alt) .75rem)
}

.card--episode:focus-within:before,
.card--episode:hover:before,
.card--text:focus-within:before,
.card--text:hover:before  {
    transform: skewY(var(--skew)) scale(1.03)
}

.card--episode:focus-within:after,
.card--text:focus-within:after {
    outline: 1px dotted;
    outline-offset: -.55rem
}

.card--episode :focus,
.card--text :focus,
.card--logbook :focus {
    scroll-margin-bottom: 40vh
}

.card--episode a.card__title,
.card--text a.card__title,
.card--logbook a.card__title {
    font-size: 1.35rem;
    line-height: 1.15;
    text-decoration: none
}

.card--episode a.card__title:not([class*=color]),
.card--text a.card__title:not([class*=color]),
.card--logbook a.card__title:not([class*=color]) {
    color: var(--color-primary)
}








.card--logbook:before {
    background-image: linear-gradient(35deg, var(--gradient));
    border-radius: 0.25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform 0.24s ease-in;
}

.card--logbook:after {
    background-image: linear-gradient(to bottom, var(--color-background-alt-alpha), var(--color-background-alt) 0.75rem);
}

.card--logbook:hover:before,
.card--logbook:focus-within:before {
     transform: skewY(var(--skew)) scaleX(1.03);
}

.card--logbook:focus-within:after,
.card--logbook:hover:after {
    outline-offset: -0.15rem;
}
















@media (min-width: 80ch) {
    .card {
        /* --skew:-8deg */
        --skew: 0deg;
    }
}

@media (max-width: 120ch) {
    .card--teaser:first-child {
        grid-row-start:2
    }
    .card--teaser2:first-child {
        grid-row-start:2
    }
}

form {
    display: grid;
    justify-items: start;
    margin-top: 2rem;
    grid-gap: 1rem
}

.form-group {
    display: grid;
    width: min(100%,40ch);
    grid-gap: .5em
}

.form-group+.button,.form-group+.form-group {
    margin-top: 1rem
}

.form-group label {
    font-size: 1.35rem;
    line-height: 1;
    width: -moz-fit-content;
    width: fit-content
}

.form-group input,.form-group textarea {
    --outline-color: var(--color-primary);
    background-color: var(--color-background-alt);
    border: 2px solid;
    border-radius: 4px;
    color: var(--color-on-background);
    font: inherit;
    padding: 0 .5em;
    width: 100%
}

.form-group input {
    min-height: 35px
}

.form-inline {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.form-inline .form-group {
    --modifier: calc(30ch - 100%);
    flex-basis: calc(var(--modifier)*999);
    flex-grow: 1;
    grid-template-areas: "group"
}

.form-inline .form-group>* {
    grid-area: group
}

.form-inline .form-group label {
    align-self: start;
    background-image: linear-gradient(to top,var(--color-background-alt) 0 calc(50% - 2px),var(--color-background) calc(50% - 2px));
    font-size: .9rem;
    padding-left: .5em;
    padding-right: .5em;
    position: relative;
    transform: translate(.5rem,-50%);
    width: max-content
}

.form-inline .form-group+button {
    margin-top: 0
}

details {
    margin-top: 4rem
}

.demo,details pre[class*=language-],summary {
    border: 1px solid var(--color-on-background)
}

summary {
    background-color: var(--color-on-background);
    color: var(--color-background);
    cursor: pointer;
    font-size: 1.15rem;
    padding: .5em;
    position: relative
}

summary:focus {
    border-radius: .15em;
    box-shadow: inset 0 0 0 2px var(--color-background),0 0 0 2px var(--color-on-background);
    outline: 2px solid #0000
}

summary::marker {
    color: inherit
}

details pre[class*=language-] {
    border-radius: 0;
    margin: 0
}

.demo {
    contain: content;
    margin-bottom: 4rem
}

@media (max-width: 958px) {
    .demo {
        max-width:calc(100vw - 2rem)
    }
}

.demo .demo--content {
    background-color: #fff
}

.demo .demo--place-center {
    display: grid;
    min-height: 20vh;
    place-content: center
}

.demo .demo--padding {
    padding: 1rem
}

.demo :where(:not(progress)) {
    background-color: initial;
    border: initial;
    border-radius: initial;
    color: initial;
    font-family: system-ui,sans-serif;
    font-size: medium;
    line-height: 1.5;
    margin: 0;
    max-height: none;
    padding: initial;
    text-decoration-color: initial;
    text-decoration-thickness: auto
}

@media (any-hover: hover) and (any-pointer:fine) {
    .demo:not(.no-resize) {
        overflow:auto;
        padding: 1.75rem 0;
        position: relative;
        resize: horizontal
    }

    .demo:not(.no-resize):after,.demo:not(.no-resize):before {
        color: var(--color-on-background);
        font-size: 1rem;
        letter-spacing: .03em;
        line-height: 0;
        position: absolute
    }

    .demo:not(.no-resize):after {
        bottom: .75rem;
        content: "Resize me!";
        right: .85rem
    }

    .demo:not(.no-resize):before {
        content: attr(style);
        left: .85rem;
        top: .85rem
    }
}

@media not all and (-webkit-min-device-pixel-ratio: 0),not all and (min-resolution:0.001dpcm) {
    .demo {
        resize:none
    }

    .demo:after {
        content: ""
    }
}

del.highlight-line-remove {
    opacity: .8
}

ins.highlight-line-add,mark.highlight-line-active {
    background-color: #10441e;
    border-left: 4px solid #24c350;
    color: #fff;
    margin-left: -4px;
    padding: .08em .25em .2em 0;
    text-decoration: none
}
















.topic__content {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    justify-items: center
}

.topic__content p {
    font-size: 1.05rem;
    line-height: 1.75
}


.topic {

    display: flex;
    flex-direction: column;
    padding: 4.5rem 2rem;
    position: relative;
}

.topic--test {
    justify-content: center
}

.topic--test:before {
    outline-offset: -1px;
    background-color: var(--color-background);
    width: 100%;
}

.topic--test .topic__content {
    place-content: center
}





/* ///////////////////////////////////// */



.cardS:after,.cardS:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: skewY(var(--skew));
    z-index: -2;
    border-radius: 15px;
}

.cardS__content {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    justify-items: center
}

.cardS__content p {
    font-size: 1.05rem;
    line-height: 1.75
}

.cardS__content2 {
    --gap: 1rem;
    display: grid;
    gap: var(--gap);
    justify-items: center
}

.cardS__content2 p {
    font-size: 1.05rem;
    line-height: 1.75
}

.cardS--teaser {
    justify-content: center
}

.cardS--teaser:before {
    border-radius: .25rem;
    background-color: var(--color-background);
    outline-offset: -1px
}

.cardS--teaser .cardS__content {
    place-content: center
}


.cardS--teaser2 {
    justify-content: center
}

.cardS--teaser2:before {
    border-radius: .25rem;
    outline: 1px dashed var(--color-secondary);
    outline-offset: -1px
}

.cardS--teaser2 .cardS__content2 {
    place-content: center
}


.cardS--text img {
    border-radius: 50%
}

.cardS--episode {
    --message: "Pick me!"
}



.cardS--episode .cardS__title {
    justify-self: start
}

.cardS--episode .cardS__title.peekaboo:before {
    color: var(--color-inverse);
    content: "✨ " var(--message);
    font-size: .75em;
    font-weight: 400;
    left: 2rem;
    position: absolute;
    text-transform: uppercase;
    top: 3rem
}

.cardS--episode:nth-of-type(3) {
    --message: "This is a great one!"
}

.cardS--episode:nth-of-type(4) {
    --message: "You'll love this one!"
}

.cardS--episode:nth-of-type(5) {
    --message: "Check this one out!"
}

.cardS--episode .cardS__content a:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@supports selector(:focus-within) {
    .cardS--episode .cardS__content a {
        --outline-color: #0000
    }
}

.cardS--episode .cardS__content:before {
    content: attr(data-episode);
    font-family: var(--brand-font-alt);
    font-size: 2rem;
    opacity: .65;
    position: absolute;
    right: 1rem;
    top: 0
}

.cardS--episode--remove:before,
.cardS--text:before {
    background-color: var(--color-button-remove);
    border-radius: .25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform .24s ease-in;
    border-radius: 15px;
}

.cardS--episode--confirm:before,
.cardS--text:before {
    background-color: var(--color-button-confirm);
    border-radius: .25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform .24s ease-in;
    border-radius: 15px;
}

.cardS--episode:after,
.cardS--text:after {
    background-image: linear-gradient(to bottom,var(--color-background-alt-alpha),var(--color-background-alt) .75rem)
}


.cardS--episode:focus-within:before,
.cardS--episode:hover:before,
.cardS--text:focus-within:before,
.cardS--text:hover:before  {
    transform: skewY(var(--skew)) scale(1.03)
}

.cardS--episode:focus-within:after,
.cardS--text:focus-within:after {
    outline: 1px dotted;
    outline-offset: -.55rem
}

.cardS--episode :focus,
.cardS--text :focus,
.cardS--logbook :focus {
    scroll-margin-bottom: 40vh
}

.cardS--episode a.cardS__title,
.cardS--text a.cardS__title,
.cardS--logbook a.cardS__title {
    font-size: 1.35rem;
    line-height: 1.15;
    text-decoration: none
}

.cardS--episode a.cardS__title:not([class*=color]),
.cardS--text a.cardS__title:not([class*=color]),
.cardS--logbook a.cardS__title:not([class*=color]) {
    color: var(--color-primary)
}








.cardS--logbook:before {
    background-image: linear-gradient(35deg, var(--gradient));
    border-radius: 0.25rem;
    height: calc(100% + 1px);
    top: -1px;
    transition: transform 0.24s ease-in;
}

.cardS--logbook:after {
    background-image: linear-gradient(to bottom, var(--color-background-alt-alpha), var(--color-background-alt) 0.75rem);
}

.cardS--logbook:hover:before,
.cardS--logbook:focus-within:before {
     transform: skewY(var(--skew)) scaleX(1.03);
}

.cardS--logbook:focus-within:after,
.cardS--logbook:hover:after {
    outline-offset: -0.15rem;
}
















@media (min-width: 80ch) {
    .cardS {
        /* --skew:-8deg */
        --skew: 0deg;
        display: flex;
        flex-direction: column;
        padding: 2.5rem 2rem;
        position: relative;
    }
}



/* Apply basic table styles */
table.budget {
    border-collapse: collapse;
    width: 100%;
}

table.budget thead {
background-color: #000000;
}

table.budget.thead tr{
    background-color: #000000;
    }
    

/* Apply border and padding to table cells */
table.budget th.budget {
    text-align: left; /* Align text to the left */
    background-color: var(--color-primary); /* Gray background color */
    padding-top: 12px;
    padding-bottom: 12px;
}

table.budget td.budget {
    border-bottom: 3px solid #000000;
    border-top: 3px solid #000000;
    text-align: left; /* Align text to the left */
    width: auto; /* Let the browser determine the width based on content */
    padding: 5px 15px;
}

/* Apply background color to alternating table rows */
table.budget tr:nth-child(even) {
    background-color: var(--color-secondary);
}

table.budget tr:nth-child(odd) {
    background-color: var(--color-secondary-2);
}



/* Optional: Add a hover effect when hovering over table rows */
table.budget tr:hover {
    background-color: var(--color-on-primary);
}

/* Add rounded border to first and last th elements in the first row */
table.budget tr:first-child th:first-child {
    border-top-left-radius: 15px;
}

table.budget tr:first-child th:last-child {
    border-top-right-radius: 15px;
}

/* Add rounded border to first and last td elements in the last row */
table.budget tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

table.budget tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}