:root {
  color-scheme: dark;
  --bg: #050a14;
  --bg-deep: #02050c;
  --panel: rgba(10, 13, 27, 0.94);
  --panel-2: #0f1527;
  --panel-3: #0b1020;
  --border: #4a4130;
  --border-soft: #2d2a1f;
  --text: #f5f0df;
  --muted: #b8ad90;
  --sea: #e6d6a6;
  --sea-deep: #8a6f3a;
  --brass: #d6ad5c;
  --brass-bright: #f0cf83;
  --parchment: #e7d7ad;
  --root: #f0cf83;
  --scale: #efe3c2;
  --string: #9a8c66;
  --fret: #4b4230;
  --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(214, 173, 92, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 7%, rgba(245, 240, 223, 0.10) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 23%, rgba(230, 214, 166, 0.09) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 33%, rgba(245, 240, 223, 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(138, 111, 58, 0.32), transparent 58%),
    radial-gradient(70% 70% at 74% 100%, rgba(138, 111, 58, 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(214, 173, 92, 0.48);
  border-radius: 50%;
  color: var(--brass-bright);
  font-size: 2.25rem;
  background: radial-gradient(circle, rgba(214, 173, 92, 0.10), rgba(9, 13, 26, 0.78) 66%);
  box-shadow: inset 0 0 0 5px rgba(214, 173, 92, 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: #f6efd9;
  text-shadow: 0 2px 20px rgba(214, 173, 92, 0.10);
}

.brand-tagline {
  margin: 7px 0 0;
  color: var(--brass-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(230, 214, 166, 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(--brass-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, #d9b867, #b88d3f);
  color: #101322;
  border-color: #ebcf8d;
}

.secondary-button:hover,
.primary-button:hover,
.string-control button:hover,
.note-chip:hover {
  border-color: var(--brass-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(--brass-bright);
  border-color: var(--brass-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(--brass);
  background: rgba(214, 173, 92, 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(240, 207, 131, 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, #f2d16b, #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(--brass) #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: #b3a98d;
  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(--brass-bright);
  background: linear-gradient(180deg, rgba(214, 173, 92, 0.14), rgba(9, 12, 25, 0.98));
  font-size: 0.88rem;
  font-weight: 950;
  box-shadow: inset 0 -2px 0 rgba(214, 173, 92, 0.35);
}

.fret-header.open-header {
  position: relative;
  color: var(--sea);
  background: linear-gradient(180deg, rgba(230, 214, 166, 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 #2b2a20;
}

.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 #2b2a20;
  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(230, 214, 166, 0.10), rgba(5, 16, 24, 0.96));
  border-right: 6px solid var(--parchment);
  box-shadow: inset 2px 0 0 rgba(230, 214, 166, 0.52);
}

.fret-cell.marker-fret::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 5px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 2px rgba(214, 173, 92, 0.10), 0 0 10px rgba(214, 173, 92, 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(--brass-bright);
  box-shadow: 0 0 8px rgba(214, 173, 92, 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(214, 173, 92, 0.055);
  --brass-dark: #806027;
  --wood-deep: #24170f;
  --wood-mid: #3a2617;
}

/* Celestial navigation field. */
body {
  background:
    radial-gradient(circle at 11% 8%, rgba(240, 207, 131, .55) 0 1px, transparent 1.7px),
    radial-gradient(circle at 29% 16%, rgba(245, 240, 223, .38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 5%, rgba(235, 220, 176, .34) 0 1px, transparent 1.7px),
    radial-gradient(circle at 67% 13%, rgba(245, 240, 223, .46) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 6%, rgba(240, 207, 131, .42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 94% 22%, rgba(235, 220, 176, .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(220, 200, 150, .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(214, 173, 92, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 22%, rgba(240, 207, 131, .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(214, 173, 92, .34) 12%, rgba(214, 173, 92, .34) 88%, transparent);
}

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

/* Proper compass rose. */
.compass-mark {
  position: relative;
  width: 88px;
  height: 88px;
  overflow: visible;
  border: 2px solid rgba(214, 173, 92, .62);
  background:
    radial-gradient(circle at center, rgba(240, 207, 131, .12) 0 24%, transparent 25%),
    repeating-conic-gradient(from 22.5deg, rgba(214, 173, 92, .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(214, 173, 92, .045),
    inset 0 0 0 7px rgba(214, 173, 92, .20),
    0 10px 28px rgba(0,0,0,.28);
}

.compass-mark::before,
.compass-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(214, 173, 92, .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(--brass-bright);
  font-size: 2.45rem;
  line-height: 1;
  text-shadow: 0 0 14px rgba(240, 207, 131, .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(--brass-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(240, 207, 131, .78);
  font-size: .72rem;
}

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

/* Plotting-table cards with brass corner details. */
.panel {
  position: relative;
  background:
    linear-gradient(rgba(214, 173, 92, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 173, 92, .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(170, 146, 92, .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(214, 173, 92, .54);
  border-left: 1px solid rgba(214, 173, 92, .54);
}

.panel::after {
  right: 8px;
  bottom: 8px;
  border-right: 1px solid rgba(214, 173, 92, .54);
  border-bottom: 1px solid rgba(214, 173, 92, .54);
}

.controls-panel {
  border-color: rgba(214, 173, 92, .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(150, 130, 90, .62);
  background:
    linear-gradient(180deg, rgba(28, 30, 52, .98), rgba(12, 15, 30, .98));
}

.secondary-button {
  border-color: rgba(214, 173, 92, .26);
  background:
    linear-gradient(180deg, rgba(40, 30, 20, .48), rgba(13, 15, 27, .98));
}

.reset-button {
  color: var(--brass-bright);
  border-color: rgba(214, 173, 92, .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(55, 35, 22, .22), transparent 32%),
    linear-gradient(180deg, rgba(15, 21, 39, .88), rgba(10, 13, 27, .94));
  border-color: rgba(150, 130, 90, .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(231, 215, 173, .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(214, 173, 92, .10);
}

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

/* Chart-table export strip. */
.pattern-guide-actions {
  padding: 15px 14px 0;
  border-top: 1px solid rgba(214, 173, 92, .22);
  background: linear-gradient(90deg, rgba(58,38,23,.12), transparent 42%);
}

.notes-panel {
  background:
    linear-gradient(135deg, rgba(214, 173, 92, .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: #f3ead2;
  background-color: #090b0e;
  color-scheme: dark;
}

select option,
select optgroup {
  color: #f3ead2;
  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(150, 130, 90, .72);
  border-radius: 11px;
  background:
    linear-gradient(180deg, #151a2e 0%, #0a0f1e 100%);
  color: #f3ead2;
  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(214, 173, 92, .58);
  background:
    linear-gradient(180deg, #171c30 0%, #0c1122 100%);
}

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

.star-select.open .star-select-trigger {
  border-color: var(--brass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(214, 173, 92, .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(--brass-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(214, 173, 92, .48);
  border-radius: 11px;
  background: #07090c;
  color: #f3ead2;
  box-shadow:
    0 18px 42px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.035);
  scrollbar-color: #7d6330 #0b0d14;
  scrollbar-width: thin;
}

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

.star-select-group-label {
  padding: 9px 10px 5px;
  color: #d2ae64;
  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(214, 173, 92, .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: #efe6cf;
  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: #fff7df;
  box-shadow: inset 3px 0 0 var(--brass-bright);
}

.star-select-option[aria-selected="true"]::before {
  content: "✦";
  color: var(--brass-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(240, 207, 131, .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(235, 220, 176, .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(240, 207, 131, .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(235, 220, 176, .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(240, 207, 131, .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(235, 220, 176, .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(240, 207, 131, .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(238, 232, 211, .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(235, 220, 176, .10),
    0 0 80px rgba(235, 220, 176, .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(235, 220, 176, .08))
    drop-shadow(0 0 18px rgba(235, 220, 176, .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(235, 220, 176, .24);
  stroke-width: 1.2;
}

.ghost-masts line {
  stroke: rgba(235, 220, 176, .22);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ghost-sails path {
  fill: rgba(173, 241, 243, .055);
  stroke: rgba(235, 220, 176, .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(235, 220, 176, .06);
}

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

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

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

.constellation {
  filter:
    drop-shadow(0 0 6px rgba(235, 220, 176, .10))
    drop-shadow(0 0 12px rgba(235, 220, 176, .06));
}

.constellation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(235, 220, 176, .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(235, 220, 176, .16))
    drop-shadow(0 0 7px rgba(235, 220, 176, .09));
}

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

.constellation-stars {
  fill: rgba(243, 239, 224, .82);
  filter:
    drop-shadow(0 0 4px rgba(255, 248, 220, .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(235, 220, 176, .10))
    drop-shadow(0 0 20px rgba(235, 220, 176, .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(235, 220, 176, .07);
}

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

.muriel-cameo .muriel-horn {
  stroke: rgba(240, 232, 210, .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(235, 220, 176, .10))
    drop-shadow(0 0 16px rgba(235, 220, 176, .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(235, 220, 176, .03);
  stroke: rgba(235, 220, 176, .10);
  stroke-width: 1;
  filter: blur(1px);
}

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

.muriel-constellation .constellation-stars,
.gary-constellation .constellation-stars {
  fill: rgba(244, 242, 228, .96);
  filter:
    drop-shadow(0 0 5px rgba(255, 249, 226, .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(240, 226, 184, .98);
  filter:
    drop-shadow(0 0 7px rgba(240, 226, 184, .44))
    drop-shadow(0 0 16px rgba(240, 226, 184, .22));
}

.muriel-constellation .constellation-label,
.gary-constellation .constellation-label {
  fill: rgba(239, 223, 174, .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(170, 146, 92, .36);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(214, 173, 92, .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(--brass-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, #e6c877, #c9a24e);
  box-shadow: 0 0 0 1px rgba(230, 200, 120, .18), 0 0 18px rgba(230, 200, 120, .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(170, 146, 92, .36);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(214, 173, 92, .045), transparent 36%),
    linear-gradient(180deg, rgba(12, 16, 32, .82), rgba(7, 11, 24, .92));
}

.segmented {
  display: inline-flex;
  border: 1px solid rgba(214, 173, 92, .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(214, 173, 92, .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(214, 173, 92, .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; }
}


/* =========================================================
   CONSTELLATION 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(214, 173, 92, .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(240, 207, 131, .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(240, 207, 131, .16));
}

.logo-mark .ring { fill: rgba(9, 13, 26, .55); stroke: rgba(214, 173, 92, .62); stroke-width: 1.2; }
.logo-mark .ticks path { fill: none; stroke: rgba(214, 173, 92, .55); stroke-width: 1.1; stroke-linecap: round; }
.logo-mark .trace path { fill: none; stroke: #f0cf83; stroke-opacity: .85; stroke-width: 1.5; stroke-linejoin: round; }
.logo-mark .stars circle { fill: #fff3cf; }
.logo-mark .root circle { fill: #f0cf83; }
.logo-mark .root path { fill: none; stroke: #f0cf83; 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: #f6efd9;
  text-shadow: 0 0 22px rgba(240, 207, 131, .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(--brass-bright);
  font-size: .8rem;
}

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

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

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

.fretboard-scroll::before {
  content: "FRETBOARD STAR CHART";
  color: rgba(230, 214, 166, .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: #e6c877;
  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: #efe3c2;
  color: #0b0d14;
  box-shadow: 0 0 0 1px rgba(214, 173, 92, .35), 0 2px 8px rgba(0, 0, 0, .4);
}

.tone.root:not(.selected-note) {
  background: #f0cf83;
  box-shadow: 0 0 0 2px rgba(240, 207, 131, .28), 0 0 16px rgba(240, 207, 131, .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(230, 200, 119, .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; }
}


/* =========================================================
   CONSTELLATION 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(240, 207, 131, 0.16));
}

.wordmark-svg .wm-field circle { fill: #f3ead2; }
.wordmark-svg .wm-arc { fill: none; stroke: rgba(214, 173, 92, 0.18); stroke-width: 0.8; stroke-dasharray: 5 6; }
.wordmark-svg .wm-trace polyline { fill: none; stroke: #e6c877; stroke-opacity: 0.88; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.wordmark-svg .wm-stars circle { fill: #fff3cf; }
.wordmark-svg .wm-stars .wm-bright { fill: #ffe6a6; }
.wordmark-svg .wm-spark { fill: none; stroke: #ffe6a6; stroke-opacity: 0.55; stroke-width: 0.9; }

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


/* =========================================================
   CONSTELLATION 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(214, 173, 92, .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(--brass-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(214, 173, 92, .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(214, 173, 92, .22) !important;
  color: var(--brass-bright) !important;
  font-size: .95rem;
}

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

.map-active { border-color: var(--brass-bright); box-shadow: 0 0 0 1px rgba(240, 207, 131, .35), 0 0 14px rgba(240, 207, 131, .2); }
.map-active .map-name { color: var(--brass-bright); }

/* Modes of this family. */
.mode-nav {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 173, 92, .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(214, 173, 92, .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(--brass); }
.mode-btn strong { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.mode-btn:hover { border-color: var(--brass-bright); background: rgba(214, 173, 92, .1); }
.mode-btn-current { border-color: var(--brass-bright); background: linear-gradient(180deg, rgba(217, 184, 103, .22), rgba(184, 141, 63, .18)); }
.mode-btn-current strong { color: var(--brass-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(214, 173, 92, .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(--brass-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(--brass-bright);
}

/* Hover card. */
.tone-card {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 8px 11px;
  border: 1px solid rgba(214, 173, 92, .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(--brass-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; }
}

/* Elements toggled with the hidden attribute must not have it overridden. */
.tone-card[hidden],
.chord-tools[hidden],
.mode-nav[hidden] { display: none; }


/* =========================================================
   CONSTELLATION 2.5 — Lush pass
   Painted nebula layer under the chart, glass panels that let
   the sky through, luminous wordmark, star-lit notes.
   ========================================================= */

/* Sky: nebula raster under the vector chart. */
.sky-nebula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sky-chart {
  position: absolute;
  inset: 0;
  opacity: .96;
}

.sky::after {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(2, 4, 10, .5) 100%);
}

/* Slow drift on the nebula so the sky breathes. Subtle; off with reduced motion. */
@keyframes sky-drift {
  0% { transform: scale(1.04) translate(0, 0); }
  50% { transform: scale(1.06) translate(-0.6%, 0.4%); }
  100% { transform: scale(1.04) translate(0, 0); }
}
.sky-nebula { animation: sky-drift 90s ease-in-out infinite; transform-origin: 60% 40%; }
@media (prefers-reduced-motion: reduce) { .sky-nebula { animation: none; } }

/* Glass panels: the sky shows through, a gold hairline catches the top edge. */
.panel {
  background:
    linear-gradient(rgba(214, 173, 92, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 173, 92, .02) 1px, transparent 1px),
    linear-gradient(180deg, rgba(14, 18, 36, .74), rgba(6, 9, 22, .9));
  background-size: 28px 28px, 28px 28px, auto;
  border-color: rgba(214, 173, 92, .34);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(240, 207, 131, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 24px 60px rgba(0, 0, 0, .5);
}

.hero {
  background:
    radial-gradient(circle at 84% 22%, rgba(240, 207, 131, .12), transparent 16rem),
    linear-gradient(135deg, rgba(12, 16, 34, .42), rgba(4, 7, 16, .62));
}

.controls-panel {
  background:
    linear-gradient(180deg, rgba(14, 18, 36, .8), rgba(6, 9, 22, .92));
}

/* Wordmark. */
.wordmark-svg { width: min(100%, 680px); filter: drop-shadow(0 0 18px rgba(240, 207, 131, .22)); }
.wordmark-svg .wm-arc { fill: none; stroke: rgba(214, 173, 92, .2); stroke-width: .8; stroke-dasharray: 4 7; }
.wordmark-svg .wm-field circle { fill: #f3ead2; }
.wordmark-svg .wm-under path { fill: none; stroke: #e6c877; stroke-opacity: .55; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wordmark-svg .wm-trace path { fill: none; stroke: url(#wmGold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wordmark-svg .wm-stars circle { fill: #fff8e0; }
.wordmark-svg .wm-stars .wm-bright { fill: #fff; }
.wordmark-svg .wm-spark { fill: #fff3cf; fill-opacity: .85; }

.logo-mark { filter: drop-shadow(0 0 16px rgba(240, 207, 131, .3)); }
.logo-mark .ring { fill: rgba(9, 13, 26, .3); }
.logo-mark .trace path { stroke: #f5d78a; stroke-width: 1.7; }

.brand-tagline {
  color: var(--brass-bright);
  text-shadow: 0 0 12px rgba(240, 207, 131, .3);
}

/* Star-lit notes: a highlight on the top-left, a soft rim, a real halo on the root. */
.tone {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(160deg, #f7ecd0, #e2d3ac);
  box-shadow:
    0 0 0 1px rgba(214, 173, 92, .45),
    0 0 10px rgba(240, 207, 131, .25),
    0 2px 8px rgba(0, 0, 0, .45);
}

.tone.root:not(.selected-note) {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 45%),
    linear-gradient(160deg, #f8dc95, #d9ad55);
  box-shadow:
    0 0 0 2px rgba(240, 207, 131, .35),
    0 0 18px rgba(240, 207, 131, .55),
    0 0 40px rgba(240, 207, 131, .2),
    0 2px 8px rgba(0, 0, 0, .45);
}

.tone.selected-note {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%),
    var(--note-color);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 0 16px var(--note-color),
    0 2px 8px rgba(0, 0, 0, .45);
}

.trace-overlay path { stroke-opacity: .7; filter: drop-shadow(0 0 3px rgba(230, 200, 119, .6)); }

/* Fretboard surface: deeper, with a faint gold sheen along the top. */
.fretboard-scroll {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(240, 207, 131, .12), 0 20px 50px rgba(0, 0, 0, .45);
}

.fret-cell { background-color: rgba(6, 9, 20, .82); }
.fret-cell.open-cell { background-color: rgba(230, 214, 166, .06); }

/* Controls: gold sheen, luminous active states. */
.primary-button,
.text-button.helm-tool-primary {
  background: linear-gradient(180deg, #f2d48a 0%, #d9b867 45%, #b88d3f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 18px rgba(240, 207, 131, .25), 0 6px 16px rgba(0, 0, 0, .4);
}

.text-button.active-toggle,
.segmented .text-button.active-toggle,
.dock-btn.dock-btn-open,
.dock-btn.dock-btn-active,
.audio-toggle[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px rgba(240, 207, 131, .35);
}

.star-select-trigger {
  background: linear-gradient(180deg, rgba(16, 20, 40, .95), rgba(8, 11, 24, .98));
  box-shadow: inset 0 1px 0 rgba(240, 207, 131, .12);
}

.star-select-trigger:hover { box-shadow: inset 0 1px 0 rgba(240, 207, 131, .2), 0 0 12px rgba(240, 207, 131, .18); }

.note-chip.selected-chip { box-shadow: 0 0 14px var(--note-color), 0 0 0 1px rgba(255, 255, 255, .2); }
.note-chip.root-chip:not(.selected-chip) { box-shadow: 0 0 12px rgba(240, 207, 131, .35); }

.placard-root { text-shadow: 0 0 30px rgba(240, 207, 131, .45), 0 0 70px rgba(240, 207, 131, .15), 0 2px 0 rgba(0, 0, 0, .4); }
.helm-readout strong { text-shadow: 0 0 14px rgba(240, 207, 131, .3); }

/* Section eyebrows and headings pick up a little light. */
.panel h2 { text-shadow: 0 0 16px rgba(240, 207, 131, .18); }


/* =========================================================
   CONSTELLATION 2.6
   ========================================================= */

/* Hero matches the other panels' opacity. */
.hero {
  background:
    radial-gradient(circle at 84% 22%, rgba(240, 207, 131, .08), transparent 16rem),
    linear-gradient(180deg, rgba(14, 18, 36, .74), rgba(6, 9, 22, .9));
}

/* Charted maps now sit under the neck, above the export row. */
.maps-bar-below {
  margin: 16px 0 0;
  padding: 14px;
}

/* Instrument menu glyphs: gold line art with a glow. */
.star-select-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.star-select-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #f0cf83;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(240, 207, 131, .75)) drop-shadow(0 0 9px rgba(240, 207, 131, .3));
}

.star-select-value { display: inline-flex; align-items: center; }
.star-select-group-label { display: flex; align-items: center; }
.star-select-group-label .star-select-icon { width: 16px; height: 16px; margin-right: 7px; }
.star-select-group-label .star-select-icon svg { width: 16px; height: 16px; }

/* Where a short string does not exist (banjo 5th, frets 1-4). */
.fret-cell.no-string {
  background:
    repeating-linear-gradient(135deg, rgba(214, 173, 92, .06) 0 3px, transparent 3px 8px),
    rgba(4, 7, 16, .7);
}
.fret-cell.no-string::before,
.fret-cell.no-string::after { display: none; }

/* Peg mark where a short string's trace begins. */
.trace-overlay .trace-peg { fill: #e6c877; fill-opacity: .85; stroke: #8a6f3a; stroke-width: 1; }


/* =========================================================
   CONSTELLATION 2.7 — String gauge
   Each row's string line is as thick as its approximate gauge
   (--sw, set per cell by app.js); wound strings get a wrap texture.
   ========================================================= */
.fret-cell {
  --sw: 2px;
  background:
    linear-gradient(
      to bottom,
      transparent calc(50% - var(--sw) / 2),
      var(--string) calc(50% - var(--sw) / 2),
      var(--string) calc(50% + var(--sw) / 2),
      transparent calc(50% + var(--sw) / 2)
    ),
    rgba(6, 9, 20, .82);
}

.fret-cell.open-cell {
  background:
    linear-gradient(
      to bottom,
      transparent calc(50% - var(--sw) / 2),
      var(--string) calc(50% - var(--sw) / 2),
      var(--string) calc(50% + var(--sw) / 2),
      transparent calc(50% + var(--sw) / 2)
    ),
    linear-gradient(180deg, rgba(230, 214, 166, 0.10), rgba(5, 16, 24, 0.96));
}

/* Winding: a fine stripe band exactly the string's height. */
.fret-cell.wound {
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    linear-gradient(
      to bottom,
      transparent calc(50% - var(--sw) / 2),
      #a89a72 calc(50% - var(--sw) / 2),
      #a89a72 calc(50% + var(--sw) / 2),
      transparent calc(50% + var(--sw) / 2)
    );
  background-size: 3px var(--sw), auto;
  background-position: 0 center, 0 0;
  background-repeat: repeat-x, no-repeat;
}

.fret-cell.wound.open-cell {
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    linear-gradient(
      to bottom,
      transparent calc(50% - var(--sw) / 2),
      #a89a72 calc(50% - var(--sw) / 2),
      #a89a72 calc(50% + var(--sw) / 2),
      transparent calc(50% + var(--sw) / 2)
    ),
    linear-gradient(180deg, rgba(230, 214, 166, 0.10), rgba(5, 16, 24, 0.96));
  background-size: 3px var(--sw), auto, auto;
  background-position: 0 center, 0 0, 0 0;
  background-repeat: repeat-x, no-repeat, no-repeat;
}

.fret-cell.no-string { background-image: none; }


/* =========================================================
   CONSTELLATION 2.8 — Riff Map
   ========================================================= */
.riff-help { margin: 0 0 14px; color: var(--muted); font-size: .84rem; line-height: 1.5; max-width: 820px; }
.riff-seed { font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: .08em; color: var(--brass-bright); font-size: .95rem; }

.riff-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 14px; }
.riff-control { display: grid; gap: 6px; }
.riff-style-select { width: 300px; }
.riff-style-select .star-select-menu { width: 100%; min-width: 0; }
.riff-actions { grid-auto-flow: column; align-items: center; gap: 6px; }
.riff-actions .text-button { min-height: 38px; }
.riff-actions .primary-button { min-height: 38px; padding: 0 18px; }

.riff-neck-scroll { overflow-x: auto; padding: 4px 0 8px; }

.riff-neck {
  --riff-cols: 6;
  position: relative;
  display: grid;
  grid-template-columns: 46px repeat(var(--riff-cols), minmax(44px, 1fr));
  gap: 0;
  min-width: calc(46px + var(--riff-cols) * 44px);
  border: 1px solid rgba(214, 173, 92, .3);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(6, 9, 20, .7);
  box-shadow: inset 0 1px 0 rgba(240, 207, 131, .12), 0 16px 40px rgba(0, 0, 0, .4);
}

.riff-neck-empty {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.riff-neck-empty::before {
  content: "✦   no riff charted yet   ✦";
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: .18em;
  color: rgba(230, 214, 166, .45);
  font-size: .78rem;
}

.riff-cell {
  --sw: 2px;
  position: relative;
  min-height: 46px;
  border-right: 1px solid rgba(214, 173, 92, .14);
  border-bottom: 1px solid rgba(214, 173, 92, .1);
  background:
    linear-gradient(to bottom, transparent calc(50% - var(--sw) / 2), var(--string) calc(50% - var(--sw) / 2), var(--string) calc(50% + var(--sw) / 2), transparent calc(50% + var(--sw) / 2)),
    rgba(6, 9, 20, .5);
}

.riff-cell.riff-open {
  border-right: 4px solid var(--brass-bright);
  background:
    linear-gradient(to bottom, transparent calc(50% - var(--sw) / 2), var(--string) calc(50% - var(--sw) / 2), var(--string) calc(50% + var(--sw) / 2), transparent calc(50% + var(--sw) / 2)),
    rgba(230, 214, 166, .06);
}

.riff-cell.no-string { background: repeating-linear-gradient(135deg, rgba(214, 173, 92, .06) 0 3px, transparent 3px 8px), rgba(4, 7, 16, .7); }

.riff-cell.riff-head,
.riff-cell.riff-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  background: rgba(9, 13, 26, .9);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.riff-cell.riff-head.riff-open { color: var(--brass-bright); }
.riff-cell.riff-label { flex-direction: column; gap: 1px; line-height: 1; }
.riff-cell.riff-label strong { color: var(--text); font-size: .78rem; }
.riff-cell.riff-label small { font-size: .62rem; }
.riff-corner { background: rgba(9, 13, 26, .9); }

.riff-star {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  min-width: 34px;
  min-height: 34px;
  padding: 3px 6px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(160deg, #f7ecd0, #e2d3ac);
  color: #0b0d14;
  box-shadow: 0 0 0 1px rgba(214, 173, 92, .45), 0 0 12px rgba(240, 207, 131, .35), 0 2px 8px rgba(0, 0, 0, .45);
  line-height: 1;
}

.riff-star b { font-size: .8rem; font-weight: 800; }
.riff-star small { font-size: .56rem; font-weight: 700; opacity: .75; }
.riff-star.root { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 45%), linear-gradient(160deg, #f8dc95, #d9ad55); box-shadow: 0 0 0 2px rgba(240, 207, 131, .35), 0 0 18px rgba(240, 207, 131, .55), 0 2px 8px rgba(0, 0, 0, .45); }
.riff-star.anchor:not(.root) { box-shadow: 0 0 0 2px rgba(111, 209, 198, .5), 0 0 14px rgba(111, 209, 198, .4), 0 2px 8px rgba(0, 0, 0, .45); }
.riff-star.playing { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255, 243, 207, .9); }

.riff-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.riff-trace path { fill: none; stroke: #e6c877; stroke-opacity: .85; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(230, 200, 119, .7)); }

.riff-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }

.riff-chip {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: baseline;
  padding: 6px 10px;
  border: 1px solid rgba(214, 173, 92, .3);
  border-radius: 9px;
  background: rgba(11, 16, 32, .9);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.riff-chip small { grid-row: 1 / span 2; align-self: center; font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--brass); font-size: .8rem; }
.riff-chip strong { font-size: .95rem; }
.riff-chip span { font-size: .72rem; color: var(--brass-bright); font-weight: 800; }
.riff-chip em { grid-column: 2 / span 2; font-style: normal; font-size: .62rem; color: var(--muted); letter-spacing: .04em; }
.riff-chip.root strong { color: var(--brass-bright); }
.riff-chip.locked { border-color: var(--brass-bright); background: linear-gradient(180deg, rgba(217, 184, 103, .22), rgba(184, 141, 63, .18)); box-shadow: 0 0 12px rgba(240, 207, 131, .25); }
.riff-chip.locked small::after { content: " 🔒"; font-style: normal; font-size: .6rem; }
.riff-chip:hover { border-color: var(--brass-bright); }

.riff-summary { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

@media (max-width: 760px) {
  .riff-style-select { width: 100%; }
  .riff-actions { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   CONSTELLATION 2.9 — Finder round
   ========================================================= */
.neighbours { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(214, 173, 92, .22); border-radius: 13px; background: rgba(9, 13, 26, .55); }
.neighbours-hint { color: var(--muted); font-size: .76rem; }
.neighbour-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.neighbour-btn { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid rgba(214, 173, 92, .26); border-radius: 9px; background: rgba(11, 16, 32, .85); color: var(--text); text-align: left; cursor: pointer; }
.neighbour-btn strong { font-size: .8rem; }
.neighbour-btn span { font-size: .7rem; color: var(--muted); }
.neighbour-btn span s { color: #e07a5f; text-decoration: line-through; }
.neighbour-btn span b { color: var(--brass-bright); }
.neighbour-btn:hover { border-color: var(--brass-bright); background: rgba(214, 173, 92, .1); }

.diatonic-wrap { flex-basis: 100%; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(214, 173, 92, .16); }
.diatonic-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.diatonic-heading .text-button { min-height: 30px; font-size: .72rem; }
.diatonic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.diatonic-btn { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border: 1px solid rgba(214, 173, 92, .26); border-radius: 9px; background: rgba(11, 16, 32, .85); color: var(--text); cursor: pointer; }
.diatonic-btn small { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .7rem; letter-spacing: .12em; color: var(--brass); }
.diatonic-btn strong { font-family: Georgia, "Times New Roman", serif; font-size: .98rem; }
.diatonic-btn span { font-size: .62rem; color: var(--muted); letter-spacing: .04em; }
.diatonic-btn:hover { border-color: var(--brass-bright); background: rgba(214, 173, 92, .1); }
.diatonic-btn.current { border-color: var(--brass-bright); background: linear-gradient(180deg, rgba(217, 184, 103, .22), rgba(184, 141, 63, .18)); box-shadow: 0 0 12px rgba(240, 207, 131, .25); }

.sighting-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.sighting-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sighting-chip { min-width: 44px; min-height: 38px; padding: 6px 10px; border: 1px solid rgba(214, 173, 92, .3); border-radius: 999px; background: rgba(11, 16, 32, .9); color: var(--text); font-weight: 800; cursor: pointer; }
.sighting-chip:hover { border-color: var(--brass-bright); }
.sighting-chip.on { color: #10131f; background: linear-gradient(180deg, #f2d48a, #d9b867 45%, #b88d3f); border-color: #ebcf8d; box-shadow: 0 0 14px rgba(240, 207, 131, .35); }
.sighting-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sighting-actions .text-button { min-height: 36px; }
.sighting-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; margin-top: 10px; }
.sighting-result { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid rgba(214, 173, 92, .26); border-radius: 9px; background: rgba(11, 16, 32, .85); color: var(--text); text-align: left; cursor: pointer; }
.sighting-result strong { font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.sighting-result span { font-size: .7rem; color: var(--muted); }
.sighting-result.exact { border-color: rgba(240, 207, 131, .6); }
.sighting-result.exact span { color: var(--brass-bright); }
.sighting-result.current { background: linear-gradient(180deg, rgba(217, 184, 103, .22), rgba(184, 141, 63, .18)); }
.sighting-result:hover { border-color: var(--brass-bright); }
.sighting-more { grid-column: 1 / -1; justify-self: start; }


/* =========================================================
   CONSTELLATION 3.0 — Strings on the chart + labeling pass
   ========================================================= */
.strings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 173, 92, .22);
  border-radius: 13px;
  background: rgba(9, 13, 26, .55);
}
.strings-copy { display: grid; gap: 3px; max-width: 520px; }
.strings-copy strong { font-size: .86rem; letter-spacing: .04em; }
.strings-copy span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.strings-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.strings-controls .text-button { min-height: 38px; }
.string-toggles { display: flex; flex-wrap: wrap; gap: 5px; }

.string-toggle {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 52px;
  padding: 5px 8px;
  border: 1px solid rgba(214, 173, 92, .35);
  border-radius: 9px;
  background: rgba(11, 16, 32, .9);
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.string-toggle small { font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.string-toggle strong { font-size: .95rem; }
.string-toggle.on { color: #10131f; background: linear-gradient(180deg, #f2d48a, #d9b867 45%, #b88d3f); border-color: #ebcf8d; box-shadow: 0 0 12px rgba(240, 207, 131, .3); }
.string-toggle.on small { color: rgba(16, 19, 31, .65); }
.string-toggle.off { opacity: .55; text-decoration: line-through; }
.string-toggle:hover { border-color: var(--brass-bright); opacity: 1; }
.string-toggles-compact .string-toggle { min-width: 40px; padding: 4px 6px; }
.string-toggles-compact .string-toggle strong { font-size: .8rem; }

/* A string switched off: its row stays, dimmed and unstrung. */
.fret-cell.string-off {
  background-image: none;
  background-color: rgba(4, 7, 16, .75);
  opacity: .5;
}
.string-label.string-off { opacity: .55; cursor: pointer; }
.string-label { cursor: pointer; }
.string-label:hover { color: var(--brass-bright); }


/* =========================================================
   CONSTELLATION 3.1 — Playing in (key → scale picker)
   ========================================================= */
.key-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 10px; }
.key-control { display: grid; gap: 6px; }
.key-root-select { width: 150px; }
.key-results { display: grid; gap: 14px; margin-top: 10px; }
.key-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.key-group-heading strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; letter-spacing: .04em; color: var(--brass-bright); }
.key-group-heading span { color: var(--muted); font-size: .76rem; }
.key-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.key-option { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid rgba(214, 173, 92, .26); border-radius: 9px; background: rgba(11, 16, 32, .85); color: var(--text); text-align: left; cursor: pointer; }
.key-option strong { font-size: .86rem; }
.key-option .key-mood { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .82rem; color: var(--brass-bright); }
.key-option small { font-size: .66rem; color: var(--muted); letter-spacing: .03em; }
.key-option em { font-style: normal; font-size: .66rem; color: #e39cc0; }
.key-option:hover { border-color: var(--brass-bright); background: rgba(214, 173, 92, .1); }
.key-option.current { border-color: var(--brass-bright); background: linear-gradient(180deg, rgba(217, 184, 103, .22), rgba(184, 141, 63, .18)); }
.key-group-home .key-group-heading strong { color: #cfe6a8; }
.key-group-spice .key-group-heading strong { color: #e39cc0; }