:root {
    color-scheme: light;
    --ink: #273b35;
    --muted: #858b80;
    --paper: #f7f5f0;
    --green: #355a4f;
    --green-dark: #29483f;
    --line: #e8e5dc;
    --serif: Georgia, "Noto Serif SC", serif;
    font-family: "DM Sans", "Noto Sans SC", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-bottom: 102px; background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
    height: 78px;
    padding: 0 7.1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(39, 59, 53, .07);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #f1eadc; font-size: 18px; transform: rotate(180deg); }
.main-nav { display: flex; align-items: center; gap: 42px; margin-left: 70px; }
.nav-link { padding: 30px 0 27px; color: #878d83; font-size: 13px; }
.nav-link.is-active { color: var(--ink); border-bottom: 2px solid var(--green); }
.quiet-link { color: #727a71; font-size: 12px; }
.quiet-link span { margin-left: 7px; }

.hero { position: relative; min-height: 440px; padding: 54px 7.1% 54px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; padding-left: 5.5%; }
.eyebrow { margin: 0 0 19px; color: #9a9c8d; font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.eyebrow-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #b69c68; vertical-align: 1px; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(43px, 5vw, 65px); font-weight: 400; line-height: 1.25; letter-spacing: .07em; }
.hero h1 span { color: #8e9c7f; }
.hero-description { margin: 19px 0 25px; color: #858b80; font-size: 13px; line-height: 2.05; letter-spacing: .06em; }
.hero-link { display: inline-flex; align-items: center; gap: 18px; color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.hero-link span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #c6cbbd; border-radius: 50%; font-size: 15px; }
.hero-art { position: relative; height: 340px; margin-left: 3%; overflow: hidden; background: linear-gradient(150deg, #e9e8d9 0%, #d7dfcd 57%, #b9c9b8 100%); }
.sun { position: absolute; top: 53px; right: 22%; width: 100px; height: 100px; border-radius: 50%; background: #d9bd88; box-shadow: 0 0 70px 18px rgba(217, 189, 136, .25); }
.hero-hill { position: absolute; width: 120%; height: 63%; bottom: -22%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.hill-back { left: -27%; bottom: -7%; transform: rotate(-11deg); background: #9cae91; }
.hill-front { right: -23%; bottom: -26%; transform: rotate(9deg); background: #718d7a; }
.hero-caption { position: absolute; right: 26px; bottom: 19px; left: 26px; z-index: 2; display: flex; justify-content: space-between; color: rgba(255,255,255,.86); font-size: 9px; letter-spacing: .14em; }
.hero-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(-27deg); }
.orbit-one { top: 28px; right: 7%; width: 185px; height: 280px; }
.orbit-two { top: 53px; right: 10%; width: 140px; height: 235px; }
.hero-side-note { position: absolute; right: 2.7%; top: 50%; writing-mode: vertical-rl; color: #a2a599; font-size: 8px; letter-spacing: .19em; }

.section-wrap { padding: 61px 10.1% 78px; background: #fff; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 27px; }
.section-heading .eyebrow { margin-bottom: 11px; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: .06em; }
.track-count { padding-bottom: 5px; color: #9a9d93; font-size: 11px; }
.discover-tools { display: flex; gap: 10px; max-width: 580px; }
.search-box { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); background: #fbfaf7; }
.search-icon { color: #899087; font-size: 22px; line-height: 1; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #aaa99f; }
.search-submit { min-width: 72px; border: 0; background: var(--green); color: #fff; font-size: 12px; cursor: pointer; }
.search-submit:hover { background: var(--green-dark); }
.category-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 29px; }
.category-chip { padding: 7px 14px; border: 1px solid #e9e7df; border-radius: 20px; color: #878b81; font-size: 10px; transition: .2s ease; }
.category-chip:hover, .category-chip.is-selected { border-color: var(--green); background: var(--green); color: #fff; }
.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 37px; }
.track-card { min-width: 0; }
.cover-art { position: relative; height: 176px; overflow: hidden; isolation: isolate; }
.cover-art::before, .cover-art::after { position: absolute; z-index: -1; content: ""; }
.art-rain { background: linear-gradient(140deg, #bdc8bf, #718b83 75%); }
.art-rain::before { inset: 0; opacity: .44; background: repeating-linear-gradient(105deg, transparent 0 17px, rgba(255,255,255,.24) 18px, transparent 19px 31px); }
.art-forest { background: linear-gradient(145deg, #c5d1b6, #627f69); }
.art-forest::before { inset: 19% -10% -40%; border-radius: 50% 50% 0 0; background: #4d725c; box-shadow: -70px 22px 0 #789274, 80px 6px 0 #8fa586; }
.art-library { background: linear-gradient(145deg, #d7cbb3, #9d8065); }
.art-library::before { top: 27px; left: 20%; width: 58%; height: 110px; border: 8px solid rgba(81,61,47,.2); background: repeating-linear-gradient(90deg, #b6956e 0 17px, #e3d1af 17px 24px, #8d765e 24px 41px); }
.art-ocean { background: linear-gradient(180deg, #cfdbd5, #769797 64%, #547b80); }
.art-ocean::before { right: -20%; bottom: 24px; left: -20%; height: 63px; border-radius: 50%; background: rgba(225,236,222,.42); box-shadow: 0 17px 0 rgba(41,86,91,.27), 0 35px 0 rgba(220,232,217,.26); }
.art-clay { background: linear-gradient(145deg, #dbc3a7, #a9785b); }
.art-clay::before { top: 43px; left: calc(50% - 41px); width: 82px; height: 82px; border-radius: 45% 45% 48% 48%; background: #ba8863; box-shadow: inset 0 9px 0 rgba(255,232,194,.25), 0 12px 20px rgba(74,48,32,.18); }
.art-train { background: linear-gradient(150deg, #43565b, #b5a488); }
.art-train::before { inset: 25px 18% 29px; border: 8px solid rgba(42,57,60,.6); background: linear-gradient(130deg, #d8c293, #516b68); box-shadow: 0 0 27px rgba(255,220,153,.28); }
.art-motif { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,.12) 51%, transparent 66%); }
.art-index { position: absolute; top: 13px; left: 15px; color: rgba(255,255,255,.86); font-size: 9px; letter-spacing: .12em; }
.cover-category { position: absolute; bottom: 13px; left: 15px; padding: 5px 8px; background: rgba(255,255,255,.78); color: #52665a; font-size: 9px; }
.cover-duration { position: absolute; right: 13px; bottom: 15px; color: #fff; font-size: 9px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.play-button { position: absolute; top: 50%; left: 50%; display: grid; width: 43px; height: 43px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--green); font-size: 13px; transform: translate(-50%, -50%); cursor: pointer; opacity: 0; transition: .2s ease; }
.cover-art:hover .play-button, .play-button:focus-visible, .play-button:disabled { opacity: 1; }
.play-button:disabled { color: #7b837b; cursor: not-allowed; }
.track-info { padding: 15px 1px 0; }
.track-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.track-title-row h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.track-creator { margin: 5px 0 0; color: #9a9c93; font-size: 10px; }
.favorite-button { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: #9b9f93; font-size: 19px; line-height: 1; cursor: pointer; }
.favorite-button.is-favorite { color: #c77868; }
.track-description { min-height: 34px; margin: 12px 0 12px; color: #8b8e85; font-size: 10px; line-height: 1.8; }
.tag-list { display: flex; gap: 7px; }
.tag-list span { color: #92968b; font-size: 9px; }
.tag-list span + span::before { content: "·"; margin-right: 7px; color: #c2c2b8; }
.empty-state { padding: 52px 20px 68px; text-align: center; color: #8d9389; }
.empty-state > span { font-size: 29px; }
.empty-state h3 { margin: 12px 0 6px; color: var(--ink); font-family: var(--serif); font-size: 20px; font-weight: 400; }
.empty-state p { font-size: 12px; }
.empty-state a { display: inline-block; margin-top: 9px; color: var(--green); font-size: 12px; }

.quote-section { padding: 68px 20px 73px; text-align: center; }
.quote-section .eyebrow { margin-bottom: 20px; }
.quote-section blockquote { margin: 0 0 18px; color: #546b5f; font-family: var(--serif); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.9; letter-spacing: .08em; }
.quote-section > span { color: #a3a397; font-size: 10px; letter-spacing: .1em; }
.site-footer { min-height: 77px; padding: 15px 7.1%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #989a90; font-size: 10px; }
.footer-brand { color: var(--ink); font-size: 13px; }
.footer-brand .brand-mark { width: 23px; height: 23px; font-size: 15px; }

.player { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; min-height: 76px; padding: 12px 5.8%; display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; gap: 35px; border-top: 1px solid #e5e4dc; background: rgba(255,255,255,.97); box-shadow: 0 -6px 25px rgba(33,48,40,.04); }
.player-track { display: flex; min-width: 0; align-items: center; gap: 12px; }
.player-thumb { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; border-radius: 2px; background: #dce3d8; color: #658070; font-size: 23px; transform: rotate(180deg); }
.player-track-copy { display: grid; min-width: 0; gap: 4px; }
.player-track-copy strong { overflow: hidden; color: #40554a; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.player-track-copy span { overflow: hidden; color: #a0a299; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.player-controls { display: flex; align-items: center; gap: 17px; }
.player-button { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; cursor: pointer; }
.player-button:disabled { background: #a8b1a7; cursor: default; }
.progress-wrap { display: grid; width: 100%; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 9px; color: #9c9f96; font-size: 9px; }
.progress-wrap input, .volume-control input { width: 100%; height: 3px; accent-color: var(--green); cursor: pointer; }
.volume-control { display: flex; max-width: 130px; justify-self: end; align-items: center; gap: 12px; color: #7e897e; font-size: 12px; }
.volume-control input { width: 80px; }

@media (max-width: 800px) {
    .site-header { height: 66px; padding: 0 5%; }
    .main-nav { gap: 22px; margin-left: 0; }
    .hero { min-height: 395px; padding: 46px 5%; grid-template-columns: 1fr 1fr; }
    .hero-copy { padding-left: 0; }
    .hero-art { height: 290px; margin-left: 0; }
    .section-wrap { padding: 52px 6% 65px; }
    .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .player { padding-right: 4%; padding-left: 4%; gap: 18px; grid-template-columns: 1fr 1.4fr; }
    .volume-control { display: none; }
}
@media (max-width: 540px) {
    body { padding-bottom: 126px; }
    .site-header { height: 60px; }
    .brand { font-size: 14px; }
    .brand-mark { width: 25px; height: 25px; }
    .main-nav { gap: 17px; }
    .nav-link { padding: 23px 0 20px; font-size: 11px; }
    .quiet-link { font-size: 0; }
    .quiet-link span { font-size: 14px; }
    .hero { min-height: auto; padding: 44px 6% 36px; grid-template-columns: 1fr; gap: 31px; }
    .hero h1 { font-size: 47px; }
    .hero-art { height: 228px; margin: 0; }
    .hero-side-note { display: none; }
    .section-wrap { padding: 42px 6% 51px; }
    .section-heading h2 { font-size: 23px; }
    .track-count { font-size: 10px; }
    .discover-tools { gap: 7px; }
    .search-submit { min-width: 58px; }
    .track-grid { column-gap: 13px; row-gap: 27px; }
    .cover-art { height: clamp(118px, 37vw, 170px); }
    .cover-category { bottom: 9px; left: 9px; padding: 4px 6px; font-size: 8px; }
    .cover-duration { right: 8px; bottom: 11px; font-size: 8px; }
    .art-index { top: 9px; left: 9px; }
    .track-title-row h3 { font-size: 12px; }
    .track-creator { font-size: 9px; }
    .track-description { min-height: 48px; font-size: 9px; }
    .tag-list { flex-wrap: wrap; gap: 4px; }
    .tag-list span { font-size: 8px; }
    .tag-list span + span::before { margin-right: 4px; }
    .quote-section { padding: 52px 15px; }
    .site-footer { padding: 13px 6%; }
    .site-footer > span:nth-child(2) { display: none; }
    .player { min-height: 88px; padding: 10px 5%; grid-template-columns: 1fr; gap: 7px; }
    .player-track { gap: 9px; }
    .player-thumb { width: 34px; height: 34px; }
    .player-controls { position: absolute; top: 14px; right: 5%; width: 46%; justify-content: end; }
    .player-button { width: 30px; height: 30px; }
    .progress-wrap { position: absolute; right: 5%; bottom: 8px; left: 5%; width: 90%; grid-template-columns: 29px 1fr 29px; gap: 6px; }
    .player-track-copy { max-width: 48%; }
    .player-track-copy strong { font-size: 10px; }
    .player-track-copy span { font-size: 8px; }
}

/* Night-reading theme */
:root {
    color-scheme: dark;
    --ink: #eee8df;
    --muted: #aaa197;
    --paper: #11121a;
    --green: #c7a66a;
    --green-dark: #ad8b50;
    --line: rgba(230, 216, 194, .12);
    --serif: "Noto Serif SC", "Songti SC", Georgia, serif;
}

body {
    background:
        radial-gradient(ellipse at 78% 3%, rgba(82, 47, 57, .18), transparent 35%),
        #11121a;
    color: var(--ink);
}

.site-header {
    position: relative;
    z-index: 2;
    border-bottom-color: rgba(230, 216, 194, .1);
    background: rgba(17, 18, 26, .88);
}

.brand { color: #f2e8d7; }
.brand-mark {
    border: 1px solid rgba(220, 187, 125, .4);
    background: #28202a;
    color: #d2b37a;
}
.nav-link { color: #918b87; }
.nav-link.is-active { color: #f0e8dc; border-bottom-color: #c7a66a; }
.quiet-link { color: #aaa197; }
.adult-label { display: inline-flex; align-items: center; gap: 8px; }
.adult-label span {
    margin: 0;
    padding: 4px 6px;
    border: 1px solid rgba(199, 166, 106, .42);
    color: #d7bb83;
    font-size: 9px;
    letter-spacing: .1em;
}

.hero {
    min-height: 468px;
    background:
        radial-gradient(ellipse at 8% 80%, rgba(91, 47, 55, .16), transparent 40%),
        linear-gradient(180deg, rgba(22, 21, 29, .2), rgba(17, 18, 26, .7));
}
.eyebrow { color: #a69a8f; }
.eyebrow-dot { background: #d0ad6b; box-shadow: 0 0 12px rgba(208, 173, 107, .4); }
.hero h1 { color: #f0e7da; }
.hero h1 span { color: #c9a96d; }
.hero-description { color: #aaa19a; }
.hero-link { color: #d0b176; }
.hero-link span { border-color: rgba(208, 177, 118, .48); }
.hero-art {
    height: 360px;
    border: 1px solid rgba(227, 204, 165, .2);
    background:
        linear-gradient(0deg, rgba(17, 16, 24, .4), transparent 55%),
        radial-gradient(ellipse at 73% 28%, rgba(205, 166, 111, .22), transparent 31%),
        linear-gradient(135deg, #32232c, #56353b 47%, #252332 100%);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
}
.sun {
    top: 54px;
    right: 21%;
    width: 90px;
    height: 90px;
    background: #dec18b;
    box-shadow: 0 0 70px 24px rgba(218, 177, 111, .21);
}
.hero-hill { opacity: .82; }
.hill-back { background: #362b38; }
.hill-front { background: #211f2d; }
.hero-caption { color: rgba(246, 229, 202, .82); }
.hero-orbit { border-color: rgba(228, 198, 150, .25); }
.hero-side-note { color: #766c70; }

.section-wrap { background: #171821; }
.section-heading h2 { color: #efe7da; }
.track-count { color: #928c87; }
.search-box { border-color: rgba(228, 213, 189, .15); background: #1c1d26; }
.search-icon { color: #c3a76f; }
.search-box input { color: #eee8df; }
.search-box input::placeholder { color: #77777b; }
.search-submit {
    background: #c5a365;
    color: #211b20;
    font-weight: 600;
}
.search-submit:hover { background: #d5b77c; }
.category-chip { border-color: rgba(228, 213, 189, .14); color: #a9a09a; }
.category-chip:hover, .category-chip.is-selected {
    border-color: #c5a365;
    background: #c5a365;
    color: #211b20;
}
.track-grid { column-gap: 25px; row-gap: 40px; }
.track-card {
    padding: 10px 10px 14px;
    border: 1px solid rgba(228, 213, 189, .09);
    background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.track-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 166, 106, .33);
    background: linear-gradient(145deg, rgba(199,166,106,.07), rgba(255,255,255,.012));
}
.cover-art { height: 205px; }
.art-rain {
    background:
        linear-gradient(0deg, rgba(20, 18, 27, .82), transparent 58%),
        radial-gradient(ellipse at 68% 25%, #b17969, transparent 5%),
        linear-gradient(135deg, #43313b, #7e5352 53%, #292b38);
}
.art-rain::before { opacity: .32; }
.art-forest {
    background:
        linear-gradient(0deg, rgba(17, 20, 22, .82), transparent 60%),
        radial-gradient(ellipse at 53% 34%, #c6a979, transparent 8%),
        linear-gradient(135deg, #33403a, #7a745f 52%, #252c2e);
}
.art-forest::before { background: #26352f; box-shadow: -70px 22px 0 #4a5147, 80px 6px 0 #3b4940; }
.art-library {
    background:
        linear-gradient(0deg, rgba(20, 16, 22, .78), transparent 64%),
        linear-gradient(135deg, #5a3f3e, #9b7255 52%, #382c35);
}
.art-library::before {
    border-color: rgba(42, 28, 32, .44);
    background: repeating-linear-gradient(90deg, #765348 0 17px, #c19a6c 17px 24px, #4d3b3c 24px 41px);
}
.art-ocean {
    background:
        linear-gradient(0deg, rgba(14, 21, 30, .78), transparent 63%),
        radial-gradient(ellipse at 50% 28%, #d4b68a, transparent 6%),
        linear-gradient(165deg, #293344, #65737b 53%, #293643);
}
.art-ocean::before { background: rgba(220, 203, 173, .32); }
.art-clay {
    background:
        linear-gradient(0deg, rgba(28, 18, 22, .75), transparent 60%),
        radial-gradient(ellipse at 48% 35%, #d3a975, transparent 8%),
        linear-gradient(135deg, #52353a, #a06b59 55%, #38272f);
}
.art-clay::before { background: #9e6d58; }
.art-train {
    background:
        linear-gradient(0deg, rgba(14, 16, 23, .75), transparent 62%),
        radial-gradient(ellipse at 57% 45%, #d6b982, transparent 7%),
        linear-gradient(135deg, #252735, #665157 54%, #242432);
}
.art-train::before {
    border-color: rgba(30, 27, 37, .76);
    background: linear-gradient(130deg, #b99470, #3f4652);
}
.art-motif { background: linear-gradient(110deg, transparent 35%, rgba(255,238,208,.1) 51%, transparent 67%); }
.art-index { color: rgba(255, 238, 215, .76); }
.cover-category {
    border: 1px solid rgba(229, 206, 166, .24);
    background: rgba(23, 21, 28, .74);
    color: #e1c58f;
}
.cover-duration { color: #f0e6d6; }
.play-button {
    border: 1px solid rgba(231, 205, 160, .45);
    background: rgba(27, 24, 31, .86);
    color: #e0c080;
    box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.play-button:disabled { color: #8b8274; }
.track-title-row h3 { color: #eee6dc; }
.track-creator { color: #9b928d; }
.favorite-button { color: #827d7b; }
.favorite-button.is-favorite { color: #d08076; }
.track-description { color: #aaa19a; }
.tag-list span { color: #c5a76d; }
.tag-list span + span::before { color: #70645f; }
.empty-state { color: #a49a92; }
.empty-state h3 { color: #eee6dc; }
.empty-state a { color: #d0b176; }

.quote-section {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(228, 213, 189, .08);
    border-bottom: 1px solid rgba(228, 213, 189, .08);
    background:
        radial-gradient(ellipse at 50% 100%, rgba(104, 62, 66, .17), transparent 55%),
        #13141c;
}
.quote-section .eyebrow { color: #a88a62; }
.quote-section blockquote { color: #e2d3bd; }
.quote-section > span { color: #928780; }
.site-footer { border-top-color: rgba(228, 213, 189, .1); color: #8d8580; }
.footer-brand { color: #e7ddcf; }

.player {
    border-top-color: rgba(217, 192, 151, .2);
    background: rgba(22, 22, 30, .97);
    box-shadow: 0 -8px 35px rgba(0, 0, 0, .28);
    backdrop-filter: blur(14px);
}
.player-thumb {
    border: 1px solid rgba(218, 183, 119, .27);
    background: linear-gradient(145deg, #49313b, #282735);
    color: #ddbf84;
    font-family: var(--serif);
    font-size: 17px;
    transform: none;
}
.player-track-copy strong { color: #eee4d6; }
.player-track-copy span { color: #928a84; }
.player-button { background: #c5a365; color: #211b20; }
.player-button:disabled { background: #514c48; color: #aaa096; }
.progress-wrap { color: #988f87; }
.progress-wrap input, .volume-control input { accent-color: #c5a365; }
.volume-control { color: #b5a58a; }

@media (max-width: 800px) {
    .hero { min-height: 410px; }
    .hero-art { height: 300px; }
    .cover-art { height: 185px; }
}

@media (max-width: 540px) {
    .hero { padding-top: 38px; }
    .hero h1 { font-size: 43px; }
    .hero-art { height: 220px; }
    .section-heading h2 { max-width: 250px; font-size: 21px; line-height: 1.5; }
    .cover-art { height: clamp(132px, 42vw, 185px); }
    .track-card { padding: 7px 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}