/* Foundation: reset, base tokens, and structural fallbacks only.
   Product-specific geometry belongs in content-layout/player/navigation. */
:root {
  --ink:#121827;
  --muted:#677083;
  --paper:#f7f3ed;
  --white:#fffdf9;
  --orange:#e85d30;
  --yellow:#f5be45;
  --blue:#2f63e8;
  --line:#ded8cf;
  --shadow:0 16px 38px rgba(27,31,42,.11);
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC", system-ui, sans-serif;
}
button, select, input {
  font:inherit;
}
button {
  cursor:pointer;
}
.app-shell {
  max-width:1120px;
  margin:auto;
  padding:22px 34px 30px;
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:30px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.session-status {
  font-size:13px;
  color:var(--muted);
}
.session-status span {
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:6px;
  border-radius:50%;
  background:#51a05a;
}
.hero {
  display:flex;
  gap:44px;
  justify-content:space-between;
  align-items:end;
  padding:24px 0 44px;
}
.eyebrow {
  font:500 11px "DM Mono",monospace;
  color:var(--orange);
  letter-spacing:.12em;
  margin:0 0 9px;
}
.hero h1 {
  font:800 clamp(39px,5vw,64px)/1.02 "Playfair Display",serif;
  letter-spacing:-.045em;
  margin:0;
}
.hero h1 em {
  color:var(--orange);
}
.lede {
  max-width:540px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
  margin:18px 0 0;
}
.now-playing {
  min-width:215px;
  background:var(--ink);
  color:white;
  padding:18px 21px;
  border-radius:4px 23px 4px 4px;
  box-shadow:var(--shadow);
}
.now-playing span,.now-playing small {
  color:#b7c0d2;
  font-size:11px;
}
.now-playing span {
  display:block;
  font-family:"DM Mono",monospace;
}
.now-playing strong {
  display:block;
  font-size:17px;
  margin:10px 0 3px;
}
.control-grid {
  display:grid;
  grid-template-columns:150px 1fr 270px;
  align-items:end;
  gap:27px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.control-grid label,.control-grid legend {
  display:block;
  color:var(--muted);
  font-size:12px;
}
.control-grid select {
  margin-top:7px;
  width:100%;
  appearance:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:9px 12px;
  color:var(--ink);
}
.control-grid output {
  color:var(--ink);
  float:right;
  font-family:"DM Mono",monospace;
}
input[type=range] {
  width:100%;
  accent-color:var(--orange);
  margin-top:11px;
}
fieldset {
  border:0;
  padding:0;
  margin:0;
}
.segmented {
  display:flex;
  margin-top:7px;
  background:#e9e4dc;
  border-radius:5px;
  padding:3px;
}
.segmented button {
  flex:1;
  border:0;
  background:transparent;
  border-radius:3px;
  color:var(--muted);
  padding:7px 5px;
  font-size:12px;
}
.segmented button.active {
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 3px #ccc;
}
.feel-readout {
  min-height:55px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:rgba(255,255,255,.7);
}
.feel-readout span,.feel-readout small {
  display:block;
  color:var(--muted);
  font-size:10px;
}
.feel-readout strong {
  display:block;
  margin:2px 0;
  color:var(--ink);
  font-size:14px;
}
.journey {
  padding:47px 0 8px;
}
.journey-layout {
  display:grid;
  grid-template-columns:1.55fr .8fr;
  gap:13px;
}
.atlas {
  position:relative;
  min-height:365px;
  overflow:hidden;
  border-radius:6px;
  background:#1a2130;
  color:#fff;
  box-shadow:var(--shadow);
}
.atlas::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:linear-gradient(#6a7281 1px,transparent 1px),linear-gradient(90deg,#6a7281 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,black,transparent 125%);
}
.atlas-legend {
  position:absolute;
  inset:18px 20px auto;
  display:flex;
  justify-content:space-between;
  color:#9ea8bb;
  font:10px "DM Mono",monospace;
  letter-spacing:.07em;
}
.atlas-route {
  position:absolute;
  height:45%;
  width:79%;
  top:42%;
  left:8%;
  border-top:2px dashed rgba(245,190,69,.65);
  transform:rotate(-9deg);
  border-radius:50%;
}
.map-node {
  position:absolute;
  z-index:1;
  width:max-content;
  max-width:155px;
  text-align:left;
  border:0;
  background:transparent;
  color:white;
  padding:0 4px 3px 16px;
}
.map-node:hover strong {
  color:var(--yellow);
}
.map-node.active {
  background:rgba(255,255,255,.1);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.map-node-pin {
  position:absolute;
  left:0;
  top:5px;
  width:10px;
  height:10px;
  border:2px solid var(--node-color);
  border-radius:50%;
  background:#1a2130;
  box-shadow:0 0 0 3px rgba(255,255,255,.1);
}
.map-node.active .map-node-pin {
  background:var(--node-color);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--node-color),transparent 68%);
}
.map-node-era,.map-node small {
  display:block;
  color:#aeb7c8;
  font:9px "DM Mono",monospace;
}
.map-node strong {
  display:block;
  margin:3px 0 1px;
  font:700 15px "Playfair Display",serif;
  letter-spacing:-.02em;
}
.map-node[data-style="slow"] {
  left:5%;
  top:21%;
}
.map-node[data-style="delta"] {
  left:22%;
  top:60%;
}
.map-node[data-style="chicago"] {
  left:42%;
  top:29%;
}
.map-node[data-style="texas"] {
  left:63%;
  top:59%;
}
.map-node[data-style="jump"] {
  left:74%;
  top:19%;
}
.map-node[data-style="bluegrass"] {
  left:55%;
  top:78%;
}
.style-panel {
  min-height:365px;
  padding:23px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--white);
}
.style-family {
  margin:0;
  color:var(--orange);
  font:10px "DM Mono",monospace;
  letter-spacing:.1em;
}
.style-panel h3 {
  margin:8px 0 3px;
  font:700 27px/1 "Playfair Display",serif;
  letter-spacing:-.035em;
}
.style-region {
  margin:0;
  color:var(--muted);
  font:11px "DM Mono",monospace;
}
.style-rule {
  width:42px;
  height:4px;
  margin:19px 0 15px;
  border-radius:2px;
  background:var(--style-color);
}
.style-accent {
  margin:0;
  font-weight:600;
  font-size:14px;
}
.style-note {
  margin:10px 0 17px;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}
.style-panel dl {
  margin:0;
  border-top:1px solid var(--line);
}
.style-panel dl div {
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.style-panel dt {
  color:var(--muted);
  font:10px "DM Mono",monospace;
}
.style-panel dd {
  margin:4px 0 0;
  font-size:11px;
  line-height:1.45;
}
.variant-count {
  display:inline-block;
  margin-top:15px;
  padding:5px 9px;
  border-radius:12px;
  background:#f4efe7;
  color:#4d4f55;
  font:10px "DM Mono",monospace;
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.section-heading h2,.arrangement h2 {
  font:700 29px/1.1 "Playfair Display",serif;
  margin:0;
  letter-spacing:-.025em;
}
.section-heading > p {
  color:var(--muted);
  font-size:13px;
  margin:0 0 3px;
}
.arrangement {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:25px;
  box-shadow:var(--shadow);
}
.arrangement-title {
  display:flex;
  align-items:end;
  justify-content:space-between;
}
.arrangement-title > span {
  font:12px "DM Mono",monospace;
  color:var(--muted);
}
.timeline-wrap {
  overflow-x:auto;
  margin:25px 0 10px;
  padding-bottom:5px;
}
.timeline {
  display:flex;
  min-width:max-content;
  gap:5px;
}
.bar {
  position:relative;
  width:78px;
  height:82px;
  flex:0 0 78px;
  padding:10px;
  appearance:none;
  color:inherit;
  text-align:left;
  background:#f4f1eb;
  border:0;
  border-top:3px solid #c7c1b7;
  border-radius:3px;
  transition:.1s;
}
.bar:hover,.bar.selected {
  background:#fff8e8;
  border-top-color:#e4a83e;
}
.bar.selected {
  box-shadow:inset 0 0 0 1px rgba(232,93,48,.25);
}
.bar.current {
  background:#fff3d1;
  border-top-color:var(--orange);
  transform:translateY(-3px);
}
.bar-number {
  display:block;
  font:10px "DM Mono",monospace;
  color:var(--muted);
}
.bar-chord {
  display:block;
  margin-top:12px;
  font:700 20px "Playfair Display",serif;
}
.bar-function {
  color:var(--muted);
  font-size:10px;
}
.timeline-help {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:10px;
}
.timeline-help span {
  color:var(--orange);
  font-family:"DM Mono",monospace;
  letter-spacing:.08em;
}
.mixer-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
}
.mixer-heading span {
  color:var(--ink);
  font:600 11px "DM Mono",monospace;
  letter-spacing:.07em;
}
.mixer {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:9px;
}
.mixer-channel {
  min-width:0;
  padding:11px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#f8f5ef;
  transition:.15s;
}
.mixer-channel header {
  display:flex;
  align-items:center;
}
.mixer-channel header strong {
  font-size:12px;
}
.mixer-channel output {
  margin-left:auto;
  color:var(--muted);
  font:9px "DM Mono",monospace;
}
.mixer-channel input[type=range] {
  margin:9px 0 5px;
}
.mixer-actions {
  display:flex;
  gap:5px;
}
.mixer-actions button {
  flex:1;
  padding:4px;
  border:1px solid #cdc6bc;
  border-radius:3px;
  background:#fff;
  color:#777f8d;
  font:700 9px "DM Mono",monospace;
}
.mixer-actions button[data-mute].active {
  border-color:#a13d2c;
  background:#bd4d38;
  color:#fff;
}
.mixer-actions button[data-solo].active {
  border-color:#bd8a20;
  background:var(--yellow);
  color:var(--ink);
}
.mixer-channel .dot {
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:50%;
  background:var(--blue);
}
.mixer-channel.muted {
  opacity:.48;
}
.mixer-channel.soloed {
  opacity:1;
  border-color:#d4a239;
  box-shadow:0 0 0 1px rgba(245,190,69,.28);
}
footer {
  max-width:1120px;
  margin:0 auto;
  padding:15px 34px 28px;
  color:#8b9099;
  font:10px "DM Mono",monospace;
}
@media (max-width:700px) {
  .app-shell {
    padding:18px 17px 20px;
  }
  .hero {
    display:block;
    padding:15px 0 35px;
  }
  .now-playing {
    margin-top:25px;
    width:max-content;
  }
  .control-grid {
    grid-template-columns:1fr;
    gap:18px;
  }
  .journey-layout {
    grid-template-columns:1fr;
  }
  .atlas {
    min-height:410px;
  }
  .style-panel {
    min-height:auto;
  }
  .map-node[data-style="slow"] {
    left:4%;
  }
  .map-node[data-style="delta"] {
    left:14%;
  }
  .map-node[data-style="chicago"] {
    left:42%;
  }
  .map-node[data-style="texas"] {
    left:57%;
  }
  .map-node[data-style="jump"] {
    left:70%;
  }
  .map-node[data-style="bluegrass"] {
    left:47%;
  }
  .section-heading {
    display:block;
  }
  .section-heading > p {
    margin-top:10px;
  }
  .arrangement {
    padding:18px;
  }
  footer {
    padding-left:17px;
  }
}
@media (max-width:430px) {
  .topbar {
    padding-bottom:18px;
  }
  .session-status {
    font-size:11px;
  }
}