/* Memphis Retro theme: a bright practice studio, layered over the stable music engine. */
/* Theme: project palette, typography, borders, and decorative treatment.
   Layout corrections belong in their component stylesheet. */
:root {
  --mem-cream: #fff8e8;
  --mem-paper: #fffdf5;
  --mem-ink: #183153;
  --mem-yellow: #ffd93d;
  --mem-coral: #ff6b5c;
  --mem-sky: #61c9f6;
  --mem-mint: #91e4c3;
  --mem-border: 3px solid var(--mem-ink);
  --mem-radius: 18px;
  --mem-shadow: 6px 8px 0 rgba(24, 49, 83, .16), 0 14px 26px rgba(24, 49, 83, .09);
  --mem-tight: 8px;
  --mem-space: clamp(16px, 2vw, 30px);
  --mem-display: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", sans-serif;
  --mem-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --mem-data: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
html {
  background: var(--mem-cream);
  color-scheme: light;
}
body {
  background-color: var(--mem-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Cpath d='M8 22c10-14 23 14 34 0s24 14 41 0M7 71h11l7-9 8 9 9-9 8 9 10-9 9 9h16' fill='none' stroke='%23183153' stroke-opacity='.16' stroke-width='2'/%3E%3Ccircle cx='73' cy='46' r='3' fill='%23ff6b5c' fill-opacity='.23'/%3E%3C/svg%3E");
  color: var(--mem-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}
body::before {
  z-index: 0;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 0h24v24H0zM48 48h24v24H48z' fill='%2361c9f6'/%3E%3Cpath d='M60 12l23 23M83 12L60 35' stroke='%23ff6b5c' stroke-width='4'/%3E%3C/svg%3E");
}
::selection {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
button, input, select {
  font: inherit;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 3px;
}
button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.app-shell {
  position: relative;
  isolation: isolate;
  max-width: 1400px;
  padding: 18px clamp(14px, 3vw, 46px) 54px;
}
.app-shell > * {
  position: relative;
  z-index: 1;
}
.app-shell::before, .app-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.app-shell::before {
  top: 138px;
  right: 2%;
  width: 110px;
  height: 110px;
  border: 11px solid var(--mem-coral);
  border-radius: 50%;
  opacity: .22;
}
.app-shell::after {
  top: 520px;
  left: 1%;
  width: 92px;
  height: 28px;
  background: repeating-linear-gradient(135deg, var(--mem-yellow) 0 8px, var(--mem-ink) 8px 12px);
  opacity: .28;
  transform: rotate(-14deg);
}
.topbar {
  min-height: 66px;
  padding: 9px 16px;
  border: var(--mem-border);
  border-radius: var(--mem-radius);
  background: var(--mem-paper);
  box-shadow: var(--mem-shadow);
}
.brand {
  gap: 10px;
  color: var(--mem-ink);
}
.main-nav {
  padding: 0;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.main-nav a {
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--mem-ink);
  font-weight: 800;
}
.main-nav a:hover {
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.main-nav a:active {
  transform: translateY(1px);
}
.topbar-actions {
  gap: 10px;
}
.session-status {
  border: 0;
  border-radius: 10px;
  background: var(--mem-mint);
  color: var(--mem-ink);
  font-weight: 750;
}
.session-status span {
  border: 2px solid var(--mem-ink);
  background: var(--mem-coral);
}
.admin-entry {
  border: var(--mem-border);
  border-radius: 10px;
  background: var(--mem-ink);
  color: var(--mem-paper);
  box-shadow: 3px 4px 0 rgba(24, 49, 83, .2);
}
.admin-entry:hover {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.admin-entry:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(24, 49, 83, .2);
}
.mobile-admin-entry {
  display: none;
}
.hero {
  min-height: 230px;
  margin: 24px 0 20px;
  padding: 30px 34px 26px;
  border: var(--mem-border);
  border-radius: var(--mem-radius);
  background: var(--mem-paper);
  box-shadow: var(--mem-shadow);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: 14%;
  bottom: -52px;
  width: 140px;
  height: 140px;
  border: 18px solid var(--mem-mint);
  border-radius: 50%;
  opacity: .8;
}
.hero::after {
  content: "";
  right: 28px;
  top: 28px;
  width: 74px;
  height: 58px;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--mem-sky) 0 10px, transparent 10px 19px);
  color: transparent;
  transform: rotate(-19deg);
}
.eyebrow {
  display: none;
}
.hero h1, .section-heading h2, .arrangement h2, .learning-library h2, .practice-window h2, .notes-window h2 {
  font-family: var(--mem-display);
  letter-spacing: -.035em;
  color: var(--mem-ink);
}
.hero h1 {
  max-width: 710px;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .92;
  text-transform: none;
}
.hero h1 em {
  color: var(--mem-coral);
  text-shadow: 3px 3px 0 var(--mem-yellow);
}
.lede {
  max-width: 570px;
  color: var(--mem-ink);
  font-weight: 650;
}
.primary-link, .text-link {
  border: var(--mem-border);
  border-radius: 11px;
  box-shadow: 3px 4px 0 rgba(24, 49, 83, .16);
}
.primary-link {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.text-link {
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.primary-link:hover {
  background: var(--mem-ink);
}
.text-link:hover {
  background: var(--mem-sky);
}
.primary-link:active,.text-link:active {
  transform: translate(2px,2px);
  box-shadow: 1px 2px 0 rgba(24,49,83,.16);
}
.now-playing {
  min-width: 255px;
  border: var(--mem-border);
  border-radius: 14px 24px 14px 24px;
  background: var(--mem-sky);
  box-shadow: 4px 5px 0 rgba(24,49,83,.18);
}
.now-playing::after {
  display: none;
}
.now-playing span,.now-playing small {
  color: var(--mem-ink);
}
.now-playing strong {
  color: var(--mem-ink);
  font-family: var(--mem-display);
}
.player {
  border: var(--mem-border);
  border-radius: 22px;
  background: var(--mem-ink);
  box-shadow: 8px 10px 0 rgba(97, 201, 246, .72), 0 18px 28px rgba(24,49,83,.16);
}
.player::before {
  border: 0;
  border-bottom: 3px solid var(--mem-ink);
  background: var(--mem-yellow);
  color: var(--mem-ink);
  font-family: var(--mem-display);
}
.player::after {
  color: var(--mem-coral);
}
.play-button {
  border: 0;
  border-radius: 14px;
  background: var(--mem-coral);
  color: var(--mem-paper);
  box-shadow: none;
  font-family: var(--mem-display);
}
.play-button:hover {
  background: var(--mem-yellow);
  color: var(--mem-ink);
}
.play-button:active {
  transform: none;
  box-shadow: none;
}
.player.playing .play-button {
  background: var(--mem-mint);
  color: var(--mem-ink);
  box-shadow: none;
}
.secondary-button {
  border: 2px solid var(--mem-paper);
  border-radius: 50%;
  background: transparent;
  color: var(--mem-paper);
}
.secondary-button:hover {
  border-color: var(--mem-sky);
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.transport {
  border: 2px solid rgba(255,253,245,.72);
  border-radius: 12px;
  background: rgba(255,253,245,.08);
}
.transport span:first-child {
  color: var(--mem-paper);
  font-family: var(--mem-data);
}
.transport span:last-child {
  color: var(--mem-mint);
}
.progress-control {
  position: relative;
  border: 2px solid var(--mem-paper);
  border-radius: 14px;
  background: rgba(255,253,245,.08);
}
.progress-control::before {
  color: var(--mem-mint);
  line-height: 1.2;
  transform: none;
}
.progress-control input {
  accent-color: var(--mem-yellow);
}
.progress-control output {
  color: var(--mem-yellow);
  font-family: var(--mem-data);
}
.compact-control,.tempo-control > button,.player .feel-readout,.loop-control,.chord-tone-control {
  border: 0;
  border-radius: 12px;
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.compact-control:hover,.tempo-control > button:hover,.player .feel-readout:hover,.chord-tone-control:hover {
  background: var(--mem-sky);
}
.compact-control select,.tempo-control > button output,.player .feel-readout strong,.loop-control strong,.chord-tone-control strong {
  color: var(--mem-ink);
  font-family: var(--mem-data);
}
.loop-control[aria-pressed="true"] {
  background: var(--mem-mint);
}
.loop-control:hover {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.loop-control:hover strong {
  color: inherit;
}
.chord-tone-control[aria-pressed="true"] {
  background: var(--mem-yellow);
}
.chord-tone-control:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 2px;
}
.tempo-popover {
  border: 2px solid var(--mem-ink);
  border-radius: 12px;
  background: var(--mem-yellow);
  box-shadow: 4px 5px 0 rgba(24,49,83,.22);
}
.arrangement,.journey,.backing-library,.learning-library {
  border: var(--mem-border);
  border-radius: var(--mem-radius);
  background: var(--mem-paper);
  box-shadow: var(--mem-shadow);
}
.arrangement {
  margin-bottom: 24px;
  padding: 27px;
}
.arrangement::before,.arrangement::after {
  display: none;
}
.arrangement-title {
  padding-bottom: 16px;
  border-bottom: 3px solid var(--mem-ink);
}
.arrangement h2 {
  font-size: clamp(30px, 4vw, 47px);
}
.arrangement-actions {
  color: var(--mem-ink);
  font-weight: 800;
}
.edit-arrangement {
  border: var(--mem-border);
  border-radius: 10px;
  background: var(--mem-mint);
  color: var(--mem-ink);
  box-shadow: 3px 4px 0 rgba(24,49,83,.16);
}
.edit-arrangement:hover {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.edit-arrangement:active {
  transform: translate(2px,2px);
  box-shadow: 1px 2px 0 rgba(24,49,83,.16);
}
.timeline {
  gap: 10px;
}
.bar {
  height: 96px;
  border: var(--mem-border);
  border-radius: 13px;
  box-shadow: 3px 4px 0 rgba(24,49,83,.14);
}
.bar:nth-child(4n+1) {
  background: var(--mem-yellow);
}
.bar:nth-child(4n+2) {
  background: var(--mem-sky);
}
.bar:nth-child(4n+3) {
  background: var(--mem-mint);
}
.bar:nth-child(4n) {
  background: #ffd1cb;
}
.bar:hover {
  background: var(--mem-paper);
  transform: translateY(-2px) rotate(-.5deg);
}
.bar.selected {
  background: var(--mem-yellow);
}
.bar.current {
  background: var(--mem-coral);
  color: var(--mem-paper);
  box-shadow: 5px 6px 0 var(--mem-ink);
  transform: translateY(-2px);
}
.bar-chord {
  font-family: var(--mem-data);
}
.timeline-help {
  border-top: 2px dashed var(--mem-ink);
  color: var(--mem-ink);
}
.mixer-heading {
  border: var(--mem-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.mixer {
  border: var(--mem-border);
  border-radius: 0 0 14px 14px;
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.mixer-table-head {
  background: var(--mem-ink);
  color: var(--mem-paper);
}
.mixer-channel,.mixer-channel:nth-of-type(even) {
  background: var(--mem-paper);
  color: var(--mem-ink);
  border-top-color: rgba(24,49,83,.28);
}
.mixer-channel:nth-of-type(even) {
  background: #f6fffb;
}
.track-icon {
  border: 2px solid var(--mem-ink);
  border-radius: 10px;
  background: var(--mem-yellow);
  color: var(--mem-ink);
}
.mixer-channel > button {
  border: 2px solid var(--mem-ink);
  border-radius: 8px;
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.mixer-channel > button:hover {
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.mixer-channel > button[data-mute].active {
  background: var(--mem-coral);
}
.mixer-channel > button[data-solo].active {
  background: var(--mem-yellow);
}
.drum-submixer,.guitar-submixer {
  border-top-color: var(--mem-ink);
  background: var(--mem-mint);
}
.journey {
  padding: 28px;
  margin-bottom: 24px;
  background: var(--mem-sky);
}
.journey::before,.journey::after,.learning-library::before,.learning-library::after {
  display: none;
}
.section-heading {
  display: block;
}
.section-heading h2 {
  font-size: clamp(30px, 4vw, 48px);
}
.journey-heading-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 18px;
}
.journey-heading-tools p {
  color: var(--mem-ink);
  text-align: left;
}
.source-audit-link {
  color: var(--mem-ink);
  text-decoration-thickness: 2px;
}
.atlas {
  border: var(--mem-border);
  border-radius: 16px;
  background: var(--mem-ink);
  box-shadow: 5px 6px 0 rgba(24,49,83,.18);
}
.groove-card {
  border: 2px solid rgba(255,253,245,.76);
  border-radius: 11px;
  background: rgba(255,253,245,.08);
}
.groove-card:hover,.groove-card.active {
  border-color: var(--mem-yellow);
  background: rgba(255,217,61,.22);
}
.style-panel,.style-dossier {
  border: var(--mem-border);
  border-radius: 15px;
  background: var(--mem-mint);
  box-shadow: 5px 6px 0 rgba(24,49,83,.18);
}
.style-panel h3 {
  font-family: var(--mem-display);
}
.learning-library {
  padding: 30px;
  margin-bottom: 24px;
  background: var(--mem-paper);
}
.library-window-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(250px,.55fr);
  align-items: end;
}
.window-kicker {
  color: var(--mem-coral);
  font-family: var(--mem-data);
}
.library-search input {
  border: var(--mem-border);
  border-radius: 12px;
  background: var(--mem-cream);
  color: var(--mem-ink);
}
.library-filters {
  margin: 22px 0 16px;
}
.library-filters button,.library-filters select {
  border: 2px solid var(--mem-ink);
  border-radius: 10px;
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.library-filters button:hover,.library-filters button.active {
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.library-card-grid {
  grid-template-columns: 1.2fr .9fr .9fr 1.05fr;
  gap: 16px;
}
.library-card {
  min-height: 185px;
  border: var(--mem-border);
  border-radius: 16px;
  background: var(--mem-yellow);
  box-shadow: var(--mem-shadow);
}
.library-card:nth-child(2n) {
  background: var(--mem-mint);
}
.library-card:nth-child(3n) {
  background: var(--mem-sky);
  color: var(--mem-ink);
}
.library-card:nth-child(4n) {
  background: #ffd1cb;
}
.library-card:hover {
  transform: translateY(-4px) rotate(-.5deg);
}
.library-card h3,.library-index {
  font-family: var(--mem-display);
  color: inherit;
}
.bookmark-button {
  border: 2px solid var(--mem-ink);
  border-radius: 9px;
  background: var(--mem-paper);
  color: var(--mem-ink);
}
.bookmark-button:hover,.bookmark-button[aria-pressed="true"] {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.library-empty {
  border-color: var(--mem-coral);
  border-radius: 12px;
}
.practice-notes-grid {
  gap: 20px;
}
.practice-window,.notes-window {
  border: var(--mem-border);
  border-radius: var(--mem-radius);
  box-shadow: var(--mem-shadow);
}
.practice-window {
  background: var(--mem-coral);
  color: var(--mem-paper);
}
.notes-window {
  background: var(--mem-yellow);
  color: var(--mem-ink);
}
.mini-window-bar {
  background: var(--mem-paper);
  border-bottom-color: var(--mem-ink);
}
.mini-window-bar strong {
  font-family: var(--mem-display);
  color: var(--mem-ink);
}
.practice-body,.notes-body {
  padding: 26px;
}
.practice-window h2 {
  color: var(--mem-paper);
}
.practice-body .window-kicker {
  color: var(--mem-yellow);
}
.practice-meter {
  border-color: var(--mem-ink);
  border-radius: 99px;
  background: var(--mem-paper);
}
.practice-meter span {
  background: var(--mem-mint);
}
.practice-badge {
  border: 2px solid var(--mem-ink);
  border-radius: 14px 9px 16px 10px;
  background: var(--mem-yellow);
  color: var(--mem-ink);
  box-shadow: 2px 3px 0 rgba(24,49,83,.18);
  transform: rotate(-3deg);
}
.notes-window a {
  border-color: var(--mem-ink);
  border-radius: 10px;
  box-shadow: 3px 4px 0 rgba(24,49,83,.18);
}
.notes-window a:hover {
  background: var(--mem-ink);
  color: var(--mem-paper);
}
footer {
  border-color: var(--mem-ink);
  border-radius: 15px;
  background: var(--mem-ink);
  color: var(--mem-paper);
  box-shadow: 5px 6px 0 rgba(24,49,83,.18);
}
footer a {
  color: var(--mem-yellow);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: memphis-bob 3.6s ease-in-out infinite alternate;
  }
  .library-card,.bar,.play-button,.primary-link,.text-link,.bookmark-button {
    transition: transform .16s ease-out, background-color .16s ease-out, color .16s ease-out, box-shadow .16s ease-out;
  }
}
@keyframes memphis-bob {
  to {
    transform: translateY(-8px) rotate(7deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
}
@media (max-width: 980px) {
  .library-card-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .library-window-head {
    grid-template-columns: 1fr;
  }
  .library-search {
    margin-top: 16px;
  }
  .journey-heading-tools {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 700px) {
  .app-shell {
    padding: 12px 12px 38px;
  }
  .app-shell::before,.app-shell::after,.hero::before,.hero::after {
    display: none;
  }
  .topbar {
    align-items: center;
    border-radius: 14px;
  }
  .main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .main-nav a {
    white-space: nowrap;
  }
  .session-status {
    display: none;
  }
  .hero {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 16px;
  }
  .hero h1 {
    font-size: clamp(42px, 14vw, 61px);
  }
  .now-playing {
    width: 100%;
    min-width: 0;
    margin-top: 22px;
  }
  .arrangement,.journey,.backing-library,.learning-library {
    padding: 22px 16px;
    border-radius: 16px;
  }
  .timeline {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }
  .bar {
    height: 82px;
  }
  .journey-heading-tools {
    margin-bottom: 14px;
  }
  .atlas {
    min-height: 280px;
  }
  .library-card-grid,.practice-notes-grid {
    grid-template-columns: 1fr;
  }
  .library-card {
    min-height: 150px;
  }
  .practice-notes-grid {
    gap: 16px;
  }
}
/* Legibility pass: all operational copy uses a dark, high-contrast foreground. */
:root {
  --mem-coral-ink: #8e302c;
  --mem-secondary: #344967;
}
.hero h1 em,.window-kicker {
  color: var(--mem-coral-ink);
}
.primary-link,.play-button,.player.playing .play-button,.bookmark-button[aria-pressed="true"],.bar.current {
  color: var(--mem-ink);
}
.primary-link:hover {
  color: var(--mem-paper);
}
.play-button:hover {
  color: var(--mem-ink);
}
.practice-window,.practice-window h2,.practice-body .window-kicker {
  color: var(--mem-ink);
}
.practice-window .mini-window-bar {
  color: var(--mem-ink);
}
.practice-window .practice-body p {
  color: var(--mem-ink);
}
.practice-window .practice-badge {
  color: var(--mem-ink);
}
.bar.current .bar-number,.bar.current .bar-function,.bar.current .bar-chord {
  color: var(--mem-ink);
}
.library-card small,.library-card p {
  color: var(--mem-ink);
}
/* Never force meaningful labels through a narrow box. */
.player .feel-readout strong {
  min-height: 32px;
  font-size: 14px;
  line-height: 1.12;
  letter-spacing: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.player .feel-readout small {
  display: none;
}
.groove-card {
  min-height: 88px;
  padding: 10px;
}
.groove-card strong {
  min-height: 28px;
  overflow: visible;
  color: var(--mem-paper);
  font-size: 13px;
  line-height: 1.1;
  text-overflow: clip;
  white-space: normal;
}
.groove-card small {
  overflow: visible;
  color: #dcecff;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}
.bar {
  overflow: hidden;
}
.bar-chord {
  font-size: 30px;
  line-height: 1.2;
  padding: 0;
}
.bar .bar-chord-split {
  font-size:clamp(11px,1.8vw,24px);
  line-height:1;
}
.transport span:first-child,.progress-control output,.tempo-control > button output {
  line-height: 1.2;
}
/* The mixer and reference panels previously inherited pale metadata colors. */
.track-identity small,.mixer-channel output,.timeline-help small {
  color: var(--mem-secondary);
}
.track-identity small {
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.track-settings,.mixer-channel > button {
  color: var(--mem-ink);
}
.track-settings:hover,.mixer-channel > button:hover {
  color: var(--mem-ink);
}
/* Chord colors are semantic: the same displayed chord always receives the same swatch. */
.bar.chord-color-0 {
  --chord-fill: var(--mem-yellow);
  background: var(--chord-fill);
}
.bar.chord-color-1 {
  --chord-fill: var(--mem-sky);
  background: var(--chord-fill);
}
.bar.chord-color-2 {
  --chord-fill: var(--mem-mint);
  background: var(--chord-fill);
}
.bar.chord-color-3 {
  --chord-fill: #ffd1cb;
  background: var(--chord-fill);
}
.bar.chord-color-4 {
  --chord-fill: #c7b7ea;
  background: var(--chord-fill);
}
.bar.chord-color-5 {
  --chord-fill: #f7b6d2;
  background: var(--chord-fill);
}
.bar.chord-color-6 {
  --chord-fill: #f6c177;
  background: var(--chord-fill);
}
.bar.chord-color-7 {
  --chord-fill: #a7f3d0;
  background: var(--chord-fill);
}
.bar.chord-color-8 {
  --chord-fill: #b8d8ff;
  background: var(--chord-fill);
}
.bar.chord-color-9 {
  --chord-fill: #f9e79f;
  background: var(--chord-fill);
}
.bar.chord-color-10 {
  --chord-fill: #c8e6c9;
  background: var(--chord-fill);
}
.bar.chord-color-11 {
  --chord-fill: #f3c4a6;
  background: var(--chord-fill);
}
.bar.selected {
  background: var(--chord-fill);
  outline: 3px solid var(--mem-ink);
  outline-offset: 2px;
  box-shadow: 4px 5px 0 rgba(24,49,83,.24);
}
.bar.current {
  background: var(--chord-fill);
  color: var(--mem-ink);
  outline: 4px solid var(--mem-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--mem-paper), 5px 6px 0 var(--mem-ink);
  transform: translateY(-2px);
}
/* The groove already defines feel; this control switches the chord-grid language. */
.chord-display-control {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 7px 9px;
  border: 0;
  border-radius: 12px;
  background: var(--mem-paper);
  color: var(--mem-ink);
  cursor: pointer;
  text-align: left;
}
.chord-display-control span {
  color: var(--mem-secondary);
  font-size: 10px;
  font-weight: 800;
}
.chord-display-control strong {
  color: var(--mem-ink);
  font: 800 14px/1.15 var(--mem-data);
}
.chord-display-control:hover,.chord-display-control[aria-pressed="true"] {
  background: var(--mem-sky);
}
.chord-display-control:active {
  transform: translateY(2px);
}
/* Practice-first navigation: the home screen is an instrument, not a long document. */
.home-intro {
  display: none;
}
[data-screen-section] {
  display: none;
}
body[data-screen="practice"] [data-screen-section~="practice"],
body[data-screen="backings"] [data-screen-section~="backings"],
body[data-screen="library"] [data-screen-section~="library"],
body[data-screen="knowledge"] [data-screen-section~="knowledge"] {
  display: block;
}
body[data-screen="practice"] .player {
  display: grid;
}
body[data-screen="library"] .practice-notes-grid {
  display: grid;
}
.mixer-heading {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mixer-toggle {
  min-height: 38px;
  padding: 7px 11px;
  border: 2px solid var(--mem-ink);
  border-radius: 9px;
  background: var(--mem-paper);
  color: var(--mem-ink);
  font-weight: 850;
  cursor: pointer;
}
.mixer-toggle:hover,
.mixer-toggle[aria-expanded="true"] {
  background: var(--mem-yellow);
}
.mixer-toggle:active {
  transform: translateY(2px);
}
.mixer-panel[hidden] {
  display: none;
}
.mixer-panel {
  animation: mixer-reveal .16s ease-out both;
}
@keyframes mixer-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Phone practice surface: every primary action remains reachable, but no control is allowed to become a billboard. */
@media (max-width: 760px) {
  html,body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .app-shell {
    width: 100%;
    min-width: 0;
    padding: 8px 10px 26px;
    overflow: hidden;
  }
  .topbar {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 45;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 7px 9px;
    flex-wrap: wrap;
  }
  .session-status {
    display: none;
  }
  .topbar-actions {
    display: none;
  }
  .mobile-admin-entry {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 44px;
    padding: 8px 11px;
    white-space: nowrap;
  }
  .arrangement {
    margin: 0;
    padding: 17px 12px 14px;
    border-radius: 15px;
  }
  .arrangement-title {
    padding-bottom: 11px;
  }
  .arrangement-title .eyebrow {
    display: none;
  }
  .arrangement h2 {
    font-size: clamp(24px,8vw,32px);
    line-height: 1;
  }
  #timelineMeta {
    font-size: 10px;
  }
  .edit-arrangement {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 11px;
    box-shadow: 2px 2px 0 rgba(24,49,83,.16);
  }
  .timeline-wrap {
    margin: 14px 0 8px;
  }
  .timeline {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 6px;
  }
  .bar {
    height: 62px;
    padding: 7px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow: 2px 3px 0 rgba(24,49,83,.15);
  }
  .bar-chord {
    margin-top: 7px;
    font-size: clamp(17px,6vw,23px);
    line-height: 1;
  }
  .bar-number {
    font-size: 8px;
  }
  .bar-function {
    display: none;
  }
  .bar.selected {
    outline-width: 2px;
    outline-offset: 1px;
  }
  .bar.current {
    outline-width: 3px;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--mem-paper), 3px 4px 0 var(--mem-ink);
  }
  .timeline-help {
    display: none;
  }
  .mixer-heading {
    margin-top: 15px;
    padding: 8px;
    border: 2px solid var(--mem-ink);
    border-radius: 10px;
  }
  .mixer-heading > span {
    font-size: 10px;
  }
  .mixer-toggle {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .mixer-panel {
    margin-top: 8px;
    overflow-x: auto;
  }
  .mixer {
    min-width: 680px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mixer-panel {
    animation: none;
  }
}
/* Every surface begins after the same clear window gap. This keeps the header
   shadow from touching the first active window, regardless of the active page. */
:root {
  --mem-window-gap: 22px;
}
.app-shell > .topbar {
  margin-bottom: var(--mem-window-gap);
}
.app-shell > :is(.player,.arrangement,.journey,.backing-library,.learning-library,.practice-notes-grid) {
  margin: 0 0 var(--mem-window-gap);
}
.admin-arrangement-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  padding: 13px 0;
  border-top: 2px solid var(--mem-ink);
  border-bottom: 2px solid var(--mem-ink);
}
.admin-arrangement-launch div,
.admin-arrangement-launch strong,
.admin-arrangement-launch span {
  display: block;
}
.admin-arrangement-launch div {
  min-width: 0;
}
.admin-arrangement-launch strong {
  color: var(--mem-ink);
  font-size: 13px;
}
.admin-arrangement-launch span {
  max-width: 62ch;
  margin-top: 4px;
  color: var(--mem-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.admin-arrangement-launch button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 2px solid var(--mem-ink);
  border-radius: 7px;
  background: var(--mem-yellow);
  color: var(--mem-ink);
  font-size: 11px;
  font-weight: 850;
}
.admin-arrangement-launch button:hover {
  background: var(--mem-sky);
}
.admin-arrangement-launch button:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 3px;
}
.admin-arrangement-launch button:active {
  transform: translateY(2px);
}
.admin-asset-actions {
  display: grid;
  gap: 6px;
}
.admin-asset-actions button {
  min-width: 92px;
}
.admin-asset-actions button:first-child {
  border-color: var(--mem-ink);
  background: var(--mem-mint);
  font-weight: 800;
}
.admin-asset-actions button:first-child:hover {
  background: var(--mem-yellow);
}
.admin-asset-actions .admin-asset-delete {
  border-color: var(--mem-ink);
  background: var(--mem-cream);
  color: var(--mem-coral-ink, #8e302c);
  font-weight: 800;
}
.admin-asset-actions .admin-asset-delete:hover,
.admin-asset-actions .admin-asset-delete.confirming {
  background: var(--mem-coral);
  color: var(--mem-ink);
}
.admin-asset-actions button:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 2px;
}
.backing-composer-message,
.admin-asset-message {
  display: block;
  min-height: 1.5em;
  margin: 10px 0;
  color: var(--mem-secondary);
  font-size: 11px;
  font-weight: 750;
}
.admin-submit[aria-busy="true"] {
  cursor: wait;
  opacity: .72;
}
@media (max-width: 700px) {
  .admin-arrangement-launch {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .admin-arrangement-launch button {
    width: 100%;
  }
  .admin-asset-actions {
    grid-template-columns: 1fr 1fr;
  }
  .admin-asset-actions button {
    width: 100%;
  }
}
/* Human-audio playback stays light on H5: one default mix, one shared musical
   timeline. Loop controls change the playback plan, never load extra stems. */
.human-loop-popover[hidden] {
  display: none;
}
.human-loop-popover > strong,.human-loop-popover > span {
  display: block;
}
.human-loop-popover > strong {
  font-size: 13px;
}
.human-loop-popover > span {
  margin-top: 4px;
  color: var(--mem-secondary);
  font-size: 10px;
  line-height: 1.45;
}
.loop-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
.loop-stepper button {
  min-height: 44px;
  border: 2px solid var(--mem-ink);
  border-radius: 8px;
  background: var(--mem-yellow);
  color: var(--mem-ink);
  font-size: 20px;
  font-weight: 900;
}
.loop-stepper button:hover {
  background: var(--mem-sky);
}
.loop-stepper button:active {
  transform: translateY(2px);
}
.loop-stepper button:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 2px;
}
.loop-stepper output {
  color: var(--mem-ink);
  font: 900 15px/1 var(--mem-data);
  text-align: center;
}
.human-audio-capability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 2px solid var(--mem-ink);
  border-radius: 12px;
  background: var(--mem-mint);
  color: var(--mem-ink);
}
.human-audio-capability[hidden] {
  display: none;
}
.human-audio-capability div,.human-audio-capability strong,.human-audio-capability div span {
  display: block;
}
.human-audio-capability strong {
  font-size: 13px;
}
.human-audio-capability div span {
  max-width: 66ch;
  margin-top: 4px;
  color: #243f61;
  font-size: 10px;
  line-height: 1.5;
}
.app-experience-badge,.audio-only-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 2px solid var(--mem-ink);
  border-radius: 999px;
  background: var(--mem-yellow);
  color: var(--mem-ink);
  font: 850 9px/1 var(--mem-data);
  white-space: nowrap;
}
.admin-audio-scope {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 2px solid var(--mem-ink);
  border-radius: 9px;
  background: var(--mem-mint);
}
.admin-audio-scope strong {
  flex: 0 0 auto;
  color: var(--mem-ink);
  font-size: 11px;
}
.admin-audio-scope span {
  color: #243f61;
  font-size: 10px;
  line-height: 1.5;
}
.audio-structure-editor {
  margin-top: 16px;
  padding: 16px;
  border: 2px solid var(--mem-ink);
  border-radius: 12px;
  background: var(--mem-cream);
}
.audio-structure-editor[hidden],.variable-loop-field[hidden] {
  display: none;
}
.audio-structure-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(24,49,83,.34);
}
.audio-structure-head div,.audio-structure-head strong,.audio-structure-head div span {
  display: block;
}
.audio-structure-head strong {
  color: var(--mem-ink);
  font-size: 14px;
}
.audio-structure-head div span {
  max-width: 66ch;
  margin-top: 4px;
  color: var(--mem-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.audio-structure-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.audio-structure-fields label {
  min-width: 0;
  color: var(--mem-secondary);
  font-size: 10px;
  font-weight: 750;
}
.audio-structure-fields input,.audio-structure-fields select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin-top: 5px;
  padding: 8px 9px;
  border: 2px solid var(--mem-ink);
  border-radius: 7px;
  background: var(--mem-paper);
  color: var(--mem-ink);
  font: 750 11px/1.2 var(--mem-body);
}
.audio-structure-fields input:focus-visible,.audio-structure-fields select:focus-visible {
  outline: 3px solid var(--mem-coral);
  outline-offset: 2px;
}
.audio-structure-summary {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px dashed rgba(24,49,83,.42);
  color: #243f61;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}
.bar.section-intro .bar-function {
  color: #7d2b25;
}
.bar.section-loop .bar-function {
  color: #174a68;
}
.bar.section-ending .bar-function {
  color: #24543e;
}
@media (max-width: 700px) {
  .human-audio-capability {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .admin-audio-scope {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .audio-structure-fields {
    grid-template-columns: 1fr;
  }
}
/* 2026-09: practice/library visual alignment and responsive interaction pass. */
.loop-jump-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(24,49,83,.24);
}
.loop-jump-list:empty {
  display:none;
}
.loop-jump-list button {
  min-height:36px;
  padding:6px 10px;
  border:2px solid var(--mem-ink);
  border-radius:7px;
  background:var(--mem-paper);
  color:var(--mem-ink);
  font-weight:800;
}
.loop-jump-list button.active {
  background:var(--mem-ink);
  color:var(--mem-yellow);
}
.timeline.intro-layout {
  display:block;
  min-width:0;
}
.timeline-phase + .timeline-phase {
  margin-top:14px;
  padding-top:12px;
  border-top:2px dashed var(--mem-ink);
}
.timeline-phase h3 {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 7px;
  color:var(--mem-ink);
  font:900 17px/1 var(--mem-display);
  letter-spacing:.04em;
}
.timeline-phase h3 small {
  padding:4px 7px;
  border:1px solid var(--mem-ink);
  border-radius:999px;
  background:var(--mem-yellow);
  font:800 9px/1 var(--mem-body);
  letter-spacing:0;
}
.timeline-phase-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.timeline-phase-grid .bar {
  width:auto;
  min-width:0;
}
.bar.preview {
  opacity:.76;
  background:var(--mem-paper);
}
.bar.preview:hover {
  opacity:1;
}
.admin-shell.editing-backing .admin-security-note,
.admin-shell.editing-backing .admin-tabs,
.admin-shell.editing-backing .backing-list-head {
  display:none;
}
.admin-shell.editing-backing .admin-head {
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:3px solid var(--mem-ink);
}
.admin-shell.editing-backing [data-admin-pane="backing"] {
  display:block;
}
.admin-shell.editing-backing .backing-composer {
  margin:0;
}
.chord-quick-row {
  margin:10px 0 14px;
  padding:11px;
  border:2px solid var(--mem-ink);
  border-radius:9px;
  background:var(--mem-yellow);
}
.chord-quick-row .chord-examples {
  margin:0 0 10px;
}
.chord-quick-row .progression-presets {
  grid-template-columns:auto minmax(160px,1fr) repeat(2,auto);
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.chord-clipboard-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin:9px 0;
}
.chord-clipboard-toolbar span {
  margin-right:auto;
  color:var(--mem-secondary);
  font-size:10px;
  font-weight:800;
}
.chord-clipboard-toolbar button,.progression-preset-edit-strip button {
  min-height:38px;
  padding:7px 11px;
  border:2px solid var(--mem-ink);
  border-radius:6px;
  background:var(--mem-paper);
  color:var(--mem-ink);
  font-weight:800;
}
.chord-clipboard-toolbar button:disabled {
  opacity:.4;
}
.chord-clipboard-toolbar #saveCurrentSectionAsPreset {
  background:var(--mem-mint);
}
.progression-preset-edit-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:10px;
  margin:0 0 14px;
  padding:13px;
  border:3px solid var(--mem-ink);
  border-radius:10px;
  background:var(--mem-mint);
}
.progression-preset-edit-strip[hidden] {
  display:none;
}
.progression-preset-edit-copy strong,
.progression-preset-edit-copy small {
  display:block;
}
.progression-preset-edit-copy strong {
  font:900 17px/1.1 var(--mem-display);
}
.progression-preset-edit-copy small {
  margin-top:5px;
  color:var(--mem-secondary);
  font-size:10px;
  font-weight:750;
}
.progression-preset-edit-strip label {
  color:var(--mem-secondary);
  font-size:10px;
  font-weight:800;
}
.progression-preset-edit-strip label > small {
  display:block;
  min-height:2.5em;
  margin-top:5px;
  color:var(--mem-secondary);
  font-size:9px;
  line-height:1.25;
}
.progression-preset-edit-strip input,
.progression-preset-edit-strip select {
  box-sizing:border-box;
  width:100%;
  min-height:40px;
  margin-top:4px;
  padding:7px 9px;
  border:2px solid var(--mem-ink);
  border-radius:6px;
  background:var(--mem-paper);
  color:var(--mem-ink);
}
.progression-preset-edit-strip #progressionPresetSaveTarget {
  background:var(--mem-yellow);
  font-weight:850;
}
.progression-preset-edit-strip .danger-action {
  background:var(--mem-coral);
}
.progression-preset-edit-strip .save-preset-action {
  min-width:118px;
  background:var(--mem-ink);
  color:var(--mem-yellow);
}
.progression-preset-edit-actions {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  padding-top:2px;
}
.progression-preset-edit-actions button {
  flex:0 1 auto;
  min-width:132px;
  white-space:nowrap;
}
.editor-confirm-layer {
  position:fixed;
  z-index:120;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(24,49,83,.64);
  backdrop-filter:blur(4px);
}
.editor-confirm-layer[hidden] {
  display:none;
}
.editor-confirm-card {
  box-sizing:border-box;
  width:min(520px,100%);
  padding:24px;
  border:4px solid var(--mem-ink);
  border-radius:16px;
  background:var(--mem-paper);
  color:var(--mem-ink);
  box-shadow:0 24px 60px rgba(12,28,50,.34);
}
.editor-confirm-card h3 {
  margin:0;
  font:900 clamp(25px,4vw,36px)/1 var(--mem-display);
}
.editor-confirm-card p {
  margin:14px 0 22px;
  color:var(--mem-secondary);
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}
.editor-confirm-card > div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.editor-confirm-card button {
  min-height:48px;
  border:3px solid var(--mem-ink);
  border-radius:9px;
  background:var(--mem-paper);
  color:var(--mem-ink);
  font-size:15px;
  font-weight:900;
}
.editor-confirm-card #confirmProgressionPresetOverwrite {
  background:var(--mem-coral);
}
.editor-form.editing-progression-preset .editor-fields,
.editor-form.editing-progression-preset #editorNotice,
.editor-form.editing-progression-preset .editor-footer,
.editor-form.editing-progression-preset .progression-presets {
  display:none;
}
.editor-form.editing-progression-preset .editor-head {
  margin:-25px -25px 22px;
  padding:20px 25px 18px;
  border-bottom:4px solid var(--mem-ink);
  background:var(--mem-mint);
}
.editor-form.editing-progression-preset .editor-head h2 {
  color:var(--mem-ink);
  font-family:var(--mem-display);
  font-weight:900;
}
.editor-form.editing-progression-preset .chord-quick-row {
  padding-bottom:11px;
}
.editor-form.editing-progression-preset .chord-quick-row .chord-examples {
  margin-bottom:0;
}
@media (max-width:1100px) {
  .progression-preset-edit-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .progression-preset-edit-copy {
    grid-column:1 / -1;
  }
}
@media (max-width:700px) {
  .chord-quick-row .progression-presets {
    grid-template-columns:1fr auto;
  }
  .chord-quick-row .progression-presets label,.chord-quick-row .progression-presets small {
    grid-column:1 / -1;
  }
  .progression-preset-edit-strip {
    grid-template-columns:1fr;
  }
  .editor-form.editing-progression-preset .editor-head {
    margin:-18px -18px 18px;
    padding:18px;
  }
  .progression-preset-edit-copy {
    grid-column:1 / -1;
  }
  .progression-preset-edit-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .progression-preset-edit-actions button {
    width:100%;
    min-width:0;
  }
  .progression-preset-edit-actions .save-preset-action {
    grid-column:1 / -1;
  }
}
/* One playhead treatment for Intro, every Loop and Ending. The musical color
   remains unchanged; only a soft outer halo marks the current bar. */
.bar.section-intro,
.bar.section-loop,
.bar.section-ending {
  background:var(--chord-fill,var(--mem-paper));
  color:var(--mem-ink);
}
.bar.section-intro .bar-number,
.bar.section-intro .bar-chord,
.bar.section-intro .bar-function,
.bar.section-loop .bar-number,
.bar.section-loop .bar-chord,
.bar.section-loop .bar-function,
.bar.section-ending .bar-number,
.bar.section-ending .bar-chord,
.bar.section-ending .bar-function {
  color:var(--mem-ink);
}
.bar.current {
  z-index:2;
  background:var(--chord-fill,var(--mem-paper));
  color:var(--mem-ink);
  border-color:var(--mem-ink) !important;
  border-top-color:var(--mem-ink) !important;
  outline:0 !important;
  box-shadow:
    3px 4px 0 rgba(24,49,83,.14),
    0 0 0 3px rgba(255,107,92,.82),
    0 0 15px 7px rgba(255,107,92,.36),
    0 0 29px 13px rgba(255,107,92,.16);
  transform:none;
}
.bar.current:hover {
  background:var(--chord-fill,var(--mem-paper));
  transform:none;
}
.bar.current::before,.bar.current::after {
  content:none !important;
}
.timeline:not(.intro-layout),.timeline-phase-grid {
  padding:10px 9px 16px;
}
@media (prefers-reduced-motion:no-preference) {
  .bar.current {
    animation:chord-playhead-halo 1.1s ease-in-out infinite alternate;
  }
}
@keyframes chord-playhead-halo {
  to {
    box-shadow:
      3px 4px 0 rgba(24,49,83,.14),
      0 0 0 3px rgba(255,107,92,.92),
      0 0 19px 9px rgba(255,107,92,.46),
      0 0 35px 16px rgba(255,107,92,.2);
  }
}
/* Flat control decoration. Component geometry lives in player.css. */
.loop-stepper button,
.groove-picker-toolbar button {
  box-shadow:none !important;
  transform:none !important;
}
.human-speed-readout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.human-speed-readout span {
  color:var(--mem-ink);
  font-size:10px;
  font-weight:800;
}
.human-speed-readout output {
  color:var(--mem-ink);
  font:900 15px/1 var(--mem-data);
}
.human-speed-presets input[type="range"] {
  width:100%;
  margin:13px 0 8px;
  accent-color:var(--mem-ink);
}
.speed-scale {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
}
.speed-scale span {
  color:var(--mem-ink);
  font:800 9px/1 var(--mem-data);
  text-align:center;
}
.timeline-help {
  display:none !important;
}
.human-audio-capability {
  justify-content:flex-start;
  min-height:0;
  margin-top:12px;
  padding:9px 11px;
  border:2px solid var(--mem-ink);
  border-radius:10px;
  box-shadow:none;
}
.human-audio-capability strong {
  font-size:11px;
}
.mixer-heading,
.mixer-panel {
  display:none !important;
}
.bar.selected {
  outline:0 !important;
}
.bar.current,
.bar.current:hover {
  border:3px solid var(--mem-ink) !important;
  background:var(--chord-fill,var(--mem-paper));
  color:var(--mem-ink);
}
@media (prefers-reduced-motion:no-preference) {
  .bar.current {
    animation:none;
  }
  .player.playing ~ .arrangement .bar.current {
    animation:chord-playhead-halo 1.1s ease-in-out infinite alternate;
  }
}