:root {
    --backdrop-bg-color: rgba(15, 4, 31, 0.8);
    --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --rounded-font-family: ui-rounded, "SF Pro Rounded", sf-rounded-fallback, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --page-bg-color: rgba(22, 20, 25);
    --raised-bg-color: #1E003E;
    --fullbleed-bg-color: #240B43;
    --fullbleed-bg-color-rgba: 36, 11, 67;
    --accent-color: #8471FB;
    --link-color: #8471FB;
    --primary-text-color: #D5DCEA;
    --secondary-text-color: #B1B8C9;
    --tertiary-text-color: #D3DCEC;
    --section-hero-gradient: linear-gradient(180deg, rgba(16, 16, 16) 0%, rgba(22, 20, 25) 10%, rgba(22, 20, 25) 90%, rgba(16, 16, 16) 100%)
}

@font-face {
    font-family: sf-rounded-fallback;
    font-weight: 400;
    src: url(/fonts/SF-Pro-Rounded-Regular.otf);
    font-display: swap;
}

@font-face {
    font-family: sf-rounded-fallback;
    font-weight: 600;
    src: url(/fonts/SF-Pro-Rounded-Semibold.otf);
    font-display: swap;
}

.sfrounded {
    font-family: var(--rounded-font-family);
}

* {
    font-family: var(--default-font-family);
    margin: 0;
    padding: 0;
    list-style: none
}

html {
    background-color: var(--page-bg-color);
    color: var(--primary-text-color)
}

a:link,
a:active,
a:visited {
    color: var(--link-color)
}

a:hover {
    color: #b1a7ff
}

.inset-top {
    padding-top: 1rem
}

.inset-top-extra {
    margin-top: 42px !important
}

.secondary {
    color: var(--secondary-text-color);
    font-weight: 500;
}

blockquote {
    color: var(--secondary-text-color);
    font-size: 13px
}

.inset {
    max-width: 80%;
    margin: 0 auto
}

.show-artwork img {
    min-width: 90px;
    margin-right: 24px;
    border-radius: 16px
}

header.navbar {
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center
}

.navigation-container {
    position: sticky;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    z-index: 1000
}

.hosts-intro {
    line-height: 140%
}

.internal-content-wrapper ul li {
    margin-bottom: 12px
}

.internal-content-wrapper ul li:last-child {
    margin-bottom: 0
}

.internal-content-wrapper ul li:before {
    content: "- "
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
    .vibrant-dark {
        background: var(--backdrop-bg-color);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px)
    }
}

.vibrant-dark {
    background: var(--backdrop-bg-color);
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
    .vibrant-dark {
        background: var(--backdrop-bg-color);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px)
    }
}

.vibrant-dark:after {
    content: "-";
    text-indent: -9000em;
    overflow: hidden;
    display: block;
    height: .5pt;
    background-color: rgba(22, 22, 22, .5);
    width: 100%;
    mix-blend-mode: plus-darker
}

div.spacer {
    flex-grow: 1
}

header.navbar a.logo {
    display: block;
    height: 60px
}

header.navbar a.logo img {
    display: block;
    height: 60px
}

header.navbar nav {
    margin-left: 26px
}

header.navbar nav ul {
    display: flex;
    align-items: center
}

header.navbar nav>ul li {
    text-transform: uppercase;
    margin-left: 20px
}

header.navbar nav>ul li a {
    color: #fff;
    text-decoration: none;
    font-family: var(--rounded-font-family);
    font-size: 17px;
    font-weight: 600;
    mix-blend-mode: plus-lighter;
    opacity: .7
}

header.navbar nav>ul li a:hover,
header.navbar nav>ul li a.selected {
    opacity: .9
}

header.navbar nav>ul li a.selected:after {
    display: block;
    content: "-";
    text-indent: -9000em;
    overflow: hidden;
    height: 4px;
    margin-top: 2px;
    margin-bottom: -6px;
    background-color: #fff;
    mix-blend-mode: overlay;
    border-radius: 2px
}

.episode-card {
    background-color: var(--raised-bg-color)
}

.episode-card div.full-bleed-artwork {
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 32%
}

.episode-card div.show-info {
    padding-left: 6px
}

div.show-info .schedule-subtitle {
    padding-left: 6px;
    opacity: .6
}

div.full-bleed-artwork {
    background-color: var(--fullbleed-bg-color);
    position: relative
}

div.full-bleed-artwork-asset {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 74% auto;
    background-position-x: center;
    background-position-y: center;
    z-index: 0;
    mix-blend-mode: lighten;
    position: absolute;
    top: 0;
    left: -22%;
    width: 100%;
    height: 100%;
    pointer-events: none
}

div.full-bleed-artwork-asset:after {
    display: block;
    content: "-";
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(var(--fullbleed-bg-color-rgba), 0), rgba(var(--fullbleed-bg-color-rgba), 0) 40%, rgba(var(--fullbleed-bg-color-rgba), 0.65) 60%, rgba(var(--fullbleed-bg-color-rgba), 1) 90%) !important;
}

h1.primary,
h2.primary,
h3.primary,
h4.primary,
h5.primary,
article.episode-details h2,
.article-body h2,
.internal-page-contents h2 {
    font-family: var(--rounded-font-family);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--accent-color);
    -webkit-backdrop-filter: saturate(200%) brightness(150%) blur(35px);
    backdrop-filter: saturate(200%) brightness(150%) blur(35px);
    border-radius: 22.5px;
    padding: 6px 16px;
    display: inline-block;
    margin-bottom: 24px
}

.episode-card h3 a {
    display: block;
    text-decoration: none;
    color: var(--primary-text-color);
    font-family: var(--rounded-font-family);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px
}

h2.lead, h3.lead {
    font-family: var(--rounded-font-family);
    font-size: 16px;
    font-weight: 600;
    color: #858b98;
    text-transform: uppercase;
    margin-bottom: 10px;
    mix-blend-mode: plus-lighter
}

h2.lead a:link, h2.lead a:visited, h3.lead a:link, h3.lead a:visited {
    color: #858b98;
    text-decoration: none;
}

.hstack {
    display: inline-block;
    display: flex;
    align-items: center
}

.vstack {
    display: inline-block;
    display: flex;
    flex-direction: column
}

.hstack.label {
    margin-right: 16px;
    vertical-align: middle;
    opacity: .7
}

.hstack.label img {
    width: 14px;
    height: auto;
    max-height: 19px;
    filter: contrast(0%) brightness(500%);
    margin-right: 6px
}

.hstack.label {
    font-size: 12px;
    font-weight: 400
}

.episode-card div.episode-info p {
    color: #fff;
    padding: 22px 0;
    opacity: .7;
    mix-blend-mode: plus-lighter;
    line-height: 150%
}

.episode-card.hero .hstack,
.episode-card .hstack.label {
    mix-blend-mode: plus-lighter
}

.episode-card div.episode-details .hstack {
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 130%
}

.episode-card div.episode-details .hstack a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    opacity: .9;
    display: inline-block !important
}

.episode-card div.episode-details .hstack a:hover {
    opacity: 1
}

a.sponsor-badge {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    opacity: .9;
    display: inline-block;
    padding: 2px 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 6px;
    mix-blend-mode: plus-lighter;
    -webkit-backdrop-filter: saturate(130%) blur(35px);
    backdrop-filter: saturate(200%) brightness(150%) blur(35px)
}

footer.site-footer {
    margin-top: 50px;
    font-size: 12px;
    opacity: .7;
    mix-blend-mode: plus-lighter
}

footer.site-footer p {
    margin: 10px 0
}

.episode-card.regular {
    border-radius: 22px;
    padding: 28px
}

.episode-card.regular div.episode-info {
    display: flex;
    flex-direction: column;
    height: 100%
}

.episode-card.regular div.episode-info.artwork-hidden .vstack h2:first-child {
    display: none
}

.episode-card.regular div.episode-info.artwork-hidden .vstack h3 {
    margin: 6px 0
}

div.regular-artwork {
    height: 100%
}

div.regular-artwork>div {
    height: 100%
}

.below-fold {
    margin-top: 36px
}

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 36px
}

.episode-card.regular div.episode-info>.hstack {
    align-items: start
}

a.call-to-action {
    color: #fff;
    display: inline-block;
    font-family: var(--rounded-font-family);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 14px;
    text-transform: uppercase;
    background-repeat: no-repeat;
    filter: invert(55%) sepia(83%) saturate(4100%) hue-rotate(224deg) brightness(102%) contrast(97%);
    opacity: .85
}

a.call-to-action.icon-left {
    padding-left: 23px;
    background-position: left center
}

a.call-to-action.icon-right {
    padding-right: 23px;
    background-position: right center
}

a.call-to-action:hover {
    opacity: 1 !important
}

.below-fold>a.call-to-action {
    margin-top: 32px;
    margin-left: 32px;
    opacity: .6
}

#search-box {
    position: relative
}

#search-box-container>.hstack a {
    margin-right: 22px;
}

#search-box-container>.hstack a:last-child {
    margin-right: 0;
}

#search-box .gigahertz-spinner {
    margin-top: 26px
}

.hidden {
    opacity: 0;
    display: none!important;
    transition: opacity 400ms
}

.hidden.revealed {
    display: block!important;
    opacity: 1
}

#search-results {
    --max-synopsis-lines: 3;
    --max-title-lines: 2;
    --outer-radius: 16px;
    --inner-padding: 8px;
    --box-width: 460px;
    position: absolute;
    top: 40px;
    right: 0;
    width: var(--box-width);
    z-index: 200;
    border-radius: var(--outer-radius);
    padding: var(--inner-padding) 0;
    border: .5px solid rgba(0, 0, 0, .5);
    background-color: rgba(36, 11, 67, .8);
    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .4);
    max-height: 300px;
    overflow-y: scroll;
}

#search-results:after {
    display: none
}

#search-results li {
    --padding: 16px;
    display: block;
    padding: var(--padding);
    margin-top: calc(var(--padding) * -0.5)
}

#search-results li:last-child {
    margin-bottom: 0
}

#search-results li img {
    height: 80px;
    margin-right: 12px;
    border-radius: 10px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .2);
    transition-property: transform, box-shadow;
    transition-duration: 250ms;
    transition-timing-function: ease-out
}

#search-results li a {
    text-decoration: none;
    color: unset
}

#search-results li:hover {
    background-color: rgba(255, 255, 255, .05)
}

#search-results li:hover img {
    transform: scale(1.1);
    box-shadow: 0 0 22px 0 rgba(255, 255, 255, .1)
}

#search-results li h3 {
    font-size: 11px;
    text-transform: uppercase;
    font-family: var(--rounded-font-family);
    opacity: .5;
    mix-blend-mode: plus-lighter;
    margin-bottom: 4px
}

#search-results li h2 {
    font-weight: 400;
    font-size: 15px;
    mix-blend-mode: plus-lighter;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-title-lines);
    line-clamp: var(--max-title-lines);
    -webkit-box-orient: vertical
}

#search-results li.show h2 {
    font-family: var(--rounded-font-family);
    font-weight: 600;
    font-size: 18px
}

#search-results li.show {
    margin-bottom: 20px
}

#search-results li.show:after {
    position: absolute;
    content: " ";
    margin-top: 20px;
    overflow: hidden;
    text-indent: -9000em;
    display: block;
    width: 100%;
    height: .5px;
    background-color: rgba(255, 255, 255, .1);
    mix-blend-mode: plus-lighter
}

#search-results li p {
    line-height: 140%;
    font-size: 12px;
    opacity: .9;
    mix-blend-mode: plus-lighter;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-synopsis-lines);
    line-clamp: var(--max-synopsis-lines);
    -webkit-box-orient: vertical
}

div.gigahertz-spinner {
    --width: 50px;
    --height: 52px;
    text-indent: -9000em;
    overflow: hidden;
    position: relative;
    display: block;
    width: var(--width);
    height: var(--height);
    margin: 16px auto;
    mask-image: url(/images/logo-mask.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    mix-blend-mode: plus-lighter;
    box-shadow: 0 0 5px 0 red
}

div.gigahertz-spinner:after {
    content: "";
    position: absolute;
    width: calc(var(--height) * 1.5);
    height: calc(var(--height) * 1.5);
    left: calc(var(--height) * -0.5);
    top: calc(var(--height) * -0.5);
    z-index: -1;
    background-image: linear-gradient(0deg, #D507FF 10%, #45C1FE 90%);
    background-size: cover;
    transform: rotate(0deg);
    animation: spinner 2s infinite
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

article h1 a {
    display: block;
    color: var(--primary-text-color);
    text-decoration: none;
    font-family: var(--rounded-font-family) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    margin: 22px 0 6px
}

article h2 {
    font-size: 15px !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    margin: 22px 0 16px !important
}

article .article-body {
    padding-top: 22px
}

article h3,
article h4,
article h5,
article h6 {
    margin: 22px 0
}

article p {
    line-height: 150%;
    padding: 8px 0
}

article ul li {
    margin: 10px 0;
    line-height: 150%
}

article ul li:first-child {
    margin-top: 0 !important
}

article ul li:last-child {
    margin-bottom: 0 !important
}

article ul li:before {
    content: "·";
    opacity: .6;
    padding-right: 6px;
    font-weight: bolder
}

article .article-body img {
    display: block;
    max-width: 50%;
    border-radius: 6px;
    margin: 22px 0
}

.article-body {
    line-height: 150%;
}

.episode-links-stack {
    align-items: start;
    padding-top: 32px;
}

.episode-links-stack>* {
    margin-right: 36px;
}

.episode-links-stack>*>h4 {
    margin-top: 0;
    padding-top: 0;
    padding-left: 10px;
}

.show-hero {
    --artwork-size: 256px;
    background-image: var(--section-hero-gradient);
    padding: 50px 0;
    margin-bottom: 100px
}

.show-hero .hstack .vstack {
    padding-top: 6px
}

.show-hero .show-info-main-stack {
    padding-left: 32px
}

.show-hero .hstack .vstack h1 {
    padding-bottom: 6px
}

.show-hero .hstack {
    align-items: start
}

.show-hero h1 a {
    color: var(--accent-color);
    font-family: var(--rounded-font-family);
    text-decoration: none;
    font-weight: 600
}

.show-hero .show-artwork img {
    height: var(--artwork-size);
    width: auto;
    border-radius: 12px;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, .3)
}

.show-hero .show-info {
    text-transform: uppercase
}

.show-hero .label {
    padding: 6px 0;
    color: var(--tertiary-text-color)
}

.show-hero p {
    color: var(--secondary-text-color);
    line-height: 150%;
    padding-top: 12px
}

.person-list a:link,
.person-list a:active,
.person-list a:visited {
    color: var(--primary-text-color);
    text-decoration: none;
    font-weight: 500
}

.person-list a:hover {
    color: var(--accent-color)
}

.podcast-player-container {
    padding: 32px 0 0
}

.podcast-player-container audio {
    width: 50%
}

.podcast-service-links {
    margin-top: 16px
}

.icon-collection-item {
    overflow: hidden;
    text-indent: -9000em;
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    margin-right: 12px
}

input[type=search] {
    border: 1px solid #000;
    padding: 4px 4px 4px 32px;
    border-radius: 8px;
    font-family: var(--default-font-family);
    font-size: 14px;
    outline: none;
    background-image: url(/images/search.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-blend-mode: soft-light
}

input[type=search]:focus {
    box-shadow: 0 0 6px 0 var(--raised-bg-color);
    border-color: var(--fullbleed-bg-color);
    background-color: var(--accent-color)
}

.mobile-only {
    display: none
}

.section-hero {
    background-image: var(--section-hero-gradient);
    padding: 50px 0;
    margin-bottom: 30px
}

.section-hero h1 {
    font-family: var(--rounded-font-family);
    margin-bottom: 22px;
    color: var(--link-color)
}

.section-hero p {
    margin-bottom: 16px;
    line-height: 150%
}

.section-hero p:last-child {
    margin-bottom: 0
}

.show-card {
    padding: 22px;
    margin-bottom: 22px;
    background-color: rgba(255, 255, 255, .03);
    border-radius: 22px
}

.show-card>div>.hstack {
    align-items: top
}

.show-card .vstack>* {
    margin-bottom: 6px
}

.show-card h1 {
    font-size: 28px;
    margin-bottom: 8px !important
}

.show-card h1 a {
    font-family: var(--rounded-font-family);
    text-decoration: none
}

.show-card {
    --artwork-height: 230px
}

.show-card .show-card-artwork img {
    width: var(--artwork-height);
    margin-right: 24px;
    border-radius: 16px
}

.show-card p {
    line-height: 150%
}

.show-card .show-info-main-stack {
    min-height: var(--artwork-height)
}

.image-crop {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%
}

.image-crop img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto
}

.main-person-list {
    --avatar-size: 160px
}

.main-person-list {
    padding-top: 32px;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(var(--avatar-size), 1fr));
    grid-column-gap: 22px;
    grid-row-gap: 48px
}

.person-card {
    text-align: center;
    min-width: var(--avatar-size)
}

.person-card .image-crop {
    border: 6px solid transparent
}

.person-card:hover .image-crop {
    border: 6px solid var(--accent-color)
}

.person-card:hover a:link,
.person-card:hover a:active,
.person-card:hover a:visited,
.person-card:hover a:hover {
    color: var(--accent-color)
}

.person-card .image-crop {
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin: 0 auto 12px
}

.person-card a:link,
.person-card a:active,
.person-card a:visited {
    text-decoration: none;
    color: var(--primary-text-color);
    font-weight: 400
}

.founders-container>.hstack {
    align-items: start
}

.founder-card {
    --avatar-size: 180px
}

.founder-card .founder-avatar {
    width: var(--avatar-size);
    border-radius: 18px;
    margin-right: 22px;
    box-shadow: 0 0 22px rgba(0, 0, 0, .3)
}

.founder-card .hstack.founder-header h4 {
    margin-bottom: 12px
}

.founder-card {
    background-color: rgba(255, 255, 255, .03);
    padding: 22px;
    border-radius: 18px;
    margin-top: calc(var(--avatar-size) /2);
    margin-right: 22px
}

.founder-card:last-child {
    margin-right: 0
}

.founder-card .hstack.founder-header h4 a {
    text-decoration: none;
    color: var(--primary-text-color);
    font-family: var(--rounded-font-family);
    font-size: 24px;
    font-weight: 600
}

.founder-card .hstack.founder-header {
    align-items: end;
    margin-top: calc(var(--avatar-size) /-2)
}

.founder-card .hstack.founder-header .vstack {
    padding-bottom: 22px
}

.founder-card .founder-bio {
    line-height: 151%;
    padding-top: 12px;
    color: var(--secondary-text-color)
}

.mobile-menu-link,
.search-link {
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9000em;
    overflow: hidden;
    width: 18px;
    height: 18px;
    opacity: .7;
    mix-blend-mode: plus-lighter
}

.search-link {
    background-image: url(/images/search.svg);
}

.mobile-menu-link {
    background-image: url(/images/ellipsis.svg);
}

.search-link:hover,
.mobile-menu-link:hover {
    opacity: 1
}

.podcast-player-wrapper {
    --timeline-area-increase: 12px;
    --button-size: 30px;
    --timeline-height: 8px;
    --inset: 22px;
    display: flex;
    padding: var(--inset);
}

.podcast-player-wrapper .title-container {
    display: flex;
    gap: 16px;
}

.podcast-player-wrapper.external-embed .title-container {
    justify-content: center;
}

.podcast-player-wrapper h1,
.podcast-player-wrapper h2,
.podcast-player-wrapper h3,
.podcast-player-wrapper h4,
.podcast-player-wrapper h5,
.podcast-player-wrapper h6 {
    margin: unset;
    padding: unset;
}

.podcast-player-wrapper .episode-title {
    font-weight: 500;
    font-size: 15px;
}

.podcast-player-wrapper .title-chapter-stack {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.podcast-player-wrapper .title-chapter-stack .episode-title {
    margin: 0;
}

.podcast-player-wrapper .title-chapter-stack .episode-chapter {
    padding: 0;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.5;
    min-height: 14px;
}

.podcast-player-wrapper.internal-embed .title-chapter-stack .episode-chapter {
    margin: -4px 0 0 0;
}

.podcast-player-wrapper.external-embed .title-chapter-stack .episode-chapter {
    margin: 2px 0 0 0;
}

.podcast-player-wrapper .episode-title a {
    text-decoration: none;
}

.podcast-player-wrapper .action-buttons {
    --button-size: 24px;
    --button-bg-color: rgba(255, 255, 255, 0.1);
    display: inline-flex;
    gap: 8px;
}

.podcast-player-wrapper .action-buttons a:link,
.podcast-player-wrapper .action-buttons a:active,
.podcast-player-wrapper .action-buttons a:visited {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    width: var(--button-size);
    height: var(--button-size);
    border-radius: calc(var(--button-size) * 0.5);
    background: var(--button-bg-color);
    color: rgba(255, 255, 255, 0.7);
}

.podcast-player-wrapper .action-buttons a.share-button, .podcast-player-wrapper .action-buttons a.transcription-button {
    text-indent: -9000em;
    overflow: hidden;
    position: relative;
}

.podcast-player-wrapper .action-buttons a.share-button:after, .podcast-player-wrapper .action-buttons a.transcription-button:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "-";
    display: block;
    width: var(--button-size);
    height: var(--button-size);
    opacity: 0.8;
}

.podcast-player-wrapper .action-buttons a.share-button:after {
    background: url('/images/share.svg') no-repeat center;
    background-size: 11px 15px;
}

.podcast-player-wrapper .action-buttons a.transcription-button:after {
    background: url('/images/transcription.svg') no-repeat center;
    background-size: 11px 15px;
}

.podcast-player-wrapper .action-buttons a.transcription-button {
    display: none;
    transition: background-color 0.4s;
}

.podcast-player-wrapper .action-buttons a.transcription-button.visible {
    display: inline-block;
}

.podcast-player-wrapper .action-buttons a.transcription-button.visible.active {
    background-color: var(--accent-color);
}

.podcast-player-wrapper .action-buttons a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.podcast-player-wrapper .action-buttons a.share-button:hover:after {
    opacity: 0.9;
}

.playback-controls {
    width: 100%;
}

.transport-buttons {
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 2vh;
}

.podcast-player-wrapper.internal-embed .transport-buttons.floating-ui,
.podcast-player-wrapper.external-embed .transport-buttons.floating-ui {
    display: none;
}

.player-button {
    display: block;
    width: var(--button-size);
    height: var(--button-size);
    text-indent: -9000em;
    overflow: hidden;
    background-image: none;
    background-color: var(--link-color);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.player-button.disabled,
.timeline-gesture.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
}

.player-button:last-child {
    flex-grow: 0;
}

.player-button.asset-play-freestanding {
    -webkit-mask-image: url("/images/play-freestanding.svg#play-freestanding");
    mask-image: url("/images/play-freestanding.svg#play-freestanding");
}

.player-button.asset-pause {
    -webkit-mask-image: url("/images/pause.svg#pause");
    mask-image: url("/images/pause.svg#pause");
}

.player-button.asset-back30 {
    -webkit-mask-image: url("/images/back30.svg#back30");
    mask-image: url("/images/back30.svg#back30");
}

.player-button.asset-forward30 {
    -webkit-mask-image: url("/images/forward30.svg#forward30");
    mask-image: url("/images/forward30.svg#forward30");
}

.timeline-container {
    display: flex;
    flex-direction: column;
}

.timeline-container .timeline-gesture {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: var(--timeline-area-increase);
    margin: calc(var(--timeline-area-increase) * -1);
    z-index: 1;
}

.timeline-container .timeline {
    height: var(--timeline-height);
    background-color: rgba(255, 255, 255, 0.1);
    flex-grow: 1;
    border-radius: calc(var(--timeline-height) * 0.5);
    position: relative;
    mix-blend-mode: plus-lighter;
}

.timeline-container .timestamps {
    display: inline-flex;
    padding-top: 2px;
}

.timeline-container span {
    font-size: 11px;
    color: var(--secondary-text-color);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.timeline-container .timeline .progress,
.timeline-container .timeline .progress-preview {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--timeline-height);
    background-color: var(--accent-color);
    flex-grow: 1;
    border-radius: calc(var(--timeline-height) * 0.5);
    opacity: 0.85;
    mix-blend-mode: plus-darker;
    z-index: 2;
}

.timeline-container .timeline .progress-preview {
    color: white;
    opacity: 0.4;
    mix-blend-mode: plus-lighter;
    z-index: 3;
}

.podcast-player-wrapper.internal-embed {
    --inset: 16px;
    --radius: 22px;
    border-radius: var(--radius);
    display: inline-flex;
    position: relative;
    margin: 22px 0 0 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.1);
}

.podcast-player-wrapper.internal-embed a {
    color: rgba(255, 255, 255, 0.7);
}

.podcast-player-wrapper {
    overflow: hidden;
}

.podcast-player-wrapper:after {
    content: "-";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: var(--radius);
    text-indent: -9000em;
    overflow: hidden;
    z-index: -1;
    left: 0;
    top: 0;
    opacity: 0.05;
    mix-blend-mode: plus-lighter;
}

.podcast-player-wrapper.internal-embed .podcast-player-ui-artwork img {
    max-width: unset;
    height: 120px;
    margin: 0 16px 0 0;
    border-radius: calc(var(--radius) * 0.6);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

.podcast-player-wrapper.internal-embed h3 {
    margin: 0 0 22px 0;
    font-weight: normal;
    min-width: 200px;
}

.podcast-player-wrapper.internal-embed .timeline-container .timestamps {
    padding-top: 0;
    margin: -3px 0 0 0;
}

.podcast-player-wrapper.internal-embed .timeline-container .timestamps span {
    font-size: 10px;
}

.podcast-player-wrapper.internal-embed .transport-buttons {
    margin: 6px 0 0 0;
    padding: 0;
}

/* Disable share and chapters in external embed for now */

.podcast-player-wrapper.external-embed a.share-button,
.podcast-player-wrapper.external-embed .title-container h4 {
    display: none !important;
}

.context-menu {
    --item-h-padding: 8px;
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 4px;
    background-color: rgba(30, 30, 30, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 8px;
    border: 0.5px solid rgba(200, 200, 200, 0.4);
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.7);
    font-size: 13px;
    font-weight: 400;
}

.context-menu.visible {
    display: table;
}

.context-menu ul {
    margin: 0;
    padding: 0;
}

.context-menu ul li:before {
    content: none;
}

.context-menu ul li {
    border-radius: 5px;
    padding: 2px var(--item-h-padding);
    margin: 0 0 6px 0;
    cursor: default;
    mix-blend-mode: plus-lighter;
    opacity: 0.95;
}

.context-menu ul li:last-child {
    margin-bottom: 0;
}

.context-menu ul li.selected,
.context-menu ul li:hover {
    background-color: var(--accent-color);
    box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.1);
}

.context-menu ul li.pressed,
.context-menu ul li.selected.pressed {
    background-color: rgba(0, 0, 0, 0);
}

.context-menu ul li.divider {
    pointer-events: none;
}

.context-menu hr {
    border: none;
    height: 0.5px;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
    margin: 0 auto;
    mix-blend-mode: plus-lighter;
}

.podcast-player-wrapper.internal-embed .podcast-player-artwork-ui {
    position: relative;
}

.podcast-player-wrapper.internal-embed .transport-buttons.floating-ui {
    display: none;
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    padding: var(--inset);
    background: rgba(30, 30, 30, 0.7);
    border-radius: 16px;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    gap: 0;
}

.podcast-player-wrapper.internal-embed .transport-buttons.floating-ui a {
    background-color: white;
    opacity: 0.8;
    mix-blend-mode: plus-lighter;
    margin: 0 42px 0 0;
    padding: 0;
}

.transcript-wrapper {
    position: fixed;
    bottom:0;
    right:0;
    z-index: 9999;
    background: rgba(10, 10, 10, 0.3);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid rgba(100, 100, 100, 0.3);
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    margin: 1rem;
    overflow: hidden;
    padding-right: 2px;
    min-width: 40%;
    max-width: 54%;
}

/* Wrapper show/hide transition */

.transcript-wrapper {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s, transform 0.5s;
}

.transcript-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

.transcript-scroller {
    padding: 1rem;
    overflow: scroll;
    max-height: 33vh;
    font-size: 1rem;
    line-height: 2rem;
    color: #333;
    user-select: text;
}

.transcript-wrapper .transcript-list li a:link,
.transcript-wrapper .transcript-list li a:visited {
    color: white !important;
    text-decoration: none;
    opacity: 0.5;
}

.transcript-wrapper .transcript-list li a:hover {
    opacity: 0.7;
}

.transcript-wrapper .transcript-list li.current a {
    opacity: 1.0;
}

.transcript-wrapper .transcript-list li.current a {
    transition: opacity 0.5s;
}

.transcript-search-input {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    font-size:16px!important;
}

@media screen and (max-width: 800px) {
    .transcript-search-input {
        position:fixed;
        bottom:24px;
        left:24px;
        right:24px;
        top:inherit;
        font-size:20px!important;
        padding:12px 12px 12px 28px!important;
    }

    .transcript-scroller {
        max-height:48vh;
    }

    .transcript-wrapper .transcript-list.searching {
        min-height: 48vh;
    }

    .transcript-wrapper {
        max-width: 100% !important;
    }
}

.transcript-wrapper .transcript-list.searching {
    min-height: 33vh;
}

.transcript-wrapper .transcript-list.searching li {
    display: none;
}

.transcript-wrapper .transcript-list.searching li.search-match {
    display: block;
    opacity: 0.7;
}