:root {
  color-scheme: light;
  font-family: "DM Sans", sans-serif;
  color: #23263a;
  background: #f7f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-size: 14px;
  --muted: #9399ab;
  --purple: #7656e8;
  --ink: #22253a;
  --player-bg: #191a2b;
}

* { box-sizing: border-box; }
body { min-width: 340px; min-height: 100vh; margin: 0; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #aa98ff; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.liquid-background { position: fixed; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.liquid-background[hidden] { display: none; }
.matrix-background { position: fixed; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.matrix-background[hidden] { display: none; }
.app-shell { position: relative; z-index: 1; min-height: 100vh; padding-bottom: 92px; }

.sidebar { position: fixed; inset: 0 auto 88px 0; z-index: 2; display: flex; width: 232px; flex-direction: column; padding: 29px 18px 13px; border-right: 1px solid #edeef4; background: #fff; }
.brand { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 41px 8px; color: #25243a; font-family: "Playfair Display", serif; font-size: 25px; font-style: italic; font-weight: 600; letter-spacing: -1.5px; text-decoration: none; }
.brand-period { margin-left: -9px; color: #8b69ec; }
.brand-mark { display: flex; width: 23px; height: 24px; align-items: center; justify-content: center; gap: 2px; transform: rotate(-13deg); }
.brand-mark span { width: 3px; border-radius: 3px; background: #8767ed; }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { height: 10px; }
.brand-mark span:nth-child(2) { height: 20px; }
.brand-mark span:nth-child(3) { height: 15px; }
.nav-caption, .section-kicker { color: #a4a7b6; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.nav-caption { padding-left: 11px; }
.main-nav { display: grid; gap: 4px; margin-top: 13px; }
.nav-link { position: relative; display: flex; min-height: 39px; align-items: center; gap: 12px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #696d7f; cursor: pointer; font-size: 12px; font-weight: 500; text-align: left; transition: background .18s, color .18s; }
.nav-link[hidden] { display: none; }
.youtube-link { color: #62506e; text-decoration: none; }
.youtube-link > svg:first-child { color: #e45459; }
.youtube-link:hover { background: #fff0f0; color: #bb3942; }
.youtube-link .youtube-external-icon { width: 13px; height: 13px; margin-left: auto; color: #aaa2af; }
.youtube-link:hover .youtube-external-icon { color: #bb3942; }
.nav-link:hover { background: #f7f6fc; color: #5342a3; }
.nav-link.active { background: #f1effe; color: #684cdc; font-weight: 700; }
.nav-link svg, .tiny-icon-button svg, .top-folder-button svg, .primary-button svg, .folder-location > svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.nav-count { margin-left: auto; color: #a5a8b6; font-size: 10px; }
.sidebar-divider { height: 1px; margin: 19px 4px 19px; background: #f0f0f4; }
.library-heading { display: flex; align-items: center; justify-content: space-between; }
.tiny-icon-button { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #9296a7; cursor: pointer; }
.tiny-icon-button:hover { background: #f1effe; color: #684cdc; }
.tiny-icon-button svg { width: 16px; height: 16px; }
.library-nav { margin-top: 8px; }
.sidebar-note { margin-top: auto; padding: 14px 13px 13px; border: 1px solid #efedf9; border-radius: 11px; background: linear-gradient(145deg, #faf9ff, #fff); }
.note-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #eeebff; color: #775ce3; }
.note-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sidebar-note p { margin: 10px 0 4px; color: #333248; font-size: 11px; font-weight: 700; }
.sidebar-note > span { display: block; color: #9295a4; font-size: 9px; line-height: 1.6; }
.profile-button { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 3px 0; border: 0; border-top: 1px solid #efeff3; background: transparent; cursor: default; text-align: left; }
.profile-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #d6caff, #8f76e8); color: #fff; font-family: "Playfair Display", serif; font-size: 16px; font-style: italic; }
.profile-text { display: grid; gap: 3px; }
.profile-text strong { color: #37394a; font-size: 10px; font-weight: 700; }
.profile-text small { color: #a0a2af; font-size: 9px; }
.profile-menu-icon { width: 16px; height: 16px; margin-left: auto; fill: currentColor; color: #9b9eac; }

.main-content { min-height: calc(100vh - 92px); margin-left: 232px; background: #f7f8fc; }
.topbar { position: sticky; top: 0; z-index: 1; display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 49px; border-bottom: 1px solid #eff0f5; background: rgb(247 248 252 / 94%); backdrop-filter: blur(16px); }
.history-buttons, .topbar-actions { display: flex; align-items: center; gap: 10px; }
.eye-tracking { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 11px; transform: translate(-50%, -50%); pointer-events: none; }
.header-social-links { position: fixed; top: 4px; left: 4px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.header-social-links a { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; color: var(--mode-ink, #5a5c6d); transition: color .18s ease, background .18s ease, transform .18s ease; }
.header-social-links a:hover { transform: translateY(-2px); color: var(--mode-accent, #7656e8); background: rgb(255 255 255 / 10%); }
.header-social-links svg { width: 18px; height: 18px; fill: currentColor; }
.tracking-eye { position: relative; display: block; width: 36px; height: 25px; overflow: hidden; border: 1px solid #d9d4e4; border-radius: 55% 45% 52% 48% / 58% 58% 42% 42%; background: radial-gradient(ellipse at 50% 24%, #fff 0, #faf9ff 62%, #e9e5f1 100%); box-shadow: 0 2px 5px #30223b12, inset 0 -2px 4px #513f6810; }
.tracking-eye::before, .tracking-eye::after { position: absolute; top: 0; width: 7px; height: 7px; border: 1px solid var(--mode-accent, #7959d6); border-radius: 50%; content: ""; opacity: .55; }
.tracking-eye::before { left: 4px; }
.tracking-eye::after { right: 4px; }
.tracking-pupil { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #75638f, #282335 72%); box-shadow: 0 0 0 2px #8771a326; transform: translate(calc(-50% + var(--pupil-x, 0px)), calc(-50% + var(--pupil-y, 0px))); transition: transform .12s ease-out; }
.tracking-glint { position: absolute; top: calc(50% - 3px + var(--pupil-y, 0px)); left: calc(50% - 2px + var(--pupil-x, 0px)); width: 2px; height: 2px; border-radius: 50%; background: #fff; pointer-events: none; }
.circle-button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e9eaf0; border-radius: 50%; background: #fff; color: #53566a; cursor: pointer; }
.circle-button:disabled { color: #c4c5cf; cursor: default; }
.circle-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.local-indicator { display: flex; align-items: center; gap: 7px; color: #9397a8; font-size: 8px; font-weight: 800; letter-spacing: .95px; }
.local-indicator > span { width: 6px; height: 6px; border-radius: 50%; background: #71cba6; box-shadow: 0 0 0 3px #71cba61f; }
.top-folder-button { display: flex; height: 34px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #e6e6ed; border-radius: 7px; background: white; color: #424457; cursor: pointer; font-size: 10px; font-weight: 600; transition: border-color .18s, color .18s; }
.top-folder-button:hover { border-color: #c4b7ff; color: #6549d2; }
.top-folder-button svg { width: 14px; height: 14px; }
.content-scroll { max-width: 1220px; margin: 0 auto; padding: 26px 49px 16px; }

.hero { position: relative; display: flex; min-height: 244px; overflow: hidden; align-items: center; border-radius: 13px; background: linear-gradient(111deg, #232038 0%, #282345 57%, #35315e 100%); box-shadow: 0 7px 25px #24213b19; }
.hero::before, .hero::after { position: absolute; border: 1px solid #ffffff10; border-radius: 50%; content: ""; pointer-events: none; }
.hero::before { top: -180px; right: -68px; width: 395px; height: 395px; }
.hero::after { top: -123px; right: -8px; width: 279px; height: 279px; }
.hero-copy { position: relative; z-index: 1; width: 61%; padding: 30px 0 30px 36px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #c7baff; font-size: 8px; font-weight: 700; letter-spacing: 1.55px; }
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #a997ff; box-shadow: 0 0 10px #b19dff; }
.hero h1 { margin: 16px 0 9px; color: #fff; font-size: clamp(25px, 2.65vw, 35px); font-weight: 600; letter-spacing: -1.25px; line-height: 1.16; }
.hero h1 span { color: #c4b4ff; font-family: "Playfair Display", serif; font-weight: 600; font-style: italic; letter-spacing: -.8px; }
.hero-copy > p { margin: 0; color: #bfbdce; font-size: 10px; line-height: 1.7; }
.primary-button { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 7px; background: #8972ef; box-shadow: 0 4px 12px #7e62ef44; color: #fff; cursor: pointer; font-size: 10px; font-weight: 700; transition: background .18s, transform .18s; }
.primary-button:hover { transform: translateY(-1px); background: #9985f7; }
.primary-button svg { width: 14px; height: 14px; }
.primary-button .button-arrow { width: 12px; margin-left: 3px; }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 42%; overflow: hidden; }
.art-orbit { position: absolute; top: 50%; left: 52%; border: 1px solid #ffffff11; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 240px; height: 240px; }
.orbit-two { width: 181px; height: 181px; }
.art-disc { position: absolute; top: 50%; left: 52%; display: grid; width: 132px; height: 132px; place-items: center; border: 1px solid #ffffff21; border-radius: 50%; background: repeating-radial-gradient(circle at center, #22202f 0, #262433 2px, #393346 3px, #272433 5px, #22202f 6px); box-shadow: 0 0 48px #9174eb38, 12px 14px 35px #0b09194a; transform: translate(-50%, -50%) rotate(-22deg); }
.disc-label { display: grid; width: 48px; height: 48px; place-items: center; border: 5px solid #9380ec; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #c7a9fc, #7857cc 67%, #413159); }
.disc-bars { display: flex; align-items: center; gap: 2px; height: 16px; }
.disc-bars i { display: block; width: 2px; height: 5px; border-radius: 3px; background: #fff; }
.disc-bars i:nth-child(2), .disc-bars i:nth-child(4) { height: 12px; }
.disc-bars i:nth-child(3) { height: 16px; }
.float-note { position: absolute; z-index: 1; color: #c1a5ff; font-size: 24px; text-shadow: 0 0 20px #b290fa7a; }
.note-one { top: 38px; left: 32%; transform: rotate(-14deg); }
.note-two { right: 13%; bottom: 36px; color: #f5aacf; font-size: 29px; transform: rotate(10deg); }
.sound-wave { position: absolute; right: 13%; bottom: 36px; left: 28%; display: flex; height: 14px; align-items: center; justify-content: space-between; opacity: .43; }
.sound-wave i { width: 2px; border-radius: 5px; background: #9d8df6; }
.sound-wave i:nth-child(3n) { height: 9px; }
.sound-wave i:nth-child(3n + 1) { height: 4px; }
.sound-wave i:nth-child(3n + 2) { height: 13px; }
.art-caption { position: absolute; right: 26px; bottom: 14px; color: #a49dbd; font-size: 7px; font-weight: 700; letter-spacing: 1.25px; }

.library-section { margin-top: 27px; }
.section-heading { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-kicker { font-size: 8px; letter-spacing: 1.25px; }
.section-heading h2 { margin: 4px 0 3px; color: #2b2d40; font-size: 19px; font-weight: 700; letter-spacing: -.55px; }
.section-heading p { margin: 0; color: #989baa; font-size: 9px; }
.search-box { display: flex; width: 190px; height: 32px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid #eaebf0; border-radius: 7px; background: #fff; color: #9a9dac; }
.search-box > svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #34364a; font-size: 9px; }
.search-box input::placeholder { color: #a9abb7; }
.search-box kbd { display: inline-grid; width: 15px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid #ebebf0; border-radius: 4px; color: #acafbc; font-family: inherit; font-size: 9px; }
.search-box:focus-within { border-color: #b6a5fa; }
.folder-location { display: flex; min-height: 35px; align-items: center; gap: 8px; margin: 0 0 9px; padding: 0 10px; border: 1px solid #e9e6f8; border-radius: 7px; background: #fff; color: #777b8e; font-size: 9px; }
.folder-location[hidden], .song-list-wrap[hidden] { display: none; }
.folder-location > svg { width: 14px; height: 14px; color: #8063dd; }
.folder-location > span { overflow: hidden; color: #55596c; text-overflow: ellipsis; white-space: nowrap; }
.folder-location button { margin-left: auto; padding: 5px 0 5px 8px; border: 0; background: transparent; color: #7557dc; cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; }
.empty-state { display: flex; min-height: 244px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #e3e4ed; border-radius: 11px; background: linear-gradient(140deg, #fff 44%, #fbfaff); text-align: center; }
.empty-illustration { position: relative; display: grid; width: 70px; height: 66px; place-items: center; margin-bottom: 6px; }
.empty-vinyl { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle at center, #8672dc 0, #8672dc 1px, #7460cf 2px, #9582e7 3px, #7460cf 5px, #7460cf 6px); box-shadow: 0 5px 15px #7764ce2a; transform: rotate(-20deg); }
.empty-vinyl > div { width: 16px; height: 16px; border: 4px solid #b8a8fa; border-radius: 50%; background: #edeaff; }
.empty-spark { position: absolute; color: #a38ef1; font-size: 15px; }
.spark-a { top: 4px; right: 1px; }
.spark-b { bottom: 5px; left: 0; font-size: 16px; }
.empty-state h3 { margin: 6px 0 4px; color: #36384b; font-size: 13px; font-weight: 700; }
.empty-state > p { margin: 0; color: #9699a9; font-size: 9px; }
.text-button { margin-top: 13px; padding: 5px; border: 0; background: transparent; color: #7356dc; cursor: pointer; font-size: 10px; font-weight: 700; }
.text-button span { margin-left: 3px; transition: margin .18s; }
.text-button:hover span { margin-left: 7px; }
.song-list-wrap { overflow: hidden; border: 1px solid #ebecf2; border-radius: 9px; background: #fff; }
.list-header, .song-row { display: grid; grid-template-columns: 31px minmax(130px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) 42px 29px; align-items: center; column-gap: 11px; }
.list-header { min-height: 32px; padding: 0 13px; border-bottom: 1px solid #f0f0f4; color: #a2a4b2; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.list-header .duration-heading { display: grid; place-items: center; }
.duration-heading svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.song-row { min-height: 54px; padding: 5px 13px; border-bottom: 1px solid #f4f4f7; cursor: pointer; transition: background .16s; }
.song-row:last-child { border-bottom: 0; }
.song-row:hover, .song-row.is-playing { background: #faf9ff; }
.row-number { color: #a2a5b3; font-size: 10px; text-align: center; }
.row-play-mark { display: none; width: 12px; height: 12px; fill: #7558df; }
.song-row:hover .row-number, .song-row.is-playing .row-number { font-size: 0; }
.song-row:hover .row-play-mark, .song-row.is-playing .row-play-mark { display: inline-block; }
.row-title { display: flex; min-width: 0; align-items: center; gap: 9px; }
.track-art { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 6px; color: #fff; font-family: "Playfair Display", serif; font-size: 15px; font-style: italic; box-shadow: inset 0 0 0 1px #ffffff18; }
.track-art > span { opacity: .88; }
.row-text { display: grid; min-width: 0; gap: 3px; }
.row-text strong { overflow: hidden; color: #34364a; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-text small, .row-album, .row-folder, .row-duration { overflow: hidden; color: #999cab; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.row-album, .row-folder { padding-left: 1px; }
.row-duration { text-align: center; }
.song-like-button { display: grid; width: 25px; height: 27px; place-items: center; border: 0; background: transparent; color: #b1b3bf; cursor: pointer; }
.song-like-button:hover, .song-like-button.liked { color: #e277a8; }
.song-like-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.song-like-button.liked svg { fill: currentColor; }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 2px 4px; color: #aaacb9; font-size: 8px; }
.footer-heart { color: #de8aad; }

.player-bar { position: fixed; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; height: 88px; grid-template-columns: minmax(210px, 1fr) minmax(245px, 1.1fr) minmax(180px, 1fr); align-items: center; column-gap: 22px; padding: 0 29px; border-top: 1px solid #ffffff0c; background: #191a2b; color: #f6f5fc; box-shadow: 0 -8px 30px #2220350b; }
.now-playing { display: flex; min-width: 0; align-items: center; gap: 10px; }
.player-cover { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 6px; background: linear-gradient(145deg, #463770, #9782cb 50%, #dcabc9); box-shadow: inset 0 0 0 1px #ffffff13; }
.player-cover > span { color: #fff; font-family: "Playfair Display", serif; font-size: 21px; font-style: italic; }
.player-cover.track-cover-active > span { font-size: 20px; }
.now-playing-info { display: grid; min-width: 0; gap: 5px; }
.now-playing-info strong { overflow: hidden; color: #f4f1fb; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.now-playing-info > span { overflow: hidden; color: #a4a2b3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: grid; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: #a8a5b8; cursor: pointer; transition: color .16s, transform .16s; }
.icon-button:hover:not(:disabled), .icon-button.toggled { color: #b6a2ff; }
.icon-button:disabled { cursor: default; opacity: .45; }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.player-like { width: 27px; height: 29px; margin-left: 1px; }
.player-like svg { width: 14px; height: 14px; }
.player-like.liked { color: #eb89b0; }
.player-like.liked svg { fill: currentColor; }
.player-center { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 7px; }
.player-controls { display: flex; width: 100%; align-items: center; justify-content: center; gap: clamp(13px, 2.2vw, 27px); }
.control-secondary { width: 23px; height: 25px; }
.control-secondary svg { width: 14px; height: 14px; }
.skip-button { width: 23px; height: 25px; color: #e4e1ed; }
.skip-button svg { width: 15px; height: 15px; }
.play-button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: #f6f4fb; color: #242339; cursor: pointer; transition: background .16s, transform .16s; }
.play-button:hover { transform: scale(1.06); background: #d9d0ff; }
.play-button svg { width: 15px; height: 15px; fill: currentColor; }
.play-button.is-playing svg { width: 14px; height: 14px; }
.seek-row { display: flex; width: 100%; align-items: center; gap: 9px; }
.time-label { min-width: 26px; color: #b9b6c5; font-size: 8px; font-variant-numeric: tabular-nums; }
.time-label:last-child { text-align: right; }
.range-slider { height: 14px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.range-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 5px; background: linear-gradient(to right, #a992f7 var(--range-progress, 0%), #484759 var(--range-progress, 0%)); }
.range-slider::-moz-range-track { height: 3px; border-radius: 5px; background: #484759; }
.range-slider::-moz-range-progress { height: 3px; border-radius: 5px; background: #a992f7; }
.range-slider::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: -3px; appearance: none; border: 2px solid #ede8ff; border-radius: 50%; background: #a992f7; opacity: 0; transition: opacity .14s; }
.range-slider::-moz-range-thumb { width: 6px; height: 6px; border: 2px solid #ede8ff; border-radius: 50%; background: #a992f7; opacity: 0; }
.range-slider:hover::-webkit-slider-thumb, .range-slider:focus-visible::-webkit-slider-thumb { opacity: 1; }
.range-slider:hover::-moz-range-thumb, .range-slider:focus-visible::-moz-range-thumb { opacity: 1; }
.seek-slider { min-width: 0; flex: 1; }
.player-extras { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; }
.volume-icon { width: 22px; height: 25px; }
.volume-icon svg { width: 16px; height: 16px; }
.volume-slider { width: clamp(52px, 8vw, 100px); }
.queue-icon { width: 25px; height: 25px; margin-left: 4px; }
.queue-icon svg { width: 15px; height: 15px; }
.toast { position: fixed; z-index: 5; right: 50%; bottom: 103px; max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px; border: 1px solid #ffffff13; border-radius: 8px; background: #252439; box-shadow: 0 6px 18px #15142125; color: #fff; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(50%, 8px); transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translate(50%, 0); }

@media (min-width: 1420px) {
  .content-scroll { padding-right: 65px; padding-left: 65px; }
  .topbar { padding-right: 65px; padding-left: 65px; }
  .hero { min-height: 265px; }
}
@media (max-width: 1050px) {
  .tracking-eye { width: 33px; height: 23px; }
  .tracking-pupil { width: 10px; height: 10px; }
  .sidebar { width: 205px; padding-right: 14px; padding-left: 14px; }
  .main-content { margin-left: 205px; }
  .topbar { padding-right: 29px; padding-left: 29px; }
  .content-scroll { padding-right: 29px; padding-left: 29px; }
  .player-bar { grid-template-columns: minmax(170px, 1fr) minmax(230px, 1.25fr) minmax(110px, .7fr); column-gap: 14px; padding-right: 20px; padding-left: 20px; }
  .now-playing { gap: 8px; }
  .player-like { display: none; }
  .row-folder { display: none; }
  .list-header, .song-row { grid-template-columns: 27px minmax(130px, 2fr) minmax(80px, 1fr) 42px 25px; }
  .list-header > :nth-child(4), .song-row > :nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .app-shell { padding-bottom: 119px; }
  .sidebar { inset: auto 0 0; width: 100%; height: 56px; flex-direction: row; align-items: center; justify-content: space-around; padding: 0 8px; border-top: 1px solid #edeef4; border-right: 0; background: #fff; }
  .brand, .nav-caption, .library-heading, .sidebar-divider, .library-nav, .sidebar-note, .profile-button { display: none; }
  .main-nav { display: contents; }
  .nav-link { min-height: 39px; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 12px; font-size: 8px; }
  .nav-link svg { width: 16px; height: 16px; }
  .youtube-link .youtube-external-icon { display: none; }
  .nav-link.active { background: transparent; color: #7656e8; }
  .main-content { min-height: calc(100vh - 119px); margin-left: 0; }
  .topbar { height: 57px; padding-right: 17px; padding-left: 17px; }
  .content-scroll { padding: 16px 17px 14px; }
  .hero { min-height: 231px; }
  .hero-copy { width: 73%; padding: 24px 0 24px 21px; }
  .hero h1 { font-size: clamp(24px, 5.1vw, 33px); }
  .hero-copy > p { max-width: 230px; font-size: 9px; }
  .hero-art { right: -47px; width: 41%; opacity: .75; }
  .art-disc { width: 100px; height: 100px; }
  .disc-label { width: 39px; height: 39px; border-width: 4px; }
  .orbit-one { width: 195px; height: 195px; }
  .orbit-two { width: 145px; height: 145px; }
  .library-section { margin-top: 21px; }
  .section-heading h2 { font-size: 17px; }
  .section-heading p { max-width: 200px; line-height: 1.5; }
  .search-box { width: 146px; height: 31px; }
  .list-header, .song-row { grid-template-columns: 22px minmax(118px, 1fr) minmax(55px, .55fr) 38px 23px; column-gap: 7px; }
  .list-header { padding-right: 8px; padding-left: 8px; font-size: 7px; }
  .song-row { padding-right: 8px; padding-left: 8px; }
  .list-header > :nth-child(4), .song-row > :nth-child(4) { display: none; }
  .row-title { gap: 6px; }
  .track-art { width: 30px; height: 30px; }
  .player-bar { bottom: 56px; height: 63px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 0 13px; }
  .player-cover { width: 37px; height: 37px; }
  .now-playing-info strong { max-width: 34vw; font-size: 9px; }
  .now-playing-info > span { max-width: 34vw; font-size: 8px; }
  .player-center { width: auto; }
  .player-controls { gap: 8px; }
  .player-controls .control-secondary, .player-controls .skip-button { width: 20px; }
  .player-controls .control-secondary svg { width: 12px; height: 12px; }
  .play-button { width: 29px; height: 29px; }
  .seek-row { position: absolute; right: 13px; bottom: 2px; left: 13px; width: auto; gap: 6px; }
  .time-label { min-width: 22px; font-size: 7px; }
  .player-extras { display: none; }
  .toast { bottom: 131px; }
  .page-footer { font-size: 7px; }
}
@media (max-width: 430px) {
  .local-indicator { font-size: 7px; }
  .top-folder-button { height: 31px; padding: 0 8px; font-size: 9px; }
  .history-buttons { gap: 6px; }
  .circle-button { width: 26px; height: 26px; }
  .topbar { padding-right: 12px; padding-left: 12px; }
  .content-scroll { padding-right: 12px; padding-left: 12px; }
  .hero-copy { width: 84%; padding-left: 16px; }
  .hero-art { right: -84px; width: 56%; opacity: .54; }
  .hero h1 { font-size: 26px; }
  .section-heading { gap: 8px; }
  .section-heading p { max-width: 168px; }
  .search-box { width: 112px; gap: 5px; padding-right: 6px; padding-left: 6px; }
  .search-box kbd { display: none; }
  .list-header, .song-row { grid-template-columns: 18px minmax(100px, 1fr) 37px 19px; column-gap: 6px; }
  .list-header > :nth-child(3), .song-row > :nth-child(3) { display: none; }
  .list-header { padding-right: 7px; padding-left: 7px; }
  .song-row { min-height: 49px; padding-right: 6px; padding-left: 6px; }
  .row-text strong { font-size: 9px; }
  .row-text small { font-size: 7px; }
  .page-footer > :last-child { max-width: 120px; text-align: right; }
  .player-bar { padding-right: 9px; padding-left: 9px; }
  .now-playing { gap: 6px; }
  .player-cover { width: 33px; height: 33px; }
  .now-playing-info strong, .now-playing-info > span { max-width: 31vw; }
  .player-controls { gap: 5px; }
  .player-controls .control-secondary, .player-controls .skip-button { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Give the library the warmer, more considered feel of an album sleeve. */
:root {
  background: #f6f5f1;
  --purple: #7656e8;
}

body { background: #f6f5f1; }
.sidebar { background: #fffefa; border-color: #eae8e2; }
.brand { font-size: 28px; }
.main-content { background: #f6f5f1; }
.topbar { border-color: #eae8e2; background: rgb(246 245 241 / 94%); }
.circle-button { width: 33px; height: 33px; border-color: #e8e5df; background: #fffefa; box-shadow: 0 2px 8px #38332408; }
.top-folder-button { min-height: 37px; border-color: #e4e1db; background: #fffefa; font-size: 11px; }
.content-scroll { max-width: 1340px; padding-top: 33px; padding-right: 55px; padding-left: 55px; }
.hero { min-height: 302px; border-radius: 16px; background: radial-gradient(ellipse at 86% 87%, #64508c 0, transparent 32%), linear-gradient(116deg, #211e33 0%, #292341 57%, #393052 100%); box-shadow: 0 13px 38px #27223b22; }
.hero::before { top: -216px; right: -3px; width: 495px; height: 495px; border-color: #ffffff0d; }
.hero::after { top: -159px; right: 55px; width: 379px; height: 379px; border-color: #ffffff0d; }
.hero-copy { width: 66%; padding-left: 45px; }
.eyebrow { gap: 9px; color: #d0c4ff; font-size: 9px; letter-spacing: 1.7px; }
.eyebrow-dot { width: 6px; height: 6px; background: #c1a4ff; box-shadow: 0 0 12px #c39eff; }
.hero h1 { margin: 18px 0 11px; font-size: clamp(38px, 4.1vw, 54px); letter-spacing: -2.2px; line-height: 1.06; }
.hero h1 span { color: #cbbaff; letter-spacing: -1.7px; }
.hero-copy > p { max-width: 390px; color: #c9c5d4; font-size: 12px; line-height: 1.8; }
.primary-button { min-height: 43px; gap: 10px; padding: 0 15px; border-radius: 8px; background: linear-gradient(110deg, #9677f2, #8063e9); box-shadow: 0 5px 16px #7654df5e; font-size: 11px; }
.primary-button:hover { background: linear-gradient(110deg, #a68cf9, #9076ee); }
.primary-button svg { width: 16px; height: 16px; }
.hero-art { width: 43%; }
.art-disc { width: 164px; height: 164px; background: repeating-radial-gradient(circle at center, #211f2b 0, #211f2b 2px, #373241 3px, #272330 5px, #211f2b 7px, #211f2b 8px); box-shadow: 0 0 66px #ad8cff38, 16px 20px 39px #0b091954; }
.disc-label { width: 58px; height: 58px; border: 6px solid #b6a1fb; background: radial-gradient(circle at 34% 28%, #ebc998, #ac7be3 58%, #6d559f); }
.disc-bars { height: 18px; }
.sound-wave { bottom: 44px; height: 19px; opacity: .64; }
.sound-wave i:nth-child(3n) { height: 13px; }
.sound-wave i:nth-child(3n + 1) { height: 6px; }
.sound-wave i:nth-child(3n + 2) { height: 18px; }
.note-one { top: 51px; font-size: 28px; }
.note-two { bottom: 55px; font-size: 33px; }
.art-caption { right: 30px; bottom: 18px; color: #b4abc9; font-size: 8px; letter-spacing: 1.5px; }

.quick-picks { margin-top: 34px; }
.quick-picks[hidden] { display: none; }
.quick-picks-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.quick-picks-heading h2 { margin: 5px 0 0; color: #29293a; font-size: 22px; font-weight: 700; letter-spacing: -.75px; }
.quick-picks-note { padding-bottom: 3px; color: #9b98a0; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.music-wheel { position: relative; display: grid; min-height: 350px; grid-template-columns: minmax(215px, .82fr) minmax(0, 1.18fr); align-items: center; gap: 28px; overflow: hidden; padding: 30px 37px 31px; border: 1px solid #393447; border-radius: 17px; background: radial-gradient(ellipse at 14% 0%, #9e7b5232 0, transparent 36%), radial-gradient(ellipse at 100% 100%, #7864bb2b 0, transparent 40%), linear-gradient(120deg, #24212c, #1e1d29 54%, #292434); box-shadow: 0 14px 34px #28223220; color: #fff; }
.music-wheel::before { position: absolute; inset: 12px; border: 1px solid #ffffff0c; border-radius: 11px; content: ""; pointer-events: none; }
.wheel-feature { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.wheel-feature-kicker { display: flex; align-items: center; gap: 8px; color: #c1b6ce; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; }
.wheel-feature-kicker > span { color: #d2aa7c; font-size: 12px; }
.wheel-cover-button { position: relative; width: min(100%, 230px); aspect-ratio: 1; padding: 0; border: 1px solid #ffffff32; border-radius: 9px; background: transparent; box-shadow: 0 17px 35px #09080e66; cursor: pointer; isolation: isolate; transition: transform .25s, box-shadow .25s; }
.wheel-cover-button:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 22px 42px #09080e80; }
.wheel-feature-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 15px; border-radius: inherit; background: radial-gradient(ellipse at 20% 0%, #ffffff50, transparent 45%), linear-gradient(145deg, var(--cover-one), var(--cover-two)); color: #fff; text-align: left; }
.wheel-feature-cover::before, .wheel-feature-cover::after { position: absolute; z-index: -1; border: 1px solid #ffffff47; border-radius: 50%; content: ""; }
.wheel-feature-cover::before { top: 15%; right: -19%; width: 76%; aspect-ratio: 1; box-shadow: 0 0 0 12px #ffffff10, 0 0 0 26px #ffffff0b; }
.wheel-feature-cover::after { bottom: -38%; left: -17%; width: 83%; aspect-ratio: 1; background: linear-gradient(135deg, #ffffff25, transparent 55%); }
.wheel-cover-edition { position: relative; z-index: 1; color: #ffffffc7; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.wheel-cover-glyph { position: absolute; top: 50%; left: 50%; color: #ffffffd9; font-family: "Playfair Display", serif; font-size: 87px; line-height: 1; text-shadow: 0 5px 24px #20152d45; transform: translate(-50%, -54%); }
.wheel-cover-title, .wheel-cover-artist { position: relative; z-index: 1; max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 8px #21152b69; }
.wheel-cover-title { margin-top: auto; font-size: 15px; font-weight: 800; }
.wheel-cover-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.wheel-cover-artist { margin-top: 4px; color: #ffffffc9; font-size: 9px; }
.wheel-cover-inner-disc { position: absolute; right: -22%; bottom: -37%; width: 66%; aspect-ratio: 1; border: 1px solid #ffffff3b; border-radius: 50%; box-shadow: 0 0 0 9px #ffffff0a, 0 0 0 19px #ffffff09; }
.wheel-cover-play { position: absolute; right: 12px; bottom: 12px; display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #ffffff90; border-radius: 50%; background: #fff; box-shadow: 0 4px 15px #17131f55; color: #31283b; opacity: 0; transform: translateY(5px); transition: opacity .18s, transform .18s; }
.wheel-cover-play svg { width: 15px; height: 15px; fill: currentColor; }
.wheel-cover-button:hover .wheel-cover-play, .wheel-cover-button:focus-visible .wheel-cover-play, .wheel-cover-button.is-playing .wheel-cover-play { opacity: 1; transform: translateY(0); }
.wheel-track-number, .wheel-feature-status { color: #aaa4b6; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.wheel-feature-status { display: flex; align-items: center; gap: 7px; color: #8f899a; font-size: 7px; }
.wheel-feature-status > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: #b6aa80; }
.wheel-cover-button.is-playing ~ .wheel-feature-status > span:first-child { background: #81c5a6; box-shadow: 0 0 9px #81c5a6; }
.wheel-picker { position: relative; z-index: 1; min-width: 0; }
.wheel-picker-heading { display: flex; justify-content: space-between; gap: 10px; color: #c9bdd6; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.wheel-picker-heading > span:last-child { overflow: hidden; color: #827a8d; text-overflow: ellipsis; white-space: nowrap; }
.music-wheel-list { position: relative; height: 300px; overflow: hidden; margin: 9px 0 0; perspective: 650px; touch-action: pan-x; }
.music-wheel.is-compact .music-wheel-list { height: 180px; }
.music-wheel-list::before, .music-wheel-list::after { position: absolute; z-index: 2; right: 0; left: 0; height: 50px; content: ""; pointer-events: none; }
.music-wheel-list::before { top: 0; background: linear-gradient(#211f2a, transparent); }
.music-wheel-list::after { bottom: 0; background: linear-gradient(transparent, #211f2a); }
.wheel-track-option { position: absolute; top: 50%; left: 0; display: flex; width: 100%; min-width: 0; min-height: 54px; align-items: center; gap: 12px; padding: 7px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #fff; cursor: pointer; text-align: left; transform: translateY(calc(-50% + var(--wheel-offset) * 60px)) translateX(var(--wheel-curve, 0)) scale(var(--wheel-scale, .9)); opacity: var(--wheel-opacity, .35); filter: blur(var(--wheel-blur, 0)); transition: transform .28s cubic-bezier(.2,.7,.25,1), opacity .24s, filter .24s, background .2s, border-color .2s; }
.wheel-track-option[data-wheel-offset="-2"] { --wheel-curve: 19px; --wheel-scale: .86; --wheel-opacity: .2; --wheel-blur: .5px; }
.wheel-track-option[data-wheel-offset="-1"] { --wheel-curve: 6px; --wheel-scale: .94; --wheel-opacity: .62; }
.wheel-track-option[data-wheel-offset="0"] { --wheel-curve: 0px; --wheel-scale: 1; --wheel-opacity: 1; }
.wheel-track-option[data-wheel-offset="1"] { --wheel-curve: 6px; --wheel-scale: .94; --wheel-opacity: .62; }
.wheel-track-option[data-wheel-offset="2"] { --wheel-curve: 19px; --wheel-scale: .86; --wheel-opacity: .2; --wheel-blur: .5px; }
.wheel-track-option.is-selected { z-index: 1; border-color: #ffffff21; background: linear-gradient(105deg, #ffffff12, #ffffff08); box-shadow: 0 7px 22px #09080e20; }
.wheel-track-option:hover, .wheel-track-option:focus-visible { z-index: 2; border-color: #ffffff29; background: #ffffff0e; opacity: 1; filter: none; }
.wheel-track-index { width: 22px; flex: 0 0 auto; color: #898293; font-size: 8px; font-weight: 800; letter-spacing: .5px; }
.wheel-track-option.is-selected .wheel-track-index { color: #d5b58d; }
.wheel-track-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.wheel-track-copy strong, .wheel-track-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wheel-track-copy strong { color: #f2edf3; font-size: 10px; font-weight: 700; }
.wheel-track-copy > span { color: #9e97a7; font-size: 8px; }
.wheel-track-glyph { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid #ffffff28; border-radius: 6px; color: #ffffffd9; font-family: "Playfair Display", serif; font-size: 17px; }
.wheel-track-hint { display: grid; width: 17px; flex: 0 0 auto; place-items: center; color: #d3b48b; }
.wheel-track-hint svg { width: 13px; height: 13px; fill: currentColor; }
.wheel-track-option:not(.is-selected) .wheel-track-hint { display: none; }
.wheel-picker-bottom { display: flex; align-items: center; gap: 13px; }
.wheel-position-label { color: #b7afc0; font-size: 8px; font-weight: 700; }
#wheel-position-label strong { color: #e5c69d; font-size: 9px; }
#wheel-position-label i { margin: 0 3px; color: #776f7d; font-style: normal; }
.wheel-indicators { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: center; gap: 5px; }
.wheel-indicator { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 5px; background: #706978; cursor: pointer; transition: width .2s, background .2s; }
.wheel-indicator.is-active { width: 19px; background: #d6b58c; }
.wheel-navigation { display: flex; gap: 6px; }
.wheel-nav-button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #ffffff22; border-radius: 50%; background: #ffffff08; color: #e5dfe9; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.wheel-nav-button:hover:not(:disabled) { border-color: #d6b58c80; background: #d6b58c20; color: #efd3ac; }
.wheel-nav-button:disabled { cursor: default; opacity: .35; }
.wheel-nav-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.wheel-watermark { position: absolute; bottom: 13px; left: 18px; color: #ffffff30; font-size: 6px; font-weight: 800; letter-spacing: 1.2px; }

.library-section { margin-top: 37px; }
.section-heading { min-height: 67px; margin-bottom: 16px; }
.section-heading h2 { margin-top: 6px; font-size: 23px; letter-spacing: -.8px; }
.section-heading p { font-size: 11px; }
.section-kicker { font-size: 9px; letter-spacing: 1.45px; }
.search-box { width: 220px; height: 38px; padding: 0 11px; border-color: #e7e5df; border-radius: 8px; background: #fffefa; }
.search-box input { font-size: 11px; }
.folder-location { min-height: 39px; border-color: #e8e2f4; border-radius: 8px; background: #fffefa; font-size: 10px; }
.empty-state { position: relative; display: grid; min-height: 228px; grid-template-columns: minmax(0, 1.1fr) minmax(200px, .9fr); align-items: center; overflow: hidden; padding: 20px 32px 20px 36px; border: 1px solid #eae6de; border-radius: 13px; background: radial-gradient(ellipse at 86% 20%, #f2edfb 0%, transparent 35%), #fffefa; text-align: left; }
.empty-state[hidden] { display: none; }
.empty-message { position: relative; z-index: 1; }
.empty-illustration { position: absolute; top: -10px; left: 229px; width: 80px; height: 80px; margin: 0; opacity: .58; transform: rotate(13deg); }
.empty-vinyl { width: 70px; height: 70px; background: repeating-radial-gradient(circle at center, #8b78d5 0, #8b78d5 2px, #a398dd 3px, #7460cf 5px, #7460cf 7px); }
.empty-vinyl > div { width: 19px; height: 19px; border: 5px solid #c1b2f2; }
.spark-a { top: 0; right: 0; }
.spark-b { bottom: 0; left: 0; }
.empty-kicker { color: #8e7ace; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }
.empty-state h3 { margin: 11px 0 7px; color: #302e3d; font-size: 21px; letter-spacing: -.55px; }
.empty-state p { max-width: 355px; margin: 0; color: #888692; font-size: 11px; line-height: 1.75; }
.text-button { margin-top: 13px; padding: 5px 0; color: #7154d4; font-size: 11px; }
.empty-cover-art { position: relative; width: min(100%, 320px); height: 179px; justify-self: end; }
.floating-cover { position: absolute; top: 16px; display: flex; width: 117px; height: 147px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 10px; border: 1px solid #ffffff56; border-radius: 5px; color: #fff; box-shadow: 0 10px 20px #37304723; }
.floating-cover::before { position: absolute; right: -32px; bottom: 25px; width: 110px; height: 110px; border: 1px solid #ffffff55; border-radius: 50%; box-shadow: 0 0 0 10px #ffffff15, 0 0 0 22px #ffffff0d; content: ""; }
.cover-sun { left: 12px; background: linear-gradient(145deg, #edaa70, #b95b54); transform: rotate(-10deg); }
.cover-night { top: 4px; left: 101px; background: linear-gradient(145deg, #6055a3, #25294c); transform: rotate(3deg); }
.cover-moss { left: 192px; background: linear-gradient(145deg, #93a27c, #44564a); transform: rotate(10deg); }
.cover-label { z-index: 1; color: #ffffffb8; font-size: 6px; font-weight: 700; letter-spacing: .7px; }
.cover-glyph { z-index: 1; align-self: center; color: #ffffffd9; font-family: "Playfair Display", serif; font-size: 48px; line-height: .9; }
.cover-word { z-index: 1; font-family: "Playfair Display", serif; font-size: 15px; font-style: italic; line-height: .98; }
.cover-art-caption { position: absolute; right: 9px; bottom: 0; color: #a09aa9; font-size: 7px; font-weight: 700; letter-spacing: 1px; }
.song-list-wrap { border-color: #eae8e2; border-radius: 10px; background: #fffefa; }
.list-header { min-height: 37px; padding-right: 17px; padding-left: 17px; border-color: #f0eee9; font-size: 9px; }
.song-row { min-height: 65px; padding: 8px 17px; border-color: #f1efea; }
.song-row:hover, .song-row.is-playing { background: #f8f6ff; }
.row-title { gap: 11px; }
.track-art { width: 42px; height: 42px; border-radius: 7px; }
.row-text strong { font-size: 12px; }
.row-text small, .row-album, .row-folder, .row-duration { font-size: 10px; }
.song-like-button svg { width: 16px; height: 16px; }
.page-footer { padding-top: 20px; font-size: 9px; }

.player-bar { height: 91px; padding-right: 34px; padding-left: 34px; border-top: 1px solid #ffffff11; background: linear-gradient(110deg, #191927 0%, #201d31 56%, #1c1c2a 100%); box-shadow: 0 -9px 30px #24203318; }
.player-cover { width: 48px; height: 48px; border-radius: 8px; }
.now-playing-info strong { font-size: 12px; }
.now-playing-info > span { font-size: 10px; }
.play-button { width: 36px; height: 36px; box-shadow: 0 2px 14px #ffffff20; }
.control-secondary svg, .skip-button svg { width: 16px; height: 16px; }
.time-label { font-size: 9px; }
.range-slider::-webkit-slider-runnable-track { height: 4px; }
.range-slider::-moz-range-track, .range-slider::-moz-range-progress { height: 4px; }
.sidebar-note { border-color: #ebe7f5; border-radius: 12px; background: linear-gradient(145deg, #f8f5ff, #fffefa); }

@media (min-width: 1420px) {
  .content-scroll { padding-right: 72px; padding-left: 72px; }
  .topbar { padding-right: 72px; padding-left: 72px; }
}
@media (max-width: 1050px) {
  .content-scroll { padding-right: 31px; padding-left: 31px; }
  .hero { min-height: 278px; }
  .hero-copy { padding-left: 32px; }
  .music-wheel { gap: 20px; padding-right: 27px; padding-left: 27px; }
  .wheel-cover-button { width: min(100%, 200px); }
  .wheel-cover-glyph { font-size: 72px; }
  .empty-state { padding-right: 22px; padding-left: 27px; }
  .empty-cover-art { transform: scale(.87); transform-origin: right center; }
}
@media (max-width: 760px) {
  .content-scroll { padding: 19px 17px 14px; }
  .topbar { background: rgb(246 245 241 / 96%); }
  .hero { min-height: 268px; border-radius: 14px; }
  .hero-copy { width: 77%; padding: 25px 0 25px 23px; }
  .hero h1 { font-size: clamp(35px, 7vw, 46px); }
  .hero-copy > p { max-width: 295px; font-size: 11px; }
  .hero-art { right: -30px; width: 43%; opacity: .77; }
  .art-disc { width: 126px; height: 126px; }
  .disc-label { width: 49px; height: 49px; }
  .orbit-one { width: 215px; height: 215px; }
  .orbit-two { width: 165px; height: 165px; }
  .quick-picks { margin-top: 27px; }
  .music-wheel { min-height: 0; grid-template-columns: minmax(150px, .78fr) minmax(0, 1.22fr); gap: 18px; padding: 26px 22px 29px; }
  .wheel-cover-button { width: min(100%, 180px); }
  .music-wheel-list { height: 264px; }
  .music-wheel.is-compact .music-wheel-list { height: 168px; }
  .wheel-track-option { gap: 8px; padding-right: 8px; padding-left: 8px; }
  .wheel-track-glyph { width: 27px; height: 27px; }
  .library-section { margin-top: 29px; }
  .section-heading h2 { font-size: 21px; }
  .section-heading p { font-size: 10px; }
  .search-box { width: 165px; height: 35px; }
  .empty-state { min-height: 216px; grid-template-columns: minmax(0, 1.15fr) minmax(115px, .85fr); padding: 19px 17px 19px 20px; }
  .empty-state h3 { font-size: 18px; }
  .empty-state p { font-size: 10px; }
  .empty-illustration { display: none; }
  .empty-cover-art { width: 225px; transform: scale(.7); transform-origin: right center; }
  .empty-kicker { font-size: 7px; }
  .player-bar { height: 63px; padding-right: 13px; padding-left: 13px; }
}
@media (max-width: 430px) {
  .content-scroll { padding-right: 12px; padding-left: 12px; }
  .hero { min-height: 245px; }
  .hero-copy { width: 87%; padding-left: 17px; }
  .hero h1 { font-size: 36px; }
  .hero-copy > p { max-width: 256px; font-size: 10px; }
  .hero-art { right: -84px; width: 59%; opacity: .48; }
  .quick-picks-heading h2 { font-size: 18px; }
  .quick-picks-note { font-size: 7px; text-align: right; }
  .quick-picks-heading { align-items: start; }
  .music-wheel { grid-template-columns: 1fr; gap: 19px; padding: 25px 17px 27px; }
  .wheel-cover-button { width: min(61vw, 205px); }
  .wheel-feature { gap: 10px; }
  .wheel-cover-glyph { font-size: 78px; }
  .wheel-picker-heading { padding: 0 2px; }
  .music-wheel-list { height: 251px; margin-top: 5px; }
  .music-wheel.is-compact .music-wheel-list { height: 156px; }
  .wheel-track-option { min-height: 49px; transform: translateY(calc(-50% + var(--wheel-offset) * 51px)) translateX(var(--wheel-curve, 0)) scale(var(--wheel-scale, .9)); }
  .wheel-watermark { display: none; }
  .section-heading h2 { font-size: 19px; }
  .section-heading p { max-width: 162px; }
  .search-box { width: 117px; }
  .empty-state { min-height: 186px; grid-template-columns: minmax(0, 1.4fr) minmax(78px, .6fr); padding: 15px 8px 15px 14px; }
  .empty-state h3 { font-size: 16px; }
  .empty-state p { max-width: 235px; font-size: 9px; }
  .empty-cover-art { width: 190px; transform: scale(.55); }
  .cover-art-caption { font-size: 6px; }
}

a.youtube-link { display: none; }
.youtube-link { color: #65515b; font-weight: 700; }
.youtube-link > svg:first-child { color: #ef555b; }
.youtube-link:hover { background: #fff0ed; color: #c34048; }
.youtube-link.active { background: #fff0ed; color: #c34048; }
.main-content.youtube-mode .local-indicator, .main-content.youtube-mode #top-folder-button { display: none; }
.content-scroll.youtube-mode > :not(#youtube-view) { display: none; }
.youtube-view:not([hidden]) { display: block; }
.youtube-view[hidden] { display: none; }
.top-folder-button[hidden], .local-indicator[hidden] { display: none; }
.youtube-heading { position: relative; display: flex; min-height: 236px; align-items: center; overflow: hidden; padding: 31px 39px; border: 1px solid #312b3c; border-radius: 16px; background: radial-gradient(ellipse at 79% 105%, #e5847b35 0, transparent 34%), radial-gradient(ellipse at 93% 8%, #b690d131 0, transparent 35%), linear-gradient(118deg, #211e30 0%, #342737 54%, #4c3439 100%); box-shadow: 0 13px 36px #27213c1e; color: white; }
.youtube-heading::after { position: absolute; top: -136px; right: -27px; width: 370px; height: 370px; border: 1px solid #ffffff17; border-radius: 50%; box-shadow: 0 0 0 29px #ffffff06, 0 0 0 58px #ffffff05; content: ""; }
.youtube-heading-copy { position: relative; z-index: 1; width: 68%; }
.youtube-eyebrow, .youtube-now-label { display: flex; align-items: center; gap: 8px; color: #e4c7c5; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }
.youtube-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #f17c77; box-shadow: 0 0 11px #fb9189; }
.youtube-heading h1 { margin: 15px 0 9px; font-size: clamp(34px, 4vw, 49px); font-weight: 600; letter-spacing: -2px; line-height: 1.06; }
.youtube-heading h1 span { color: #eda59e; font-family: "Playfair Display", serif; font-style: italic; }
.youtube-heading p { max-width: 370px; margin: 0; color: #d0c6cb; font-size: 11px; line-height: 1.8; }
.youtube-heading-art { position: absolute; top: 0; right: 0; width: 39%; height: 100%; }
.youtube-heading-disc { position: absolute; top: 50%; left: 52%; display: grid; width: 136px; height: 136px; place-items: center; border: 1px solid #ffffff26; border-radius: 50%; background: repeating-radial-gradient(circle at center, #272331 0, #272331 2px, #64505b 3px, #342a36 5px, #26212e 7px, #26212e 8px); box-shadow: 0 0 46px #ef968433; transform: translate(-50%, -50%) rotate(-19deg); }
.youtube-heading-disc span { display: grid; width: 48px; height: 48px; place-items: center; border: 5px solid #f3b3a5; border-radius: 50%; background: linear-gradient(140deg, #f1cfac, #de7e83); color: #fff; font-family: "Playfair Display", serif; font-size: 20px; }
.youtube-heading-art > i { position: absolute; bottom: 47px; left: 18%; width: 3px; border-radius: 4px; background: #e797a0; }
.youtube-heading-art > i:nth-of-type(1) { height: 9px; }
.youtube-heading-art > i:nth-of-type(2) { left: 27%; height: 15px; }
.youtube-heading-art > i:nth-of-type(3) { left: 36%; height: 7px; }
.youtube-heading-art > i:nth-of-type(4) { left: 45%; height: 13px; }
.youtube-heading-spark { position: absolute; top: 42px; right: 20%; color: #f5c3a4; font-size: 22px; }
.youtube-tools, .youtube-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.youtube-tools { margin: 31px 0 15px; }
.youtube-tools h2, .youtube-results-heading h2 { margin: 5px 0 0; color: #302e3d; font-size: 22px; letter-spacing: -.7px; }
.youtube-search-form { display: flex; width: min(370px, 47%); min-height: 41px; align-items: center; gap: 8px; padding: 4px 5px 4px 11px; border: 1px solid #e8e3df; border-radius: 9px; background: #fffefa; box-shadow: 0 3px 12px #382c1c08; }
.youtube-search-form > svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #99939c; stroke-linecap: round; stroke-width: 1.7; }
.youtube-search-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #343244; font-size: 10px; }
.youtube-search-form input::placeholder { color: #aaa5ac; }
.youtube-search-form button { min-height: 31px; padding: 0 13px; border: 0; border-radius: 6px; background: #292536; color: white; cursor: pointer; font-size: 9px; font-weight: 700; transition: background .15s; }
.youtube-search-form button:hover { background: #aa464f; }
.youtube-feature { display: grid; grid-template-columns: minmax(0, 1fr) 232px; overflow: hidden; border: 1px solid #eae6df; border-radius: 12px; background: #fffefa; box-shadow: 0 5px 17px #302a1809; }
.youtube-feature[hidden] { display: none; }
.youtube-player-frame { position: relative; display: grid; aspect-ratio: 16 / 9; min-width: 0; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 51% 50%, #322a43 0, #1e1c29 56%, #16151d 100%); }
.youtube-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-player-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; color: #fff; text-align: center; }
.youtube-play-emblem { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 4px; border: 1px solid #ffffff40; border-radius: 50%; background: #ffffff13; color: #fff; }
.youtube-play-emblem svg { width: 19px; height: 19px; fill: currentColor; }
.youtube-player-empty strong { font-size: 13px; font-weight: 700; }
.youtube-player-empty > span:last-child { color: #c0bac9; font-size: 9px; }
.youtube-now-playing { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 22px 17px; }
.youtube-now-label { color: #a9a2af; font-size: 7px; letter-spacing: 1px; }
.youtube-now-label > span { width: 6px; height: 6px; border-radius: 50%; background: #e4575d; box-shadow: 0 0 8px #e4575d6e; }
.youtube-now-meta { display: flex; min-width: 0; align-items: center; gap: 10px; }
.youtube-selected-art { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #f0b5a0, #a55064); color: #fff; font-family: "Playfair Display", serif; font-size: 21px; }
.youtube-now-meta > div { display: grid; min-width: 0; gap: 5px; }
.youtube-now-meta strong { overflow: hidden; color: #33303e; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; }
.youtube-now-meta > div > span { overflow: hidden; color: #96919c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.youtube-player-note { color: #a5a0a8; font-size: 8px; line-height: 1.6; }
.youtube-discovery-collections { display: grid; gap: 27px; margin-top: 29px; }
.youtube-collection-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 13px; }
.youtube-collection-heading h2 { margin: 5px 0 0; color: #302e3d; font-size: 20px; letter-spacing: -.6px; }
.youtube-artists-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.youtube-artist-card { display: grid; min-width: 0; justify-items: center; gap: 8px; padding: 14px 7px 12px; border: 1px solid #ebe7e1; border-radius: 10px; background: #fffefa; cursor: pointer; box-shadow: 0 4px 15px #302a1808; transition: transform .18s, border-color .18s, box-shadow .18s; }
.youtube-artist-card:hover, .youtube-artist-card:focus-visible { transform: translateY(-3px); border-color: #e8b7b3; box-shadow: 0 9px 20px #302a1812; }
.youtube-artist-avatar { display: grid; width: 58px; height: 58px; overflow: hidden; place-items: center; border: 2px solid #f0d9d1; border-radius: 50%; background: linear-gradient(145deg, #433249, #bd777b); color: white; font-family: "Playfair Display", serif; font-size: 21px; }
.youtube-artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.youtube-artist-card strong { width: 100%; overflow: hidden; color: #393543; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.youtube-artist-card > span:last-child { color: #99929b; font-size: 8px; }
.youtube-playlists-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.youtube-playlist-card { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 9px; border: 1px solid #ebe7e1; border-radius: 10px; background: #fffefa; cursor: pointer; text-align: left; box-shadow: 0 4px 15px #302a1808; transition: transform .18s, border-color .18s, box-shadow .18s; }
.youtube-playlist-card:hover, .youtube-playlist-card:focus-visible { transform: translateY(-2px); border-color: #e8b7b3; box-shadow: 0 9px 20px #302a1812; }
.youtube-playlist-cover { position: relative; display: grid; width: 58px; height: 58px; flex: 0 0 auto; overflow: hidden; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #d29c83, #775266); }
.youtube-playlist-cover img { width: 100%; height: 100%; object-fit: cover; }
.youtube-playlist-play { position: absolute; right: 4px; bottom: 4px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #ffffff70; border-radius: 50%; background: #211e2bcc; color: #fff; opacity: 0; transform: translateY(3px); transition: opacity .16s, transform .16s; }
.youtube-playlist-card:hover .youtube-playlist-play, .youtube-playlist-card:focus-visible .youtube-playlist-play { opacity: 1; transform: translateY(0); }
.youtube-playlist-play svg { width: 10px; height: 10px; fill: currentColor; }
.youtube-playlist-details { display: grid; min-width: 0; gap: 5px; }
.youtube-playlist-details strong, .youtube-playlist-details > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.youtube-playlist-details strong { color: #383441; font-size: 9px; }
.youtube-playlist-details > span { color: #96909a; font-size: 8px; }
.youtube-results-section { margin-top: 31px; }
.youtube-results-heading { margin-bottom: 15px; }
.youtube-results-actions { display: flex; align-items: center; gap: 13px; }
.youtube-show-trending { padding: 5px 9px; border: 1px solid #e8d7d4; border-radius: 6px; background: #fffefa; color: #9e5555; cursor: pointer; font-size: 8px; font-weight: 700; }
.youtube-show-trending[hidden] { display: none; }
.youtube-region-label { padding-bottom: 4px; color: #9a9297; font-size: 8px; font-weight: 800; letter-spacing: .95px; }
.youtube-status { margin: 0 0 12px; padding: 13px 15px; border: 1px solid #eee8e3; border-radius: 8px; background: #fffefa; color: #89838c; font-size: 10px; line-height: 1.6; }
.youtube-status[hidden] { display: none; }
.youtube-status-error { border-color: #f0d5d1; background: #fff8f6; color: #a84b49; }
.youtube-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.youtube-video-card { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #ebe7e1; border-radius: 10px; background: #fffefa; cursor: pointer; text-align: left; box-shadow: 0 4px 15px #302a1808; transition: transform .18s, box-shadow .18s, border-color .18s; }
.youtube-video-card:hover, .youtube-video-card:focus-visible { transform: translateY(-3px); border-color: #e8b7b3; box-shadow: 0 10px 24px #302a1815; }
.youtube-video-card.is-active { border-color: #d97674; box-shadow: 0 0 0 2px #d9767422; }
.youtube-thumbnail { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #343043, #806879); }
.youtube-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.youtube-video-card:hover .youtube-thumbnail img { transform: scale(1.04); }
.youtube-thumbnail-play { position: absolute; right: 10px; bottom: 10px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #ffffff35; border-radius: 50%; background: #231f2dcf; color: #fff; opacity: .88; transition: background .17s, transform .17s; }
.youtube-thumbnail-play svg { width: 14px; height: 14px; fill: currentColor; }
.youtube-video-card:hover .youtube-thumbnail-play { transform: scale(1.08); background: #d84950; }
.youtube-video-details { display: grid; min-height: 62px; align-content: start; gap: 5px; padding: 11px 12px; }
.youtube-video-details strong { display: -webkit-box; overflow: hidden; color: #363241; font-size: 10px; font-weight: 700; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-video-details > span { overflow: hidden; color: #96919a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1050px) {
  .youtube-feature { grid-template-columns: minmax(0, 1fr) 190px; }
  .youtube-artists-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .youtube-playlists-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .youtube-results-grid { gap: 11px; }
}
@media (max-width: 760px) {
  .youtube-heading { min-height: 221px; padding: 25px 23px; }
  .youtube-heading-copy { width: 76%; }
  .youtube-heading h1 { font-size: clamp(32px, 6vw, 43px); }
  .youtube-heading-art { right: -32px; width: 43%; opacity: .73; }
  .youtube-heading-disc { width: 114px; height: 114px; }
  .youtube-heading-art > i { bottom: 34px; }
  .youtube-tools { align-items: stretch; flex-direction: column; gap: 12px; }
  .youtube-search-form { width: 100%; }
  .youtube-feature { grid-template-columns: 1fr; }
  .youtube-now-playing { gap: 10px; padding: 14px 16px; }
  .youtube-now-meta strong { font-size: 11px; }
  .youtube-player-note { margin-left: 52px; }
  .youtube-artists-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .youtube-playlists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .youtube-playlist-card { gap: 8px; padding: 7px; }
  .youtube-playlist-cover { width: 48px; height: 48px; }
  .youtube-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .youtube-video-details { padding: 9px 9px 10px; }
}
@media (max-width: 430px) {
  .youtube-heading { min-height: 208px; padding-right: 13px; padding-left: 16px; }
  .youtube-heading-copy { width: 85%; }
  .youtube-heading h1 { font-size: 32px; }
  .youtube-heading p { max-width: 240px; font-size: 10px; }
  .youtube-heading-art { right: -76px; width: 58%; opacity: .53; }
  .youtube-results-heading h2, .youtube-tools h2 { font-size: 19px; }
  .youtube-artist-card { padding: 10px 5px; }
  .youtube-artist-avatar { width: 48px; height: 48px; }
  .youtube-artist-card strong { font-size: 8px; }
  .youtube-results-actions { align-items: end; flex-direction: column-reverse; gap: 6px; }
  .youtube-region-label { max-width: 105px; font-size: 7px; text-align: right; }
  .youtube-results-grid { gap: 8px; }
  .youtube-video-details { min-height: 66px; }
  .youtube-video-details strong { font-size: 9px; }
  .youtube-video-details > span { font-size: 7px; }
  .youtube-thumbnail-play { right: 7px; bottom: 7px; width: 27px; height: 27px; }
}

.change-mode-button { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #e7e3f0; border-radius: 8px; background: #fff; color: #51456f; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .65px; transition: transform .18s, box-shadow .18s, background .18s, color .18s; }
.change-mode-button:hover { transform: translateY(-1px); box-shadow: 0 5px 15px #34274d17; }
.change-mode-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.sidebar-mode-button { justify-content: flex-start; width: 100%; margin-top: 9px; padding: 0 11px; }
.mode-eyebrow { color: #baa8dc; font-size: 8px; font-weight: 800; letter-spacing: 1.6px; }
.mode-wheel-items { position: absolute; inset: 0 auto 0 0; width: 56%; overflow: visible; touch-action: pan-x; }
.mode-wheel-items::before, .mode-wheel-items::after { display: none; }
.mode-wheel-arrows { display: flex; gap: 7px; }
.mode-wheel-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #ffffff23; border-radius: 50%; background: #ffffff09; color: #e9e2ee; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.mode-wheel-arrow:hover { transform: scale(1.07); border-color: #d0b7e966; background: #ffffff18; }
.mode-wheel-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mode-option { position: absolute; top: 50%; left: var(--arc-left); display: flex; width: min(100%, 230px); min-height: 43px; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; text-align: left; transform: translateY(calc(-50% + var(--arc-y))); opacity: .62; transition: transform .3s cubic-bezier(.2,.7,.25,1), opacity .2s, background .2s, border-color .2s, box-shadow .2s; }
.mode-option.is-selected { z-index: 1; min-height: 51px; border-color: #ffffff38; background: linear-gradient(105deg, #ffffff20, #ffffff0a); box-shadow: 0 9px 26px #08070c38; opacity: 1; }
.mode-option:not(.is-selected):hover, .mode-option:not(.is-selected):focus-visible { z-index: 2; border-color: #ffffff27; background: #ffffff12; opacity: 1; }
.mode-option-swatch { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #ffffff43; border-radius: 8px; background: radial-gradient(circle at 28% 22%, #ffffff80, transparent 35%), linear-gradient(145deg, var(--mode-color-one), var(--mode-color-two)); box-shadow: 0 4px 12px #08070c35; }
.mode-option-swatch > span { color: #ffffffed; font-family: "Playfair Display", serif; font-size: 18px; text-shadow: 0 2px 9px #24163570; }
.mode-option-name { min-width: 0; flex: 1; overflow: hidden; color: #f3edf6; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mode-selected-mark { color: #d4bbf2; font-size: 9px; }
.mode-preview { position: absolute; top: 0; right: 0; display: flex; width: 43%; height: 100%; flex-direction: column; align-items: flex-start; padding: 10px 8px 8px 16px; }
.mode-preview-art { position: relative; display: grid; width: 100%; max-width: 274px; height: 230px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #ffffff2c; border-radius: 17px; background: radial-gradient(ellipse at 25% 20%, #ffffff61, transparent 35%), radial-gradient(ellipse at 85% 76%, var(--preview-color-two), transparent 40%), linear-gradient(140deg, var(--preview-color-one), #1c1a29 80%); box-shadow: 0 18px 45px #08070c55, inset 0 1px #ffffff20; transition: background .25s; }
.mode-preview-art::before, .mode-preview-art::after { position: absolute; width: 168px; height: 168px; border: 1px solid #ffffff42; border-radius: 50%; content: ""; }
.mode-preview-art::before { transform: scale(1.32); opacity: .45; }
.mode-preview-art::after { width: 120px; height: 120px; transform: scale(1.5); opacity: .3; }
.mode-preview-glyph { z-index: 1; color: #fff; font-family: "Playfair Display", serif; font-size: 88px; line-height: 1; text-shadow: 0 8px 28px #15102088; }
.mode-preview-orbit { position: absolute; top: -54px; right: -23px; width: 155px; height: 155px; border: 1px solid #ffffff4a; border-radius: 50%; box-shadow: 0 0 0 17px #ffffff0c, 0 0 0 34px #ffffff09; }
.mode-preview-record { position: absolute; right: 18px; bottom: 18px; width: 39px; height: 39px; border: 1px solid #ffffff58; border-radius: 50%; background: repeating-radial-gradient(circle, #17131c66 0 3px, #ffffff14 4px 5px); }
.mode-preview-label { position: absolute; bottom: 15px; left: 17px; color: #ffffffc4; font-size: 7px; font-weight: 800; letter-spacing: 1.5px; }
.mode-preview-copy { display: grid; gap: 5px; margin-top: 13px; }
.mode-preview-kicker { color: #a89ab9; font-size: 7px; font-weight: 800; letter-spacing: 1.25px; }
.mode-preview-copy strong { color: #fff; font-family: "Playfair Display", serif; font-size: 19px; font-weight: 600; }
.mode-preview-copy > span:last-child { color: #aaa4b2; font-size: 9px; line-height: 1.45; }
.mode-apply-button { display: flex; min-height: 35px; align-items: center; gap: 8px; margin-top: auto; padding: 0 12px; border: 0; border-radius: 8px; background: linear-gradient(115deg, #a382e9, #7658cc); box-shadow: 0 5px 16px #7855d34a; color: #fff; cursor: pointer; font-size: 9px; font-weight: 800; transition: transform .18s, filter .18s; }
.mode-apply-button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.mode-apply-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mode-picker-footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mode-count { color: #d5bfdc; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.mode-wheel-hint { flex: 1; color: #827b8a; font-size: 7px; font-weight: 800; letter-spacing: 1px; }

.content-scroll.mode-picker-mode > :not(#mode-view) { display: none; }
#mode-view[hidden] { display: none; }
.mode-view { position: relative; min-height: 610px; padding: 34px 38px 24px; overflow: hidden; border: 1px solid #383345; border-radius: 20px; background: radial-gradient(ellipse at 3% 0%, #8a70bd25, transparent 39%), radial-gradient(ellipse at 98% 100%, #d78d7b19, transparent 35%), linear-gradient(135deg, #24212e, #191821); box-shadow: 0 18px 52px #211b3517; color: #f8f5fb; }
.mode-view::before { position: absolute; top: -260px; right: -110px; width: 550px; height: 550px; border: 1px solid #ffffff0c; border-radius: 50%; box-shadow: 0 0 0 42px #ffffff05, 0 0 0 96px #ffffff04; content: ""; pointer-events: none; }
.mode-view > * { position: relative; }
.mode-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mode-page-heading h1 { margin: 7px 0 6px; color: #fff; font-size: clamp(27px, 3.3vw, 39px); letter-spacing: -1.3px; }
.mode-page-heading p { margin: 0; color: #aaa4b2; font-size: 11px; line-height: 1.65; }
.mode-back-button { display: flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #ffffff25; border-radius: 8px; background: #ffffff09; color: #ded8e5; cursor: pointer; font-size: 9px; font-weight: 700; white-space: nowrap; transition: background .18s, border-color .18s; }
.mode-back-button:hover { border-color: #ffffff4c; background: #ffffff14; }
.mode-back-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mode-stage { position: relative; height: 475px; margin-top: 19px; border: 1px solid #ffffff12; border-radius: 17px; background: linear-gradient(110deg, #ffffff06, #ffffff02); }
.mode-stage .mode-wheel-items { width: 55%; }
.mode-stage .mode-option { width: min(100%, 290px); }
.mode-stage .mode-preview { width: 44%; padding: 19px 22px; }
.mode-stage .mode-preview-art { max-width: 390px; height: 285px; }
.mode-stage .mode-preview-glyph { font-size: 105px; }
.mode-stage .mode-preview-art::before { width: 205px; height: 205px; }
.mode-stage .mode-preview-art::after { width: 145px; height: 145px; }
.mode-stage .mode-preview-copy { gap: 7px; margin-top: 16px; }
.mode-stage .mode-preview-copy strong { font-size: 24px; }
.mode-stage .mode-preview-copy > span:last-child { max-width: 290px; font-size: 10px; }
.mode-stage .mode-apply-button { min-height: 39px; margin-top: 16px; padding: 0 15px; font-size: 10px; }
.mode-stage .mode-apply-button:disabled { cursor: default; filter: saturate(.55); opacity: .7; }
.mode-picker-footer { position: relative; display: flex; min-height: 36px; align-items: center; gap: 12px; margin-top: 14px; }
.mode-view .mode-count { color: #d5bfdc; }
.mode-view .mode-wheel-hint { color: #938b9c; }
.mode-page-note { margin-left: auto; color: #938b9c; font-size: 8px; }
.mode-view .mode-wheel-arrows { gap: 6px; }
.mode-view .mode-wheel-arrow { width: 32px; height: 32px; }
.sidebar-mode-button.active { border-color: var(--mode-border, #e7e3f0); background: var(--mode-soft, #eee9fb); color: var(--mode-accent, #7959d6); }

body[data-mode="violet"] { --mode-page: #090712; --mode-surface: rgb(13 10 24 / 86%); --mode-topbar: rgb(10 8 18 / 84%); --mode-border: #3b2b59; --mode-ink: #f1e9ff; --mode-accent: #c0a5ff; --mode-accent-two: #d3bfff; --mode-soft: #281b3d; --mode-gradient: linear-gradient(115deg, #8e5dec, #5635a8); --mode-glow: #a476ee28; }
body[data-mode="ocean"] { --mode-page: #030c12; --mode-surface: rgb(5 17 25 / 88%); --mode-topbar: rgb(4 13 19 / 86%); --mode-border: #183744; --mode-ink: #e7faff; --mode-accent: #62d8ef; --mode-accent-two: #91efff; --mode-soft: #0d2732; --mode-gradient: linear-gradient(115deg, #11758d, #1aa5bb); --mode-glow: #35c9e629; }
body[data-mode="forest"] { --mode-page: #030a06; --mode-surface: rgb(6 17 10 / 89%); --mode-topbar: rgb(4 12 7 / 86%); --mode-border: #1b3c28; --mode-ink: #edfff0; --mode-accent: #8edb9b; --mode-accent-two: #b5f0a1; --mode-soft: #10271a; --mode-gradient: linear-gradient(115deg, #398b51, #65a64d); --mode-glow: #5acb7428; }
body[data-mode="sunset"] { --mode-page: #100905; --mode-surface: rgb(25 14 7 / 89%); --mode-topbar: rgb(17 10 5 / 87%); --mode-border: #503119; --mode-ink: #fff3e3; --mode-accent: #ffbd69; --mode-accent-two: #ffd18d; --mode-soft: #38200e; --mode-gradient: linear-gradient(115deg, #d77b28, #a94a17); --mode-glow: #f28d3530; }
body[data-mode="rose"] { --mode-page: #100710; --mode-surface: rgb(24 10 21 / 89%); --mode-topbar: rgb(16 7 14 / 86%); --mode-border: #4b203d; --mode-ink: #ffedf7; --mode-accent: #f28bc0; --mode-accent-two: #ffb6d5; --mode-soft: #35172d; --mode-gradient: linear-gradient(115deg, #d84f91, #8d4bb1); --mode-glow: #e35da52b; }
body[data-mode="midnight"] { --mode-page: #080511; --mode-surface: rgb(15 8 25 / 88%); --mode-topbar: rgb(10 6 18 / 84%); --mode-border: #43264f; --mode-ink: #f7eafa; --mode-accent: #e18af4; --mode-accent-two: #f0adff; --mode-soft: #2c153b; --mode-gradient: linear-gradient(115deg, #bd55d4, #6337a5); --mode-glow: #ce60ee30; }
body[data-mode="mono"] { --mode-page: #04050b; --mode-surface: rgb(5 10 19 / 88%); --mode-topbar: rgb(5 8 16 / 83%); --mode-border: #27415a; --mode-ink: #e8f7ff; --mode-accent: #8cecff; --mode-accent-two: #8cecff; --mode-soft: #102b40; --mode-gradient: linear-gradient(115deg, #134d93, #27a9ce); --mode-glow: #42c7f126; }
body[data-mode="citrus"] { --mode-page: #020905; --mode-surface: rgb(3 15 8 / 88%); --mode-topbar: rgb(2 10 5 / 84%); --mode-border: #16482b; --mode-ink: #e8ffeF; --mode-accent: #57ff8e; --mode-accent-two: #a2ffb2; --mode-soft: #0c2b19; --mode-gradient: linear-gradient(115deg, #1cb35d, #08743b); --mode-glow: #2ee57b24; }
body[data-mode] { background-color: var(--mode-page); transition: background-color .3s; }
body[data-mode] .sidebar { border-color: var(--mode-border); background: var(--mode-surface); }
body[data-mode] .main-content { background: radial-gradient(ellipse at 96% 9%, var(--mode-glow), transparent 31%), var(--mode-page); transition: background .3s; }
body[data-mode] .topbar { border-color: var(--mode-border); background: var(--mode-topbar); }
body[data-mode] .brand-period, body[data-mode] .nav-link.active, body[data-mode] .tiny-icon-button:hover { color: var(--mode-accent); }
body[data-mode] .nav-link.active, body[data-mode] .nav-link:hover, body[data-mode] .tiny-icon-button:hover { background: var(--mode-soft); }
body[data-mode] .top-folder-button, body[data-mode] .change-mode-button, body[data-mode] .circle-button { border-color: var(--mode-border); background: var(--mode-surface); color: var(--mode-ink); }
body[data-mode] .top-folder-button:hover, body[data-mode] .change-mode-button:hover { border-color: var(--mode-accent-two); color: var(--mode-accent); }
body[data-mode] .primary-button, body[data-mode] .mode-apply-button { background: var(--mode-gradient); box-shadow: 0 5px 16px var(--mode-glow); }
body[data-mode] .primary-button:hover, body[data-mode] .mode-apply-button:hover { filter: brightness(1.08); }
body[data-mode] .play-button { background: var(--mode-gradient); box-shadow: 0 2px 14px var(--mode-glow); }
body[data-mode] .wheel-nav-button:hover:not(:disabled) { border-color: var(--mode-accent-two); color: var(--mode-accent-two); }
body[data-mode] .song-like-button.liked, body[data-mode] .player-like.liked { color: var(--mode-accent-two); }
body[data-mode] .hero h1 span { color: var(--mode-accent-two); }
body[data-mode] .quick-picks-heading h2, body[data-mode] .section-heading h2, body[data-mode] .youtube-tools h2, body[data-mode] .youtube-results-heading h2, body[data-mode] .youtube-collection-heading h2 { color: var(--mode-ink); }
body[data-mode] .search-box, body[data-mode] .song-list-wrap, body[data-mode] .empty-state, body[data-mode] .youtube-status, body[data-mode] .youtube-video-card, body[data-mode] .youtube-artist-card, body[data-mode] .youtube-playlist-card { border-color: var(--mode-border); background-color: var(--mode-surface); }
body[data-mode] .youtube-search-form { border-color: var(--mode-border); background: var(--mode-surface); }
body[data-mode] .youtube-search-form button { background: var(--mode-gradient); }
body[data-mode] .nav-count { color: var(--mode-accent); }
body[data-mode="mono"] { color: #e5eff7; }
body[data-mode="mono"] .liquid-background { opacity: .48; }
body[data-mode="mono"] .main-content { background: transparent; }
body[data-mode="mono"] .topbar { border-color: #b2eaff20; backdrop-filter: blur(12px); }
body[data-mode="mono"] .sidebar { border-color: #b2eaff20; backdrop-filter: blur(18px); }
body[data-mode="mono"] .brand, body[data-mode="mono"] .nav-caption, body[data-mode="mono"] .nav-link { color: #d0deea; }
body[data-mode="mono"] .nav-link:hover { color: #8cecff; }
body[data-mode="mono"] .nav-link.active, body[data-mode="mono"] .sidebar-mode-button.active { color: #8cecff; }
body[data-mode="mono"] .profile-button { border-color: #b2eaff20; }
body[data-mode="mono"] .profile-text strong, body[data-mode="mono"] .sidebar-note p { color: #e3f4ff; }
body[data-mode="mono"] .profile-text small, body[data-mode="mono"] .sidebar-note > span { color: #a6bdcf; }
body[data-mode="mono"] .sidebar-note { border-color: #b2eaff24; background: rgb(5 11 20 / 72%); }
body[data-mode="mono"] .sidebar-note .note-icon { background: #102b40; color: #8cecff; }
body[data-mode="mono"] .local-indicator { color: #a6bdcf; }
body[data-mode="mono"] .circle-button, body[data-mode="mono"] .top-folder-button { background: rgb(7 14 25 / 88%); color: #e5f3ff; }
body[data-mode="mono"] .section-heading h2, body[data-mode="mono"] .quick-picks-heading h2 { color: #e8f7ff; }
body[data-mode="mono"] .section-heading p, body[data-mode="mono"] .section-kicker { color: #a6bdcf; }
body[data-mode="mono"] .search-box, body[data-mode="mono"] .song-list-wrap, body[data-mode="mono"] .empty-state, body[data-mode="mono"] .folder-location { border-color: #b2eaff26; background: rgb(5 10 19 / 88%); color: #d0deea; }
body[data-mode="mono"] .search-box input, body[data-mode="mono"] .folder-location > span { color: #e5f3ff; }
body[data-mode="mono"] .song-row { border-color: #b2eaff12; }
body[data-mode="mono"] .song-row:hover, body[data-mode="mono"] .song-row.is-playing { background: #16304a99; }
body[data-mode="mono"] .list-header { border-color: #b2eaff20; color: #9cb4c7; }
body[data-mode="mono"] .row-text strong, body[data-mode="mono"] .empty-state h3 { color: #e8f7ff; }
body[data-mode="mono"] .row-text small, body[data-mode="mono"] .row-album, body[data-mode="mono"] .row-folder, body[data-mode="mono"] .row-duration, body[data-mode="mono"] .empty-state p { color: #a6bdcf; }
body[data-mode="mono"] .empty-kicker, body[data-mode="mono"] .folder-location > svg, body[data-mode="mono"] .folder-location button { color: #8cecff; }
body[data-mode="mono"] .page-footer { color: #a6bdcf; }
body[data-mode="mono"] .youtube-tools h2, body[data-mode="mono"] .youtube-results-heading h2, body[data-mode="mono"] .youtube-collection-heading h2 { color: #e8f7ff; }
body[data-mode="mono"] .youtube-status, body[data-mode="mono"] .youtube-video-card, body[data-mode="mono"] .youtube-artist-card, body[data-mode="mono"] .youtube-playlist-card, body[data-mode="mono"] .youtube-search-form { border-color: #b2eaff26; background: rgb(5 10 19 / 90%); color: #e5f3ff; }
body[data-mode="mono"] .youtube-video-details strong, body[data-mode="mono"] .youtube-artist-card strong, body[data-mode="mono"] .youtube-playlist-details strong { color: #e5f3ff; }
body[data-mode="mono"] .youtube-video-details > span, body[data-mode="mono"] .youtube-playlist-details > span { color: #a6bdcf; }
body[data-mode="mono"] .mobile-nav { background: rgb(5 8 16 / 90%); }
body[data-mode="mono"] .mode-page-heading { color: #e5eff7; }

body[data-mode="mono"] .liquid-background { opacity: .95; }
body[data-mode="midnight"] .liquid-background { opacity: .46; }
body[data-mode="violet"] .liquid-background { opacity: .58; }
body[data-mode="citrus"] .matrix-background { opacity: .5; }
body[data-mode="mono"] .main-content,
body[data-mode="midnight"] .main-content,
body[data-mode="violet"] .main-content,
body[data-mode="citrus"] .main-content { background: transparent; }
body[data-mode="mono"] .topbar,
body[data-mode="midnight"] .topbar,
body[data-mode="violet"] .topbar,
body[data-mode="citrus"] .topbar { backdrop-filter: blur(14px); }
body[data-mode="mono"] .sidebar,
body[data-mode="midnight"] .sidebar,
body[data-mode="violet"] .sidebar,
body[data-mode="citrus"] .sidebar { backdrop-filter: blur(18px); }
body[data-mode="mono"],
body[data-mode="midnight"],
body[data-mode="violet"],
body[data-mode="citrus"] { color: #e5eff7; }
body[data-mode="mono"] .brand,
body[data-mode="mono"] .nav-caption,
body[data-mode="mono"] .nav-link,
body[data-mode="midnight"] .brand,
body[data-mode="midnight"] .nav-caption,
body[data-mode="midnight"] .nav-link,
body[data-mode="violet"] .brand,
body[data-mode="violet"] .nav-caption,
body[data-mode="violet"] .nav-link,
body[data-mode="citrus"] .brand,
body[data-mode="citrus"] .nav-caption,
body[data-mode="citrus"] .nav-link { color: #d0deea; }
body[data-mode="mono"] .nav-link.active,
body[data-mode="mono"] .sidebar-mode-button.active,
body[data-mode="midnight"] .nav-link.active,
body[data-mode="midnight"] .sidebar-mode-button.active,
body[data-mode="violet"] .nav-link.active,
body[data-mode="violet"] .sidebar-mode-button.active,
body[data-mode="citrus"] .nav-link.active,
body[data-mode="citrus"] .sidebar-mode-button.active { color: var(--mode-accent); }
body[data-mode="mono"] .nav-link:hover,
body[data-mode="midnight"] .nav-link:hover,
body[data-mode="violet"] .nav-link:hover,
body[data-mode="citrus"] .nav-link:hover { color: var(--mode-accent-two); }
body[data-mode="mono"] .sidebar-note,
body[data-mode="midnight"] .sidebar-note,
body[data-mode="violet"] .sidebar-note,
body[data-mode="citrus"] .sidebar-note { border-color: var(--mode-border); background: var(--mode-surface); }
body[data-mode="mono"] .sidebar-note p,
body[data-mode="mono"] .profile-text strong,
body[data-mode="midnight"] .sidebar-note p,
body[data-mode="midnight"] .profile-text strong,
body[data-mode="violet"] .sidebar-note p,
body[data-mode="violet"] .profile-text strong,
body[data-mode="citrus"] .sidebar-note p,
body[data-mode="citrus"] .profile-text strong { color: var(--mode-ink); }
body[data-mode="mono"] .sidebar-note > span,
body[data-mode="mono"] .profile-text small,
body[data-mode="mono"] .local-indicator,
body[data-mode="midnight"] .sidebar-note > span,
body[data-mode="midnight"] .profile-text small,
body[data-mode="midnight"] .local-indicator,
body[data-mode="violet"] .sidebar-note > span,
body[data-mode="violet"] .profile-text small,
body[data-mode="violet"] .local-indicator,
body[data-mode="citrus"] .sidebar-note > span,
body[data-mode="citrus"] .profile-text small,
body[data-mode="citrus"] .local-indicator,
body[data-mode="mono"] .section-heading p,
body[data-mode="mono"] .section-kicker,
body[data-mode="midnight"] .section-heading p,
body[data-mode="midnight"] .section-kicker,
body[data-mode="violet"] .section-heading p,
body[data-mode="violet"] .section-kicker,
body[data-mode="citrus"] .section-heading p,
body[data-mode="citrus"] .section-kicker { color: #a6bdcf; }
body[data-mode="mono"] .profile-button,
body[data-mode="midnight"] .profile-button,
body[data-mode="violet"] .profile-button,
body[data-mode="citrus"] .profile-button { border-color: var(--mode-border); }
body[data-mode="mono"] .folder-location,
body[data-mode="midnight"] .folder-location,
body[data-mode="violet"] .folder-location,
body[data-mode="citrus"] .folder-location { border-color: var(--mode-border); background: var(--mode-surface); color: #d0deea; }
body[data-mode="mono"] .folder-location > span,
body[data-mode="midnight"] .folder-location > span,
body[data-mode="violet"] .folder-location > span,
body[data-mode="citrus"] .folder-location > span { color: var(--mode-ink); }
body[data-mode="mono"] .song-row,
body[data-mode="midnight"] .song-row,
body[data-mode="violet"] .song-row,
body[data-mode="citrus"] .song-row { border-color: #ffffff12; }
body[data-mode="mono"] .song-row:hover,
body[data-mode="mono"] .song-row.is-playing,
body[data-mode="midnight"] .song-row:hover,
body[data-mode="midnight"] .song-row.is-playing,
body[data-mode="violet"] .song-row:hover,
body[data-mode="violet"] .song-row.is-playing,
body[data-mode="citrus"] .song-row:hover,
body[data-mode="citrus"] .song-row.is-playing { background: var(--mode-soft); }
body[data-mode="mono"] .row-text strong,
body[data-mode="mono"] .empty-state h3,
body[data-mode="midnight"] .row-text strong,
body[data-mode="midnight"] .empty-state h3,
body[data-mode="violet"] .row-text strong,
body[data-mode="violet"] .empty-state h3,
body[data-mode="citrus"] .row-text strong,
body[data-mode="citrus"] .empty-state h3 { color: var(--mode-ink); }
body[data-mode="mono"] .row-text small,
body[data-mode="mono"] .row-album,
body[data-mode="mono"] .row-folder,
body[data-mode="mono"] .row-duration,
body[data-mode="mono"] .empty-state p,
body[data-mode="mono"] .list-header,
body[data-mode="midnight"] .row-text small,
body[data-mode="midnight"] .row-album,
body[data-mode="midnight"] .row-folder,
body[data-mode="midnight"] .row-duration,
body[data-mode="midnight"] .empty-state p,
body[data-mode="midnight"] .list-header,
body[data-mode="violet"] .row-text small,
body[data-mode="violet"] .row-album,
body[data-mode="violet"] .row-folder,
body[data-mode="violet"] .row-duration,
body[data-mode="violet"] .empty-state p,
body[data-mode="violet"] .list-header,
body[data-mode="citrus"] .row-text small,
body[data-mode="citrus"] .row-album,
body[data-mode="citrus"] .row-folder,
body[data-mode="citrus"] .row-duration,
body[data-mode="citrus"] .empty-state p,
body[data-mode="citrus"] .list-header { color: #a6bdcf; }
body[data-mode="mono"] .youtube-video-details strong,
body[data-mode="mono"] .youtube-artist-card strong,
body[data-mode="mono"] .youtube-playlist-details strong,
body[data-mode="midnight"] .youtube-video-details strong,
body[data-mode="midnight"] .youtube-artist-card strong,
body[data-mode="midnight"] .youtube-playlist-details strong,
body[data-mode="violet"] .youtube-video-details strong,
body[data-mode="violet"] .youtube-artist-card strong,
body[data-mode="violet"] .youtube-playlist-details strong,
body[data-mode="citrus"] .youtube-video-details strong,
body[data-mode="citrus"] .youtube-artist-card strong,
body[data-mode="citrus"] .youtube-playlist-details strong { color: var(--mode-ink); }
body[data-mode="mono"] .youtube-video-details > span,
body[data-mode="mono"] .youtube-playlist-details > span,
body[data-mode="midnight"] .youtube-video-details > span,
body[data-mode="midnight"] .youtube-playlist-details > span,
body[data-mode="violet"] .youtube-video-details > span,
body[data-mode="violet"] .youtube-playlist-details > span,
body[data-mode="citrus"] .youtube-video-details > span,
body[data-mode="citrus"] .youtube-playlist-details > span { color: #a6bdcf; }
body[data-mode="mono"] .mobile-nav,
body[data-mode="midnight"] .mobile-nav,
body[data-mode="violet"] .mobile-nav,
body[data-mode="citrus"] .mobile-nav { border-color: var(--mode-border); background: var(--mode-topbar); }
body[data-mode="mono"] .page-footer,
body[data-mode="midnight"] .page-footer,
body[data-mode="violet"] .page-footer,
body[data-mode="citrus"] .page-footer { color: #a6bdcf; }

body[data-mode="ocean"] .liquid-background { opacity: .42; }
body[data-mode="forest"] .liquid-background { opacity: .58; }
body[data-mode="sunset"] .liquid-background { opacity: .48; }
body[data-mode="rose"] .liquid-background { opacity: .58; }
body:is([data-mode="mono"], [data-mode="midnight"], [data-mode="violet"], [data-mode="citrus"], [data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) { color: #e5eff7; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .main-content { background: transparent; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .topbar { border-color: var(--mode-border); backdrop-filter: blur(14px); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .sidebar { border-color: var(--mode-border); backdrop-filter: blur(18px); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .brand,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .nav-caption,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .nav-link { color: #d0deea; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .nav-link:hover { color: var(--mode-accent-two); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .nav-link.active,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .sidebar-mode-button.active { color: var(--mode-accent); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .sidebar-note { border-color: var(--mode-border); background: var(--mode-surface); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .sidebar-note p,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .profile-text strong { color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .sidebar-note > span,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .profile-text small,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .local-indicator,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .section-heading p,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .section-kicker { color: #a6bdcf; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .profile-button { border-color: var(--mode-border); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .circle-button,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .top-folder-button { background: var(--mode-surface); color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .search-box input,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-search-form input { color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .search-box input::placeholder,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-search-form input::placeholder { color: #a6bdcf; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .folder-location { border-color: var(--mode-border); background: var(--mode-surface); color: #d0deea; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .folder-location > span,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .row-text strong,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .empty-state h3 { color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .song-row { border-color: #ffffff12; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .song-row:hover,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .song-row.is-playing { background: var(--mode-soft); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .row-text small,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .row-album,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .row-folder,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .row-duration,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .empty-state p,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .list-header,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .page-footer { color: #a6bdcf; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-status,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-video-card,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-artist-card,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-playlist-card,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-search-form { border-color: var(--mode-border); background: var(--mode-surface); color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-video-details strong,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-artist-card strong,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-playlist-details strong { color: var(--mode-ink); }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-video-details > span,
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .youtube-playlist-details > span { color: #a6bdcf; }
body:is([data-mode="ocean"], [data-mode="forest"], [data-mode="sunset"], [data-mode="rose"]) .mobile-nav { border-color: var(--mode-border); background: var(--mode-topbar); }

.sidebar,
body[data-mode] .sidebar {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
body[data-mode] .topbar { background: rgb(5 8 14 / 20%); backdrop-filter: blur(14px) saturate(140%); }
body[data-mode] .player-bar { background: rgb(15 13 24 / 52%); backdrop-filter: blur(18px) saturate(135%); }

@media (max-width: 760px) {
  .topbar-actions { gap: 7px; }
  .sidebar-mode-button { min-height: 32px; }
  .change-mode-button svg { width: 13px; height: 13px; }
  .eye-tracking { gap: 6px; }
  .tracking-eye { width: 30px; height: 21px; }
  .tracking-pupil { width: 9px; height: 9px; }
  .mode-view { min-height: 590px; padding: 27px 24px 20px; }
  .mode-stage { height: 445px; }
  .mode-stage .mode-preview-art { height: 240px; }
  .mode-stage .mode-preview-glyph { font-size: 82px; }
  .mode-stage .mode-option { width: min(100%, 245px); }
  .mode-wheel-hint { font-size: 6px; letter-spacing: .5px; }
}
@media (max-width: 600px) {
  .mode-view { min-height: 700px; padding: 20px 15px 16px; }
  .mode-page-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .mode-page-heading h1 { font-size: 27px; }
  .mode-page-heading p { max-width: 290px; font-size: 10px; }
  .mode-back-button { min-height: 32px; }
  .mode-stage { height: 515px; margin-top: 17px; }
  .mode-stage .mode-wheel-items { top: 218px; width: 100%; height: 280px; }
  .mode-stage .mode-preview { top: 0; right: 0; left: 0; display: block; width: 100%; height: 205px; padding: 12px; }
  .mode-stage .mode-preview-art { width: 41%; height: 178px; border-radius: 13px; }
  .mode-stage .mode-preview-glyph { font-size: 56px; }
  .mode-stage .mode-preview-orbit { right: -34px; }
  .mode-stage .mode-preview-copy { position: absolute; top: 28px; right: 12px; left: 46%; gap: 5px; margin: 0; }
  .mode-stage .mode-preview-copy strong { font-size: 16px; }
  .mode-stage .mode-preview-copy > span:last-child { font-size: 8px; }
  .mode-preview-label { left: 10px; font-size: 6px; }
  .mode-preview-record { right: 9px; bottom: 10px; width: 28px; height: 28px; }
  .mode-stage .mode-preview-apply { position: absolute; top: 118px; right: auto; bottom: auto; left: 46%; margin: 0; }
  .mode-option { min-height: 36px; gap: 6px; padding: 5px 6px; }
  .mode-option.is-selected { min-height: 43px; }
  .mode-option-swatch { width: 23px; height: 23px; }
  .mode-option-swatch > span { font-size: 15px; }
  .mode-option-name { font-size: 9px; }
  .mode-selected-mark { font-size: 7px; }
  .mode-view .mode-wheel-arrow { width: 27px; height: 27px; }
  .mode-picker-footer { flex-wrap: wrap; gap: 8px; }
  .mode-page-note { display: none; }
}
@media (max-width: 430px) {
  .local-indicator { display: none; }
  .eye-tracking { left: 43%; }
  .header-social-links { top: 4px; left: 4px; gap: 2px; }
  .header-social-links a { width: 23px; height: 25px; }
  .header-social-links svg { width: 16px; height: 16px; }
  .tracking-eye { width: 25px; height: 18px; }
  .tracking-pupil { width: 8px; height: 8px; }
  .topbar { padding-right: 12px; padding-left: 12px; }
  .mode-view { padding-right: 11px; padding-left: 11px; }
  .mode-page-heading h1 { font-size: 24px; }
  .mode-stage .mode-preview-copy > span:last-child { line-height: 1.3; }
  .mode-stage .mode-apply-button { gap: 5px; padding: 0 8px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tracking-pupil { transition: none; }
}

.topbar,
body[data-mode] .topbar { border-color: transparent; background: transparent; backdrop-filter: none; }