/* src/style.css */
@keyframes settings-panel-rise {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}
:where(:is(h1, h2, h3, h4, h5, h6), :is(p, blockquote, pre, address)) {
  overflow-wrap: break-word;
}
:where(:is(h1, h2, h3, h4, h5, h6)) {
  text-wrap: pretty;
}
:where(:is(p, blockquote, pre, address)) {
  text-wrap: pretty;
}
:where(a) {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}
:where(:is(ul, ol, menu, dir)[role=list]) {
  list-style: none;
}
:where(:is(ul, ol, menu, dir), :is(input, textarea, select, button, fieldset, legend, label, output, progress, meter)) {
  margin: 0;
  padding: 0;
}
:where(:is(input, textarea, select, button, fieldset, legend, label, output, progress, meter)) {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1rem;
  border: none;
  color: currentColor;
}
:where(:is(img, picture, video, canvas, svg, audio, iframe, embed, object)) {
  block-size: auto;
  max-inline-size: 100%;
}
:root:not(#\#):not(#\#):not(#\#):not(#\#) {
  --font-sans: var(--critical-font-sans, "Avenir Next", "Segoe UI", sans-serif);
  --font-mono:
    "IBM Plex Mono",
    Menlo,
    Consolas,
    monospace;
  --gap: 1rem;
  --gap-xxs: calc(var(--gap) * .375);
  --gap-xs: calc(var(--gap) * .5);
  --gap-sm: calc(var(--gap) * .75);
  --gap-md: var(--gap);
  --gap-lg: calc(var(--gap) * 1.25);
  --gap-xl: calc(var(--gap) * 1.5);
  --shadow: 0 1.5rem 3.75rem color-mix(in oklab, var(--ink) 16%, transparent);
  --shadow-soft: 0 1.125rem 2.125rem color-mix(in oklab, var(--teal) 24%, transparent);
  --shadow-float: 0 1.5rem 3rem color-mix(in oklab, var(--ink) 20%, transparent);
  --shadow-glass: 0 1.125rem 2.25rem rgb(0 0 0 / 16%);
  --shadow-transport-soft: 0 .75rem 1.375rem rgb(0 0 0 / 16%);
  --shadow-transport-active: 0 1rem 1.75rem rgb(15 26 23 / 22%);
  --focus-ring: 0 0 0 .25rem color-mix(in oklab, var(--teal) 12%, transparent);
  --radius-panel: 1.75rem;
  --radius-panel-compact: 1.5rem;
  --radius-control: 1.125rem;
  --radius-pill: calc(infinity * 1rem);
  --transition-fast: 140ms ease;
  --transition-panel: 220ms cubic-bezier(.2, .8, .2, 1);
  --viewport-gutter: 1.5rem ;
}
:root:not(#\#):not(#\#) {
  --csstools-color-scheme--light: initial;
  color-scheme: light;
  --paper: rgb(248, 237, 218);
  --ink: rgb(31, 44, 41);
  --ink-soft: color-mix(in oklab, var(--ink) 72%, white);
  --ink-faint: color-mix(in oklab, var(--ink) 54%, white);
  --teal: rgb(45, 105, 97);
  --teal-deep: color-mix(in oklab, var(--teal) 68%, black);
  --accent: rgb(210, 182, 139);
  --accent-ink: color-mix(in oklab, var(--accent) 62%, black);
  --danger: rgb(185, 91, 61);
  --danger-deep: color-mix(in oklab, var(--danger) 68%, black);
  --surface-page-background:
    radial-gradient(
      circle at 20% 20%,
      color-mix(in oklab, var(--accent) 24%, transparent),
      transparent 28%),
    radial-gradient(
      circle at 85% 15%,
      color-mix(in oklab, var(--teal) 28%, transparent),
      transparent 24%),
    linear-gradient(
      180deg,
      rgb(16, 30, 27) 0%,
      rgb(29, 45, 41) 52%,
      rgb(13, 25, 22) 100%);
  --surface-page-grid-x:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgb(255 255 255 / 2.5%) 24px);
  --surface-page-grid-y:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgb(255 255 255 / 2.5%) 24px);
  --surface-paper:
    linear-gradient(
      180deg,
      rgb(252 246 235 / 97%),
      rgb(244 233 209 / 95%)),
    radial-gradient(
      circle at 100% 0%,
      color-mix(in oklab, var(--danger) 22%, transparent),
      transparent 26%);
  --surface-paper-warm:
    linear-gradient(
      180deg,
      rgb(249 240 223 / 97%),
      rgb(239 225 196 / 95%)),
    radial-gradient(
      circle at top right,
      color-mix(in oklab, var(--danger) 24%, transparent),
      transparent 22%);
  --surface-panel:
    linear-gradient(
      180deg,
      rgb(255 251 244 / 94%),
      rgb(243 232 208 / 94%)),
    radial-gradient(
      circle at top right,
      color-mix(in oklab, var(--danger) 20%, transparent),
      transparent 26%);
  --surface-glass: rgba(0, 0, 0, 0.58);
  --surface-glass-hover: rgba(0, 0, 0, 0.5);
  --surface-glass-border: rgba(255, 255, 255, 0.18);
  --surface-glass-ink: rgb(255 246 234 / 88%);
  --surface-glass-ink-muted: rgb(255 246 234 / 78%);
  --surface-glass-active:
    linear-gradient(
      135deg,
      rgb(244 233 209 / 90%),
      rgb(232 214 180 / 86%));
  --surface-transport: rgb(12 24 21 / 46%);
  --surface-transport-border: rgb(255 246 234 / 14%);
  --surface-transport-button: rgb(255 246 234 / 8%);
  --surface-transport-button-border: rgb(255 246 234 / 16%);
  --surface-transport-button-hover: rgb(255 246 234 / 12%);
  --surface-transport-button-hover-border: rgb(255 246 234 / 28%);
  --surface-transport-button-ink: rgb(255 246 234 / 88%);
  --surface-transport-page-border: rgb(195 174 135 / 42%);
  --surface-transport-active:
    linear-gradient(
      135deg,
      rgb(244 233 209 / 92%),
      rgb(232 214 180 / 88%));
  --surface-transport-active-border: rgb(195 174 135 / 82%);
  --surface-transport-active-ink: #1d2a27;
  --surface-accent-strong:
    linear-gradient(
      135deg,
      #245f59,
      #183f3a);
  --text-on-accent: #fffaf2;
  --surface-input: rgb(255 250 242 / 88%);
  --surface-input-focus: rgb(255 250 242 / 96%);
  --surface-input-border: rgb(105 123 116 / 24%);
  --surface-input-border-strong: rgb(36 95 89 / 70%);
  --surface-status-error: rgb(252 231 224 / 92%);
  --surface-status-error-border: rgb(185 82 44 / 28%);
  --surface-status-error-ink: #7f3518;
  --surface-status-ok: rgb(225 239 234 / 94%);
  --surface-status-warning: rgb(178 140 52 / 12%);
  --surface-status-warning-border: rgb(178 140 52 / 24%);
  --surface-status-warning-ink: #7a5611;
  --border-soft: color-mix(in oklab, var(--ink) 14%, transparent);
  --border-panel: color-mix(in oklab, var(--accent) 52%, white);
  --border-accent: color-mix(in oklab, var(--teal) 42%, transparent);
  --border-accent-strong: color-mix(in oklab, var(--teal) 68%, transparent);
  --border-danger: color-mix(in oklab, var(--danger) 42%, transparent);
  --notation-music-active: #b9522c;
  --notation-music-boundary: #6f7b76;
  --notation-music-chord-tone: #245f59;
  --notation-music-error: #a94f30;
  --notation-music-event-active: #d46a39;
  --notation-music-leading: #7a8541;
  --notation-music-muted: #9ea7a3;
  --notation-music-neutral: #1d2a27;
  --notation-music-selected: #1f6a63;
  --notation-piano-hand-single-white: #8e6720;
  color: var(--ink);
  background: var(--critical-shell-bg);
}
body:not(#\#):not(#\#) {
  background: var(--surface-page-background);
  color: var(--ink);
}
body:not(#\#):not(#\#)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background: var(--surface-page-grid-x), var(--surface-page-grid-y);
}
:root:not(#\#):not(#\#):not(#\#):not(#\#) {
  --harmonic-family-maj-bg: rgb(178 140 52 / 8%);
  --harmonic-family-maj-border: rgb(178 140 52 / 20%);
  --harmonic-family-maj-ink: #7a5611;
  --harmonic-family-maj-selected-bg:
    linear-gradient(
      135deg,
      #b28c34,
      #7a5611);
  --harmonic-family-min7-bg: rgb(54 105 168 / 8%);
  --harmonic-family-min7-border: rgb(54 105 168 / 20%);
  --harmonic-family-min7-ink: #284f7f;
  --harmonic-family-min7-selected-bg:
    linear-gradient(
      135deg,
      #3669a8,
      #1e4270);
  --harmonic-family-min6-bg: rgb(72 128 160 / 8%);
  --harmonic-family-min6-border: rgb(72 128 160 / 20%);
  --harmonic-family-min6-ink: #24526c;
  --harmonic-family-min6-selected-bg:
    linear-gradient(
      135deg,
      #4880a0,
      #28546e);
  --harmonic-family-dom-bg: rgb(198 99 35 / 8%);
  --harmonic-family-dom-border: rgb(198 99 35 / 20%);
  --harmonic-family-dom-ink: #8f4316;
  --harmonic-family-dom-selected-bg:
    linear-gradient(
      135deg,
      #c66323,
      #8f4316);
  --harmonic-family-dom7b5-bg: rgb(176 48 48 / 8%);
  --harmonic-family-dom7b5-border: rgb(176 48 48 / 20%);
  --harmonic-family-dom7b5-ink: #7f2a2a;
  --harmonic-family-dom7b5-selected-bg:
    linear-gradient(
      135deg,
      #b03030,
      #701818);
  --harmonic-family-m7b5-bg: rgb(112 122 44 / 8%);
  --harmonic-family-m7b5-border: rgb(112 122 44 / 20%);
  --harmonic-family-m7b5-ink: #5c6421;
  --harmonic-family-m7b5-selected-bg:
    linear-gradient(
      135deg,
      #707a2c,
      #4e5618);
  --harmonic-family-dim-bg: rgb(96 104 118 / 8%);
  --harmonic-family-dim-border: rgb(96 104 118 / 20%);
  --harmonic-family-dim-ink: #505764;
  --harmonic-family-dim-selected-bg:
    linear-gradient(
      135deg,
      #606876,
      #3a404a) ;
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 100vh;
  min-inline-size: 0;
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  gap: 1rem;
  position: sticky;
  inset-block-start: calc(1rem + env(safe-area-inset-top));
  z-index: 28;
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  min-inline-size: 0;
  gap: .625rem;
  overflow: auto hidden;
  scrollbar-width: none;
}
:is(body > header > nav):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar {
  display: none;
}
@media (max-width: 720px) {
  body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > nav {
    justify-content: flex-start;
    overflow: auto;
  }
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .82rem 1.08rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklab, var(--surface-glass-border) 100%, transparent);
  color: var(--surface-glass-ink);
  -webkit-text-decoration: none;
  text-decoration: none;
  background: color-mix(in oklab, var(--surface-glass) 74%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}
[data-app-page-link=etude]:is(body > header > nav > a):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  view-transition-name: workspace-tab-etude;
}
[data-app-page-link=etude-new]:is(body > header > nav > a):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  view-transition-name: workspace-tab-etude-new;
}
[data-app-page-link=vocabulary]:is(body > header > nav > a):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  view-transition-name: workspace-tab-vocabulary;
}
:is(body > header > nav > a):hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
:is(body > header > nav > a):focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  outline: none;
  border-color: color-mix(in oklab, var(--surface-glass-border) 180%, transparent);
  background: var(--surface-glass-hover);
  box-shadow: var(--shadow-glass);
}
[data-selected=true]:is(body > header > nav > a):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: color-mix(in oklab, var(--border-panel) 100%, transparent);
  color: var(--ink);
  background: var(--surface-glass-active);
  box-shadow: 0 1rem 1.75rem color-mix(in oklab, var(--ink) 16%, transparent);
}
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-group(workspace-playback) {
  block-size: 100%;
}
#root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  min-inline-size: 0;
  min-block-size: 0;
}
#root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > * {
  display: grid;
  min-inline-size: 0;
  gap: 1rem;
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--surface-glass-ink-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > span {
  white-space: nowrap;
}
.page-header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: .625rem;
  padding: 1.375rem;
  border-radius: 1.875rem;
  border: 1px solid color-mix(in oklab, var(--border-panel) 86%, transparent);
  box-shadow: var(--shadow);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--surface-paper) 96%, white 4%),
      color-mix(in oklab, var(--surface-paper) 88%, transparent)),
    radial-gradient(
      circle at 100% 0%,
      color-mix(in oklab, var(--teal) 18%, transparent),
      transparent 24%);
}
@media (max-width: 640px) {
  .page-header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    padding: 1.125rem;
    border-radius: 1.5rem;
  }
}
.page-header-copy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  max-inline-size: 68rem;
  gap: .5rem;
}
.page-title:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  margin: 0;
  color: var(--ink);
  font-size: clamp(min(1.5rem, 2.2rem), calc(1.5rem + (2.2rem - 1.5rem) * ((100vw - 30rem) / (88rem - 30rem))), max(1.5rem, 2.2rem));
  line-height: 1;
  letter-spacing: .02em;
  text-wrap: balance;
}
.page-copy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  margin: 0;
  max-inline-size: 60rem;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.panel-cap:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.app-dialog-title-block:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
}
.app-dialog-title-eyebrow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.app-dialog-title-label:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
  line-height: 1.2;
}
.app-dialog-host[data-dialog-provider=cell-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-heading,
.app-dialog-host[data-dialog-provider=voicing-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-heading,
.app-dialog-host[data-dialog-provider=rhythm-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-heading {
  display: none;
}
.app-dialog-host[data-dialog-provider=cell-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-block,
.app-dialog-host[data-dialog-provider=voicing-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-block,
.app-dialog-host[data-dialog-provider=rhythm-editor-dialog]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app-dialog-title-block {
  gap: 0;
}
.app-dialog-title-heading:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  margin: 0;
  font-size: clamp(min(1.9rem, 2.5rem), calc(1.9rem + (2.5rem - 1.9rem) * ((100vw - 30rem) / (88rem - 30rem))), max(1.9rem, 2.5rem));
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.app-dialog-title-meta:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
  word-break: break-word;
}
.app-dialog-title-meta--mono:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-family:
    "IBM Plex Mono",
    Menlo,
    Consolas,
    monospace;
}
.paper-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 14px;
  min-inline-size: 0;
  padding: 18px;
  border-radius: 28px;
  background: var(--surface-paper);
  border: 1px solid color-mix(in oklab, var(--border-panel) 90%, transparent);
  box-shadow: var(--shadow);
}
.compact-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  gap: 12px;
}
.composer-strip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: var(--surface-paper-warm);
  border: 1px solid color-mix(in oklab, var(--border-panel) 90%, transparent);
  box-shadow: var(--shadow);
}
.field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 8px;
  min-inline-size: 0;
}
.field-large:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  grid-column: 1 / -1;
}
.field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > :is(textarea, select, input) {
  display: block;
  max-inline-size: 100%;
  min-inline-size: 0;
}
textarea:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
select:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: 100%;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--surface-input-border);
  background: var(--surface-input);
  color: var(--ink);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
textarea:focus:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
select:focus:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
input:focus:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--surface-input-border-strong);
  box-shadow: var(--focus-ring);
}
textarea:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  min-block-size: 168px;
  resize: none;
  font-family:
    "IBM Plex Mono",
    Menlo,
    Consolas,
    monospace;
  font-size: 0.98rem;
  line-height: 1.55;
}
.control-strip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.preview-toolbar:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}
.toolbar-control:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 10px;
  align-self: start;
  min-inline-size: 0;
}
.library-save-bar:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: flex;
}
:is(.primary-action, .secondary-action, .action-button, .panel-toggle, .segment-button, .tone-button, .quality-button):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  cursor: pointer;
}
.notation-chord-marker--interactive:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  cursor: pointer;
}
.notation-chord-marker--interactive:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > :is(text, path, rect, ellipse, line, polygon),
.notation-chord-marker--interactive:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(text, path, rect, ellipse, line, polygon) {
  cursor: pointer;
  transition:
    fill 140ms ease,
    stroke 140ms ease,
    opacity 140ms ease,
    filter 140ms ease;
}
.notation-chord-marker--interactive:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > :is(text, path, rect, ellipse, line, polygon),
.notation-chord-marker--interactive:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(text, path, rect, ellipse, line, polygon),
.notation-chord-marker--interactive:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > :is(text, path, rect, ellipse, line, polygon),
.notation-chord-marker--interactive:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(text, path, rect, ellipse, line, polygon) {
  fill: #1f6a63;
  stroke: #1f6a63;
  filter: drop-shadow(0 0 0.32rem rgb(31 106 99 / 34%));
}
.primary-action:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: 100%;
  padding: 0.98rem 1.14rem;
  border: 1px solid var(--border-accent-strong);
  border-radius: 18px;
  background:
    var(--surface-accent-strong),
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.14),
      transparent 30%);
  color: var(--text-on-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-soft);
  transition:
    box-shadow 140ms ease,
    opacity 140ms ease,
    border-color 140ms ease;
}
.primary-action:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.primary-action:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  box-shadow: 0 22px 38px color-mix(in oklab, var(--teal) 28%, transparent);
  outline: none;
}
.primary-action:disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}
.secondary-action:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 0.98rem;
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--surface-input) 96%, transparent);
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
  transition:
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}
.secondary-action:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.secondary-action:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent-strong);
  box-shadow: 0 12px 22px color-mix(in oklab, var(--teal) 12%, transparent);
  outline: none;
}
.secondary-action:disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}
.action-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: auto;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0.7rem;
  line-height: 0;
  gap: 0;
}
.action-button--icon:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  aspect-ratio: 1;
}
.action-button--with-label:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  gap: 0.55rem;
  padding-inline: 0.9rem 1rem;
  line-height: 1;
}
.action-button__icon:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: block;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  fill: currentcolor;
  stroke: currentcolor;
  pointer-events: none;
}
.action-button__label:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  line-height: 1;
}
.primary-action.action-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-radius: 14px;
}
.primary-action.action-button.action-button--icon:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.7rem;
}
.danger-action:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--surface-status-error-border);
  color: var(--surface-status-error-ink);
  background: var(--surface-status-error);
}
.danger-action:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.danger-action:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-danger);
  box-shadow: 0 12px 22px color-mix(in oklab, var(--danger) 12%, transparent);
  color: var(--danger-deep);
}
.panel-toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 0.35rem;
  place-items: start start;
  padding: 0.92rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--border-accent);
  background:
    linear-gradient(
      180deg,
      var(--surface-input-focus),
      color-mix(in oklab, var(--paper) 88%, var(--accent) 12%)),
    radial-gradient(
      circle at top right,
      color-mix(in oklab, var(--teal) 14%, transparent),
      transparent 34%);
  color: var(--ink);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease;
}
.panel-toggle:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.panel-toggle:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent-strong);
  box-shadow: 0 16px 28px color-mix(in oklab, var(--teal) 14%, transparent);
  outline: none;
}
.panel-toggle[data-open=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.panel-toggle[aria-expanded=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent-strong);
  background: var(--surface-accent-strong);
  color: var(--text-on-accent);
  box-shadow: 0 18px 32px color-mix(in oklab, var(--teal) 22%, transparent);
}
.panel-toggle-label:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.8;
}
.panel-toggle-summary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  color: inherit;
}
:is(.route-page--vocabulary .vocabulary-filter-button, .route-page--vocabulary .library-filter-button, .route-page--voicings .voicing-library-filter-button):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  padding: 0.58rem 0.88rem;
  border-radius: 999px;
  font-size: 0.82rem;
}
:is(.route-page--vocabulary .library-item, .route-page--voicings .voicing-library-item):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 6px;
  padding: var(--library-item-padding, 0.92rem 1rem);
  border-radius: 18px;
  border: 1px solid var(--library-item-border, color-mix(in oklab, var(--border-panel) 72%, transparent));
  background: var(--library-item-background, color-mix(in oklab, var(--paper) 88%, white 12%));
  box-shadow: var(--library-item-shadow, none);
  text-align: start;
  color: var(--library-item-color, var(--ink));
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease;
  min-inline-size: 0;
}
:is(.route-page--vocabulary .library-item, .route-page--voicings .voicing-library-item):hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
:is(.route-page--vocabulary .library-item, .route-page--voicings .voicing-library-item):focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  outline: none;
  border-color: var(--library-item-hover-border, var(--library-item-border, color-mix(in oklab, var(--border-panel) 72%, transparent)));
  background: var(--library-item-hover-background, var(--library-item-background, color-mix(in oklab, var(--paper) 88%, white 12%)));
  box-shadow: var(--library-item-hover-shadow, var(--library-item-shadow, none));
}
:is(.route-page--vocabulary .library-item, .route-page--voicings .voicing-library-item)[data-active=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--library-item-active-border, var(--library-item-hover-border, var(--border-accent)));
  background: var(--library-item-active-background, var(--library-item-hover-background, color-mix(in oklab, var(--paper) 92%, white 8%)));
  box-shadow: var(--library-item-active-shadow, var(--library-item-hover-shadow, none));
  color: var(--library-item-active-color, var(--library-item-color, var(--ink)));
}
.app-popover-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: none;
  max-inline-size: calc(100vw - 32px);
  max-block-size: min(36rem, calc(100vh - 32px));
  overflow: auto;
  overscroll-behavior: contain;
  margin: auto;
  scrollbar-gutter: stable;
  color: var(--ink);
}
.app-popover-panel:popover-open:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  animation: settings-panel-rise 160ms ease;
}
.app-popover-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop {
  background: transparent;
}
.floating-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  gap: 14px;
  padding: .5rem;
  border-radius: 22px;
  z-index: 30;
  background: var(--surface-panel);
  border: 1px solid color-mix(in oklab, var(--border-panel) 82%, transparent);
  box-shadow: var(--shadow-float);
}
.playback-settings-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  position: fixed;
  inset: auto;
  inset-block-start: anchor(bottom);
  inset-inline-start: anchor(right);
  margin: 0;
  translate: -100% 10px;
  inline-size: min(26rem, calc(100vw - 32px));
}
#playback-settings-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  position-anchor: --playback-settings-panel-anchor;
}
#voicing-playback-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  position-anchor: --voicing-playback-panel-anchor;
}
.chord-settings-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: min(42rem, calc(100vw - 32px));
}
.range-grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 14px;
}
.range-field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 8px;
}
.toggle-field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 8px;
  padding: 0.2rem 0;
}
.toggle-field-head:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.toggle-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  padding: 0;
  border-radius: 0.32rem;
  border: 1px solid color-mix(in oklab, var(--border-accent) 72%, transparent);
  background: var(--surface-input-focus);
  box-shadow: none;
  accent-color: var(--teal);
  -webkit-appearance: auto;
  appearance: auto;
}
.range-field-head:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.range-field-label:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.range-field-value:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.range-hint:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-faint);
}
.range-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.range-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-runnable-track {
  block-size: 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--teal) 22%, transparent),
      color-mix(in oklab, var(--danger) 34%, transparent));
  border: 1px solid color-mix(in oklab, var(--teal) 12%, transparent);
}
.range-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: -6px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--paper) 95%, white);
  background: var(--teal);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--teal) 18%, transparent);
  -webkit-transition: transform 140ms ease, background 140ms ease;
  transition: transform 140ms ease, background 140ms ease;
}
.range-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-track {
  block-size: 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in oklab, var(--teal) 22%, transparent),
      color-mix(in oklab, var(--danger) 34%, transparent));
  border: 1px solid color-mix(in oklab, var(--teal) 12%, transparent);
}
.range-input:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--paper) 95%, white);
  background: var(--teal);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--teal) 18%, transparent);
  -moz-transition: transform 140ms ease, background 140ms ease;
  transition: transform 140ms ease, background 140ms ease;
}
.range-input:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb,
.range-input:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-slider-thumb,
.range-input:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb,
.range-input:focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-moz-range-thumb {
  transform: scale(1.08);
  background: var(--teal-deep);
}
.context-strip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  min-block-size: 2rem;
}
.field-source:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.field-chord:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.chord-builder:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.chord-builder-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.scale-select-field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.start-note-field:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.start-note-picker:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  min-inline-size: 0;
}
.chord-builder:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 10px;
}
.chord-builder-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 8px;
}
.chord-builder-row--roots:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.chord-builder-row--accidentals:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  justify-content: start;
}
.segment-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.tone-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.quality-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  padding: 0.72rem 0.42rem;
  border-radius: 12px;
  border: 1px solid var(--surface-input-border);
  background: var(--surface-input);
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease;
}
.segment-button:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.tone-button:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.quality-button:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  box-shadow: none;
}
.segment-button[data-selected=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.tone-button[data-selected=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent-strong);
  background: var(--surface-accent-strong);
  color: var(--text-on-accent);
  box-shadow: 0 12px 24px color-mix(in oklab, var(--teal) 16%, transparent);
}
.enharmonic-toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
.quality-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  gap: 6px;
}
.enharmonic-toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  grid-template-columns: repeat(2, minmax(3rem, max-content));
  justify-content: start;
}
.tone-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  grid-template-columns: repeat(7, minmax(2.8rem, 1fr));
  gap: 6px;
  min-inline-size: 0;
}
.tone-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  min-inline-size: 2.8rem;
  font-size: 0.96rem;
}
.quality-button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 36 95 89;
  --quality-dark: 24 63 58;
  min-inline-size: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgb(var(--quality-color), 0.08);
  border-color: rgb(var(--quality-color), 0.22);
  color: rgb(var(--quality-dark));
}
.quality-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  grid-template-columns: repeat(7, minmax(4.5rem, 1fr));
  align-items: stretch;
}
.quality-button[data-quality=maj]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 178 140 52;
  --quality-dark: 122 88 18 ;
}
.quality-button[data-quality=min7]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 54 105 168;
  --quality-dark: 30 66 112 ;
}
.quality-button[data-quality=min6]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 72 128 160;
  --quality-dark: 40 78 108 ;
}
.quality-button[data-quality=m7b5]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 112 122 44;
  --quality-dark: 78 86 24 ;
}
.quality-button[data-quality=dom]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 198 99 35;
  --quality-dark: 132 58 17 ;
}
.quality-button[data-quality=dim]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 96 104 118;
  --quality-dark: 58 64 74 ;
}
.quality-button[data-quality=dom7b5]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --quality-color: 176 48 48;
  --quality-dark: 112 24 24 ;
}
.quality-button[data-selected=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: rgb(var(--quality-dark), 0.62);
  background:
    linear-gradient(
      135deg,
      rgb(var(--quality-color)),
      rgb(var(--quality-dark)));
  color: var(--text-on-accent);
  box-shadow: 0 12px 24px rgb(var(--quality-color), 0.24);
}
.status-inline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  padding: 0.86rem 1rem;
  border-radius: 16px;
  background: color-mix(in oklab, var(--paper) 88%, white 12%);
  border: 1px solid var(--border-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.status-inline[data-tone=error]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--surface-status-error-border);
  background: var(--surface-status-error);
  color: var(--surface-status-error-ink);
}
.status-inline[data-tone=ok]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent);
  background: var(--surface-status-ok);
  color: var(--teal);
}
.summary-chip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--teal) 8%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--teal) 12%, transparent);
}
.summary-chip--scale:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  justify-self: start;
  padding-inline: 0.82rem;
  background: var(--surface-status-warning);
  border-color: var(--surface-status-warning-border);
  color: var(--surface-status-warning-ink);
}
.summary-chip--start:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  justify-self: start;
  padding-inline: 0.82rem;
  background: color-mix(in oklab, var(--teal) 10%, transparent);
  border-color: color-mix(in oklab, var(--teal) 22%, transparent);
  color: var(--teal);
}
.summary-chip--target:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  justify-self: start;
  padding-inline: 0.82rem;
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: color-mix(in oklab, var(--danger) 24%, transparent);
  color: var(--surface-status-error-ink);
}
.summary-chip--library-state:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  justify-self: start;
  padding-inline: 0.82rem;
  background: color-mix(in oklab, var(--teal) 10%, transparent);
  border-color: color-mix(in oklab, var(--teal) 20%, transparent);
  color: var(--teal);
}
.summary-chip.warning:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: color-mix(in oklab, var(--danger) 20%, transparent);
  color: var(--surface-status-error-ink);
}
@media (max-width: 980px) {
  .preview-toolbar:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: 1fr;
  }
  .quality-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .composer-strip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    padding: 18px;
    border-radius: 24px;
  }
  .control-strip:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tone-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .enharmonic-toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quality-row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-toggle-summary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    font-size: 0.84rem;
  }
  .playback-settings-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),
  .chord-settings-panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    inline-size: calc(100vw - 20px);
    max-inline-size: calc(100vw - 20px);
  }
}
html:not(#\#):not(#\#):not(#\#):not(#\#) {
  overscroll-behavior: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-user-select: none;
  user-select: none;
  min-block-size: 100%;
  text-size-adjust: none;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-smoothing: antialiased;
}
body:not(#\#):not(#\#):not(#\#):not(#\#) {
  display: grid;
  align-content: start;
  min-block-size: 100vh;
  row-gap: 1rem;
  padding: 1rem;
}
@media (max-width: 640px) {
  body:not(#\#):not(#\#):not(#\#):not(#\#) {
    padding: 1rem .5rem;
  }
}
[hidden]:not(#\#):not(#\#):not(#\#) {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *:not(#\#):not(#\#):not(#\#) {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
:where(:is(a.primary-action, a.secondary-action, a.page-tab)):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
}
:where(button, select, input, textarea, [role=button], [role=radio]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  font: inherit;
}
:where(button, select, [role=button], [role=radio]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  cursor: pointer;
}
:where(input, select, textarea):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  inline-size: 100%;
  padding: .95rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-soft);
  background: var(--surface-input);
  color: var(--ink);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}
:where(input, select, textarea):is(:focus, :focus-visible):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  border-color: var(--border-accent-strong);
  box-shadow: var(--focus-ring);
  background: var(--surface-input-focus);
}
textarea:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  min-block-size: 10.5rem;
  resize: none;
  font-family: var(--font-mono);
  font-size: .98rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  workspace-playback:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: fixed;
    inset-block-end: calc(var(--gap) / 2);
  }
}