/* Overtone
   Palette is a spectrogram ramp: colour carries harmonic meaning in the piano
   roll (chord tones warm, passing tones cool), so it is data, not decoration. */

:root {
  --ink:        #12101f;
  --ink-2:      #1a1730;
  --ink-3:      #221d3c;
  --hair:       #2f2850;
  --paper:      #ece9f5;
  --dim:        #918AAD;
  --dimmer:     #6d6690;

  --e1: #3b1c6b;
  --e2: #7c2f8f;
  --e3: #d0436a;
  --e4: #f08a3c;
  --e5: #f6d67a;

  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(124, 47, 143, .30), transparent 62%),
    radial-gradient(46rem 32rem at 4% 8%, rgba(59, 28, 107, .38), transparent 60%),
    radial-gradient(38rem 30rem at 50% 108%, rgba(208, 67, 106, .13), transparent 60%);
}

main { position: relative; z-index: 1; }

a { color: var(--e5); text-decoration-color: rgba(246, 214, 122, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--e5); }

code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(255,255,255,.06);
  padding: .1em .38em;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .18em;
  font-size: .95rem;
}

.topbar-sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--dimmer);
  margin-left: .85rem;
  letter-spacing: .02em;
}

.topbar-stat {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dimmer);
  box-shadow: 0 0 0 0 rgba(246,214,122,0);
  transition: background .3s, box-shadow .3s;
}
.led.ready { background: var(--e5); box-shadow: 0 0 10px 1px rgba(246,214,122,.6); }
.led.live  { background: var(--e3); box-shadow: 0 0 12px 2px rgba(208,67,106,.65); animation: pulse 1.9s ease-in-out infinite; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* -------------------------------------------------------------------- hero */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 1.3rem;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--e5) 8%, var(--e4) 42%, var(--e3) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede { font-size: 1.02rem; color: #c7c1de; margin: 0 0 1.9rem; max-width: 46ch; }

.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.hero-note {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--dimmer);
  margin: .9rem 0 0;
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.7rem;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s;
  display: inline-block;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(96deg, var(--e5), var(--e4) 55%, var(--e3));
  color: #24102a;
  box-shadow: 0 8px 26px -10px rgba(240,138,60,.75);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(240,138,60,.9); }
.btn-primary:disabled { opacity: .45; cursor: progress; box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--hair);
}
.btn-ghost:hover { border-color: var(--e4); color: var(--e5); }

.loadbar {
  width: 130px; height: 3px;
  background: var(--ink-3);
  border-radius: 2px;
  overflow: hidden;
}
.loadbar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--e2), var(--e4)); transition: width .2s; }
.loadbar.done { opacity: 0; transition: opacity .5s; }

.spec {
  margin: .4rem 0 0;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: .78rem;
}
.spec > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hair);
}
.spec dt { color: var(--dimmer); }
.spec dd { margin: 0; color: var(--paper); text-align: right; }
.spec dd.hl { color: var(--e5); }

/* ------------------------------------------------------------------- stage */

.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.roll-wrap {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,23,48,.9), rgba(18,16,31,.9));
  overflow: hidden;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

.roll { display: block; width: 100%; height: 268px; }

.roll-legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: .6rem .95rem;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--dimmer);
}
.lg { display: inline-flex; align-items: center; gap: .4rem; }
.lg::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.lg-played { color: #4b4370; }
.lg-ahead { color: var(--e2); }
.lg-chordtone { color: var(--e4); }
.lg-passing { color: #6f7fc9; }

.readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  margin-top: -1px;
}
.ro { background: var(--ink-2); padding: .75rem .95rem; }
.ro-k { display: block; font-family: var(--font-mono); font-size: .64rem; color: var(--dimmer); letter-spacing: .07em; text-transform: uppercase; }
.ro-v { display: block; font-family: var(--font-mono); font-size: 1.02rem; color: var(--paper); margin-top: .18rem; }

/* ---------------------------------------------------------------- controls */

.controls {
  max-width: var(--maxw);
  margin: 2.2rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem 2.4rem;
}

.ctl-keys, .ctl-form, .ctl-mix { grid-column: 1 / -1; }

.ctl-label {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .6rem;
}
.ctl-hint { text-transform: none; letter-spacing: 0; color: var(--dimmer); font-size: .68rem; }
.ctl-val { margin-left: auto; color: var(--e5); text-transform: none; letter-spacing: 0; }
.ctl-note { font-size: .78rem; color: var(--dimmer); margin: .5rem 0 0; max-width: 48ch; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--ink-3);
  border-radius: 2px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--e4);
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--e4);
}
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--e4); cursor: pointer; border: 2px solid var(--ink);
}
input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(240,138,60,.3); }

.keyrow, .formrow, .mixrow { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip {
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  color: var(--dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { color: var(--paper); border-color: var(--dimmer); }
.chip[aria-pressed="true"] {
  background: linear-gradient(96deg, rgba(246,214,122,.16), rgba(208,67,106,.16));
  border-color: var(--e4);
  color: var(--e5);
}
.chip.queued { border-color: var(--e2); color: var(--e2); }
.chip:focus-visible { outline: 2px solid var(--e4); outline-offset: 2px; }

.mixrow { gap: 1.4rem; }
.mixitem { flex: 1 1 130px; min-width: 0; }
.mixitem label {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--dimmer);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .34rem;
}

/* ------------------------------------------------------------------- prose */

.prose {
  max-width: var(--maxw);
  margin: 4.5rem auto 0;
  padding: 2.6rem 1.5rem 0;
  border-top: 1px solid var(--hair);
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}

.cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.6rem; }

.prose h3 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--e4);
  margin: 0 0 .7rem;
}

.prose p { color: #c2bcd8; margin: 0 0 1rem; font-size: .95rem; }
.prose em { color: var(--paper); font-style: italic; }

.cta-line { margin-top: 2rem; }

.foot {
  max-width: var(--maxw);
  margin: 3.5rem auto 0;
  padding: 1.6rem 1.5rem 3rem;
  border-top: 1px solid var(--hair);
}
.foot p { font-family: var(--font-mono); font-size: .71rem; color: var(--dimmer); margin: 0; line-height: 1.75; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.4rem; }
  .cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .controls { grid-template-columns: 1fr; }
  .readout { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .roll { height: 210px; }
  .topbar-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

:focus-visible { outline: 2px solid var(--e4); outline-offset: 2px; border-radius: 4px; }