:root {
  color-scheme: dark;
  --bg: #050a14;
  --bg-deep: #02050c;
  --panel: rgba(10, 13, 27, 0.94);
  --panel-2: #0f1527;
  --panel-3: #0b1020;
  --border: #25325a;
  --border-soft: #1a2440;
  --text: #eef1fa;
  --muted: #9aa6c4;
  --sea: #b4c3ea;
  --sea-deep: #3b5bb5;
  --moon: #8fb3ff;
  --moon-bright: #c9d8ff;
  --parchment: #cbd5f0;
  --root: #c9d8ff;
  --scale: #dde3f4;
  --string: #8e9bbf;
  --fret: #354468;
  --cell: #070b16;
  --danger: #f08f69;
}

* { box-sizing: border-box; }

html { background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(143, 179, 255, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 7%, rgba(238, 241, 250, 0.10) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 23%, rgba(180, 195, 234, 0.09) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 33%, rgba(238, 241, 250, 0.08) 0 1px, transparent 1.4px),
    linear-gradient(180deg, #070c19 0%, #050a14 55%, #03060e 100%);
  background-size: 180px 180px, 260px 260px, 220px 220px, 300px 300px, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 18vh;
  pointer-events: none;
  opacity: 0.24;
  background:
    radial-gradient(80% 60% at 18% 100%, rgba(44, 69, 144, 0.32), transparent 58%),
    radial-gradient(70% 70% at 74% 100%, rgba(44, 69, 144, 0.24), transparent 60%);
}

button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 64px;
  position: relative;
  z-index: 1;
}

.hero {
  padding: 18px 4px 16px;
}

.brand-lockup {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.compass-mark {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 179, 255, 0.48);
  border-radius: 50%;
  color: var(--moon-bright);
  font-size: 2.25rem;
  background: radial-gradient(circle, rgba(143, 179, 255, 0.10), rgba(9, 13, 26, 0.78) 66%);
  box-shadow: inset 0 0 0 5px rgba(143, 179, 255, 0.04), 0 10px 28px rgba(0,0,0,0.25);
}

.hero h1,
.panel h2 { margin: 0; }

.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.7vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: 0.065em;
  color: #f2f4fc;
  text-shadow: 0 2px 20px rgba(143, 179, 255, 0.10);
}

.brand-tagline {
  margin: 7px 0 0;
  color: var(--moon-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.03em;
}

.subtitle {
  max-width: 860px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.01rem;
  line-height: 1.6;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--sea);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel {
  margin-top: 18px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(15, 21, 39, 0.80), rgba(8, 11, 24, 0.94)),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.02);
}

.controls-panel {
  position: sticky;
  top: 10px;
  z-index: 20;
  backdrop-filter: blur(14px);
  border-color: rgba(180, 195, 234, 0.25);
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

label {
  display: grid;
  gap: 7px;
}

label > span,
.quick-action-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

select,
.secondary-button,
.primary-button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 12px;
}

select {
  background: var(--panel-2);
}

select:focus,
button:focus-visible,
.note-chip:focus-visible {
  outline: 2px solid var(--moon-bright);
  outline-offset: 2px;
}

.quick-actions {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.quick-action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.guide-actions { justify-content: flex-end; }

.secondary-button,
.primary-button,
.text-button {
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.secondary-button {
  background: #0b1020;
}

.primary-button {
  background: linear-gradient(180deg, #9dbdff, #4d76d9);
  color: #101322;
  border-color: #d5e0ff;
}

.secondary-button:hover,
.primary-button:hover,
.string-control button:hover,
.note-chip:hover {
  border-color: var(--moon-bright);
}

.secondary-button:active,
.primary-button:active,
.string-control button:active,
.note-chip:active { transform: translateY(1px); }

.text-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--sea);
  border: 1px solid var(--border);
  background: transparent;
}

.text-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.text-button.active-toggle {
  color: #07131e;
  background: var(--moon-bright);
  border-color: var(--moon-bright);
}

.note-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.pattern-guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.pattern-guide-copy strong {
  display: block;
  color: var(--parchment);
  font-size: 0.9rem;
}

.pattern-guide-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pattern-guide-actions .guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.help-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.tuning-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.string-control {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(15, 21, 39, 0.78);
  border: 1px solid var(--border);
}

.string-control button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #07131e;
  color: var(--text);
  cursor: pointer;
  font-size: 1.2rem;
}

.string-pitch {
  text-align: center;
  min-width: 0;
}

.string-pitch strong {
  display: block;
  font-size: 1.08rem;
  color: var(--parchment);
}

.string-pitch small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.scale-summary-heading {
  align-items: center;
  margin-bottom: 10px;
}

.scale-meta {
  margin: 0 0 16px;
  padding: 11px 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.88rem;
  background: rgba(3, 12, 19, 0.22);
}

.scale-meta strong { color: var(--text); }

.equivalence-meta {
  border-left-color: var(--moon);
  background: rgba(143, 179, 255, 0.06);
  border-radius: 0 10px 10px 0;
}

.equivalence-meta span {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
}

.scale-notes-block {
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(4, 14, 22, 0.40);
}

.scale-notes-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.scale-notes-heading strong {
  display: block;
  color: var(--parchment);
}

.scale-notes-heading span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.scale-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-chip {
  appearance: none;
  min-width: 46px;
  min-height: 39px;
  padding: 7px 10px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.note-chip.root-chip {
  border-color: rgba(201, 216, 255, 0.72);
  color: var(--root);
}

.note-chip.selected-chip {
  background: var(--note-color);
  border-color: rgba(255,255,255,0.72);
  color: var(--note-ink, #07131e);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 18px color-mix(in srgb, var(--note-color) 52%, transparent);
}

.note-chip.selected-chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--note-ink, #07131e);
  opacity: 0.6;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 15px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.root-dot { background: var(--root); }
.scale-dot { background: var(--scale); }
.selected-dot { background: conic-gradient(#e07a5f, #bcd0ff, #9ccc65, #6fd1c6, #7fb3e6, #b39ddb, #e39cc0, #e07a5f); }
.open-dot { background: transparent; border-color: var(--sea); }

.fretboard-scroll {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-color: var(--moon) #07131e;
}

.fretboard {
  --fretted-count: 24;
  display: grid;
  grid-template-columns: 90px 68px repeat(var(--fretted-count), minmax(52px, 1fr));
  min-width: 1420px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #07111a;
  box-shadow: inset 0 0 28px rgba(0,0,0,0.28);
}

.fret-header,
.string-label,
.fret-cell { min-height: 55px; }

.fret-header {
  display: grid;
  place-items: center;
  color: #97a3c2;
  background: #0a0e1c;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--fret);
  font-size: 0.76rem;
  font-weight: 800;
}

.fret-header.corner {
  position: sticky;
  left: 0;
  z-index: 4;
  color: var(--muted);
}

.fret-header.landmark {
  color: var(--moon-bright);
  background: linear-gradient(180deg, rgba(143, 179, 255, 0.14), rgba(9, 12, 25, 0.98));
  font-size: 0.88rem;
  font-weight: 950;
  box-shadow: inset 0 -2px 0 rgba(143, 179, 255, 0.35);
}

.fret-header.open-header {
  position: relative;
  color: var(--sea);
  background: linear-gradient(180deg, rgba(180, 195, 234, 0.13), rgba(8, 11, 22, 0.98));
  border-right: 6px solid var(--parchment);
  font-size: 0.7rem;
  letter-spacing: 0.055em;
}

.fret-header.open-header::after {
  content: "NUT";
  position: absolute;
  right: -5px;
  bottom: 3px;
  transform: translateX(100%);
  padding-left: 5px;
  color: var(--parchment);
  font-size: 0.54rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.string-label {
  position: sticky;
  left: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  padding: 0 12px;
  background: #0b0f1f;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid #19233f;
}

.string-label strong { font-size: 0.88rem; }

.string-label small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
}

.fret-cell {
  position: relative;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--fret);
  border-bottom: 1px solid #19233f;
  background:
    linear-gradient(
      to bottom,
      transparent calc(50% - 1px),
      var(--string) calc(50% - 1px),
      var(--string) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    var(--cell);
}

.fret-cell.open-cell {
  background:
    linear-gradient(
      to bottom,
      transparent calc(50% - 1px),
      var(--string) calc(50% - 1px),
      var(--string) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(180deg, rgba(180, 195, 234, 0.10), rgba(5, 16, 24, 0.96));
  border-right: 6px solid var(--parchment);
  box-shadow: inset 2px 0 0 rgba(180, 195, 234, 0.52);
}

.fret-cell.marker-fret::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 5px;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 0 2px rgba(143, 179, 255, 0.10), 0 0 10px rgba(143, 179, 255, 0.24);
  opacity: 0.82;
}

.fret-cell.double-marker::before,
.fret-cell.double-marker::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  bottom: 5px;
  border-radius: 50%;
  background: var(--moon-bright);
  box-shadow: 0 0 8px rgba(143, 179, 255, 0.32);
  opacity: 0.92;
}

.fret-cell.double-marker::before { left: calc(50% - 11px); }
.fret-cell.double-marker::after { right: calc(50% - 11px); }

.tone {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 35px;
  min-height: 35px;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--scale);
  color: #061016;
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.38);
}

.tone.root { background: var(--root); }

.tone.selected-note {
  background: var(--note-color);
  color: var(--note-ink, #07131e);
  transform: scale(1.13);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 0 18px var(--note-color);
}

.tone.both {
  border-radius: 10px;
  min-width: 42px;
}

.tone .interval-mini {
  display: block;
  margin-top: 1px;
  font-size: 0.61rem;
  opacity: 0.72;
}

.notes-panel p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .control-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-actions { flex-direction: column; }
  .guide-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .app-shell {
    width: min(100% - 16px, 1540px);
    padding-top: 16px;
  }

  .brand-lockup { gap: 12px; }
  .compass-mark { width: 52px; height: 52px; font-size: 1.7rem; }
  .panel { padding: 16px; border-radius: 13px; }
  .controls-panel { position: static; }
  .control-grid { grid-template-columns: 1fr 1fr; }
  .section-heading,
  .scale-summary-heading,
  .scale-notes-heading { align-items: flex-start; flex-direction: column; }
  .note-action-buttons { justify-content: flex-start; }
  .quick-action-group { align-items: stretch; }
  .quick-action-label { width: 100%; }

  .pattern-guide-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .pattern-guide-actions .guide-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .control-grid { grid-template-columns: 1fr; }
  .brand-lockup { display: block; }
  .compass-mark { margin-bottom: 14px; }
}


/* =========================================================
   STARBOARD v0.8 — Celestial navigation / open-water theme
   Decorative only: music and fretboard logic are unchanged.
   ========================================================= */

:root {
  --ocean-black: #02040a;
  --ocean-midnight: #04131d;
  --ocean-blue: #0e1428;
  --chart-line: rgba(143, 179, 255, 0.055);
  --moon-dark: #2c4590;
  --wood-deep: #0d1226;
  --wood-mid: #161d36;
}

/* Celestial navigation field. */
body {
  background:
    radial-gradient(circle at 11% 8%, rgba(201, 216, 255, .55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 16%, rgba(238, 241, 250, .38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 5%, rgba(214, 222, 245, .34) 0 1px, transparent 1.7px),
    radial-gradient(circle at 67% 13%, rgba(238, 241, 250, .46) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 6%, rgba(201, 216, 255, .42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 94% 22%, rgba(214, 222, 245, .30) 0 1px, transparent 1.5px),
    linear-gradient(180deg, #070b18 0%, #060a16 46%, #03060e 73%, #02040a 100%);
  background-size:
    235px 235px,
    310px 310px,
    275px 275px,
    345px 345px,
    390px 390px,
    285px 285px,
    auto;
}

/* Navigator plotting grid. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(var(--chart-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.18) 58%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.18) 58%, transparent 88%);
}

/* Open-water glow along the bottom. */
body::after {
  height: 25vh;
  opacity: .58;
  background:
    radial-gradient(85% 75% at 14% 110%, rgba(32, 139, 151, .34), transparent 61%),
    radial-gradient(80% 80% at 68% 110%, rgba(24, 102, 128, .34), transparent 62%),
    repeating-radial-gradient(ellipse at 50% 120%, transparent 0 18px, rgba(160, 185, 232, .08) 19px 21px, transparent 22px 39px);
}

/* Shipboard celestial-chart masthead. */
.hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
  padding: 28px 24px 24px;
  border: 1px solid rgba(143, 179, 255, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 22%, rgba(201, 216, 255, .13), transparent 15rem),
    linear-gradient(135deg, rgba(10, 15, 32, .76), rgba(4, 7, 16, .90));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 70px rgba(0,0,0,.18),
    0 18px 52px rgba(0,0,0,.22);
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 255, .34) 12%, rgba(143, 179, 255, .34) 88%, transparent);
}

.hero::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 120px;
  right: -80px;
  bottom: -83px;
  border: 1px solid rgba(180, 195, 234, .20);
  border-radius: 50%;
  box-shadow:
    0 -16px 0 -15px rgba(180, 195, 234, .16),
    0 -34px 0 -33px rgba(180, 195, 234, .11);
  transform: rotate(-4deg);
  pointer-events: none;
}

/* Proper compass rose. */
.compass-mark {
  position: relative;
  width: 88px;
  height: 88px;
  overflow: visible;
  border: 2px solid rgba(143, 179, 255, .62);
  background:
    radial-gradient(circle at center, rgba(201, 216, 255, .12) 0 24%, transparent 25%),
    repeating-conic-gradient(from 22.5deg, rgba(143, 179, 255, .12) 0 1deg, transparent 1deg 45deg),
    radial-gradient(circle, rgba(12, 42, 56, .92), rgba(4, 16, 25, .96));
  box-shadow:
    inset 0 0 0 5px rgba(143, 179, 255, .045),
    inset 0 0 0 7px rgba(143, 179, 255, .20),
    0 10px 28px rgba(0,0,0,.28);
}

.compass-mark::before,
.compass-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(143, 179, 255, .50);
  transform: translate(-50%, -50%);
}

.compass-mark::before { width: 1px; height: 66px; }
.compass-mark::after  { width: 66px; height: 1px; }

.compass-star {
  position: relative;
  z-index: 2;
  color: var(--moon-bright);
  font-size: 2.45rem;
  line-height: 1;
  text-shadow: 0 0 14px rgba(201, 216, 255, .24);
}

.compass-point {
  position: absolute;
  z-index: 3;
  color: var(--parchment);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .03em;
  opacity: .88;
}

.compass-point.north { top: 5px; left: 50%; transform: translateX(-50%); color: var(--moon-bright); }
.compass-point.south { bottom: 5px; left: 50%; transform: translateX(-50%); }
.compass-point.east  { right: 7px; top: 50%; transform: translateY(-50%); }
.compass-point.west  { left: 7px; top: 50%; transform: translateY(-50%); }

.nautical-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(330px, 100%);
  margin-top: 9px;
  color: rgba(201, 216, 255, .78);
  font-size: .72rem;
}

.nautical-rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 255, .60), transparent);
}

/* Plotting-table cards with light-edged corner details. */
.panel {
  position: relative;
  background:
    linear-gradient(rgba(143, 179, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 21, 39, .84), rgba(7, 11, 24, .96));
  background-size: 28px 28px, 28px 28px, auto;
  border-color: rgba(90, 130, 220, .40);
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.panel::before {
  top: 8px;
  left: 8px;
  border-top: 1px solid rgba(143, 179, 255, .54);
  border-left: 1px solid rgba(143, 179, 255, .54);
}

.panel::after {
  right: 8px;
  bottom: 8px;
  border-right: 1px solid rgba(143, 179, 255, .54);
  border-bottom: 1px solid rgba(143, 179, 255, .54);
}

.controls-panel {
  border-color: rgba(143, 179, 255, .25);
}

/* Brass-trimmed shipboard controls. */
select,
.secondary-button,
.primary-button,
.string-control {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

select {
  border-color: rgba(70, 110, 200, .62);
  background:
    linear-gradient(180deg, rgba(28, 30, 52, .98), rgba(12, 15, 30, .98));
}

.secondary-button {
  border-color: rgba(143, 179, 255, .26);
  background:
    linear-gradient(180deg, rgba(14, 20, 42, .48), rgba(13, 15, 27, .98));
}

.reset-button {
  color: var(--moon-bright);
  border-color: rgba(143, 179, 255, .58);
}

.primary-button {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 5px 16px rgba(0,0,0,.16);
}

.string-control {
  background:
    linear-gradient(100deg, rgba(18, 25, 48, .22), transparent 32%),
    linear-gradient(180deg, rgba(15, 21, 39, .88), rgba(10, 13, 27, .94));
  border-color: rgba(70, 110, 200, .48);
}

/* Frame the fretboard as the navigator's working chart. */
.fretboard-scroll {
  position: relative;
  padding: 8px 0 11px;
}

.fretboard-scroll::before {
  content: "CELESTIAL FRETBOARD CHART";
  display: block;
  margin: 0 0 7px 2px;
  color: rgba(184, 199, 235, .55);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.fretboard {
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    0 0 0 1px rgba(143, 179, 255, .10);
}

.fret-header.open-header,
.fret-cell.open-cell {
  border-right-color: var(--moon-bright);
}

/* Chart-table export strip. */
.pattern-guide-actions {
  padding: 15px 14px 0;
  border-top: 1px solid rgba(143, 179, 255, .22);
  background: linear-gradient(90deg, rgba(22, 29, 54,.12), transparent 42%);
}

.notes-panel {
  background:
    linear-gradient(135deg, rgba(143, 179, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(15, 21, 39, .80), rgba(8, 11, 24, .95));
}

@media (max-width: 700px) {
  .hero {
    padding: 20px 15px;
  }

  .compass-mark {
    width: 68px;
    height: 68px;
  }

  .compass-mark::before { height: 50px; }
  .compass-mark::after { width: 50px; }

  .compass-star { font-size: 2rem; }
}


/* =========================================================
   STARBOARD v0.9 — Dropdown readability fix
   ========================================================= */

select {
  color: #e6eaf7;
  background-color: #090b0e;
  color-scheme: dark;
}

select option,
select optgroup {
  color: #e6eaf7;
  background: #090b0e;
}

select option:checked {
  color: #ffffff;
  background: #1c1f2b;
}


/* =========================================================
   STARBOARD v1.0 — OS-independent custom dropdowns
   Native <select> menus have been removed from the main UI.
   Starboard now owns the menu background, text, hover and
   selected-state colors on macOS, Windows and Linux.
   ========================================================= */

.custom-select-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.control-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.star-select {
  position: relative;
  min-width: 0;
}

.star-select-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 13px;
  border: 1px solid rgba(70, 110, 200, .72);
  border-radius: 11px;
  background:
    linear-gradient(180deg, #151a2e 0%, #0a0f1e 100%);
  color: #e6eaf7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 4px 12px rgba(0,0,0,.08);
  cursor: pointer;
  text-align: left;
}

.star-select-trigger:hover {
  border-color: rgba(143, 179, 255, .58);
  background:
    linear-gradient(180deg, #171c30 0%, #0c1122 100%);
}

.star-select-trigger:focus-visible {
  outline: 2px solid var(--moon-bright);
  outline-offset: 2px;
}

.star-select.open .star-select-trigger {
  border-color: var(--moon);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(143, 179, 255, .14),
    0 7px 20px rgba(0,0,0,.22);
}

.star-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 720;
}

.star-select-chevron {
  flex: 0 0 auto;
  color: var(--moon-bright);
  font-size: 0.9rem;
  transition: transform .15s ease;
}

.star-select.open .star-select-chevron {
  transform: rotate(180deg);
}

.star-select-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 220px);
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid rgba(143, 179, 255, .48);
  border-radius: 11px;
  background: #07090c;
  color: #e6eaf7;
  box-shadow:
    0 18px 42px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.035);
  scrollbar-color: #2a3f80 #0b0d14;
  scrollbar-width: thin;
}

.star-select-menu[hidden] {
  display: none;
}

.star-select-group-label {
  padding: 9px 10px 5px;
  color: #7ea3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid rgba(143, 179, 255, .14);
}

.star-select-group-label:first-child {
  border-top: 0;
  padding-top: 5px;
}

.star-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 37px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #dae1f3;
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
}

.star-select-option:hover,
.star-select-option.active-descendant {
  background: #171a26;
  color: #ffffff;
}

.star-select-option[aria-selected="true"] {
  background: #1b302f;
  color: #f4f7ff;
  box-shadow: inset 3px 0 0 var(--moon-bright);
}

.star-select-option[aria-selected="true"]::before {
  content: "✦";
  color: var(--moon-bright);
  font-size: .72rem;
  flex: 0 0 auto;
}

.star-select-option:not([aria-selected="true"])::before {
  content: "";
  width: .72rem;
  flex: 0 0 .72rem;
}

.star-select-option:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: -2px;
}

/* Scale/Mode needs more room for long names. */
#scaleSelect .star-select-menu {
  width: max(100%, 330px);
  max-height: 430px;
}

/* Root and note spelling can stay compact. */
#rootSelect .star-select-menu,
#spellingSelect .star-select-menu {
  width: 100%;
  min-width: 0;
}

/* Completely suppress native select styling if a browser extension
   or future fallback adds a select element inside the control area. */
.controls-panel select {
  display: none !important;
}

@media (max-width: 700px) {
  .star-select-menu,
  #scaleSelect .star-select-menu {
    width: 100%;
    max-width: calc(100vw - 48px);
  }
}


/* =========================================================
   STARBOARD v1.1 — Denser star field + constellation layer
   ========================================================= */

body {
  background:
    radial-gradient(circle at 3% 9%, rgba(255,255,255,.48) 0 1px, transparent 1.45px),
    radial-gradient(circle at 8% 24%, rgba(201, 216, 255, .40) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 6%, rgba(255,255,255,.30) 0 1px, transparent 1.4px),
    radial-gradient(circle at 20% 18%, rgba(214, 222, 245, .34) 0 1px, transparent 1.4px),
    radial-gradient(circle at 27% 4%, rgba(255,255,255,.42) 0 1px, transparent 1.45px),
    radial-gradient(circle at 33% 13%, rgba(201, 216, 255, .30) 0 1px, transparent 1.4px),
    radial-gradient(circle at 40% 25%, rgba(255,255,255,.36) 0 1px, transparent 1.5px),
    radial-gradient(circle at 47% 8%, rgba(214, 222, 245, .28) 0 1px, transparent 1.45px),
    radial-gradient(circle at 54% 17%, rgba(255,255,255,.40) 0 1px, transparent 1.45px),
    radial-gradient(circle at 61% 5%, rgba(201, 216, 255, .35) 0 1px, transparent 1.45px),
    radial-gradient(circle at 69% 23%, rgba(255,255,255,.30) 0 1px, transparent 1.4px),
    radial-gradient(circle at 76% 10%, rgba(214, 222, 245, .32) 0 1px, transparent 1.45px),
    radial-gradient(circle at 83% 19%, rgba(255,255,255,.42) 0 1px, transparent 1.45px),
    radial-gradient(circle at 90% 7%, rgba(201, 216, 255, .34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 96% 27%, rgba(255,255,255,.35) 0 1px, transparent 1.45px),
    linear-gradient(180deg, #070b18 0%, #060a16 46%, #03060e 73%, #02040a 100%);
  background-size:
    150px 150px, 210px 210px, 185px 185px, 230px 230px, 175px 175px,
    260px 260px, 205px 205px, 245px 245px, 190px 190px, 275px 275px,
    220px 220px, 250px 250px, 195px 195px, 285px 285px, 215px 215px, auto;
}

.constellation-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .36;
}

.constellation {
  position: absolute;
  width: 220px;
  height: auto;
  filter: drop-shadow(0 0 5px rgba(112, 190, 194, .08));
}

.constellation-lines {
  stroke: rgba(113, 184, 188, .34);
  stroke-width: 1;
  fill: none;
}

.constellation-stars {
  fill: rgba(218, 225, 243, .70);
}

.constellation-orion {
  top: 8%;
  left: 4%;
  transform: rotate(-8deg) scale(.92);
}

.constellation-dipper {
  top: 14%;
  right: 5%;
  width: 250px;
  transform: rotate(9deg);
}

.constellation-cassiopeia {
  top: 43%;
  left: 7%;
  width: 210px;
  transform: rotate(-4deg);
}

/* Keep constellations atmospheric rather than competing with app content. */
.app-shell {
  position: relative;
  z-index: 2;
}

@media (max-width: 850px) {
  .constellation-layer { opacity: .22; }
  .constellation { width: 170px; }
  .constellation-dipper { width: 190px; }
  .constellation-cassiopeia { width: 160px; }
}


/* =========================================================
   STARBOARD v1.2 — Moon, ghost ships, Gary & Muriel
   Decorative background layer with a stronger nautical vibe.
   ========================================================= */

.sky-objects-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.moon {
  position: absolute;
  top: 88px;
  right: 1.5%;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.92) 0 18%, rgba(239,244,255,.82) 19% 42%, rgba(191, 224, 234, .58) 43% 66%, rgba(129,181,194,.10) 67% 100%);
  box-shadow:
    0 0 18px rgba(212, 237, 244, .22),
    0 0 42px rgba(214, 222, 245, .10),
    0 0 80px rgba(214, 222, 245, .06);
  opacity: .72;
  filter: blur(.1px);
}

.moon::before,
.moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(128, 165, 179, .16);
}

.moon::before {
  width: 22px;
  height: 22px;
  top: 30px;
  left: 34px;
}

.moon::after {
  width: 14px;
  height: 14px;
  top: 70px;
  left: 76px;
}

.ghost-fleet,
.gary-muriel-scene {
  position: absolute;
  height: auto;
  opacity: .23;
  filter:
    drop-shadow(0 0 5px rgba(214, 222, 245, .08))
    drop-shadow(0 0 18px rgba(214, 222, 245, .04));
}

.ghost-fleet {
  width: 250px;
}

.fleet-left {
  left: 5%;
  bottom: 58px;
  transform: scale(.92) rotate(-2deg);
}

.fleet-right {
  right: 6%;
  bottom: 84px;
  transform: scale(1.02) rotate(1deg);
}

.ghost-hull path {
  fill: rgba(128, 220, 224, .11);
  stroke: rgba(214, 222, 245, .24);
  stroke-width: 1.2;
}

.ghost-masts line {
  stroke: rgba(214, 222, 245, .22);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ghost-sails path {
  fill: rgba(173, 241, 243, .055);
  stroke: rgba(214, 222, 245, .20);
  stroke-width: 1;
}

.gary-muriel-scene {
  width: 250px;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  opacity: .26;
}

.gary-muriel-scene .skiff path {
  fill: rgba(123, 221, 225, .10);
  stroke: rgba(146, 231, 234, .24);
  stroke-width: 1.25;
}

.gary-muriel-scene .gary ellipse,
.gary-muriel-scene .gary path,
.gary-muriel-scene .muriel ellipse,
.gary-muriel-scene .muriel path {
  fill: none;
  stroke: rgba(160, 237, 239, .24);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gary-muriel-scene .gary ellipse:first-child,
.gary-muriel-scene .muriel ellipse:first-child,
.gary-muriel-scene .muriel ellipse:nth-child(2) {
  fill: rgba(214, 222, 245, .06);
}

.gary-muriel-scene .gary-eye,
.gary-muriel-scene .muriel-eye {
  fill: rgba(234, 238, 249, .58);
  stroke: none !important;
}

.gary-muriel-scene .muriel-horn {
  stroke: rgba(226, 232, 246, .26) !important;
}

/* Sky map glow/traces for constellations */
.constellation-layer {
  opacity: .42;
}

.constellation {
  filter:
    drop-shadow(0 0 6px rgba(214, 222, 245, .10))
    drop-shadow(0 0 12px rgba(214, 222, 245, .06));
}

.constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(214, 222, 245, .05), transparent 58%);
  filter: blur(16px);
  opacity: .55;
}

.constellation-lines {
  stroke: rgba(111, 210, 214, .40);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter:
    drop-shadow(0 0 3px rgba(214, 222, 245, .16))
    drop-shadow(0 0 7px rgba(214, 222, 245, .09));
}

.constellation-lines line {
  opacity: .72;
}

.constellation-stars {
  fill: rgba(228, 234, 247, .82);
  filter:
    drop-shadow(0 0 4px rgba(244, 247, 255, .14))
    drop-shadow(0 0 9px rgba(117, 226, 229, .09));
}

.constellation-stars circle {
  opacity: .90;
}

.constellation-orion::after,
.constellation-dipper::after,
.constellation-cassiopeia::after {
  content: "";
  position: absolute;
  inset: 10% 8%;
  border: 1px solid rgba(100, 205, 208, .08);
  border-radius: 999px;
  filter: blur(1px);
  opacity: .55;
}

.app-shell {
  position: relative;
  z-index: 2;
}

@media (max-width: 950px) {
  .moon {
    width: 96px;
    height: 96px;
    right: 0.5%;
    top: 78px;
    opacity: .62;
  }

  .ghost-fleet {
    width: 180px;
    opacity: .18;
  }

  .gary-muriel-scene {
    width: 180px;
    opacity: .20;
  }
}

@media (max-width: 700px) {
  .moon {
    width: 76px;
    height: 76px;
    top: 72px;
  }

  .ghost-fleet,
  .gary-muriel-scene {
    opacity: .12;
  }

  .fleet-left {
    bottom: 42px;
  }

  .fleet-right {
    bottom: 54px;
  }
}


/* =========================================================
   STARBOARD v1.2.1 — Gary & Muriel moved to far margins
   ========================================================= */

.gary-cameo,
.muriel-cameo {
  position: absolute;
  height: auto;
  opacity: .34;
  filter:
    drop-shadow(0 0 6px rgba(214, 222, 245, .10))
    drop-shadow(0 0 20px rgba(214, 222, 245, .05));
}

.gary-cameo {
  width: 120px;
  left: 10px;
  bottom: 44px;
}

.muriel-cameo {
  width: 150px;
  right: 10px;
  bottom: 34px;
}

.gary-cameo .gary ellipse,
.gary-cameo .gary path,
.muriel-cameo .muriel ellipse,
.muriel-cameo .muriel path {
  fill: none;
  stroke: rgba(166, 239, 241, .30);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gary-cameo .gary ellipse:first-child,
.muriel-cameo .muriel ellipse:first-child,
.muriel-cameo .muriel ellipse:nth-child(2) {
  fill: rgba(214, 222, 245, .07);
}

.gary-cameo .gary-eye,
.muriel-cameo .muriel-eye {
  fill: rgba(234, 238, 249, .72);
  stroke: none !important;
}

.muriel-cameo .muriel-horn {
  stroke: rgba(226, 232, 246, .30) !important;
}

@media (max-width: 950px) {
  .gary-cameo {
    width: 90px;
    left: 4px;
    bottom: 28px;
    opacity: .24;
  }

  .muriel-cameo {
    width: 112px;
    right: 4px;
    bottom: 24px;
    opacity: .24;
  }
}

@media (max-width: 700px) {
  .gary-cameo,
  .muriel-cameo {
    opacity: .16;
  }

  .gary-cameo {
    width: 72px;
    left: 0;
  }

  .muriel-cameo {
    width: 88px;
    right: 0;
  }
}


/* =========================================================
   STARBOARD v1.3 — Gary and Muriel as true constellations
   Muriel = left margin, Gary = right margin
   ========================================================= */

.muriel-constellation,
.gary-constellation {
  position: absolute;
  height: auto;
  pointer-events: none;
  opacity: .66;
  filter:
    drop-shadow(0 0 5px rgba(214, 222, 245, .10))
    drop-shadow(0 0 16px rgba(214, 222, 245, .08));
}

.muriel-constellation {
  width: 205px;
  left: 8px;
  bottom: 24px;
}

.gary-constellation {
  width: 178px;
  right: 8px;
  bottom: 22px;
}

.muriel-constellation .constellation-aura ellipse,
.gary-constellation .constellation-aura ellipse {
  fill: rgba(214, 222, 245, .03);
  stroke: rgba(214, 222, 245, .10);
  stroke-width: 1;
  filter: blur(1px);
}

.muriel-constellation .constellation-trace,
.gary-constellation .constellation-trace {
  stroke: rgba(214, 224, 246, .52);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter:
    drop-shadow(0 0 3px rgba(214, 224, 246, .18))
    drop-shadow(0 0 8px rgba(214, 224, 246, .12));
}

.muriel-constellation .constellation-stars,
.gary-constellation .constellation-stars {
  fill: rgba(230, 236, 248, .96);
  filter:
    drop-shadow(0 0 5px rgba(244, 247, 255, .18))
    drop-shadow(0 0 11px rgba(112, 224, 230, .16));
}

.muriel-constellation .constellation-stars circle,
.gary-constellation .constellation-stars circle {
  opacity: .98;
}

.muriel-constellation .accent-star,
.gary-constellation .accent-star {
  fill: rgba(214, 224, 246, .98);
  filter:
    drop-shadow(0 0 7px rgba(214, 224, 246, .44))
    drop-shadow(0 0 16px rgba(214, 224, 246, .22));
}

.muriel-constellation .constellation-label,
.gary-constellation .constellation-label {
  fill: rgba(190, 204, 238, .82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-anchor: middle;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.20));
}

/* Retire the old cameo styling if present in older CSS. */
.gary-cameo,
.muriel-cameo {
  display: none !important;
}

@media (max-width: 950px) {
  .muriel-constellation {
    width: 155px;
    left: 2px;
    bottom: 12px;
    opacity: .52;
  }

  .gary-constellation {
    width: 136px;
    right: 2px;
    bottom: 12px;
    opacity: .52;
  }

  .muriel-constellation .constellation-label,
  .gary-constellation .constellation-label {
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .muriel-constellation,
  .gary-constellation {
    opacity: .34;
  }

  .muriel-constellation {
    width: 112px;
  }

  .gary-constellation {
    width: 98px;
  }

  .muriel-constellation .constellation-trace,
  .gary-constellation .constellation-trace {
    stroke-width: 1.4;
  }

  .muriel-constellation .constellation-label,
  .gary-constellation .constellation-label {
    font-size: 11px;
    letter-spacing: .04em;
  }
}


/* =========================================================
   STARBOARD v1.4 — Fret Focus + Fretboard Audio
   ========================================================= */

.fret-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr);
  gap: 12px;
  margin: 12px 0 14px;
}

.fret-focus-tool,
.audio-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(90, 130, 220, .36);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(143, 179, 255, .045), transparent 36%),
    linear-gradient(180deg, rgba(12, 16, 32, .82), rgba(7, 11, 24, .92));
}

.fret-tool-copy strong {
  display: block;
  color: var(--parchment);
  font-size: .88rem;
}

.fret-tool-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.fret-focus-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.compact-select-field {
  display: grid;
  gap: 5px;
  width: 98px;
}

.compact-select-field > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 750;
}

.compact-star-select .star-select-trigger {
  min-height: 38px;
  padding: 0 9px 0 10px;
}

.compact-star-select .star-select-menu {
  width: 100%;
  min-width: 98px;
  max-height: 300px;
}

.range-arrow {
  align-self: center;
  margin-top: 18px;
  color: var(--moon-bright);
  font-size: 1rem;
}

.small-tool-button,
.audio-toggle {
  min-height: 38px;
  padding: 0 12px;
}

.audio-toggle[aria-pressed="true"] {
  color: #061219;
  border-color: var(--sea-bright);
  background: linear-gradient(180deg, #b3c9ff, #6f97f0);
  box-shadow: 0 0 0 1px rgba(179, 201, 255, .18), 0 0 18px rgba(179, 201, 255, .10);
}

.fret-cell.outside-focus,
.fret-header.outside-focus {
  opacity: .30;
}

.tone.audio-enabled {
  cursor: pointer;
}

.tone.audio-enabled:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.34),
    0 0 12px rgba(103,214,211,.18);
}

.tone.audio-pulse {
  animation: starboard-note-pulse .28s ease-out;
}

@keyframes starboard-note-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.24); }
  100% { transform: scale(1); }
}

@media (max-width: 980px) {
  .fret-tools { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .fret-focus-tool,
  .audio-tool {
    align-items: flex-start;
    flex-direction: column;
  }

  .fret-focus-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .audio-toggle { width: 100%; }
}


/* =========================================================
   STARBOARD v1.6 — Foundation round
   ========================================================= */

/* The neck now fits a 1366-wide laptop at 24 frets without side-scroll
   (cells shrink to 44px) and grows into the room on wider screens. */
.fretboard {
  grid-template-columns: 90px 68px repeat(var(--fretted-count), minmax(44px, 1fr));
  min-width: calc(158px + var(--fretted-count) * 44px);
}

.tone { min-width: 32px; min-height: 32px; padding: 3px 5px; }
.tone.both { min-width: 38px; }

/* Tuning preset menu sits with the quick-tuning buttons. */
.preset-select { width: 250px; }
.preset-select .star-select-menu { width: max(100%, 300px); }

/* Neck view: a third tool card beside Fret Focus and Audio. */
.fret-tools {
  grid-template-columns: minmax(0, 1.4fr) minmax(210px, .6fr) minmax(250px, .7fr);
}

.neck-view-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(90, 130, 220, .36);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(143, 179, 255, .045), transparent 36%),
    linear-gradient(180deg, rgba(12, 16, 32, .82), rgba(7, 11, 24, .92));
}

.segmented {
  display: inline-flex;
  border: 1px solid rgba(143, 179, 255, .32);
  border-radius: 9px;
  overflow: hidden;
  background: #0b1020;
}

.segmented .text-button {
  min-height: 36px;
  min-width: 46px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid rgba(143, 179, 255, .22);
  color: var(--muted);
}

.segmented .text-button:last-child { border-right: 0; }
.segmented .text-button.active-toggle { color: #07131e; }

/* Session row in the Captain's log. */
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 179, 255, .18);
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 1100px) {
  .fret-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fret-focus-tool { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .fret-tools { grid-template-columns: 1fr; }
  .fret-focus-tool { grid-column: auto; }
}

@media (max-width: 700px) {
  .preset-select { width: 100%; }
  .neck-view-tool { align-items: flex-start; flex-direction: column; }
  .session-row { flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   NOCTURNE 2.0 — Star-chart identity
   Dark navy chart, gold and parchment ink. Everything nautical
   below this line is overridden or has no markup left to style.
   ========================================================= */

/* Sky: one fixed star chart (sky.svg) behind everything. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-chart {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .92;
}

/* Vignette so the chart fades toward the edges like an aged plate. */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2, 4, 10, .55) 100%);
}

/* The old ocean-horizon glow. */
body::after { display: none; }

body {
  background:
    radial-gradient(circle at 50% 30%, rgba(143, 179, 255, .05), transparent 46rem),
    linear-gradient(180deg, #070c19 0%, #050a14 55%, #03060e 100%);
  background-size: auto, auto;
}

/* Hero: let the chart show through; drop the ocean rings. */
.hero {
  background:
    radial-gradient(circle at 84% 22%, rgba(201, 216, 255, .10), transparent 15rem),
    linear-gradient(135deg, rgba(10, 15, 32, .62), rgba(4, 7, 16, .78));
}

.hero::after { display: none; }

.brand-lockup { align-items: center; gap: 22px; }

.logo-mark {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(201, 216, 255, .16));
}

.logo-mark .ring { fill: rgba(9, 13, 26, .55); stroke: rgba(143, 179, 255, .62); stroke-width: 1.2; }
.logo-mark .ticks path { fill: none; stroke: rgba(143, 179, 255, .55); stroke-width: 1.1; stroke-linecap: round; }
.logo-mark .trace path { fill: none; stroke: #c9d8ff; stroke-opacity: .85; stroke-width: 1.5; stroke-linejoin: round; }
.logo-mark .stars circle { fill: #eef3ff; }
.logo-mark .root circle { fill: #c9d8ff; }
.logo-mark .root path { fill: none; stroke: #c9d8ff; stroke-opacity: .55; stroke-width: 1; }

.brand-copy { min-width: 0; }

.wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  font-weight: 700;
  letter-spacing: .2em;
  line-height: .95;
  color: #f2f4fc;
  text-shadow: 0 0 22px rgba(201, 216, 255, .22), 0 2px 0 rgba(0, 0, 0, .35);
}

.brand-tagline {
  font-style: italic;
  letter-spacing: .06em;
}

.chart-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 12px 0 2px;
  color: var(--moon-bright);
  font-size: .8rem;
}

.chart-rule i {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 255, .6), transparent);
}

.eyebrow {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--moon);
  text-transform: uppercase;
}

/* Fretboard as a star chart. */
.fretboard { position: relative; }

.fretboard-scroll::before {
  content: "FRETBOARD STAR CHART";
  color: rgba(180, 195, 234, .6);
  font-style: italic;
}

.trace-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.trace-overlay path {
  fill: none;
  stroke: #b3c9ff;
  stroke-opacity: .58;
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

/* Notes as stars: cream scale tones, a gilt root with a halo. */
.tone {
  background: #dde3f4;
  color: #0b0d14;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .35), 0 2px 8px rgba(0, 0, 0, .4);
}

.tone.root:not(.selected-note) {
  background: #c9d8ff;
  box-shadow: 0 0 0 2px rgba(201, 216, 255, .28), 0 0 16px rgba(201, 216, 255, .34), 0 2px 8px rgba(0, 0, 0, .4);
}

.legend-trace {
  display: inline-block;
  width: 26px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px dashed rgba(179, 201, 255, .7);
}

/* Old sky markup is gone; keep its classes inert if anything still references them. */
.constellation-layer,
.sky-objects-layer,
.moon,
.ghost-fleet,
.gary-constellation,
.muriel-constellation,
.compass-mark,
.nautical-rule { display: none !important; }

@media (max-width: 700px) {
  .brand-lockup { align-items: flex-start; }
  .logo-mark { width: 64px; height: 64px; }
  .wordmark { letter-spacing: .12em; }
}


/* =========================================================
   NOCTURNE 2.1 — Wordmark as a constellation
   ========================================================= */
.wordmark {
  margin: 0;
  line-height: 0;
}

.wordmark-svg {
  display: block;
  width: min(100%, 640px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(201, 216, 255, 0.16));
}

.wordmark-svg .wm-field circle { fill: #e6eaf7; }
.wordmark-svg .wm-arc { fill: none; stroke: rgba(143, 179, 255, 0.18); stroke-width: 0.8; stroke-dasharray: 5 6; }
.wordmark-svg .wm-trace polyline { fill: none; stroke: #b3c9ff; stroke-opacity: 0.88; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.wordmark-svg .wm-stars circle { fill: #eef3ff; }
.wordmark-svg .wm-stars .wm-bright { fill: #c9d8ff; }
.wordmark-svg .wm-spark { fill: none; stroke: #c9d8ff; stroke-opacity: 0.55; stroke-width: 0.9; }

.brand-tagline { margin-top: 10px; }


/* =========================================================
   NOCTURNE 2.3 — Chart tools
   Charted maps, mode navigation, chord tones, play scale,
   copy notes, left-handed neck, hover card.
   ========================================================= */

/* Charted maps strip at the top of the chart panel. */
.maps-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 179, 255, .26);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(15, 21, 39, .7), rgba(7, 11, 24, .85));
}

.maps-copy { display: grid; gap: 3px; max-width: 520px; }
.maps-copy strong { font-family: Georgia, "Times New Roman", serif; letter-spacing: .04em; color: var(--moon-bright); }
.maps-copy span { color: var(--muted); font-size: .78rem; line-height: 1.45; }

.maps-slots { display: flex; flex-wrap: wrap; gap: 6px; }

.map-slot {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(143, 179, 255, .3);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(11, 16, 32, .9);
}

.map-slot button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.map-name {
  min-width: 78px;
  padding: 7px 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
}

.map-saved .map-name { color: var(--text); }
.map-empty .map-name { font-style: italic; font-weight: 600; opacity: .6; cursor: default; }

.map-save,
.map-clear {
  width: 30px;
  border-left: 1px solid rgba(143, 179, 255, .22) !important;
  color: var(--moon-bright) !important;
  font-size: .95rem;
}

.map-clear { color: var(--muted) !important; }
.map-save:hover { background: rgba(143, 179, 255, .14); }
.map-clear:hover { background: rgba(224, 122, 95, .18); color: #f0a08a !important; }

.map-active { border-color: var(--moon-bright); box-shadow: 0 0 0 1px rgba(201, 216, 255, .35), 0 0 14px rgba(201, 216, 255, .2); }
.map-active .map-name { color: var(--moon-bright); }

/* Modes of this family. */
.mode-nav {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 179, 255, .22);
  border-radius: 13px;
  background: rgba(9, 13, 26, .55);
}

.mode-nav-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.mode-nav-heading strong { font-size: .86rem; letter-spacing: .04em; color: var(--text); }

.segmented-small .text-button { min-height: 30px; min-width: 70px; font-size: .74rem; }

.mode-nav-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }

.mode-btn {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(143, 179, 255, .26);
  border-radius: 9px;
  background: rgba(11, 16, 32, .85);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.mode-btn small { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .7rem; letter-spacing: .14em; color: var(--moon); }
.mode-btn strong { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.mode-btn:hover { border-color: var(--moon-bright); background: rgba(143, 179, 255, .1); }
.mode-btn-current { border-color: var(--moon-bright); background: linear-gradient(180deg, rgba(157, 189, 255, .22), rgba(77, 118, 217, .18)); }
.mode-btn-current strong { color: var(--moon-bright); }

/* Chord tones. */
.chord-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 179, 255, .22);
  border-radius: 13px;
  background: rgba(9, 13, 26, .55);
}

.chord-tools-copy { display: grid; gap: 3px; min-width: 220px; }
.chord-tools-copy strong { font-size: .86rem; letter-spacing: .04em; }
.chord-tools-copy span { color: var(--muted); font-size: .78rem; }
.chord-tools-copy span.chord-name-active { color: var(--moon-bright); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; letter-spacing: .03em; }

.chord-tools-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.compact-chord-select { width: 120px; }
.compact-chord-select .star-select-trigger { min-height: 36px; font-size: .84rem; }
.compact-chord-select .star-select-menu { width: 100%; min-width: 0; }
.chord-tools-controls .text-button { min-height: 36px; font-size: .78rem; }

/* Neck view + left-handed, play scale. */
.neck-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.neck-view-controls .text-button#leftyBtn { min-height: 36px; font-size: .76rem; }

.audio-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audio-controls .segmented .text-button { min-height: 36px; min-width: 64px; font-size: .78rem; }

.fret-tools { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr) minmax(300px, .9fr); }

/* Left-handed neck: columns are reordered in the DOM; the nut swaps sides. */
.fretboard.lefty .fret-cell.open-cell,
.fretboard.lefty .fret-header.open-header {
  border-right-color: var(--border);
  border-right-width: 1px;
  border-left: 6px solid var(--moon-bright);
}

/* Hover card. */
.tone-card {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 8px 11px;
  border: 1px solid rgba(143, 179, 255, .5);
  border-radius: 9px;
  background: rgba(8, 11, 22, .97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  pointer-events: none;
  color: var(--text);
}

.tone-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; color: var(--moon-bright); }
.tone-card span { font-size: .8rem; }
.tone-card small { color: var(--muted); font-size: .68rem; letter-spacing: .04em; }

@media (max-width: 1100px) {
  .fret-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .maps-bar, .chord-tools { flex-direction: column; align-items: stretch; }
  .mode-nav-buttons { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   NOCTURNE 0.1 — Moonlight palette, keyboard, wordmark
   StarBoard app 3. Everything above is Constellation's chassis
   (by way of Aurora) with the light family remapped to moonlight.
   Everything below is new.
   ========================================================= */

:root {
  /* Nocturne light family (UI accent). */
  --moon: #8fb3ff;          /* moonlight, mid */
  --moon-bright: #c9d8ff;   /* moonlight, on the disc */
  --moon-dark: #2c4590;
  --violet: #b48cff;        /* the Milky Way's fringe */
  --ivory: #f2f4fc;

  /* Sky. Indigo-black, lit from one corner. */
  --bg: #04081a;
  --bg-deep: #02050f;
  --panel: rgba(8, 12, 30, 0.94);
  --panel-2: #0d1330;
  --panel-3: #090e26;
  --cell: #070b1e;

  /* Chord tones. One warm colour (the root) against a cold field. */
  --root: #ffcf6e;            /* amber — the one warm star */
  --third: #7fd8ff;           /* ice blue */
  --fifth: #c69bff;           /* violet */
  --ext: #7f9fb3;             /* steel — 7ths, 9ths, 11ths, 13ths */
  --ext-ink: #0b131a;
}

html { background: var(--bg-deep); }

body {
  background:
    radial-gradient(circle at 85% 80%, rgba(201, 216, 255, .08), transparent 34rem),
    linear-gradient(180deg, #03071a 0%, #04081a 60%, #060a22 100%);
}

/* The sky image is the same fixed layer as Constellation's, but the
   vignette is lighter: the lights should reach the edges. */
.sky-chart { opacity: 1; }
.sky::after {
  background: radial-gradient(130% 100% at 50% 30%, transparent 62%, rgba(2, 5, 15, .5) 100%);
}


/* Focus rings pick up the moonlight. */
select:focus, button:focus-visible, .note-chip:focus-visible { outline-color: var(--moon-bright); }

/* Logo */
.logo-mark .ring    { fill: rgba(4, 8, 26, .6); stroke: rgba(143, 179, 255, .55); stroke-width: 1.2; }
.logo-mark .ticks path { stroke: rgba(143, 179, 255, .45); }
.logo-mark .stars circle { fill: #eef3ff; }
.logo-mark .chord .r { fill: var(--root); }
.logo-mark .chord .t { fill: var(--third); }
.logo-mark .chord .f { fill: var(--fifth); }
.logo-mark .chord path { fill: none; stroke: rgba(238, 243, 255, .5); stroke-width: 1; }
.wordmark-svg { overflow: visible; filter: drop-shadow(0 0 18px rgba(143, 179, 255, .22)); }
.wordmark-svg .wm-text  { fill: url(#wmFill); font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .14em; }
.wordmark-svg .wm-star  { fill: #eef3ff; }

/* Chord readout under the title. */
.control-grid-6 { grid-template-columns: repeat(6, minmax(140px, 1fr)); }
@media (max-width: 1100px) { .control-grid-6 { grid-template-columns: repeat(3, minmax(140px, 1fr)); } }
@media (max-width: 560px)  { .control-grid-6 { grid-template-columns: 1fr 1fr; } }
.mode-toggle { width: 100%; }
.mode-toggle .text-button { flex: 1; }
.chord-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.chord-meta span { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--moon-bright); }
.chord-meta small { color: var(--muted); font-size: .78rem; }
.range-readout, .midi-status { color: var(--muted); font-size: .78rem; }
.custom-range { display: flex; gap: 6px; }
.midi-group { margin-left: auto; }

/* Chips carry the role colour as a filled dot and a tinted ring. */
.note-chip.role-chip { position: relative; min-width: 64px; padding: 6px 12px 5px 30px; line-height: 1.05; border-color: color-mix(in srgb, var(--note-color) 55%, transparent); color: var(--text); }
.note-chip.role-chip::before { content: ""; position: absolute; left: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--note-color); box-shadow: 0 0 10px color-mix(in srgb, var(--note-color) 60%, transparent); }
.note-chip.role-chip small { display: block; margin-top: 2px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.note-chip.role-chip.optional { border-style: dashed; }
.note-chip.role-chip:hover { border-color: var(--note-color); }
.legend-dot.scale-dot { background: #c9d8ff; }
.legend-dot.voiced-dot { background: transparent; border-color: #eef3ff; box-shadow: 0 0 0 2px rgba(201, 216, 255, 0.35), 0 0 12px rgba(201, 216, 255, 0.5); }
.legend-dot.held-dot { background: #eef3ff; box-shadow: 0 0 0 2px rgba(238, 243, 255, .35), 0 0 12px rgba(238, 243, 255, .6); }

/* Diatonic chords and fingering. */
.diatonic-block, .fingering-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.diatonic-row { display: flex; flex-wrap: wrap; gap: 8px; }
.diatonic-btn { min-width: 90px; }
.diatonic-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.diatonic-readout strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: var(--ivory); }
.diatonic-readout span { color: var(--parchment); }
.diatonic-readout em { color: var(--muted); font-size: .8rem; }
.fingering-copy { display: grid; gap: 3px; margin-bottom: 10px; }
.fingering-copy strong { color: var(--parchment); font-size: .9rem; }
.fingering-copy span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.fingering-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fingering-hand { width: 54px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fingering-cell { display: grid; place-items: center; width: 44px; padding: 5px 0 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.fingering-cell b { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; color: var(--moon-bright); }
.fingering-cell small { color: var(--muted); font-size: .62rem; font-weight: 700; }

/* Voicing type toggle & cards */
#voicingTypeToggle { flex-wrap: wrap; }
.voicing-card.key-card { display: grid; gap: 6px; }
.voicing-card.out-of-range { border-style: dashed; opacity: .75; }
.mini-keys { display: block; width: 100%; height: auto; }
.mini-keys .wk { fill: #f2f4fc; stroke: #6d7ba8; stroke-width: .6; }
.mini-keys .bk { fill: #1a2140; stroke: #59689a; stroke-width: .6; }
.mini-keys .lit.root  { fill: var(--root); }
.mini-keys .lit.third { fill: var(--third); }
.mini-keys .lit.fifth { fill: var(--fifth); }
.mini-keys .lit.ext   { fill: var(--ext); }
.mini-keys .lit.scale { fill: #c9d8ff; }
.mini-keys .lbl { font-size: 6.5px; font-weight: 900; fill: #0b0f1f; }
.mini-keys .lbl.bl { fill: #0b0f1f; }
.mini-keys .fng { font-size: 6.4px; font-weight: 800; fill: var(--moon-bright); }
.stage-diagram .mini-keys { max-width: 460px; }
.stage-fingers { margin: 4px 0 0; color: var(--moon-bright); font-family: Georgia, "Times New Roman", serif; letter-spacing: .04em; }
.voicing-stage[hidden] { display: none; }
.keyboard-eyebrow { margin: 22px 0 8px; }

/* ---------- The keyboard. Lit keys glow from inside, like a lamp in a
   window; when something is focused, everything else steps into shadow. */
.keyboard-scroll { overflow-x: auto; padding: 6px 0 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(6, 10, 30, .9), rgba(3, 6, 18, .96)); border: 1px solid var(--border); }
.keyboard { display: inline-block; min-width: 100%; padding: 8px 10px 2px; }
.keys { display: block; overflow: visible; }
.keys .key { cursor: pointer; }
.keys .key.white .kbody { fill: url(#wkGrad, #eef1fa); fill: #eaeef9; stroke: #7d8ab8; stroke-width: 1; }
.keys .key.black .kbody { fill: #141a36; stroke: #6b7bb0; stroke-width: 1; }
.keys .key.white:hover .kbody { fill: #f6f8ff; }
.keys .key.black:hover .kbody { fill: #1c2447; }
.keys .key.lit.root .kbody  { fill: var(--root);  filter: drop-shadow(0 0 10px rgba(255, 207, 110, .55)); stroke: #b98a2a; }
.keys .key.lit.scale .kbody { fill: #c9d8ff;      filter: drop-shadow(0 0 8px rgba(201, 216, 255, .5)); stroke: #6f88c9; }
.keys .key.lit.third .kbody { fill: var(--third); filter: drop-shadow(0 0 9px rgba(127, 216, 255, .5)); stroke: #3f9bc7; }
.keys .key.lit.fifth .kbody { fill: var(--fifth); filter: drop-shadow(0 0 9px rgba(198, 155, 255, .5)); stroke: #8a67c9; }
.keys .key.lit.ext .kbody   { fill: var(--ext);   filter: drop-shadow(0 0 7px rgba(127, 159, 179, .45)); stroke: #4f6a7c; }
.keys .key.black.lit .kbody { stroke-width: 1.4; }
.keys .key.lit.voiced .kbody { stroke: #ffffff; stroke-width: 2.2; filter: drop-shadow(0 0 14px rgba(238, 243, 255, .75)); }
.keys .key.lit.dim .kbody { opacity: .32; filter: none; }
.keys .key.lit.dim .lbl, .keys .key.lit.dim .fng { opacity: .35; }
.keys .key.held .kbody { stroke: #eef3ff; stroke-width: 2.4; filter: drop-shadow(0 0 16px rgba(238, 243, 255, .85)); }
.keys .key.held:not(.lit) .kbody { fill: #dfe8ff; }
.keys .key.black.held:not(.lit) .kbody { fill: #4a5a8e; }
.keys .lbl { font-size: 11px; font-weight: 900; fill: #0b0f1f; pointer-events: none; }
.keys .lbl .sub { font-size: 8px; font-weight: 700; fill: #2b3350; }
.keys .lbl.bl { font-size: 9.5px; }
.keys .fng { font-size: 10px; font-weight: 800; fill: #1f2a4d; pointer-events: none; }
.keys .fng.bl { fill: #dfe6ff; font-size: 8.5px; }
.keys .key.lit.dim .fng { display: none; }
.keys .oct { font-size: 9px; font-weight: 800; fill: var(--muted); letter-spacing: .04em; }
.keys .key.audio-pulse .kbody { animation: keypulse .5s ease-out; }
@keyframes keypulse { 0% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .9)); } 100% { filter: none; } }

/* Listen panel */
.listen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.listen-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.identify-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pick-chip { display: grid; padding: 6px 12px; border: 1px solid rgba(238, 243, 255, .4); border-radius: 10px; background: rgba(238, 243, 255, .06); }
.pick-chip strong { color: #f4f7ff; font-family: Georgia, "Times New Roman", serif; }
.pick-chip-empty { border-style: dashed; color: var(--muted); font-size: .82rem; }
.identify-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.identify-result { display: grid; gap: 2px; padding: 10px 12px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.identify-result:hover { border-color: var(--moon); }
.identify-result strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: #f4f7ff; }
.identify-result span { color: var(--parchment); font-size: .8rem; }
.identify-result small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.identify-best { border-color: var(--moon-bright); box-shadow: 0 0 0 1px rgba(201, 216, 255, .3), 0 0 22px rgba(143, 179, 255, .2); }
.modes-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-chip { padding: 5px 10px; border: 1px dashed rgba(143, 179, 255, .4); border-radius: 999px; color: var(--parchment); font-size: .78rem; font-weight: 700; background: transparent; }
.mode-chip-btn { cursor: pointer; }
.mode-chip-btn:hover { border-style: solid; border-color: var(--moon-bright); color: var(--ivory); }
.mode-chip-empty { border-style: solid; color: var(--muted); font-weight: 500; }
.notes-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
@media (max-width: 760px) { .listen-grid { grid-template-columns: 1fr; } .midi-group { margin-left: 0; } }

/* ---- from Aurora: voicing cards and stage ---- */
.voicings-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.voicings-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}
.voicings-heading strong { display: block; color: var(--parchment); font-size: 0.95rem; }
.voicings-heading > div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.78rem; }

.voicing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.voicing-empty { grid-column: 1 / -1; margin: 6px 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

.voicing-card {
  display: grid;
  gap: 6px;
  padding: 10px 10px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11, 23, 30, 0.9), rgba(6, 13, 19, 0.96));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.voicing-card:hover { border-color: var(--moon); }
.voicing-card:active { transform: translateY(1px); }
.voicing-card.voicing-focused {
  border-color: var(--moon-bright);
  box-shadow: 0 0 0 1px rgba(201, 216, 255, 0.35), 0 0 26px rgba(143, 179, 255, 0.22);
}
.voicing-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.voicing-card-head strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; color: #f2f4fc; }
.voicing-card-head small { color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; }
.voicing-card-foot { color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.voicing-stage {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 18px 26px;
  align-items: start;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 216, 255, 0.38);
  border-radius: 14px;
  background:
    radial-gradient(circle at 15% 20%, rgba(143, 179, 255, 0.10), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(180, 140, 255, 0.10), transparent 40%),
    linear-gradient(180deg, rgba(9, 18, 26, 0.96), rgba(5, 11, 17, 0.98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 40px rgba(143, 179, 255, 0.08);
}
.stage-diagram .chord-box { max-width: 300px; }
.stage-copy h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: #f2f4fc;
  text-shadow: 0 0 22px rgba(201, 216, 255, 0.25);
}
.stage-sub { margin: 6px 0 12px; color: var(--muted); font-size: 0.82rem; }

/* Anything the mode hides stays hidden, whatever its display type. */
[hidden] { display: none !important; }
.legend-dot.root-dot  { background: var(--root); }
.legend-dot.third-dot { background: var(--third); }
.legend-dot.fifth-dot { background: var(--fifth); }
.legend-dot.ext-dot   { background: var(--ext); opacity: .82; }
.voicing-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.voicing-card-head strong { font-size: .98rem; }

.diatonic-btn { display: grid; gap: 2px; min-width: 120px; max-width: 190px; text-align: left; }
.diatonic-btn em { font-style: normal; font-size: .68rem; line-height: 1.3; color: var(--muted); white-space: normal; }
.diatonic-outside { border-style: dashed; }
.diatonic-outside-heading { margin-top: 14px; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .segmented, .note-action-buttons, .quick-actions, .quick-action-group { flex-wrap: wrap; }
  .segmented .text-button { flex: 1 1 auto; }
  #voicingTypeToggle .text-button { flex: 1 1 30%; }
  .voicing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .voicing-stage { grid-template-columns: 1fr; }
  .diatonic-btn { min-width: 0; max-width: none; flex: 1 1 45%; }
  .fingering-row { flex-wrap: wrap; }
  .fingering-cell { width: 38px; }
  .listen-grid { grid-template-columns: 1fr; }
  .identify-results { grid-template-columns: 1fr 1fr; }
  .keys .lbl { font-size: 10px; }
}


/* =========================================================
   0.2.1 — Note names on every key; alignment pass
   ========================================================= */
.keys .name { font-size: 9.5px; font-weight: 800; fill: #4a5578; letter-spacing: .02em; pointer-events: none; }
.keys .name.bl { font-size: 7.5px; fill: #8f9bc4; }
.keys .key.lit .name { fill: #0b0f1f; }
.keys .key.black.lit .name { fill: #0b0f1f; }
.keys .key.lit.dim .name { opacity: .5; }
.keys .lbl { font-size: 12px; }
.keys .lbl.bl { font-size: 9px; }
.keys .fng { font-size: 9.5px; }
.keys .oct { display: none; }

/* Setup grid: fields fill the row evenly whatever the mode shows. */
.control-grid-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.quick-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.quick-action-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.midi-group { margin-left: 0; }

/* Block headings and card rows: one structure everywhere. */
.scale-notes-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.scale-notes-heading > div { display: grid; gap: 2px; }
.scale-notes-heading strong { color: var(--parchment); font-size: .92rem; }
.scale-notes-heading span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.diatonic-block, .fingering-block, .voicings-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.diatonic-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }
.diatonic-btn { min-width: 0; max-width: none; min-height: 84px; }
.voicing-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fingering-row { display: grid; grid-template-columns: 54px repeat(8, 44px); gap: 6px; align-items: center; }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.note-action-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 6px; }
@media (max-width: 760px) { .diatonic-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fingering-row { grid-template-columns: 44px repeat(8, 1fr); gap: 3px; } .fingering-cell { width: auto; } }

/* Help button */
.hero-actions { margin: 10px 0 2px; }
.help-button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.help-button::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .78rem; font-weight: 900; }