:root {
  --paper: #f6f3eb;
  --ink: #252820;
  --muted: #586057;
  --rule: #d4d0c3;
  --accent: #2b5638;
  --panel: #202821;
  --panel-text: #f4f3e9;
  --panel-muted: #bec5b9;
  --yellow: #f6d18d;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid #316664; outline-offset: 3px; }
[hidden] { display: none !important; }

.shell { width: min(1150px, calc(100% - 64px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 18px 0 14px;
}
h1 { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.07; }
nav { display: flex; flex-wrap: wrap; gap: 8px 23px; font-size: .84rem; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { text-decoration: underline; }
.intro { margin: 17px 0 20px; color: var(--muted); font-size: .94rem; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(215px, 245px); gap: 27px; align-items: start; }
.player {
  min-width: 0;
  background: var(--panel);
  color: var(--panel-text);
  border: 1px solid #2f3c34;
  border-radius: 7px;
  overflow: hidden;
  color-scheme: dark;
}
.player :focus-visible { outline-color: var(--yellow); }
.player-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 17px; }
.eyebrow { color: var(--panel-muted); font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; }
.player h2 { font-size: clamp(1.23rem, 3vw, 1.64rem); font-weight: 650; letter-spacing: -.035em; }
.source-link { flex-shrink: 0; color: var(--yellow); font-size: .78rem; }
.media { position: relative; aspect-ratio: 2; background: #0b100c; overflow: hidden; }
.media:is([data-track="lights"], [data-track="ukraine"], [data-track="india"], [data-track="co2"], [data-track="forest"], [data-track="river"], [data-track="air"]) { aspect-ratio: 16 / 9; }
.media[data-track="sst"] { aspect-ratio: 2; }
.media[data-track="aerosols"] { aspect-ratio: 1264 / 560; }
.media video, .media img, .media canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.media-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: #131a14ed;
  border: 1px solid #647263;
  color: var(--panel-text);
  padding: 2px 6px;
  border-radius: 3px;
  font: 500 .75rem/1.5 ui-monospace, monospace;
}
.region-marker { position: absolute; pointer-events: none; border: 2px solid var(--yellow); background: #f6d18d22; }

.map-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid #414c43; padding: 9px 15px; }
.region-controls { display: flex; gap: 5px; flex-wrap: wrap; }
.region-controls button {
  min-width: 40px;
  min-height: 38px;
  font-size: 1.05rem;
  border: 1px solid #5b685d;
  border-radius: 4px;
  background: transparent;
  color: var(--panel-text);
}
.region-controls button:hover:not(:disabled), .secondary:hover:not(:disabled) { border-color: var(--yellow); }
.transport { padding: 11px 15px 13px; }
.reading { min-height: 1.45em; color: var(--yellow); font-size: .83rem; }
.timeline input { display: block; width: 100%; margin: 4px 0 0; }
input[type="range"] { accent-color: var(--yellow); cursor: pointer; min-height: 24px; }
.time, .transport-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.time, .volume { font: 500 .78rem/1.4 ui-monospace, monospace; color: var(--panel-muted); }
.transport-controls { justify-content: flex-start; margin-top: 10px; flex-wrap: wrap; }
.play, .secondary { border: 1px solid #5b685d; border-radius: 4px; font-size: .86rem; font-weight: 650; min-height: 38px; padding: 6px 11px; }
.play { border-color: var(--yellow); color: #252417; background: var(--yellow); }
.play:hover:not(:disabled) { background: #ffe4b2; }
.secondary { background: transparent; color: var(--panel-text); }
.volume { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.volume input { width: 75px; }
#status { min-height: 1.35em; margin-top: 8px; color: var(--panel-muted); font-size: .78rem; }

.library h2 { font-size: 1.07rem; font-weight: 700; padding: 5px 0 10px; border-bottom: 1px solid var(--rule); }
.tracks { display: grid; }
.track {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 53px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 6px;
}
.track:hover { background: #ede9de; }
.track[aria-pressed="true"] { box-shadow: inset 3px 0 var(--accent); background: #e5eadc; }
.track img { width: 53px; height: 38px; object-fit: cover; border-radius: 2px; }
.track strong, .track small { display: block; }
.track strong { font-size: .85rem; line-height: 1.3; }
.track small { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.listening { padding-top: 17px; }
.listening h3, .method h3 { font-size: .91rem; font-weight: 680; }
.listening p, .method p, .sources p, .sources li { color: var(--muted); font-size: .9rem; margin-top: 5px; }
.method { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 1px solid var(--rule); padding: 21px 0; margin-top: 29px; }
.method h2, .sources h2 { font-size: 1.17rem; }
.method h3:not(:first-child) { margin-top: 12px; }
.sources { border-top: 1px solid var(--rule); padding: 21px 0 40px; }
.sources ul { padding-left: 1.1rem; }
.skip-link { position: absolute; z-index: 3; left: 12px; top: 10px; padding: 8px 12px; background: var(--paper); transform: translateY(-175%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 860px) {
  .shell { width: calc(100% - 36px); }
  .workspace { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(178px, 215px); }
}
@media (max-width: 640px) {
  .workspace, .method { grid-template-columns: 1fr; }
  .workspace { gap: 18px; }
  .header-inner { flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  nav { gap: 4px 13px; }
  .method { gap: 14px; }
}
@media (max-width: 390px) {
  .volume { width: 100%; margin-left: 0; }
  .source-link { font-size: .7rem; }
  .region-controls button { min-width: 36px; }
}

.demo { padding-block: 22px 40px; }
.demo-video { max-width: 960px; margin-bottom: 15px; }
.demo-video video { display: block; width: 100%; background: #202821; }
.demo > p { margin-top: 6px; color: var(--muted); }

.mobile-library { display: none; }
.media[data-track="lightning"] { min-height: 180px; }
.map-grid {
  position: absolute;
  pointer-events: none;
  opacity: .5;
  background-image: linear-gradient(to right, #f6edc541 1px, transparent 1px), linear-gradient(to bottom, #f6edc541 1px, transparent 1px);
  background-size: 12.5% 25%;
}
.region-marker[data-change="more"] { background: #b195eb32; }
.region-marker[data-change="less"] { background: #ff9e623d; }
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 7px 15px;
  border: 0;
  border-bottom: 1px solid #414c43;
  min-width: 0;
  background: #1b231c;
}
.choice-row label { position: relative; cursor: pointer; }
.choice-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-row span { display: block; padding: 5px 11px; line-height: 1.5; border: 1px solid transparent; border-radius: 4px; font-size: .82rem; }
.choice-row input:checked + span { color: var(--yellow); border-color: #9f885f; background: #332e24; }
.choice-row input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 1px; }
.choice-row label:hover span { border-color: var(--yellow); }
.change-readout { display: flex; flex-wrap: wrap; margin: 8px 0 6px; gap: 6px 17px; font-size: .75rem; color: var(--panel-muted); }
.change-readout strong { margin-left: 2px; font-family: ui-monospace, monospace; color: var(--panel-text); font-size: .77rem; }
.listening-stops { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule); }
.stop-buttons { display: grid; margin-top: 6px; }
.stop-button {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  color: var(--ink);
  padding: 7px 3px;
  font-size: .84rem;
}
.stop-button:hover { background: #ede9de; }
.stop-button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 3px;
  background: #e5eadc;
  color: var(--accent);
  font: 650 .75rem/1 ui-monospace, monospace;
}
.pair-button {
  margin-top: 9px;
  border: 1px solid #aab5a5;
  border-radius: 4px;
  padding: 5px 9px;
  background: transparent;
  color: var(--accent);
  font-weight: 650;
  font-size: .81rem;
}
.pair-button:hover { border-color: var(--accent); }
.player-footer { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; }
.link-button { border: 0; padding: 0; background: transparent; color: var(--panel-muted); font-size: .76rem; text-decoration: underline; text-underline-offset: .2em; }
.view-link-fallback { margin-top: 8px; font-size: .75rem; }
.view-link-fallback input { width: 100%; margin-top: 4px; }
.flash-details { margin: 18px 0; padding: 12px; border: 1px solid var(--rule); font-size: .87rem; }
.flash-details summary { cursor: pointer; }
.flash-details table { margin-top: 10px; border-collapse: collapse; width: min(100%, 420px); text-align: left; font-variant-numeric: tabular-nums; }
.flash-details caption { text-align: left; color: var(--muted); padding: 0 0 7px; }
.flash-details td, .flash-details th { padding: 4px 7px; border-bottom: 1px solid var(--rule); }

@media (max-width: 640px) {
  .mobile-library { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: .82rem; }
  .mobile-library select { min-width: 0; max-width: 100%; background: var(--paper); color: var(--ink); border: 1px solid #9fa497; border-radius: 4px; padding: 5px; font: inherit; }
  .library > h2, .library .tracks { display: none; }
  .library .listening { padding-top: 0; }
  .listening-stops { margin-top: 12px; }
  .intro { margin-bottom: 12px; }
  .choice-row span { padding-inline: 9px; }
}

.change-legend {
  position: absolute;
  display: flex;
  top: 8px;
  right: 8px;
  gap: 9px;
  padding: 3px 7px;
  border: 1px solid #647263;
  border-radius: 3px;
  background: #131a14ee;
  color: var(--panel-text);
  font-size: .75rem;
  pointer-events: none;
}
.change-legend i { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: 2px; background: #d1acff; }
.change-legend span + span i { background: #ffc28f; }
.stop-button[data-current] { font-weight: 680; color: var(--accent); }
.stop-button[data-current] span { color: var(--paper); background: var(--accent); }

.demo-stops { margin-top: 22px; max-width: 680px; border-top: 1px solid var(--rule); padding-top: 12px; }
.demo-stops h2 { font-size: 1.13rem; }
.demo-stops ul { padding-left: 1.2rem; margin: 6px 0 0; }
.demo-stops li { padding: 3px 0; }
.demo-stops li span { color: var(--muted); font-size: .82rem; margin-left: 6px; }

.timbre { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--panel-muted); }
.timbre select { background: #2a352c; color: var(--panel-text); border: 1px solid #4a5a4d; border-radius: 4px; padding: 5px 8px; font: inherit; }
.footer-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.legend { margin-top: 8px; color: var(--muted); font-size: .82rem; }
#map-summary-body section + section, #map-summary-body p { margin-top: 12px; }
#map-summary-body h3 { font-size: .9rem; }
#map-summary-body ul { margin: 6px 0 0; padding-left: 20px; }

.shortcuts { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; font-size: .86rem; color: var(--muted); }
kbd { display: inline-block; min-width: 1.6em; padding: 0 .4em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: .8em ui-monospace, monospace; text-align: center; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.music .take { margin: 22px 0; padding: 16px; border: 1px solid var(--rule); border-radius: 7px; }
.music audio { width: 100%; margin: 8px 0; }
.music h2 { font-size: 1.15rem; }
.music section p, .music ul { margin-top: 8px; }
.jukebox { margin: 14px 0 6px; display: grid; gap: 8px; }
.jukebox .pair-button { width: 100%; }
.media:not([data-track="lightning"]) { cursor: crosshair; user-select: none; }
.shortcut-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; }
.shortcut-list kbd + kbd { margin-left: 2px; }
.shortcuts p { margin-top: 8px; }
.audio-notice { margin: 0 0 14px; padding: 10px 14px; border: 1px solid #c9a24a; border-radius: 6px; background: #fbf1d9; }
.lang-button { border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink); padding: 0 8px; font-size: .78rem; font-weight: 600; }
.lang-button:hover { background: #fff; }