:root {color-scheme: dark; --ink: #07100e; --ink-2: #0b1714; --ink-3: #11221d; --surface: rgba(16, 32, 27, 0.86); --surface-strong: #12251f; --line: rgba(228, 194, 130, 0.16); --line-strong: rgba(228, 194, 130, 0.34); --gold: #e6bd73; --gold-2: #c78f47; --copper: #8e6336; --paper: #efe3c7; --muted: #9eaaa4; --muted-2: #6f7e78; --danger: #d97d6b; --shadow: 0 28px 80px rgba(0, 0, 0, 0.46); --radius: 18px; --header-h: 78px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none;}
* {box-sizing: border-box;}
html {background: var(--ink); scroll-behavior: smooth;}
body {margin: 0; min-width: 320px; min-height: 100vh; color: var(--paper); background: radial-gradient(circle at 82% -12%, rgba(148, 99, 46, 0.17), transparent 32rem),
    radial-gradient(circle at 8% 38%, rgba(30, 92, 67, 0.14), transparent 34rem),
    var(--ink);}
body.player-open {padding-bottom: 330px;}
button, input, select {font: inherit;}
button {color: inherit;}
button, a, select {-webkit-tap-highlight-color: transparent;}
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px;}
svg {width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
.skip-link {position: fixed; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; color: var(--ink); background: var(--gold); border-radius: .5rem;}
.skip-link:focus {top: 1rem;}
.brand {display: inline-flex; align-items: center; gap: .72rem; padding: 0; border: 0; background: none; cursor: pointer;}
.brand > span:last-child {display: grid; text-align: left; line-height: 1;}
.brand strong {font-family: Georgia, "Times New Roman", serif; font-size: 1.32rem; letter-spacing: .18em; color: var(--paper);}
.brand em {margin-top: .26rem; font-size: .61rem; font-style: normal; font-weight: 800; letter-spacing: .4em; color: var(--gold);}
.brand-disc {position: relative; display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; background: repeating-radial-gradient(circle, #162921 0 2px, #0a1512 3px 5px); box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .2), 0 0 24px rgba(207, 157, 84, .08);}
.brand-disc::after {content: ""; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #46311e;}
.brand-disc i {position: absolute; inset: 8px; border: 1px solid rgba(230, 189, 115, .2); border-radius: 50%;}
.brand-disc.small {width: 28px;}
.brand-disc.small::after {width: 6px;}
.catalog-count {display: grid; grid-template-columns: auto auto; align-items: baseline; gap: .38rem; padding: .4rem .68rem; border: 1px solid var(--line); border-radius: .65rem; background: transparent; cursor: pointer;}
.catalog-count strong {font-family: Georgia, serif; font-size: 1.08rem; color: var(--gold);}
.catalog-count span {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
main {min-height: calc(100vh - var(--header-h));}
.view {display: none;}
.view.active {display: block; animation: view-in .36s ease both;}
@keyframes view-in {
  from {opacity: 0; transform: translateY(5px);}
}
.featured {position: relative; display: flex; align-items: flex-end; min-height: clamp(470px, 68vh, 760px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);}
.featured-backdrop {position: absolute; z-index: -3; inset: 0; background-position: 72% 42%; background-size: cover; filter: saturate(.72) contrast(1.07); transform: scale(1.02); transition: background-image .5s ease;}
.music-data-saver .featured-backdrop {background-color: #10231e;}
.featured-backdrop::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 13, 11, .1), transparent);}
.featured-shade {position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #07100e 0%, rgba(7, 16, 14, .86) 32%, rgba(7, 16, 14, .12) 72%, rgba(7, 16, 14, .25) 100%),
    linear-gradient(0deg, #07100e 0%, transparent 45%, rgba(7, 16, 14, .25) 100%);}
.featured-copy {width: min(720px, 72vw); padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 6vw, 5rem);}
.eyebrow {display: inline-flex; align-items: center; gap: .6rem; color: var(--gold); font-size: .74rem; font-weight: 850; letter-spacing: .22em; text-transform: uppercase;}
.eyebrow::before {content: ""; width: 26px; height: 1px; background: var(--gold-2);}
.featured h1, .page-heading h1 {margin: .65rem 0 .75rem; font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: .98; letter-spacing: -.035em;}
.featured h1 {max-width: 680px; font-size: clamp(2.8rem, 6.4vw, 6.3rem); text-wrap: balance;}
.featured-copy > p {margin: 0; color: #c4cdc8; font-size: clamp(1rem, 1.5vw, 1.26rem); line-height: 1.55;}
.featured-meta {display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; color: var(--muted); font-size: .86rem;}
.featured-actions {display: flex; align-items: center; gap: .72rem; margin-top: 1.6rem;}
.featured-index {position: absolute; right: clamp(1.2rem, 4vw, 4rem); bottom: 2.2rem; display: flex; align-items: center; gap: .7rem; color: var(--muted); font: .72rem/1 ui-monospace, monospace; letter-spacing: .12em;}
.featured-index i {width: clamp(50px, 8vw, 110px); height: 1px; background: linear-gradient(90deg, var(--gold), var(--line));}
.featured.loading .featured-backdrop {background: linear-gradient(120deg, #10231e, #1c2b24 45%, #0a1512);}
.button, .icon-button {display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: 99px; min-height: 44px; padding: .7rem 1.15rem; font-weight: 760; cursor: pointer; transition: transform .18s, background .18s, border-color .18s, color .18s;}
.button:hover:not(:disabled), .icon-button:hover:not(:disabled) {transform: translateY(-1px);}
.button:disabled, .icon-button:disabled {opacity: .4; cursor: not-allowed;}
.button.primary {color: #171008; background: linear-gradient(135deg, #f0ce89, #c78d45); box-shadow: 0 10px 30px rgba(198, 141, 69, .16);}
.button.secondary {border-color: var(--line-strong); color: var(--paper); background: rgba(11, 23, 20, .68); backdrop-filter: blur(12px);}
.button.secondary:hover {background: rgba(33, 49, 42, .88);}
.icon-button {width: 44px; padding: 0; border-color: var(--line); background: rgba(9, 20, 17, .64);}
.icon-button.large {width: 46px; height: 46px;}
.button svg, .featured-actions svg {width: 1.1rem; height: 1.1rem;}
.button.primary svg path:first-child {fill: currentColor; stroke: none;}
.home-sections {position: relative; z-index: 2; margin-top: -1px; padding: 1.6rem 0 4rem; background: linear-gradient(#07100e, #08120f 12rem);}
.shelf {margin: 0 0 2.3rem;}
.shelf-head {display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3.5vw, 3.75rem) .9rem;}
.shelf-head > div {min-width: 0;}
.shelf-head h2 {margin: 0; font-family: Georgia, serif; font-size: clamp(1.3rem, 2vw, 1.72rem); font-weight: 520; letter-spacing: -.02em;}
.shelf-head p {margin: .3rem 0 0; color: var(--muted); font-size: .82rem;}
.shelf-all {flex: 0 0 auto; border: 0; background: none; color: var(--gold); font-size: .84rem; font-weight: 750; cursor: pointer;}
.track-row {display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 22vw, 300px); gap: .86rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; scrollbar-color: var(--copper) transparent; padding: .2rem clamp(1rem, 3.5vw, 3.75rem) 1.1rem;}
.track-row::-webkit-scrollbar {height: 6px;}
.track-row::-webkit-scrollbar-thumb {background: var(--copper); border-radius: 99px;}
.track-card {position: relative; min-width: 0; scroll-snap-align: start;}
.track-cover {position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 12px; padding: 0; background: #101b18; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,.18);}
.track-cover::after {content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.58), transparent 46%); opacity: .4; transition: opacity .2s;}
.track-cover img {display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; transition: transform .34s ease, filter .34s ease;}
.track-cover:hover img {transform: scale(1.025); filter: brightness(.82);}
.track-cover:hover::after {opacity: .9;}
.play-badge {position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #1c1308; background: rgba(238, 199, 124, .94); opacity: 0; transform: translate(-50%, -40%) scale(.9); transition: opacity .22s, transform .22s; box-shadow: 0 8px 24px rgba(0,0,0,.34);}
.play-badge svg {width: 1.05rem; height: 1.05rem; margin-left: 2px; fill: currentColor; stroke: none;}
.track-cover:hover .play-badge, .track-cover:focus-visible .play-badge {opacity: 1; transform: translate(-50%, -50%) scale(1);}
.duration {position: absolute; z-index: 2; right: .48rem; bottom: .44rem; padding: .2rem .35rem; border-radius: .3rem; color: #fff; background: rgba(0,0,0,.72); font-size: .72rem;}
.track-number {position: absolute; z-index: 2; left: .5rem; bottom: .45rem; color: rgba(255,255,255,.7); font: .72rem ui-monospace, monospace;}
.card-copy {position: relative; padding: .75rem 2.3rem .1rem .12rem;}
.track-title-link {display: block; overflow: hidden; width: 100%; margin: 0; padding: 0; border: 0; color: var(--paper); background: none; font-size: .97rem; line-height: 1.35; font-weight: 720; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}
.track-title-link:hover {color: var(--gold);}
.card-copy > button.artist-link {overflow: hidden; max-width: 100%; margin: .22rem 0 0; padding: 0; border: 0; color: var(--muted); background: none; font-size: .82rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;}
.card-copy > button.artist-link:hover {color: var(--gold);}
.card-save {position: absolute; right: .08rem; top: .55rem; display: grid; place-items: center; width: 32px; aspect-ratio: 1; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer;}
.card-save:hover, .card-save.saved {color: var(--gold); background: rgba(230,189,115,.08);}
.card-save.saved svg {fill: currentColor;}
.card-save svg {width: 1rem; height: 1rem;}
.card-tags {display: flex; gap: .35rem; overflow: hidden; margin-top: .45rem;}
.card-tags span {flex: 0 0 auto; padding: .2rem .43rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted-2); font-size: .66rem;}
.skeleton-heading {width: 220px; height: 24px; margin: 0 0 1rem clamp(1rem,3.5vw,3.75rem); border-radius: 7px; background: #12201c;}
.skeleton-row {display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 1rem; padding: 0 clamp(1rem,3.5vw,3.75rem); overflow: hidden;}
.skeleton-row i {height: 190px; border-radius: 12px; background: linear-gradient(100deg, #0f1c18 20%, #172a24 45%, #0f1c18 70%); background-size: 300% 100%; animation: shimmer 1.8s infinite;}
@keyframes shimmer {
  to {background-position: -150% 0;}
}
.search-view, .collections-view {padding: clamp(2rem, 5vw, 4.7rem) clamp(1rem, 4vw, 4.5rem) 6rem;}
.page-heading {display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;}
.page-heading h1 {font-size: clamp(2.6rem, 5vw, 5rem);}
.page-heading p {margin: 0 0 .7rem; color: var(--muted);}
.page-heading p strong {color: var(--gold);}
.page-heading #search-progress {color: var(--muted); font-size: .82rem; white-space: nowrap;}
.search-panel {margin-bottom: 2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: #091511; box-shadow: 0 14px 50px rgba(0,0,0,.34);}
.filter-reset {align-self: end; height: 40px; padding: 0 .75rem; border: 0; color: var(--gold); background: transparent; cursor: pointer;}
.track-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem 1rem;}
.load-more {margin: 2rem auto 0;}
.empty-state {display: grid; place-items: center; min-height: 260px; padding: 2rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center;}
.empty-state svg {width: 2rem; height: 2rem; margin-bottom: .75rem; color: var(--gold-2);}
.empty-state h2 {margin: 0; color: var(--paper); font-family: Georgia, serif; font-size: 1.55rem;}
.empty-state p {margin: .45rem 0 0;}
.collections-heading {align-items: center;}
.collection-tabs {display: flex; gap: .35rem; overflow-x: auto; margin-bottom: 1.7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line);}
.collection-tabs button {flex: 0 0 auto; padding: .65rem .82rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 680; cursor: pointer;}
.collection-tabs button[aria-selected="true"] {color: var(--paper); background: rgba(230,189,115,.09);}
.collection-tabs span {margin-left: .35rem; color: var(--gold);}
.collection-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;}
.collection-tile {position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; background: linear-gradient(145deg, #152b24, #0a1512); cursor: pointer;}
.collection-tile::after {content: ""; position: absolute; right: -30px; bottom: -45px; width: 145px; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: inset 0 0 0 18px #0d1c18, inset 0 0 0 19px var(--line);}
.collection-tile h2 {position: relative; z-index: 2; margin: 3.5rem 0 .35rem; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 520;}
.collection-tile p {position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: .85rem;}
.collection-tile .tile-actions {position: absolute; z-index: 3; right: .7rem; top: .7rem; display: flex;}
.tile-actions button {display: grid; place-items: center; width: 34px; aspect-ratio: 1; border: 0; border-radius: 50%; color: var(--muted); background: rgba(0,0,0,.28); cursor: pointer;}
.tile-actions button:hover {color: var(--danger);}
.player-dock {position: fixed; z-index: 80; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: minmax(356px, 480px) 230px; overflow: hidden; width: min(730px, calc(100vw - 2rem)); min-height: 270px; border: 1px solid var(--line-strong); border-radius: 18px; background: #08120f; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(24px) scale(.98); transition: opacity .25s, transform .25s;}
.player-dock.open {opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);}
.player-video {min-width: 200px; min-height: 200px; background: #000;}
.player-video iframe {display: block; width: 100%; height: 100%; min-width: 200px; min-height: 270px; border: 0;}
.player-info {display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1.2rem; border-left: 1px solid var(--line);}
.now-playing-label {display: flex; align-items: center; gap: .45rem; color: var(--gold); font-size: .65rem; font-weight: 800; letter-spacing: .15em;}
.now-playing-label i {width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 1.5s infinite;}
@keyframes pulse {
  50% {opacity: .45;}
}
.player-title {display: grid; gap: .3rem; min-width: 0; margin: .85rem 0 1.3rem; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;}
.player-title strong, .player-title span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.player-title strong {color: var(--paper); font-family: Georgia, serif; font-size: 1.2rem; font-weight: 540;}
.player-title span {color: var(--muted); font-size: .84rem;}
.player-controls {display: flex; align-items: center; gap: .32rem;}
.player-controls button, .player-close {display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer;}
.player-controls button {width: 38px; aspect-ratio: 1;}
.player-controls button:hover, .player-controls button.active {color: var(--gold); border-color: var(--line-strong);}
.player-controls button.active svg {fill: currentColor;}
.player-controls svg {width: 1rem; height: 1rem;}
.player-close {position: absolute; right: .6rem; top: .6rem; width: 30px; aspect-ratio: 1; font-size: 1.2rem;}
.mobile-nav {display: none;}
.modal {width: min(760px, calc(100vw - 2rem)); max-height: min(88vh, 820px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 20px; padding: 0; color: var(--paper); background: #0b1814; box-shadow: var(--shadow);}
.modal::backdrop {background: rgba(1, 7, 5, .78); backdrop-filter: blur(8px);}
.modal-close {position: sticky; z-index: 5; left: calc(100% - 3.2rem); top: .8rem; display: grid; place-items: center; width: 36px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); background: rgba(4,13,10,.78); font-size: 1.4rem; cursor: pointer;}
.detail-copy {align-self: center; min-width: 0;}
.detail-copy h2 {margin: .55rem 0 .35rem; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 520; line-height: 1.02;}
.detail-artist {margin: 0 0 .7rem; color: var(--gold); font-weight: 700;}
.detail-album {margin: 0; color: var(--muted); line-height: 1.5;}
.detail-actions {display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem;}
.meta-card {padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025);}
.meta-card span {display: block; color: var(--muted-2); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
.meta-card strong {display: block; margin-top: .28rem; color: var(--paper); font-size: .92rem;}
.mood-panel {padding: 0 1.4rem 1.6rem;}
.mood-panel h3 {margin: 0 0 .8rem; font-family: Georgia, serif; font-weight: 520;}
.collection-modal, .create-modal {width: min(480px, calc(100vw - 2rem));}
#collection-dialog-content, .create-modal form {padding: 0 1.4rem 1.5rem;}
.collection-modal h2, .create-modal h2 {margin: .45rem 0 1rem; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 520;}
.collection-choice {display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .8rem; border: 1px solid var(--line); border-radius: 9px; color: var(--paper); background: rgba(255,255,255,.025); text-align: left; cursor: pointer;}
.collection-choice + .collection-choice {margin-top: .45rem;}
.collection-choice:hover {border-color: var(--line-strong); background: rgba(230,189,115,.06);}
.collection-choice span {color: var(--muted); font-size: .8rem;}
.create-modal label {display: grid; gap: .4rem; color: var(--muted);}
.create-modal input {height: 46px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--paper); background: #10211c;}
.create-modal input:focus {border-color: var(--gold-2);}
.modal-actions {display: flex; justify-content: end; gap: .6rem; margin-top: 1rem;}
.legal-notice-modal {width: min(1080px, calc(100vw - 2rem)); height: min(92vh, 920px); max-height: 92vh; overflow: hidden;}
.legal-notice-modal .modal-close {position: absolute; right: .8rem; left: auto; top: .8rem;}
.legal-notice-toolbar {position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 86px; padding: 1rem 4.2rem 1rem 1.4rem; border-bottom: 1px solid var(--line); background: rgba(11,24,20,.96);}
.legal-notice-toolbar h2 {margin: .2rem 0 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 520;}
.legal-notice-toolbar a {flex: 0 0 auto; color: var(--gold-2); font-size: .78rem; text-decoration: none;}
.legal-notice-toolbar a:hover {text-decoration: underline;}
.legal-notice-content {height: calc(100% - 86px); overflow: auto; padding: 0 clamp(1.1rem, 4vw, 3.5rem) 3rem; scroll-behavior: smooth;}
.legal-notice-loading, .legal-notice-error {margin: 3rem 0; color: var(--muted);}
.legal-notice-content .legal-hero {padding: clamp(2.5rem, 7vw, 5rem) 0 2.2rem;}
.legal-notice-content .legal-hero h1 {max-width: 850px; margin: .6rem 0 1.2rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 6vw, 5rem); font-weight: 500; line-height: .98;}
.legal-notice-content .legal-hero p {max-width: 820px; color: var(--muted); font-size: clamp(.96rem, 2vw, 1.1rem); line-height: 1.65;}
.legal-notice-content .effective {font-size: .82rem !important;}
.legal-notice-content .launch-notice {margin: 0 0 2rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(239,176,124,.45); border-radius: 16px; background: rgba(104,54,30,.22);}
.legal-notice-content .launch-notice .eyebrow {color: #efb07c;}
.legal-notice-content .launch-notice h2 {margin: .35rem 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500;}
.legal-notice-content .launch-notice p {margin: .5rem 0 0; color: #dbc9b9; line-height: 1.65;}
.legal-notice-content .legal-nav {display: flex; gap: .6rem; overflow-x: auto; padding: .8rem 0 2rem;}
.legal-notice-content .legal-nav a {flex: 0 0 auto; padding: .52rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none;}
.legal-notice-content .legal-nav a:hover {border-color: var(--gold); color: var(--paper);}
.legal-notice-content .legal-section {display: grid; grid-template-columns: 64px 1fr; gap: clamp(1rem, 4vw, 2.5rem); padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem;}
.legal-notice-content .section-number {color: rgba(240,199,123,.4); font-family: Georgia, serif; font-size: 1.8rem;}
.legal-notice-content .legal-section h2, .legal-notice-content .contact-card h2 {max-width: 780px; margin: .4rem 0 1.3rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 5vw, 3.3rem); font-weight: 500; line-height: 1.05;}
.legal-notice-content .legal-section h3 {margin: 1.8rem 0 .5rem; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500;}
.legal-notice-content .legal-section p, .legal-notice-content .legal-section li {color: var(--muted); line-height: 1.65;}
.legal-notice-content a {color: var(--gold-2);}
.legal-notice-content .operator-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1.4rem 0;}
.legal-notice-content .operator-grid div {padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025);}
.legal-notice-content dt {color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;}
.legal-notice-content dd {margin: .3rem 0 0;}
.legal-notice-content .pending {color: #efb07c;}
.legal-notice-content .terms-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem;}
.legal-notice-content .terms-grid article {padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,rgba(201,149,82,.08),rgba(255,255,255,.025));}
.legal-notice-content .terms-grid h3, .legal-notice-content .terms-grid p {margin-top: 0;}
.legal-notice-content .table-wrap {overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: 14px;}
.legal-notice-content table {width: 100%; border-collapse: collapse; background: rgba(255,255,255,.025); font-size: .86rem;}
.legal-notice-content th, .legal-notice-content td {min-width: 140px; padding: .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);}
.legal-notice-content th {color: var(--gold-2); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;}
.legal-notice-content td {color: var(--muted);}
.legal-notice-content tbody tr:last-child td {border-bottom: 0;}
.legal-notice-content code {color: var(--paper); font-size: .76rem;}
.legal-notice-content .provider-list {display: grid; gap: .65rem; padding-left: 1.2rem;}
.legal-notice-content .provider-list strong {color: var(--paper);}
.legal-notice-content .contact-card {margin: 2rem 0 1rem; padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 90% 0,rgba(201,149,82,.18),transparent 20rem),rgba(255,255,255,.04);}
.legal-notice-content .primary-link {display: inline-flex; padding: .75rem 1rem; border: 1px solid var(--gold); border-radius: 10px; text-decoration: none;}
.toast {position: fixed; z-index: 120; left: 50%; bottom: 1.2rem; max-width: min(90vw, 420px); padding: .72rem 1rem; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--paper); background: #14251f; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .25s;}
.toast.show {opacity: 1; transform: translate(-50%, 0);}
footer {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1.4rem clamp(1rem,4vw,4rem) calc(1.4rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted-2); background: #050c0a; font-size: .78rem;}
footer > div {display: flex; align-items: center; gap: .6rem; color: var(--paper);}
footer p {margin: 0;}
footer button, footer a {border: 0; padding: 0; color: var(--gold); background: none; cursor: pointer; font: inherit; text-decoration: none;}
footer button:hover, footer a:hover {color: var(--gold-2); text-decoration: underline;}
footer .footer-links {justify-content: end; flex-wrap: wrap; color: var(--gold);}
@media (max-width: 1080px) {.filter-reset {align-self: center;}.player-dock {grid-template-columns: minmax(320px, 1fr) 210px;}}
@media (max-width: 720px) {:root {--header-h: 66px;}body {padding-bottom: calc(70px + env(safe-area-inset-bottom));}body.player-open {padding-bottom: calc(360px + env(safe-area-inset-bottom));}.brand-disc {width: 36px;}.brand strong {font-size: 1.08rem;}.catalog-count {display: none;}.featured {min-height: 570px; align-items: end;}.featured-backdrop {background-position: 62% 25%;}.featured-shade {background: linear-gradient(0deg, #07100e 0%, rgba(7,16,14,.85) 38%, rgba(7,16,14,.08) 76%), linear-gradient(90deg, rgba(7,16,14,.5), transparent);}.featured-copy {width: 100%; padding: 2.2rem 1rem 3.5rem;}.featured h1 {font-size: clamp(2.5rem, 13vw, 4.4rem);}.featured-copy > p {font-size: .98rem;}.featured-index {display: none;}.featured-actions {flex-wrap: wrap;}.featured-actions .button {flex: 1 1 145px;}.track-row {grid-auto-columns: min(76vw, 290px); padding-inline: 1rem;}.shelf-head {padding-inline: 1rem;}.shelf-head p {display: none;}.home-sections {padding-bottom: 2rem;}.search-view, .collections-view {padding: 1.7rem 1rem 5rem;}.page-heading {align-items: start;}.page-heading h1 {font-size: 2.8rem;}.page-heading p {margin-top: 1rem;}.search-panel {margin-inline: -.2rem; padding: .55rem;}.filter-reset {font-size: .82rem;}.track-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .65rem;}.track-grid .card-copy {padding-right: .1rem;}.track-grid .card-save {top: -2.35rem; right: .35rem; z-index: 3; color: #fff; background: rgba(0,0,0,.55);}.card-tags {display: none;}.collections-heading {display: grid;}.collections-heading .button {justify-self: start;}.mobile-nav {position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: .42rem .3rem calc(.42rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(6,14,12,.94); backdrop-filter: blur(18px);}.mobile-nav button {display: grid; justify-items: center; gap: .2rem; padding: .25rem; border: 0; color: var(--muted-2); background: none; font-size: .66rem; cursor: pointer;}.mobile-nav button.active {color: var(--gold);}.mobile-nav svg {width: 1.25rem; height: 1.25rem;}.player-dock {right: 0; left: 0; bottom: calc(61px + env(safe-area-inset-bottom)); grid-template-columns: 1fr; width: 100%; min-height: 0; border-right: 0; border-left: 0; border-radius: 16px 16px 0 0;}.player-video {min-height: 200px; aspect-ratio: 16/9;}.player-video iframe {min-height: 200px; aspect-ratio: 16/9;}.player-info {flex-direction: row; align-items: center; gap: .75rem; padding: .72rem .9rem; border-top: 1px solid var(--line); border-left: 0;}.now-playing-label {display: none;}.player-title {flex: 1 1 auto; margin: 0;}.player-title strong {font-size: .96rem;}.player-title span {font-size: .75rem;}.player-controls {flex: 0 0 auto;}.player-controls button {width: 35px;}#player-prev, #player-add {display: none;}.player-close {top: .4rem; right: .4rem; background: rgba(0,0,0,.65);}.legal-notice-modal {width: calc(100vw - 1rem); height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 14px;}.legal-notice-toolbar {align-items: flex-start; min-height: 106px; padding: .9rem 3.4rem .9rem 1rem;}.legal-notice-toolbar a {position: absolute; left: 1rem; bottom: .75rem;}.legal-notice-content {height: calc(100% - 106px); padding-inline: 1rem;}.legal-notice-content .legal-section {grid-template-columns: 1fr;}.legal-notice-content .section-number {font-size: 1.15rem;}.legal-notice-content .operator-grid, .legal-notice-content .terms-grid {grid-template-columns: 1fr;}footer {grid-template-columns: 1fr; margin-bottom: 0;}}
@media (display-mode: standalone) {html {background: #07100e;}body {overscroll-behavior-y: contain;}.app-action {display: none !important;}}
@media (max-width: 420px) {.track-grid {grid-template-columns: 1fr;}.track-grid .track-card {display: grid; grid-template-columns: 42% 1fr; gap: .7rem;}.track-grid .card-copy {align-self: center; padding-top: .2rem;}.track-grid .card-save {top: .28rem; right: .25rem;}}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;}}