:root {
  color: #080d14;
  background: #fff8f2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { block-size: 100%; overflow: hidden; }
body { block-size: 100svh; margin: 0; background: #fff8f2; overscroll-behavior: none; }
button { font: inherit; }

.menu-toggle {
  position: fixed; z-index: 8; top: max(1rem, env(safe-area-inset-top)); left: max(.75rem, env(safe-area-inset-left));
  display: grid; place-content: center; gap: .28rem; inline-size: 2.75rem; block-size: 2.75rem; padding: 0;
  border: 0; border-radius: .7rem; color: #080d14; background: transparent; cursor: pointer;
}
.menu-toggle:hover { background: rgb(8 13 20 / 6%); }
.menu-toggle:focus-visible, .main-menu button:focus-visible { outline: 2px solid #a84d16; outline-offset: 2px; }
.menu-toggle span { display: block; inline-size: 1.1rem; block-size: 2px; border-radius: 1px; background: currentColor; transition: transform 160ms ease, opacity 120ms ease; }
.menu-toggle[hidden] { display: none; }
.speed-control { position: fixed; z-index: 8; top: max(1rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); color: #080d14; }
.speed-control summary { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; cursor: pointer; list-style: none; }
.speed-control summary::-webkit-details-marker { display: none; }
.speed-icon { position: relative; display: block; inline-size: 1.2rem; block-size: .7rem; border: 2px solid currentColor; border-bottom: 0; border-radius: 1rem 1rem 0 0; }
.speed-icon::after { content: ""; position: absolute; inset: auto auto -.1rem 50%; inline-size: .52rem; block-size: 2px; background: currentColor; transform: rotate(-35deg); transform-origin: 0 50%; }
.speed-menu { position: absolute; top: 2.8rem; right: 0; display: grid; min-inline-size: 5.8rem; padding: .25rem; border-radius: .45rem; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); }
.speed-menu button { min-block-size: 2.2rem; border: 0; border-radius: .3rem; color: #080d14; background: transparent; font: inherit; font-size: .82rem; text-align: left; }
.speed-menu button:hover, .speed-menu button[aria-checked="true"] { background: #ffe1c5; }

.main-menu {
  position: fixed; display: flex; flex-direction: column; z-index: 7; inset: 0 auto 0 0; inline-size: min(19rem, 82vw);
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem max(1rem, env(safe-area-inset-left));
  background: #fff8f2; box-shadow: .5rem 0 1.5rem rgb(8 13 20 / 10%); transform: translateX(-105%); transition: transform 180ms ease-out;
}
.main-menu.is-open { transform: translateX(0); }
.main-menu nav { display: grid; gap: .35rem; }
.main-menu button { inline-size: 100%; min-block-size: 3rem; border: 0; border-radius: .65rem; padding: .6rem .9rem; color: #080d14; background: transparent; cursor: pointer; font-weight: 650; text-align: left; }
.main-menu button:hover, .main-menu button[aria-current="page"] { background: #ffe1c5; }
.main-menu-divider { block-size: 1px; margin: .45rem .25rem; background: #e1d5cb; }
.playlist-menu { display: grid; gap: .35rem; }
.main-menu .playlist-menu-item { inline-size: 100%; min-block-size: 3rem; border: 0; border-radius: .65rem; padding: .6rem .9rem; color: #080d14; background: transparent; cursor: pointer; font: inherit; font-weight: 400; text-align: left; }
.main-menu .playlist-menu-item.is-current-playlist { font-weight: 700; }
.main-menu-footer { display: flex; justify-content: space-between; gap: .35rem; margin-top: auto; padding-top: .75rem; }
.main-menu-footer button { display: grid; place-items: center; inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0; border-radius: .7rem; }
.main-menu-footer button svg { inline-size: 1.5rem; block-size: 1.5rem; fill: currentColor; }
.main-menu-footer button:disabled { opacity: .35; cursor: default; }
.main-menu-footer button:disabled:hover { background: transparent; }

.menu-backdrop { position: fixed; z-index: 6; inset: 0; background: rgb(8 13 20 / 16%); opacity: 0; transition: opacity 160ms ease; }
.menu-backdrop.is-visible { opacity: 1; }
main { position: relative; block-size: 100%; min-block-size: 0; overflow: hidden; }
main > section { position: absolute; inset: 0; block-size: 100%; min-block-size: 0; overflow: hidden; }
main > section[hidden] { display: none; }

@keyframes screen-enter-forward { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes screen-exit-forward { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes screen-enter-backward { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes screen-exit-backward { from { transform: translateX(0); } to { transform: translateX(100%); } }
.screen-enter-forward { animation: screen-enter-forward 180ms ease-out both; }
.screen-exit-forward { animation: screen-exit-forward 180ms ease-out both; }
.screen-enter-backward { animation: screen-enter-backward 180ms ease-out both; }
.screen-exit-backward { animation: screen-exit-backward 180ms ease-out both; }

.playlists-screen { padding: 0 .75rem 1rem; background: #fff8f2; overflow-y: auto; }
body.has-mini-player .playlists-screen, body.has-mini-player .library-screen { padding-bottom: calc(5.1rem + env(safe-area-inset-bottom)); }
.playlist-header { position: sticky; z-index: 5; top: 0; margin: 0 -.75rem .55rem; padding: max(1rem, env(safe-area-inset-top)) 3.75rem .65rem; background: #fff8f2; text-align: center; }
.library-screen { padding: 0 .75rem 1rem; background: #fff8f2; overflow-y: auto; }
.library-header { position: sticky; z-index: 5; top: 0; margin: 0 -.75rem .55rem; padding: max(1rem, env(safe-area-inset-top)) 3.75rem .65rem; background: #fff8f2; text-align: center; }
.library-view-picker { position: relative; }
.library-view-picker summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; }
.library-view-picker summary::-webkit-details-marker { display: none; }
.library-view-picker summary::after { content: ""; inline-size: .42rem; block-size: .42rem; margin-top: -.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.library-view-menu { position: absolute; z-index: 6; top: calc(100% + .5rem); left: 50%; display: grid; min-inline-size: 12rem; padding: .25rem; border-radius: .45rem; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); transform: translateX(-50%); }
.library-view-menu button { min-block-size: 2.5rem; border: 0; border-radius: .3rem; padding: .4rem .65rem; color: #080d14; background: transparent; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.library-view-menu button:hover, .library-view-menu button[aria-current="page"] { background: #ffe1c5; }
.library-actions { position: absolute; z-index: 7; top: max(1rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
.library-actions summary { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; cursor: pointer; list-style: none; font-size: 1.5rem; line-height: 1; }
.library-actions summary::-webkit-details-marker { display: none; }
.library-actions-menu { position: absolute; top: 2.8rem; right: 0; display: grid; min-inline-size: 15rem; padding: .25rem; border-radius: .45rem; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); }
.library-actions-menu button { min-block-size: 2.5rem; border: 0; border-radius: .3rem; padding: .4rem .65rem; color: #080d14; background: transparent; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.library-actions-menu button:hover { background: #ffe1c5; }
.library-playlist-targets { display: grid; }
.library-playlist-targets p { margin: .45rem .65rem .25rem; color: #625e5a; font-size: .76rem; }
.library-playlist-targets .library-playlist-cancel { color: #625e5a; }
.library-header p { min-block-size: 1em; margin: .2rem 0 0; color: #77716d; font-size: .82rem; }
.library-load-more { block-size: 1px; }
#playlist-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; }
.playlist-header p { margin: .2rem 0 0; color: #77716d; font-size: .82rem; }
.playlist-settings-button { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: .7rem; color: #080d14; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.playlist-settings-button:hover { background: rgb(8 13 20 / 6%); }
.playlist-setting { display: grid; gap: .5rem; padding: .85rem; border-radius: .65rem; background: #f4ebe3; font-size: .92rem; }
.playlist-setting select { inline-size: 100%; min-block-size: 2.5rem; border: 1px solid #d8cec5; border-radius: .4rem; padding: 0 .65rem; color: #080d14; background: #fff8f2; font: inherit; }
.playlist-picker { position: relative; display: inline-block; }
.playlist-picker summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; }
.playlist-picker summary::-webkit-details-marker { display: none; }
.playlist-picker summary::after { content: ""; inline-size: .42rem; block-size: .42rem; margin-top: -.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.playlist-picker-menu { position: absolute; z-index: 6; top: calc(100% + .5rem); left: 50%; display: grid; min-inline-size: 12rem; padding: .25rem; border-radius: .45rem; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); transform: translateX(-50%); }
.playlist-picker-menu button { min-block-size: 2.5rem; border: 0; border-radius: .3rem; padding: .4rem .65rem; color: #080d14; background: transparent; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.playlist-picker-menu button:hover, .playlist-picker-menu button[aria-current="page"] { background: #ffe1c5; }
.playlist-picker-menu .playlist-create-action { margin-top: .15rem; border-top: 1px solid #e5ddd6; }
.new-playlist-content { padding: 0 1.5rem 2rem; }
.playlist-tracks { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.playlist-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.5rem; gap: .5rem; align-items: center; min-block-size: 3.75rem; padding: .35rem; border-radius: .55rem; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.playlist-row.is-current { color: #080d14; background: #d87b11; }
.playlist-row.is-dragging { opacity: .9; box-shadow: 0 .45rem 1rem rgb(8 13 20 / 22%); transform: scale(1.02); transition: none; }
.playlist-drag-placeholder { border: 2px dashed #d87b11; border-radius: .55rem; background: rgb(255 225 197 / 40%); }
.playlist-row-artwork { inline-size: 3.2rem; aspect-ratio: 1; overflow: hidden; border-radius: .3rem; background: #f0c5a4; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.playlist-row-artwork:active { cursor: grabbing; }
.playlist-row-artwork img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.playlist-row-title, .playlist-row-metadata { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.playlist-row-title { color: #080d14; font-size: .9rem; font-weight: 400; }
.playlist-row-metadata, .playlist-row.is-current .playlist-row-metadata { margin-top: .18rem; color: #625e5a; font-size: .66rem; }
.playlist-row-duration { font-variant-numeric: tabular-nums; }
.playlist-row-actions { position: relative; inline-size: 1.5rem; }
.playlist-row-actions summary { display: grid; place-items: center; inline-size: 1.5rem; block-size: 2.25rem; cursor: pointer; font-size: 1.4rem; line-height: 1; list-style: none; }
.playlist-row-actions summary::-webkit-details-marker { display: none; }
.playlist-context-menu { position: absolute; z-index: 4; top: 2.2rem; right: 0; min-inline-size: 11rem; padding: .25rem; border-radius: .45rem; color: #080d14; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); }
.playlist-context-menu button { inline-size: 100%; min-block-size: 2.5rem; padding: .4rem .65rem; border: 0; border-radius: .3rem; color: inherit; background: transparent; font: inherit; font-size: .88rem; text-align: left; }
.playlist-context-menu button:hover { background: #ffe1c5; }
.playlist-context-menu .playlist-trash-action { color: #9e341f; }
.file-info-screen { padding: max(6.5rem, calc(env(safe-area-inset-top) + 5.5rem)) 1.5rem 2rem; overflow-y: auto; background: #fff8f2; }
.file-info-header { position: fixed; z-index: 8; inset: 0 0 auto; display: grid; place-items: center; min-block-size: max(5rem, calc(env(safe-area-inset-top) + 4rem)); padding: max(.8rem, env(safe-area-inset-top)) 4rem .8rem; background: #fff8f2; box-shadow: 0 .2rem .6rem rgb(8 13 20 / 7%); }
.file-info-header > button { position: absolute; top: max(1rem, env(safe-area-inset-top)); left: max(.75rem, env(safe-area-inset-left)); display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: .7rem; padding: 0; color: #080d14; background: transparent; cursor: pointer; }
.file-info-header > button svg { inline-size: 1.65rem; block-size: 1.65rem; fill: currentColor; }
.file-info-header > button:hover { background: rgb(8 13 20 / 6%); }
.file-info-header h1 { margin: 0; font-size: 1.15rem; }
.file-info-actions, #save-file-tags { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(.75rem, env(safe-area-inset-right)); }
.file-info-actions summary { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; cursor: pointer; list-style: none; font-size: 1.5rem; line-height: 1; }
.file-info-actions summary::-webkit-details-marker { display: none; }
.file-info-actions-menu { position: absolute; top: 2.8rem; right: 0; display: grid; min-inline-size: 12rem; padding: .25rem; border-radius: .45rem; background: #fff8f2; box-shadow: 0 .35rem 1rem rgb(8 13 20 / 18%); }
.file-info-actions-menu button { min-block-size: 2.5rem; border: 0; border-radius: .3rem; padding: .4rem .65rem; color: #080d14; background: transparent; font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.file-info-actions-menu button:hover { background: #ffe1c5; }
.file-info-actions-menu .file-info-trash-action { color: #9e341f; }
#save-file-tags { left: auto; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: .7rem; color: #080d14; background: transparent; cursor: pointer; }
#save-file-tags[hidden] { display: none; }
#save-file-tags:hover { background: rgb(8 13 20 / 6%); }
#save-file-tags svg { inline-size: 1.55rem; block-size: 1.55rem; fill: currentColor; }
.file-info-edit-form { display: grid; gap: .8rem; padding: 1rem; border-radius: .55rem; background: #f4e9df; }
.file-info-edit-form label { display: grid; gap: .25rem; color: #625e5a; font-size: .78rem; }
.file-info-edit-form input { min-block-size: 2.4rem; border: 1px solid #e1d5cb; border-radius: .35rem; padding: .35rem .5rem; color: #080d14; background: #fff8f2; font: inherit; }
.file-info-edit-status { min-block-size: 1em; margin: 0; color: #77716d; font-size: .82rem; }
.file-info-content { max-inline-size: 38rem; margin: 0 auto; }
.about-content { max-inline-size: 38rem; margin: 0 auto; }
.about-content h2 { margin: 1.1rem 0 .55rem; font-size: 1rem; }
.about-content p, .about-content li { color: #625e5a; font-size: .9rem; line-height: 1.5; }
.about-content ul { margin: .4rem 0; padding-left: 1.2rem; }
#refresh-app { min-block-size: 2.4rem; margin-top: .25rem; border: 0; border-radius: .35rem; padding: .4rem .75rem; color: #080d14; background: #ffe1c5; font: inherit; font-weight: 650; cursor: pointer; }
#refresh-app:disabled { opacity: .65; cursor: wait; }
.signed-out-screen { position: relative; display: grid; place-items: center; overflow: hidden; padding: 2rem; background: #fff8f2; text-align: center; }
.signed-out-screen::before, .signed-out-screen::after { position: absolute; z-index: 0; border-radius: 50%; background: #ffe1c5; content: ""; opacity: .55; }
.signed-out-screen::before { inline-size: 24rem; block-size: 24rem; top: -15rem; right: -11rem; }
.signed-out-screen::after { inline-size: 18rem; block-size: 18rem; bottom: -13rem; left: -11rem; opacity: .35; }
.signed-out-card { position: relative; z-index: 1; inline-size: min(100%, 23rem); padding: 2.25rem 1.5rem 1.7rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 1.25rem; background: rgb(255 248 242 / 88%); box-shadow: 0 1.2rem 3.5rem rgb(117 76 45 / 13%); }
.signed-out-mark { display: block; inline-size: 4.25rem; block-size: 4.25rem; margin: 0 auto 1.25rem; border-radius: 1rem; box-shadow: 0 .45rem .9rem rgb(168 77 22 / 16%); }
.signed-out-eyebrow { margin: 0 0 .45rem; color: #9e5b27; font-size: .65rem; font-weight: 750; letter-spacing: .16em; }
.signed-out-screen h1 { margin: 0; font-size: 2rem; letter-spacing: -.05em; }
.signed-out-lead { margin: .75rem auto 1.5rem; max-inline-size: 18rem; color: #625e5a; font-size: .95rem; line-height: 1.5; }
.signed-out-screen a { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; inline-size: 100%; min-block-size: 3rem; border-radius: .7rem; color: #080d14; background: #ffe1c5; font-weight: 700; text-decoration: none; box-shadow: 0 .35rem .75rem rgb(168 77 22 / 13%); }
.signed-out-screen a svg { inline-size: 1.2rem; block-size: 1.2rem; }
.signed-out-note { margin: 1.15rem auto 0; max-inline-size: 17rem; color: #77716d; font-size: .72rem; line-height: 1.45; }
.new-view-content { max-inline-size: 38rem; margin: 0 auto; }
.new-view-form { display: grid; gap: .7rem; padding: 1rem; border-radius: .55rem; background: #f4e9df; }
.new-view-form label { display: grid; gap: .25rem; color: #625e5a; font-size: .78rem; }
.new-view-form input, .new-view-form select { min-block-size: 2.4rem; border: 1px solid #e1d5cb; border-radius: .35rem; padding: .35rem .5rem; color: #080d14; background: #fff8f2; font: inherit; }
.new-view-form div { display: flex; gap: .5rem; }
.new-view-form button { min-block-size: 2.4rem; border: 0; border-radius: .35rem; padding: .4rem .75rem; color: #080d14; background: #ffe1c5; font: inherit; cursor: pointer; }
#new-view-status { min-block-size: 1em; color: #77716d; font-size: .82rem; }

.file-info-artwork { display: block; inline-size: 100%; max-inline-size: 20rem; aspect-ratio: 1; margin: 0 auto 1.25rem; object-fit: contain; border-radius: .3rem; background: #f0c5a4; }
.file-info-content h2 { margin: 1.1rem 0 .65rem; font-size: 1rem; }
.file-info-content dl { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.5fr); gap: .55rem .8rem; margin: 0; font-size: .86rem; }
.file-info-content dt { color: #625e5a; }
.file-info-content dd { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; }
.file-info-lyrics { overflow-x: auto; padding: .8rem; border-radius: .4rem; background: #f4e9df; font: .78rem/1.45 ui-monospace, monospace; white-space: pre-wrap; }

.home-screen {
  display: flex;
  flex-direction: column;
  padding: max(6.5rem, calc(env(safe-area-inset-top) + 5.5rem)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
}
.player-artwork {
  inline-size: 100%;
  max-inline-size: 34rem;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: .3rem;
  background: #f0c5a4;
}
.player-artwork img { display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: contain; }
.player-artwork.has-artwork { background: transparent; }
.player { display: grid; gap: 1.25rem; margin-top: auto; padding-top: 2rem; }
.current-track { overflow: hidden; transform: translateY(-.7rem); border-radius: .4rem; text-align: center; cursor: pointer; }
.current-track:focus-visible { outline: 2px solid #a84d16; outline-offset: .25rem; }
.current-track p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
#current-track-title { color: #080d14; font-size: 1.08rem; font-weight: 700; }
#current-track-title span { display: inline-block; }
#current-track-title.is-marquee { text-overflow: clip; }
#current-track-title.is-marquee span { padding-inline-end: 1.5rem; animation: current-track-marquee 7s ease-in-out 1s infinite alternate; }
#current-track-artist, #current-track-album { margin-top: .14rem; color: #625e5a; font-size: .7rem; }
@keyframes current-track-marquee { to { transform: translateX(calc(-1 * var(--marquee-distance))); } }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 2.35rem; }
.player-button { position: relative; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border: 0; color: #080d14; background: transparent; cursor: pointer; }
.player-button:focus-visible { outline: 2px solid #a84d16; outline-offset: 2px; }
.player-button:hover { color: #a84d16; }
.play-button { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; background: #ffe1c5; }
.play-button span { inline-size: 0; block-size: 0; margin-left: .23rem; border-block: .62rem solid transparent; border-left: .92rem solid currentColor; }
.play-button.is-playing span { inline-size: .72rem; block-size: .95rem; margin: 0; border: 0; background: linear-gradient(to right, currentColor 0 .22rem, transparent .22rem .5rem, currentColor .5rem); }
.skip-button::before, .skip-button::after { content: ""; position: absolute; }
.skip-button::before { inline-size: 0; block-size: 0; border-block: .52rem solid transparent; border-right: .72rem solid currentColor; }
.skip-button::after { block-size: 1.1rem; inline-size: .16rem; background: currentColor; }
.previous-button::before { transform: translateX(.13rem); }
.previous-button::after { transform: translateX(-.7rem); }
.next-button::before { transform: translateX(-.13rem) rotate(180deg); }
.next-button::after { transform: translateX(.7rem); }
.progress { display: block; inline-size: 100%; block-size: 4rem; cursor: pointer; touch-action: none; }
.player-time { display: flex; justify-content: space-between; color: #77716d; font-size: .82rem; font-variant-numeric: tabular-nums; }

.mini-player { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; overflow: hidden; border-top: 1px solid #dfd9d3; background: #efebe7; box-shadow: 0 -.2rem .7rem rgb(8 13 20 / 7%); color: #080d14; cursor: pointer; }
.mini-player[hidden] { display: none; }
.mini-player:focus-visible { outline: 2px solid #a84d16; outline-offset: -2px; }
.mini-player-content { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; max-inline-size: 42rem; min-block-size: 4rem; margin-inline: auto; padding: .38rem max(.75rem, env(safe-area-inset-right)) max(.32rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); }
.mini-player-artwork { inline-size: 3.2rem; aspect-ratio: 1; overflow: hidden; border-radius: .3rem; background: #d9d4cf; }
.mini-player-artwork img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mini-player-details { min-inline-size: 0; overflow: hidden; }
.mini-player-details p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
#mini-player-title { color: #080d14; font-size: .9rem; font-weight: 400; }
#mini-player-title span { display: inline-block; }
#mini-player-title.is-marquee { text-overflow: clip; }
#mini-player-title.is-marquee span { padding-inline-end: 1.4rem; animation: mini-player-marquee 7s ease-in-out 1s infinite alternate; }
#mini-player-metadata { margin-top: .18rem; color: #625e5a; font-size: .66rem; }
@keyframes mini-player-marquee { to { transform: translateX(calc(-1 * var(--mini-marquee-distance))); } }
.mini-player-controls { display: flex; align-items: center; gap: .05rem; }
.mini-player-control { position: relative; display: grid; place-items: center; inline-size: 2.15rem; block-size: 2.3rem; padding: 0; border: 0; border-radius: .4rem; color: #080d14; background: transparent; cursor: pointer; }
.mini-player-control:hover { background: rgb(8 13 20 / 7%); }
.mini-player-control:focus-visible { outline: 2px solid #a84d16; outline-offset: -2px; }
.mini-player-control:disabled { opacity: .35; cursor: default; }
.mini-player-control:disabled:hover { background: transparent; }
.mini-play-button::before { inline-size: 0; block-size: 0; margin-left: .12rem; border-block: .42rem solid transparent; border-left: .62rem solid currentColor; content: ""; }
.mini-play-button.is-playing::before { inline-size: .58rem; block-size: .8rem; margin: 0; border: 0; background: linear-gradient(to right, currentColor 0 .18rem, transparent .18rem .4rem, currentColor .4rem); }
.mini-skip-button::before, .mini-skip-button::after { position: absolute; content: ""; }
.mini-skip-button::before { inline-size: 0; block-size: 0; border-block: .36rem solid transparent; border-right: .5rem solid currentColor; }
.mini-skip-button::after { inline-size: .12rem; block-size: .82rem; background: currentColor; }
.mini-previous-button::before { transform: translateX(.08rem); }
.mini-previous-button::after { transform: translateX(-.48rem); }
.mini-next-button::before { transform: translateX(-.08rem) rotate(180deg); }
.mini-next-button::after { transform: translateX(.48rem); }
.mini-player-progress { block-size: 3px; background: #d7d1cb; }
#mini-player-progress { display: block; block-size: 100%; background: #d87b11; transition: inline-size 120ms linear; }

@media (min-width: 42rem) {
  .home-screen { padding-inline: 2rem; }
  .player { max-inline-size: 34rem; inline-size: 100%; margin-inline: auto; }
  .playlists-screen { padding-inline: max(1rem, calc((100% - 42rem) / 2)); }
  .library-screen { padding-inline: max(1rem, calc((100% - 42rem) / 2)); }
}

.settings-content { max-inline-size: 38rem; margin: 0 auto; }
.settings-link { position: relative; display: grid; gap: .2rem; inline-size: 100%; min-block-size: 4.5rem; border: 0; border-radius: .55rem; padding: .85rem 2.8rem .85rem 1rem; color: #080d14; background: #f4e9df; font: inherit; text-align: left; cursor: pointer; }
.settings-link:hover { background: #ffe1c5; }
.settings-link span { font-size: .98rem; font-weight: 650; }
.settings-link small { color: #625e5a; font-size: .78rem; }
.settings-link b { position: absolute; top: 50%; right: 1rem; color: #625e5a; font-size: 1.5rem; font-weight: 400; transform: translateY(-55%); }
.settings-status { min-block-size: 1.3rem; margin: 0 0 .6rem; color: #77716d; font-size: .82rem; }
.library-sources-list { display: grid; gap: .55rem; }
.library-source-card { padding: 1rem; border-radius: .55rem; background: #f4e9df; }
.library-source-card h2 { margin: 0; color: #080d14; font-size: 1rem; }
.library-source-card p { margin: .3rem 0 0; color: #625e5a; font-size: .82rem; }
.library-source-card .library-source-id { overflow-wrap: anywhere; color: #77716d; font-size: .7rem; }
.settings-note { margin: 1.2rem 0 0; color: #77716d; font-size: .8rem; line-height: 1.45; }

.settings-add { inline-size: 100%; min-block-size: 2.6rem; margin-top: .7rem; border: 0; border-radius: .4rem; padding: .4rem .75rem; color: #080d14; background: #ffe1c5; font: inherit; font-weight: 650; cursor: pointer; }
.source-search { display: grid; gap: .3rem; color: #625e5a; font-size: .78rem; }
.source-search input { min-block-size: 2.5rem; border: 1px solid #e1d5cb; border-radius: .35rem; padding: .35rem .5rem; color: #080d14; background: #fff8f2; font: inherit; }
.library-source-folders { display: grid; gap: .35rem; }
.library-source-folder { display: grid; gap: .18rem; inline-size: 100%; min-block-size: 3.7rem; border: 0; border-radius: .5rem; padding: .65rem .8rem; color: #080d14; background: #f4e9df; font: inherit; text-align: left; cursor: pointer; }
.library-source-folder:hover { background: #ffe1c5; }
.library-source-folder small { color: #625e5a; font-size: .75rem; }

.library-source-breadcrumbs { display: flex; gap: .2rem; margin: 0 0 .8rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.library-source-breadcrumbs button { flex: 0 0 auto; border: 0; border-radius: .3rem; padding: .3rem .45rem; color: #625e5a; background: transparent; font: inherit; font-size: .78rem; cursor: pointer; }
.library-source-breadcrumbs button::after { margin-left: .4rem; color: #a69e97; content: "/"; }
.library-source-breadcrumbs button:last-child::after { content: ""; }
.library-source-breadcrumbs button:disabled { color: #080d14; font-weight: 650; cursor: default; }

.library-source-tree { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.library-source-tree ul { display: grid; gap: .1rem; margin: .05rem 0 .05rem 1.05rem; padding: 0; border-left: 1px solid #e1d5cb; list-style: none; }
.library-source-tree-row { display: flex; align-items: center; min-block-size: 2.45rem; }
.library-source-tree-toggle, .library-source-tree-spacer { display: grid; flex: 0 0 2rem; place-items: center; inline-size: 2rem; block-size: 2rem; border: 0; color: #625e5a; background: transparent; font: 1.35rem/1 sans-serif; }
.library-source-tree-toggle { cursor: pointer; }
.library-source-tree-name { flex: 1; min-inline-size: 0; min-block-size: 2.3rem; border: 0; border-radius: .35rem; padding: .35rem .55rem; overflow: hidden; color: #080d14; background: transparent; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.library-source-tree-name:hover { background: #f4e9df; }
.library-source-tree-name.is-selected { background: #ffe1c5; font-weight: 650; }
.library-source-breadcrumbs span + span::before { margin: 0 .35rem; color: #a69e97; content: "/"; }

.library-source-tree-root > .library-source-tree-row { min-block-size: 2.7rem; border-radius: .45rem; padding-inline: .7rem; background: #f4e9df; }
.library-source-tree-root-label { color: #080d14; font-size: .92rem; font-weight: 700; }
.library-source-tree-root > ul { margin-left: .8rem; }

.library-source-folder { display: flex; align-items: center; gap: .75rem; inline-size: 100%; min-block-size: 3.6rem; border: 0; border-radius: .45rem; padding: .55rem .7rem; color: #080d14; background: #f4e9df; font: inherit; text-align: left; cursor: pointer; }
.library-source-folder:hover { background: #ffe1c5; }
.library-source-folder-icon { position: relative; flex: 0 0 1.5rem; block-size: 1.1rem; border-radius: .12rem; background: #c7a68d; }
.library-source-folder-icon::before { position: absolute; inset: -.22rem auto auto .08rem; inline-size: .7rem; block-size: .3rem; border-radius: .1rem .1rem 0 0; background: inherit; content: ""; }

.library-sources-list .settings-add { display: grid; place-items: center; margin-top: .15rem; text-decoration: none; }