/* ─── reset + tokens ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  --bg: #0a0b13;
  --bg-2: #0e1019;
  --panel: rgba(18,20,30,.78);
  --panel-solid: #161826;
  --ink: #ecedf3;
  --ink-dim: #a4abb8;
  --ink-mute: #6b7280;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --accent: #ffd166;
  --accent-2: #d088c0;
  --accent-3: #6dd5ed;
  --accent-soft: rgba(255,209,102,.14);

  --c-Bach:      #d4a256;
  --c-Beethoven: #b73e3e;
  --c-Chopin:    #d088c0;
  --c-Mozart:    #5b8def;
  --c-Dvořák:    #4a9d4a;
  --c-Vivaldi:   #e07a2f;
  --c-Unknown:   #8892a6;

  --c-era-baroque:   #d4a256;
  --c-era-classical: #5b8def;
  --c-era-romantic:  #d088c0;

  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(255,209,102,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(208,136,192,.06), transparent 60%),
    radial-gradient(800px 600px at 110% 90%, rgba(109,213,237,.05), transparent 60%),
    var(--bg);
  min-height:100vh;
}

a{color:var(--ink); text-decoration:none}
a:hover{color:var(--accent)}
button{font-family:inherit; cursor:pointer}

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.hero{
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem);
  max-width: 1400px;
  margin: 0 auto;
}
.hero h1{
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-weight: 500;
  letter-spacing: -.025em;
  font-size: clamp(2.4rem, 5.5vw, 5.4rem);
  line-height: 1.02;
  margin: 0 0 1.25rem;
}
.hero h1 .brand{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .dot{ color: var(--ink-mute); margin: 0 .25em }
.hero h1 .sub em{ color: var(--accent); font-style: italic; font-weight: 600 }
.hero .kicker{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0 0 2rem;
}
.hero .kicker em{ color: var(--ink); font-style: normal }
.hero-actions{ display:flex; align-items:center; gap:1.5rem }
.cta{
  display:inline-block; padding:.85rem 1.4rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #181818; font-weight: 700; font-size: .95rem; letter-spacing:.01em;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 26px rgba(255,209,102,.22);
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(255,209,102,.30); color:#181818 }
.cta-small{
  display:inline-block; padding:.55rem .9rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent); font-weight: 600; font-size:.85rem;
}
.cta-small:hover{ background: var(--accent); color:#181818 }
.link{ color: var(--ink-dim); border-bottom: 1px dashed var(--line-2); padding-bottom: 2px }
.link:hover{ color: var(--accent); border-bottom-color: var(--accent) }

.composer-strip{
  margin-top: clamp(3rem, 5vw, 5rem);
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: "Fraunces", "Charter", "Georgia", serif;
}
.cs-cell{
  padding: .5rem 1.1rem; border-radius: 999px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  font-size: 1rem; letter-spacing: .005em;
  position: relative;
}
.cs-cell::before{
  content: ''; display:inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 12px currentColor;
}
.cs-cell[data-c="Bach"]{ color: var(--c-Bach) }
.cs-cell[data-c="Beethoven"]{ color: var(--c-Beethoven) }
.cs-cell[data-c="Chopin"]{ color: var(--c-Chopin) }
.cs-cell[data-c="Dvořák"]{ color: var(--c-Dvořák) }
.cs-cell[data-c="Mozart"]{ color: var(--c-Mozart) }
.cs-cell[data-c="Vivaldi"]{ color: var(--c-Vivaldi) }
.cs-cell[data-c]::before{ background: currentColor }
.cs-cell{ color: var(--ink) }
.cs-cell[data-c]{ color: var(--ink) }
.cs-cell[data-c]::before{
  background: var(--swatch, var(--ink-mute));
  color: var(--swatch, var(--ink-mute));
}
.cs-cell[data-c="Bach"]::before     { background: var(--c-Bach); color: var(--c-Bach) }
.cs-cell[data-c="Beethoven"]::before{ background: var(--c-Beethoven); color: var(--c-Beethoven) }
.cs-cell[data-c="Chopin"]::before   { background: var(--c-Chopin); color: var(--c-Chopin) }
.cs-cell[data-c="Dvořák"]::before   { background: var(--c-Dvořák); color: var(--c-Dvořák) }
.cs-cell[data-c="Mozart"]::before   { background: var(--c-Mozart); color: var(--c-Mozart) }
.cs-cell[data-c="Vivaldi"]::before  { background: var(--c-Vivaldi); color: var(--c-Vivaldi) }

/* ─── STAGE ─────────────────────────────────────────────────────────────── */
.stage{
  padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(3rem, 5vw, 5rem);
  max-width: 1500px;
  margin: 0 auto;
}
#canvas-wrap{
  position: relative;
  height: min(82vh, 900px);
  min-height: 600px;
  border-radius: 22px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 80% 10%, rgba(255,209,102,.08), transparent 65%),
    radial-gradient(700px 500px at 10% 90%, rgba(208,136,192,.08), transparent 65%),
    #06070d;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#scene{ display:block; width:100%; height:100% }

/* Toolbar */
.toolbar{
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display:flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 8px 10px;
  background: var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  z-index: 5;
  max-width: calc(100% - 36px);
}
.seg{ display:flex; align-items:center; gap:4px; padding:2px }
.seg-label{
  color: var(--ink-mute); font-size:.74rem; letter-spacing:.06em;
  text-transform: uppercase; padding: 0 8px 0 6px;
}
.seg-btn{
  background: transparent; color: var(--ink-dim);
  border: 1px solid transparent;
  padding: .42rem .85rem; border-radius: 999px;
  font-size: .82rem; font-weight: 500; letter-spacing:.01em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.seg-btn:hover{ color: var(--ink); background: rgba(255,255,255,.04) }
.seg-btn.active{
  background: rgba(255,255,255,.08); color: var(--ink);
  border-color: var(--line-2);
}
button.ghost{
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line-2);
  padding: .42rem .85rem; border-radius: 999px;
  font-size: .82rem;
  display: inline-flex; align-items: center; gap: 6px;
}
button.ghost:hover{ color: var(--ink); border-color: var(--ink-dim) }
button.ghost.on{ color: var(--ink); border-color: var(--accent); background: var(--accent-soft) }
#fullscreen{ padding: .42rem .55rem }
#fullscreen svg{ display: block }
button.ghost-small{
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: .35rem .7rem; border-radius: 8px;
  font-size: .78rem;
}

#canvas-wrap:fullscreen,
#canvas-wrap:-webkit-full-screen{
  width: 100vw; height: 100vh; max-height: none;
  border-radius: 0; border: none;
}

/* Side filter panel */
.panel{
  position: absolute; top: 18px; left: 18px;
  width: 280px; max-height: calc(100% - 36px);
  background: var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  display: flex; flex-direction: column;
  z-index: 4;
  overflow: hidden;
}
.panel header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.panel-title{
  text-transform: uppercase; letter-spacing:.12em;
  font-size:.74rem; color: var(--ink-mute); font-weight:600;
}
.counter{
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--accent);
  font-size: .9rem;
}
.search-wrap{ padding: 10px 14px 4px }
#search{
  width:100%; padding:.55rem .8rem;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink); font: inherit; font-size:.88rem;
}
#search:focus{ outline:none; border-color: var(--accent) }

.panel .filter-group{
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.filter-group:first-of-type{ border-top: none }
.filter-group summary{
  cursor:pointer; padding: 6px 0;
  font-size:.82rem; font-weight:600; color: var(--ink);
  display:flex; justify-content:space-between; align-items:center;
  list-style:none;
}
.filter-group summary::-webkit-details-marker{ display:none }
.filter-group summary::after{
  content:'▾'; color: var(--ink-mute); transition: transform .2s ease;
  margin-left: 8px;
}
.filter-group[open] summary::after{ transform: rotate(180deg) }
.filter-group .count{
  color: var(--ink-mute); font-weight: 400;
  font-size:.75rem; font-variant-numeric: tabular-nums;
}
.panel{ overflow-y: auto }
.chips{
  display:flex; flex-wrap:wrap; gap: 6px;
  padding: 6px 0 10px;
  max-height: 220px; overflow-y: auto;
}
.chips::-webkit-scrollbar{ width:6px }
.chips::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); border-radius:3px }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: .25rem .55rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: .74rem;
  user-select: none; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover{ color: var(--ink); border-color: var(--line-2) }
.chip.on{
  background: rgba(255,209,102,.13);
  border-color: var(--accent);
  color: var(--ink);
}
.chip .dot-color{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
.panel-footer{
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  display:flex; justify-content:flex-end;
}

/* Legend */
.legend{
  position: absolute; right: 18px; bottom: 18px;
  background: var(--panel);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid; grid-template-columns: auto auto; gap: 4px 12px;
  font-size: .76rem; z-index: 4;
  max-width: 280px;
}
.legend .row{ display:flex; align-items:center; gap:6px; color: var(--ink-dim) }
.legend .swatch{ width:9px; height:9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35) }

/* Tooltip */
.tooltip{
  position: absolute; pointer-events:none;
  background: rgba(20,22,30,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 8px 10px;
  display:flex; gap: 10px; align-items: center;
  z-index: 10;
  max-width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.tooltip[hidden]{ display: none !important }
.detail[hidden]{ display: none !important }
.tip-swatch{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-mute);
  box-shadow: 0 0 16px currentColor;
  flex-shrink: 0;
}
.tip-name{ font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.15; margin-bottom: 3px }
.tip-meta{ font-size: .76rem; color: var(--ink-dim); line-height:1.35 }

/* Detail / selection panel */
.detail{
  position: absolute; top: 18px; right: 18px;
  width: 340px; max-height: calc(100% - 36px);
  background: var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 20px;
  z-index: 4;
  overflow-y: auto;
}
.detail .close{
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-dim); font-size: 1.1rem; line-height: 1;
}
.detail .close:hover{ color: var(--ink); border-color: var(--ink-dim) }
.detail-composer{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.badge{
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-mute);
  color: #fff;
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 0 24px var(--shadow-color, rgba(255,255,255,.15));
}
.composer-name{
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-size: 1rem; color: var(--ink); font-weight: 500;
}
.detail h3{
  margin: 0 0 12px;
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-weight: 500; font-size: 1.35rem; letter-spacing: -.01em;
  line-height: 1.2;
}
.kvs{
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px;
  font-size: .82rem; margin-bottom: 14px;
}
.kvs .k{ color: var(--ink-mute); text-transform: uppercase; font-size:.7rem; letter-spacing:.08em }
.kvs .v{ color: var(--ink) }
.kvs .tag{
  display: inline-block;
  padding: .15rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  font-size: .72rem; color: var(--ink-dim);
  margin-right: 4px; margin-bottom: 2px;
}

/* Custom audio player */
.player{
  margin: 10px 0 14px;
  padding: 12px;
  background: rgba(0,0,0,.32);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; gap: 12px; align-items: center;
}
.play-btn{
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent); color: #181818;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(255,209,102,.4);
  transition: transform .12s ease, box-shadow .15s ease;
}
.play-btn:hover{ transform: scale(1.04); box-shadow: 0 0 32px rgba(255,209,102,.55) }
.play-btn[data-state="loading"]{ background: var(--ink-mute); animation: pulse 1.2s infinite }
@keyframes pulse{ 0%,100%{ opacity:.7 } 50%{ opacity: 1 } }
.player-right{ flex: 1; min-width: 0 }
.player-bar{
  position: relative;
  width: 100%; height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
.player-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 0.08s linear;
}
.player-handle{
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink); border: 2px solid var(--accent);
  pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.player:hover .player-handle{ opacity: 1 }
.player-times{
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  font-size: .72rem; color: var(--ink-mute);
}
.detail-actions{ display: flex; gap: 10px; margin-top: 6px }

/* Boot */
.boot{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #06070d; z-index: 20;
  transition: opacity .35s ease;
}
.boot.gone{ opacity: 0; pointer-events: none }
.boot-ring{
  width: 50px; height: 50px;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }
.boot-text{ margin-top: 14px; color: var(--ink-dim); font-size: .85rem; letter-spacing:.04em }

/* ─── TOUR cards ────────────────────────────────────────────────────────── */
.tour{
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem);
  max-width: 1400px; margin: 0 auto;
}
.tour h2{
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin: 0 0 2.5rem;
}
.tour-grid{
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tour-card{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.tour-card:hover{
  transform: translateY(-2px);
  border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.tour-card .ord{
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem; color: var(--accent); letter-spacing: .08em;
}
.tour-card h3{
  margin: 0;
  font-family: "Fraunces", "Charter", "Georgia", serif;
  font-weight: 500; letter-spacing: -.01em;
  font-size: 1.2rem; line-height: 1.2;
}
.tour-card p{
  margin: 0; color: var(--ink-dim);
  font-size: .9rem; line-height: 1.55;
  flex: 1;
}
.tour-card p em{ color: var(--ink); font-style: normal }
.tour-btn{
  align-self: flex-start;
  margin-top: .35rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .4rem .85rem;
  color: var(--ink);
  font-size: .82rem;
  transition: background .15s ease, border-color .15s ease;
}
.tour-card:hover .tour-btn{
  background: var(--accent);
  border-color: var(--accent);
  color: #181818;
  font-weight: 600;
}

/* Footer */
.page-foot{
  padding: 2.5rem clamp(1.25rem, 5vw, 5rem) 3.5rem;
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: .8rem; letter-spacing: .02em;
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}
.page-foot a{ color: var(--ink-dim); border-bottom: 1px dashed var(--line-2); padding-bottom: 1px }
.page-foot a:hover{ color: var(--accent); border-bottom-color: var(--accent) }

/* Responsive */
@media (max-width: 900px){
  .toolbar{ position: relative; top: auto; left: auto; transform: none; margin: 0 12px 12px; max-width: none }
  #canvas-wrap{ height: 75vh }
  .panel{ width: 240px }
  .detail{ width: 300px }
}
@media (max-width: 720px){
  .panel{
    position: relative; top: auto; left: auto;
    width: calc(100% - 24px); margin: 12px;
    max-height: 320px;
  }
  .detail{
    position: fixed; top: auto; right: 12px; left: 12px; bottom: 12px;
    width: auto; max-height: 60vh;
  }
  .legend{ right: 12px; bottom: 12px; padding: 8px 10px }
  #canvas-wrap{ height: 70vh; min-height: 480px }
}