:root {
  --bg: #fdfdfc;
  --ink: #3a3a37;      /* lighter ink — nothing weighs it down */
  --hair: #f3f3f0;     /* barely-there hairlines */
  --muted: #c8c8c2;    /* whisper-quiet */
}

/* the lightest possible mode: even airier, even quieter */
body.lighter {
  --bg: #ffffff;
  --ink: #6a6a66;
  --hair: #f8f8f6;
  --muted: #dcdcd7;
}
body.lighter #app-header { padding-top: 30px; }
body.lighter .brand-title,
body.lighter .ov-title { font-weight: 100 !important; letter-spacing: 0.12em; }
body.lighter #controls,
body.lighter #stats { gap: 16px 30px; }
body.lighter #canvas { border-color: transparent; box-shadow: none; }
body.lighter .pill { border-color: transparent; }
body.lighter .pill.primary { background: #555; border-color: #555; }

/* the lighten-toggle — a feather-light pill floating top-right */
#lighter-btn {
  position: fixed; top: 14px; right: 14px; z-index: 40;
  font-family: 'IBM Plex Mono', monospace; font-weight: 200;
  font-size: 10px; letter-spacing: 0.14em; color: var(--muted);
  padding: 8px 15px; border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(255,255,255,0.6); cursor: pointer;
  transition: all 0.25s ease; animation: drift 6s ease-in-out infinite;
}
#lighter-btn:hover { color: var(--ink); border-color: #ddd; }
body.lighter #lighter-btn { color: var(--muted); border-color: transparent; }

@keyframes drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 200;
  overflow: hidden;
  transition: color 0.6s ease, background 0.6s ease;
}

body {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1400px 700px at 50% -12%, #ffffff, rgba(255,255,255,0) 72%),
    var(--bg);
  transition: box-shadow 0.25s ease;
}
/* drop-anywhere feedback — the whole page inhales a breath */
body.dragging { box-shadow: inset 0 0 0 2px var(--hair); }
body.dragging::after {
  content: 'drop your black midi \2014 it\2019ll play in real time';
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.14em; color: var(--muted);
  background: rgba(252,252,251,0.82); backdrop-filter: blur(2px);
  pointer-events: none;
}

/* ---------- header ---------- */
#app-header {
  padding: 18px 20px 10px;
  text-align: center;
  flex-shrink: 0;
}
.brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.feather-mini { font-size: 20px; animation: bob 3.4s ease-in-out infinite; display: inline-block; }
.brand-title {
  font-family: 'Fraunces', serif;
  font-weight: 100;
  font-size: clamp(20px, 5vw, 38px);
  letter-spacing: 0.06em;
  transition: letter-spacing 0.6s ease;
}
.brand-sub {
  margin-top: 6px;
  font-size: clamp(9px, 2.4vw, 12px);
  font-weight: 200;
  letter-spacing: 0.35em;
  color: var(--muted);
  text-transform: lowercase;
}

@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-8px) rotate(4deg); }
}

/* ---------- main / canvas ---------- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 14px;
}
#canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  display: block;
}

/* ---------- stats ---------- */
#stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 12px 4px 4px;
  flex-shrink: 0;
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.stat-num {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(15px, 3.6vw, 22px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: lowercase;
}
.stat.weight .stat-num { color: #b0b0aa; }

/* ---------- controls ---------- */
#controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 10px 4px 6px;
  flex-shrink: 0;
}
.pill {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s ease;
}
.pill:hover { border-color: #111; }
.pill.primary { background: #111; color: #fff; border-color: #111; }
.pill.primary:hover { background: #000; }
.load-pill { display: inline-flex; align-items: center; }

.track-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.chip {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 200;
  font-size: 11px;
  padding: 6px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.02em;
}
.chip:hover { color: var(--ink); border-color: #ccc; }
.chip.active { color: #fff; background: #111; border-color: #111; }

/* sliders */
.slider-wrap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.slider-label { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); }
.slider-val { font-size: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 2px;
  background: var(--hair); border-radius: 2px; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #111; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hair);
}
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #111; border: 2px solid #fff;
}

#note-msg {
  text-align: center;
  font-size: 11px;
  font-weight: 200;
  color: var(--muted);
  min-height: 14px;
  margin: 2px 0 0;
  flex-shrink: 0;
}

/* ---------- footer ---------- */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px 12px;
  font-size: 10px;
  font-weight: 200;
  letter-spacing: 0.1em;
  color: var(--muted);
  flex-shrink: 0;
}
footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
footer a:hover { border-color: #111; }

/* ---------- start overlay ---------- */
#start-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 500px at 50% 30%, #ffffff, #f3f3f1);
  transition: opacity 0.6s ease;
}
#start-overlay.gone { opacity: 0; pointer-events: none; }
.start-inner { text-align: center; padding: 20px; }
.feather { font-size: 52px; animation: bob 3.4s ease-in-out infinite; }
.ov-title {
  font-family: 'Fraunces', serif; font-weight: 100;
  font-size: clamp(26px, 7vw, 52px);
  letter-spacing: 0.05em; margin: 14px 0 6px;
}
.ov-sub {
  font-size: clamp(9px, 2.6vw, 13px); font-weight: 200;
  letter-spacing: 0.32em; color: var(--muted);
  text-transform: lowercase; margin: 0 0 26px;
}
#start-btn {
  font-family: 'IBM Plex Mono', monospace; font-weight: 300;
  font-size: 15px; letter-spacing: 0.06em;
  padding: 13px 30px; border-radius: 999px;
  border: 1px solid #111; background: #fff; color: #111; cursor: pointer;
  transition: all 0.2s ease;
}
#start-btn:hover { background: #111; color: #fff; }
.ov-fine {
  margin-top: 22px; font-size: 10px; font-weight: 200;
  letter-spacing: 0.08em; color: #c0c0ba;
}

@media (max-width: 560px) {
  input[type=range] { width: 110px; }
  #stats { gap: 6px 16px; }
}