/* Printed record-shop chart: bold ink, coloured strips, a map without a card grid. */
body{font-family:Arial,Helvetica,sans-serif;background:#101114;color:#f1eddf}header{height:auto;min-height:172px;margin:0;padding:20px 26px;align-items:stretch;gap:26px;border-bottom:3px solid #eee8d8;background:#18191c}.masthead{position:relative;display:block;background:#eee8d8;color:#141518;padding:12px 76px 12px 18px;font-size:56px;font-weight:900;line-height:.87;letter-spacing:-3px;text-decoration:none;white-space:nowrap}.masthead span{position:absolute;right:14px;bottom:10px;font-size:84px;font-weight:400}.header-copy{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}.header-copy p{margin:0;padding:6px 11px;font-size:19px;line-height:1.2;font-weight:700;color:#141518}.headline-strip{background:#e6a65d}.instructions-strip{background:#cbb68a}.play-strip{background:#a1c778}header .quiet{align-self:stretch;border:2px solid #eee8d8;padding:12px 16px;font-size:18px;color:#eee8d8;text-align:left;text-decoration:none;line-height:1.3;background:none}main{padding:0}#legend{padding:12px 26px;gap:6px;background:#18191c;font-size:16px}.legend-item{background:var(--colour);color:#141518;padding:7px 11px;font-weight:700}#viewport{height:calc(100dvh - 280px);min-height:470px;max-height:none;border:0;border-radius:0;background:#101114;overflow:auto;touch-action:pan-x pan-y;scrollbar-color:#a9a397 #202125;scrollbar-width:auto}#map{display:block;max-width:none;max-height:none;user-select:none}.family-fill{opacity:.1}.branch{opacity:.65}.influence{opacity:.2}.genre .label-bg{fill:#101114f0;stroke:none}.genre text{fill:#e9e5d8;font:22px Arial,Helvetica,sans-serif;letter-spacing:.1px}.genre:hover .label-bg,.genre.selected .label-bg{fill:var(--colour)}.genre:hover text,.genre.selected text{fill:#101114;font-weight:700}.year-label{fill:#a29b90;font:24px Arial,Helvetica,sans-serif;letter-spacing:1px}.time-rule{stroke:#eee8d815;stroke-dasharray:3 12}.root-title{fill:#eee8d8;font:700 38px Arial,Helvetica,sans-serif;letter-spacing:3px}.root-subtitle{fill:#b4ac9b;font:19px Arial,Helvetica,sans-serif;letter-spacing:2px}footer{font-size:15px;padding:14px 26px;color:#b4ac9b}footer .quiet{font-size:16px}.map-navigation{position:fixed;right:24px;bottom:24px;width:230px;padding:10px;background:#eee8d8;color:#141518;border:2px solid #141518;z-index:4;box-shadow:4px 4px 0 #0008}.mini-heading{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:7px}#minimap{display:block;width:100%;height:112px;background:#18191c;cursor:crosshair;border:1px solid #141518}.mini-window{fill:#ffffff18;stroke:#fff;stroke-width:50}.map-controls{position:static;display:flex;margin:8px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;gap:4px;width:100%}.map-controls button{background:#18191c;color:#eee8d8;border:0;border-radius:0;width:35px;height:32px;font-size:21px}.map-controls button:hover{background:#45464a}#fit{font-size:15px;width:40px}#random-place{font-size:15px;width:80px}#player{left:24px;right:auto;bottom:24px;transform:none;width:480px;border:2px solid #eee8d8;border-radius:0;background:#18191c;padding:20px 22px;backdrop-filter:none;box-shadow:4px 4px 0 #0008;max-height:calc(100dvh - 32px);overflow:auto}#player h2{font:700 29px Arial,Helvetica,sans-serif;letter-spacing:-.8px}#player-family{font-size:15px;letter-spacing:0}#player-date,#player-heritage{font-size:15px;color:#b9b6ad}#youtube-player,#youtube-player iframe{display:block;width:100%;min-height:250px;border:0;background:#08090b}#sample-label{font-size:16px;line-height:1.4;margin:12px 0 6px}#sample-status,.sample-note,#recording-link{font-size:14px;line-height:1.45}#sample-status{color:#c5c1b6}#recording-link{display:block;margin-top:10px;color:#e6a65d}dialog{border-radius:0;background:#18191c;box-shadow:none}dialog p{font-size:17px}dialog h2{font:700 32px Arial,Helvetica,sans-serif}dialog .eyebrow{font-size:16px;letter-spacing:0}#source-list{font-size:16px}
@media(max-width:900px){header{gap:14px;padding:16px}.masthead{font-size:42px;padding-right:55px}.masthead span{font-size:65px}.header-copy p{font-size:16px}header .quiet{font-size:16px;padding:10px}#legend{padding:10px 16px;font-size:14px}}
@media(max-width:600px){header{flex-wrap:wrap;gap:10px;min-height:0;padding:12px}.masthead{font-size:38px;flex:1;padding:12px 56px 12px 12px}.masthead span{font-size:58px}header .quiet{order:1;font-size:16px}.header-copy{order:2;flex-basis:100%;gap:4px}.header-copy p{font-size:15px;padding:5px 8px}.headline-strip{display:none}#legend{font-size:14px;padding:8px 12px;gap:4px}.legend-item{padding:5px 7px}#viewport{height:65dvh;min-height:400px}.map-navigation{right:12px;bottom:12px;width:180px;padding:8px}#minimap{height:90px}.mini-heading{font-size:12px}.map-controls{gap:3px}.map-controls button{width:29px}#random-place{width:63px;font-size:13px}#fit{width:31px;font-size:13px}#player{left:12px;right:12px;width:auto;bottom:12px;padding:16px}#youtube-player,#youtube-player iframe{min-height:200px;height:200px}footer{padding:12px;font-size:14px}footer span:nth-child(2){display:none}}
/* Light the chosen sound's ancestry and later branches. */
.branch.highlight{opacity:1;stroke-width:6;filter:drop-shadow(0 0 3px #ffffff45)}.branch.dim{opacity:.09}.genre.dim{opacity:1}.genre.dim text{fill:#bcb7ab}.genre.dim .label-bg{fill:#141518f5}.genre.dim .node-dot{opacity:.45}.genre.dim .label-leader{opacity:.25}.genre.dim:hover text,.genre.dim:focus-visible text{fill:#101114;font-weight:700}.genre.dim:focus-visible .label-bg{fill:var(--colour)}.genre.selected .label-bg{stroke:#fff;stroke-width:2}
#connection-evidence{font-size:14px;line-height:1.5;color:#b9b6ad;margin:0 0 12px}#connection-evidence a{color:#e6a65d;text-underline-offset:3px}
#sample-audio{display:block;width:100%;height:54px;margin:18px 0 14px;color-scheme:light}#sample-audio[hidden]{display:none}.listening-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}.listening-links a,#recording-link{font-size:15px;color:#e6a65d;margin:0;text-underline-offset:4px}.listening-links a[hidden]{display:none}
.era-artwork{opacity:.16}.era-artwork.artwork-off{display:none}#artwork-toggle{border:1px solid #b4ac9b;background:transparent;color:#eee8d8;padding:7px 11px;font:700 15px Arial,Helvetica,sans-serif;cursor:pointer;margin-left:auto}#artwork-toggle:hover{background:#343538}#artwork-toggle:focus-visible{outline:2px solid #eee8d8;outline-offset:3px}
/* Search and compact listening dock preserve the printed-map character. */
.search-bar{display:flex;align-items:center;gap:10px;padding:10px 26px;background:#eee8d8;color:#141518;flex-wrap:wrap}.search-bar label{font-weight:900;font-size:17px}.search-bar input{min-width:150px;max-width:330px;flex:1;padding:9px;border:2px solid #141518;border-radius:0;font:17px Arial;background:#fffdf5;color:#141518}.search-bar button,#lineage-toggle{padding:9px 12px;border:1px solid #eee8d8;background:#18191c;color:#eee8d8;font:700 15px Arial;cursor:pointer}.legend-item{border:0;border-radius:0;font:700 16px Arial;cursor:pointer}.legend-item:focus-visible,.connection-jump:focus-visible{outline:2px solid white;outline-offset:3px}.label-leader{stroke-width:1;opacity:.5;pointer-events:none}.branch.draft{stroke-dasharray:2 8;opacity:.3}.branch.influence{stroke-dasharray:9 8}.branch.highlight{opacity:1}#genre-details{margin:12px 0;font-size:15px}#genre-details summary{cursor:pointer;color:#eee8d8;padding:5px 0}.connection-jump{display:inline;border:0;background:#eee8d8;color:#141518;font:14px Arial;padding:5px 7px;margin:4px 6px 4px 0;cursor:pointer}#player-heritage a{display:inline-block;color:#e6a65d;margin-right:10px}#player{max-height:70dvh}#player h2{margin:8px 0}#sample-audio{margin:10px 0;height:44px}.sample-note{margin:6px 0}
@media(max-width:900px){header{min-height:0;flex-wrap:wrap;align-items:center}.header-copy{flex-basis:100%;order:2;flex-direction:row}.header-copy .headline-strip,.header-copy .play-strip{display:none}.masthead{flex:1;max-width:330px}header .quiet{margin-left:auto}.search-bar{padding:10px 16px}#legend{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}.legend-item,#artwork-toggle{flex-shrink:0}#viewport{height:calc(100dvh - 260px);min-height:420px}.has-player .map-navigation{bottom:auto;top:280px;width:160px}.has-player #minimap{height:68px}#player{width:min(480px,calc(100vw - 48px))}}
@media(max-width:600px){.search-bar{padding:8px 12px;gap:6px}.search-bar label{font-size:15px}.search-bar input{font-size:16px}.search-bar button{padding:9px}#player{width:auto;max-height:48dvh;padding:12px 16px}#player h2{font-size:24px}#player-family{font-size:14px}#sample-label{margin:8px 0}.listening-links{gap:6px 12px;margin-top:8px}.has-player .map-navigation{top:290px;right:12px}#genre-details[open]{max-height:150px;overflow:auto}#viewport{min-height:430px}}
#legend{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}.legend-item,#artwork-toggle{flex-shrink:0}
@media(max-width:600px){header{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:8px}.masthead{font-size:30px;letter-spacing:-1.5px;padding-right:40px;max-width:none;min-width:0}.masthead span{font-size:48px;right:8px}header .quiet{font-size:14px;padding:8px;margin:0;order:1}.header-copy{grid-column:1/-1;order:2}.header-copy p{font-size:15px}.has-player .map-navigation{top:265px}#player .sample-note{display:none}#sample-status{margin:7px 0}#sample-audio{height:40px}}

/* Keep the surrounding map quiet without fading its labels into the artwork. */
.branch.dim{opacity:.09}

/* A compact desktop masthead leaves the remaining window height to the map. */
@media(min-width:901px){
 body{height:100dvh;display:flex;flex-direction:column}
 header{flex-shrink:0;min-height:0;padding:12px 20px;gap:20px}
 .masthead{font-size:40px;letter-spacing:-2px;padding:10px 54px 10px 14px}
 .masthead span{font-size:60px;right:10px;bottom:6px}
 .header-copy{gap:4px}
 .header-copy p{font-size:17px;padding:4px 9px}
 header .quiet{font-size:16px;padding:10px 14px}
 main{flex:1;min-height:0;display:flex;flex-direction:column}
 .search-bar{flex-shrink:0;padding:8px 20px}
 #legend{flex-shrink:0;padding:8px 20px}
 #viewport{flex:1;min-height:0;height:auto}
 footer{flex-shrink:0;padding:6px 20px;font-size:14px}
 footer .quiet{padding:4px 0;font-size:14px}
 .map-navigation,#player{bottom:44px}
}