:root{
  --bg:#0a0d0b;
  --panel:#171f19;
  --panel2:#1d271f;
  --line:#3f5647;
  --acid:#5cff8f;
  --acid-dim:#3ee579;
  --amber:#ffd166;
  --pink:#ff8ac2;
  --text:#ffffff;
  --text-dim:#d3e6d6;
  --mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:18px;
  line-height:1.6;
}

.scanlines{ display:none; }

/* ---------- header / nav ---------- */
.topnav{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 5vw;
}
.logo{font-weight:700; letter-spacing:2px; color:var(--acid); font-size:1.1rem;}
.blink{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.navlinks a{
  color:var(--text-dim); text-decoration:none; margin-left:26px; font-size:.95rem;
  letter-spacing:1px; text-transform:uppercase;
}
.navlinks a:hover{color:var(--acid);}

.hero{
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(57,255,106,0.10), transparent 60%),
    linear-gradient(180deg, #05070600, #05070600);
  border-bottom:1px solid var(--line);
}
.hero-body{ text-align:center; padding:8vh 5vw 10vh; }
.hero-body h1{
  font-size:clamp(2rem, 6vw, 3.6rem);
  letter-spacing:1px;
  margin:0 0 22px;
}
.glow{ color:var(--acid); }
.subhead{ color:var(--text-dim); max-width:640px; margin:0 auto 34px; font-size:1.05rem;}
.cta{
  display:inline-block; padding:12px 26px; border:1px solid var(--acid);
  color:var(--acid); text-decoration:none; letter-spacing:1px; font-size:.95rem;
  border-radius:2px; transition:.15s;
}
.cta:hover{ background:var(--acid); color:#03150a; }

/* ---------- sections ---------- */
main{ max-width:1080px; margin:0 auto; padding:0 5vw; }
.panel{ padding:72px 0; border-bottom:1px solid var(--line); }
.panel h2{
  font-size:1.5rem; margin:0 0 6px; letter-spacing:.5px;
}
.tag{
  display:inline-block; color:var(--acid-dim); border:1px solid var(--acid-dim);
  font-size:.8rem; padding:2px 6px; border-radius:2px; margin-right:10px; vertical-align:middle;
}
.lead{ color:var(--text-dim); max-width:680px; margin:0 0 34px; font-size:1.02rem; }
.hint{ color:var(--text-dim); font-size:.88rem; margin-top:16px; }

.split{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; }
@media (max-width:800px){ .split{ grid-template-columns:1fr; } }

.timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--acid-dim); }
.timeline li{ padding:0 0 22px 20px; font-size:1rem; color:var(--text-dim); }
.timeline b{ color:var(--acid); }

.quote-block{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:28px; align-self:start; font-style:italic; color:var(--text);
}
.quote-attr{ display:block; margin-top:14px; font-style:normal; color:var(--text-dim); font-size:.9rem; }

.clone-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.clone-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px;
  transition:.15s;
}
.clone-card:hover{ border-color:var(--acid-dim); transform:translateY(-2px); }
.clone-card h3{ margin:0 0 10px; color:var(--acid); font-size:1rem; }
.clone-card p{ margin:0; color:var(--text-dim); font-size:.95rem; }

/* ---------- machine / sequencer ---------- */
.machine{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  box-shadow:0 0 60px rgba(57,255,106,0.04) inset;
}
.machine-top{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:20px;
}
.brand{ font-weight:700; letter-spacing:1px; color:var(--amber); }
.brand-sub{ color:var(--text-dim); font-weight:400; font-size:.88rem; }
.transport{ display:flex; align-items:center; gap:18px; }
.btn-play{
  background:var(--acid); color:#03150a; border:none; font-weight:700;
  padding:9px 18px; border-radius:4px; cursor:pointer; letter-spacing:1px; font-family:var(--mono);
}
.btn-play.playing{ background:var(--pink); }
.tempo{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text-dim); }
.tempo input{ accent-color:var(--acid); }

.knobs{
  display:flex; gap:34px; align-items:flex-end; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.knob-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.knob-wrap label{ font-size:.8rem; color:var(--text-dim); letter-spacing:1px; }
input.knob{
  writing-mode: vertical-lr; direction: rtl;
  width:6px; height:90px; accent-color:var(--acid);
}
.mode-buttons{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.mode-btn{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  font-family:var(--mono); font-size:.85rem; letter-spacing:1px; padding:8px 12px;
  border-radius:4px; cursor:pointer;
}
.mode-btn.active{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 12px rgba(255,61,154,0.35); }
.mode-btn:hover{ border-color:var(--acid-dim); color:var(--acid); }

.steps{
  display:grid; grid-template-columns:repeat(16, 1fr); gap:6px;
}
.step{
  aspect-ratio:1/1.3; border-radius:4px; border:1px solid var(--line);
  background:var(--panel2); cursor:pointer; position:relative;
}
.step:hover{ border-color:var(--acid-dim); }
.step.on{ background:var(--acid-dim); }
.step.on.acc{ background:var(--amber); }
.step.on.slide::after{
  content:""; position:absolute; bottom:3px; left:15%; right:15%; height:2px; background:#03150a;
}
.step.current{ outline:2px solid var(--acid); outline-offset:2px; }
@media (max-width:700px){ .steps{ grid-template-columns:repeat(8,1fr); } }

kbd{
  background:var(--panel2); border:1px solid var(--line); border-radius:3px;
  padding:1px 6px; font-size:.9rem; color:var(--amber);
}

/* ---------- market section ---------- */
.market-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.market-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px;
}
.market-card h3{ margin:0 0 14px; color:var(--acid); font-size:1.05rem; }
.market-price{ font-size:1.6rem; font-weight:700; color:var(--amber); }
.market-price small{ font-size:.85rem; color:var(--text-dim); font-weight:400; display:block; margin-top:2px; }
.market-count{ color:var(--text-dim); font-size:.9rem; margin-top:8px; }
.market-card a{ display:inline-block; margin-top:12px; color:var(--pink); font-size:.9rem; text-decoration:none; }
.market-card a:hover{ text-decoration:underline; }

/* ---------- tour section ---------- */
.tour-controls{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.tour-controls label{ color:var(--text-dim); font-size:.95rem; }
#artistPicker{
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  font-family:var(--mono); padding:8px 10px; border-radius:4px;
}
.tour-status{ color:var(--text-dim); font-size:.9rem; }
.tour-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.event-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px;
}
.event-card .ev-date{ color:var(--amber); font-size:.88rem; letter-spacing:1px; margin-bottom:8px; }
.event-card .ev-artist{ color:var(--acid); font-weight:700; margin-bottom:4px; }
.event-card .ev-venue{ color:var(--text); font-size:.95rem; }
.event-card .ev-loc{ color:var(--text-dim); font-size:.9rem; margin-bottom:10px; }
.event-card a{ color:var(--pink); font-size:.9rem; text-decoration:none; }
.event-card a:hover{ text-decoration:underline; }
.empty-note, .error-note{ color:var(--text-dim); font-size:.95rem; grid-column:1/-1; }
.error-note{ color:var(--pink); }

footer{ text-align:center; padding:40px 5vw; color:var(--text-dim); font-size:.9rem; }
.further-reading{ margin-bottom:10px; }
.further-reading a{ color:var(--pink); text-decoration:none; }
.further-reading a:hover{ text-decoration:underline; }