:root {
  color-scheme: light dark;
  --bg: #f8f6f0;
  --ink: #292a25;
  --muted: #66695f;
  --line: #dedfd5;
  --accent: #8e4834;
  --hover: #eeeee5;
  --panel: #fffdf7;
  --bar: #7c8975;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --controls-height: 64px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#191b18; --ink:#e9e8de; --muted:#a0a397; --line:#383c33; --accent:#d7997e; --hover:#252921; --panel:#22251f; --bar:#a0ad94; }
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--controls-height) + 20px); }
body { margin:0; background:var(--bg); color:var(--ink); font:0.9375rem var(--sans); -webkit-font-smoothing:antialiased; }
button, input, select { font:inherit; color:inherit; }
button, a, input, select { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { border:0; background:none; cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
button, a { touch-action:manipulation; }
:where(button,a,input,select,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
:where(a,button,input,select,summary,[tabindex]) { scroll-margin-top:calc(var(--controls-height) + 20px); }
main:focus, #results:focus { outline:none; }
#results { scroll-margin-top:0; }
[hidden] { display:none!important; }
.shell { max-width:840px; padding:0 48px; margin:auto; }
.masthead { padding:30px 0; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:17px; max-width:100%; font-size:0.8125rem; font-weight:600; letter-spacing:.01em; }
.brand>span:last-child { min-width:0; }
.mark { font:2.25rem var(--serif); letter-spacing:-4px; padding-right:4px; }
.mark span { color:var(--accent); font-size:1.4375rem; vertical-align:middle; margin:0 3px; }
.brand-sub { display:block; color:var(--muted); font-weight:400; font-size:0.75rem; margin-top:4px; line-height:1.5; }
.brand-years { display:inline-block; white-space:nowrap; }
#search-form { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); margin-top:20px; min-height:56px; }
.search-icon { font-size:1.625rem; color:var(--muted); }
#search-input { border:0; background:transparent; padding:12px 0; min-width:0; font-size:1rem; outline-offset:0; }
#search-input::-webkit-search-cancel-button { display:none; }
#search-input::placeholder { color:var(--muted); }
#clear-search { min-width:44px; min-height:44px; font-size:1.375rem; color:var(--muted); }
#search-scope { color:var(--muted); font-size:0.8125rem; padding-top:8px; line-height:1.7; }
#search-scope a { display:inline-flex; align-items:center; min-height:32px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.home-spacing { height:14px; }
h1 { font:400 clamp(2.3125rem,5.4vw,3.6875rem)/1.12 var(--serif); letter-spacing:-.045em; margin:0; overflow-wrap:anywhere; }
.intro.detail { padding:18px 0 24px; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:0.6875rem; color:var(--muted); font-weight:600; margin:0 0 12px; }
.back { display:inline-flex; align-items:center; min-height:44px; margin:0 0 12px; font-size:0.8125rem; color:var(--muted); }
.back:hover, .artist-link:hover, .detail-artists a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.intro p.subtitle { color:var(--muted); font-size:0.875rem; line-height:1.6; margin:14px 0 0; }
.first-listened { font-size:0.8125rem; line-height:1.6; color:var(--muted); margin:7px 0 0; }
.detail-artists { margin-top:8px; color:var(--muted); font-size:0.875rem; line-height:1.7; }
.detail-artists a { display:inline-flex; min-height:32px; align-items:center; }
.controls { position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0 20px; background:var(--bg); border-bottom:1px solid var(--line); }
#tabs { display:flex; flex-wrap:wrap; gap:24px; min-width:0; }
.tab { display:inline-flex; gap:5px; min-height:58px; align-items:center; font-size:0.875rem; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.tab-count { font-size:0.75rem; font-variant-numeric:tabular-nums; font-weight:400; }
.period-button { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:44px; margin-left:auto; max-width:100%; font-size:0.8125rem; padding:8px 0 8px 12px; text-align:right; line-height:1.5; }
.period-button span { color:var(--muted); font-size:1.0625rem; }
.content-layout, #results, #history-panel { min-width:0; }
.list-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:22px 0 14px; color:var(--muted); font-size:0.75rem; line-height:1.5; }
.list-meta span:last-child { white-space:nowrap; }
.rank-list { list-style:none; margin:0; padding:0; }
.music-row { border-bottom:1px solid var(--line); border-radius:3px; }
.music-row:not(.unattributed):focus-within { background:var(--hover); }
.row-main { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:14px; align-items:center; min-height:82px; padding:16px 0; border-radius:3px; }
@media (hover:hover) {
  .music-row:not(.unattributed):hover { background:var(--hover); }
  a.row-main:hover .music-name { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
}
a.row-main:focus-visible .music-name { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
a.row-main:focus-visible { outline-offset:0; }
.rank { font:1.0625rem var(--serif); color:var(--muted); font-variant-numeric:tabular-nums; }
.row-title { min-width:0; }
.music-name { font-size:1rem; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.note { display:inline; font-size:0.75rem; font-weight:400; color:var(--muted); margin-left:8px; }
.duration { font-size:0.8125rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.duration span { color:var(--muted); font-size:0.8125rem; margin-left:2px; }
.listening-bar { display:block; margin-top:9px; overflow:hidden; }
.bar-track { fill:var(--line); opacity:.5; }
.bar-fill { fill:var(--bar); }
.has-credit .row-main { min-height:64px; padding-bottom:5px; }
.music-credit { padding:0 0 9px 46px; font-size:0.8125rem; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.music-credit .artist-link { display:inline-flex; align-items:center; min-height:32px; min-width:44px; padding:3px 0; }
.search-type { font-size:0.75rem; color:var(--muted); }
.searching .row-main { grid-template-columns:40px minmax(0,1fr) auto; }
.searching .music-credit { padding-left:54px; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.75rem; color:var(--muted); }
.pagination a, .pagination button { min-height:44px; display:inline-flex; align-items:center; color:var(--ink); font-size:0.8125rem; padding:0 5px; }
.pagination a:hover { color:var(--accent); }
.pagination-top { padding:0 0 9px; border-bottom:1px solid var(--line); }
.pagination-bottom { padding:16px 0; }
.status { padding:60px 0; text-align:center; color:var(--muted); line-height:1.7; }
.status button, .status a { display:inline-flex; align-items:center; color:var(--accent); padding:8px; min-height:44px; }
.loading-state { padding:24px 0; color:var(--muted); font-size:0.875rem; }
.loading-state p { margin:0 0 20px; }
.skeleton { display:grid; gap:28px; }
.skeleton span { display:block; height:36px; width:75%; background:var(--line); opacity:.35; border-radius:3px; }
.skeleton span:nth-child(even) { width:55%; }
.error { color:var(--accent); font-size:0.8125rem; line-height:1.6; }
footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:16px 32px; font-size:0.75rem; color:var(--muted); padding:20px 0 32px; margin-top:32px; }
.about-history { max-width:430px; }
.about-history summary { cursor:pointer; min-height:44px; align-content:center; }
.about-history p { line-height:1.7; margin:0 0 10px; }
.yearly-chart { padding:20px 0; }
.peak-insight { font-size:0.8125rem; line-height:1.6; color:var(--muted); margin:0 0 12px; }
.peak-insight strong { color:var(--ink); font-weight:600; }
.yearly-disclosure>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; cursor:pointer; list-style:none; font-size:0.8125rem; font-weight:500; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.yearly-disclosure>summary::-webkit-details-marker { display:none; }
.yearly-expand, .yearly-collapse { font-size:0.75rem; color:var(--muted); font-weight:400; }
.yearly-collapse, .yearly-disclosure[open] .yearly-expand { display:none; }
.yearly-disclosure[open] .yearly-collapse { display:inline; }
.yearly-content { padding-top:10px; }
.yearly-heading { display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; }
.yearly-readout { font-size:0.75rem; color:var(--muted); min-height:20px; margin-left:auto; font-variant-numeric:tabular-nums; }
.chart-back, .chart-rankings { display:inline-flex; align-items:center; color:var(--accent); min-height:44px; font-size:0.8125rem; padding:0; }
.chart-rankings { text-decoration:underline; text-underline-offset:3px; }
.chart-filter-status { color:var(--muted); font-size:0.8125rem; line-height:1.6; margin:8px 0; }
.chart-year { font-size:0.8125rem; font-weight:500; }
.yearly-filter { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:0.8125rem; color:var(--muted); margin-bottom:8px; }
.yearly-filter a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.yearly-scroll { max-width:100%; margin:12px 0; }
.yearly-scroll svg { display:block; max-width:100%; overflow:visible; }
.yearly-grid { stroke:var(--line); stroke-width:1; }
.yearly-axis { fill:var(--muted); font:12px var(--sans); font-variant-numeric:tabular-nums; }
.yearly-partial { fill:var(--muted); font:10px var(--sans); }
.yearly-bar { fill:var(--bar); }
.yearly-zero { stroke:var(--muted); stroke-width:2; }
.yearly-hit { fill:transparent; stroke:transparent; stroke-width:1; }
.yearly-year { cursor:pointer; outline:none; }
.yearly-year.is-selected .yearly-bar, .yearly-year:hover .yearly-bar, .yearly-year:focus .yearly-bar { fill:var(--accent); }
.yearly-year.outside-period .yearly-bar { opacity:.5; }
.yearly-year:hover .yearly-hit { fill:var(--hover); fill-opacity:.55; }
.yearly-year:focus-visible .yearly-hit { stroke:var(--accent); }
.yearly-year.is-selected .yearly-label { fill:var(--accent); font-weight:600; }
.yearly-note { font-size:0.75rem; line-height:1.6; color:var(--muted); margin:3px 0 7px; }
.monthly-row { cursor:default; }
dialog { width:calc(100% - 32px); max-width:430px; max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:8px; padding:24px; background:var(--panel); color:var(--ink); box-shadow:0 24px 100px #0002; }
dialog::backdrop { background:#10130e66; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; }
.dialog-heading h2 { font:normal 1.625rem var(--serif); letter-spacing:-.03em; margin:0; }
.dialog-heading button { font-size:1.5625rem; min-width:44px; height:44px; color:var(--muted); }
label { display:block; font-size:0.8125rem; color:var(--muted); margin:18px 0 9px; }
select, input { width:100%; min-height:46px; background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:10px; font-size:1rem; min-width:0; }
.range-endpoint { border:0; padding:0; margin:20px 0 0; min-width:0; }
.range-endpoint legend { font-size:0.8125rem; color:var(--muted); padding:0 0 9px; }
.month-year { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:12px; }
.apply { width:100%; background:var(--ink); color:var(--bg); border-radius:4px; min-height:48px; margin-top:12px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; font-size:0.875rem; }
.period-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.period-options button { border:1px solid var(--line); border-radius:5px; min-height:52px; padding:12px 8px; background:var(--bg); font-size:0.875rem; text-align:center; }
.period-options button:hover { background:var(--hover); }
.period-options button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); background:var(--hover); }
.skip { position:absolute; left:20px; top:-60px; background:var(--ink); color:var(--bg); padding:12px; z-index:5; }
.skip:focus { top:10px; }
.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; }
@media (min-width:1024px) {
  .shell.detail-layout { max-width:1040px; }
  .content-layout.has-history { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); column-gap:40px; align-items:start; }
  .has-history #results { grid-column:1; grid-row:1; }
  .has-history #history-panel { grid-column:2; grid-row:1; }
  .yearly-disclosure>summary { display:none; }
  .yearly-content { padding-top:0; }
}
@media (max-width:600px) {
  .shell { padding:0 20px; }
  .masthead { padding:20px 0; }
  #search-form { margin-top:12px; }
  #tabs { gap:22px; }
  .tab { font-size:0.875rem; }
  .controls { column-gap:12px; }
  .custom-period .period-button { flex-basis:100%; border-top:1px solid var(--line); padding-left:0; }
  .searching #tabs { width:100%; justify-content:space-between; gap:8px; }
  .searching .period-button { min-height:44px; }
  .intro.detail h1 { font-size:2.3125rem; }
  .row-main { grid-template-columns:27px minmax(0,1fr) auto; gap:10px; }
  .rank { font-size:1rem; }
  .music-credit { padding-left:37px; }
  .searching .row-main { grid-template-columns:35px minmax(0,1fr) auto; }
  .searching .music-credit { padding-left:45px; }
  .search-type { font-size:0.6875rem; }
  .list-meta { font-size:0.75rem; }
  footer { flex-direction:column; gap:4px; }
  .pagination { gap:5px; }
  .pagination a, .pagination button { padding:0; }
  dialog { padding:20px; }
}
@media (max-width:380px) {
  #tabs { gap:18px; }
  .controls { column-gap:8px; }
  .period-button { padding-left:4px; gap:5px; }
}
@media (prefers-reduced-motion:no-preference) {
  a, button { transition:color .15s, background .15s; }
  dialog[open] { animation:appear .15s ease-out; }
  @keyframes appear { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
}