@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700&family=Space+Grotesk:wght@400;500;700&display=swap");

/* ——— Second Hand Orchestra · glassmorphism ———
   Palette (3 colors + black/white, hard constraint):
   violet #8B5CF6 · cyan #22D3EE · amber #FBBF24 · black #06070C · white */
:root {
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --ink: #06070c;
  --paper: #ffffff;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.16);
  --txt-dim: rgba(255, 255, 255, 0.66);
  --r: 20px;
  --font-d: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --font-b: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-b);
  color: var(--paper);
  background:
    radial-gradient(1200px 700px at 15% -5%, rgba(139, 92, 246, 0.28), transparent 60%),
    radial-gradient(1000px 600px at 90% 20%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(900px 900px at 50% 110%, rgba(251, 191, 36, 0.1), transparent 60%),
    var(--ink);
  min-height: 100vh;
}

/* floating orbs behind the glass */
.bg-orbs { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: drift 14s ease-in-out infinite alternate; }
.o1 { width: 340px; height: 340px; left: -90px; top: -70px; background: var(--violet); }
.o2 { width: 300px; height: 300px; right: -80px; top: 22%; background: var(--cyan); opacity: 0.32; animation-delay: -5s; }
.o3 { width: 260px; height: 260px; left: 30%; bottom: -120px; background: var(--amber); opacity: 0.22; animation-delay: -9s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 30px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

#app { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; padding: 28px 16px 60px; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ——— hero ——— */
.hero { padding: 28px 26px 22px; overflow: hidden; position: relative; }
.hero::after {
  content: ""; position: absolute; inset: auto -20% -55% -20%; height: 60%;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--amber));
  opacity: 0.16; filter: blur(40px); pointer-events: none;
}
.kicker { margin: 0 0 8px; letter-spacing: 0.28em; text-transform: uppercase; font-size: 11px; color: var(--cyan); }
h1 { font-family: var(--font-d); font-size: clamp(30px, 6vw, 52px); line-height: 1.02; margin: 0 0 8px; }
h1 em { font-style: normal; background: linear-gradient(92deg, var(--violet), var(--cyan) 60%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 0 0 20px; color: var(--txt-dim); font-size: clamp(14px, 2.6vw, 17px); }

.transport { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
@media (min-width: 720px) { .transport { grid-template-columns: auto 1fr auto; } }

.btn {
  font-family: var(--font-b); font-weight: 700; font-size: 15px; color: var(--ink);
  background: linear-gradient(120deg, var(--cyan), #fff 130%);
  border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(34, 211, 238, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn.power { background: linear-gradient(120deg, var(--violet), var(--cyan) 140%); color: #fff; box-shadow: 0 6px 24px rgba(139, 92, 246, 0.45); justify-self: start; }
.btn.power.playing { background: linear-gradient(120deg, var(--amber), #fff 160%); color: var(--ink); box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4); }
.btn.tap { background: rgba(255, 255, 255, 0.1); color: var(--paper); border: 1px solid var(--glass-line); box-shadow: none; }
.btn.tap.pulse { animation: tappulse 0.28s ease; }
@keyframes tappulse { 0% { transform: scale(1); } 40% { transform: scale(1.1); border-color: var(--amber); } 100% { transform: scale(1); } }
.btn.ghost { background: transparent; color: var(--paper); border: 1px solid var(--glass-line); box-shadow: none; font-size: 13px; padding: 9px 16px; }
.btn.accent { background: linear-gradient(120deg, var(--amber), #fff 170%); box-shadow: 0 6px 24px rgba(251, 191, 36, 0.35); }
.hidden { display: none !important; }

.tempo-cluster { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bpm-read { display: flex; align-items: baseline; gap: 6px; min-width: 86px; }
.bpm-read strong { font-family: var(--font-d); font-size: 34px; color: var(--amber); font-variant-numeric: tabular-nums; }
.bpm-read span { color: var(--txt-dim); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.bpm-slider { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-dim); flex: 1; min-width: 130px; }
input[type="range"] { width: 100%; accent-color: var(--cyan); cursor: pointer; }

.secondhand { position: relative; width: 150px; height: 150px; justify-self: center; }
#ring { width: 150px; height: 150px; display: block; }
.sec-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.sec-read strong { font-family: var(--font-d); font-size: 30px; font-variant-numeric: tabular-nums; }
.sec-read span { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--txt-dim); }

.hint { margin: 14px 0 0; font-size: 13px; color: var(--txt-dim); }

/* ——— panels ——— */
.panel { margin-top: 16px; padding: 22px; }
.panel-head h2 { font-family: var(--font-d); font-size: clamp(16px, 3.4vw, 21px); margin: 0 0 4px; }
.panel-head p { margin: 0 0 16px; color: var(--txt-dim); font-size: 14px; }
.panel-head.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* ensemble */
.ensemble { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .ensemble { grid-template-columns: 1fr; } }
.voice {
  font-family: var(--font-b); color: var(--txt-dim); background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-line); border-radius: 14px; padding: 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  transition: all 0.18s ease;
}
.voice b { font-size: 16px; color: var(--paper); }
.voice small { font-size: 12px; }
.voice.is-on { border-color: var(--cyan); background: rgba(34, 211, 238, 0.1); box-shadow: 0 0 18px rgba(34, 211, 238, 0.25), inset 0 1px 0 rgba(255,255,255,0.12); }
.voice.is-on b { color: var(--cyan); }
.voice.flash { animation: vflash 0.22s ease; }
@keyframes vflash { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* mixer */
.mixer { display: grid; gap: 10px; }
.chan {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
  background: rgba(255,255,255,0.045); border: 1px solid var(--glass-line);
  border-radius: 14px; padding: 12px 14px; transition: border-color 0.2s ease, opacity 0.2s ease;
}
.chan.lit { border-color: var(--violet); box-shadow: 0 0 16px rgba(139, 92, 246, 0.3); }
.chan.muted { opacity: 0.45; }
.chan-top { display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: none; transition: all 0.15s ease; }
.chan[data-layer="bass"] .dot { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.chan[data-layer="shimmer"] .dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.chan.hit .dot { transform: scale(1.7); }
.chan-name { font-weight: 700; font-size: 15px; }
.chan-desc { font-size: 12px; color: var(--txt-dim); display: block; }
.chan-btns { display: flex; gap: 6px; }
.mini {
  font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  width: 34px; height: 28px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--txt-dim); border: 1px solid var(--glass-line);
}
.mini[aria-pressed="true"] { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.mini.solo[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); }
.chan input[type="range"] { grid-column: 1 / -1; }

/* timeline */
#timeline { width: 100%; height: 148px; display: block; border-radius: 14px; border: 1px solid var(--glass-line); background: rgba(0,0,0,0.35); cursor: ew-resize; touch-action: none; }
.tl-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--txt-dim); letter-spacing: 0.06em; }
#tl-label.replay { color: var(--amber); }

/* share */
.share-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.share-link { word-break: break-all; font-size: 13px; background: rgba(0,0,0,0.35); border: 1px dashed var(--cyan); border-radius: 10px; padding: 10px 12px; }
.share-link a { color: var(--cyan); }
.sym-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sym-list:empty::after { content: "No symphonies yet — capture your first minute."; color: var(--txt-dim); font-size: 13px; }
.sym {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,0.045); border: 1px solid var(--glass-line); border-radius: 12px; padding: 10px 12px;
}
.sym b { font-size: 14px; }
.sym small { color: var(--txt-dim); font-size: 12px; }
.sym .spacer { flex: 1; }

.foot { text-align: center; color: var(--txt-dim); font-size: 12px; margin-top: 22px; letter-spacing: 0.04em; }