@font-face {
  font-family: Silkscreen; src: url('fonts/silkscreen-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Patagonia at dusk: slate-blue shadows, granite lit orange, glacial
   turquoise, golden steppe and autumn lenga. Hard pixel edges, no blur. */
:root {
  color-scheme: dark;
  --night: #182033; --panel: #26314b; --panel-raised: #2f3b59; --recess: #141b2b;
  --edge-light: #5b6c94; --edge-dark: #0c111d;
  --text: #f3e7d0; --muted: #c0bccd; --dim: #9592ab;
  --orange: #f0a05a; --rust: #c4612d; --gold: #d8b04e; --turquoise: #5cc4bb; --glacier: #a7dbea;
  --snow: #eef3f6; --slate: #5d5f7d; --plum: #3a2f48; --wood: #f1dfb8; --wood-ink: #3a2a22;
  --pixel: Silkscreen, 'Courier New', monospace; --mono: 'Courier New', monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { color: var(--text); background: var(--night); font: 12px/1.5 Tahoma, Verdana, sans-serif;
  background-image: radial-gradient(#ffffff14 1px, transparent 1px); background-size: 23px 19px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button {
  color: var(--text); background: var(--panel-raised); border: 2px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light); border-radius: 0;
  cursor: pointer; padding: 6px 8px; text-align: left;
}
button:hover:not(:disabled) { background: #3a4869; color: #fff6e4; }
button:active:not(:disabled), button[aria-pressed="true"] { border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark); }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
a { color: var(--turquoise); text-underline-offset: 3px; }
a:hover { color: var(--glacier); }
code { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--recess); }
  ::-webkit-scrollbar-thumb { background: var(--slate); border: 2px solid var(--recess); }
}

#app { display: grid; grid-template-columns: 260px minmax(0, 1fr) 340px; grid-template-rows: 84px minmax(0, 1fr);
  gap: 10px; padding: 8px 12px 12px; height: 100vh; height: 100dvh; max-width: 1920px; margin: auto; }

/* Header: a pixel-art Torres del Paine at sunset behind the name. */
.desktop-bar { grid-column: 1 / -1; position: relative; display: flex; align-items: center; padding: 0 14px;
  border: 2px solid var(--edge-dark); overflow: hidden; background: #36609a; }
#banner { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.brand { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 9px 3px;
  background: #182033d9; border: 2px solid #0c111d; }
/* Guano's face, drawn at 32 × 32 and scaled up in whole pixels. */
.guano-face { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.guano-face.large { width: 64px; height: 64px; background: var(--recess); border: 2px solid; border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark); }
.guano-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guano-line p { margin: 0; color: var(--text); }
/* What Guano says while a song plays: a fact about the artist or a genre. */
#guano-fact { margin: 0 0 10px; padding: 7px 9px; background: var(--recess); border: 2px solid var(--edge-dark); color: var(--text); }
#guano-bubble { position: absolute; z-index: 3; pointer-events: none; width: max-content; max-width: min(240px, calc(100% - 16px));
  padding: 6px 8px 5px; transform: translate(-50%, -100%); background: #fff8ea; color: var(--wood-ink);
  border: 2px solid #3a261e; box-shadow: 3px 3px 0 #3a261e55; font: 11px/1.4 Tahoma, Verdana, sans-serif; }
#guano-bubble.below { transform: translate(-50%, 0); }
#guano-bubble::after { content: ''; position: absolute; top: 100%; left: var(--tail, 50%); width: 10px; height: 7px; margin-left: -5px;
  background: #3a261e; clip-path: polygon(0 0, 100% 0, 30% 100%); }
#guano-bubble.below::after { top: auto; bottom: 100%; clip-path: polygon(30% 0, 100% 100%, 0 100%); }
h1 { font: 18px var(--pixel); letter-spacing: -1px; margin: 0; color: var(--text); }
.edition { font: 8px var(--pixel); color: var(--glacier); }

.window { min-width: 0; min-height: 0; padding: 3px; background: var(--panel); border: 2px solid;
  border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light); box-shadow: 4px 4px 0 #0c111d88; }
.window-title { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 7px;
  font: 9px var(--pixel); color: var(--wood-ink); text-transform: uppercase;
  background: linear-gradient(90deg, #f0a678 0 30%, #f2c49a 30% 60%, #f6dcb2 60%); }
.title-stripes { flex: 1; height: 6px; background: repeating-linear-gradient(90deg, #3a2a2255 0 2px, transparent 2px 4px); }
aside.window { display: grid; grid-template-rows: 24px minmax(0, 1fr); }
.panel-content { padding: 12px 11px 16px; overflow-y: auto; min-height: 0; min-width: 0; }
.eyebrow { font: 8px var(--pixel); color: var(--orange); margin: 0 0 8px; }
.sub { color: var(--muted); margin: 0 0 8px; font-size: 11px; }
.library-intro .sub { line-height: 1.65; }
section { margin-top: 15px; min-width: 0; }
h2, h3 { font: 9px var(--pixel); text-transform: uppercase; color: var(--gold);
  padding-bottom: 6px; border-bottom: 2px dotted #5b6c94; margin: 0 0 8px; line-height: 1.6; }
h3 { margin-top: 20px; }
.mini-display { background: var(--recess); border: 2px solid; border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark); padding: 8px 9px; }
#stats div:first-child { color: var(--turquoise); font: 9px/1.6 var(--pixel); }
#stats .sub { font: 10px/1.5 var(--mono); margin: 4px 0 0; color: var(--muted); }
label { display: block; margin-bottom: 5px; color: var(--muted); font: 8px var(--pixel); }
input[type="search"] { width: 100%; min-width: 0; border-radius: 0; background: var(--recess); color: var(--text);
  border: 2px solid; border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark); padding: 8px; font: 12px var(--mono); }
input[type="search"]::placeholder { color: var(--dim); }
#search-count { margin: 8px 0 4px; }
#search-results { list-style: none; padding: 2px; margin: 0; max-height: 260px; overflow: auto; background: var(--recess); border: 2px solid var(--edge-dark); }
#search-results button { width: 100%; border: 0; background: none; color: var(--text); font: 11px/1.5 var(--mono); padding: 6px; overflow-wrap: anywhere; }
#search-results button:hover, #search-results button[aria-pressed="true"] { background: #2f4a5c; color: #fff6e4; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: 10px var(--mono); padding: 4px 7px; }
.chip.on { color: #effffb; background: #2c6b68; border-color: #0c111d #5cc4bb #5cc4bb #0c111d; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.buttons button { font: 10px var(--mono); padding: 8px 6px; text-align: center; }
#btn-banger { background: var(--rust); border-color: #ef9a64 #4e2312 #4e2312 #ef9a64; color: #fff3e2; }
#btn-banger:hover:not(:disabled) { background: #d4733d; }
#trail { margin: 0; padding-left: 20px; color: var(--dim); font: 10px/1.6 var(--mono); }
#trail button { border: 0; background: none; padding: 2px 0; font: inherit; color: var(--muted); text-align: left; }
#trail button:hover { color: var(--text); background: none; }
.notice { border: 2px solid var(--gold); padding: 9px; margin: 10px 0; font-size: 11px; }

/* The map: a frame of weathered wood around the steppe. */
#map-panel { display: grid; grid-template-rows: 24px minmax(0, 1fr); }
.console-shell { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 30px; padding: 8px 8px 0; background: #6b4a35;
  background-image: repeating-linear-gradient(90deg, #ffffff08 0 3px, transparent 3px 11px); }
.screen-bezel { min-height: 0; padding: 3px; background: #3e2a20; border: 2px solid; border-color: #2a1b13 #9a6e4f #9a6e4f #2a1b13; }
#map-wrap { position: relative; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: #cfa548; color: var(--wood-ink); }
#sea { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; image-rendering: pixelated; }
#sea.dragging { cursor: grabbing; }
#map-help, #map-status { position: absolute; left: 10px; font: 8px/1.5 var(--pixel); pointer-events: none;
  padding: 4px 7px; background: var(--wood); color: var(--wood-ink); border: 2px solid #4a3328; max-width: calc(100% - 20px); }
#map-help { top: 8px; }
#map-status { bottom: 8px; max-width: calc(100% - 65px); }
#map-controls { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 4px; }
#map-controls button { color: var(--wood-ink); background: var(--wood); border-color: #fff4dc #4a3328 #4a3328 #fff4dc;
  width: 30px; height: 28px; padding: 0; font: 17px var(--mono); text-align: center; }
#map-controls button:hover { background: #fbecc8; }
#tooltip { position: absolute; z-index: 4; pointer-events: none; padding: 6px 8px; max-width: 250px;
  border: 2px solid #4a3328; background: var(--wood); color: var(--wood-ink); font: 11px var(--mono); }
.console-bottom { display: flex; justify-content: center; align-items: center; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; justify-content: center; color: #f6e2c4; font: 7px var(--pixel); }
.map-legend span, .legend-toggle { display: flex; align-items: center; gap: 6px; }
.legend-toggle { padding: 3px 7px; font: 7px var(--pixel); color: #f6e2c4; background: #4e3426; border-color: #9a6e4f #2a1b13 #2a1b13 #9a6e4f; }
.legend-toggle[aria-pressed="false"] { opacity: .55; }
#btn-topology[aria-pressed="true"] { background: #1f5f72; color: #effffb; border-color: #5cc4bb #0c111d #0c111d #5cc4bb; opacity: 1; }
.legend-track { display: inline-block; width: 7px; height: 7px; background: #2b2236; outline: 1px solid #f6ead2; }
.legend-path { display: inline-block; width: 16px; border-top: 2px dashed #e0b989; }
.legend-cube { display: inline-block; width: 7px; height: 7px; background: #5cc4bb; outline: 1px solid #f0a05a; }
.legend-trail { display: inline-block; width: 16px; border-top: 2px solid #2b2236; box-shadow: 0 1px #f6ead2; }

/* The player: a glacial-lake display above granite transport keys. */
#detail .panel-content { padding: 10px 9px; }
.player-deck { padding: 6px; border: 2px solid; border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light); background: var(--plum); }
.player-display { color: var(--glacier); background: #10303a; padding: 9px 10px; border: 2px solid;
  border-color: #081a20 #5aa5ad #5aa5ad #081a20; background-image: repeating-linear-gradient(0deg, #5cc4bb14 0 1px, transparent 1px 3px); }
.display-top { display: flex; justify-content: space-between; font: 7px var(--pixel); color: #7fc7c0; gap: 8px; }
#deck-state { color: var(--orange); }
#deck-island { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-main { display: flex; align-items: end; justify-content: space-between; margin: 7px 0 12px; height: 33px; gap: 12px; }
#deck-clock { font: 27px/1 var(--pixel); letter-spacing: -2px; color: #bff0e7; }
.spectrum { display: flex; align-items: end; gap: 3px; height: 29px; padding-bottom: 1px; }
.spectrum i { display: block; width: 4px; height: 4px; background: repeating-linear-gradient(to top, var(--turquoise) 0 2px, transparent 2px 4px); opacity: .5; }
.spectrum i:nth-child(3n) { height: 8px; }.spectrum i:nth-child(4n) { height: 12px; background: repeating-linear-gradient(to top, var(--orange) 0 2px, transparent 2px 4px); }
body[data-playback="playing"] .spectrum i { opacity: 1; animation: activity 850ms steps(5,end) infinite alternate; }
body[data-playback="playing"] .spectrum i:nth-child(2n) { animation-delay: -330ms; animation-duration: 650ms; }
body[data-playback="playing"] .spectrum i:nth-child(3n) { animation-delay: -570ms; animation-duration: 1100ms; }
@keyframes activity { from { height: 5px; } to { height: 26px; } }
#d-title { margin: 0 0 4px; padding: 0; border: 0; font: 12px/1.5 var(--pixel); text-transform: none; color: var(--snow); overflow-wrap: anywhere; }
#d-artist { color: #8fd3cb; font: 11px var(--mono); margin: 0; overflow-wrap: anywhere; }
.seek-strip { padding: 9px 1px 2px; }
.seek-caption { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.seek-caption label { margin: 0; font: 7px var(--pixel); color: var(--muted); }
#seek-readout { color: var(--text); font: 10px var(--mono); }
#player-seek { display: block; width: 100%; height: 17px; margin: 4px 0 2px; padding: 0; appearance: none;
  border: 2px solid; border-color: var(--edge-dark) var(--edge-light) var(--edge-light) var(--edge-dark); border-radius: 0; background: var(--recess); cursor: ew-resize; }
#player-seek::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--orange) 0 var(--seek-progress,0%), #2a3550 var(--seek-progress,0%) 100%); }
#player-seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 15px; margin-top: -5px; background: var(--wood); border: 2px solid; border-color: #fff4dc #4a3328 #4a3328 #fff4dc; }
#player-seek::-moz-range-track { height: 6px; background: #2a3550; }
#player-seek::-moz-range-progress { background: var(--orange); height: 6px; }
#player-seek::-moz-range-thumb { border-radius: 0; width: 10px; height: 13px; background: var(--wood); border: 2px solid #4a3328; }
#player-seek:disabled { opacity: .35; cursor: not-allowed; }
.transport { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 4px; margin-top: 8px; }
.transport button { text-align: center; font: 14px/1 var(--mono); padding: 9px 0; background: #8a8aa0; color: #1d1f2e; border-color: #c9c9da #33354a #33354a #c9c9da; }
.transport #transport-play { background: var(--orange); color: #3a1d0c; border-color: #ffd0a4 #6b3412 #6b3412 #ffd0a4; }
.transport button:hover:not(:disabled) { background: #b4b4c8; }
.transport #transport-play:hover:not(:disabled) { background: #f6b57b; }
.volume-row { display: flex; align-items: center; gap: 8px; padding: 9px 1px 1px; }
.volume-row label { margin: 0; font: 7px var(--pixel); color: var(--muted); }
.volume-row input { width: 100px; min-width: 0; height: 4px; appearance: none; border: 1px solid var(--edge-dark); background: var(--turquoise); }
.volume-row input::-webkit-slider-thumb { appearance: none; width: 9px; height: 13px; border: 2px solid; border-color: #fff4dc #4a3328 #4a3328 #fff4dc; background: var(--wood); cursor: ew-resize; }
.volume-row input::-moz-range-thumb { border-radius: 0; width: 8px; height: 12px; background: var(--wood); border: 2px solid #4a3328; }
.volume-row output { color: var(--text); font: 9px var(--mono); width: 22px; }
#d-player { margin: 12px 0 6px; background: var(--recess); }
.video-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 2px solid var(--edge-dark); background: none; }
.poster-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14%;
  background: repeating-linear-gradient(135deg, #22304a 0 6px, #26364f 6px 12px); color: var(--orange); font: 8px var(--pixel); }
.video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-poster::after { content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px;
  font: 18px var(--mono); color: #3a1d0c; background: var(--orange); border: 2px solid; border-color: #ffd0a4 #6b3412 #6b3412 #ffd0a4; }
.video-poster:disabled::after { display: none; }
#d-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--edge-dark); }
#player-status { font: 10px/1.6 var(--mono); color: var(--muted); margin: 6px 0 0; }
#player-status:empty { display: none; }
.watch-link { display: inline-block; margin: 6px 0 10px; font: 8px var(--pixel); }
.meta { padding: 8px 9px; color: var(--muted); background: var(--recess); border: 2px solid var(--edge-dark); font: 10px/1.7 var(--mono); overflow-wrap: anywhere; }
.meta span { display: block; }
.meta span:first-child { color: var(--text); }
#d-neighbours, #d-routes { list-style: none; margin: 0; padding: 0; }
#d-neighbours li, #d-routes li { margin-bottom: 6px; }
#d-next button, #d-neighbours button, #d-routes button { display: block; width: 100%; padding: 8px; overflow-wrap: anywhere; }
#d-next button { background: #2f4a5c; border-color: #6fb4ba #0c1b22 #0c1b22 #6fb4ba; }
#d-next b, #d-neighbours b, #d-routes b { color: var(--text); font: 11px/1.5 var(--mono); }
.why { display: block; color: var(--muted); font: 10px/1.5 var(--mono); margin-top: 3px; }
#d-sources { padding-left: 16px; font: 10px/1.7 var(--mono); }
#d-sources li { margin-bottom: 7px; overflow-wrap: anywhere; }
.mobile-nav, .touch-hint { display: none; }

@media (min-width: 1600px) { #app { grid-template-columns: 290px minmax(0,1fr) 370px; padding: 12px 18px 16px; gap: 12px; } }
@media (max-width: 1150px) and (min-width: 1001px) {
  #app { grid-template-columns: 225px minmax(0,1fr) 290px; padding: 6px; gap: 6px; }
  .panel-content { padding: 10px 8px; }
  .spectrum { gap: 2px; } .spectrum i { width: 3px; }
}
@media (max-width: 1000px) {
  html, body { height: auto; overflow: visible; }
  html { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body { font-size: 14px; }
  #app { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; height: auto; min-height: 100dvh;
    padding: max(7px, env(safe-area-inset-top, 0px)) max(7px, env(safe-area-inset-right, 0px)) calc(80px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .desktop-bar { height: 84px; }
  #map-panel, #sidebar, #detail { scroll-margin-top: 8px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; position: fixed; z-index: 10;
    inset: auto 0 0; padding: 7px max(7px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px));
    background: var(--plum); border-top: 2px solid var(--orange); }
  .mobile-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 3px;
    color: var(--text); background: var(--panel-raised); border: 2px solid; border-color: var(--edge-light) var(--edge-dark) var(--edge-dark) var(--edge-light);
    font: 10px var(--pixel); text-decoration: none; }
  .mobile-nav a:active { background: var(--rust); }
  h1 { font-size: 16px; }
  #map-panel { grid-row: 2; height: 66vh; height: clamp(360px, 66svh, 620px); }
  #detail { grid-row: 3; }
  /* The last section: tall enough that its shortcut can bring it to the top. */
  #sidebar { grid-row: 4; min-height: calc(100vh - 88px); min-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px)); }
  .console-shell { padding: 6px 6px 0; }
  .panel-content { overflow: visible; padding: 12px; }
  #detail .panel-content { padding: 12px; }
  #sidebar .panel-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
  .library-intro, #stats, #file-notice, .search-section, .explore-actions, .trail-section { grid-column: 1/-1; }
  #sidebar section { margin-top: 0; }
  button, .watch-link, #d-sources a { min-height: 44px; }
  button, .mobile-nav a { touch-action: manipulation; }
  h2, h3 { font-size: 10px; }
  label { font-size: 10px; }
  .sub, .library-intro .sub, #player-status { font-size: 12px; }
  input[type="search"] { min-height: 44px; font-size: 16px; }
  .chip, .buttons button { font-size: 12px; overflow-wrap: anywhere; }
  #search-results button { padding: 10px 7px; font-size: 13px; }
  #trail button { padding: 8px 0; font-size: 12px; }
  #map-controls button { width: 44px; height: 44px; font-size: 23px; }
  #map-status { max-width: calc(100% - 74px); }
  .legend-toggle { min-height: 26px; }
  .desktop-hint { display: none; }.touch-hint { display: inline; }
  .transport { gap: 6px; }
  .transport button { min-height: 48px; font-size: 18px; }
  #player-seek { height: 44px; }
  #player-seek::-webkit-slider-thumb { width: 22px; height: 30px; margin-top: -12px; }
  #player-seek::-moz-range-thumb { width: 18px; height: 26px; }
  #seek-readout { font-size: 12px; }
  .volume-row { min-height: 48px; }
  .volume-row input { width: 120px; height: 44px; margin: 0; background: linear-gradient(var(--turquoise), var(--turquoise)) center / 100% 5px no-repeat; border: 0; }
  .volume-row input::-webkit-slider-thumb { width: 18px; height: 26px; }
  .volume-row input::-moz-range-thumb { width: 16px; height: 24px; }
  #d-next b, #d-neighbours b, #d-routes b, .meta, #d-sources { font-size: 12px; }
  .why { font-size: 11px; }
  .watch-link, #d-sources a { display: inline-flex; align-items: center; padding-block: 7px; overflow-wrap: anywhere; }
  .watch-link { font-size: 10px; }
  .display-main { height: 40px; } #deck-clock { font-size: 33px; }
  #d-player, .player-deck { max-width: 570px; margin-inline: auto; }
}
@media (max-width: 520px) {
  #sidebar .panel-content { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .map-legend { gap: 4px 8px; }
  .legend-toggle { padding: 3px 5px; }
}
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
  #map-panel { height: 86vh; height: max(300px, 86svh); }
}
@media (prefers-reduced-motion: reduce) {
  .spectrum i { animation: none !important; }
}