.practice-tool {
  --practice-tool-accent: #246b68;
  --practice-tool-accent-rgb: 36, 107, 104;
  --practice-tool-panel: var(--bs-body-bg);
  --practice-tool-line: var(--bs-border-color);
  overflow: hidden;
}

.practice-tool--bergonzi {
  --practice-tool-accent: #8a5d00;
  --practice-tool-accent-rgb: 138, 93, 0;
}

.practice-tool--enclosure {
  --practice-tool-accent: #a73552;
  --practice-tool-accent-rgb: 167, 53, 82;
}

.practice-tool .form-label {
  letter-spacing: .04em;
}

.practice-tool__controls {
  position: sticky;
  top: 1rem;
}

.practice-tool__controls,
.practice-tool__toolbar {
  padding: 1rem;
  border: 1px solid var(--practice-tool-line);
  border-radius: .75rem;
  background: var(--practice-tool-panel);
}

.practice-tool__toolbar {
  min-height: 4rem;
}

.practice-tool__status {
  min-height: 1.25rem;
}

.bergonzi-practice-grid,
.enclosure-practice-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.bergonzi-practice-panel,
.enclosure-practice-panel {
  display: block;
}

.bergonzi-results,
.enclosure-results {
  min-width: 0;
}

.bergonzi-disclosure,
.enclosure-disclosure {
  border: 1px solid var(--practice-tool-line);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--practice-tool-accent) 8%);
}

.bergonzi-disclosure summary,
.enclosure-disclosure summary {
  min-height: 2.75rem;
  padding: .75rem .9rem;
  cursor: pointer;
  font-weight: 650;
  outline-offset: .2rem;
}

.bergonzi-disclosure__body,
.enclosure-disclosure__body {
  padding: 0 .9rem .9rem;
}

.bergonzi-preset-grid,
.enclosure-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.practice-tool [data-bergonzi-intervallic-melodies-target="output"] > .col-12 > .border,
.practice-tool [data-enclosure-target="output"] > .col-12 > .border {
  border-color: var(--practice-tool-line) !important;
  background: var(--bs-body-bg);
  box-shadow: 0 .35rem 1.5rem rgba(0, 0, 0, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.practice-tool [data-bergonzi-intervallic-melodies-target="output"] > .col-12 > .border:hover,
.practice-tool [data-enclosure-target="output"] > .col-12 > .border:hover {
  border-color: var(--bs-border-color-translucent) !important;
  box-shadow: 0 .55rem 1.75rem rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.practice-tool [data-controller~="osmd-viewer"] {
  border-color: var(--bs-border-color) !important;
  background: transparent !important;
  color: var(--bs-emphasis-color);
}

.practice-tool [data-controller~="osmd-viewer"] [data-osmd-viewer-target="container"],
.practice-tool [data-controller~="osmd-viewer"] svg,
.practice-tool [data-controller~="osmd-viewer"] canvas {
  background: transparent !important;
}

.bergonzi-line-card {
  border: 1px solid var(--practice-tool-line);
  border-radius: .75rem;
  background: var(--bs-body-bg);
  box-shadow: 0 .35rem 1.5rem rgba(0, 0, 0, .04);
  overflow: hidden;
}

.enclosure-line-card {
  border: 1px solid var(--practice-tool-line);
  border-radius: .9rem;
  background: var(--bs-body-bg);
  box-shadow: 0 .55rem 1.75rem rgba(0, 0, 0, .055);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.enclosure-line-card:hover {
  border-color: rgba(var(--practice-tool-accent-rgb), .28);
  box-shadow: 0 .85rem 2.25rem rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

.enclosure-line-card__head,
.enclosure-line-card__body {
  padding: 1.15rem;
}

.enclosure-line-card__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--practice-tool-line);
}

.enclosure-line-card__actions {
  flex-shrink: 0;
}

.enclosure-line-card__actions .btn {
  min-height: 2.25rem;
}

.enclosure-line-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.enclosure-line-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: .5rem;
  color: var(--bs-border-color);
}

.enclosure-line-card__body {
  display: grid;
  gap: 1rem;
}

.enclosure-note-sequence,
.enclosure-unit__notes,
.enclosure-contour,
.enclosure-role-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.enclosure-unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}

.enclosure-unit {
  position: relative;
  padding: .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .8rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bs-body-bg) 92%, var(--practice-tool-accent) 8%), var(--bs-tertiary-bg));
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.enclosure-unit:hover {
  border-color: rgba(var(--practice-tool-accent-rgb), .32);
  box-shadow: inset 0 0 0 1px rgba(var(--practice-tool-accent-rgb), .08);
}

.enclosure-unit__label {
  margin-bottom: .45rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}

.enclosure-note-token {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.1rem;
  padding: .35rem .55rem;
  border: 1px solid rgba(var(--practice-tool-accent-rgb), .28);
  border-radius: .45rem;
  background: color-mix(in srgb, var(--bs-body-bg) 84%, var(--practice-tool-accent) 16%);
  color: var(--bs-emphasis-color);
  font-weight: 750;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.enclosure-note-token:hover {
  transform: translateY(-1px);
}

.enclosure-note-token.is-diatonic {
  border-color: rgba(25, 135, 84, .42);
  background: color-mix(in srgb, var(--bs-success-bg-subtle) 70%, var(--bs-body-bg) 30%);
  color: color-mix(in srgb, var(--bs-emphasis-color) 82%, #198754 18%);
}

.enclosure-note-token.is-chromatic {
  border-color: rgba(180, 83, 9, .48);
  background: color-mix(in srgb, var(--bs-warning-bg-subtle) 72%, var(--bs-body-bg) 28%);
  color: color-mix(in srgb, var(--bs-emphasis-color) 78%, #b45309 22%);
}

.enclosure-note-token.is-target {
  border-color: rgba(var(--practice-tool-accent-rgb), .7);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .5), transparent 45%),
    color-mix(in srgb, var(--bs-danger-bg-subtle) 66%, var(--practice-tool-accent) 34%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--practice-tool-accent-rgb), .28),
    0 .45rem 1.15rem rgba(var(--practice-tool-accent-rgb), .2);
  color: var(--bs-emphasis-color);
  min-width: 3.2rem;
  min-height: 2.55rem;
  font-size: 1.08rem;
  transform: translateY(-1px);
}

.enclosure-unit__connector {
  color: rgba(var(--practice-tool-accent-rgb), .7);
  font-weight: 800;
}

.enclosure-unit__phrase {
  gap: .35rem;
}

.enclosure-contour-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .25rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-size: .8125rem;
  font-weight: 700;
}

.enclosure-contour-chip.is-up {
  border-color: rgba(13, 110, 253, .35);
  background: color-mix(in srgb, var(--bs-primary-bg-subtle) 68%, var(--bs-body-bg) 32%);
}

.enclosure-contour-chip.is-down {
  border-color: rgba(111, 66, 193, .35);
  background: color-mix(in srgb, var(--bs-info-bg-subtle) 68%, var(--bs-body-bg) 32%);
}

.enclosure-rhythm-hint {
  padding: .55rem .7rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--bs-body-bg) 88%, var(--practice-tool-accent) 12%);
  color: var(--bs-secondary-color);
  font-size: .8125rem;
}

.enclosure-role-legend {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.enclosure-role-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.enclosure-role-legend .enclosure-note-token {
  min-width: 1rem;
  min-height: 1rem;
  width: 1rem;
  height: 1rem;
  padding: 0;
}

.enclosure-line-card__score {
  max-width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--practice-tool-line);
  background: transparent;
  padding: .75rem;
}

.bergonzi-line-card__head,
.bergonzi-line-card__body {
  padding: 1rem;
}

.bergonzi-line-card__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--practice-tool-line);
}

.bergonzi-line-card__actions,
.bergonzi-line-card__meta,
.bergonzi-line-card__notes,
.bergonzi-line-card__contour,
.bergonzi-line-card__directions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.bergonzi-line-card__actions .btn {
  min-height: 2.25rem;
}

.bergonzi-line-card__meta {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

.bergonzi-line-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: .5rem;
  color: var(--bs-border-color);
}

.bergonzi-line-card__body {
  display: grid;
  gap: .75rem;
}

.bergonzi-line-card__score {
  max-width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--practice-tool-line);
  background: transparent;
  padding: .75rem;
}

.bergonzi-note-token,
.bergonzi-contour-chip,
.bergonzi-direction-step__label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: .45rem;
  line-height: 1;
}

.bergonzi-note-token {
  padding: .35rem .55rem;
  background: color-mix(in srgb, var(--bs-body-bg) 86%, var(--practice-tool-accent) 14%);
  border: 1px solid rgba(var(--practice-tool-accent-rgb), .28);
  font-weight: 700;
}

.bergonzi-note-token.is-start {
  background: rgba(var(--practice-tool-accent-rgb), .16);
}

.bergonzi-contour-chip {
  gap: .35rem;
  padding: .3rem .5rem;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
  font-size: .875rem;
}

.bergonzi-contour-chip.is-repeated {
  border-color: rgba(var(--practice-tool-accent-rgb), .55);
  box-shadow: inset 0 0 0 1px rgba(var(--practice-tool-accent-rgb), .18);
}

.bergonzi-contour-chip.is-mirrored {
  background: color-mix(in srgb, var(--bs-info-bg-subtle) 70%, var(--bs-body-bg) 30%);
}

.bergonzi-direction-step {
  display: inline-grid;
  grid-template-columns: 2.25rem minmax(2.5rem, auto) 2.25rem;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}

.bergonzi-direction-step__label {
  justify-content: center;
  padding: 0 .45rem;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .8125rem;
  font-weight: 700;
}

.bergonzi-interval-graphical-harmony .sandbox-graphical-harmony {
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}

.bergonzi-interval-graphical-harmony .sandbox-graphical-harmony__canvas-wrap {
  border-radius: .75rem;
}

.bergonzi-interval-list {
  max-height: 12rem;
  overflow: auto;
  padding-right: .15rem;
}

.bergonzi-learning,
.enclosure-learning {
  padding: 2rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}

.bergonzi-learning h2,
.enclosure-learning h2 {
  font-size: 1.2rem;
  margin-top: 1.35rem;
}

.bergonzi-learning h2:first-child,
.enclosure-learning h2:first-child {
  margin-top: 0;
}

.bergonzi-learning__flow,
.enclosure-learning__flow {
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-tertiary-bg);
}

.bergonzi-learning__flow li + li,
.enclosure-learning__flow li + li {
  margin-top: .45rem;
}

.bergonzi-learning__links,
.enclosure-learning__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.bergonzi-learning__links a,
.enclosure-learning__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: .4rem .65rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  text-decoration: none;
  background: var(--bs-body-bg);
}

.practice-tool :focus-visible,
.bergonzi-learning a:focus-visible,
.enclosure-learning a:focus-visible {
  outline: .2rem solid rgba(var(--practice-tool-accent-rgb), .35);
  outline-offset: .18rem;
}

@media (max-width: 1199.98px) {
  .practice-tool__controls {
    position: static;
  }

  .bergonzi-practice-grid,
  .enclosure-practice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .bergonzi-line-card__head,
  .enclosure-line-card__head {
    display: grid;
  }

  .bergonzi-line-card__actions,
  .enclosure-line-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bergonzi-line-card__actions .btn,
  .enclosure-line-card__actions .btn {
    width: 100%;
  }

  .bergonzi-preset-grid,
  .enclosure-preset-grid {
    grid-template-columns: 1fr;
  }

  .enclosure-note-token {
    min-width: 2.6rem;
    min-height: 2.45rem;
  }

  .enclosure-unit-grid {
    grid-template-columns: 1fr;
  }

  .enclosure-line-card__head,
  .enclosure-line-card__body {
    padding: 1rem;
  }

  .enclosure-unit {
    padding: .8rem;
  }

  .bergonzi-interval-list .btn {
    min-height: 2.25rem;
  }

  .bergonzi-learning,
  .enclosure-learning {
    padding: 1rem;
  }
}