* {
    box-sizing: border-box
}

:root {
    --blue: #007bff;
    --blue-light: #007bff40;
    --onyx1: #393E41;
    --bgcolor1: #eff2f5;
    --bgcolor2: #fff;
    --bordercolor: #b8b8b8
}

body,html {
    margin: 0;
    --fs--2: clamp(0.7813rem, 0.7618rem + 0.0519vw, 0.8442rem);
    --fs--1: clamp(0.9375rem, 0.8794rem + 0.1549vw, 1.1253rem);
    --fs-0: clamp(1.125rem, 1.009rem + 0.3093vw, 1.5rem);
    --fs-1: clamp(1.35rem, 1.1491rem + 0.5357vw, 1.9995rem);
    --fs-2: clamp(1.62rem, 1.2967rem + 0.8621vw, 2.6653rem);
    --fs-3: clamp(1.944rem, 1.4464rem + 1.3269vw, 3.5529rem);
    --fs-4: clamp(2.3328rem, 1.5895rem + 1.982vw, 4.736rem);
    --fs-5: clamp(2.7994rem, 1.7126rem + 2.8979vw, 6.3131rem)
}

@media (prefers-color-scheme: dark) {
    :root {
        --blue: #3797ff;
        --blue-light: #007bff40;
        --onyx1: #cee5ff;
        --bgcolor1: #000;
        --bgcolor2: #141626;
        --bordercolor: #5b6f9c
    }
}

body.light-mode {
    --blue: #007bff;
    --blue-light: #007bff40;
    --onyx1: #393E41;
    --bgcolor1: #eff2f5;
    --bgcolor2: #fff;
    --bordercolor: #b8b8b8
}

body.dark-mode {
    --blue: #3797ff;
    --blue-light: #007bff40;
    --onyx1: #cee5ff;
    --bgcolor1: #000;
    --bgcolor2: #141626;
    --bordercolor: #5b6f9c
}

body {
    width: 100%;
    background-color: var(--bgcolor1);
    color: var(--onyx1);
    font-family: "Source Serif 4",serif;
    padding-bottom: 2rem;
    overflow-x: hidden;
    line-height: 1.6;
    font-size: var(--fs-0)
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Fraunces",serif;
    margin-top: 1em;
    margin-bottom: .5em;
    font-weight: 600;
    scroll-margin: 4em 0;
    line-height: 1.25
}

h1 {
    font-family: "Fraunces",serif;
    font-size: var(--fs-4)
}

h2 {
    font-family: "Fraunces",serif;
    font-size: var(--fs-2)
}

a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: var(--bordercolor);
    text-underline-offset: .3em
}

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

.nav-sticky {
    position: sticky;
    top: 0;
    color: var(--onyx1);
    padding: 1em 0;
    z-index: 10000
}

.navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: max-content;
    gap: 1.5em;
    padding: .25em 2em;
    margin: 0 auto;
    background: var(--bgcolor2);
    border-radius: 1em;
    box-shadow: 0 0 2em var(--blue-light)
}

.navigation .navigation-item {
    display: flex;
    align-items: center;
    gap: .25em;
    text-decoration: none;
    border-bottom: 2px solid rgba(0,0,0,0);
    height: 100%
}

.navigation .nav-button {
    display: none
}

@media (max-width: 900px) {
    .navigation {
        justify-content:center
    }

    .navigation .nav-button {
        display: flex;
        text-decoration: none;
        align-items: center;
        gap: .25em
    }

    .navigation .navigation-item {
        display: none
    }

    .navigation.responsive {
        flex-direction: column;
        width: calc(100% - 2*clamp(1rem,12.24vi - 3.59rem,16rem));
        max-width: 100%;
        gap: .5em;
        padding: .5em 1em
    }

    .navigation.responsive .navigation-item {
        display: flex
    }
}

.navigation a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px
}

.navigation .navigation-item:first-child {
    display: none
}

.navigation svg {
    width: 2em;
    height: 2em
}

.navigation #theme-button {
    display: flex;
    height: 100%;
    align-items: center
}

.navigation #theme-button svg {
    width: 1em;
    height: 1em
}

.navigation #theme-button.light-mode-button svg.dark-mode-icon {
    display: none
}

.navigation #theme-button.dark-mode-button svg.light-mode-icon {
    display: none
}

a i.fa {
    font-size: var(--fs--1)
}

.content {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 80vh;
    padding: calc(clamp(1rem,12.24vi - 3.59rem,16rem)/2 + 1em) clamp(1rem,12.24vi - 3.59rem,16rem) 4em
}

.content .post-header {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 0.5em;
    width: 35em;
    max-width: 100%
}

.content .post-header h1 {
    font-size: var(--fs-4);
    margin-bottom: 0;
    line-height: 1.33
}

.content .post-header .post_meta {
    display: flex;
    flex-direction: row;
    gap: 1em;
    flex-wrap: wrap;
    font-size: var(--fs--1)
}

.content .post-header .post_meta .post__tag {
    display: flex;
    align-items: center;
    gap: .5em 1em;
    flex-wrap: wrap;
    font-size: var(--fs-0)
}

.content .split-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    max-width: 35em;
    flex-wrap: wrap;
    margin-bottom: 2em
}

.content .split-header a {
    color: var(--onyx1);
    font-size: var(--fs-1)
}

.content .split-header a:hover {
    color: var(--blue)
}

.content .with-sidebar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    width: 100%
}

.content .with-sidebar .sidebar {
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    font-size: var(--fs-1);
    top: 6em;
    gap: .5em;
    min-width: 8em;
    width: 100%;
    max-width: max-content
}

@media (max-width: 900px) {
    .content .with-sidebar .sidebar {
        position:relative;
        top: 0
    }
}

.content .with-sidebar .sidebar .all-tags {
    font-size: var(--fs-0)
}

ul.table-of-contents {
    font-size: var(--fs-0);
    width: 100%;
    margin: 0 0 2em
}

@keyframes expandbutton {
    from {
        width: 0
    }

    to {
        width: 6em
    }
}

.navigation-item#scroll-to-toc {
    display: block;
    width: 0em;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 -1em;
    transition: width .2s ease-in-out,margin .2s ease-in-out
}

.navigation-item#scroll-to-toc.visible {
    width: 5em;
    margin: 0 -1em 0 0
}

.navigation-item#scroll-to-toc.hidden {
    width: 0em
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.post-row {
    display: flex;
    flex-direction: row;
    padding: 0.5em 0;
    gap: 1.5em;
}

.post-row>div {
    display: flex;
    flex-direction: column;
    gap: .5em
}

.post-row>div .post-title {
    font-size: var(--fs-2);
    line-height: 1.25
}

.post-row>div .post-author {
    font-size: var(--fs-1);
    color: var(--onyx1)
}

.post-row>div p {
    margin: 0
}

.post-row img {
    max-width: 8em;
    width: auto
}

@media (max-width: 480px) {
    .post-row {
        flex-direction:column;
        gap: 0em;
        background: var(--bgcolor2);
        box-shadow: 0 0 2em var(--blue-light);
        padding: 0;
        border-radius: 1em;
        overflow: hidden
    }

    .post-row>div {
        width: 100%;
        max-width: 100%
    }

    .post-row>div .post-title {
        font-size: var(--fs-1)
    }

    .post-row>div .post-author {
        font-size: var(--fs--1)
    }

    .post-row>div .post-description {
        font-size: var(--fs--1);
        line-height: 1.5
    }

    .post-row .post-row-content {
        padding: 1em
    }

    .post-row img {
        max-width: 100%;
        width: 100%
    }
}

.post-title {
    font-family: "Fraunces",serif;
    line-height: 90%
}

.post-title a {
    text-decoration-line: none
}

.post-title a:hover {
    color: var(--blue)
}

.post-title-text {
    font-size: 1.1em
}

.post-metadata {
    display: flex;
    flex-direction: row;
    gap: 1em;
    font-size: var(--fs-0)
}

.post-date {
    flex-shrink: 0
}

.post-tags {
    display: flex;
    align-items: center;
    gap: 0em 1em;
    flex-wrap: wrap
}

.hero {
    padding-block:2em;padding-inline:2em 3em;display: flex;
    align-items: center;
    gap: 2em;
    border-radius: 1.5em;
    margin-bottom: 3em;
    width: 100%;
    max-width: 52.5em;
    background: var(--bgcolor2);
    box-shadow: 0 0 2em var(--blue-light)
}

.hero h1 {
    color: var(--blue);
    margin-block-start:0;font-size: var(--fs-4);
    font-weight: 600;
    line-height: 1.25
}

.hero .subtitle {
    font-size: var(--fs-2);
    font-weight: 400;
    margin: 0
}

.hero img {
    border-radius: 1em;
    max-height: calc(var(--fs-3)*8);
    width: auto
}

@media (max-width: 900px) {
    .hero {
        flex-direction:column;
        gap: 1em;
        align-items: center;
        padding: 2em 1em;
        width: 100%;
        max-width: 100%
    }

    .hero div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .hero h1 {
        font-size: var(--fs-3)
    }

    .hero .subtitle {
        font-size: var(--fs-1)
    }

    .hero img {
        max-width: calc(var(--fs-3)*6)
    }
}

.section-content {
    width: 35em;
    max-width: 100%
}

.section-content code {
    padding-left: 5px;
    padding-right: 5px
}

.section-content pre {
    padding: 1em;
    line-height: 1.4em;
    overflow-x: scroll;
    overflow-y: scroll;
    max-height: 500px;
    border-radius: 1em;
    background-color: #141626 !important
}

.section-content li a {
    line-height: 1.8em
}

.section-content blockquote {
    font-style: italic;
    border-left: .2em solid var(--blue);
    padding-left: 1.5em;
    background: var(--bgcolor2);
    margin: 0;
    margin-top: .5em;
    padding: .5em 2em;
    border-radius: 1em
}

@media (max-width: 900px) {
    .section-content blockquote {
        padding:.5em 1em
    }
}

@media only screen and (max-width: 480px) {
    .section-content img {
        width:100%
    }
}

.section-content table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    background: var(--bgcolor2);
    border-radius: .5em;
    margin: 1em 0
}

.section-content table th {
    font-weight: 600;
    padding: .25em .5em;
    border-right: 1px solid var(--bordercolor);
    border-bottom: 2px solid var(--onyx1)
}

.section-content table th:last-child {
    border-right: none
}

.section-content table td {
    border-bottom: 1px solid var(--bordercolor);
    border-right: 1px solid var(--bordercolor);
    padding: .25em .5em
}

.section-content table td:last-child {
    border-right: none
}

.section-content table tr:last-child td {
    border-bottom: none
}

.image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
    margin-top: 2em;
}

.image-container img {
    max-width: 100%
}

.image-container.wide {
    width: 100%;
}

.video-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2em
}

.video-container img {
    width: 100%;
    max-width: 100%
}

.video-container.wide {
    margin-left: calc(-20vw + 20%);
    margin-right: calc(-20vw + 20%)
}

.avatar {
    border-radius: 50%
}

.social-links {
    display: flex;
    justify-content: center;
    flex-direction: row
}

.social-links a {
    margin: 10px
}

.pagination-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2em 0 0;
    font-size: var(--fs-1)
}

.related-posts {
    text-align: center
}

.related-posts h2 {
    margin: 0.5em 0 0.5em
}

.related-posts ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0;
    padding: 0;
    max-width: 100%
}

.related-posts ul li {
    list-style: none
}

.related-posts ul li a {
    display: flex;
    flex-direction: column;
    max-width: 18em;
    border-radius: 1em;
    overflow: hidden;
    background: var(--bgcolor2);
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0);
    transition: border-color .2s ease-in-out
}

.related-posts ul li a:hover {
    border-color: var(--blue)
}

.related-posts ul li a img {
    max-width: 100%;
    width: 100%
}

.related-posts ul li a .related-post-title {
    text-align: left;
    font-size: var(--fs-1);
    padding: 1rem 2rem 1rem
}

.related-posts ul li a p {
    margin: 0;
    text-align: left;
    font-size: var(--fs--1);
    padding: 0 2rem 2rem;
    color: var(--onyx1)
}

footer {
    display: flex;
    justify-content: space-around;
    gap: 1em;
    margin: 1em;
    background: var(--bgcolor2);
    padding: max(clamp(1rem,12.24vi - 3.59rem,16rem)/2,2em) clamp(1rem,12.24vi - 3.59rem,16rem);
    border-radius: 1em;
    box-shadow: 0 0 2em var(--blue-light);
    font-size: .9em
}

footer svg {
    width: 4em;
    height: 4em;
    color: var(--blue)
}

footer .footer-content {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: wrap;
    gap: 1em
}

footer .footer-content .link-list {
    display: flex;
    flex-direction: column;
    width: max-content;
    gap: .5em
}

footer .footer-content .link-list a {
    color: var(--onyx1);
    text-decoration: underline;
    text-decoration-color: var(--bordercolor);
    text-underline-offset: .3em
}

footer .footer-content .link-list a:hover {
    text-decoration: 2px underline;
    text-decoration-color: var(--blue)
}

.ml-embedded {
    margin: 1em 0 1em
}

.reading_lists {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    width: 100%;
    background: var(--bgcolor2);
    padding: 2em 1em 3em;
    margin: 3em 0;
    border-radius: 2em
}

.reading_lists h2 {
    margin: 0;
    font-size: var(--fs-3);
    font-weight: 600
}

.reading_lists .nav {
    display: flex;
    flex-direction: column;
    gap: .25em;
    padding: 2em 0
}

.reading_lists .nav div {
    padding: .5em 1.5em;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 2em
}

.reading_lists .nav :hover {
    border-color: var(--bordercolor)
}

.reading_lists .nav .active {
    font-weight: 600;
    border-color: var(--blue);
    background: var(--bgcolor1)
}

.reading_lists>div {
    display: flex;
    flex-direction: row;
    gap: 4em;
    max-width: 100%
}

.reading_lists .listdata {
    padding: 2em;
    background: var(--bgcolor1);
    width: 35em;
    max-width: 100%;
    border-radius: 1em
}

.reading_lists ul {
    font-size: var(--fs-1);
    margin: 0;
    padding: 0;
    padding-left: 1.5em;
    line-height: 1.25;
}

.reading_lists ul li {
    margin: .5em 0
}

.reading_lists ul li::marker {
    color: var(--blue)
}

.reading_lists ul a {
    color: var(--onyx1)
}

.reading_lists ul li a {
    line-height: 1.25; /* Or 1.3, or whatever looks right. Restore old behavior */
}

@media (max-width: 900px) {
    .reading_lists {
        padding:1em
    }

    .reading_lists .nav {
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5em
    }

    .reading_lists .nav div {
        padding: .25em 1em
    }

    .reading_lists>div {
        flex-direction: column;
        gap: 1em
    }
}

.taxonomies__items {
    display: flex;
    flex-direction: row;
    gap: 1em;
    flex-wrap: wrap;
    margin-top: 1em
}

.taxonomies__items a {
    color: var(--onyx1);
    text-decoration: none;
    background: var(--bgcolor2);
    padding: .5em 1em;
    border-radius: 1em;
    border: 1px solid var(--blue)
}

.taxonomies__items a .hashtag {
    color: var(--blue)
}

.taxonomies__items a:hover {
    color: var(--blue)
}

.back-pattern {
    z-index: -1;
    position: absolute;
    top: 0;
    height: 40vh;
    width: 100vw
}

.back-pattern .pattern-fill {
    fill: var(--blue-light)
}

.back-pattern div.gradient {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--bgcolor1) 0%, rgba(0,0,0,0) 100%)
}

.search-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em
}

.search-wrapper .search-input-wrapper {
    position: relative;
    width: 100%;
    border-radius: 2em;
}

.search-wrapper .search-input-wrapper i.fa-search {
    color: var(--bordercolor);
    flex-shrink: 0;
}

.search-wrapper .search-input-wrapper input#search {
    width: 100%;
    color: var(--onyx1);
    font-size: var(--fs-0);
    font-family: "Source Serif 4",serif;
    margin: 0;
    border: 1px solid var(--blue);
    background: var(--bgcolor2);
    border-radius: 2em;
    padding: .5em 2.5em .5em 0.75em;
    box-sizing: border-box;
}

.search-wrapper .search-input-wrapper input#search:focus {
    outline: none;
}

.search-wrapper .search-input-wrapper:focus-within {
    box-shadow: 0 0 1em var(--blue);
}

.search-wrapper .search-input-wrapper:focus-within input#search {
    border-color: var(--blue);
}

.search-wrapper .search-input-wrapper input#search::placeholder {
    color: var(--onyx1)
}

.search-wrapper .search-input-wrapper input#search::-webkit-search-cancel-button {
    display: none
}

.search-wrapper .search-input-wrapper button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--onyx1);
    z-index: 10;
    line-height: 0;
}

.search-wrapper .search-input-wrapper button:hover,
.search-wrapper .search-input-wrapper button:focus {
    color: var(--blue);
    outline: none;
}

.search-wrapper .search-input-wrapper button i.fa-search {
    font-size: var(--fs-0);
    display: block;
    margin-right: 0.2em;
}

.search-wrapper .search-results-wrapper {
    min-height: 80vh
}

.search-wrapper ul.search-results__items {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1em
}

.search-wrapper ul.search-results__items li {
    list-style: none
}

.search-wrapper ul.search-results__items li a {
    display: flex;
    flex-direction: column;
    gap: .25em;
    background: var(--bgcolor2);
    padding: 1em;
    border-radius: 1em;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0)
}

.search-wrapper ul.search-results__items li a .res-title {
    font-size: var(--fs-1)
}

.search-wrapper ul.search-results__items li a .res-teaser {
    font-size: var(--fs-0);
    color: var(--onyx1)
}

.search-wrapper ul.search-results__items li a:hover,.search-wrapper ul.search-results__items li a:focus {
    box-shadow: 0 0 1em var(--blue);
    border-color: var(--blue);
    outline: none
}

.search-wrapper ul.search-results__items li b {
    color: var(--blue)
}

/* Custom Audio Player Styles */
.custom-audio-player-scope {
  width: 100%;
  margin-bottom: 1em; /* Add some space below the player */
}

.custom-audio-player-scope *,
.custom-audio-player-scope *::before,
.custom-audio-player-scope *::after {
  box-sizing: border-box;
}

.custom-audio-player-scope p,
.custom-audio-player-scope h1,
.custom-audio-player-scope h2,
.custom-audio-player-scope h3,
.custom-audio-player-scope h4,
.custom-audio-player-scope h5,
.custom-audio-player-scope h6 {
  overflow-wrap: break-word;
  margin: 0; /* Reset margins for elements within the player */
}

.custom-audio-player-scope p {
  text-wrap: pretty;
}
.custom-audio-player-scope h1,
.custom-audio-player-scope h2,
.custom-audio-player-scope h3,
.custom-audio-player-scope h4,
.custom-audio-player-scope h5,
.custom-audio-player-scope h6 {
  text-wrap: balance;
}


.custom-audio-player-container {
  position: relative;
  --custom-audio-timeline-bg: rgba(0, 0, 0, 0.1);
  --custom-audio-timeline-fg: #e4621d80;
  --custom-audio-primary: #e4631d;
  --custom-audio-bg: #4f3327;
  --custom-audio-text: #ffffff;
  --custom-audio-light: #ca8b78;
  width: 100%;
  max-width: 800px; /* Or use a different max-width if you prefer */
  margin-left: auto; /* Center the player if it's narrower than its container */
  margin-right: auto;
  box-shadow: inset 0 0 0 1px #00000020;
  border-radius: 1.5rem;
  padding: 0.75rem 1.5rem; /* MODIFIED: Increased left/right padding */
  color: var(--custom-audio-text);
  background: var(--custom-audio-bg);
  font-family: sans-serif; /* Explicitly set font for player */
  font-size: 1rem; /* Set a base font size for the player */
  line-height: 1.5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-audio-player-header {
  display: flex;
  flex-direction: column;
  min-height: 1px; /* Ensure the header area doesn't collapse entirely if empty */
}

/* If you have a website photo, you'd add its styles here, e.g.:
.custom-audio-website-photo {
  grid-area: a;
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 1rem;
  object-fit: cover;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .custom-audio-website-photo {
    width: 160px;
    height: 160px;
  }
}
@media (max-width: 600px) {
  .custom-audio-website-photo {
    width: 30vw;
    height: 30vw;
  }
}
@media (max-width: 400px) {
  .custom-audio-website-photo {
    width: 100%;
    height: 100%;
  }
}
*/

.custom-audio-speed-select {
  background-color: transparent;
  border: 1px solid var(--custom-audio-light);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8em;
  width: auto; /* Let browser determine width */
  min-width: 7ch; /* Ensure enough space for "1.25x" */
  text-align: center;
  cursor: pointer;
  appearance: none;
  color: var(--custom-audio-light);
}

.custom-audio-speed-select-option {
  background-color: var(--custom-audio-bg); /* For dropdown in dark mode */
  color: var(--custom-audio-text);
}

.custom-audio-player-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Was: width: calc(32px + 2 * 24px + 2 * 6px + 6 * 0.25rem); No longer needed */
}

.custom-audio-player-controls button {
  padding: 0;
  flex-shrink: 0;
  background: none;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.custom-audio-play-pause-btn {
  color: var(--custom-audio-primary);
}
.custom-audio-play-pause-btn svg {
    width: 2rem;
    height: 2rem;
}

.custom-audio-play-pause-btn:hover,
.custom-audio-play-pause-btn:active,
.custom-audio-play-pause-btn:focus {
  color: var(--custom-audio-light);
}

.custom-audio-skip-btn svg {
  color: var(--custom-audio-light);
  width: 1.5rem;
  height: 1.5rem;
}

.custom-audio-skip-btn:hover svg,
.custom-audio-skip-btn:active svg,
.custom-audio-skip-btn:focus svg {
  color: var(--custom-audio-primary);
}

.custom-audio-player-controls-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

@media (max-width: 670px) {
  .custom-audio-player-controls-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    width: 100%;
  }

  /* Progress container - first row, spans full width */
  .custom-audio-progress-container {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    display: flex;
    align-items: center;
  }

  /* Create a wrapper for the second row controls */
  .custom-audio-speed-select {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    z-index: 1;
  }

  .custom-audio-player-controls {
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    z-index: 1;
  }

  .custom-audio-volume-container {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
    z-index: 1;
  }
}

.custom-audio-timeline {
  flex: 1;
  appearance: none;
  -webkit-appearance: none; /* Safari */
  height: 4px;
  background: var(--custom-audio-timeline-bg); /* Fallback for browsers not supporting linear-gradient on track */
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  width: 100%;
  min-width: 100px;
}

.custom-audio-time-display {
  font-size: 0.9em;
  width: 5ch;
  text-align: center;
  flex-shrink: 0;
  color: var(--custom-audio-text);
}

.custom-audio-progress-container {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
}

/* Track styling */
.custom-audio-timeline::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--custom-audio-timeline-fg) 0%,
    var(--custom-audio-timeline-fg) var(--progress, 0%), /* Default progress to 0% */
    var(--custom-audio-timeline-bg) var(--progress, 0%),
    var(--custom-audio-timeline-bg) 100%
  );
  border-radius: 12px;
  height: 4px;
}

.custom-audio-timeline::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--custom-audio-timeline-fg) 0%,
    var(--custom-audio-timeline-fg) var(--progress, 0%),
    var(--custom-audio-timeline-bg) var(--progress, 0%),
    var(--custom-audio-timeline-bg) 100%
  );
  border-radius: 12px;
  height: 4px;
  border: none; /* FF adds a border by default */
}

/* Thumb styling */
.custom-audio-timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--custom-audio-primary);
  border: 2px solid var(--custom-audio-bg);
  border-radius: 50%;
  margin-top: -6px; /* (track height - thumb height) / 2 - border */
}

.custom-audio-timeline::-moz-range-thumb {
  width: 12px; /* Adjusted for consistency as FF thumb is smaller by default */
  height: 12px;
  background: var(--custom-audio-primary);
  border: 2px solid var(--custom-audio-bg);
  border-radius: 50%;
  cursor: pointer;
}

.custom-audio-timeline:focus::-webkit-slider-thumb {
  border: 2px solid var(--custom-audio-light);
  background: var(--custom-audio-primary);
}

.custom-audio-timeline:focus::-moz-range-thumb {
  border: 2px solid var(--custom-audio-light);
  background: var(--custom-audio-primary);
}

.custom-audio-volume-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Removed padding and margin adjustments as they might not be needed with flex alignment */
}

.custom-audio-volume-btn {
  background: none;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--custom-audio-light);
  padding: 0; /* remove any default padding */
}

.custom-audio-volume-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

.custom-audio-volume-slider {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem); /* Position above the button with a small gap */
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center; /* Rotate around its center */
  width: 100px;
  padding: 6px;
  background: var(--custom-audio-bg);
  border-radius: 8px;
  display: none; /* Hidden by default */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 10; /* Ensure it's above other elements */
}

.custom-audio-volume-container:hover .custom-audio-volume-slider,
.custom-audio-volume-container:focus-within .custom-audio-volume-slider {
  display: block;
}

/* Keep slider visible if it or its children have focus (e.g., for keyboard navigation) */
.custom-audio-volume-slider:focus-within {
    display: block;
}

.custom-audio-volume-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 12px;
  background: var(--custom-audio-timeline-bg);
  outline: none;
  --volume-progress: 100%; /* JS will update this */
}

.custom-audio-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--custom-audio-primary);
  border: 2px solid var(--custom-audio-bg);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px;
}

.custom-audio-volume-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--custom-audio-primary);
  border: 2px solid var(--custom-audio-bg);
  border-radius: 50%;
  cursor: pointer;
}

.custom-audio-volume-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--custom-audio-timeline-fg) 0%,
    var(--custom-audio-timeline-fg) var(--volume-progress, 100%),
    var(--custom-audio-timeline-bg) var(--volume-progress, 100%),
    var(--custom-audio-timeline-bg) 100%
  );
  border-radius: 12px;
  height: 4px;
}

.custom-audio-volume-range::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--custom-audio-timeline-fg) 0%,
    var(--custom-audio-timeline-fg) var(--volume-progress, 100%),
    var(--custom-audio-timeline-bg) var(--volume-progress, 100%),
    var(--custom-audio-timeline-bg) 100%
  );
  border-radius: 12px;
  height: 4px;
  border: none;
}

#custom-audio-player-error {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: none; /* Hidden by default, JS will show if needed */
  z-index: 20; /* Above player controls */
  text-align: center;
}

#custom-audio-player-error[data-visible="true"] {
  display: block;
}

/* Blur effect if error is visible - apply to the container to blur its children */
.custom-audio-player-container:has(#custom-audio-player-error[data-visible="true"]) > *:not(#custom-audio-player-error) {
  filter: blur(5px);
}

.custom-audio-player-scope.floating .custom-audio-player-container {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 800px; /* Or your desired max-width */
  z-index: 1000;
  transition: bottom 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.custom-audio-player-placeholder {
  display: none;
}

.custom-audio-player-scope.floating + .custom-audio-player-placeholder {
  display: block;
}