:root {
  --ink: #18221f;
  --muted: #59645f;
  --paper: #f5f1e8;
  --card: #fffdf8;
  --forest: #153d35;
  --forest-2: #225c4f;
  --mint: #d9e9df;
  --amber: #8f4b14;
  --amber-soft: #f4dfc4;
  --red: #9e3c34;
  --red-soft: #f5ddd8;
  --line: #d9d4c9;
  --shadow: 0 18px 60px rgba(28, 39, 34, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 2%, rgba(194, 118, 43, .12), transparent 26rem),
    linear-gradient(180deg, #f8f5ed 0, var(--paper) 35rem);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(194, 118, 43, .42);
  outline-offset: 2px;
}

.field-note { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.35; }

.site-header {
  max-width: 1380px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 760;
  letter-spacing: -.02em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--forest);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: -.06em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.local-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--forest-2);
  font-size: 13px;
  font-weight: 700;
}

.local-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39966c;
  box-shadow: 0 0 0 4px rgba(57,150,108,.14);
}

.site-nav { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.55); }
.site-nav a { padding: 7px 11px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 760; }
.site-nav a:hover { color: var(--forest); }
.site-nav a[aria-current="page"] { color: #fff; background: var(--forest); }

.home-main { max-width: 1240px; }
.home-hero { max-width: 980px; margin: 62px 0 44px; }
.home-hero h1 { max-width: 920px; margin: 0; font: 760 clamp(48px, 7vw, 88px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.journey-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 150px; padding: 25px; color: var(--ink); background: color-mix(in srgb, var(--card) 96%, transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(28,39,34,.06); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.journey-card:hover { transform: translateY(-2px); border-color: #9cb9ab; box-shadow: 0 18px 46px rgba(28,39,34,.1); }
.journey-card:focus-visible { outline: 3px solid rgba(194,118,43,.42); outline-offset: 3px; }
.journey-card.primary-journey { color: #fff; background: var(--forest); border-color: var(--forest); }
.journey-card > span:nth-child(2) { display: grid; gap: 8px; }
.journey-card strong { font: 760 27px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.journey-card small { max-width: 430px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.journey-card.primary-journey small { color: rgba(255,255,255,.75); }
.journey-number { align-self: start; color: var(--amber); font: 760 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.journey-card.primary-journey .journey-number { color: #efbc80; }
.journey-arrow { font-size: 24px; }
.home-principles { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 38px; margin-top: 46px; }
.home-principles h2 { max-width: 430px; font: 760 31px/1.08 Georgia, "Times New Roman", serif; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle-grid article { padding-left: 15px; border-left: 3px solid var(--mint); }
.principle-grid strong { color: var(--forest); font-size: 13px; }
.principle-grid p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

main { max-width: 1380px; margin: 0 auto; padding: 28px 32px 70px; }
[hidden] { display: none !important; }
.view[hidden] { display: none !important; }
#setup-view { padding-bottom: 30px; }

.hero { max-width: 850px; margin: 44px 0 46px; }
.eyebrow, .step {
  margin: 0 0 12px;
  color: var(--amber);
  font: 750 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero h1, .results-card h1 {
  max-width: 820px;
  margin: 0;
  font: 760 clamp(42px, 6vw, 78px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}

.lede {
  max-width: 740px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
}

.source-switch { width: min(680px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 27px; }
.source-option { min-width: 0; display: grid; gap: 4px; padding: 14px 16px; color: var(--forest); background: rgba(255,255,255,.62); border: 1px solid #c9c5bb; border-radius: 12px; text-align: left; }
.source-option strong { font-size: 14px; }
.source-option span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.source-option.selected { color: #fff; background: var(--forest); border-color: var(--forest); box-shadow: 0 8px 25px rgba(21,61,53,.16); }
.source-option.selected span { color: rgba(255,255,255,.78); }
.practice-presets { margin: -12px 0 30px; padding: 23px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.preset-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.preset-heading h2 { margin: 0; font: 760 29px/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.preset-heading-actions { display: grid; justify-items: end; gap: 7px; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 21px; }
.preset-card { min-width: 0; min-height: 78px; display: grid; gap: 5px; padding: 13px 14px; color: var(--forest); background: rgba(255,255,255,.66); border: 1px solid #c9c5bb; border-radius: 11px; text-align: left; }
.preset-card strong, .preset-card span { display: block; }
.preset-card strong { font-size: 13px; }
.preset-card span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.preset-card.selected { color: #fff; background: var(--forest); border-color: var(--forest); box-shadow: 0 8px 25px rgba(21,61,53,.14); }
.preset-card.selected span { color: rgba(255,255,255,.76); }
.preset-card:disabled { cursor: not-allowed; }
.practice-presets + .recovery-card { margin: 0 0 28px; }
.recovery-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: -18px 0 28px; border-color: #b8cfc3; background: var(--mint); }
.recovery-card h2 { margin: 0 0 7px; color: var(--forest); font-size: 24px; }
.recovery-card .eyebrow { margin-bottom: 8px; }
.recovery-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.setup-grid {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(520px, 1.55fr);
  gap: 22px;
  align-items: start;
}

.panel, .question-card, .results-card {
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.panel { padding: 26px; }
.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 25px;
}
.catalog-panel > summary { cursor: pointer; list-style-position: outside; }
.catalog-panel > summary .step { margin-bottom: 7px; }
.catalog-panel:not([open]) > summary { margin-bottom: 0; }

.panel h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.quiet { margin: 0; color: var(--muted); font-size: 13px; }
.selection-count { margin: 0; color: var(--forest-2); font-size: 13px; font-weight: 760; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
label { display: grid; gap: 8px; color: #3c4743; font-size: 13px; font-weight: 700; }
.optional { color: var(--muted); font-weight: 600; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cbc8bf;
  border-radius: 10px;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(34,92,79,.12);
}

.check-line {
  grid-template-columns: auto 1fr;
  grid-column: 1 / -1;
  align-items: center;
  align-self: end;
  min-height: 44px;
}
.check-line input { width: 18px; min-height: 18px; accent-color: var(--forest); }

.tab-intake { margin: -3px 0 24px; padding: 18px; border: 1px solid #c7d8d0; border-radius: 14px; background: #f4f8f5; }
.intake-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 13px; }
.intake-heading h3, .tab-preview h3 { margin: 0; color: var(--forest); font-size: 17px; letter-spacing: -.02em; }
.intake-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.file-picker { display: block; min-height: 40px; padding: 10px 13px; color: var(--forest); background: #fff; border: 1px solid #98aaa3; border-radius: 9px; cursor: pointer; white-space: nowrap; text-align: center; }
.file-picker:hover { border-color: var(--forest); background: var(--mint); }
.file-name { margin: 10px 0; color: var(--muted); font: 700 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
#tab-text { min-height: 225px; resize: vertical; font: 600 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.preview-actions { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.privacy-note { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tab-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ccd8d2; }
.preview-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0; }
.preview-stat { min-width: 0; padding: 9px; border-radius: 8px; background: #fff; }
.preview-stat strong, .preview-stat span { display: block; }
.preview-stat strong { color: var(--forest); font-size: 17px; }
.preview-stat span { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.preview-messages { display: grid; gap: 7px; }
.preview-message { margin: 0; padding: 9px 10px; border-left: 3px solid #a98b65; border-radius: 6px; color: #544839; background: #fff7e9; font-size: 11px; line-height: 1.45; }
.preview-message.error { color: #742f29; background: var(--red-soft); border-left-color: var(--red); }
.preview-message.ready { color: var(--forest); background: var(--mint); border-left-color: var(--forest-2); }
.preview-systems { margin-top: 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.preview-tuning { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preview-tuning p { margin: 0; color: var(--muted); font-size: 11px; }

.stats-card {
  margin-top: 25px;
  padding: 16px 17px;
  border-radius: 13px;
  background: var(--mint);
  color: var(--forest);
}
.stats-card strong { font-size: 24px; letter-spacing: -.04em; }
.stats-card p { margin: 3px 0 0; font-size: 13px; }
.stats-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.catalog-tools {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 140px 150px auto auto;
  gap: 9px;
  align-items: center;
  margin-bottom: 17px;
}
.catalog-tools input, .catalog-tools select { min-height: 40px; font-size: 13px; }
.text-button {
  padding: 7px 4px;
  color: var(--forest-2);
  background: transparent;
  border: 0;
  font-weight: 750;
  font-size: 13px;
  white-space: nowrap;
}
.text-button:hover { color: var(--amber); }

.skill-list {
  height: min(510px, 58vh);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 2px 5px 2px 2px;
  scrollbar-color: #bbb6ab transparent;
}

.skill-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.skill-card:hover { transform: translateY(-1px); border-color: #aaa69b; }
.skill-card.selected { border-color: #76a391; background: #f4faf6; }
.skill-card.unavailable { cursor: default; background: #f3f2ee; opacity: .78; }
.skill-card.unavailable:hover { transform: none; border-color: var(--line); }
.skill-card input { width: 17px; min-height: 17px; margin: 2px 0 0; accent-color: var(--forest); }
.skill-card strong { display: block; font-size: 14px; line-height: 1.2; }
.skill-card p { margin: 5px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.skill-card .skill-availability { margin-top: -5px; color: #4f5b56; font-size: 10px; font-weight: 700; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mini-tag {
  padding: 3px 6px;
  border-radius: 5px;
  color: #5a625f;
  background: #efeee9;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}
.mini-tag.tab { color: var(--forest); background: var(--mint); }
.mini-tag.input { color: #70471f; background: var(--amber-soft); }
.mini-tag.count { color: #3f4d47; background: #e7e6df; }

.launch-bar {
  position: static;
  z-index: 5;
  bottom: 16px;
  margin: 22px 0 0;
  padding: 17px 18px 17px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(21,61,53,.25);
  border-radius: 17px;
  color: #fff;
  background: rgba(21,61,53,.96);
  box-shadow: 0 16px 40px rgba(21,61,53,.2);
  backdrop-filter: blur(10px);
}
.launch-bar strong, .launch-bar > div span { display: block; }
.launch-bar > div span { margin-top: 2px; color: rgba(255,255,255,.78); font-size: 13px; }

.primary-button, .secondary-button, .danger-button {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 11px;
  font-weight: 780;
  border: 1px solid transparent;
}
.primary-button { color: #fff; background: var(--amber); }
.primary-button:hover:not(:disabled) { background: #733b0f; }
.launch-bar .primary-button { color: var(--forest); background: #f6dcb7; }
.launch-bar .primary-button:hover:not(:disabled) { background: #ffe9cb; }
.secondary-button { color: var(--forest); background: transparent; border-color: #98aaa3; }
.danger-button { color: #fff; background: var(--red); border-color: var(--red); }
.danger-button:hover { background: #7d2f29; }

#practice-view { max-width: 980px; margin: 30px auto 0; }
.practice-topline, .progress-copy { display: flex; justify-content: space-between; align-items: center; }
.progress-copy { min-width: 210px; color: var(--muted); font-size: 13px; font-weight: 700; }
.back-button { padding-left: 0; }
.progress-track { width: 100%; height: 5px; margin: 12px 0 26px; overflow: hidden; border: 0; border-radius: 10px; background: #d9d6ce; appearance: none; }
.progress-track::-webkit-progress-bar { background: #d9d6ce; border-radius: 10px; }
.progress-track::-webkit-progress-value { background: var(--amber); border-radius: 10px; transition: width .25s ease; }
.progress-track::-moz-progress-bar { background: var(--amber); border-radius: 10px; }

.question-card { padding: clamp(24px, 5vw, 55px); }
.question-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kind-pill, .domain-pill {
  padding: 6px 9px;
  border-radius: 7px;
  font: 750 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kind-pill { color: var(--forest); background: var(--mint); }
.domain-pill { color: #7d4d1e; background: var(--amber-soft); }
.where { margin-left: auto; color: var(--muted); font-size: 12px; }
.question-description { margin: 15px 0 0; color: var(--muted); font-size: 13px; }
.question-card h1 { margin: 30px 0 12px; font-size: clamp(25px, 4vw, 39px); line-height: 1.15; letter-spacing: -.045em; }
.hint { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.notation-legend { margin: -12px 0 24px; padding: 13px 15px; border: 1px solid #d8d4ca; border-radius: 11px; background: #f7f5ef; }
.notation-legend h2 { margin: 0 0 10px; color: var(--forest); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.notation-legend dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 7px; margin: 0; }
.notation-legend dl > div { min-width: 0; display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; background: #fff; }
.notation-legend dt { display: grid; min-height: 25px; place-items: center; color: #fff; background: var(--forest-2); border-radius: 5px; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.notation-legend dd { margin: 0; color: #4f5a55; font-size: 11px; font-weight: 700; line-height: 1.2; }

.tab-block {
  margin: 27px 0;
  padding: 22px;
  overflow-x: auto;
  color: #e7eee9;
  background: #17231f;
  border-radius: 13px;
  font: 600 clamp(12px, 1.7vw, 15px)/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tab-block:empty { display: none; }

.answer-form { padding-top: 4px; border-top: 1px solid var(--line); }
#answer-fields { display: grid; gap: 14px; margin: 23px 0 18px; }
.response-field { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #faf9f5; }
.response-field.missing { border-color: var(--red); box-shadow: 0 0 0 3px rgba(158,60,52,.09); }
.response-label { margin: 0 0 15px; font-size: 15px; letter-spacing: -.015em; }
.response-preview { min-height: 21px; margin: 13px 0 0; color: var(--forest-2); font: 700 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.input-help { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.answer-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.choice-row, .answer-pad { display: flex; flex-wrap: wrap; gap: 8px; }
.answer-pad { align-items: center; }
.answer-pad.compact { gap: 6px; }
.answer-pad.compact .answer-choice { min-height: 38px; padding: 7px 10px; }
.answer-choice {
  min-height: 43px;
  padding: 9px 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c9c6bd;
  border-radius: 9px;
  font-weight: 700;
}
.answer-choice:hover:not(:disabled):not(.selected),
.fret-cell:hover:not(:disabled):not(.selected) { border-color: var(--forest-2); background: #f1f7f3; }
.answer-choice.selected, .fret-cell.selected, .barline-gap.selected {
  color: #fff;
  background: var(--forest-2);
  border-color: var(--forest-2);
}
.answer-choice.revealed-incorrect { color: #762c27; background: #f8e5e2; border-color: #b55b53; }
.answer-choice.revealed-correct { color: #fff; background: #2f6758; border-color: #2f6758; box-shadow: 0 0 0 3px rgba(47,103,88,.15); }
.advanced-settings { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.advanced-settings summary { color: var(--forest); cursor: pointer; font-weight: 750; }
.advanced-settings .field-grid, .advanced-settings .inline-fields,
.advanced-settings > label { margin-top: 15px; }
.advanced-settings-body { margin-top: 14px; }
.functional-key-status .text-button { margin-left: 10px; }
.tool-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tool-directory-cta { margin: 22px 0 0; text-align: center; }
.tool-directory { display: grid; gap: 34px; }
.tool-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tool-directory-card { min-height: 150px; padding: 22px; display: grid; align-content: start; gap: 8px; color: inherit; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; }
.tool-directory-card:hover { border-color: #8ca89e; transform: translateY(-1px); }
.tool-directory-card strong { color: var(--forest); font-size: 20px; }
.tool-directory-card span { color: var(--muted); line-height: 1.5; }
.quick-tool-grid .tool-directory-card { min-height: 120px; background: var(--mint); }
.accidentals { margin-top: 8px; }
.accidentals .answer-choice { min-width: 45px; font-size: 17px; }

.note-composer.compact, .composer-row, .roman-composer, .chord-composer.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.note-composer { display: grid; gap: 8px; }
.chord-composer { display: grid; gap: 10px; }
.chord-composer.compact { min-width: min(100%, 260px); }
.slash-toggle.selected { color: var(--amber); }

.number-editor { display: flex; align-items: center; gap: 10px; max-width: 330px; }
.number-editor input { min-height: 50px; font-size: 18px; font-variant-numeric: tabular-nums; }
.number-editor span { color: var(--muted); font-weight: 750; }
.shift-editor { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.shift-editor > input { width: 110px; min-height: 44px; font-size: 17px; }

.fretboard-overview { display: grid; width: 100%; gap: 0; padding: 8px; border: 1px solid #d8d4ca; border-radius: 9px; background: #fff; align-items: center; }
.fretboard-overview.frets-13 { grid-template-columns: 42px repeat(13, minmax(0, 1fr)); }
.fretboard-overview.frets-25 { grid-template-columns: 42px repeat(25, minmax(0, 1fr)); }
.fretboard-overview > span:first-child, .overview-string { color: var(--muted); font: 750 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.overview-marker { min-width: 0; height: 12px; color: #8d775f; text-align: center; font: 800 7px/12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.overview-cell { min-width: 0; height: 10px; border-right: 1px solid #d3cfc5; background: linear-gradient(transparent 45%, #aeb2ae 45%, #aeb2ae 56%, transparent 56%); }
.overview-cell.selected { background: var(--forest-2); box-shadow: inset 0 0 0 2px #fff; }
.overview-cell.excluded { opacity: .28; }
.fretboard-navigation { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 7px; }
.fretboard-navigation strong { margin-right: 3px; color: var(--forest); font-size: 11px; }
.fret-jump { min-width: 34px; min-height: 32px; padding: 5px 8px; color: var(--forest-2); background: #fff; border: 1px solid #c9c5bb; border-radius: 7px; font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fret-jump:hover { border-color: var(--forest-2); background: var(--mint); }
.fretboard-viewport-status { margin-left: auto; color: var(--muted); font-size: 11px; }
.fretboard-scroll { max-width: 100%; padding: 9px; overflow-x: auto; border: 1px solid #d8d4ca; border-radius: 11px; background: #fff; scrollbar-color: #918c82 #ebe8e0; scroll-behavior: smooth; }
.fretboard-grid { display: grid; gap: 1px; min-width: max-content; align-items: center; }
.fretboard-grid.frets-13 { grid-template-columns: 68px repeat(13, 28px); }
.fretboard-grid.frets-25 { grid-template-columns: 68px repeat(25, 28px); }
.fret-label { color: var(--muted); text-align: center; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fret-marker { min-height: 12px; color: #92795d; text-align: center; font: 900 8px/12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.string-label { align-self: stretch; display: flex; align-items: center; padding-right: 5px; color: var(--forest); background: #fff; font: 700 10px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fret-cell {
  position: relative;
  width: 28px;
  height: 34px;
  padding: 0;
  color: #52605b;
  background: linear-gradient(transparent 47%, #aeb2ae 47%, #aeb2ae 53%, transparent 53%), #fff;
  border: 1px solid #d0cdc4;
  border-radius: 2px;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fret-cell.nut { border-left: 3px solid #6f6a61; }
.fret-cell:disabled { color: #bbb7ae; background: #eeece6; cursor: not-allowed; }
.voicing-editor { display: grid; gap: 13px; }
.voicing-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.voicing-heading strong { color: var(--forest); font: 760 27px/1 Georgia, "Times New Roman", serif; }
.voicing-heading span { color: var(--muted); font-size: 12px; }
.constraint-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.constraint-strip span { padding: 6px 9px; border: 1px solid #ccc8bd; border-radius: 999px; color: #535d59; background: #fff; font: 750 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.constraint-strip .constraint-met { color: var(--forest); border-color: #8fb3a2; background: var(--mint); }
.constraint-strip .constraint-broken { color: var(--red); border-color: #dba59d; background: var(--red-soft); }
.voicing-rows { display: grid; gap: 7px; }
.voicing-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px 52px 1fr minmax(86px, auto); align-items: center; gap: 9px; padding: 8px 11px; color: var(--forest); background: #fff; border: 1px solid #cfcbc1; border-radius: 9px; text-align: left; }
.voicing-row strong { font-size: 17px; }
.voicing-row span { color: var(--muted); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.voicing-row .tab-line { overflow: hidden; color: #a6aaa6; letter-spacing: .08em; }
.voicing-row b { text-align: right; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.voicing-row.active { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(34,92,79,.1); }

.sequence-slots, .roman-sequence { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 7px; }
.sequence-slot { min-width: 112px; padding: 10px; border: 1px solid #d8d5cc; border-radius: 10px; background: #fff; }
.sequence-slot:has(.chord-composer) { min-width: 285px; }
.slot-number { display: block; margin-bottom: 7px; color: var(--amber); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sequence-slot select { min-width: 0; }
.sequence-slot .note-composer.compact { display: grid; }
.count-grid { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 7px; max-width: 520px; }
.count-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.answer-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 7px; margin-bottom: 14px; }
.answer-slot { min-height: 49px; padding: 8px; border: 1px dashed #bbb6ab; border-radius: 9px; color: #767d7a; background: #fff; font: 800 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.answer-slot.active { border-style: solid; border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(34,92,79,.1); }
.answer-slot.filled { color: var(--forest); background: var(--mint); border-style: solid; }
.token-pad { display: grid; gap: 8px; padding: 13px; background: #f2f0ea; border-radius: 11px; }
.pad-caption { margin: 0; color: var(--muted); font-size: 12px; }

.token-builder { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.compact-button { min-height: 40px; padding: 8px 12px; }
.token-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.answer-token { display: flex; align-items: center; gap: 3px; padding: 5px 6px 5px 10px; color: var(--forest); background: var(--mint); border-radius: 8px; }
.token-action { width: 27px; height: 27px; padding: 0; color: var(--forest); background: rgba(255,255,255,.55); border: 0; border-radius: 5px; }
.token-action.remove { color: var(--red); }

.degree-row { margin-top: 9px; }
.roman-composer { display: grid; }
.roman-composer select { width: 100%; min-width: 120px; }

.rhythm-cells { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; padding: 2px 1px 9px; }
.rhythm-cells > span { display: grid; justify-items: center; gap: 4px; }
.rhythm-cells small { color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rhythm-cell { width: 42px; height: 45px; padding: 0; color: var(--forest); background: #fff; border: 1px solid #c9c6bd; border-radius: 7px; font: 800 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rhythm-cell[data-symbol="x"], .rhythm-cell[data-symbol="X"] { color: #fff; background: var(--forest-2); }
.rhythm-cell[data-symbol="a"] { color: #fff; background: var(--amber); }
.rhythm-cell[data-symbol="b"] { color: #fff; background: #526b8a; }

.rhythm-token-stream { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fixed-token { min-width: 35px; padding: 9px 8px; text-align: center; background: #fff; border: 1px solid #d0cdc4; border-radius: 6px; font: 750 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.barline-gap { width: 27px; height: 36px; padding: 0; color: var(--amber); background: transparent; border: 1px dashed #c8a77f; border-radius: 5px; font-weight: 900; }

.typed-fallback { margin-top: 13px; padding-top: 11px; border-top: 1px solid #dfdcd4; }
.typed-fallback summary { width: max-content; color: var(--forest-2); cursor: pointer; font-size: 12px; font-weight: 750; }
.typed-fallback input { min-height: 44px; margin-top: 10px; font-size: 15px; }
.typed-answer-label { margin-top: 10px; }

.feedback { margin-top: 27px; padding: 23px; border-radius: 15px; background: var(--mint); border: 1px solid #b8d2c4; }
.feedback.incorrect { background: var(--red-soft); border-color: #e4b8b1; }
.feedback.unscored { background: var(--amber-soft); border-color: #e4c298; }
.feedback.skipped { background: #eceae4; border-color: #d1cdc3; }
.verdict { margin: 0 0 8px; color: var(--forest); font-size: 20px; font-weight: 800; text-transform: capitalize; }
.incorrect .verdict { color: var(--red); }
.unscored .verdict { color: #89551f; }
.skipped .verdict { color: var(--muted); }
.correct-answer { margin: 0 0 10px; font-weight: 750; }
#feedback-copy { margin: 0; line-height: 1.55; }
.answer-tab { margin-bottom: 18px; }
.feedback-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

#results-view { max-width: 860px; margin: 70px auto; }
.results-card { padding: clamp(30px, 7vw, 75px); }
.results-card h1 { margin-top: 8px; font-size: clamp(52px, 9vw, 92px); }
.skill-results { display: grid; gap: 8px; margin: 35px 0; }
.skill-result { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.skill-result span:last-child { font-weight: 800; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.review-section { margin-top: 35px; }
.review-section h2 { font-size: 22px; }
.question-review { display: grid; gap: 9px; }
.review-item { padding: 13px 15px; border: 1px solid var(--line); border-left: 4px solid #aaa69b; border-radius: 10px; background: #fff; }
.review-item.correct { border-left-color: var(--forest-2); }
.review-item.incorrect { border-left-color: var(--red); }
.review-item summary { cursor: pointer; font-weight: 780; }
.review-item > p { margin: 12px 0 0; line-height: 1.5; }
.review-prompt { font-weight: 700; }
.review-tab { margin: 14px 0; font-size: 12px; }

#history-view { max-width: 1120px; margin: 45px auto; }
.history-card { padding: clamp(25px, 5vw, 58px); background: color-mix(in srgb, var(--card) 95%, transparent); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.history-card > h1 { max-width: 760px; margin: 12px 0 0; font: 760 clamp(42px, 6vw, 68px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 32px 0 42px; }
.history-stat { padding: 17px; border-radius: 12px; background: var(--mint); }
.history-stat strong, .history-stat span { display: block; }
.history-stat strong { color: var(--forest); font-size: 26px; letter-spacing: -.04em; }
.history-stat span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.history-section { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.history-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 16px; }
.history-heading .step { margin-bottom: 7px; }
.history-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.history-skills, .history-sessions { display: grid; gap: 8px; }
.history-skill { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(82px, .6fr)) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.history-skill-name { min-width: 0; }
.history-skill-name strong, .history-skill-name span { display: block; }
.history-skill-name span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.history-measure small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.history-measure strong { color: var(--forest); font-size: 13px; }
.trend-pill { width: fit-content; padding: 5px 7px; border-radius: 999px; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 800; text-transform: capitalize; }
.trend-pill.slipping { color: #7a392f; background: var(--red-soft); }
.trend-pill.unmeasured { color: var(--muted); background: #eceae4; }
.history-session { display: grid; grid-template-columns: minmax(150px, 1fr) 100px 100px 90px; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.history-session time { font-weight: 720; }
.history-session span { color: var(--muted); font-size: 12px; }
.history-session strong { text-align: right; }
.data-section > p { max-width: 800px; color: var(--muted); line-height: 1.55; }
.data-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.storage-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 13px; padding: 14px; border-radius: 10px; background: #fff; font-size: 11px; }
.storage-details dt { color: var(--muted); font-weight: 750; }
.storage-details dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.modal-card { width: min(620px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--card); box-shadow: 0 24px 80px rgba(20,29,25,.28); }
.modal-card::backdrop { background: rgba(14,25,21,.58); }
.modal-card form { padding: clamp(22px, 5vw, 36px); }
.modal-card h2 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.modal-card p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.feedback-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0; padding: 0; border: 0; }
.feedback-categories legend { margin-bottom: 9px; font-size: 13px; font-weight: 800; }
.feedback-categories label { min-height: 44px; grid-template-columns: auto 1fr; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.feedback-categories input { width: 17px; min-height: 17px; accent-color: var(--forest); }
.report-excerpt { margin-top: 15px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }

.toast {
  position: fixed;
  z-index: 10;
  right: 22px;
  bottom: 22px;
  max-width: min(430px, calc(100vw - 44px));
  padding: 15px 17px;
  color: #fff;
  background: #672e29;
  border-radius: 11px;
  box-shadow: 0 12px 35px rgba(67,20,16,.25);
  font-weight: 650;
  font-size: 14px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Goal-based music workspaces */
.workspace-main { max-width: 1580px; }
.workspace-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin: 42px 0 35px; }
.workspace-hero h1 { max-width: 900px; margin: 0; font: 760 clamp(42px, 6vw, 76px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.workspace-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; margin: 0 0 15px; }
.workspace-index a { display: grid; gap: 4px; padding: 13px 15px; color: var(--forest); background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.workspace-index a:hover { border-color: #9cb9ab; background: #fff; }
.workspace-index a[aria-current="page"] { border-color: var(--forest); background: #fff; box-shadow: inset 0 -3px 0 var(--accent); }
.workspace-index strong { font-size: 13px; }
.workspace-index span { color: var(--muted); font-size: 10px; }
.context-panel { padding: 0; overflow: hidden; }
.context-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; cursor: pointer; list-style: none; }
.context-panel > summary::-webkit-details-marker { display: none; }
.context-panel > summary > span:first-child { min-width: 0; display: grid; gap: 5px; }
.context-panel > summary .step { margin: 0; }
.context-panel > summary strong { overflow-wrap: anywhere; color: var(--forest); font-size: 14px; }
.context-edit { color: var(--amber); font-size: 12px; font-weight: 800; }
.context-panel[open] .context-edit { font-size: 0; }
.context-panel[open] .context-edit::after { content: "Close"; font-size: 12px; }
.context-panel .instrument-fields { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.instrument-fields { display: grid; grid-template-columns: minmax(190px, 1.4fr) 100px 120px minmax(170px, 1fr) auto; gap: 12px; align-items: start; }
.instrument-fields .primary-button { align-self: start; margin-top: 21px; min-height: 44px; }
.workspace-section { margin-top: 64px; }
.workspace-section[hidden] { display: none; }
.tool-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 18px; }
.tool-heading h2 { margin: 0; font: 760 clamp(31px, 4vw, 49px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.tool-heading p:not(.step) { max-width: 720px; margin: 12px 0 0; color: var(--muted); line-height: 1.55; }
.explorer-panel { overflow: hidden; }
.overlay-controls { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(130px, .7fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; align-items: end; gap: 10px; }
.overlay-controls .secondary-button { min-height: 44px; }
.tool-status { margin: 18px 0 11px; color: var(--forest); font-weight: 780; }
.tool-status.error { color: var(--red); }
.fretboard-legend { display: flex; flex-wrap: wrap; gap: 7px; min-height: 0; margin-bottom: 15px; }
.legend-chip { display: inline-flex; gap: 7px; align-items: baseline; padding: 6px 9px; border: 1px solid #c9c6bd; border-radius: 999px; color: var(--forest); background: #fff; }
.legend-chip strong { font-size: 12px; }
.legend-chip small { color: var(--muted); font-size: 10px; }
.legend-chip.root { color: #fff; background: var(--amber); border-color: var(--amber); }
.legend-chip.root small { color: #fff; }
.neck-overview { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid #d8d4ca; border-radius: 9px; background: #fff; }
.overview-heading { margin-bottom: 4px; color: var(--muted); font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.neck-overview-row { display: flex; align-items: center; gap: 7px; }
.overview-string-label { width: 26px; flex: 0 0 26px; color: var(--muted); font: 750 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.overview-track { flex: 1; display: flex; min-width: 0; height: 10px; background: linear-gradient(transparent 44%, #bbb8b0 44%, #bbb8b0 56%, transparent 56%); }
.overview-position { flex: 1 1 0; min-width: 0; border-right: 1px solid rgba(100,100,100,.18); }
.overview-position.active { background: var(--forest-2); box-shadow: inset 1px 0 #fff; }
.overview-position.root { background: var(--amber); }
.neck-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 13px 0 8px; }
.neck-navigation strong { color: var(--forest); font-size: 11px; }
.neck-navigation > div { display: flex; flex-wrap: wrap; gap: 5px; }
.neck-navigation > span { margin-left: auto; color: var(--muted); font-size: 11px; }
.fretboard-neck-scroll, .shape-scroll { max-width: 100%; overflow-x: auto; padding: 10px 0; border: 1px solid #d8d4ca; border-radius: 11px; background: #fff; scrollbar-color: #918c82 #ebe8e0; scroll-behavior: smooth; }
.fretboard-neck { width: max-content; min-width: 100%; }
.fretboard-neck-row { display: flex; min-height: 45px; }
.fret-number-row { min-height: 29px; }
.fretboard-string-label { position: sticky; left: 0; z-index: 3; width: 76px; flex: 0 0 76px; display: flex; align-items: center; padding: 0 8px; color: var(--forest); background: #fff; border-right: 2px solid #777168; box-shadow: -16px 0 0 #fff, 8px 0 8px -8px rgba(21,61,53,.7); isolation: isolate; font: 750 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fretboard-neck-track { display: flex; }
.fretboard-fret-number { position: relative; width: 44px; flex: 0 0 44px; color: var(--muted); text-align: center; font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fretboard-fret-number::after { content: attr(data-marker); position: absolute; top: 13px; left: 0; right: 0; color: #9c7a56; font-size: 8px; letter-spacing: 3px; }
.fretboard-fret-cell { width: 44px; height: 45px; flex: 0 0 44px; display: grid; place-content: center; gap: 2px; padding: 2px; color: var(--forest); background: linear-gradient(transparent 48%, #aaa9a3 48%, #aaa9a3 53%, transparent 53%), #fff; border: 1px solid #d2cec5; border-radius: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fretboard-fret-cell strong { max-width: 40px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1; }
.fretboard-fret-cell small { font-size: 8px; line-height: 1; }
.fretboard-fret-cell:hover, .fretboard-fret-cell:focus-visible { z-index: 1; border-color: var(--forest-2); box-shadow: inset 0 0 0 2px rgba(34,92,79,.2); }
.fretboard-fret-cell.inactive { color: #bbb8b0; background: linear-gradient(transparent 48%, #d0cdc6 48%, #d0cdc6 53%, transparent 53%), #f2f0eb; }
.fretboard-fret-cell.root { color: #fff; background: var(--amber); border-color: #77401a; }
.fretboard-fret-cell.nut { border-left-width: 3px; }
.fret-detail { min-height: 48px; margin-top: 12px; padding: 13px 15px; color: var(--forest); background: var(--mint); border-radius: 10px; font-size: 13px; font-weight: 720; line-height: 1.55; }
.chord-lab-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(350px, .8fr); gap: 20px; align-items: start; }
.lab-panel { min-width: 0; }
.lab-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.lab-heading .eyebrow { margin-bottom: 7px; }
.lab-heading h3 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.shape-summary { margin: 14px 0 8px; color: var(--forest); font: 750 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.shape-editor { width: max-content; min-width: 100%; }
.shape-row { display: flex; min-height: 38px; }
.shape-header { min-height: 26px; }
.shape-string-label { position: sticky; left: 0; z-index: 3; width: 82px; flex: 0 0 82px; display: grid; place-items: center; color: var(--forest); background: #fff; border: 0; border-right: 2px solid #777168; box-shadow: -16px 0 0 #fff, 8px 0 8px -8px rgba(21,61,53,.7); isolation: isolate; font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.shape-mute:hover { color: var(--red); background: var(--red-soft); }
.shape-track { display: flex; }
.shape-fret-label, .shape-cell { width: 38px; flex: 0 0 38px; }
.shape-fret-label { color: var(--muted); text-align: center; font: 750 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.shape-cell { height: 38px; padding: 0; color: var(--forest); background: linear-gradient(transparent 47%, #aaa9a3 47%, #aaa9a3 54%, transparent 54%), #fff; border: 1px solid #d2cec5; border-radius: 2px; font-size: 14px; }
.shape-cell:hover { background-color: var(--mint); border-color: var(--forest-2); }
.shape-cell.selected { color: #fff; background: var(--forest); border-color: var(--forest); }
.shape-actions { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; margin-top: 13px; }
.wide-button { width: 100%; margin-top: 13px; }
.lab-result { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.lab-result h4 { margin: 0; color: var(--forest); font: 760 25px/1.15 Georgia, "Times New Roman", serif; }
.result-explanation { color: var(--muted); font-size: 13px; line-height: 1.55; }
.reading-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.reading-card { display: grid; gap: 4px; padding: 11px; background: var(--mint); border-radius: 9px; }
.reading-card strong { color: var(--forest); font-size: 18px; }
.reading-card span { color: var(--muted); font-size: 10px; }
.result-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 15px 0; font-size: 12px; }
.result-facts dt { color: var(--muted); font-weight: 700; }
.result-facts dd { margin: 0; color: var(--forest); font-weight: 760; }
.pitch-evidence { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pitch-chip { display: grid; gap: 2px; padding: 7px 9px; color: var(--forest); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pitch-chip small { color: var(--muted); font-size: 9px; }
.workspace-tab { margin: 12px 0 0; font-size: 12px; }
.voicing-search-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 9px; }
.chord-symbol-field { grid-column: 1 / -1; }
.voicing-search-form .primary-button { grid-column: 1 / -1; margin-top: 3px; }
.constraint-note { color: var(--muted); font-size: 11px; line-height: 1.45; }
.voicing-results { display: grid; gap: 10px; margin-top: 13px; }
.voicing-result-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.voicing-result-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.voicing-result-heading strong { color: var(--forest); font: 750 13px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.voicing-result-heading span { color: var(--muted); font-size: 10px; }
.voicing-result-card .tab-block { margin: 10px 0; }
.voicing-result-card .text-button { margin-top: 4px; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.triad-panel { grid-column: 1 / -1; }
.comparison-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.comparison-form .primary-button { grid-column: 1 / -1; }
.comparison-tone-group { margin-top: 13px; }
.comparison-tone-group h5, .triad-group h5 { margin: 0; color: var(--forest); font-size: 12px; letter-spacing: .01em; }
.saved-shape-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.saved-shape-status span { min-width: 0; padding: 10px; overflow-wrap: anywhere; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 9px; font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.saved-shape-status strong { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; color: #fff; background: var(--forest); border-radius: 50%; }
.movement-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
.movement-card { display: grid; gap: 4px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.movement-card.common { background: var(--mint); border-color: #a9c7bc; }
.movement-card strong { color: var(--forest); font-size: 12px; }
.movement-card span { font: 700 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.movement-card small { color: var(--muted); font-size: 9px; }
.pair-motion-details { margin-top: 13px; color: var(--muted); font-size: 12px; }
.pair-motion-details summary { cursor: pointer; color: var(--forest); font-weight: 750; }
.pair-motion-details ul { padding-left: 20px; line-height: 1.6; }
.triad-search-form { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(100px, .6fr)) auto; gap: 10px; align-items: end; }
.triad-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.triad-group { padding: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.triad-shape-list { display: grid; gap: 6px; margin-top: 9px; }
.triad-shape-card { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border-radius: 8px; }
.triad-shape-card strong { color: var(--forest); font: 750 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.triad-shape-card span { color: var(--muted); font-size: 10px; }
.theory-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: start; }
.scale-context-form { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(180px, 1fr) auto; gap: 10px; align-items: end; }
.scale-tone-ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 5px; margin: 16px 0; padding: 0; list-style: none; }
.scale-tone-ribbon li { display: grid; gap: 3px; padding: 9px; color: var(--forest); text-align: center; background: var(--mint); border-radius: 8px; }
.scale-tone-ribbon small { color: var(--muted); font-size: 9px; }
.scale-tone-ribbon strong { font-size: 17px; }
.result-table-scroll { max-width: 100%; overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.result-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.result-table th, .result-table td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.result-table th { color: var(--forest); background: var(--mint); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.result-table tr:last-child td { border-bottom: 0; }
.compact-table { max-width: 480px; }
.harmony-tables { display: grid; gap: 15px; margin-top: 18px; }
.harmony-tables h5 { margin: 0; color: var(--forest); font-size: 13px; }
.functional-key-status { margin: 0 0 13px; padding: 11px 12px; color: #672e29; background: var(--red-soft); border-radius: 9px; font-size: 12px; font-weight: 720; }
.functional-key-status.ready { color: var(--forest); background: var(--mint); }
.functional-key-status.choosing { color: var(--forest); background: #eef5f1; border: 1px solid #b7cbc1; }
.quick-key-chooser { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; }
.quick-key-chooser > strong, .quick-key-chooser > p, .quick-key-roots { grid-column: 1 / -1; }
.quick-key-chooser > strong { font: 760 18px/1.2 Georgia, "Times New Roman", serif; }
.quick-key-chooser > p { margin: -4px 0 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
.quick-key-roots { display: grid; grid-template-columns: repeat(12, minmax(45px, 1fr)); gap: 5px; }
.quick-key-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.quick-key-roots button, .quick-key-modes button { min-width: 0; min-height: 44px; padding: 7px 5px; color: var(--forest); background: #fff; border: 1px solid #9eb8ad; border-radius: 8px; font-weight: 780; }
.quick-key-roots button[aria-pressed="true"], .quick-key-modes button[aria-pressed="true"] { color: #fff; background: var(--forest); border-color: var(--forest); box-shadow: inset 0 0 0 2px #fff; }
.quick-key-apply { min-height: 44px; white-space: nowrap; }
.quick-key-chooser > .text-button { min-height: 44px; margin-left: 0; padding-inline: 10px; }
.progression-form { display: grid; gap: 10px; }
.progression-form textarea { width: 100%; min-height: 78px; padding: 11px; resize: vertical; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; font: 700 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.progression-outputs { display: grid; gap: 7px; margin: 15px 0; }
.progression-output { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: baseline; padding: 9px 11px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.progression-output small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.progression-output strong { overflow-wrap: anywhere; color: var(--forest); font: 750 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.progression-generation-rules { color: var(--muted); font-size: 11px; line-height: 1.5; }
.progression-generation-rules summary { cursor: pointer; color: var(--forest); font-weight: 780; }
.progression-generation-rules ol { margin-bottom: 0; padding-left: 22px; }
.progression-generation-rules li + li { margin-top: 6px; }
.progression-start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.progression-workspace { min-width: 0; margin-top: 20px; overflow: visible; }
.progression-workspace-heading { align-items: center; }
.progression-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.progression-actions button { min-height: 44px; }
.progression-lane-scroll { max-width: 100%; overflow-x: auto; margin: 16px 0; padding: 13px; background: #e9e5dc; border: 1px solid #ccc6bb; border-radius: 13px; scrollbar-color: #8f887d #e1ddd4; }
.progression-lane { width: max-content; min-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; }
.progression-card { width: 218px; min-height: 260px; flex: 0 0 218px; display: flex; flex-direction: column; padding: 13px; background: #fff; border: 1px solid #c9c4b9; border-top: 5px solid var(--forest-2); border-radius: 11px; box-shadow: 0 7px 20px rgba(28,39,34,.06); }
.progression-card.audition-active { outline: 4px solid rgba(194,118,43,.42); outline-offset: -4px; background: #fff9ef; }
.progression-card.category-parallel { border-top-color: var(--amber); }
.progression-card.category-applied { border-top-color: #814c78; }
.progression-card.category-chromatic { border-top-color: var(--red); }
.progression-card-heading, .progression-suggestion-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.progression-chord-choice { min-width: 0; display: grid; gap: 2px; padding: 0; color: var(--forest); text-align: left; background: transparent; border: 0; border-radius: 5px; }
.progression-chord-choice strong { overflow-wrap: anywhere; font: 780 28px/1 Georgia, "Times New Roman", serif; }
.progression-chord-choice span { font: 800 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.progression-chord-choice:hover strong { color: var(--amber); }
.progression-category { flex: 0 0 auto; padding: 4px 6px; color: var(--forest); background: var(--mint); border-radius: 999px; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.category-parallel .progression-category { color: #6d350d; background: var(--amber-soft); }
.category-applied .progression-category { color: #62355b; background: #efdaeb; }
.category-chromatic .progression-category { color: var(--red); background: var(--red-soft); }
.progression-role { margin: 8px 0; color: var(--muted); font-size: 10px; font-weight: 780; text-transform: uppercase; letter-spacing: .035em; }
.progression-source-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.progression-source-chips span { padding: 4px 5px; color: var(--forest); background: var(--mint); border-radius: 5px; font-size: 8px; font-weight: 700; line-height: 1.35; }
.progression-source-chips .open { color: var(--red); background: var(--red-soft); }
.progression-target { margin: 0 0 8px; color: #62355b; font-size: 10px; font-weight: 780; }
.progression-voicing { display: grid; gap: 3px; margin: 3px 0 8px; padding: 8px; background: #f5f3ed; border-radius: 7px; }
.progression-voicing small { color: var(--muted); font-size: 8px; font-weight: 800; }
.progression-voicing strong { color: var(--forest); font: 800 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.progression-voicing span, .progression-motion { color: var(--muted); font-size: 8px; line-height: 1.4; }
.progression-motion { margin: 0 0 7px; }
.progression-duration { display: grid; grid-template-columns: 58px 1fr 58px; gap: 5px; align-items: center; margin: 8px 0 9px; padding: 7px; background: var(--amber-soft); border-radius: 8px; }
.progression-duration button { min-width: 36px; min-height: 44px; padding: 4px; color: var(--forest); background: #fff; border: 1px solid #cfb48f; border-radius: 7px; font-size: 10px; font-weight: 800; }
.progression-duration button:disabled { cursor: default; }
.progression-duration output { display: grid; gap: 2px; color: var(--forest); text-align: center; font-size: 10px; font-weight: 780; }
.progression-duration output strong { font-size: 15px; }
.progression-readings { margin: 3px 0 9px; color: var(--muted); font-size: 9px; }
.progression-readings summary { color: var(--forest); font-weight: 780; }
.progression-reading { display: grid; gap: 3px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.progression-reading strong { color: var(--forest); }
.progression-reading small { font-size: 8px; }
.progression-reading p { margin: 0; line-height: 1.45; }
.progression-card-details { margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.progression-card-details > summary { cursor: pointer; color: var(--forest-2); font-size: 10px; font-weight: 780; }
.progression-card-details[open] > summary { margin-bottom: 8px; }
.progression-card-controls { display: grid; grid-template-columns: 40px 1fr 40px; gap: 5px; margin-top: auto; padding-top: 8px; }
.progression-card-controls button { min-width: 0; min-height: 44px; padding: 7px 5px; }
.progression-card-controls button:disabled { cursor: default; }
.progression-gap { min-width: 92px; height: 44px; flex: 0 0 92px; margin: 0 8px; padding: 6px 10px; color: var(--forest); background: #fff; border: 2px solid var(--forest-2); border-radius: 999px; font-size: 11px; font-weight: 780; }
.progression-gap:hover { color: #fff; background: var(--forest-2); }
.progression-suggestions { position: fixed; z-index: 40; top: 14px; right: 14px; bottom: 14px; width: min(470px, calc(100vw - 28px)); margin: 0; padding: 20px; overflow-y: auto; background: var(--mint); border: 1px solid #8eafa0; border-radius: 16px; box-shadow: 0 22px 70px rgba(21,61,53,.28); }
.progression-suggestions[hidden] { display: none; }
.suggestion-heading { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.suggestion-heading h4 { margin: 0; color: var(--forest); font: 760 24px/1.1 Georgia, "Times New Roman", serif; }
.progression-suggestion-group { margin-top: 17px; }
.progression-suggestion-group h5 { margin: 0 0 8px; color: var(--forest); font-size: 12px; }
.progression-suggestion-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.progression-suggestion-card { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px; background: #fff; border: 1px solid #c2c9c4; border-left: 4px solid var(--forest-2); border-radius: 9px; }
.progression-suggestion-card.audition-active { outline: 4px solid rgba(194,118,43,.45); background: #fff9ef; }
.progression-suggestion-card.category-parallel { border-left-color: var(--amber); }
.progression-suggestion-card.category-applied { border-left-color: #814c78; }
.progression-suggestion-card.category-chromatic { border-left-color: var(--red); }
.progression-suggestion-card-heading strong { color: var(--forest); font: 780 21px/1 Georgia, "Times New Roman", serif; }
.progression-suggestion-card-heading span { color: var(--forest); font: 800 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.progression-creative-label { margin: 0; color: var(--forest); font-size: 12px; font-weight: 780; }
.progression-connections { display: flex; flex-wrap: wrap; gap: 5px; }
.progression-connections span { padding: 5px 7px; color: var(--forest); background: var(--mint); border-radius: 999px; font-size: 9px; font-weight: 720; }
.progression-suggestion-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.progression-suggestion-actions button { min-height: 44px; }
.progression-suggestion-proof { color: var(--muted); font-size: 10px; }
.progression-suggestion-proof summary, .progression-suggestion-boundary summary { cursor: pointer; color: var(--forest-2); font-weight: 780; }
.progression-suggestion-boundary { margin-top: 18px; color: var(--muted); font-size: 10px; }
.progression-facts { margin: 0; padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.progression-cost { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.progression-after { display: block; max-width: 100%; padding: 7px; overflow-x: auto; color: var(--forest); background: #f3f1eb; border-radius: 5px; font-size: 9px; white-space: nowrap; }
.progression-suggestion-card .secondary-button { width: 100%; min-height: 44px; margin-top: auto; }
.creative-transport { position: sticky; z-index: 15; top: 8px; display: grid; grid-template-columns: minmax(270px, 1fr) auto; gap: 9px 16px; align-items: center; margin: 14px 0; padding: 11px 13px; color: #fff; background: rgba(21,61,53,.97); border: 1px solid #082a24; border-radius: 14px; box-shadow: 0 10px 28px rgba(21,61,53,.22); backdrop-filter: blur(8px); }
.creative-transport-main { min-width: 0; display: flex; align-items: center; gap: 8px; }
.creative-transport-main > button { min-height: 44px; }
.creative-play { min-width: 76px; }
.creative-play.is-playing { color: #fff; background: var(--red); }
.creative-now { min-width: 0; display: grid; gap: 1px; margin-left: 4px; }
.creative-now small { color: #c9ddd4; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.creative-now strong { overflow: hidden; font: 760 16px/1.15 Georgia, "Times New Roman", serif; text-overflow: ellipsis; white-space: nowrap; }
.creative-now span { overflow: hidden; color: #dce9e3; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.creative-now span.error { color: #ffe1dc; }
.creative-transport-controls { display: flex; align-items: center; gap: 7px; }
.creative-transport-controls > label { display: grid; gap: 2px; color: #dce9e3; font-size: 8px; font-weight: 780; }
.creative-transport-controls .input-with-unit { width: 104px; color: var(--ink); }
.creative-transport-controls .input-with-unit input { width: 62px; min-height: 38px; padding: 6px 7px; }
.creative-transport-controls .audition-volume { width: 178px; min-width: 178px; grid-template-columns: auto 1fr 34px; padding: 3px 7px; color: var(--forest); }
.transport-toggle { min-height: 40px; padding: 7px 10px; color: #fff; background: transparent; border: 1px solid #87aa9b; border-radius: 8px; font-size: 10px; font-weight: 780; }
.transport-toggle[aria-pressed="true"] { color: var(--forest); background: #fff; border-color: #fff; }
.creative-transport .text-button { color: #fff; }
.creative-transport .text-button:hover { color: #f4d9b8; }
.creative-transport .audition-position { grid-column: 1 / -1; margin: 0; background: #52756b; }
.transport-shortcut { grid-column: 1 / -1; color: #bdd2c9; font-size: 8px; text-align: right; }
.audition-panel { margin: 22px 0; padding: 20px; color: var(--ink); background: #f3ede2; border: 1px solid #cfbfaa; border-radius: 14px; }
.arrangement-panel { margin-top: 22px; padding: 20px; color: var(--ink); background: #edf4f0; border: 1px solid #b7cbc1; border-radius: 14px; }
.arrangement-panel h5 { margin: 0 0 4px; color: var(--forest); font-size: 13px; }
.arrangement-capture { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: end; margin: 16px 0 10px; }
.arrangement-capture label { display: grid; gap: 5px; color: var(--forest); font-size: 10px; font-weight: 780; }
.arrangement-capture input, .arrangement-card > input { width: 100%; min-height: 44px; padding: 9px 10px; color: var(--ink); background: #fff; border: 1px solid #b7c6bf; border-radius: 8px; }
.arrangement-capture button { min-height: 44px; }
.arrangement-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.arrangement-actions button { min-height: 44px; }
.arrangement-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.arrangement-columns > section { min-width: 0; padding: 13px; background: rgba(255,255,255,.6); border: 1px solid #cbd8d2; border-radius: 11px; }
.arrangement-list { display: grid; gap: 8px; }
.arrangement-card, .arrangement-form-card { min-width: 0; display: grid; gap: 6px; padding: 10px; background: #fff; border: 1px solid #c2d0c9; border-radius: 9px; }
.arrangement-card code, .arrangement-form-card code { overflow-x: auto; padding: 6px 7px; color: var(--forest); background: #f3f1eb; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.arrangement-card small { color: var(--muted); font-size: 9px; }
.arrangement-card-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.arrangement-card-actions button { min-height: 44px; flex: 1 1 auto; }
.arrangement-form-heading { display: flex; align-items: center; gap: 8px; color: var(--forest); }
.arrangement-form-number { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; color: #fff; background: var(--forest-2); border-radius: 50%; font-size: 9px; font-weight: 850; }
.arrangement-form-controls { display: grid; grid-template-columns: 40px 40px 44px 40px 40px 1fr; gap: 4px; align-items: center; }
.arrangement-form-controls button { min-width: 0; min-height: 44px; padding: 6px 4px; }
.arrangement-form-controls output { color: var(--forest); text-align: center; font-size: 12px; font-weight: 850; }
.arrangement-chart-preview { max-height: 320px; overflow: auto; padding: 14px; color: var(--ink); background: #fff; border: 1px solid #c8d2cd; border-radius: 8px; font: 700 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.arrangement-print-chart { display: none; }
.audition-heading h4 { margin: 0; color: var(--forest); font: 760 27px/1.1 Georgia, "Times New Roman", serif; }
.reference-synth-badge { padding: 7px 9px; color: #66350f; background: var(--amber-soft); border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.audition-form { display: grid; gap: 13px; margin-top: 17px; }
.audition-controls { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; }
.audition-controls label, .audition-volume { min-width: 0; display: grid; gap: 5px; color: var(--forest); font-size: 10px; font-weight: 780; }
.audition-controls input, .audition-controls select { width: 100%; min-height: 44px; padding: 8px 9px; color: var(--ink); background: #fff; border: 1px solid #c9c4b9; border-radius: 8px; }
.input-with-unit { display: grid; grid-template-columns: minmax(68px, 1fr) auto; align-items: center; overflow: hidden; background: #fff; border: 1px solid #c9c4b9; border-radius: 8px; }
.input-with-unit input { border: 0; }
.input-with-unit span { padding-right: 9px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.audition-switches { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.audition-switches .choice-chip { min-height: 44px; }
.audition-volume { min-width: 210px; grid-template-columns: auto minmax(100px, 1fr) 38px; align-items: center; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.audition-volume input { min-height: 30px; accent-color: var(--forest-2); }
.audition-volume output { color: var(--muted); text-align: right; }
.audition-pattern-heading { display: flex; justify-content: space-between; margin: 18px 0 7px; }
.audition-pattern-heading div { display: grid; gap: 3px; }
.audition-pattern-heading strong { color: var(--forest); font-size: 12px; }
.audition-pattern-heading span { color: var(--muted); font-size: 10px; }
.audition-click-grid { display: flex; max-width: 100%; gap: 4px; overflow-x: auto; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.audition-click-cell { min-width: 50px; min-height: 52px; flex: 1 0 50px; display: grid; gap: 3px; place-items: center; padding: 6px; color: var(--forest); background: var(--mint); border: 1px solid #afc2b8; border-radius: 7px; }
.audition-click-cell strong { font: 850 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.audition-click-cell small { font-size: 8px; }
.audition-click-cell.accent { color: #fff; background: var(--amber); border-color: var(--amber); }
.audition-click-cell.subdivision { color: var(--muted); background: #eeece5; border-color: #d5d1c7; }
.audition-click-cell.off { color: #6a716e; background: #fff; border-style: dashed; }
.audition-transport { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.audition-transport button { min-height: 48px; }
.audition-position { height: 7px; margin: 16px 0 6px; overflow: hidden; background: #d6d1c6; border-radius: 999px; }
.audition-position::before { content: ""; width: var(--audition-position, 0%); height: 100%; display: block; background: var(--amber); }
.audition-panic { position: fixed; z-index: 20; right: 18px; bottom: 18px; min-width: 132px; min-height: 52px; padding: 10px 15px; color: #fff; background: var(--red); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 10px 32px rgba(91,32,27,.35); font-weight: 850; }
.transformation-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.tab-transform-panel { grid-column: 1 / -1; }
.compact-tool-form { display: grid; grid-template-columns: minmax(140px, 1fr) 100px minmax(130px, .8fr); gap: 10px; align-items: end; }
.compact-tool-form .primary-button { grid-column: 1 / -1; }
.subtool-heading { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.subtool-heading .eyebrow { margin-bottom: 5px; }
.subtool-heading h4 { margin: 0 0 12px; color: var(--forest); font-size: 20px; }
.text-transform-form, .tab-transform-form { display: grid; gap: 11px; }
.text-transform-form textarea, .tab-transform-form textarea { width: 100%; padding: 12px; resize: vertical; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.inline-fields { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.transform-text-output { max-height: 360px; overflow: auto; white-space: pre; }
.local-file-label { width: fit-content; padding: 9px 11px; color: var(--forest); background: var(--mint); border-radius: 8px; }
.local-file-label input { display: block; width: min(100%, 320px); min-height: 32px; margin-top: 5px; font-size: 11px; }
.tab-source-field textarea { min-height: 190px; }
.tab-transform-options { display: grid; grid-template-columns: minmax(210px, 1fr) 110px 140px auto; gap: 10px; align-items: end; }
.tab-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.tab-before-after section { min-width: 0; }
.tab-before-after h5 { margin: 0; color: var(--forest); font-size: 12px; }
.tab-before-after .tab-block { max-height: 420px; overflow: auto; }
.rhythm-tool-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: start; }
.notation-key { display: grid; gap: 6px; margin: 12px 0 16px; padding: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; line-height: 1.5; }
.notation-key > div { display: grid; grid-template-columns: 58px 1fr; gap: 9px; }
.notation-key strong { color: var(--forest); }
.notation-key code { padding: 2px 4px; color: var(--forest); background: var(--mint); border-radius: 4px; font-weight: 800; }
.stroke-palette { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 16px 0 8px; }
.stroke-palette > span { margin-right: 3px; color: var(--forest); font-size: 11px; font-weight: 800; }
.stroke-palette button { min-width: 54px; min-height: 48px; display: grid; gap: 2px; place-items: center; padding: 6px 9px; color: var(--forest); background: #fff; border: 1px solid #c9c6bd; border-radius: 9px; }
.stroke-palette button[aria-pressed="true"] { color: #fff; background: var(--forest-2); border-color: var(--forest-2); }
.stroke-palette button strong { font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.stroke-palette button small { font-size: 9px; }
.strumming-grid { display: flex; max-width: 100%; overflow-x: auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 11px; scrollbar-color: #918c82 #ebe8e0; }
.strum-cell { min-width: 52px; height: 63px; flex: 1 0 52px; display: grid; place-items: center; gap: 4px; padding: 7px 5px; color: #fff; background: var(--forest-2); border: 1px solid #fff; border-radius: 7px; }
.strum-cell.rest { color: var(--muted); background: #ece9e1; }
.strum-cell small { font: 750 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strum-cell strong { font: 850 17px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.generator-form { display: grid; gap: 11px; }
.generator-form fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.generator-form legend { padding: 0 5px; color: var(--forest); font-size: 11px; font-weight: 780; }
.choice-chip { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; padding: 7px 9px; color: var(--forest); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; font-weight: 720; }
.choice-chip input, .check-label input { width: 24px; height: 24px; margin: 0; accent-color: var(--forest-2); }
.check-label { display: flex; align-items: center; gap: 8px; color: var(--forest); font-size: 12px; font-weight: 720; }
.validation-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.validation-checks span { padding: 6px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.validation-checks .passed { color: var(--forest); background: var(--mint); }
.validation-checks .failed { color: var(--red); background: var(--red-soft); }
.tab-evidence-grid { display: grid; gap: 20px; }
.onset-picker { display: grid; gap: 8px; margin-top: 15px; }
.onset-picker > strong { color: var(--forest); font-size: 11px; }
.onset-buttons { display: flex; max-width: 100%; overflow-x: auto; gap: 5px; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.onset-buttons button { min-width: 40px; min-height: 40px; flex: 0 0 40px; color: var(--forest); background: #fff; border: 1px solid #c9c6bd; border-radius: 7px; font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.onset-buttons button[aria-pressed="true"] { color: #fff; background: var(--forest-2); border-color: var(--forest-2); }
.tab-diff-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 980px) {
  .home-principles { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr 1fr 1fr; }
  .preset-grid { grid-template-columns: 1fr 1fr; }
  .setup-grid { grid-template-columns: 1fr; }
  .catalog-tools { grid-template-columns: 1fr 1fr; }
  .search-label { grid-column: 1 / -1; }
  .instrument-fields { grid-template-columns: 1fr 1fr; }
  .instrument-fields .primary-button { margin-top: 0; }
  .overlay-controls { grid-template-columns: 1fr 1fr; }
  .chord-lab-grid { grid-template-columns: 1fr; }
  .connection-grid { grid-template-columns: 1fr; }
  .theory-grid { grid-template-columns: 1fr; }
  .progression-start-grid { grid-template-columns: 1fr; }
  .transformation-grid { grid-template-columns: 1fr; }
  .rhythm-tool-grid { grid-template-columns: 1fr; }
  .tab-transform-panel { grid-column: auto; }
  .triad-panel { grid-column: auto; }
  .triad-search-form { grid-template-columns: 1fr 1fr; }
  .triad-search-form label:first-child, .triad-search-form .primary-button { grid-column: 1 / -1; }
  .history-summary { grid-template-columns: 1fr 1fr; }
  .history-skill { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(75px, .6fr)); }
  .history-skill .text-button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
  .site-header, main { padding-left: 17px; padding-right: 17px; }
  .site-header { padding-top: 17px; }
  .site-header { flex-wrap: wrap; gap: 11px; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; }
  .site-nav a { min-width: max-content; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 1; padding-left: 9px; padding-right: 9px; text-align: center; font-size: 11px; }
  .home-hero { margin: 36px 0 31px; }
  .home-hero h1 { font-size: 48px; }
  .journey-grid, .principle-grid { grid-template-columns: 1fr; }
  .tool-directory-grid { grid-template-columns: 1fr; }
  .journey-card { min-height: 130px; padding: 20px 17px; gap: 12px; }
  .journey-card strong { font-size: 24px; }
  .home-principles { margin-top: 30px; gap: 22px; }
  .hero { margin: 20px 0 24px; }
  .hero h1 { font-size: 35px; }
  .hero .lede { font-size: 15px; }
  .source-switch { grid-template-columns: 1fr; }
  .practice-presets { margin-top: -6px; }
  .preset-heading { display: grid; align-items: start; }
  .preset-heading-actions { justify-items: start; }
  .preset-grid { grid-template-columns: 1fr 1fr; }
  .recovery-card, .history-heading { display: grid; }
  .recovery-actions { justify-content: stretch; }
  .recovery-actions button { width: 100%; }
  .local-badge { font-size: 11px; }
  .panel { padding: 19px; }
  .field-grid, .skill-list { grid-template-columns: 1fr; }
  .intake-heading { grid-template-columns: 1fr; }
  .file-picker { width: 100%; }
  .skill-list { height: 58vh; }
  .catalog-tools { grid-template-columns: 1fr 1fr; }
  .catalog-tools label { grid-column: 1 / -1; }
  .launch-bar { bottom: 8px; padding: 13px; }
  .launch-bar div { display: none; }
  .launch-bar .primary-button { width: 100%; }
  .practice-topline { align-items: flex-start; }
  .progress-copy { min-width: 130px; display: grid; justify-items: end; }
  .question-card { padding: 22px 18px; border-radius: 16px; }
  .where { width: 100%; margin-left: 0; }
  .tab-block { margin-left: -8px; margin-right: -8px; padding: 17px 14px; }
  .response-field { padding: 16px 13px; }
  .classification-choices .answer-choice { flex: 1 1 45%; }
  .answer-actions { display: grid; }
  .answer-actions button { width: 100%; }
  .count-grid { grid-template-columns: repeat(4, 1fr); }
  .fretboard-scroll { padding: 7px; }
  .fretboard-grid.frets-13 { grid-template-columns: 60px repeat(13, 40px); }
  .fretboard-grid.frets-25 { grid-template-columns: 60px repeat(25, 40px); }
  .fret-cell { width: 40px; height: 40px; }
  .fretboard-viewport-status { width: 100%; margin-left: 0; }
  .feedback-categories { grid-template-columns: 1fr; }
  .history-summary { grid-template-columns: 1fr 1fr; }
  .history-skill { grid-template-columns: 1fr 1fr; }
  .history-skill-name { grid-column: 1 / -1; }
  .history-skill .text-button { grid-column: 1 / -1; width: 100%; }
  .history-session { grid-template-columns: 1fr 1fr; }
  .history-session strong { text-align: left; }
  .data-actions { display: grid; }
  .storage-details { grid-template-columns: 1fr; }
  .storage-details dd { margin-bottom: 6px; }
  .voicing-heading { display: grid; }
  .voicing-row { grid-template-columns: 24px 45px 1fr minmax(78px, auto); padding: 8px; }
  .workspace-hero { grid-template-columns: 1fr; margin-top: 30px; }
  .workspace-hero h1 { font-size: 43px; }
  .workspace-hero .link-button { width: 100%; }
  .instrument-fields, .overlay-controls { grid-template-columns: 1fr; }
  .workspace-index { grid-template-columns: 1fr 1fr; }
  .context-panel > summary { padding: 16px 18px; }
  .context-panel .instrument-fields { padding: 18px; }
  .instrument-fields .primary-button { width: 100%; }
  .tool-heading { display: grid; gap: 12px; }
  .tool-heading .link-button { justify-content: flex-start; }
  .neck-navigation > span { width: 100%; margin-left: 0; }
  .fretboard-neck-scroll, .shape-scroll { margin-left: -7px; margin-right: -7px; padding: 7px 0; }
  .fretboard-fret-number, .fretboard-fret-cell { width: 48px; flex-basis: 48px; }
  .shape-fret-label, .shape-cell { width: 44px; flex-basis: 44px; }
  .shape-actions, .comparison-form, .saved-shape-status, .triad-search-form, .scale-context-form, .compact-tool-form, .inline-fields, .tab-transform-options, .tab-before-after, .tab-diff-inputs { grid-template-columns: 1fr; }
  .compact-tool-form .primary-button { grid-column: auto; }
  .comparison-form .primary-button, .triad-search-form label:first-child, .triad-search-form .primary-button { grid-column: auto; }
  .triad-shape-card { grid-template-columns: 1fr; }
  .progression-workspace-heading, .suggestion-heading { display: grid; }
  .quick-key-chooser { grid-template-columns: 1fr; }
  .quick-key-roots { grid-template-columns: repeat(4, 1fr); }
  .quick-key-modes, .quick-key-apply, .quick-key-chooser > .text-button { grid-column: 1 / -1; }
  .progression-actions { justify-content: stretch; }
  .progression-actions button { flex: 1 1 45%; }
  .progression-lane-scroll { margin-left: -7px; margin-right: -7px; padding: 10px; }
  .progression-card { width: 202px; flex-basis: 202px; }
  .progression-gap { margin: 0 6px; }
  .progression-suggestions { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 78vh; padding: 16px; border-radius: 18px 18px 0 0; }
  .creative-transport { top: 6px; grid-template-columns: 1fr; padding: 10px; }
  .creative-transport-main { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
  .creative-transport-controls { display: grid; grid-template-columns: 100px auto minmax(86px, 1fr); }
  .creative-transport-controls .audition-volume { width: 100%; min-width: 0; }
  .creative-transport-controls .audition-volume { grid-column: 1 / -1; }
  .creative-transport-controls .text-button { grid-column: 3; grid-row: 1; justify-self: end; }
  .progression-suggestions .suggestion-heading { display: grid; grid-template-columns: 1fr auto; }
  .progression-suggestions .suggestion-heading button { min-height: 44px; padding-inline: 10px; }
  .transport-shortcut { display: none; }
  .audition-panel { margin-left: -7px; margin-right: -7px; padding: 14px; }
  .arrangement-panel { margin-left: -7px; margin-right: -7px; padding: 14px; }
  .arrangement-capture, .arrangement-columns { grid-template-columns: 1fr; }
  .arrangement-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .arrangement-form-controls { grid-template-columns: repeat(5, 40px) 1fr; overflow-x: auto; }
  .audition-controls { grid-template-columns: 1fr; }
  .audition-switches { display: grid; }
  .audition-volume { width: 100%; }
  .audition-transport { display: grid; }
  .audition-transport button { width: 100%; }
  .audition-panic { right: 10px; bottom: 10px; }
}

@media (max-width: 470px) {
  .creative-transport-main > button { width: 76px; }
  .creative-now { margin: 0; }
  .creative-transport-controls { grid-template-columns: 100px 1fr auto; }
  .progression-suggestion-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  body.printing-arrangement > * { display: none !important; }
  body.printing-arrangement .arrangement-print-chart { display: block !important; margin: 0; color: #000; background: #fff; font: 12pt/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
}