:root {
  --bg: #101418;
  --bg-elev: #171c22;
  --panel: #1c232b;
  --panel-2: #232b34;
  --line: #343e49;
  --text: #e4ebf1;
  --muted: #8e9bab;
  --teal: #2fbfb3;
  --teal-ink: #06211e;
  --good: #3ecf8e;
  --good-bg: #1a5c40;
  --bad: #e25b64;
  --bad-bg: #6e2d34;
  --amber: #e2a33a;
  --clip: #3c6284;
  --clip-2: #6d5736;
  --wave: #d7e7f4;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --key-h: 50px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 380px at 0% -10%, rgba(47, 191, 179, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.app {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 32px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.brand { display: flex; gap: 12px; align-items: center; }
.mark { width: 32px; height: 32px; fill: var(--teal); flex: none; }
h1 { font-size: 1.15rem; margin: 0; letter-spacing: -0.02em; }
.tagline { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.top-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }

.seg, .durations { display: flex; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg-btn, .durations button, .chip, .mode-btn, .btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 12px;
}
.seg-btn.is-on, .durations button.is-on { background: var(--panel-2); color: white; }
.chip, .btn.ghost { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.chip[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.btn.primary { background: var(--teal); color: var(--teal-ink); font-weight: 700; border-radius: 999px; padding: 10px 16px; }
.btn.primary.is-stop { background: var(--bad); color: white; }
.btn:disabled, .durations button:disabled { opacity: 0.45; cursor: default; }

.az {
  min-width: 46px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #3d6f78;
  background: #16343a;
  color: var(--teal);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.az.is-on, .az[aria-pressed="true"] {
  background: var(--teal);
  color: var(--teal-ink);
  border-color: var(--teal);
}
.az.needs-attention { animation: pulse 0.7s ease 2; }

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
  margin-bottom: 12px;
}
.stat {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px 10px;
  min-height: 74px;
}
.stat-label, .stat-sub { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-value {
  display: block;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin: 2px 0;
}
.stat.is-hot .stat-value { color: var(--teal); }
.floater {
  position: absolute;
  right: 10px;
  top: 8px;
  color: var(--good);
  font-weight: 700;
  animation: float-up 0.7s ease forwards;
  pointer-events: none;
}
.timer-bar {
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: #2a333c;
  border-radius: 99px;
  overflow: hidden;
}
#timer-fill { display: block; height: 100%; width: 100%; background: var(--teal); }
#timer-fill.is-low { background: var(--amber); }

.modes { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-btn { background: var(--bg-elev); border: 1px solid var(--line); color: var(--muted); }
.mode-btn.is-on { color: white; border-color: var(--teal); background: #1a2c30; }
.blurb { color: var(--muted); margin: 8px 0 12px; min-height: 1.2em; font-size: 0.92rem; }

.prompt-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.prompt-card.is-good { border-left-color: var(--good); }
.prompt-card.is-bad { border-left-color: var(--bad); animation: shake 0.28s linear; }
.eyebrow { margin: 0; color: var(--teal); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.prompt-text { margin: 4px 0; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.2; min-height: 1.2em; }
.feedback { margin: 0; min-height: 1.3em; color: var(--muted); }
.feedback.is-good { color: var(--good); }
.feedback.is-bad { color: #ffb4b8; }
.run-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.run-buttons { display: flex; gap: 8px; }

.focus-banner {
  background: #3a2d14;
  color: #f0d7a4;
  border: 1px solid #6b5424;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.daw {
  background: #14191e;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
}
.daw-titlebar, .daw-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #1a2128;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
.daw-dots { display: flex; gap: 4px; }
.daw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #3a4450; display: block; }
.spacer { flex: 1; }
.daw-counter, .zoom-readout {
  font-variant-numeric: tabular-nums;
  background: #0d1115;
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.04em;
}
.edit-modes, .edit-tools { display: flex; gap: 4px; }
.tool-btn {
  padding: 3px 7px;
  border-radius: 3px;
  background: #12171c;
  color: var(--muted);
  font-size: 0.72rem;
  border: 1px solid transparent;
}
.tool-btn:hover { color: var(--text); border-color: #3c4c59; }
.tool-btn.is-on { color: var(--teal-ink); background: var(--teal); border-color: var(--teal); }
.ifp {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #667484;
  border: 1px solid #33404c;
  padding: 3px 6px;
  border-radius: 3px;
}
.ifp.is-on { color: var(--teal-ink); background: var(--amber); border-color: var(--amber); }

.daw-stage { min-height: 184px; }
.just-switched { animation: rise 0.28s ease; }
.daw[data-view="edit"] .mix-view { display: none; }
.daw[data-view="mix"] .edit-layout { display: none; }
.daw[data-view="mix"] .edit-modes,
.daw[data-view="mix"] .edit-tools,
.daw[data-view="mix"] #focus-daw,
.daw[data-view="mix"] #ifp-lamp,
.daw[data-view="mix"] .daw-note { display: none; }
.edit-main { display: grid; grid-template-columns: 148px 1fr; }
.gutter-col { background: #151b21; border-right: 1px solid var(--line); }
.gutter {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid #2a333c;
  position: relative;
}
.gutter.ruler-gutter { height: 28px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.04em; }
.gutter.is-focused { background: #1c2833; }
.swatch { width: 8px; height: 28px; border-radius: 2px; }
.swatch.vocal { background: #3d8f9a; }
.swatch.guitar { background: #c4843c; }
.gutter-name { font-size: 0.85rem; }
.gutter-btns { margin-left: auto; display: flex; gap: 3px; }
.gutter-btns i {
  font-style: normal;
  font-size: 0.65rem;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: #10151a;
  color: #6c7a88;
}

.lanes-frame { position: relative; overflow: hidden; background: #12181d; touch-action: none; }
.lanes-wrap[data-tool="zoom"] { cursor: zoom-in; }
.lanes-wrap[data-tool="trim"] { cursor: ew-resize; }
.lanes-wrap[data-tool="select"] { cursor: crosshair; }
.lanes-wrap[data-tool="grab"] { cursor: grab; }
.lanes-wrap.is-dragging[data-tool="grab"] { cursor: grabbing; }
.lanes-wrap[data-tool="trim"] .clip {
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.9), inset -4px 0 0 rgba(255, 255, 255, 0.9);
}
.edit-selection {
  position: absolute;
  top: 28px;
  bottom: 0;
  background: rgba(47, 191, 179, 0.2);
  border-left: 1px solid rgba(180, 245, 236, 0.9);
  border-right: 1px solid rgba(180, 245, 236, 0.9);
  z-index: 3;
  pointer-events: none;
}
.lanes-wrap { position: relative; min-height: 184px; }
.ruler { position: relative; height: 28px; border-bottom: 1px solid #2c3640; }
.tick {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: #9aabba;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tick.is-first { transform: none; }
.tick.is-last { transform: translateX(-100%); }
.tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 1px;
  height: 8px;
  background: #4a5866;
}
.tick.is-first::after { left: 0; }
.tick.is-last::after { left: 100%; }
.tl-range {
  position: absolute;
  top: 0;
  height: 28px;
  left: 18%;
  width: 56%;
  background: rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  z-index: 2;
  pointer-events: none;
}
.tl-range.is-hot { background: rgba(47, 191, 179, 0.32); }
.lane {
  position: relative;
  height: 78px;
  border-bottom: 1px solid #24303a;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(12.5% - 1px),
    rgba(255, 255, 255, 0.045) calc(12.5% - 1px),
    rgba(255, 255, 255, 0.045) 12.5%
  );
}
.clip {
  position: absolute;
  top: 10px;
  bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.lane.animate .clip { transition: left 0.28s ease, width 0.28s ease; }
.clip[data-track="0"] { background: linear-gradient(#4d7196, var(--clip)); }
.clip[data-track="1"] { background: linear-gradient(#7d6744, var(--clip-2)); }
.clip.is-copied { outline: 1px dashed rgba(255, 255, 255, 0.8); outline-offset: -3px; }
.clip-name {
  position: absolute;
  z-index: 3;
  left: 6px;
  top: 3px;
  font-size: 10px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.wave { position: absolute; inset: 12px 0 4px; width: 100%; height: calc(100% - 16px); }
.clip.is-blocks .wave { opacity: 0; }
.blocks {
  position: absolute;
  inset: 16px 6px 6px;
  display: none;
  align-items: flex-end;
  gap: 3px;
}
.clip.is-blocks .blocks { display: flex; }
.blocks i {
  display: block;
  flex: 1;
  background: rgba(215, 231, 244, 0.85);
  border-radius: 1px;
}
.fade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--until, 1) * 100%);
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.fade[data-type="in"] { background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.08)); }
.fade[data-type="out"] {
  left: calc(var(--from, 0) * 100%);
  width: calc((1 - var(--from, 0)) * 100%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.82));
}
.fade[data-type="in"]::before,
.fade[data-type="out"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), #f4f7fa 50%, transparent calc(50% + 1.5px));
}
.fade[data-type="out"]::before {
  background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #f4f7fa 50%, transparent calc(50% + 1.5px));
}
.fade[data-type="cross"] {
  left: 34%;
  width: 32%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.55));
}
.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f4f7fa;
  z-index: 5;
  pointer-events: none;
}
.playhead.is-playing { box-shadow: 0 0 0 1px rgba(47, 191, 179, 0.0), 0 0 12px var(--teal); }
.playhead-flag {
  position: absolute;
  top: 0;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #f4f7fa;
}
.mix-view { padding: 16px 18px 20px; }
.mix-strips { display: flex; gap: 18px; align-items: flex-end; min-height: 200px; }
.strip {
  width: 92px;
  background: #1a2128;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.strip.is-master { width: 108px; }
.strip-name { font-size: 0.78rem; }
.fader-track {
  width: 10px;
  height: 120px;
  background: #0c1014;
  border-radius: 6px;
  position: relative;
}
.fader-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--h);
  background: var(--c);
  border-radius: 6px;
}
.strip-io { color: var(--muted); font-size: 0.68rem; }
.daw-toast {
  position: absolute;
  left: 162px;
  bottom: 36px;
  background: rgba(8, 12, 16, 0.88);
  border: 1px solid var(--line);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}
.daw-toast.is-on { opacity: 1; transform: none; transition: 0.2s ease; }
.daw-note { margin: 0; padding: 6px 10px 8px; color: var(--muted); font-size: 0.75rem; background: #12171c; }

.board-wrap {
  background: #12171c;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.held-row { display: flex; gap: 8px; align-items: baseline; min-height: 1.4em; margin-bottom: 8px; }
.held-label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.held { font-variant-numeric: tabular-nums; color: var(--text); }
.board { display: flex; gap: 16px; align-items: flex-end; }
.keyboard { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 640px; }
.key-row { display: flex; gap: 6px; }
.key {
  position: relative;
  flex: var(--w, 1) 1 0;
  height: var(--key-h);
  min-width: 0;
  border-radius: 7px;
  border: 1px solid #46525e;
  border-bottom-width: 3px;
  background: linear-gradient(#313a44, #272f37);
  color: var(--text);
  padding: 4px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  user-select: none;
}
.key:active, .key.is-down, .key.is-sticky {
  transform: translateY(2px);
  border-bottom-width: 1px;
  background: #222a32;
}
.key-main { font-size: 0.92rem; line-height: 1; }
.key-mod .key-main, .key-wide .key-main { font-size: 0.68rem; letter-spacing: 0.02em; text-transform: lowercase; }
.key-hint {
  font-size: 8px;
  line-height: 1.1;
  color: #9eb0c0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
body.labels-off .key-hint { visibility: hidden; }
.key.is-focus-key::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
}
body.labels-off .key.is-focus-key::after { opacity: 0; }
body:not(.focus-on) .key.is-focus-key { opacity: 0.42; }
.key.is-good { background: var(--good-bg); border-color: var(--good); color: white; }
.key.is-good .key-hint { color: #d9ffe9; }
.key.is-bad { background: var(--bad-bg); border-color: var(--bad); color: white; }
.key.is-hint { box-shadow: inset 0 0 0 2px var(--amber); }
.numpad-col { width: 230px; flex: none; }
.numpad-label { margin: 0 0 6px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.numpad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, var(--key-h));
  gap: 6px;
}
.numpad .key { width: 100%; flex: none; height: 100%; }
.np-sub { grid-area: 1 / 4; }
.np-add { grid-area: 2 / 4 / 4 / 5; height: auto; }
.np-0 { grid-area: 4 / 1 / 5 / 3; }
.np-dot { grid-area: 4 / 3; }
.np-enter { grid-area: 4 / 4; }
.np-7 { grid-area: 1 / 1; }
.np-8 { grid-area: 1 / 2; }
.np-9 { grid-area: 1 / 3; }
.np-4 { grid-area: 2 / 1; }
.np-5 { grid-area: 2 / 2; }
.np-6 { grid-area: 2 / 3; }
.np-1 { grid-area: 3 / 1; }
.np-2 { grid-area: 3 / 2; }
.np-3 { grid-area: 3 / 3; }
.legend, .foot { color: var(--muted); font-size: 0.78rem; }
.legend { margin: 8px 0 0; }

.map { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 12px; }
.map summary { cursor: pointer; font-weight: 600; }
.map-tools { margin: 10px 0; }
.map-tools input {
  width: min(360px, 100%);
  background: #12171c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.map-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.map-group h3 { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.map-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 3px 0; font-size: 0.86rem; }
.map-row kbd {
  font-family: inherit;
  background: #12171c;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text);
}
.foot { margin-top: 14px; line-height: 1.45; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 10, 0.72);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 18px;
}
.modal-card {
  width: min(480px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
}
.modal-card h2 { margin: 0; }
.results-mode { color: var(--muted); margin-top: 4px; }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.results-grid div { background: #12171c; border-radius: 10px; padding: 8px 10px; }
.results-grid span { display: block; color: var(--muted); font-size: 0.75rem; }
.results-grid strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.new-best { color: var(--amber); font-weight: 700; }
.modal-card h3 { margin: 8px 0; font-size: 0.9rem; }
#review { margin: 0 0 14px; padding-left: 18px; color: var(--muted); }
#review:empty::before { content: "Clean run."; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

@keyframes float-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-16px); }
}
@keyframes shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes rise {
  from { opacity: 0.4; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  50% { transform: scale(1.08); }
}

@media (max-width: 1040px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .board { flex-direction: column; align-items: stretch; }
  .numpad-col { width: min(280px, 100%); }
  .map-list { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .prompt-card, .edit-main { display: block; }
  .stats { grid-template-columns: 1fr 1fr; }
  .gutter-col { display: none; }
  .keyboard { min-width: 560px; }
  .board-wrap { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}