:root {
  color-scheme: dark;
  --ink: #f5f0e5;
  --muted: #aaa89f;
  --dim: #777870;
  --paper: #121513;
  --panel: #191d1a;
  --panel-2: #202520;
  --line: #343a34;
  --gold: #edb64c;
  --coral: #ed7358;
  --green: #8cae72;
  --blue: #7c9fc4;
  --purple: #ad83bb;
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.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; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.25fr) minmax(250px, .8fr); gap: 20px; align-items: center; min-height: 72px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: rgba(18,21,19,.92); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; border: 0; background: none; font-weight: 760; letter-spacing: -.02em; cursor: pointer; }
.brand-mark { width: 30px; aspect-ratio: 1; border: 7px solid var(--gold); border-radius: 50%; box-shadow: inset 0 0 0 5px var(--paper); background: var(--coral); }
.search-wrap { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #0f1210; }
.search-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(237,182,76,.12); }
.search-wrap svg { width: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-wrap input::placeholder { color: var(--dim); }
kbd { padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); font-size: 12px; }
.search-results { position: absolute; top: 52px; left: 0; right: 0; z-index: 30; max-height: 430px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #171a18; box-shadow: var(--shadow); }
.search-result { display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.search-result:hover, .search-result:focus-visible { background: var(--panel-2); outline: none; }
.result-art { width: 40px; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(145deg,var(--c1),var(--c2)); }
.result-copy strong, .result-copy span { display: block; }
.result-copy span, .result-year { color: var(--muted); font-size: 12px; }
.search-empty { padding: 22px; color: var(--muted); text-align: center; }
.topnav { display: flex; justify-content: flex-end; gap: 5px; }
.nav-button { padding: 8px 13px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.nav-button:hover, .nav-button.is-active { background: var(--panel-2); color: var(--ink); }

main { min-height: calc(100vh - 72px); }
.view { min-height: calc(100vh - 72px); }
.explore-view { display: grid; grid-template-columns: minmax(230px, 280px) minmax(500px, 1fr) minmax(270px, 330px); }
.song-panel, .inspector { padding: 28px 24px; background: #151815; }
.song-panel { border-right: 1px solid var(--line); }
.inspector { border-left: 1px solid var(--line); }
.eyebrow { margin: 0 0 7px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px,4vw,46px); line-height: 1.02; letter-spacing: -.035em; }
h2 { margin-bottom: 9px; font-size: 16px; letter-spacing: -.015em; }
h3 { font-size: 13px; }
.song-meta { color: var(--muted); }
.album-art { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1; margin: 26px auto 18px; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg,var(--c1,#d3563d),var(--c2,#edbd4c)); box-shadow: var(--shadow); }
.album-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-art img[hidden], .card-art img[hidden] { display: none; }
.art-placeholder, .card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; text-align: center; font-weight: 800; font-size: 24px; color: #fff; text-shadow: 0 2px 12px #0008; }
.art-placeholder:empty, .card-placeholder:empty { display: none; }
.song-profile { font-size: 14px; line-height: 1.6; }
.recording-note { text-align: center; font-size: 12px; opacity: .8; }
.recording-source { display: block; margin: 12px 0; text-align: center; font-size: 13px; text-underline-offset: 3px; }
.recording-source[hidden] { display: none; }
.library-search-wrap { max-width: 1280px; margin: 0 auto 24px; }
.library-search-wrap label { display: block; margin-bottom: 8px; font-size: 14px; }
.library-search-wrap input { width: 100%; padding: 14px; border: 1px solid #697368; border-radius: 10px; background: #202620; color: #f8f5ec; font: inherit; }
#library-count { font-size: 14px; }
.primary-action { display: block; padding: 11px 16px; border-radius: 999px; background: var(--ink); color: #141613; font-weight: 750; text-align: center; text-decoration: none; }
.primary-action:hover { background: var(--gold); }
.profile-block, .legend-block { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--line); }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #d3d1c8; font-size: 12px; }
.legend-item { display: grid; grid-template-columns: 12px 1fr; gap: 9px; align-items: center; width: 100%; padding: 7px 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; }
.legend-item i { width: 9px; height: 9px; border-radius: 50%; background: var(--kind); box-shadow: 0 0 0 3px color-mix(in srgb,var(--kind) 20%,transparent); }
.legend-item[data-kind="confirmed"] { --kind: var(--gold); }
.legend-item[data-kind="match"] { --kind: var(--coral); }
.legend-item[data-kind="roots"] { --kind: var(--green); }
.legend-item[data-kind="vibe"] { --kind: var(--purple); }
.legend-item:hover, .legend-item.is-active { color: var(--ink); }
.legend-item.is-muted { opacity: .34; }
.clear-filter { margin-top: 7px; padding: 0; border: 0; background: none; color: var(--gold); font-size: 12px; cursor: pointer; }

.workspace { min-width: 0; padding: 28px; background: radial-gradient(circle at 45% 20%,#1d241f 0,transparent 34%),var(--paper); }
.workspace-head, .timeline-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.workspace-head h2 { margin: 0; font-family: Georgia,serif; font-size: 25px; }
.map-shell { position: relative; min-height: 470px; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background-color: #131714; background-image: radial-gradient(rgba(245,240,229,.09) .7px,transparent .7px); background-size: 18px 18px; overflow: hidden; }
#connection-map { display: block; width: 100%; height: 470px; }
.edge { fill: none; stroke: var(--kind); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.edge-halo { fill: none; stroke: #131714; stroke-width: 7; }
.edge.confirmed { --kind: var(--gold); }
.edge.match { --kind: var(--coral); }
.edge.roots { --kind: var(--green); }
.edge.vibe { --kind: var(--purple); }
.map-node { cursor: pointer; }
.map-node:focus { outline: none; }
.map-node.confirmed { --kind: var(--gold); }
.map-node.match { --kind: var(--coral); }
.map-node.roots { --kind: var(--green); }
.map-node.vibe { --kind: var(--purple); }
.node-card { fill: #1c211d; stroke: #4a514b; stroke-width: 1.5; transition: fill .16s,stroke .16s; }
.node-accent { fill: var(--kind); pointer-events: none; }
.map-node:hover .node-card, .map-node:focus .node-card, .map-node.is-selected .node-card { fill: #292f2a; stroke: var(--ink); stroke-width: 2; }
.node-title { fill: var(--ink); font: 700 12.5px Inter,system-ui,sans-serif; pointer-events: none; }
.node-artist { fill: var(--muted); font: 11.5px Inter,system-ui,sans-serif; pointer-events: none; }
.center-card { fill: #2b302b; stroke: var(--gold); stroke-width: 2; }
.center-node .node-title { font-size: 14px; }
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.map-count { position: absolute; right: 15px; bottom: 12px; color: var(--dim); font-size: 11px; }

.timeline-card { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.timeline-head h2 { margin: 0; }
.duration { color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline { display: flex; gap: 4px; height: 58px; margin-top: 17px; }
.timeline button { position: relative; min-width: 42px; padding: 7px; overflow: hidden; border: 1px solid #424842; border-radius: 9px; background: #262c27; color: #d6d3c9; font-size: 10px; line-height: 1.15; cursor: pointer; }
.timeline button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--section-color,var(--gold)); opacity: .7; }
.timeline button:hover, .timeline button.is-active { border-color: var(--gold); background: #343a31; color: white; }
.timeline-note { margin: 10px 0 0; color: var(--dim); font-size: 11px; }

.inspector { overflow: auto; }
.inspector-empty { min-height: 480px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--muted); }
.inspector-empty h2 { color: var(--ink); }
.inspector-empty p { max-width: 220px; }
.inspector-disc { width: 74px; aspect-ratio: 1; margin-bottom: 22px; border: 10px solid #262b27; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.connection-kind { display: inline-flex; padding: 4px 8px; margin-bottom: 14px; border: 1px solid var(--kind); border-radius: 999px; color: var(--kind); font-size: 11px; font-weight: 750; }
.connection-kind.confirmed { --kind: var(--gold); }
.connection-kind.match { --kind: var(--coral); }
.connection-kind.roots { --kind: var(--green); }
.connection-kind.vibe { --kind: var(--purple); }
#connection-title { margin-bottom: 3px; font-family: Georgia,serif; font-size: 29px; line-height: 1.03; }
.basis-line { display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 9px; color: var(--muted); font-size: 11px; }
.basis-line strong { color: var(--ink); text-align: right; }
.connection-summary { font-size: 17px; line-height: 1.55; }
.connection-facts { margin: 24px 0; }
.connection-facts div { padding: 14px 0; border-top: 1px solid var(--line); }
.connection-facts dt { margin-bottom: 4px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.connection-facts dd { margin: 0; color: #d2cfc6; font-size: 13px; }
.inspector-actions { display: grid; gap: 8px; }
.inspector-actions a, .inspector-actions button { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font-size: 12px; text-align: center; text-decoration: none; cursor: pointer; }
.inspector-actions a:hover, .inspector-actions button:hover { border-color: var(--gold); }
.inspector-actions button:disabled { border-color: var(--line); color: var(--dim); cursor: default; opacity: .72; }
.trail-card { margin-top: 24px; padding: 16px; border-radius: 13px; background: var(--panel-2); }
.connection-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.connection-trail span:not(:last-child)::after { content: "→"; margin-left: 6px; color: var(--dim); }

.library-view, .about-view { padding: clamp(30px,6vw,76px); }
.library-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; max-width: 1280px; margin: 0 auto 30px; }
.library-head > div > p:last-child, .about-copy > p { max-width: 650px; color: var(--muted); font-size: 17px; }
.library-filter { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.library-filter select { display: block; min-width: 160px; margin-top: 6px; padding: 9px 30px 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 15px; max-width: 1280px; margin: auto; }
.song-card { min-height: 240px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); text-align: left; cursor: pointer; transition: transform .18s,border-color .18s; }
.song-card:hover, .song-card:focus-visible { transform: translateY(-3px); border-color: #656c65; outline: none; }
.card-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin-bottom: 15px; border-radius: 10px; background: linear-gradient(140deg,var(--c1),var(--c2)); overflow: hidden; }
.card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.song-card strong, .song-card span { display: block; }
.song-card strong { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.song-card span { color: var(--muted); font-size: 12px; }
.card-tags { margin-top: 12px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.library-grid.is-artists { display: block; }
.artist-group { margin-bottom: 40px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.artist-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.artist-heading h2, .artist-heading p { margin: 0; }
.artist-heading h2 { font-family: Georgia,serif; font-size: 24px; }
.artist-heading p { color: var(--muted); font-size: 13px; }
.artist-avatar { width: 54px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%,var(--paper) 0 13%,var(--gold) 14% 20%,#292d29 21% 62%,var(--coral) 63% 100%); }
.artist-songs { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 15px; }
.about-copy { max-width: 1100px; margin: auto; padding-top: 4vh; }
.about-copy h1 { max-width: 740px; font-size: clamp(46px,8vw,96px); }
.about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 58px; }
.about-grid article { min-height: 220px; padding: 24px; border-top: 1px solid var(--line); background: linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.about-grid article > span { color: var(--gold); font-size: 12px; }
.about-grid h2 { margin-top: 48px; font-size: 20px; }
.about-grid p { color: var(--muted); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto minmax(160px,1fr) auto; gap: 12px; }
  .explore-view { grid-template-columns: 240px 1fr; }
  .inspector { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .inspector-empty { min-height: 210px; }
  #inspector-content { max-width: 760px; margin: auto; }
}
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .search-wrap { grid-column: 1 / -1; grid-row: 2; }
  .topnav { grid-column: 2; grid-row: 1; }
  .brand { grid-column: 1; grid-row: 1; }
  .explore-view { display: block; }
  .song-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .album-art { max-width: 180px; }
  .workspace { padding: 22px 14px; }
  .map-shell, #connection-map { min-height: 430px; height: 430px; }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .library-view { padding: 28px 16px; }
  .library-grid, .artist-songs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .song-card { min-width: 0; padding: 10px; }
  .song-card strong { font-size: 14px; }
  .song-card .card-meta { line-height: 1.5; margin-top: 6px; }
  .artist-group { padding: 14px; }
  .brand span:last-child { display: none; }
  .topnav { gap: 1px; }
  .nav-button { padding-inline: 9px; font-size: 12px; }
  kbd { display: none; }
  .workspace-head { display: block; }
  .timeline { overflow-x: auto; }
  .timeline button { flex: 0 0 92px !important; }
  .library-head { display: block; }
  .library-filter { display: block; margin-top: 24px; }
}

.inspector-art { display: block; width: 160px; max-width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; margin: 18px 0; }
.artwork-credit { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin: 8px 0 18px; }
.song-card { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
.card-art { flex: 0 0 auto; }
.card-tags { line-height: 1.5; }
.song-panel h1, #connection-title { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.result-art { overflow: hidden; }
.result-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.album-art img { object-fit: contain; }
.exploration-trail { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.exploration-trail p { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
#exploration-path { display: flex; gap: 6px; flex-wrap: wrap; }
#exploration-path button, .map-pagination button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-2); cursor: pointer; font-size: 12px; }
#exploration-path button[aria-current] { border-color: var(--gold); }
#exploration-path button:focus-visible, .map-pagination button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.map-context { font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 620px; }
.node-chronology { fill: #c8c6bb; font-size: 9px; pointer-events: none; }
.connection-chronology { padding: 12px; border-left: 3px solid var(--gold); background: var(--panel-2); font-size: 13px; line-height: 1.6; }
.map-pagination { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; margin: 18px 0; font-size: 12px; }
.map-pagination button:disabled { opacity: .45; cursor: default; }