:root {
  --mm-bg: #0b0f17;
  --mm-surface: #121a27;
  --mm-surface-2: #192335;
  --mm-border: rgba(173, 190, 215, 0.28);
  --mm-text: #e7eef8;
  --mm-muted: #9ca9c0;
  --mm-faint-aa: #8391aa;
  --mm-accent: #2dd4bf;
  --mm-focus: #7dd3fc;
  --mm-danger: #fb7185;
  --mm-warning: #fbbf24;
  --mm-radius: 12px;
  --mm-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.mm-skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 10000;
  translate: 0 -180%;
  border: 2px solid var(--mm-focus);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 9px 13px;
  font: 600 0.9rem / 1.2 var(--mm-sans);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.mm-skip-link:focus-visible {
  translate: 0 0;
}

.mm-sitebar {
  position: relative;
  z-index: 90;
  border-block-end: 1px solid var(--mm-border);
  background: color-mix(in srgb, var(--mm-bg) 92%, transparent);
  color: var(--mm-text);
  backdrop-filter: blur(14px);
}

.mm-sitebar__inner,
.mm-site-footer__inner {
  width: min(1120px, calc(100% - 28px));
  margin-inline: auto;
}

.mm-sitebar__inner {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-sitebar__brand,
.mm-sitebar__current,
.mm-sitebar__action,
.mm-sitebar__language {
  color: inherit;
  text-decoration: none;
}

.mm-sitebar__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: 700 0.78rem / 1 var(--mm-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mm-sitebar__brand span {
  color: var(--mm-accent);
}

.mm-sitebar__current {
  overflow: hidden;
  color: var(--mm-faint-aa);
  font: 500 0.78rem / 1.3 var(--mm-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-sitebar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mm-sitebar__action,
.mm-sitebar__language {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  color: var(--mm-muted);
  font: 600 0.75rem / 1 var(--mm-sans);
}

.mm-sitebar__language {
  border-color: var(--mm-border);
  color: var(--mm-text);
}

.mm-sitebar a:hover,
.mm-sitebar button:hover {
  color: var(--mm-text);
}

.mm-sitebar a:focus-visible,
.mm-sitebar button:focus-visible,
.mm-site-footer a:focus-visible,
.mm-site-footer button:focus-visible,
.mm-dialog button:focus-visible,
.mm-notice button:focus-visible,
[data-mm-tabs] [role="tab"]:focus-visible {
  outline: 3px solid var(--mm-focus);
  outline-offset: 3px;
}

.mm-legacy-main {
  display: block;
  min-width: 0;
}

.mm-site-footer {
  position: relative;
  z-index: 10;
  border-block-start: 1px solid var(--mm-border);
  background: var(--mm-bg);
  color: var(--mm-muted);
}

.mm-site-footer__inner {
  display: grid;
  gap: 6px;
  padding-block: 28px 36px;
  font: 0.78rem / 1.55 var(--mm-sans);
}

.mm-site-footer__meta {
  color: var(--mm-faint-aa);
}

.mm-dialog {
  width: min(520px, calc(100% - 32px));
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  background: var(--mm-surface);
  color: var(--mm-text);
  padding: 0;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
}

.mm-dialog::backdrop {
  background: rgba(3, 7, 18, 0.72);
}

.mm-dialog__body {
  padding: 22px;
}

.mm-dialog__body h2 {
  margin: 0 0 10px;
  font: 650 1.1rem / 1.3 var(--mm-sans);
}

.mm-dialog__body p {
  color: var(--mm-muted);
}

.mm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 18px;
}

.mm-dialog button,
.mm-demo-button {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 8px 12px;
  font: 600 0.82rem / 1 var(--mm-sans);
  cursor: pointer;
}

.mm-notice-region {
  position: fixed;
  z-index: 1000;
  inset-block-start: 62px;
  inset-inline-end: 14px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100% - 28px));
  pointer-events: none;
}

.mm-notice {
  display: flex;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--mm-border);
  border-inline-start: 3px solid var(--mm-accent);
  border-radius: 10px;
  background: var(--mm-surface);
  color: var(--mm-text);
  padding: 11px 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  font: 0.82rem / 1.45 var(--mm-sans);
  pointer-events: auto;
}

.mm-notice[data-variant="warning"] {
  border-inline-start-color: var(--mm-warning);
}

.mm-notice[data-variant="error"] {
  border-inline-start-color: var(--mm-danger);
}

.mm-notice__dismiss {
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--mm-muted);
  font-size: 1.15rem;
  cursor: pointer;
}

.mm-tabs-demo {
  color: var(--mm-text);
  font-family: var(--mm-sans);
}

.mm-tabs-demo [role="tablist"] {
  display: flex;
  gap: 6px;
}

.mm-tabs-demo [role="tab"] {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface);
  color: var(--mm-muted);
  padding: 8px 12px;
}

.mm-tabs-demo [role="tab"][aria-selected="true"] {
  border-color: var(--mm-accent);
  color: var(--mm-text);
}

.mm-tabs-demo [role="tabpanel"] {
  margin-block-start: 12px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  padding: 14px;
  background: var(--mm-surface);
}

.mm-studio-placeholder {
  width: min(880px, calc(100% - 32px));
  margin: 56px auto;
  border: 1px solid var(--mm-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--mm-surface), #0e1521);
  color: var(--mm-text);
  padding: clamp(24px, 5vw, 48px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  font-family: var(--mm-sans);
}

.mm-studio-placeholder__eyebrow {
  color: var(--mm-accent);
  font: 700 0.72rem / 1 var(--mm-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mm-studio-placeholder h1 {
  margin: 12px 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1.15;
}

.mm-studio-placeholder p {
  color: var(--mm-muted);
  line-height: 1.75;
}

.mm-studio-placeholder a {
  color: var(--mm-accent);
}

@media (max-width: 680px) {
  .mm-sitebar__current,
  .mm-sitebar__action {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-skip-link {
    transition: none;
  }
}

.mm-report-trigger {
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.mm-report-dialog {
  width: min(620px, calc(100% - 28px));
}

.mm-report-current {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-block: 10px 16px;
  color: var(--mm-faint-aa);
  font: 0.78rem / 1.5 var(--mm-mono);
}

.mm-report-field {
  display: grid;
  gap: 6px;
  margin-block: 13px;
  color: var(--mm-muted);
  font: 600 0.8rem / 1.4 var(--mm-sans);
}

.mm-report-field select,
.mm-report-field textarea,
.mm-report-field input {
  width: 100%;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 9px 10px;
  font: 0.86rem / 1.45 var(--mm-sans);
}

.mm-report-field textarea {
  resize: vertical;
}
.mm-report-field select:focus-visible,
.mm-report-field textarea:focus-visible,
.mm-report-field input:focus-visible,
.mm-admin button:focus-visible {
  outline: 3px solid var(--mm-focus);
  outline-offset: 2px;
}
.mm-report-unavailable {
  color: var(--mm-warning);
}
.mm-report-status {
  min-height: 1.5em;
  color: var(--mm-faint-aa);
}
.mm-report-actions {
  gap: 8px;
}
.mm-report-submit {
  border-color: var(--mm-accent);
}

.mm-admin {
  width: min(1160px, calc(100% - 28px));
  margin-inline: auto;
  padding-block: 30px 70px;
  color: var(--mm-text);
  font-family: var(--mm-sans);
}
.mm-admin h1,
.mm-admin h2 {
  color: var(--mm-text);
}
.mm-admin section {
  margin-block-start: 30px;
}
.mm-admin button {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 9px 12px;
  cursor: pointer;
}
.mm-admin-actions {
  margin-block: 12px;
}
.mm-admin-table-wrap {
  overflow-x: auto;
}
.mm-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.mm-admin-table th,
.mm-admin-table td {
  border-block-end: 1px solid var(--mm-border);
  padding: 9px;
  text-align: start;
  vertical-align: top;
}
.mm-admin-table td:nth-child(4) {
  max-width: 360px;
  white-space: pre-wrap;
}

.mm-learning-home {
  position: relative;
  z-index: 2;
  border-block-end: 1px solid var(--mm-border);
  background: linear-gradient(180deg, rgba(18, 26, 39, 0.96), rgba(11, 15, 23, 0.92));
  color: var(--mm-text);
}

.mm-learning-home__inner {
  width: min(1120px, calc(100% - 28px));
  margin-inline: auto;
  padding-block: 34px 38px;
}

.mm-learning-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 24px;
  align-items: start;
}

.mm-learning-eyebrow {
  color: var(--mm-accent);
  font: 700 0.72rem / 1 var(--mm-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mm-learning-summary h1 {
  margin: 8px 0 10px;
  font: 700 clamp(1.7rem, 4vw, 2.7rem) / 1.14 var(--mm-sans);
  letter-spacing: -0.035em;
}

.mm-learning-summary > div:first-child > p {
  max-width: 62ch;
  margin: 0;
  color: var(--mm-muted);
}

.mm-learning-summary__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mm-learning-summary__metrics div {
  min-width: 0;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface);
  padding: 12px 10px;
}

.mm-learning-summary__metrics strong,
.mm-learning-summary__metrics span {
  display: block;
}

.mm-learning-summary__metrics strong {
  color: var(--mm-text);
  font: 700 1.15rem / 1 var(--mm-mono);
}

.mm-learning-summary__metrics span {
  margin-block-start: 7px;
  overflow: hidden;
  color: var(--mm-faint-aa);
  font: 0.68rem / 1.2 var(--mm-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-learning-summary__insights {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mm-learning-summary__insights p {
  margin: 0;
  border-inline-start: 3px solid var(--mm-accent);
  border-radius: 8px;
  background: rgba(25, 35, 53, 0.72);
  padding: 12px 14px;
}

.mm-learning-summary__insights strong,
.mm-learning-summary__insights span {
  display: block;
}

.mm-learning-summary__insights strong {
  margin-block-end: 4px;
  font-size: 0.76rem;
}

.mm-learning-summary__insights span {
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-learning-tabs {
  margin-block-start: 24px;
}

.mm-learning-tabs > [role="tablist"] {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-block-end: 1px solid var(--mm-border);
  scrollbar-width: thin;
}

.mm-learning-tabs [role="tab"] {
  appearance: none;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--mm-muted);
  padding: 10px 13px;
  font: 650 0.82rem / 1 var(--mm-sans);
  white-space: nowrap;
  cursor: pointer;
}

.mm-learning-tabs [role="tab"][aria-selected="true"] {
  border-block-end-color: var(--mm-accent);
  color: var(--mm-text);
}

.mm-learning-tabs [role="tabpanel"] {
  padding-block-start: 20px;
}

.mm-learning-tabs [role="tabpanel"] > h2 {
  margin: 0 0 12px;
  font: 650 1.05rem / 1.3 var(--mm-sans);
}

.mm-learning-list,
.mm-learning-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-learning-skill,
.mm-learning-history li {
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: rgba(18, 26, 39, 0.76);
  padding: 12px 13px;
}

.mm-learning-skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.5fr) auto;
  gap: 12px;
  align-items: center;
}

.mm-learning-skill__heading {
  min-width: 0;
}

.mm-learning-skill__heading strong,
.mm-learning-skill__heading span {
  display: block;
}

.mm-learning-skill__heading strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-learning-skill__heading span {
  margin-block-start: 4px;
  color: var(--mm-faint-aa);
  font-size: 0.72rem;
}

.mm-learning-meter {
  overflow: hidden;
  inline-size: 100%;
  block-size: 7px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(131, 145, 170, 0.18);
}

.mm-learning-meter::-webkit-progress-bar {
  border-radius: inherit;
  background: rgba(131, 145, 170, 0.18);
}

.mm-learning-meter::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mm-accent), var(--mm-focus));
}

.mm-learning-meter::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mm-accent), var(--mm-focus));
}

.mm-learning-link {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  color: var(--mm-text);
  padding: 7px 10px;
  font: 650 0.74rem / 1 var(--mm-sans);
  text-decoration: none;
  white-space: nowrap;
}

.mm-learning-link:hover {
  border-color: var(--mm-accent);
}

.mm-learning-link:focus-visible,
.mm-learning-tabs [role="tab"]:focus-visible,
.mm-learning-goals input:focus-visible,
.mm-learning-goals button:focus-visible {
  outline: 3px solid var(--mm-focus);
  outline-offset: 3px;
}

.mm-learning-empty,
.mm-learning-storage {
  color: var(--mm-faint-aa);
  font-size: 0.8rem;
}

.mm-learning-history li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: var(--mm-muted);
  font-size: 0.78rem;
}

.mm-learning-history__status {
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 700;
}

.mm-learning-history__status.is-correct {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
}

.mm-learning-history__status.is-wrong {
  background: rgba(251, 113, 133, 0.14);
  color: #fda4af;
}

.mm-learning-history time {
  color: var(--mm-faint-aa);
}

.mm-learning-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.mm-learning-goals label,
.mm-learning-goals label span {
  display: block;
}

.mm-learning-goals label span {
  margin-block-end: 5px;
  color: var(--mm-muted);
  font-size: 0.74rem;
}

.mm-learning-goals input {
  inline-size: 100%;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 9px 10px;
  font: 0.85rem / 1 var(--mm-mono);
}

.mm-learning-goals button {
  border: 1px solid color-mix(in srgb, var(--mm-accent) 60%, var(--mm-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--mm-accent) 13%, var(--mm-surface));
  color: var(--mm-text);
  padding: 10px 13px;
  font: 650 0.8rem / 1 var(--mm-sans);
  cursor: pointer;
}

@media (max-width: 760px) {
  .mm-learning-summary {
    grid-template-columns: 1fr;
  }

  .mm-learning-summary__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-learning-summary__insights {
    grid-template-columns: 1fr;
  }

  .mm-learning-skill {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mm-learning-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mm-learning-link {
    grid-column: 2;
    grid-row: 1;
  }

  .mm-learning-history li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mm-learning-history time {
    grid-column: 2;
  }

  .mm-learning-goals {
    grid-template-columns: 1fr;
  }
}

/* IUPAC nomenclature trainer */
.mm-iupac-learning-style[hidden],
.mm-iupac-stepwise[hidden],
.mm-iupac-annotation-panel[hidden],
.mm-iupac-answer-form[hidden],
.mm-iupac-hint[hidden] {
  display: none;
}

.mm-iupac-app {
  --mm-iupac-good: #34d399;
  --mm-iupac-bad: #fb7185;
  --mm-iupac-warn: #fbbf24;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 72px;
}

.mm-iupac-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: end;
  margin-bottom: 18px;
}

.mm-iupac-hero--problem-first {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 8px;
}

.mm-iupac-options {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-border);
}

.mm-iupac-options__toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface) 88%, var(--mm-bg));
}

.mm-iupac-options__controls {
  grid-row: 1 / span 2;
}

.mm-iupac-options__toolbar :is(.mm-iupac-mode-help, .mm-iupac-filter-summary) {
  grid-column: 2;
}

.mm-iupac-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(1.6rem, 4vw, 2.45rem);
  line-height: 1.14;
}

.mm-iupac-hero p {
  margin: 0;
  color: var(--mm-muted);
}

.mm-iupac-eyebrow {
  color: var(--mm-accent);
  font: 700 0.72rem / 1.2 var(--mm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-iupac-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mm-iupac-mode {
  display: flex;
  padding: 3px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-bg);
}

.mm-iupac-mode button,
.mm-iupac-filter-button,
.mm-iupac-answer-actions button,
.mm-iupac-feedback > button,
.mm-iupac-annotation-controls button {
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface);
  color: var(--mm-text);
  padding: 9px 13px;
  font: 650 0.82rem / 1 var(--mm-sans);
  cursor: pointer;
}

.mm-iupac-mode button {
  border-color: transparent;
  background: transparent;
}

.mm-iupac-mode button.is-active,
.mm-iupac-mode button[aria-pressed="true"],
.mm-iupac-annotation-controls button.is-active,
.mm-iupac-annotation-controls button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mm-accent) 62%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface));
}

.mm-iupac-mode-help,
.mm-iupac-filter-summary {
  grid-column: 1 / -1;
  font-size: 0.78rem;
}

.mm-iupac-learning-style {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface) 92%, var(--mm-bg));
}

.mm-iupac-learning-style--options {
  margin-bottom: 0;
}

.mm-iupac-learning-style__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
}

.mm-iupac-learning-style__heading span {
  color: var(--mm-accent);
  font: 700 0.68rem / 1.2 var(--mm-mono);
  letter-spacing: 0.08em;
}

.mm-iupac-learning-style__heading h2 {
  margin: 3px 0 0;
  font-size: 1.08rem;
}

.mm-iupac-learning-style__heading p {
  margin: 0;
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-iupac-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mm-iupac-style-card {
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-bg);
  color: var(--mm-text);
  text-align: left;
  cursor: pointer;
}

.mm-iupac-style-card strong {
  font-size: 0.94rem;
}

.mm-iupac-style-card span {
  color: var(--mm-muted);
  font-size: 0.78rem;
  line-height: 1.48;
}

.mm-iupac-style-card:hover {
  border-color: color-mix(in srgb, var(--mm-accent) 44%, var(--mm-border));
}

.mm-iupac-style-card.is-active,
.mm-iupac-style-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mm-accent) 72%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 10%, var(--mm-bg));
  box-shadow: inset 3px 0 0 var(--mm-accent);
}

.mm-iupac-status {
  min-height: 1.4em;
  color: var(--mm-faint-aa);
  font-size: 0.8rem;
}

.mm-iupac-question-card {
  border: 1px solid var(--mm-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--mm-surface), var(--mm-bg));
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.26);
  padding: clamp(16px, 3vw, 24px);
}

.mm-iupac-question-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--mm-faint-aa);
  font: 0.7rem / 1.3 var(--mm-mono);
}

.mm-iupac-prompt {
  margin: 12px 0;
  font-size: 1rem;
  color: var(--mm-text);
}

.mm-iupac-structure {
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: #0e1521;
}

.mm-iupac-structure-svg {
  width: 100%;
  height: min(44vw, 300px);
  min-height: 230px;
}

.mm-iupac-structure-fallback {
  font: 700 clamp(1.3rem, 4vw, 2.3rem) / 1.2 var(--mm-mono);
}

.mm-iupac-structure-annotations {
  pointer-events: none;
}

.mm-iupac-annotation-circle {
  fill: rgba(45, 212, 191, 0.18);
  stroke: #2dd4bf;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.mm-iupac-annotation-number {
  fill: #e7eef8;
  font: 700 10px / 1 var(--mm-mono);
  paint-order: stroke;
  stroke: #0e1521;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.mm-iupac-stepwise {
  margin: 14px 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 40%, var(--mm-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--mm-accent) 6%, var(--mm-surface));
}

.mm-iupac-stepwise__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.mm-iupac-stepwise__header span:first-child {
  color: var(--mm-accent);
  font: 700 0.68rem / 1.2 var(--mm-mono);
  letter-spacing: 0.06em;
}

.mm-iupac-stepwise__header h2 {
  margin: 5px 0 0;
  font-size: 1.06rem;
}

.mm-iupac-stepwise__count {
  min-width: 54px;
  padding: 6px 9px;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  color: var(--mm-faint-aa);
  font: 700 0.72rem / 1 var(--mm-mono);
  text-align: center;
}

.mm-iupac-step-trail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.mm-iupac-step-trail li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-bg);
}

.mm-iupac-step-trail li > span {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mm-border);
  border-radius: 50%;
  color: var(--mm-faint-aa);
  font: 700 0.7rem / 1 var(--mm-mono);
}

.mm-iupac-step-trail strong {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-iupac-step-trail small {
  color: var(--mm-faint-aa);
  font-size: 0.66rem;
}

.mm-iupac-step-trail li.is-current {
  border-color: color-mix(in srgb, var(--mm-accent) 70%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 9%, var(--mm-bg));
}

.mm-iupac-step-trail li.is-current > span {
  border-color: var(--mm-accent);
  color: var(--mm-text);
}

.mm-iupac-step-trail li.is-complete {
  border-color: color-mix(in srgb, var(--mm-iupac-good) 46%, var(--mm-border));
}

.mm-iupac-step-trail li.is-complete > span {
  border-color: var(--mm-iupac-good);
  background: color-mix(in srgb, var(--mm-iupac-good) 14%, transparent);
  color: var(--mm-iupac-good);
}

.mm-iupac-step-trail li.had-retry::after {
  content: "↻";
  grid-column: 2;
  color: var(--mm-iupac-warn);
  font-size: 0.7rem;
}

.mm-iupac-step-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.mm-iupac-step-options button,
.mm-iupac-step-next {
  min-height: 48px;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 10px 12px;
  font: 650 0.84rem / 1.35 var(--mm-sans);
  cursor: pointer;
}

.mm-iupac-step-options button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--mm-accent) 58%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 7%, var(--mm-bg));
}

.mm-iupac-step-options button.is-correct {
  border-color: var(--mm-iupac-good);
  background: color-mix(in srgb, var(--mm-iupac-good) 12%, var(--mm-bg));
}

.mm-iupac-step-options button.is-wrong {
  border-color: var(--mm-iupac-bad);
  background: color-mix(in srgb, var(--mm-iupac-bad) 10%, var(--mm-bg));
  opacity: 0.72;
}

.mm-iupac-step-feedback {
  min-height: 1.5em;
  margin: 11px 0 0;
  color: var(--mm-muted);
  font-size: 0.84rem;
}

.mm-iupac-step-next {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--mm-accent) 68%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface));
}

.mm-iupac-annotation-panel {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.mm-iupac-annotation-panel h2 {
  margin: 0;
  font-size: 0.8rem;
}

.mm-iupac-annotation-controls {
  display: flex;
  gap: 5px;
}

.mm-iupac-annotation-controls button {
  min-width: 34px;
  padding: 7px 9px;
  font-family: var(--mm-mono);
}

.mm-iupac-annotation-panel p {
  margin: 0;
  color: var(--mm-faint-aa);
  font-size: 0.75rem;
}

.mm-iupac-answer-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.mm-iupac-answer-form label {
  font-size: 0.84rem;
  font-weight: 650;
}

.mm-iupac-answer-form input {
  width: 100%;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #0b0f17;
  color: var(--mm-text);
  padding: 13px 14px;
  font: 0.98rem / 1.3 var(--mm-mono);
}

.mm-iupac-answer-form input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mm-accent) 58%, transparent);
  outline-offset: 2px;
  border-color: var(--mm-accent);
}

.mm-iupac-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-iupac-answer-actions button[type="submit"] {
  border-color: color-mix(in srgb, var(--mm-accent) 65%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 15%, var(--mm-surface));
}

.mm-iupac-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--mm-iupac-warn);
  background: color-mix(in srgb, var(--mm-iupac-warn) 8%, transparent);
  color: var(--mm-text);
}

.mm-iupac-result {
  min-height: 1.5em;
  margin: 14px 0 0;
  font-weight: 750;
}

.mm-iupac-result.is-correct {
  color: var(--mm-iupac-good);
}

.mm-iupac-result.is-wrong {
  color: var(--mm-iupac-bad);
}

.mm-iupac-feedback {
  margin-top: 14px;
}

.mm-iupac-feedback h2 {
  margin: 0 0 9px;
  font-size: 1rem;
}

.mm-iupac-stage-list,
.mm-iupac-exam-summary {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-iupac-stage-list li,
.mm-iupac-exam-summary li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 5px 12px;
  padding: 10px 12px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface) 78%, transparent);
}

.mm-iupac-stage-list li.is-correct {
  border-color: color-mix(in srgb, var(--mm-iupac-good) 48%, var(--mm-border));
}

.mm-iupac-stage-list li.is-wrong {
  border-color: color-mix(in srgb, var(--mm-iupac-bad) 48%, var(--mm-border));
}

.mm-iupac-stage-list small,
.mm-iupac-exam-summary span {
  grid-column: 1 / -1;
  color: var(--mm-faint-aa);
}

.mm-iupac-feedback details {
  margin-top: 10px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.mm-iupac-filter-dialog {
  width: min(720px, calc(100% - 24px));
}

.mm-iupac-filter-dialog fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.mm-iupac-filter-dialog legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.mm-iupac-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mm-iupac-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
}

.mm-iupac-filter-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--mm-accent) 58%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 8%, var(--mm-surface));
}

@media (max-width: 720px) {
  .mm-iupac-app {
    width: min(100% - 20px, 980px);
    padding-top: 14px;
  }

  .mm-iupac-hero {
    grid-template-columns: 1fr;
  }

  .mm-iupac-options__toolbar {
    grid-template-columns: 1fr;
  }

  .mm-iupac-options__controls,
  .mm-iupac-options__toolbar :is(.mm-iupac-mode-help, .mm-iupac-filter-summary) {
    grid-row: auto;
    grid-column: 1;
  }

  .mm-iupac-toolbar {
    justify-content: space-between;
  }

  .mm-iupac-learning-style__heading {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .mm-iupac-style-grid {
    grid-template-columns: 1fr;
  }

  .mm-iupac-style-card {
    min-height: 0;
  }

  .mm-iupac-question-card {
    padding: 14px;
  }

  .mm-iupac-structure {
    min-height: 230px;
  }

  .mm-iupac-structure-svg {
    height: 230px;
  }

  .mm-iupac-stepwise {
    padding: 12px;
  }

  .mm-iupac-step-trail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-iupac-step-options {
    grid-template-columns: 1fr;
  }

  .mm-iupac-annotation-panel {
    grid-template-columns: 1fr auto;
  }

  .mm-iupac-annotation-panel p {
    grid-column: 1 / -1;
  }

  .mm-iupac-filter-grid {
    grid-template-columns: 1fr;
  }

  .mm-iupac-stage-list li {
    grid-template-columns: 1fr;
  }
}

.mm-page {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45, 212, 191, 0.06), transparent 60%),
    var(--mm-bg);
  color: var(--mm-text);
  font-family: var(--mm-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.mm-page *,
.mm-page *::before,
.mm-page *::after {
  box-sizing: border-box;
}

/* ---- Reaction mechanism trainer ---- */
.mm-arrow-app {
  --mm-arrow-good: #34d399;
  --mm-arrow-bad: #fb7185;
  --mm-arrow-warn: #fbbf24;
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
  color: var(--mm-text);
  font-family: var(--mm-sans);
}

.mm-arrow-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.mm-arrow-hero h1 {
  margin: 6px 0 8px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.04em;
}

.mm-arrow-hero p,
.mm-arrow-section-heading p,
.mm-arrow-course-card p,
.mm-arrow-course-rule,
.mm-arrow-instruction,
.mm-arrow-keyboard p {
  color: var(--mm-muted);
}

.mm-arrow-eyebrow,
.mm-arrow-course-label,
.mm-arrow-course-card > span {
  color: var(--mm-accent);
  font: 700 0.72rem / 1.4 var(--mm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-arrow-status {
  min-height: 1.5em;
  color: var(--mm-muted);
}

.mm-arrow-practice[hidden],
.mm-arrow-course-view[hidden] {
  display: none;
}

.mm-arrow-practice-options {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-border);
}

.mm-arrow-practice-options :is(.mm-arrow-course-rule, .mm-arrow-style-picker) {
  margin-block: 0;
}

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

.mm-arrow-section-heading h2,
.mm-arrow-rules h2,
.mm-arrow-problem-heading h2 {
  margin: 0;
}

.mm-arrow-course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mm-arrow-course-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mm-surface), rgba(14, 21, 33, 0.96));
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.mm-arrow-course-card h3 {
  margin: 14px 0 8px;
  font-size: 1.12rem;
}

.mm-arrow-course-card p {
  margin: 0 0 18px;
  flex: 1;
}

.mm-arrow-course-card button,
.mm-arrow-practice-toolbar button,
.mm-arrow-controls button,
.mm-arrow-analysis > button {
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 9px 13px;
  font: 700 0.82rem / 1.2 var(--mm-sans);
  cursor: pointer;
}

.mm-arrow-course-card button:hover,
.mm-arrow-course-card button:focus-visible,
.mm-arrow-practice-toolbar button:hover,
.mm-arrow-controls button:hover,
.mm-arrow-analysis > button:hover {
  border-color: var(--mm-accent);
}

.mm-arrow-rules {
  margin-top: 28px;
}

.mm-arrow-rules > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mm-arrow-rules article {
  position: relative;
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: rgba(18, 26, 39, 0.74);
  padding: 16px;
}

.mm-arrow-rules article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 55%, transparent);
  border-radius: 999px;
  color: var(--mm-accent);
  font-family: var(--mm-mono);
}

.mm-arrow-rules h3 {
  margin: 12px 0 6px;
  font-size: 0.94rem;
}

.mm-arrow-rules p {
  margin: 0;
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-arrow-keyboard {
  margin-top: 16px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface);
  padding: 10px 13px;
}

.mm-arrow-keyboard summary {
  cursor: pointer;
  font-weight: 700;
}

.mm-arrow-practice-toolbar,
.mm-arrow-problem-heading,
.mm-arrow-panel-heading,
.mm-arrow-control-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mm-arrow-practice-toolbar {
  margin-bottom: 16px;
}

.mm-arrow-practice-toolbar span,
.mm-arrow-panel-heading span,
.mm-arrow-difficulty {
  color: var(--mm-muted);
  font-family: var(--mm-mono);
  font-size: 0.78rem;
}

.mm-arrow-problem-heading {
  align-items: flex-start;
  border-block: 1px solid var(--mm-border);
  padding: 18px 0;
}

.mm-arrow-problem-heading p {
  margin: 7px 0 0;
  color: var(--mm-muted);
}

.mm-arrow-course-rule {
  margin: 14px 0;
  border-inline-start: 3px solid var(--mm-accent);
  border-radius: 8px;
  background: rgba(45, 212, 191, 0.06);
  padding: 14px 16px;
}

.mm-arrow-course-rule strong {
  display: block;
  color: var(--mm-text);
}

.mm-arrow-course-rule ul {
  margin: 9px 0 0;
  padding-inline-start: 1.2rem;
}

.mm-arrow-style-picker,
.mm-arrow-reasoning {
  margin: 14px 0;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: rgba(18, 26, 39, 0.82);
  padding: 16px;
}

.mm-arrow-style-picker h3,
.mm-arrow-reasoning-task h4 {
  margin: 0;
  font-size: 0.94rem;
}

.mm-arrow-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mm-arrow-style-options button {
  display: grid;
  min-height: 76px;
  gap: 5px;
  border: 1px solid var(--mm-border);
  border-radius: 11px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 12px 14px;
  text-align: start;
  cursor: pointer;
}

.mm-arrow-style-options button span {
  color: var(--mm-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.mm-arrow-style-options button.is-active,
.mm-arrow-style-options button[aria-pressed="true"] {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 11%, var(--mm-surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mm-accent) 35%, transparent);
}

.mm-arrow-reasoning-trail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.mm-arrow-reasoning-trail li {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-block-start: 3px solid var(--mm-border);
  padding: 9px 6px 4px;
}

.mm-arrow-reasoning-trail li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  color: var(--mm-muted);
  font: 700 0.72rem / 1 var(--mm-mono);
}

.mm-arrow-reasoning-trail strong {
  overflow-wrap: anywhere;
  font-size: 0.76rem;
}

.mm-arrow-reasoning-trail small {
  color: var(--mm-muted);
  font-size: 0.68rem;
}

.mm-arrow-reasoning-trail li.is-current {
  border-color: var(--mm-accent);
}

.mm-arrow-reasoning-trail li.is-current > span {
  border-color: var(--mm-accent);
  color: var(--mm-accent);
}

.mm-arrow-reasoning-trail li.is-complete {
  border-color: var(--mm-arrow-good);
}

.mm-arrow-reasoning-trail li.is-complete > span {
  border-color: var(--mm-arrow-good);
  color: var(--mm-arrow-good);
}

.mm-arrow-reasoning-task {
  border-block-start: 1px solid var(--mm-border);
  padding-top: 14px;
}

.mm-arrow-reasoning-task > p {
  color: var(--mm-muted);
  line-height: 1.65;
}

.mm-arrow-reasoning-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.mm-arrow-reasoning-choices button,
.mm-arrow-reasoning-task > button {
  min-height: 44px;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 10px 12px;
  text-align: start;
  cursor: pointer;
}

.mm-arrow-reasoning-choices button[aria-pressed="true"] {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
}

.mm-arrow-reasoning-task > button {
  display: block;
  margin-inline-start: auto;
  text-align: center;
  font-weight: 700;
}

.mm-arrow-reasoning-feedback {
  min-height: 1.5em;
  margin: 10px 0;
  color: var(--mm-muted);
}

.mm-arrow-reasoning-feedback.is-correct {
  color: var(--mm-arrow-good);
}

.mm-arrow-reasoning-feedback.is-wrong {
  color: var(--mm-arrow-bad);
}

.mm-arrow-controls button:disabled,
.mm-arrow-controls select:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.mm-arrow-reasoning-explanation {
  margin-top: 14px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: rgba(45, 212, 191, 0.05);
  padding: 13px;
}

.mm-arrow-reasoning-explanation ul {
  margin: 8px 0 0;
  padding-inline-start: 1.25rem;
  color: var(--mm-muted);
}

.mm-arrow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.mm-arrow-workspace > * {
  min-width: 0;
}

.mm-arrow-canvas {
  max-width: 100%;
}

.mm-arrow-canvas-panel,
.mm-arrow-controls,
.mm-arrow-analysis,
.mm-arrow-next-panel {
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mm-surface), var(--mm-surface-3));
  padding: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.mm-arrow-panel-heading h3,
.mm-arrow-selection h3,
.mm-arrow-analysis h3,
.mm-arrow-next-panel h3 {
  margin: 0;
  font-size: 0.9rem;
}

.mm-arrow-canvas {
  min-height: 300px;
  margin-top: 10px;
  border: 1px solid rgba(150, 170, 200, 0.11);
  border-radius: 12px;
  background: #0e1521;
  overflow: hidden;
}

.mm-arrow-canvas--next {
  min-height: 250px;
}

.mm-arrow-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  min-height: 270px;
}

.mm-arrow-bond-line {
  stroke: #dce6f4;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.mm-arrow-atom-mask {
  fill: #0e1521;
  stroke: none;
  pointer-events: none;
}

.mm-arrow-atom-label {
  font: 700 18px / 1 var(--mm-sans);
  paint-order: stroke fill;
  stroke: #0e1521;
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}

.mm-arrow-charge-label {
  fill: #fbbf24;
  font: 700 15px / 1 var(--mm-mono);
}

.mm-arrow-lone-pair-dot {
  fill: #a7f3d0;
}

.mm-arrow-hotspot {
  cursor: pointer;
  outline: none;
}

.mm-arrow-hotspot-shape {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
}

.mm-arrow-hotspot:hover .mm-arrow-hotspot-shape,
.mm-arrow-hotspot:focus-visible .mm-arrow-hotspot-shape {
  fill: rgba(56, 189, 248, 0.08);
  stroke: #38bdf8;
}

.mm-arrow-hotspot.is-source .mm-arrow-hotspot-shape {
  fill: rgba(45, 212, 191, 0.12);
  stroke: #2dd4bf;
}

.mm-arrow-hotspot.is-target .mm-arrow-hotspot-shape {
  fill: rgba(251, 191, 36, 0.12);
  stroke: #fbbf24;
}

.mm-arrow-electron-path {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.35));
}

.mm-arrow-head {
  fill: #fbbf24;
}

.mm-arrow-controls {
  position: sticky;
  top: 76px;
}

.mm-arrow-select-grid {
  display: grid;
  gap: 10px;
}

.mm-arrow-select-grid label {
  display: grid;
  gap: 6px;
  color: var(--mm-muted);
  font-size: 0.78rem;
}

.mm-arrow-select-grid select {
  width: 100%;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  background: #0b0f17;
  color: var(--mm-text);
  padding: 10px;
}

.mm-arrow-controls button.mm-arrow-primary,
.mm-arrow-analysis > button.mm-arrow-primary {
  border-color: color-mix(in srgb, var(--mm-accent) 60%, var(--mm-border));
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(56, 189, 248, 0.14));
}

.mm-arrow-controls > .mm-arrow-primary {
  width: 100%;
  margin-top: 10px;
}

.mm-arrow-selection {
  margin-top: 16px;
}

.mm-arrow-selection > div {
  margin-top: 8px;
  color: var(--mm-muted);
  font-size: 0.8rem;
}

.mm-arrow-selection ol,
.mm-arrow-analysis ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.mm-arrow-selection li {
  margin-bottom: 7px;
}

.mm-arrow-selection li button {
  margin-inline-start: 8px;
  padding: 4px 7px;
  font-size: 0.68rem;
}

.mm-arrow-control-actions {
  flex-wrap: wrap;
  margin-top: 14px;
}

.mm-arrow-result {
  min-height: 2.8em;
  margin: 14px 0 0;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--mm-muted);
}

.mm-arrow-result.is-correct {
  background: rgba(52, 211, 153, 0.1);
  color: var(--mm-arrow-good);
}

.mm-arrow-result.is-wrong {
  background: rgba(251, 113, 133, 0.1);
  color: #fda4af;
}

.mm-arrow-analysis {
  margin-top: 14px;
}

.mm-arrow-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mm-arrow-analysis-grid > section {
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  padding: 13px;
}

.mm-arrow-analysis-grid li {
  margin-top: 7px;
  color: var(--mm-muted);
  font-size: 0.8rem;
}

.mm-arrow-next-panel {
  margin-top: 14px;
  box-shadow: none;
}

.mm-arrow-analysis > button {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .mm-arrow-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-arrow-rules > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-arrow-workspace {
    grid-template-columns: 1fr;
  }

  .mm-arrow-controls {
    position: static;
  }
}

@media (max-width: 620px) {
  .mm-arrow-app {
    width: min(100% - 20px, 1160px);
    padding-top: 22px;
  }

  .mm-arrow-course-grid,
  .mm-arrow-rules > div,
  .mm-arrow-analysis-grid {
    grid-template-columns: 1fr;
  }

  .mm-arrow-course-card {
    min-height: 0;
  }

  .mm-arrow-problem-heading,
  .mm-arrow-practice-toolbar,
  .mm-arrow-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mm-arrow-canvas {
    overflow-x: auto;
  }

  .mm-arrow-svg {
    width: 640px;
  }

  .mm-arrow-control-actions > button {
    flex: 1 1 44%;
  }

  .mm-arrow-style-options,
  .mm-arrow-reasoning-choices {
    grid-template-columns: 1fr;
  }

  .mm-arrow-reasoning-trail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Spectrum trainer */
.mm-spectrum-app {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 34px 0 72px;
}

.mm-spectrum-hero,
.mm-spectrum-analysis-head,
.mm-spectrum-toolbar,
.mm-spectrum-board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mm-spectrum-hero {
  margin-bottom: 22px;
}

.mm-spectrum-eyebrow {
  color: var(--mm-accent);
  font-family: var(--mm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mm-spectrum-hero h1,
.mm-spectrum-analysis h2,
.mm-spectrum-card h2 {
  margin: 6px 0 8px;
}

.mm-spectrum-hero p,
.mm-spectrum-analysis-head p,
.mm-spectrum-figure p,
.mm-spectrum-spectra p {
  color: var(--mm-muted);
}

.mm-spectrum-mode,
.mm-spectrum-modalities,
.mm-spectrum-reveals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-spectrum-mode,
.mm-spectrum-modalities {
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: rgba(11, 15, 23, 0.6);
  padding: 5px;
}

.mm-spectrum-mode button,
.mm-spectrum-modalities button,
.mm-spectrum-reveals button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--mm-muted);
  padding: 8px 12px;
}

.mm-spectrum-mode button[aria-pressed="true"],
.mm-spectrum-modalities button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mm-accent) 55%, var(--mm-border));
  background: rgba(45, 212, 191, 0.12);
  color: var(--mm-text);
}

.mm-spectrum-status {
  min-height: 1.5em;
  color: var(--mm-muted);
}

.mm-spectrum-course-player[hidden],
.mm-spectrum-course-selector[hidden] {
  display: none;
}

.mm-spectrum-course-selector {
  display: grid;
  gap: 1rem;
}

.mm-spectrum-card,
.mm-spectrum-analysis,
.mm-spectrum-spectra > section,
.mm-spectrum-board,
.mm-spectrum-candidates,
.mm-spectrum-resolution {
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 26, 39, 0.97), rgba(14, 21, 33, 0.97));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.mm-spectrum-card,
.mm-spectrum-analysis {
  padding: 20px;
}

.mm-spectrum-card > header span {
  color: var(--mm-accent);
  font-family: var(--mm-mono);
  font-size: 0.72rem;
}

.mm-spectrum-question {
  font-size: 1.08rem;
}

.mm-spectrum-figure {
  margin: 18px 0;
}

.mm-spectrum-figure figcaption,
.mm-spectrum-spectra h3 {
  color: var(--mm-muted);
  font-family: var(--mm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.mm-spectrum-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
  border-radius: 10px;
  background: #0b0f17;
}

.mm-spectrum-figure .mm-spectrum-svg {
  min-width: 0;
}

.mm-spectrum-axis,
.mm-spectrum-tick {
  fill: none;
  stroke: rgba(156, 169, 192, 0.72);
  stroke-width: 1.25;
}

.mm-spectrum-axis-label,
.mm-spectrum-peak-label,
.mm-spectrum-peak-detail {
  fill: #aebbd0;
  font-family: var(--mm-mono);
}

.mm-spectrum-axis-label {
  font-size: 12px;
}

.mm-spectrum-peak-label {
  font-size: 14px;
  font-weight: 750;
  paint-order: stroke fill;
  stroke: #0b0f17;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.mm-spectrum-peak-detail {
  font-size: 12px;
  font-weight: 650;
}

.mm-spectrum-peak-line {
  stroke: #38bdf8;
  stroke-width: 3;
  stroke-linecap: round;
}

.mm-spectrum-peak-hit {
  fill: transparent;
  stroke: transparent;
}

.mm-spectrum-peak[role="button"] {
  cursor: pointer;
  outline: none;
}

.mm-spectrum-peak[role="button"]:hover .mm-spectrum-peak-hit,
.mm-spectrum-peak[role="button"]:focus-visible .mm-spectrum-peak-hit {
  fill: rgba(45, 212, 191, 0.08);
  stroke: #2dd4bf;
  stroke-width: 2;
}

.mm-spectrum-peak.is-marked .mm-spectrum-peak-line {
  stroke: #fbbf24;
  stroke-width: 5;
}

.mm-spectrum-options,
.mm-spectrum-candidates > div {
  display: grid;
  gap: 9px;
}

.mm-spectrum-options button,
.mm-spectrum-candidates label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #121a27;
  color: var(--mm-text);
  padding: 11px 13px;
  text-align: left;
}

.mm-spectrum-options button.is-correct {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.mm-spectrum-options button.is-wrong {
  border-color: #fb7185;
  background: rgba(251, 113, 133, 0.1);
}

.mm-spectrum-feedback {
  min-height: 1.6em;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--mm-muted);
}

.mm-spectrum-feedback.is-correct {
  background: rgba(52, 211, 153, 0.1);
  color: #86efac;
}

.mm-spectrum-feedback.is-wrong {
  background: rgba(251, 113, 133, 0.1);
  color: #fda4af;
}

.mm-spectrum-explanation {
  margin: 12px 0;
  border-inline-start: 3px solid var(--mm-accent);
  padding-inline-start: 14px;
}

.mm-spectrum-analysis-head {
  margin-bottom: 16px;
}

.mm-spectrum-analysis-style,
.mm-spectrum-guided {
  margin-bottom: 16px;
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: color-mix(in srgb, #121a27 92%, var(--mm-spectrum));
  padding: 14px;
}

.mm-spectrum-analysis-style h3,
.mm-spectrum-guided h3,
.mm-spectrum-guided p {
  margin-top: 0;
}

.mm-spectrum-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mm-spectrum-style-options button {
  display: grid;
  gap: 5px;
  min-height: 64px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #0b0f17;
  color: var(--mm-text);
  padding: 11px 13px;
  text-align: left;
}

.mm-spectrum-style-options button span {
  color: var(--mm-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mm-spectrum-style-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mm-spectrum) 62%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-spectrum) 11%, #0b0f17);
}

.mm-spectrum-guided-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mm-spectrum-guided-heading > span {
  flex: 0 0 auto;
  color: var(--mm-spectrum);
  font-family: var(--mm-mono);
  font-size: 0.78rem;
}

.mm-spectrum-guided-trail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.mm-spectrum-guided-trail li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  padding: 8px;
  color: var(--mm-muted);
  background: #0b0f17;
}

.mm-spectrum-guided-trail li > span {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--mm-mono);
  font-size: 0.72rem;
}

.mm-spectrum-guided-trail li strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
}

.mm-spectrum-guided-trail li.is-current {
  border-color: color-mix(in srgb, var(--mm-spectrum) 62%, var(--mm-border));
  color: var(--mm-text);
  background: color-mix(in srgb, var(--mm-spectrum) 9%, #0b0f17);
}

.mm-spectrum-guided-trail li.is-complete {
  border-color: rgba(52, 211, 153, 0.62);
  color: #86efac;
  background: rgba(52, 211, 153, 0.07);
}

.mm-spectrum-guided-trail li.has-error {
  box-shadow: inset 3px 0 0 #fb7185;
}

.mm-spectrum-guided-trail li.is-locked {
  opacity: 0.62;
}

.mm-spectrum-guided-task {
  border-top: 1px solid var(--mm-border);
  padding-top: 14px;
}

.mm-spectrum-guided-options {
  display: grid;
  gap: 9px;
}

.mm-spectrum-guided-options button {
  min-height: 44px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: #121a27;
  color: var(--mm-text);
  padding: 11px 13px;
  text-align: left;
}

.mm-spectrum-guided-options button.is-correct {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.1);
}

.mm-spectrum-guided-options button.is-wrong {
  border-color: #fb7185;
  background: rgba(251, 113, 133, 0.1);
}

.mm-spectrum-guided-task > button {
  min-height: 44px;
  margin-top: 10px;
}

.mm-spectrum-reveals {
  margin-bottom: 14px;
}

.mm-spectrum-reveals button {
  border-color: var(--mm-border);
  background: #121a27;
}

.mm-spectrum-metadata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.mm-spectrum-metadata > div {
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  padding: 10px;
}

.mm-spectrum-metadata dt {
  color: var(--mm-muted);
  font-size: 0.72rem;
}

.mm-spectrum-metadata dd {
  margin: 4px 0 0;
}

.mm-spectrum-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.mm-spectrum-spectra {
  display: grid;
  gap: 12px;
}

.mm-spectrum-spectra > section,
.mm-spectrum-board,
.mm-spectrum-candidates,
.mm-spectrum-resolution {
  padding: 14px;
}

.mm-spectrum-spectra > section > div {
  overflow-x: auto;
}

.mm-spectrum-board {
  position: sticky;
  top: 76px;
  min-height: 250px;
}

.mm-spectrum-board [data-mm-spectrum-board] {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.mm-spectrum-evidence-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  padding: 10px;
  background: #0b0f17;
}

.mm-spectrum-evidence-card strong {
  font-family: var(--mm-mono);
  font-size: 0.75rem;
}

.mm-spectrum-evidence-card span {
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-spectrum-evidence-card.is-resolved,
.mm-spectrum-evidence-card.is-decisive {
  border-color: rgba(52, 211, 153, 0.62);
  background: rgba(52, 211, 153, 0.07);
}

.mm-spectrum-evidence-card.is-misassigned {
  border-color: rgba(251, 113, 133, 0.64);
  background: rgba(251, 113, 133, 0.07);
}

.mm-spectrum-candidates {
  margin-top: 16px;
}

.mm-spectrum-candidates label {
  cursor: pointer;
}

.mm-spectrum-candidates label > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mm-spectrum-candidates label code {
  overflow-wrap: anywhere;
  color: var(--mm-text);
  font-family: var(--mm-mono);
}

.mm-spectrum-candidates label small {
  color: var(--mm-muted);
}

.mm-spectrum-candidates > button,
.mm-spectrum-resolution > button,
.mm-spectrum-card > button {
  margin-top: 12px;
}

.mm-spectrum-resolution {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.mm-spectrum-resolution details,
.mm-spectrum-resolution > button {
  grid-column: 1 / -1;
}

.mm-spectrum-assignment-dialog select {
  width: 100%;
}

.mm-spectrum-resolution[hidden],
.mm-spectrum-guided[hidden],
.mm-spectrum-candidates[hidden],
.mm-spectrum-spectra > section[hidden],
[data-mm-spectrum-free-tools][hidden] {
  display: none;
}

@media (max-width: 900px) {
  .mm-spectrum-grid {
    grid-template-columns: 1fr;
  }

  .mm-spectrum-board {
    position: static;
  }
}

@media (max-width: 650px) {
  .mm-spectrum-app {
    width: min(100% - 20px, 1180px);
    padding-top: 22px;
  }

  .mm-spectrum-hero,
  .mm-spectrum-analysis-head,
  .mm-spectrum-toolbar,
  .mm-spectrum-board-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mm-spectrum-mode,
  .mm-spectrum-modalities {
    width: 100%;
  }

  .mm-spectrum-mode button,
  .mm-spectrum-modalities button {
    flex: 1 1 auto;
  }

  .mm-spectrum-metadata,
  .mm-spectrum-resolution,
  .mm-spectrum-style-options {
    grid-template-columns: 1fr;
  }

  .mm-spectrum-guided-heading {
    flex-direction: column;
  }

  .mm-spectrum-guided-trail {
    grid-template-columns: 1fr;
  }

  .mm-spectrum-card,
  .mm-spectrum-analysis {
    padding: 14px;
  }
}

/* Mechanism Studio */
.mm-studio-app {
  width: min(1640px, calc(100% - 28px));
  margin: 0 auto 56px;
}

.mm-studio-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 28px 0 18px;
}

.mm-studio-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.mm-studio-hero p {
  max-width: 780px;
  margin: 6px 0;
  color: var(--mm-muted);
}

.mm-studio-eyebrow {
  color: var(--mm-accent);
  font: 700 0.72rem / 1 var(--mm-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mm-studio-local-note,
.mm-studio-mobile-note,
.mm-studio-status {
  color: var(--mm-faint);
  font-size: 0.82rem;
}

.mm-studio-hero-actions,
.mm-studio-button-row,
.mm-studio-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mm-studio-app button,
.mm-studio-file-button {
  min-height: 38px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 9px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 8px 12px;
  font: 650 0.82rem / 1.25 var(--mm-sans);
  cursor: pointer;
}

.mm-studio-app button:hover,
.mm-studio-file-button:hover {
  border-color: var(--mm-accent);
}

.mm-studio-app button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mm-studio-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(520px, 1fr) minmax(230px, 300px);
  gap: 12px;
  min-height: 720px;
}

.mm-studio-sidebar,
.mm-studio-center {
  min-width: 0;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mm-surface), var(--mm-surface-3));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.mm-studio-sidebar {
  padding: 10px;
  overflow: auto;
  max-height: calc(100vh - 96px);
  position: sticky;
  top: 72px;
}

.mm-studio-sidebar details {
  border-bottom: 1px solid var(--mm-border);
  padding: 3px 0 8px;
}

.mm-studio-sidebar details:last-child {
  border-bottom: 0;
}

.mm-studio-sidebar summary {
  padding: 9px 5px;
  font-weight: 720;
  cursor: pointer;
}

.mm-studio-panel {
  display: grid;
  gap: 9px;
  padding: 3px 5px 9px;
}

.mm-studio-panel label {
  display: grid;
  gap: 5px;
  color: var(--mm-muted);
  font-size: 0.78rem;
}

.mm-studio-panel input,
.mm-studio-panel select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 7px 9px;
  font: inherit;
}

.mm-studio-checkbox {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.mm-studio-checkbox input {
  width: 18px;
  min-height: 18px;
}

.mm-studio-file-button {
  display: block;
  text-align: center;
}

.mm-studio-file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.mm-studio-center {
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
}

.mm-studio-toolbar {
  justify-content: space-between;
  min-height: 48px;
  padding: 3px 2px 9px;
  color: var(--mm-faint);
  font-size: 0.75rem;
}

.mm-studio-page-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 3px 0 8px;
}

.mm-studio-page-tabs button[aria-selected="true"] {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 13%, var(--mm-surface-2));
}

.mm-studio-canvas-shell {
  position: relative;
  flex: 1;
  min-height: 580px;
  overflow: auto;
  border: 1px solid var(--mm-border);
  border-radius: 11px;
  background: #080c13;
}

.mm-studio-canvas {
  display: block;
  min-width: 100%;
  width: 1200px;
  height: 760px;
  touch-action: none;
  background: #0b0f17;
}

.mm-studio-canvas[data-theme="report"],
.mm-studio-canvas[data-theme="publication"] {
  background: #fff;
}

.mm-studio-empty {
  position: absolute;
  inset: 45% 20px auto;
  margin: 0;
  text-align: center;
  color: var(--mm-faint);
  pointer-events: none;
}

.mm-studio-issues ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}

.mm-studio-issues li {
  padding: 8px 9px;
  border-inline-start: 3px solid var(--mm-warning);
  border-radius: 7px;
  background: rgba(251, 191, 36, 0.08);
  color: var(--mm-muted);
  font-size: 0.76rem;
}

.mm-studio-issues li[data-severity="error"] {
  border-color: var(--mm-danger);
  background: rgba(251, 113, 133, 0.08);
}

.mm-studio-issues li[data-severity="suggestion"] {
  border-color: var(--mm-accent-2);
  background: rgba(56, 189, 248, 0.08);
}

.mm-studio-project-list {
  display: grid;
  gap: 8px;
  padding: 5px;
}

.mm-studio-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
}

.mm-studio-project-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
}

.mm-studio-project-row button {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 0.68rem;
}

/* Phase 4-8 local reusable-part library */
.mm-studio-fragment-library > p {
  margin: 0;
  color: var(--mm-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.mm-studio-fragment-storage[data-state="session"] {
  color: var(--mm-warning);
}

.mm-studio-fragment-library > .mm-studio-fragment-local-first {
  font-size: 0.68rem;
  color: var(--mm-faint);
}

.mm-studio-fragment-list {
  display: grid;
  gap: 10px;
}

.mm-studio-fragment-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface-2) 82%, transparent);
}

.mm-studio-fragment-preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  max-height: 150px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mm-border) 76%, transparent);
  border-radius: 8px;
  background: #fff;
}

.mm-studio-fragment-preview svg {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: contain;
}

.mm-studio-fragment-card__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mm-studio-fragment-card__copy strong,
.mm-studio-fragment-card__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-studio-fragment-card__copy strong {
  font-size: 0.8rem;
}

.mm-studio-fragment-card__copy span {
  color: var(--mm-muted);
  font-size: 0.67rem;
  line-height: 1.4;
}

.mm-studio-fragment-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.mm-studio-fragment-card__actions button {
  min-height: 38px;
  padding: 6px;
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .mm-studio-fragment-card__actions {
    grid-template-columns: 1fr;
  }

  .mm-studio-fragment-card__actions button {
    min-height: 44px;
  }
}

.mm-studio-app[data-density="compact"] .mm-studio-sidebar {
  font-size: 0.86rem;
}

.mm-studio-app[data-density="compact"] .mm-studio-panel {
  gap: 5px;
}

.mm-studio-app[data-density="compact"] .mm-studio-panel input,
.mm-studio-app[data-density="compact"] .mm-studio-panel select,
.mm-studio-app[data-density="compact"] button {
  min-height: 32px;
  padding-block: 5px;
}

@media (max-width: 1120px) {
  .mm-studio-workspace {
    grid-template-columns: 230px minmax(480px, 1fr);
  }

  .mm-studio-sidebar--right {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .mm-studio-sidebar--right details {
    border: 1px solid var(--mm-border);
    border-radius: 9px;
    padding: 3px;
  }
}

@media (max-width: 760px) {
  .mm-studio-app {
    width: min(100% - 16px, 1640px);
  }

  .mm-studio-hero {
    align-items: start;
    flex-direction: column;
  }

  .mm-studio-workspace {
    display: flex;
    flex-direction: column;
  }

  .mm-studio-sidebar,
  .mm-studio-sidebar--right {
    position: static;
    max-height: none;
    display: block;
  }

  .mm-studio-center {
    min-height: 620px;
    order: -1;
  }

  .mm-studio-canvas-shell {
    min-height: 470px;
  }

  .mm-studio-canvas {
    width: 900px;
    height: 570px;
  }
}

.mm-studio-candidate-dialog,
.mm-studio-mode-dialog {
  max-width: min(620px, calc(100vw - 32px));
}

.mm-studio-candidate-list,
.mm-studio-mode-choices {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.mm-studio-candidate,
.mm-studio-mode-choices button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--mm-border-strong);
  border-radius: 10px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
}

.mm-studio-candidate span {
  color: var(--mm-dim);
  font-family: var(--mm-mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* Account and Pro */
.mm-account-trigger {
  appearance: none;
  background: transparent;
  color: var(--mm-muted);
  cursor: pointer;
}
.mm-account-dialog .mm-dialog__body {
  width: min(560px, calc(100vw - 32px));
}
.mm-account-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}
.mm-account-summary div {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mm-border, rgba(150, 170, 200, 0.16));
}
.mm-account-summary dt {
  color: var(--mm-muted, #9ca9c0);
}
.mm-account-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.mm-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.mm-account-billing-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--mm-warning) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-warning) 10%, transparent);
  color: var(--mm-text);
}

.mm-account-billing-note a {
  color: var(--mm-focus);
  font-weight: 700;
}

.mm-trust-document {
  display: grid;
  gap: 6px;
  min-block-size: 92px;
  padding: 16px;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  background: var(--mm-surface);
  color: var(--mm-text);
  text-decoration: none;
}

.mm-trust-document:hover,
.mm-trust-document:focus-visible {
  border-color: var(--mm-focus);
  transform: translateY(-1px);
}

.mm-trust-document span {
  color: var(--mm-focus);
  font-weight: 700;
}

.mm-trust-document small {
  color: var(--mm-muted);
}

.mm-policy {
  display: grid;
  gap: 22px;
  max-inline-size: 900px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 64px) 20px;
}

.mm-policy > header,
.mm-policy > section {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  background: var(--mm-surface);
}

.mm-policy > header > span {
  color: var(--mm-accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-policy h1,
.mm-policy h2 {
  margin-block: 8px 12px;
}

.mm-policy p {
  max-inline-size: 76ch;
  line-height: 1.8;
}

.mm-policy dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-block-start: 20px;
}

.mm-policy dl div {
  display: grid;
  gap: 4px;
}

.mm-policy dt {
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-policy dd {
  margin: 0;
  font-weight: 750;
}

.mm-policy nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mm-policy nav a {
  min-block-size: 44px;
  padding: 11px 16px;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  color: var(--mm-text);
  text-decoration: none;
}
.mm-account-actions button,
.mm-account-dialog form button {
  min-height: 42px;
}

.mm-footer-link {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--mm-faint-aa);
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mm-consent-dialog {
  width: min(680px, calc(100% - 28px));
}

.mm-consent-region,
.mm-consent-status {
  color: var(--mm-faint-aa);
  font: 0.78rem / 1.5 var(--mm-mono);
}

.mm-consent-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-block: 10px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--mm-bg);
  color: var(--mm-text);
}

.mm-consent-option input {
  margin-block-start: 3px;
  accent-color: var(--mm-accent);
}

.mm-consent-option span {
  display: grid;
  gap: 3px;
}

.mm-consent-option small {
  color: var(--mm-muted);
  line-height: 1.5;
}

.mm-consent-option[data-disabled] {
  opacity: 0.58;
}

.mm-consent-actions {
  flex-wrap: wrap;
}

.mm-consent-banner {
  position: fixed;
  z-index: 1200;
  inset-inline: 16px;
  inset-block-end: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(980px, calc(100% - 32px));
  margin-inline: auto;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface) 96%, transparent);
  color: var(--mm-text);
  padding: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.mm-consent-banner[hidden] {
  display: none;
}

.mm-consent-banner p {
  margin: 5px 0 0;
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.mm-consent-banner button,
.mm-pwa-update__action {
  min-height: 44px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 8px 11px;
  font: 600 0.78rem / 1 var(--mm-sans);
  cursor: pointer;
}

.mm-pwa-update__action {
  margin-inline-start: auto;
  border-color: var(--mm-accent);
}

.mm-offline {
  width: min(680px, calc(100% - 32px));
  margin: 12vh auto;
  border: 1px solid var(--mm-border);
  border-radius: 16px;
  background: var(--mm-surface);
  color: var(--mm-text);
  padding: clamp(24px, 6vw, 48px);
  font-family: var(--mm-sans);
}

.mm-offline p {
  color: var(--mm-muted);
  line-height: 1.7;
}

.mm-offline a {
  color: var(--mm-accent);
}

.mm-fallback {
  display: grid;
  gap: 1rem;
  text-align: left;
}

.mm-fallback__eyebrow {
  margin: 0;
  color: var(--mm-accent);
  font: 700 0.75rem / 1.2 var(--mm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-fallback h1 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.05;
}

.mm-fallback__ja {
  margin-block-start: -0.5rem;
  color: var(--mm-faint-aa);
}

.mm-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.mm-fallback__actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface-2);
  padding: 0.75rem 1rem;
  color: var(--mm-text);
  font-weight: 700;
  text-decoration: none;
}

.mm-fallback__actions a:first-child {
  border-color: color-mix(in srgb, var(--mm-accent) 70%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
}

@media (max-width: 720px) {
  .mm-consent-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .mm-consent-banner__actions {
    justify-content: stretch;
  }

  .mm-consent-banner__actions button {
    flex: 1 1 140px;
  }
}

.mm-fixture-page {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 32px;
  font-family: var(--mm-sans);
}

.mm-ad-slot {
  width: min(100% - 2rem, 72rem);
  min-height: 5rem;
  margin: 1.25rem auto;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, Canvas 96%, currentColor 4%);
  overflow: hidden;
}
.mm-ad-slot[hidden] {
  display: none;
}
.mm-ad-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  opacity: 0.66;
  text-align: center;
}
.mm-ad-slot .adsbygoogle {
  display: block;
  min-height: 3.5rem;
}

/* ========================================================================== 
   Meimay Experience Layer · Stage 16 "Nebula Lab"
   ========================================================================== */
:root {
  --mm-bg-deep: #050712;
  --mm-bg: #090d1a;
  --mm-surface: #11182a;
  --mm-surface-2: #18233a;
  --mm-surface-glass: rgba(17, 24, 42, 0.82);
  --mm-border: rgba(166, 190, 255, 0.2);
  --mm-border-strong: rgba(166, 190, 255, 0.38);
  --mm-text: #f4f7ff;
  --mm-muted: #b6c0d8;
  --mm-faint-aa: #919db8;
  --mm-accent: #5eead4;
  --mm-accent-2: #8b5cf6;
  --mm-accent-3: #f472b6;
  --mm-gold: #ffd166;
  --mm-iupac: #ffbf69;
  --mm-spectrum: #38bdf8;
  --mm-arrow: #f472b6;
  --mm-studio: #a78bfa;
  --mm-good: #5ee79d;
  --mm-focus: #7dd3fc;
  --mm-danger: #ff6685;
  --mm-warning: #ffd166;
  --mm-shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.34);
  --mm-shadow-glow: 0 0 42px rgba(94, 234, 212, 0.17);
  --mm-radius-sm: 10px;
  --mm-radius: 16px;
  --mm-radius-lg: 24px;
}

html[data-mm-mode="focus"] {
  --mm-bg: #0c1018;
  --mm-surface: #151b25;
  --mm-surface-2: #1d2633;
  --mm-accent: #75c7d7;
  --mm-accent-2: #8f9fbd;
  --mm-accent-3: #b7a5c8;
  --mm-shadow-glow: none;
}

html[data-mm-mode="publication"] {
  color-scheme: light;
  --mm-bg-deep: #eef1f5;
  --mm-bg: #f7f8fa;
  --mm-surface: #ffffff;
  --mm-surface-2: #eef1f5;
  --mm-surface-glass: rgba(255, 255, 255, 0.96);
  --mm-border: rgba(25, 35, 48, 0.18);
  --mm-border-strong: rgba(25, 35, 48, 0.38);
  --mm-text: #17202b;
  --mm-muted: #4e5a69;
  --mm-faint-aa: #617084;
  --mm-accent: #087f75;
  --mm-accent-2: #5d4aa5;
  --mm-accent-3: #9b3e70;
  --mm-gold: #8a6300;
  --mm-iupac: #9a5700;
  --mm-spectrum: #006d98;
  --mm-arrow: #9a2f65;
  --mm-studio: #5d4aa5;
  --mm-good: #147a4d;
  --mm-focus: #006d98;
  --mm-danger: #b4233d;
  --mm-warning: #8a6300;
  --mm-shadow-soft: 0 12px 34px rgba(31, 41, 55, 0.12);
  --mm-shadow-glow: none;
}

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

.mm-page {
  background:
    radial-gradient(
      circle at 78% 0%,
      color-mix(in srgb, var(--mm-accent-2) 17%, transparent),
      transparent 34rem
    ),
    radial-gradient(
      circle at 5% 22%,
      color-mix(in srgb, var(--mm-spectrum) 9%, transparent),
      transparent 28rem
    ),
    linear-gradient(180deg, var(--mm-bg-deep), var(--mm-bg) 34rem);
  background-attachment: fixed;
}

html[data-mm-mode="pulse"] .mm-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  pointer-events: none;
}

.mm-sitebar {
  position: sticky;
  inset-block-start: 0;
  border-block-end-color: var(--mm-border);
  background: color-mix(in srgb, var(--mm-bg-deep) 82%, transparent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
}

.mm-sitebar__inner {
  width: min(1320px, calc(100% - 28px));
  min-height: 64px;
}

.mm-sitebar__brand {
  font-size: 0.82rem;
  text-shadow: 0 0 18px color-mix(in srgb, var(--mm-accent) 55%, transparent);
}

.mm-sitebar__current {
  max-width: 13rem;
}

.mm-sitebar__primary {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: clamp(4px, 2vw, 24px);
}

.mm-sitebar__primary a {
  position: relative;
  border-radius: 9px;
  color: var(--mm-muted);
  padding: 9px 10px;
  font: 600 0.74rem / 1 var(--mm-sans);
  text-decoration: none;
  white-space: nowrap;
}

.mm-sitebar__primary a::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-end: 3px;
  height: 2px;
  border-radius: 99px;
  background: var(--mm-accent);
  scale: 0 1;
  transition: scale 160ms ease;
}

.mm-sitebar__primary a:hover,
.mm-sitebar__primary a:focus-visible {
  background: color-mix(in srgb, var(--mm-surface-2) 72%, transparent);
  color: var(--mm-text);
}

.mm-sitebar__primary a:hover::after,
.mm-sitebar__primary a:focus-visible::after {
  scale: 1 1;
}

.mm-mode-control select,
.mm-experience-field select,
.mm-experience-field input[type="range"] {
  width: 100%;
}

.mm-mode-control select {
  appearance: none;
  min-width: 5.8rem;
  border: 1px solid var(--mm-border);
  border-radius: 9px;
  background: var(--mm-surface-glass);
  color: var(--mm-text);
  padding: 8px 25px 8px 9px;
  font: 600 0.72rem / 1 var(--mm-sans);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mm-muted) 50%),
    linear-gradient(135deg, var(--mm-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 8px) 50%;
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
}

.mm-sound-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--mm-accent) 58%, var(--mm-border));
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
  color: var(--mm-text);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mm-accent) 16%, transparent);
}

.mm-experience-trigger {
  width: 44px;
  min-height: 44px;
  font-size: 1rem;
}

.mm-experience-dialog {
  width: min(600px, calc(100% - 28px));
}

.mm-experience-field {
  display: grid;
  gap: 7px;
  margin-block: 15px;
  color: var(--mm-muted);
  font-size: 0.82rem;
}

.mm-experience-field select {
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  padding: 10px 12px;
}

.mm-experience-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mm-experience-switches label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface-2) 84%, transparent);
  padding: 9px;
  font-size: 0.78rem;
}

.mm-experience-actions {
  flex-wrap: wrap;
}

.mm-site-footer__inner {
  width: min(1200px, calc(100% - 28px));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
}

.mm-site-footer__inner > div {
  display: grid;
  gap: 5px;
}

.mm-site-footer__inner strong {
  color: var(--mm-text);
  font-family: var(--mm-mono);
  letter-spacing: 0.15em;
}

.mm-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 14px;
}

.mm-home-loading {
  display: flex;
  min-height: 24rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: var(--mm-muted);
}

.mm-home-loading[hidden] {
  display: none;
}

.mm-home-loading span {
  width: 34px;
  aspect-ratio: 1;
  border: 3px solid var(--mm-border);
  border-block-start-color: var(--mm-accent);
  border-radius: 50%;
  animation: mm-spin 760ms linear infinite;
}

.mm-learning-home {
  overflow: clip;
  border: 0;
  background: transparent;
}

.mm-learning-home__inner {
  width: min(1220px, calc(100% - 32px));
  padding-block: clamp(32px, 7vw, 82px);
}

.mm-home-new,
.mm-home-returning,
.mm-onboarding {
  animation: mm-rise-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mm-home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
  align-items: center;
  gap: clamp(24px, 6vw, 72px);
  min-height: min(650px, calc(100vh - 150px));
}

.mm-home-hero__copy {
  position: relative;
  z-index: 2;
}

.mm-home-kicker,
.mm-onboarding__head span,
.mm-learning-eyebrow {
  display: inline-flex;
  color: var(--mm-accent);
  font: 750 0.73rem / 1 var(--mm-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mm-home-hero h1 {
  max-width: 12ch;
  margin: 15px 0 18px;
  font: 800 clamp(3rem, 8vw, 6.5rem) / 0.94 var(--mm-sans);
  letter-spacing: -0.065em;
  text-wrap: balance;
  background: linear-gradient(
    112deg,
    var(--mm-text) 10%,
    color-mix(in srgb, var(--mm-accent) 78%, white) 54%,
    color-mix(in srgb, var(--mm-accent-3) 76%, white)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-home-hero p {
  max-width: 58ch;
  color: var(--mm-muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.8;
}

.mm-home-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-block-start: 15px;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 72%, white 8%);
  border-radius: 13px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mm-accent) 82%, #0b1220),
    color-mix(in srgb, var(--mm-accent-2) 62%, #0b1220)
  );
  color: #071019;
  padding: 14px 22px;
  box-shadow: 0 12px 38px color-mix(in srgb, var(--mm-accent) 24%, transparent);
  font: 800 0.95rem / 1 var(--mm-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    translate 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.mm-home-primary::after {
  content: "→";
  font-size: 1.15rem;
}

.mm-home-primary:hover {
  translate: 0 -2px;
  filter: brightness(1.1);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--mm-accent) 34%, transparent);
}

.mm-home-reactor {
  position: relative;
  width: min(440px, 80vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid var(--mm-border);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--mm-accent) 17%, transparent) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--mm-accent-2) 10%, transparent),
      transparent 62%
    );
  box-shadow:
    inset 0 0 80px rgba(108, 92, 231, 0.1),
    var(--mm-shadow-glow);
}

.mm-home-reactor::before,
.mm-home-reactor::after,
.mm-home-reactor__ring {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 38%, transparent);
  border-radius: 50%;
}

.mm-home-reactor::before {
  inset: 25%;
  border-color: color-mix(in srgb, var(--mm-accent-3) 38%, transparent);
}

.mm-home-reactor::after {
  inset: 4%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--mm-spectrum) 28%, transparent);
}

.mm-home-reactor__ring {
  inset: 39%;
  border-width: 2px;
  box-shadow: 0 0 36px color-mix(in srgb, var(--mm-accent) 28%, transparent);
}

.mm-home-reactor__core {
  position: absolute;
  inset: 38%;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 30%,
    white,
    var(--mm-accent) 13%,
    var(--mm-accent-2) 60%,
    #120b33 100%
  );
  color: #071019;
  box-shadow: 0 0 60px color-mix(in srgb, var(--mm-accent) 55%, transparent);
  font: 900 clamp(0.65rem, 2vw, 1rem) / 0.9 var(--mm-mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.mm-home-reactor__orb {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mm-bg) 82%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, currentColor 28%, transparent);
  font: 800 1rem / 1 var(--mm-mono);
}

.mm-home-reactor__orb--iupac {
  inset: 4% auto auto 45%;
  color: var(--mm-iupac);
}
.mm-home-reactor__orb--spectrum {
  inset: auto 4% 23% auto;
  color: var(--mm-spectrum);
}
.mm-home-reactor__orb--arrow {
  inset: auto auto 16% 3%;
  color: var(--mm-arrow);
}

html[data-mm-mode="pulse"][data-mm-motion="full"] .mm-home-reactor {
  animation: mm-reactor-float 6s ease-in-out infinite;
}
html[data-mm-mode="pulse"][data-mm-motion="full"] .mm-home-reactor::after {
  animation: mm-rotate 28s linear infinite;
}
html[data-mm-mode="pulse"][data-mm-motion="full"] .mm-home-reactor__ring {
  animation: mm-pulse-ring 2.8s ease-in-out infinite;
}

.mm-home-purpose {
  margin-block-start: clamp(50px, 9vw, 100px);
}

.mm-home-purpose h2,
.mm-home-trust h2 {
  margin: 0 0 20px;
  font: 750 clamp(1.4rem, 3vw, 2.2rem) / 1.15 var(--mm-sans);
  letter-spacing: -0.035em;
}

.mm-home-purpose__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mm-home-purpose-card {
  position: relative;
  display: grid;
  min-height: 185px;
  align-content: end;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--card-accent, var(--mm-accent)) 14%, transparent),
      transparent 55%
    ),
    var(--mm-surface-glass);
  color: var(--mm-text);
  padding: clamp(20px, 4vw, 30px);
  box-shadow: var(--mm-shadow-soft);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    translate 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mm-home-purpose-card::before {
  content: "";
  position: absolute;
  width: 180px;
  aspect-ratio: 1;
  inset: -80px -50px auto auto;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--mm-accent)) 35%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 50px
    color-mix(in srgb, var(--card-accent, var(--mm-accent)) 8%, transparent);
}

.mm-home-purpose-card:hover,
.mm-home-purpose-card:focus-visible {
  translate: 0 -4px;
  border-color: color-mix(in srgb, var(--card-accent, var(--mm-accent)) 58%, var(--mm-border));
  box-shadow: 0 20px 60px
    color-mix(in srgb, var(--card-accent, var(--mm-accent)) 15%, rgba(0, 0, 0, 0.32));
}

.mm-home-purpose-card--quick {
  --card-accent: var(--mm-gold);
}
.mm-home-purpose-card--exam {
  --card-accent: var(--mm-spectrum);
}
.mm-home-purpose-card--zero {
  --card-accent: var(--mm-arrow);
}
.mm-home-purpose-card--studio {
  --card-accent: var(--mm-studio);
}

.mm-home-purpose-card > span {
  position: absolute;
  inset: 22px auto auto 24px;
  color: var(--card-accent);
  font: 800 0.7rem / 1 var(--mm-mono);
}

.mm-home-purpose-card strong {
  position: relative;
  font: 760 clamp(1.15rem, 2.2vw, 1.55rem) / 1.15 var(--mm-sans);
}

.mm-home-purpose-card small {
  position: relative;
  max-width: 47ch;
  color: var(--mm-muted);
  font: 0.88rem / 1.55 var(--mm-sans);
}

.mm-home-purpose-card > div {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-block-start: 5px;
}

.mm-home-purpose-card > div a,
.mm-home-return-actions a {
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-bg) 55%, transparent);
  color: var(--mm-text);
  padding: 7px 10px;
  font: 650 0.72rem / 1 var(--mm-sans);
  text-decoration: none;
}

.mm-home-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 68px;
}

.mm-home-trust > div {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius);
  background: color-mix(in srgb, var(--mm-surface) 76%, transparent);
  padding: clamp(20px, 4vw, 30px);
}

.mm-home-trust ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-inline-start: 1.2rem;
  color: var(--mm-muted);
}

.mm-home-trust p {
  margin: 0;
  color: var(--mm-muted);
  line-height: 1.75;
}

.mm-home-return-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 16px;
}

.mm-onboarding {
  scroll-margin-top: 90px;
  margin-block: 30px 70px;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 36%, var(--mm-border));
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(in srgb, var(--mm-accent-2) 16%, transparent),
      transparent 32rem
    ),
    var(--mm-surface-glass);
  padding: clamp(22px, 5vw, 48px);
  box-shadow: var(--mm-shadow-soft), var(--mm-shadow-glow);
}

.mm-onboarding[hidden] {
  display: none;
}

.mm-onboarding__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  border-block-end: 1px solid var(--mm-border);
  padding-block-end: 22px;
  margin-block-end: 28px;
}

.mm-onboarding__head h2 {
  margin: 8px 0 7px;
  font: 790 clamp(1.8rem, 4vw, 3rem) / 1 var(--mm-sans);
  letter-spacing: -0.045em;
}

.mm-onboarding__head p,
.mm-onboarding [data-mm-onboarding-panel] > p {
  color: var(--mm-muted);
}

.mm-onboarding__head > strong {
  flex: 0 0 auto;
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  background: var(--mm-surface-2);
  color: var(--mm-accent);
  padding: 9px 12px;
  font: 700 0.76rem / 1 var(--mm-mono);
}

.mm-onboarding [data-mm-onboarding-panel] h3 {
  margin: 0 0 8px;
  font: 750 clamp(1.2rem, 2.5vw, 1.65rem) / 1.2 var(--mm-sans);
}

.mm-onboarding-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block: 22px 8px;
}

.mm-onboarding-options--sound {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mm-onboarding-options button,
.mm-onboarding-complete button {
  min-height: 58px;
  border: 1px solid var(--mm-border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--mm-surface-2) 85%, transparent);
  color: var(--mm-text);
  padding: 13px;
  font: 700 0.88rem / 1.25 var(--mm-sans);
  cursor: pointer;
  transition:
    translate 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.mm-onboarding-options button:hover,
.mm-onboarding-options button:focus-visible {
  translate: 0 -2px;
  border-color: var(--mm-accent);
}

.mm-onboarding-options button[data-state="correct"] {
  border-color: var(--mm-good);
  background: color-mix(in srgb, var(--mm-good) 16%, var(--mm-surface-2));
  box-shadow: 0 0 28px color-mix(in srgb, var(--mm-good) 18%, transparent);
}

.mm-onboarding-options button[data-state="incorrect"] {
  border-color: var(--mm-danger);
  animation: mm-shake 260ms ease;
}

.mm-onboarding-molecule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  margin-block: 18px;
  border: 1px solid var(--mm-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--mm-bg) 55%, transparent);
  padding: 20px;
  color: var(--mm-text);
  font: 700 clamp(1rem, 3.2vw, 1.65rem) / 1.2 var(--mm-mono);
}

.mm-onboarding-molecule i {
  color: var(--mm-muted);
  font-style: normal;
}

.mm-onboarding-molecule b {
  color: var(--mm-arrow);
}

.mm-onboarding-name-preview {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-block: 24px;
  font: 800 clamp(1.5rem, 5vw, 3rem) / 1 var(--mm-mono);
}

.mm-onboarding-name-preview span:nth-child(1) {
  color: var(--mm-iupac);
}
.mm-onboarding-name-preview span:nth-child(2) {
  color: var(--mm-spectrum);
}
.mm-onboarding-name-preview span:nth-child(3) {
  color: var(--mm-arrow);
}

.mm-onboarding-inline {
  min-height: 1.5em;
  color: var(--mm-accent);
  font-weight: 700;
}

.mm-onboarding-skip {
  display: inline-flex;
  margin-block-start: 6px;
  color: var(--mm-muted);
  font-size: 0.8rem;
}

.mm-onboarding-complete > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mm-chain {
  display: inline-block;
  height: 2px;
  margin-inline-end: 8px;
  background: currentColor;
  vertical-align: middle;
}
.mm-chain--2 {
  width: 20px;
}
.mm-chain--3 {
  width: 34px;
}
.mm-chain--4 {
  width: 50px;
}

.mm-learning-summary {
  border: 1px solid var(--mm-border);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-glass);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--mm-shadow-soft);
}

.mm-feedback-layer {
  position: fixed;
  z-index: 1800;
  inset: 78px 18px auto auto;
  width: min(360px, calc(100% - 36px));
  min-height: 1px;
  pointer-events: none;
}

.mm-feedback-pop {
  display: grid;
  gap: 4px;
  transform-origin: top right;
  border: 1px solid
    color-mix(in srgb, var(--feedback-color, var(--mm-accent)) 55%, var(--mm-border));
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--feedback-color, var(--mm-accent)) 18%, transparent),
      transparent
    ),
    var(--mm-surface-glass);
  color: var(--mm-text);
  padding: 16px 18px;
  box-shadow:
    0 20px 62px rgba(0, 0, 0, 0.38),
    0 0 36px color-mix(in srgb, var(--feedback-color, var(--mm-accent)) 24%, transparent);
  opacity: 0;
  translate: 14px -8px;
  scale: 0.9;
}

.mm-feedback-pop[data-kind="correct"] {
  --feedback-color: var(--mm-good);
}
.mm-feedback-pop[data-kind="partial"] {
  --feedback-color: var(--mm-warning);
}
.mm-feedback-pop[data-kind="retry"] {
  --feedback-color: var(--mm-danger);
}
.mm-feedback-pop[data-kind="recovered"] {
  --feedback-color: var(--mm-spectrum);
}
.mm-feedback-pop[data-kind="complete"] {
  --feedback-color: var(--mm-gold);
}

.mm-feedback-layer[data-active="true"] .mm-feedback-pop {
  animation: mm-feedback-pop 1.1s cubic-bezier(0.18, 0.89, 0.3, 1.25) both;
}

.mm-feedback-pop strong {
  color: var(--feedback-color);
  font: 850 clamp(1rem, 3vw, 1.35rem) / 1 var(--mm-sans);
  letter-spacing: -0.025em;
}

.mm-feedback-pop span {
  color: var(--mm-muted);
  font: 700 0.75rem / 1.2 var(--mm-mono);
}

html[data-mm-feedback="correct"] .mm-sitebar__brand span,
html[data-mm-feedback="complete"] .mm-sitebar__brand span {
  animation: mm-logo-flare 700ms ease both;
}

html[data-mm-mode="focus"] .mm-home-reactor,
html[data-mm-mode="focus"] .mm-feedback-pop {
  box-shadow: var(--mm-shadow-soft);
}

html[data-mm-mode="focus"] .mm-home-reactor::after,
html[data-mm-mode="focus"] .mm-home-reactor__ring {
  animation: none;
}

html[data-mm-mode="publication"] .mm-home-reactor,
html[data-mm-mode="publication"] .mm-home-purpose-card::before,
html[data-mm-mode="publication"] .mm-page::before {
  display: none;
}

html[data-mm-mode="publication"] .mm-home-hero {
  grid-template-columns: 1fr;
  min-height: 36rem;
}

html[data-mm-mode="publication"] .mm-home-hero h1 {
  color: var(--mm-text);
  background: none;
}

html[data-mm-mode="publication"] .mm-home-primary {
  border-color: var(--mm-text);
  background: var(--mm-text);
  color: var(--mm-surface);
  box-shadow: none;
}

html[data-mm-motion="none"] *,
html[data-mm-motion="none"] *::before,
html[data-mm-motion="none"] *::after {
  scroll-behavior: auto;
  animation-duration: 0.001ms;
  animation-iteration-count: 1;
  transition-duration: 0.001ms;
}

html[data-mm-motion="reduced"] .mm-home-reactor,
html[data-mm-motion="reduced"] .mm-home-reactor::after,
html[data-mm-motion="reduced"] .mm-home-reactor__ring {
  animation: none;
}

@keyframes mm-spin {
  to {
    rotate: 1turn;
  }
}
@keyframes mm-rotate {
  to {
    rotate: 1turn;
  }
}
@keyframes mm-reactor-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes mm-pulse-ring {
  0%,
  100% {
    scale: 0.95;
    opacity: 0.55;
  }
  50% {
    scale: 1.08;
    opacity: 1;
  }
}
@keyframes mm-rise-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes mm-shake {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: -5px;
  }
  75% {
    translate: 5px;
  }
}
@keyframes mm-feedback-pop {
  0% {
    opacity: 0;
    translate: 14px -8px;
    scale: 0.9;
  }
  15%,
  72% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -8px;
    scale: 0.97;
  }
}
@keyframes mm-logo-flare {
  0%,
  100% {
    text-shadow: none;
  }
  35% {
    text-shadow:
      0 0 18px var(--mm-gold),
      0 0 34px var(--mm-accent);
  }
}

@media (max-width: 1040px) {
  .mm-sitebar__primary {
    display: none;
  }
  .mm-sitebar__current {
    display: none;
  }
  .mm-home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  }
}

@media (max-width: 760px) {
  .mm-sitebar__inner {
    width: min(100% - 18px, 1320px);
    min-height: 58px;
    gap: 7px;
  }
  .mm-mode-control,
  .mm-sound-toggle {
    display: none;
  }
  .mm-sitebar__action,
  .mm-sitebar__language {
    padding: 7px;
  }
  .mm-home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 38px 12px;
  }
  .mm-home-hero h1 {
    max-width: 10ch;
    font-size: clamp(3rem, 16vw, 5.4rem);
  }
  .mm-home-reactor {
    width: min(340px, 88vw);
  }
  .mm-home-purpose__grid,
  .mm-home-trust,
  .mm-site-footer__inner {
    grid-template-columns: 1fr;
  }
  .mm-home-purpose-card {
    min-height: 165px;
  }
  .mm-onboarding__head {
    flex-direction: column;
  }
  .mm-onboarding-options,
  .mm-onboarding-options--sound,
  .mm-experience-switches {
    grid-template-columns: 1fr;
  }
  .mm-site-footer__links {
    justify-content: flex-start;
  }
  .mm-feedback-layer {
    inset-block-start: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-home-reactor,
  .mm-home-reactor::after,
  .mm-home-reactor__ring,
  .mm-home-loading span {
    animation: none;
  }
  .mm-home-new,
  .mm-home-returning,
  .mm-onboarding {
    animation: none;
  }
}

/* Phase 3: shared problem-first trainer layout */
.mm-trainer-page {
  display: grid;
  min-width: 0;
}

.mm-trainer-primary,
.mm-trainer-support {
  min-width: 0;
}

.mm-trainer-primary {
  position: relative;
  z-index: 1;
}

.mm-trainer-support {
  display: grid;
  align-content: start;
}

.mm-trainer-page[data-mm-trainer-state="loading"] .mm-trainer-primary {
  min-height: min(720px, calc(100dvh - 76px));
}

.mm-trainer-page[data-mm-trainer-state="error"] .mm-trainer-primary {
  min-height: 0;
}

@media (max-width: 760px) {
  .mm-trainer-page[data-mm-trainer-state="loading"] .mm-trainer-primary {
    min-height: min(640px, calc(100dvh - 64px));
  }
}

/* Phase 3-3: Run, rewards and atmosphere are optional secondary support. */
.mm-trainer-support {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(28px, 5vw, 56px) auto 72px;
}

.mm-trainer-support-disclosure {
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--mm-app-accent, var(--mm-accent)) 22%, var(--mm-border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--mm-surface) 90%, var(--mm-bg));
  box-shadow: 0 14px 42px rgba(2, 6, 23, 0.2);
}

.mm-trainer-support-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 18px;
  align-items: center;
  min-height: 74px;
  padding: 16px 20px;
  color: var(--mm-text);
  cursor: pointer;
  list-style: none;
}

.mm-trainer-support-disclosure > summary::-webkit-details-marker {
  display: none;
}

.mm-trainer-support-disclosure > summary::after {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--mm-app-accent, var(--mm-accent));
  font-size: 1.45rem;
  line-height: 1;
  content: "+";
  transition: transform 160ms ease;
}

.mm-trainer-support-disclosure[open] > summary::after {
  transform: rotate(45deg);
}

.mm-trainer-support-disclosure > summary > span {
  color: var(--mm-app-accent, var(--mm-accent));
  font: 800 0.67rem / 1 var(--mm-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mm-trainer-support-disclosure > summary > strong {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
}

.mm-trainer-support-disclosure > summary > small {
  color: var(--mm-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.mm-trainer-support-disclosure > summary:hover,
.mm-trainer-support-disclosure > summary:focus-visible {
  background: color-mix(in srgb, var(--mm-app-accent, var(--mm-accent)) 6%, transparent);
}

.mm-trainer-support-disclosure[open] > summary {
  border-bottom: 1px solid var(--mm-border);
}

.mm-trainer-support-disclosure[data-state="active"] > summary,
.mm-trainer-support-disclosure[data-state="paused"] > summary,
.mm-trainer-support-disclosure[data-state="completed"] > summary {
  background: color-mix(in srgb, var(--mm-app-accent, var(--mm-accent)) 7%, transparent);
}

.mm-trainer-support__body {
  display: grid;
  gap: 14px;
  padding: 14px;
}

/* Keep all three trainers aligned to the same mobile problem-first rhythm. */
@media (max-width: 760px) {
  .mm-trainer-support {
    width: min(100% - 20px, 1180px);
    margin: 24px auto 40px;
  }

  .mm-trainer-support-disclosure {
    border-radius: 16px;
  }

  .mm-trainer-support-disclosure > summary {
    min-height: 68px;
    padding: 14px;
  }

  .mm-trainer-support__body {
    gap: 10px;
    padding: 10px;
  }

  body[data-mm-app="iupac"] .mm-iupac-app,
  body[data-mm-app="spectrum"] .mm-spectrum-app,
  body[data-mm-app="arrow"] .mm-arrow-app {
    width: min(100% - 20px, 1180px);
    padding-top: 16px;
    padding-bottom: 24px;
  }
}

/* Explicit shell controls prevent legacy page button styles from leaking into the header. */
.mm-sitebar .mm-sitebar__action {
  border-color: var(--mm-border);
  background: color-mix(in srgb, var(--mm-surface-2) 92%, transparent);
  color: var(--mm-text);
}

/* Stage 17: shared 5–7 problem Run HUD */
.mm-run-panel {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 8px;
  border: 1px solid color-mix(in srgb, var(--mm-gold) 38%, var(--mm-border));
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--mm-gold) 16%, transparent),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mm-surface-2) 92%, transparent),
      var(--mm-surface)
    );
  color: var(--mm-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  overflow: clip;
}

.mm-run-idle,
.mm-run-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 38px);
}

.mm-run-idle > div:first-child,
.mm-run-result {
  max-width: 760px;
}

.mm-run-idle span,
.mm-run-result > span,
.mm-run-hud > div:first-child > span {
  display: block;
  margin-bottom: 8px;
  color: var(--mm-gold);
  font: 750 0.72rem / 1 var(--mm-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mm-run-idle h2,
.mm-run-result h2 {
  margin: 0;
  font: 750 clamp(1.35rem, 3vw, 2.2rem) / 1.1 var(--mm-sans);
}

.mm-run-idle p,
.mm-run-result p {
  margin: 10px 0 0;
  color: var(--mm-muted);
  line-height: 1.65;
}

.mm-run-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.mm-run-panel button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--mm-gold) 34%, var(--mm-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-surface-2) 92%, transparent);
  color: var(--mm-text);
  padding: 10px 17px;
  font: 700 0.82rem / 1 var(--mm-sans);
  cursor: pointer;
}

.mm-run-panel button:hover,
.mm-run-panel button:focus-visible {
  border-color: var(--mm-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mm-gold) 14%, transparent);
}

.mm-run-panel .mm-run-secondary {
  border-color: var(--mm-border);
  background: transparent;
  color: var(--mm-muted);
}

.mm-run-panel[data-state="idle"] [data-mm-run-resume],
.mm-run-panel[data-state="idle"] [data-mm-run-discard] {
  display: none;
}

.mm-run-panel[data-state="paused"] [data-mm-run-start] {
  display: none;
}

.mm-run-panel[data-state="paused"] [data-mm-run-resume],
.mm-run-panel[data-state="paused"] [data-mm-run-discard] {
  display: inline-flex;
}

.mm-run-active {
  padding: 20px 22px 22px;
}

.mm-run-hud {
  display: grid;
  grid-template-columns: minmax(190px, 1.7fr) repeat(3, minmax(92px, 0.5fr)) auto auto;
  align-items: center;
  gap: 14px;
}

.mm-run-hud > div:first-child strong {
  display: block;
  font: 760 1.15rem / 1.2 var(--mm-sans);
}

.mm-run-hud > div:first-child small {
  display: block;
  margin-top: 4px;
  color: var(--mm-muted);
}

.mm-run-stat {
  border-inline-start: 1px solid var(--mm-border);
  padding-inline-start: 14px;
}

.mm-run-stat span {
  display: block;
  color: var(--mm-muted);
  font: 650 0.68rem / 1.2 var(--mm-sans);
}

.mm-run-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--mm-gold);
  font: 780 1.2rem / 1 var(--mm-mono);
}

.mm-run-active progress {
  width: 100%;
  height: 8px;
  margin: 18px 0 16px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mm-surface-2);
}

.mm-run-active progress::-webkit-progress-bar {
  background: var(--mm-surface-2);
}

.mm-run-active progress::-webkit-progress-value,
.mm-run-active progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--mm-spectrum), var(--mm-gold), var(--mm-arrow));
}

.mm-run-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-run-timeline li {
  min-width: 0;
  border: 1px solid var(--mm-border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--mm-surface-2) 88%, transparent);
  padding: 10px;
  opacity: 0.6;
}

.mm-run-timeline li[data-state="current"] {
  border-color: var(--mm-gold);
  opacity: 1;
  box-shadow: 0 0 24px color-mix(in srgb, var(--mm-gold) 18%, transparent);
  transform: translateY(-2px);
}

.mm-run-timeline li[data-state="completed"] {
  border-color: color-mix(in srgb, var(--mm-accent) 55%, var(--mm-border));
  opacity: 0.88;
}

.mm-run-timeline span,
.mm-run-timeline strong,
.mm-run-timeline small {
  display: block;
}

.mm-run-timeline span {
  color: var(--mm-faint-aa);
  font: 700 0.65rem / 1 var(--mm-mono);
}

.mm-run-timeline strong {
  overflow: hidden;
  margin-top: 8px;
  font: 700 0.78rem / 1.2 var(--mm-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-run-timeline small {
  margin-top: 5px;
  color: var(--mm-muted);
  font-size: 0.66rem;
}

.mm-run-result {
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: radial-gradient(
    circle at 80% 50%,
    color-mix(in srgb, var(--mm-accent) 14%, transparent),
    transparent 40%
  );
}

html[data-mm-mode="focus"] .mm-run-panel {
  box-shadow: none;
  background: var(--mm-surface);
}

html[data-mm-mode="publication"] .mm-run-panel {
  border-color: var(--mm-border);
  background: var(--mm-surface);
  box-shadow: none;
}

@media (max-width: 860px) {
  .mm-run-idle,
  .mm-run-result {
    align-items: flex-start;
    flex-direction: column;
  }
  .mm-run-actions {
    justify-content: flex-start;
  }
  .mm-run-hud {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mm-run-hud > div:first-child {
    grid-column: 1 / -1;
  }
  .mm-run-hud > button {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .mm-run-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .mm-run-panel {
    width: min(100% - 18px, 1180px);
    margin-top: 14px;
    border-radius: 16px;
  }
  .mm-run-active {
    padding: 16px 12px;
  }
  .mm-run-hud {
    grid-template-columns: 1fr 1fr;
  }
  .mm-run-stat:nth-of-type(4) {
    grid-column: 1 / -1;
  }
  .mm-run-timeline {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .mm-run-timeline li {
    flex: 0 0 138px;
    scroll-snap-align: start;
  }
}

.mm-run-idle[hidden],
.mm-run-active[hidden],
.mm-run-result[hidden] {
  display: none;
}

/* Stage 18: upgrades, boss gates, skill tree and reward unlocks */
.mm-run-boss-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -20px -22px 18px;
  padding: 10px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--mm-arrow) 52%, var(--mm-border));
  background:
    repeating-linear-gradient(
      115deg,
      color-mix(in srgb, var(--mm-arrow) 17%, transparent) 0 12px,
      transparent 12px 24px
    ),
    color-mix(in srgb, var(--mm-surface-2) 94%, transparent);
}

.mm-run-boss-banner span {
  color: var(--mm-arrow);
  font: 800 0.68rem / 1 var(--mm-mono);
  letter-spacing: 0.16em;
}

.mm-run-boss-banner strong {
  font-size: 0.86rem;
}

.mm-run-equipped {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mm-run-equipped span {
  border: 1px solid color-mix(in srgb, var(--mm-spectrum) 48%, var(--mm-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-spectrum) 10%, transparent);
  color: var(--mm-text);
  padding: 6px 10px;
  font: 700 0.7rem / 1 var(--mm-sans);
}

.mm-run-panel[data-stage="boss"] {
  border-color: color-mix(in srgb, var(--mm-arrow) 68%, var(--mm-border));
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.34),
    0 0 46px color-mix(in srgb, var(--mm-arrow) 18%, transparent);
}

.mm-run-panel[data-stage="boss"] .mm-run-timeline li[data-state="current"] {
  border-color: var(--mm-arrow);
  box-shadow: 0 0 30px color-mix(in srgb, var(--mm-arrow) 24%, transparent);
}

.mm-upgrade-dialog,
.mm-boss-dialog,
.mm-skill-tree-dialog {
  width: min(920px, calc(100% - 24px));
  max-width: none;
  border: 1px solid color-mix(in srgb, var(--mm-gold) 44%, var(--mm-border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--mm-surface) 97%, transparent);
  color: var(--mm-text);
  padding: 0;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.58);
}

.mm-upgrade-dialog::backdrop,
.mm-boss-dialog::backdrop,
.mm-skill-tree-dialog::backdrop {
  background: rgba(1, 4, 14, 0.78);
  backdrop-filter: blur(8px);
}

.mm-upgrade-shell,
.mm-boss-shell,
.mm-skill-tree-shell {
  padding: clamp(24px, 5vw, 46px);
}

.mm-upgrade-shell > span,
.mm-boss-shell > span,
.mm-skill-tree-shell header span {
  color: var(--mm-gold);
  font: 800 0.7rem / 1 var(--mm-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mm-upgrade-shell h2,
.mm-boss-shell h2,
.mm-skill-tree-shell h2 {
  margin: 10px 0 8px;
  font: 780 clamp(1.55rem, 4vw, 2.5rem) / 1.06 var(--mm-sans);
}

.mm-upgrade-shell > p,
.mm-boss-shell > p,
.mm-skill-tree-shell header p {
  max-width: 760px;
  margin: 0;
  color: var(--mm-muted);
  line-height: 1.65;
}

.mm-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.mm-upgrade-grid button {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 210px;
  border: 1px solid var(--mm-border);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 86% 10%,
      color-mix(in srgb, var(--mm-spectrum) 18%, transparent),
      transparent 42%
    ),
    var(--mm-surface-2);
  color: var(--mm-text);
  padding: 22px;
  text-align: start;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.mm-upgrade-grid button:nth-child(2) {
  background:
    radial-gradient(
      circle at 86% 10%,
      color-mix(in srgb, var(--mm-gold) 18%, transparent),
      transparent 42%
    ),
    var(--mm-surface-2);
}

.mm-upgrade-grid button:nth-child(3) {
  background:
    radial-gradient(
      circle at 86% 10%,
      color-mix(in srgb, var(--mm-arrow) 18%, transparent),
      transparent 42%
    ),
    var(--mm-surface-2);
}

.mm-upgrade-grid button:hover,
.mm-upgrade-grid button:focus-visible {
  border-color: var(--mm-gold);
  box-shadow: 0 0 34px color-mix(in srgb, var(--mm-gold) 18%, transparent);
  transform: translateY(-5px);
}

.mm-upgrade-grid button > span {
  color: var(--mm-faint-aa);
  font: 700 0.7rem / 1 var(--mm-mono);
}

.mm-upgrade-grid button > strong {
  margin-top: 24px;
  font: 780 1.15rem / 1.15 var(--mm-sans);
}

.mm-upgrade-grid button > small {
  align-self: end;
  margin-top: 16px;
  color: var(--mm-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.mm-boss-dialog {
  border-color: color-mix(in srgb, var(--mm-arrow) 62%, var(--mm-border));
}

.mm-boss-shell {
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 45%,
      color-mix(in srgb, var(--mm-arrow) 18%, transparent),
      transparent 38%
    ),
    repeating-linear-gradient(120deg, transparent 0 18px, rgba(255, 255, 255, 0.018) 18px 19px);
}

.mm-boss-shell > span {
  color: var(--mm-arrow);
}

.mm-boss-shell > p {
  margin-inline: auto;
}

.mm-boss-core {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 34px auto;
}

.mm-boss-core i {
  width: min(120px, 22vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mm-arrow));
}

.mm-boss-core i:last-child {
  background: linear-gradient(90deg, var(--mm-arrow), transparent);
}

.mm-boss-core strong {
  display: grid;
  place-items: center;
  width: 116px;
  aspect-ratio: 1;
  border: 1px solid var(--mm-arrow);
  border-radius: 50%;
  background: color-mix(in srgb, var(--mm-arrow) 10%, var(--mm-surface));
  box-shadow: 0 0 48px color-mix(in srgb, var(--mm-arrow) 28%, transparent);
  color: var(--mm-arrow);
  font: 850 1.1rem / 1 var(--mm-mono);
  letter-spacing: 0.16em;
}

.mm-boss-shell > button {
  min-height: 48px;
  border: 1px solid var(--mm-arrow);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-arrow) 18%, var(--mm-surface-2));
  color: var(--mm-text);
  padding: 12px 22px;
  font-weight: 760;
  cursor: pointer;
}

.mm-skill-tree-dialog {
  width: min(1040px, calc(100% - 24px));
}

.mm-skill-tree-shell header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.mm-skill-tree-shell header > button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mm-border);
  border-radius: 50%;
  background: var(--mm-surface-2);
  color: var(--mm-text);
  font-size: 1.4rem;
  cursor: pointer;
}

.mm-skill-tree-shell section {
  margin-top: 30px;
}

.mm-skill-tree-shell h3 {
  margin: 0 0 14px;
  color: var(--mm-muted);
  font: 740 0.78rem / 1 var(--mm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-skill-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mm-skill-tree article {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--mm-border);
  border-radius: 15px;
  background: var(--mm-surface-2);
  padding: 13px;
}

.mm-skill-tree article[data-state="mastered"] {
  border-color: color-mix(in srgb, var(--mm-accent) 58%, var(--mm-border));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--mm-accent) 8%, transparent);
}

.mm-skill-node-orb {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mm-spectrum) 55%, var(--mm-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--mm-spectrum) 10%, transparent);
  color: var(--mm-spectrum);
  font: 800 0.9rem / 1 var(--mm-mono);
}

.mm-skill-tree article strong,
.mm-skill-tree article small {
  display: block;
}

.mm-skill-tree article small {
  margin-top: 4px;
  color: var(--mm-muted);
}

.mm-skill-tree article progress {
  width: 100%;
  height: 6px;
  margin-top: 9px;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
}

.mm-reward-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mm-reward-shelf article,
.mm-reward-shelf button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  border: 1px solid color-mix(in srgb, var(--mm-gold) 42%, var(--mm-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-gold) 7%, var(--mm-surface-2));
  padding: 12px;
  color: var(--mm-text);
  text-align: start;
}

.mm-reward-shelf button {
  cursor: pointer;
}

.mm-reward-shelf [data-selected="true"] {
  border-color: var(--mm-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-gold) 15%, transparent);
}

.mm-reward-shelf article span,
.mm-reward-shelf button span {
  color: var(--mm-gold);
  font-size: 1.35rem;
}

html[data-mm-reward-theme="carbon"] {
  --mm-accent: #f59e0b;
  --mm-focus: #fbbf24;
  --mm-gold: #f59e0b;
}

html[data-mm-reward-theme="spectrum"] {
  --mm-accent: #22d3ee;
  --mm-focus: #67e8f9;
  --mm-spectrum: #22d3ee;
}

html[data-mm-reward-theme="electron"] {
  --mm-accent: #f472b6;
  --mm-focus: #f9a8d4;
  --mm-arrow: #f472b6;
}

.mm-skill-tree-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed var(--mm-border);
  border-radius: 14px;
  color: var(--mm-muted);
  padding: 20px;
}

.mm-run-result-rewards {
  margin-top: 18px;
}

.mm-run-result-rewards ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.mm-run-result-rewards li {
  border: 1px solid color-mix(in srgb, var(--mm-gold) 48%, var(--mm-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-gold) 8%, transparent);
  padding: 7px 11px;
  font-size: 0.76rem;
}

html[data-mm-mode="focus"] .mm-upgrade-grid button,
html[data-mm-mode="focus"] .mm-boss-shell,
html[data-mm-mode="focus"] .mm-run-boss-banner {
  background: var(--mm-surface-2);
}

html[data-mm-mode="publication"] .mm-upgrade-dialog,
html[data-mm-mode="publication"] .mm-boss-dialog,
html[data-mm-mode="publication"] .mm-skill-tree-dialog {
  box-shadow: none;
}

@media (max-width: 860px) {
  .mm-upgrade-grid,
  .mm-skill-tree,
  .mm-reward-shelf {
    grid-template-columns: 1fr;
  }
  .mm-upgrade-grid button {
    min-height: 150px;
  }
  .mm-run-hud > button {
    grid-column: auto;
    justify-self: stretch;
  }
}

@media (max-width: 520px) {
  .mm-run-boss-banner {
    margin: -16px -12px 14px;
    padding-inline: 12px;
  }
  .mm-upgrade-shell,
  .mm-boss-shell,
  .mm-skill-tree-shell {
    padding: 22px 16px;
  }
  .mm-skill-tree-shell header {
    gap: 10px;
  }
  .mm-boss-core strong {
    width: 92px;
  }
}

.mm-run-boss-banner[hidden],
.mm-run-equipped[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mm-upgrade-grid button,
  .mm-run-panel[data-stage="boss"] {
    transition: none;
  }
  .mm-upgrade-grid button:hover,
  .mm-upgrade-grid button:focus-visible {
    transform: none;
  }
}

/* Stage 19: discipline-specific game feel and adaptive scene rendering. */
.mm-discipline-layer {
  position: fixed;
  z-index: 1760;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.mm-discipline-layer[data-active="true"] {
  opacity: 1;
}

.mm-discipline-burst {
  --mm-discipline-color: var(--mm-accent);
  position: relative;
  display: grid;
  place-items: center;
  width: min(560px, 90vw);
  min-height: 280px;
  color: var(--mm-discipline-color);
  filter: saturate(calc(0.9 + var(--mm-effect-strength, 0.75) * 0.55));
}

.mm-discipline-burst[data-trainer="iupac"] {
  --mm-discipline-color: var(--mm-iupac);
}
.mm-discipline-burst[data-trainer="spectrum"] {
  --mm-discipline-color: var(--mm-spectrum);
}
.mm-discipline-burst[data-trainer="arrow"] {
  --mm-discipline-color: var(--mm-arrow);
}

.mm-discipline-burst::before,
.mm-discipline-burst::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 150px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mm-discipline-color) 78%, transparent);
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow:
    0 0 38px color-mix(in srgb, var(--mm-discipline-color) 36%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--mm-discipline-color) 18%, transparent);
  animation: mm-discipline-ring 1.15s cubic-bezier(0.2, 0.82, 0.25, 1) both;
}

.mm-discipline-burst::after {
  width: 230px;
  border-style: dashed;
  animation-delay: 70ms;
  animation-direction: reverse;
}

.mm-discipline-burst > strong {
  position: relative;
  z-index: 2;
  max-width: min(78vw, 700px);
  color: #fff;
  font: 900 clamp(1.7rem, 7vw, 4.4rem) / 0.98 var(--mm-mono);
  text-align: center;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--mm-bg) 74%, transparent);
  text-shadow:
    0 2px 4px color-mix(in srgb, var(--mm-bg) 82%, transparent),
    0 0 12px color-mix(in srgb, var(--mm-discipline-color) 84%, transparent),
    0 0 40px color-mix(in srgb, var(--mm-discipline-color) 58%, transparent);
  animation: mm-discipline-core 900ms cubic-bezier(0.17, 0.86, 0.22, 1.22) both;
}

.mm-discipline-tokens {
  position: absolute;
  z-index: 3;
  inset: auto 0 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.mm-discipline-tokens span {
  border: 1px solid color-mix(in srgb, var(--mm-discipline-color) 54%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-bg) 82%, transparent);
  color: var(--mm-text);
  padding: 6px 10px;
  font: 800 0.75rem / 1 var(--mm-mono);
  opacity: 0;
  animation: mm-discipline-token 520ms calc(160ms + var(--mm-token-index) * 55ms)
    cubic-bezier(0.16, 0.86, 0.24, 1.2) forwards;
}

.mm-discipline-particles {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1px;
  height: 1px;
}

.mm-discipline-particles i {
  position: absolute;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mm-discipline-color);
  box-shadow: 0 0 12px var(--mm-discipline-color);
  opacity: 0;
  rotate: var(--mm-particle-angle);
  animation: mm-discipline-particle 900ms calc(var(--mm-particle-index) * 18ms) ease-out both;
}

.mm-discipline-burst[data-effect="peak-lock"]::before,
.mm-discipline-burst[data-effect="evidence-chain"]::before {
  border-radius: 12px;
  width: 300px;
  height: 110px;
  transform: skewX(-10deg);
}

.mm-discipline-burst[data-effect="electron-flow"]::before,
.mm-discipline-burst[data-effect="bond-change"]::before {
  border-radius: 46% 54% 58% 42%;
  animation-name: mm-electron-orbit;
}

.mm-discipline-burst[data-effect^="boss"] {
  min-height: min(72vh, 620px);
}

html[data-mm-trainer="iupac"][data-mm-scene="run"] .mm-page::before {
  opacity: calc(0.18 + var(--mm-experience-intensity, 0) * 0.025);
  background-image:
    linear-gradient(
      90deg,
      transparent 0 47%,
      color-mix(in srgb, var(--mm-iupac) 7%, transparent) 50% 51%,
      transparent 54%
    ),
    radial-gradient(
      circle at 74% 24%,
      color-mix(in srgb, var(--mm-iupac) 10%, transparent),
      transparent 32%
    );
}

html[data-mm-trainer="spectrum"][data-mm-scene="run"] .mm-page::before {
  opacity: calc(0.2 + var(--mm-experience-intensity, 0) * 0.025);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 31px,
      color-mix(in srgb, var(--mm-spectrum) 7%, transparent) 32px 33px
    ),
    radial-gradient(
      circle at 70% 32%,
      color-mix(in srgb, var(--mm-spectrum) 11%, transparent),
      transparent 35%
    );
}

html[data-mm-trainer="arrow"][data-mm-scene="run"] .mm-page::before {
  opacity: calc(0.2 + var(--mm-experience-intensity, 0) * 0.025);
  background-image:
    radial-gradient(
      ellipse at 68% 28%,
      color-mix(in srgb, var(--mm-arrow) 11%, transparent),
      transparent 34%
    ),
    repeating-radial-gradient(
      circle at 68% 28%,
      transparent 0 38px,
      color-mix(in srgb, var(--mm-arrow) 6%, transparent) 39px 40px
    );
}

.mm-iupac-stage-list li {
  animation: mm-iupac-stage-scan 520ms calc(var(--mm-stage-index, 0) * 75ms)
    cubic-bezier(0.18, 0.82, 0.26, 1) both;
}

.mm-iupac-result.is-correct {
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 20px color-mix(in srgb, var(--mm-iupac) 38%, transparent);
}

.mm-iupac-result.is-correct::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, 0.38), transparent 68%);
  translate: -120% 0;
  animation: mm-iupac-name-shine 900ms 160ms ease-out both;
}

.mm-spectrum-peak.is-locked .mm-spectrum-peak-line {
  animation: mm-spectrum-lock 620ms cubic-bezier(0.14, 0.78, 0.2, 1.2) both;
}

.mm-spectrum-peak.is-locked .mm-spectrum-peak-hit {
  fill: color-mix(in srgb, var(--mm-spectrum) 12%, transparent);
  stroke: var(--mm-spectrum);
  stroke-width: 2;
  animation: mm-spectrum-reticle 720ms ease-out both;
}

.mm-spectrum-evidence-card.is-resolved,
.mm-spectrum-evidence-card.is-decisive {
  animation: mm-spectrum-card-chain 560ms cubic-bezier(0.16, 0.84, 0.25, 1.16) both;
}

.mm-spectrum-board:has(.mm-spectrum-evidence-card.is-resolved)::after {
  content: "EVIDENCE CHAIN";
  display: block;
  margin-top: 10px;
  color: var(--mm-spectrum);
  font: 800 0.65rem / 1 var(--mm-mono);
  letter-spacing: 0.14em;
  text-align: end;
  animation: mm-spectrum-chain-label 600ms ease both;
}

.mm-arrow-electron-path {
  stroke-dasharray: 0.07 0.035;
  stroke-dashoffset: 1;
  animation: mm-arrow-flow 850ms calc(var(--mm-arrow-index, 0) * 80ms)
    cubic-bezier(0.18, 0.78, 0.2, 1) forwards;
}

.mm-arrow-analysis:not([hidden]) .mm-arrow-svg {
  animation: mm-arrow-product-pulse 720ms ease-out both;
}

.mm-run-panel[data-trainer="iupac"][data-stage="boss"] {
  --mm-boss-color: var(--mm-iupac);
}
.mm-run-panel[data-trainer="spectrum"][data-stage="boss"] {
  --mm-boss-color: var(--mm-spectrum);
}
.mm-run-panel[data-trainer="arrow"][data-stage="boss"] {
  --mm-boss-color: var(--mm-arrow);
}

.mm-run-panel[data-stage="boss"] {
  border-color: color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 68%, var(--mm-border));
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.34),
    0 0 54px color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 24%, transparent);
  animation: mm-boss-panel-pulse 1.6s ease-in-out infinite alternate;
}

.mm-boss-dialog[data-trainer="iupac"] {
  --mm-boss-color: var(--mm-iupac);
}
.mm-boss-dialog[data-trainer="spectrum"] {
  --mm-boss-color: var(--mm-spectrum);
}
.mm-boss-dialog[data-trainer="arrow"] {
  --mm-boss-color: var(--mm-arrow);
}

.mm-boss-dialog {
  border-color: color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 68%, var(--mm-border));
}

.mm-boss-dialog::backdrop {
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 13%, transparent),
      transparent 44%
    ),
    rgba(1, 4, 14, 0.86);
}

.mm-boss-shell {
  position: relative;
  overflow: hidden;
}

.mm-boss-visual {
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 1.9;
  margin: 28px auto -12px;
}

.mm-boss-orbit,
.mm-boss-spectrum-lines,
.mm-boss-electron-trail {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}

.mm-boss-orbit {
  width: 168px;
  aspect-ratio: 1;
  border: 1px solid var(--mm-boss-color, var(--mm-arrow));
  border-radius: 50%;
  box-shadow: 0 0 32px color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 28%, transparent);
  animation: mm-boss-orbit 3.6s linear infinite;
}

.mm-boss-orbit--inner {
  width: 96px;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 2.4s;
}

.mm-boss-spectrum-lines {
  display: none;
  width: 280px;
  height: 112px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 13px,
    color-mix(in srgb, var(--mm-boss-color, var(--mm-spectrum)) 75%, transparent) 14px 16px,
    transparent 17px 24px
  );
  clip-path: polygon(
    0 100%,
    0 80%,
    10% 72%,
    18% 30%,
    23% 82%,
    34% 65%,
    42% 12%,
    47% 84%,
    58% 55%,
    67% 20%,
    73% 78%,
    86% 42%,
    91% 87%,
    100% 70%,
    100% 100%
  );
  animation: mm-boss-spectrum 900ms ease-in-out infinite alternate;
}

.mm-boss-electron-trail {
  display: none;
  width: 250px;
  height: 96px;
  border-top: 3px solid var(--mm-boss-color, var(--mm-arrow));
  border-radius: 50%;
  filter: drop-shadow(0 0 7px var(--mm-boss-color, var(--mm-arrow)));
  animation: mm-boss-electron 1.15s ease-in-out infinite;
}

.mm-boss-dialog[data-trainer="spectrum"] .mm-boss-orbit,
.mm-boss-dialog[data-trainer="spectrum"] .mm-boss-electron-trail {
  display: none;
}
.mm-boss-dialog[data-trainer="spectrum"] .mm-boss-spectrum-lines {
  display: block;
}
.mm-boss-dialog[data-trainer="arrow"] .mm-boss-spectrum-lines,
.mm-boss-dialog[data-trainer="arrow"] .mm-boss-orbit {
  display: none;
}
.mm-boss-dialog[data-trainer="arrow"] .mm-boss-electron-trail {
  display: block;
}

.mm-boss-core strong {
  border-color: var(--mm-boss-color, var(--mm-arrow));
  background: color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 10%, var(--mm-surface));
  box-shadow: 0 0 52px color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 34%, transparent);
  color: var(--mm-boss-color, var(--mm-arrow));
}

.mm-boss-core i:first-child {
  background: linear-gradient(90deg, transparent, var(--mm-boss-color, var(--mm-arrow)));
}
.mm-boss-core i:last-child {
  background: linear-gradient(90deg, var(--mm-boss-color, var(--mm-arrow)), transparent);
}

@keyframes mm-discipline-ring {
  0% {
    opacity: 0;
    scale: 0.35;
    rotate: -24deg;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.72;
    rotate: 22deg;
  }
}
@keyframes mm-electron-orbit {
  0% {
    opacity: 0;
    scale: 0.4;
    rotate: -70deg;
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.8;
    rotate: 110deg;
  }
}
@keyframes mm-discipline-core {
  0% {
    opacity: 0;
    scale: 0.45;
    filter: blur(8px);
  }
  46% {
    opacity: 1;
    scale: 1.08;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    scale: 1;
  }
}
@keyframes mm-discipline-token {
  from {
    opacity: 0;
    translate: 0 18px;
    scale: 0.75;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes mm-discipline-particle {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.2);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--mm-particle-distance)) scale(0.8);
  }
}
@keyframes mm-iupac-stage-scan {
  from {
    opacity: 0;
    translate: -18px 0;
    border-color: transparent;
  }
  60% {
    border-color: color-mix(in srgb, var(--mm-iupac) 58%, var(--mm-border));
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes mm-iupac-name-shine {
  to {
    translate: 140% 0;
  }
}
@keyframes mm-spectrum-lock {
  0% {
    stroke-width: 3;
    filter: none;
  }
  50% {
    stroke-width: 8;
    stroke: var(--mm-spectrum);
    filter: drop-shadow(0 0 10px var(--mm-spectrum));
  }
  100% {
    stroke-width: 4;
    filter: drop-shadow(0 0 4px var(--mm-spectrum));
  }
}
@keyframes mm-spectrum-reticle {
  from {
    opacity: 0;
    transform: scaleX(0.25);
    transform-origin: center;
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes mm-spectrum-card-chain {
  from {
    opacity: 0;
    translate: 22px 0;
    scale: 0.94;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes mm-spectrum-chain-label {
  from {
    opacity: 0;
    letter-spacing: 0.35em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.14em;
  }
}
@keyframes mm-arrow-flow {
  0% {
    stroke-dashoffset: 1;
    opacity: 0.2;
  }
  70% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes mm-arrow-product-pulse {
  0% {
    opacity: 0.3;
    filter: saturate(0.5) blur(2px);
  }
  55% {
    opacity: 1;
    filter: saturate(1.5) drop-shadow(0 0 12px color-mix(in srgb, var(--mm-arrow) 48%, transparent));
  }
  100% {
    filter: none;
  }
}
@keyframes mm-boss-panel-pulse {
  from {
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.3),
      0 0 28px color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 14%, transparent);
  }
  to {
    box-shadow:
      0 24px 92px rgba(0, 0, 0, 0.4),
      0 0 62px color-mix(in srgb, var(--mm-boss-color, var(--mm-arrow)) 30%, transparent);
  }
}
@keyframes mm-boss-orbit {
  to {
    rotate: 360deg;
  }
}
@keyframes mm-boss-spectrum {
  from {
    scale: 0.92 0.72;
    opacity: 0.55;
  }
  to {
    scale: 1 1;
    opacity: 1;
  }
}
@keyframes mm-boss-electron {
  0% {
    rotate: -14deg;
    scale: 0.88;
    opacity: 0.45;
  }
  50% {
    rotate: 9deg;
    scale: 1.08;
    opacity: 1;
  }
  100% {
    rotate: -14deg;
    scale: 0.88;
    opacity: 0.45;
  }
}

html[data-mm-mode="focus"] .mm-discipline-layer,
html[data-mm-mode="publication"] .mm-discipline-layer {
  display: none;
}

html[data-mm-mode="focus"] .mm-run-panel[data-stage="boss"],
html[data-mm-mode="publication"] .mm-run-panel[data-stage="boss"] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .mm-discipline-layer,
  .mm-boss-visual {
    display: none;
  }
  .mm-iupac-stage-list li,
  .mm-iupac-result.is-correct::after,
  .mm-spectrum-peak.is-locked .mm-spectrum-peak-line,
  .mm-spectrum-peak.is-locked .mm-spectrum-peak-hit,
  .mm-spectrum-evidence-card,
  .mm-arrow-electron-path,
  .mm-arrow-analysis:not([hidden]) .mm-arrow-svg,
  .mm-run-panel[data-stage="boss"] {
    animation: none;
  }
}

.mm-discipline-burst[data-effect="name-assemble"] > strong {
  max-width: min(760px, 86vw);
  padding-inline: 34px;
  font-size: clamp(1.2rem, 4.1vw, 2.9rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.mm-discipline-burst[data-effect="name-assemble"] .mm-discipline-tokens {
  inset-block-end: 6px;
}

.mm-discipline-burst[data-effect="name-assemble"] {
  width: min(960px, 96vw);
}

/* Stage 20: sustainable learning momentum */
.mm-learning-momentum {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--mm-accent, #65e7ff) 38%, transparent);
  border-radius: 1.35rem;
  background:
    radial-gradient(
      circle at 92% 10%,
      color-mix(in srgb, var(--mm-accent, #65e7ff) 18%, transparent),
      transparent 34%
    ),
    color-mix(in srgb, var(--mm-panel, #111a34) 94%, transparent);
}

.mm-learning-momentum > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.mm-learning-momentum h2,
.mm-learning-momentum h3,
.mm-learning-momentum p {
  margin: 0;
}
.mm-learning-momentum header > strong {
  max-width: 24rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-accent, #65e7ff) 13%, transparent);
  font-size: 0.78rem;
  line-height: 1.4;
}

.mm-daily-missions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.mm-daily-missions article {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--mm-text, #fff) 13%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--mm-panel-strong, #172443) 82%, transparent);
}
.mm-daily-missions article[data-complete="true"] {
  border-color: color-mix(in srgb, #75f5ae 55%, transparent);
  box-shadow: inset 0 0 1.5rem color-mix(in srgb, #75f5ae 10%, transparent);
}
.mm-daily-missions article > div {
  display: grid;
  gap: 0.2rem;
}
.mm-daily-missions small {
  opacity: 0.72;
}
.mm-daily-missions progress {
  width: 100%;
  accent-color: var(--mm-accent, #65e7ff);
}

.mm-weekly-goal-progress {
  display: grid;
  gap: 0.7rem;
}
.mm-weekly-goal-progress > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.mm-weekly-goal-progress article {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.mm-weekly-goal-progress article > div:last-child {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.mm-weekly-goal-progress small {
  opacity: 0.68;
}
.mm-goal-ring {
  --mm-goal-ratio: 0;
  display: grid;
  place-items: center;
  flex: 0 0 3.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--mm-panel, #111a34) 56%, transparent 58%),
    conic-gradient(
      var(--mm-accent, #65e7ff) calc(var(--mm-goal-ratio) * 1turn),
      color-mix(in srgb, var(--mm-text, #fff) 10%, transparent) 0
    );
  font-size: 0.7rem;
  font-weight: 800;
}

.mm-run-result-detail {
  display: grid;
  gap: 0.8rem;
  width: min(100%, 54rem);
  margin: 0.7rem auto 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--mm-accent, #65e7ff) 28%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--mm-panel-strong, #172443) 82%, transparent);
}
.mm-run-result-detail h3 {
  margin: 0;
}
.mm-run-result-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
.mm-run-result-metrics > div {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.45rem;
  text-align: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--mm-text, #fff) 5%, transparent);
}
.mm-run-result-metrics strong {
  font-size: 1.2rem;
}
.mm-run-result-metrics span {
  font-size: 0.7rem;
  opacity: 0.7;
}
.mm-run-result-next {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}
.mm-run-result-next span {
  opacity: 0.82;
}

@media (max-width: 760px) {
  .mm-learning-momentum > header {
    display: grid;
  }
  .mm-daily-missions,
  .mm-weekly-goal-progress > div {
    grid-template-columns: 1fr;
  }
  .mm-run-result-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mm-run-result-metrics > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-goal-ring {
    transition: none;
  }
}

/* Stage 21: Foundation Path */
.mm-foundation-path {
  scroll-margin-top: 84px;
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.1rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--mm-accent, #67e8f9) 38%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, #8b5cf6 18%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(8, 15, 29, 0.96), rgba(13, 24, 43, 0.92));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  color: #eaf6ff;
}
.mm-foundation-path > header,
.mm-foundation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.mm-foundation-path > header > div:first-child {
  max-width: 760px;
}
.mm-foundation-path > header span,
.mm-foundation-dialog-shell > span {
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.mm-foundation-path h2,
.mm-foundation-path h3,
.mm-foundation-path h4,
.mm-foundation-path p {
  margin: 0;
}
.mm-foundation-path h2 {
  margin-top: 0.35rem;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 1.05;
}
.mm-foundation-path > header p {
  margin-top: 0.8rem;
  color: #b8c9db;
  max-width: 68ch;
}
.mm-foundation-profile {
  min-width: 180px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(103, 232, 249, 0.26);
  border-radius: 16px;
  background: rgba(4, 10, 22, 0.72);
}
.mm-foundation-profile strong,
.mm-foundation-profile small {
  display: block;
}
.mm-foundation-profile strong {
  color: #fde68a;
}
.mm-foundation-profile small {
  margin-top: 0.2rem;
  color: #a9bed1;
}
.mm-foundation-path-select,
.mm-foundation-lessons,
.mm-foundation-glossary,
.mm-foundation-insights {
  margin-top: 1.6rem;
}
.mm-foundation-section-head button,
.mm-foundation-dialog-shell button,
.mm-foundation-path-grid button,
.mm-foundation-lesson-card {
  min-height: 44px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 14px;
  background: rgba(13, 25, 46, 0.88);
  color: inherit;
  cursor: pointer;
}
.mm-foundation-section-head > button,
.mm-foundation-dialog-shell > button,
.mm-foundation-dialog-shell [data-mm-placement-body] > button {
  padding: 0.72rem 1rem;
  font-weight: 750;
  background: linear-gradient(135deg, #06b6d4, #7c3aed);
  border-color: transparent;
}
.mm-foundation-path-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.mm-foundation-path-grid button {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  text-align: left;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.mm-foundation-path-grid button:hover,
.mm-foundation-path-grid button[data-selected="true"] {
  transform: translateY(-2px);
  border-color: #67e8f9;
  box-shadow: 0 10px 28px rgba(34, 211, 238, 0.15);
}
.mm-foundation-path-grid button[data-selected="true"]::after {
  content: "✓";
  justify-self: end;
  color: #86efac;
  font-weight: 900;
}
.mm-foundation-path-grid small,
.mm-foundation-lesson-card small {
  color: #a9bed1;
  line-height: 1.45;
}
.mm-foundation-lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.mm-foundation-lesson-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  padding: 1rem;
  text-align: left;
}
.mm-foundation-lesson-card > span {
  grid-row: 1 / span 3;
  color: #67e8f9;
  font-weight: 900;
  font-size: 1.2rem;
}
.mm-foundation-lesson-card em {
  color: #c4b5fd;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
}
.mm-foundation-lesson-card[data-complete="true"] {
  border-color: rgba(134, 239, 172, 0.55);
  background: rgba(20, 83, 45, 0.2);
}
.mm-foundation-lesson-card[data-complete="true"] em {
  color: #86efac;
}
.mm-foundation-insights {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.4fr;
  gap: 1rem;
}
.mm-foundation-insights > section {
  padding: 1rem;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 18px;
  background: rgba(4, 10, 22, 0.58);
}
.mm-foundation-radar {
  max-width: 290px;
  margin: 0.4rem auto 0;
}
.mm-foundation-radar svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.mm-foundation-radar line,
.mm-foundation-radar-grid {
  stroke: rgba(186, 230, 253, 0.28);
  fill: none;
}
.mm-foundation-radar-value {
  fill: rgba(34, 211, 238, 0.24);
  stroke: #67e8f9;
  stroke-width: 2;
}
.mm-foundation-radar text {
  fill: #b8c9db;
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.mm-foundation-achievements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.mm-foundation-achievements article {
  padding: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  opacity: 0.56;
}
.mm-foundation-achievements article[data-unlocked="true"] {
  opacity: 1;
  border-color: rgba(253, 230, 138, 0.55);
  background: rgba(120, 53, 15, 0.18);
}
.mm-foundation-achievements strong,
.mm-foundation-achievements small {
  display: block;
}
.mm-foundation-achievements small {
  margin-top: 0.25rem;
  color: #a9bed1;
}
.mm-foundation-glossary input {
  width: min(360px, 100%);
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 12px;
  background: #07111f;
  color: #fff;
}
.mm-foundation-entry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.mm-foundation-entry-grid article {
  min-height: 160px;
  padding: 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 16px;
  background: rgba(7, 17, 31, 0.74);
  cursor: pointer;
}
.mm-foundation-entry-grid article:hover {
  border-color: #67e8f9;
}
.mm-foundation-entry-grid article > span {
  color: #c4b5fd;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.mm-foundation-entry-grid h4 {
  margin-top: 0.45rem;
}
.mm-foundation-entry-grid p {
  margin-top: 0.55rem;
  color: #a9bed1;
  font-size: 0.88rem;
  line-height: 1.5;
}
.mm-foundation-dialog {
  width: min(720px, calc(100vw - 2rem));
  border: 0;
  border-radius: 24px;
  padding: 0;
  color: #ecfeff;
  background: #07111f;
}
.mm-foundation-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}
.mm-foundation-dialog-shell {
  padding: clamp(1.2rem, 4vw, 2rem);
}
.mm-foundation-dialog-shell h2 {
  margin: 0.35rem 0 0.5rem;
}
.mm-foundation-dialog-shell > p {
  color: #a9bed1;
}
.mm-foundation-dialog-shell [data-mm-placement-body],
.mm-foundation-dialog-shell [data-mm-foundation-lesson-body] {
  margin-top: 1.2rem;
}
.mm-foundation-dialog-shell [data-mm-placement-body] > span,
.mm-foundation-dialog-shell [data-mm-foundation-lesson-body] > span {
  color: #67e8f9;
  font-size: 0.8rem;
  font-weight: 800;
}
.mm-foundation-dialog-shell h3 {
  margin: 0.5rem 0 1rem;
  font-size: clamp(1.25rem, 3vw, 2rem);
}
.mm-foundation-placement-options {
  display: grid;
  gap: 0.7rem;
}
.mm-foundation-placement-options button {
  padding: 0.9rem 1rem;
  text-align: left;
}
.mm-foundation-secondary {
  margin-left: 0.6rem;
  background: transparent;
  border-color: rgba(125, 211, 252, 0.35);
}
.mm-foundation-lesson-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 150px;
  margin: 1rem 0;
  border: 1px solid rgba(103, 232, 249, 0.24);
  border-radius: 18px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 62%);
}
.mm-foundation-lesson-visual i {
  width: 34px;
  height: 34px;
  border: 2px solid #67e8f9;
  border-radius: 50%;
  animation: mm-foundation-pulse 1.8s ease-in-out infinite;
}
.mm-foundation-lesson-visual b {
  font-size: clamp(1.5rem, 5vw, 3rem);
  letter-spacing: 0.06em;
}
@keyframes mm-foundation-pulse {
  50% {
    transform: scale(1.18);
    opacity: 0.45;
  }
}
html[data-mm-mode="focus"] .mm-foundation-lesson-visual i,
html[data-mm-mode="publication"] .mm-foundation-lesson-visual i {
  animation: none;
}
html[data-mm-mode="publication"] .mm-foundation-path {
  color: #172033;
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: none;
}
html[data-mm-mode="publication"] .mm-foundation-path-grid button,
html[data-mm-mode="publication"] .mm-foundation-lesson-card,
html[data-mm-mode="publication"] .mm-foundation-insights > section,
html[data-mm-mode="publication"] .mm-foundation-entry-grid article {
  color: #172033;
  background: #fff;
  border-color: #cbd5e1;
}
html[data-mm-mode="publication"] .mm-foundation-path small,
html[data-mm-mode="publication"] .mm-foundation-path p {
  color: #475569;
}
@media (max-width: 980px) {
  .mm-foundation-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mm-foundation-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .mm-foundation-path > header,
  .mm-foundation-section-head {
    display: grid;
  }
  .mm-foundation-profile {
    min-width: 0;
  }
  .mm-foundation-path-grid,
  .mm-foundation-lesson-grid,
  .mm-foundation-insights,
  .mm-foundation-entry-grid {
    grid-template-columns: 1fr;
  }
  .mm-foundation-achievements {
    grid-template-columns: 1fr;
  }
  .mm-foundation-glossary input {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-foundation-lesson-visual i {
    animation: none;
  }
  .mm-foundation-path-grid button {
    transition: none;
  }
}

.mm-foundation-path[data-mm-foundation-minimal="true"] .mm-foundation-lessons,
.mm-foundation-path[data-mm-foundation-minimal="true"] .mm-foundation-insights,
.mm-foundation-path[data-mm-foundation-minimal="true"] .mm-foundation-glossary {
  display: none;
}

/* Stage 22: Nebula Lab visual system */
:root {
  --mm-nebula-bg: #070b14;
  --mm-nebula-panel: rgba(13, 20, 36, 0.78);
  --mm-nebula-panel-strong: rgba(12, 18, 32, 0.94);
  --mm-nebula-line: rgba(148, 163, 184, 0.2);
  --mm-nebula-text: #f8fafc;
  --mm-nebula-muted: #9fb0c7;
  --mm-nebula-cyan: #67e8f9;
  --mm-nebula-violet: #c084fc;
  --mm-nebula-gold: #fbbf24;
  --mm-nebula-magenta: #f472b6;
}
.mm-page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--mm-nebula-text);
  background:
    radial-gradient(circle at 14% 14%, rgba(14, 165, 233, 0.15), transparent 27rem),
    radial-gradient(circle at 84% 18%, rgba(168, 85, 247, 0.14), transparent 30rem),
    linear-gradient(180deg, #070b14 0%, #0a1020 46%, #070b14 100%);
}
/* biome-ignore lint/style/noDescendingSpecificity: Stage 22 intentionally overrides the legacy mode background. */
.mm-page::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.mm-global-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.mm-global-atmosphere i {
  position: absolute;
  width: 22rem;
  aspect-ratio: 1;
  border: 1px solid rgba(103, 232, 249, 0.12);
  border-radius: 50%;
  filter: blur(0.2px);
  animation: mm-nebula-drift 24s linear infinite;
}
.mm-global-atmosphere i:nth-child(1) {
  top: 9%;
  left: -8rem;
}
.mm-global-atmosphere i:nth-child(2) {
  top: 35%;
  right: -10rem;
  width: 30rem;
  animation-duration: 34s;
  animation-direction: reverse;
}
.mm-global-atmosphere i:nth-child(3) {
  bottom: -13rem;
  left: 40%;
  width: 27rem;
  animation-duration: 42s;
}
@keyframes mm-nebula-drift {
  to {
    transform: rotate(1turn);
  }
}
.mm-sitebar {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(7, 11, 20, 0.78);
  box-shadow: 0 14px 36px rgba(2, 6, 23, 0.36);
  backdrop-filter: blur(20px) saturate(135%);
}
.mm-sitebar__brand {
  letter-spacing: 0.13em;
  text-shadow: 0 0 28px rgba(103, 232, 249, 0.32);
}
.mm-sitebar__brand span {
  color: var(--mm-nebula-cyan);
}
.mm-sitebar__primary a,
.mm-sitebar__action,
.mm-sitebar__language,
.mm-mode-control select {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.7);
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.mm-sitebar__primary a:hover,
.mm-sitebar__action:hover,
.mm-sitebar__language:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, 0.52);
  background: rgba(20, 31, 54, 0.92);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.12);
}
main#main-content {
  position: relative;
}
.mm-world-banner {
  --mm-world-accent: var(--mm-nebula-cyan);
  --mm-world-accent-soft: rgba(103, 232, 249, 0.16);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(10rem, 0.65fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 1180px;
  margin: clamp(1.5rem, 4vw, 3.2rem) auto 1rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mm-world-accent) 32%, transparent);
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mm-world-accent) 10%, transparent),
      transparent 48%
    ),
    rgba(11, 18, 32, 0.8);
  box-shadow:
    0 24px 70px rgba(2, 6, 23, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}
.mm-world-banner::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    110deg,
    transparent 15%,
    color-mix(in srgb, var(--mm-world-accent) 8%, transparent) 48%,
    transparent 72%
  );
  transform: translateX(-100%);
  animation: mm-world-scan 8s ease-in-out infinite;
}
.mm-world-banner--iupac {
  --mm-world-accent: #fbbf24;
}
.mm-world-banner--spectrum {
  --mm-world-accent: #67e8f9;
}
.mm-world-banner--arrow {
  --mm-world-accent: #f472b6;
}
.mm-world-banner--studio {
  --mm-world-accent: #c084fc;
}
.mm-world-banner__copy {
  position: relative;
  z-index: 1;
}
.mm-world-banner__copy > span {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--mm-world-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.17em;
}
.mm-world-banner h2 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.mm-world-banner p {
  max-width: 44rem;
  margin: 0.9rem 0 0;
  color: var(--mm-nebula-muted);
}
.mm-world-banner__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 9rem;
}
.mm-world-banner__visual i {
  position: absolute;
  width: 7.5rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mm-world-accent) 58%, transparent);
  border-radius: 50%;
  animation: mm-world-orbit 10s linear infinite;
}
.mm-world-banner__visual i:nth-child(2) {
  width: 10.5rem;
  opacity: 0.42;
  animation-direction: reverse;
  animation-duration: 15s;
}
.mm-world-banner__visual i::after {
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mm-world-accent);
  box-shadow: 0 0 18px var(--mm-world-accent);
  content: "";
}
.mm-world-banner__visual strong {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 5vw, 4rem);
  color: #fff;
  text-shadow: 0 0 30px var(--mm-world-accent);
}
.mm-world-banner__status {
  display: grid;
  gap: 0.45rem;
}
.mm-world-banner__status span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mm-world-accent) 34%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--mm-world-accent) 84%, #fff);
  font-size: 0.65rem;
  font-weight: 800;
}
@keyframes mm-world-orbit {
  to {
    transform: rotate(1turn);
  }
}
@keyframes mm-world-scan {
  0%,
  20% {
    transform: translateX(-100%);
  }
  58%,
  100% {
    transform: translateX(100%);
  }
}

/* Stronger visual hierarchy on home and learning surfaces */
.mm-home-hero,
.mm-learning-momentum,
.mm-learning-summary,
.mm-foundation-path,
.mm-run-panel,
.mm-iupac-app,
.mm-spectrum-app,
.mm-arrow-app,
.mm-studio-app {
  box-shadow: 0 26px 80px rgba(2, 6, 23, 0.34);
}
.mm-home-hero {
  min-height: min(620px, 76vh);
  border-color: rgba(103, 232, 249, 0.24);
  background:
    radial-gradient(circle at 76% 42%, rgba(103, 232, 249, 0.18), transparent 21rem),
    radial-gradient(circle at 20% 10%, rgba(192, 132, 252, 0.14), transparent 20rem),
    linear-gradient(135deg, rgba(12, 19, 35, 0.98), rgba(8, 13, 25, 0.9));
}
.mm-home-hero__copy h1 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.mm-home-primary {
  box-shadow:
    0 12px 38px rgba(34, 211, 238, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.28);
}
.mm-home-purpose-card,
.mm-foundation-path-grid button,
.mm-foundation-lesson-card {
  position: relative;
  overflow: hidden;
}
.mm-home-purpose-card::after,
.mm-foundation-path-grid button::after,
.mm-foundation-lesson-card::after {
  position: absolute;
  inset: auto -30% -70% 30%;
  height: 8rem;
  border-radius: 50%;
  background: rgba(103, 232, 249, 0.08);
  filter: blur(18px);
  content: "";
  transition:
    transform 220ms ease,
    opacity 220ms ease;
}
.mm-home-purpose-card:hover::after,
.mm-foundation-path-grid button:hover::after,
.mm-foundation-lesson-card:hover::after {
  transform: translateY(-1.2rem);
  opacity: 1.8;
}

/* App-specific accents */
body[data-mm-app="iupac"] {
  --mm-app-accent: #fbbf24;
}
body[data-mm-app="spectrum"] {
  --mm-app-accent: #67e8f9;
}
body[data-mm-app="arrow"] {
  --mm-app-accent: #f472b6;
}
body[data-mm-app="studio"] {
  --mm-app-accent: #c084fc;
}
body[data-mm-app="iupac"] .mm-iupac-app,
body[data-mm-app="spectrum"] .mm-spectrum-app,
body[data-mm-app="arrow"] .mm-arrow-app,
body[data-mm-app="studio"] .mm-studio-app {
  border-color: color-mix(in srgb, var(--mm-app-accent) 24%, transparent);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--mm-app-accent) 5%, transparent),
      transparent 28%
    ),
    rgba(10, 16, 29, 0.9);
}
body[data-mm-app]
  :is(
    .mm-iupac-question-card,
    .mm-spectrum-card,
    .mm-arrow-canvas-panel,
    .mm-arrow-controls,
    .mm-studio-sidebar,
    .mm-studio-center
  ) {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(13, 21, 37, 0.78);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 16px 40px rgba(2, 6, 23, 0.18);
}

html[data-mm-mode="focus"] .mm-global-atmosphere,
html[data-mm-motion="none"] .mm-global-atmosphere,
html[data-mm-mode="publication"] .mm-global-atmosphere {
  display: none;
}
html[data-mm-mode="focus"] .mm-world-banner::before,
html[data-mm-motion="reduced"] .mm-world-banner::before,
html[data-mm-motion="none"] .mm-world-banner::before,
html[data-mm-mode="publication"] .mm-world-banner::before {
  animation: none;
  display: none;
}
html[data-mm-motion="reduced"] .mm-world-banner__visual i,
html[data-mm-motion="none"] .mm-world-banner__visual i,
html[data-mm-mode="focus"] .mm-world-banner__visual i,
html[data-mm-mode="publication"] .mm-world-banner__visual i {
  animation: none;
}
html[data-mm-mode="publication"] .mm-page {
  color: #172033;
  background: #f8fafc;
}
html[data-mm-mode="publication"] .mm-page::before {
  display: none;
}
html[data-mm-mode="publication"] .mm-world-banner {
  color: #172033;
  border-color: #cbd5e1;
  background: #fff;
  box-shadow: none;
}
html[data-mm-mode="publication"] .mm-world-banner p {
  color: #475569;
}
html[data-mm-mode="publication"] .mm-world-banner__visual strong {
  color: #172033;
  text-shadow: none;
}

@media (max-width: 980px) {
  .mm-world-banner {
    margin-inline: 1rem;
    grid-template-columns: 1fr minmax(8rem, 0.45fr);
  }
  .mm-world-banner__status {
    display: none;
  }
}
@media (max-width: 720px) {
  .mm-sitebar__inner {
    gap: 0.7rem;
  }
  .mm-sitebar__current {
    display: none;
  }
  .mm-sitebar__primary {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }
  .mm-sitebar__primary::-webkit-scrollbar {
    display: none;
  }
  .mm-sitebar__primary a {
    flex: 0 0 auto;
    min-height: 42px;
  }
  .mm-sitebar__actions {
    margin-left: auto;
  }
  .mm-mode-control {
    display: none;
  }
  .mm-world-banner {
    grid-template-columns: 1fr;
    border-radius: 22px;
    padding: 1.25rem;
  }
  .mm-world-banner__visual {
    min-height: 7rem;
  }
  .mm-world-banner__visual i {
    width: 5.5rem;
  }
  .mm-world-banner__visual i:nth-child(2) {
    width: 7.5rem;
  }
  .mm-world-banner h2 {
    font-size: clamp(1.75rem, 9vw, 2.65rem);
  }
  .mm-home-hero {
    min-height: auto;
  }
  .mm-home-hero__copy h1 {
    font-size: clamp(2.55rem, 13vw, 4.4rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-global-atmosphere i,
  .mm-world-banner::before,
  .mm-world-banner__visual i {
    animation: none;
  }
}

/* Stage 23 */
.mm-trust {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5rem) 0 5rem;
}
.mm-trust-hero,
.mm-trust-pricing,
.mm-trust-legal,
.mm-trust-grid section {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  border-radius: 26px;
}
.mm-trust-hero {
  max-width: 850px;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.mm-trust-hero > span {
  color: #7dd3fc;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.mm-trust-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.94;
}
.mm-trust-hero p,
.mm-trust-grid li {
  color: #cbd5e1;
}
.mm-trust-pricing,
.mm-trust-legal {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.mm-trust-pricing > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.mm-trust-pricing article,
.mm-trust-legal article {
  padding: 1.2rem;
  border-radius: 18px;
  background: rgba(30, 41, 59, 0.75);
}
.mm-trust-pricing article strong {
  display: block;
  font-size: clamp(1.65rem, 4vw, 2.6rem);
}
.mm-trust-pro {
  border: 1px solid rgba(216, 180, 254, 0.42);
}
.mm-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.mm-trust-grid section {
  padding: 1.35rem;
}
.mm-trust-legal > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
.mm-trust-legal article {
  display: grid;
  gap: 0.35rem;
}
.mm-trust-back {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: 0.9rem 1.2rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 800;
  text-decoration: none;
}
@media (max-width: 820px) {
  .mm-trust-grid {
    grid-template-columns: 1fr;
  }
  .mm-trust-legal > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mm-trust-pricing > div,
  .mm-trust-legal > div {
    grid-template-columns: 1fr;
  }
}

.mm-report-current {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.mm-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 1rem;
}
.mm-admin-actions button {
  min-height: 44px;
}

.mm-adaptive-dashboard {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--mm-accent, #7de3ff) 38%, transparent);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(20, 30, 56, 0.82), rgba(8, 14, 29, 0.76));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}
.mm-adaptive-dashboard > header span,
.mm-adaptive-recommendation > span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-accent, #7de3ff);
}
.mm-adaptive-dashboard > header h2 {
  margin: 0.25rem 0;
}
.mm-adaptive-dashboard > header p {
  margin: 0.25rem 0 1rem;
  color: var(--mm-muted, #aebbd2);
}
.mm-adaptive-dashboard > [data-mm-adaptive-dashboard] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: 1rem;
}
.mm-adaptive-recommendation,
.mm-adaptive-scores {
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mm-adaptive-recommendation h3 {
  margin: 0.35rem 0;
}
.mm-adaptive-recommendation p {
  margin: 0.35rem 0;
}
.mm-adaptive-recommendation small {
  color: var(--mm-muted, #aebbd2);
}
.mm-adaptive-scores {
  display: grid;
  gap: 0.7rem;
}
.mm-adaptive-scores article {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3rem;
  align-items: center;
  gap: 0.65rem;
}
.mm-adaptive-scores progress {
  width: 100%;
  accent-color: var(--mm-accent, #7de3ff);
}
.mm-confidence-control {
  position: sticky;
  bottom: 0.75rem;
  z-index: 35;
  margin: 0.75rem auto;
  max-width: 44rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  background: rgba(8, 14, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.mm-confidence-control span {
  font-size: 0.78rem;
  color: var(--mm-muted, #aebbd2);
  margin-right: 0.2rem;
}
.mm-confidence-control button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 0.45rem 0.7rem;
}
.mm-confidence-control button[aria-pressed="true"] {
  background: var(--mm-accent, #7de3ff);
  color: #07101d;
  border-color: transparent;
  font-weight: 700;
}
@media (max-width: 720px) {
  .mm-adaptive-dashboard > [data-mm-adaptive-dashboard] {
    grid-template-columns: 1fr;
  }
  .mm-confidence-control {
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 1rem;
  }
  .mm-confidence-control span {
    min-width: max-content;
  }
  .mm-confidence-control button {
    min-width: max-content;
  }
}
[data-mm-mode="focus"] .mm-adaptive-dashboard,
[data-mm-mode="publication"] .mm-adaptive-dashboard {
  box-shadow: none;
}

/* Phase 1: purpose-first portal and guided interface */
.mm-sitebar__action,
.mm-sitebar__language,
.mm-sitebar__primary a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
}

.mm-sitebar__action[hidden],
.mm-sitebar__language[hidden] {
  display: none;
}

.mm-tutorial-trigger {
  border-color: color-mix(in srgb, var(--mm-accent) 42%, var(--mm-border));
  color: var(--mm-text);
}

.mm-home-intro,
.mm-home-portal,
.mm-home-support,
.mm-home-foundation {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.mm-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: end;
  padding: clamp(48px, 8vw, 92px) 0 38px;
  border-bottom: 1px solid var(--mm-border);
}

.mm-home-intro > div > span,
.mm-home-portal > header > span,
.mm-home-support > div > span {
  color: var(--mm-accent);
  font: 700 0.76rem / 1.2 var(--mm-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mm-home-intro h1 {
  max-width: 13ch;
  margin: 14px 0 18px;
  color: var(--mm-text);
  font: 750 clamp(2.7rem, 7vw, 5.9rem) / 0.98 var(--mm-sans);
  letter-spacing: -0.065em;
}

.mm-home-intro p,
.mm-home-portal > header p,
.mm-home-support p {
  max-width: 64ch;
  margin: 0;
  color: var(--mm-muted);
  font: 1rem / 1.75 var(--mm-sans);
}

.mm-home-intro ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mm-border);
}

.mm-home-intro li {
  padding: 12px 2px;
  border-bottom: 1px solid var(--mm-border);
  color: var(--mm-text);
  font: 600 0.9rem / 1.4 var(--mm-sans);
}

.mm-home-portal {
  padding-block: 52px 28px;
}

.mm-home-portal > header {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(300px, 1.25fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 24px;
}

.mm-home-portal h2,
.mm-home-support h2 {
  margin: 8px 0 0;
  color: var(--mm-text);
  font: 720 clamp(1.7rem, 3.2vw, 2.7rem) / 1.05 var(--mm-sans);
  letter-spacing: -0.035em;
}

.mm-home-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--mm-border);
  border-left: 1px solid var(--mm-border);
}

.mm-home-tool-card {
  position: relative;
  min-height: 210px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  padding: clamp(24px, 4vw, 38px);
  border-right: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
  background: color-mix(in srgb, var(--mm-surface) 86%, var(--mm-bg));
  color: var(--mm-text);
  text-decoration: none;
  transition:
    background 160ms ease,
    translate 160ms ease;
}

.mm-home-tool-card:hover,
.mm-home-tool-card:focus-visible {
  background: color-mix(in srgb, var(--mm-surface-2) 88%, var(--mm-bg));
  translate: 0 -2px;
}

.mm-home-tool-card:focus-visible {
  z-index: 2;
  outline: 3px solid var(--mm-focus);
  outline-offset: -3px;
}

.mm-home-tool-card > span {
  color: var(--mm-accent);
  font: 750 clamp(1.5rem, 3vw, 2.25rem) / 1 var(--mm-mono);
}

.mm-home-tool-card strong {
  display: block;
  margin-bottom: 10px;
  font: 720 clamp(1.25rem, 2.5vw, 1.75rem) / 1.15 var(--mm-sans);
}

.mm-home-tool-card p {
  margin: 0 0 22px;
  color: var(--mm-muted);
  font: 0.95rem / 1.65 var(--mm-sans);
}

.mm-home-tool-card em {
  color: var(--mm-text);
  font: 700 0.86rem / 1.2 var(--mm-sans);
  font-style: normal;
}

.mm-home-tool-card--spectrum > span {
  color: #7dd3fc;
}
.mm-home-tool-card--arrow > span {
  color: #fbbf24;
}
.mm-home-tool-card--studio > span {
  color: #c4b5fd;
}

.mm-home-support {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-block: 26px 46px;
  padding: 26px 0;
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
}

.mm-home-support__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mm-home-support button,
.mm-home-support a,
.mm-studio-hero-actions button,
.mm-studio-panel button,
.mm-studio-toolbar button {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: 700;
}

.mm-home-support button,
.mm-home-support a {
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  color: var(--mm-text);
  text-decoration: none;
}

.mm-home-foundation {
  margin-block: 20px 52px;
  border-top: 1px solid var(--mm-border);
  border-bottom: 1px solid var(--mm-border);
}

.mm-home-foundation > summary {
  cursor: pointer;
  padding: 20px 2px;
  color: var(--mm-text);
  font: 700 1rem / 1.3 var(--mm-sans);
}

.mm-home-foundation > .mm-foundation-path {
  width: 100%;
  margin: 0 0 28px;
}

.mm-tutorial-dialog {
  position: fixed;
  inset: auto 22px 22px auto;
  z-index: 1000;
  width: min(430px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 28px));
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 52%, var(--mm-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--mm-bg) 96%, black);
  color: var(--mm-text);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.52);
}

.mm-tutorial-shell {
  padding: 22px;
}

.mm-tutorial-progress,
.mm-tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mm-tutorial-progress span {
  color: var(--mm-muted);
  font: 700 0.78rem / 1 var(--mm-mono);
}

.mm-tutorial-progress button,
.mm-tutorial-actions button {
  min-height: 42px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-surface);
  color: var(--mm-text);
  padding: 9px 14px;
  font-weight: 700;
}

.mm-tutorial-copy {
  padding-block: 26px;
}

.mm-tutorial-copy > span {
  color: var(--mm-accent);
  font: 700 0.74rem / 1.2 var(--mm-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-tutorial-copy h2 {
  margin: 10px 0 12px;
  font-size: 1.65rem;
  line-height: 1.15;
}

.mm-tutorial-copy p {
  margin: 0;
  color: var(--mm-muted);
  line-height: 1.7;
}

.mm-tutorial-actions {
  justify-content: flex-end;
}

.mm-tutorial-actions button:last-child {
  border-color: transparent;
  background: var(--mm-accent);
  color: #07101d;
}

[data-mm-tutorial-target-active].mm-tutorial-target {
  position: relative;
  z-index: 92;
  outline: 3px solid var(--mm-focus);
  outline-offset: 6px;
}

html[data-mm-tutorial-active] .mm-global-atmosphere {
  opacity: 0.25;
}

.mm-studio-mode-choices button {
  min-height: 88px;
  display: grid;
  gap: 5px;
  align-content: center;
  text-align: left;
}

.mm-studio-mode-choices button strong {
  font-size: 1rem;
}

.mm-studio-mode-choices button span {
  color: var(--mm-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.mm-studio-app[data-mm-studio-tool-view="guided"] [data-mm-studio-show-all],
.mm-studio-app[data-mm-studio-tool-view="all"] [data-mm-studio-guided] {
  border-color: var(--mm-accent);
}

.mm-world-banner {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 760px) {
  .mm-home-intro,
  .mm-home-portal > header,
  .mm-home-support {
    grid-template-columns: 1fr;
  }
  .mm-home-intro {
    padding-top: 36px;
  }
  .mm-home-tool-grid {
    grid-template-columns: 1fr;
  }
  .mm-home-tool-card {
    min-height: 0;
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .mm-home-support__actions {
    display: grid;
  }
  .mm-tutorial-dialog {
    inset: auto 8px 8px;
    width: calc(100vw - 16px);
  }
  .mm-sitebar__action,
  .mm-sitebar__language,
  .mm-sitebar__primary a {
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  .mm-sitebar__inner {
    min-width: 0;
  }

  .mm-sitebar__actions {
    min-width: 0;
    max-width: calc(100% - 4.5rem);
    overflow-x: auto;
    justify-content: flex-start;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }

  .mm-sitebar__actions::-webkit-scrollbar {
    display: none;
  }

  .mm-sitebar__actions .mm-mode-control,
  .mm-sitebar__actions .mm-sound-toggle {
    display: none;
  }

  .mm-sitebar__actions .mm-sitebar__action,
  .mm-sitebar__actions .mm-sitebar__language {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .mm-sitebar__actions .mm-account-trigger {
    order: 1;
  }

  .mm-sitebar__actions .mm-report-trigger {
    order: 2;
  }

  .mm-sitebar__actions .mm-sitebar__language {
    order: 3;
  }

  .mm-sitebar__actions .mm-tutorial-trigger {
    order: 4;
  }

  .mm-sitebar__actions .mm-experience-trigger {
    order: 5;
  }

  .mm-sitebar__actions .mm-content-info-trigger {
    order: 6;
  }

  .mm-confidence-control {
    box-sizing: border-box;
    width: calc(100% - 1rem);
    max-width: none;
    margin-inline: 0.5rem;
  }
}

.mm-confidence-control[hidden] {
  display: none;
}

/* Spectrum method courses */
.mm-spectrum-course {
  display: grid;
  gap: 1.25rem;
}
.mm-spectrum-course-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
  gap: 1rem;
  align-items: end;
  padding-block: 0.5rem 1rem;
  border-bottom: 1px solid var(--mm-border);
}
.mm-spectrum-course-intro h2 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}
.mm-spectrum-course-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.mm-spectrum-course-card {
  padding: 1.15rem;
  border-top: 3px solid var(--mm-accent);
  background: var(--mm-surface);
  box-shadow: 0 10px 30px rgb(10 24 36 / 0.08);
}
.mm-spectrum-course-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}
.mm-spectrum-course-card p {
  margin: 0.35rem 0;
}
.mm-spectrum-course-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  list-style: none;
}
.mm-spectrum-course-card li {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--mm-border);
  font-size: 0.82rem;
}
.mm-spectrum-course-card button {
  min-height: 44px;
  margin-top: 0.5rem;
}
.mm-spectrum-course-count {
  font-weight: 700;
}
.mm-spectrum-course-player {
  display: grid;
  gap: 1rem;
}
.mm-spectrum-course-toolbar,
.mm-spectrum-course-heading,
.mm-spectrum-course-spectrum-head,
.mm-spectrum-course-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.mm-spectrum-course-heading {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--mm-border);
}
.mm-spectrum-course-heading h2 {
  margin: 0.2rem 0;
}
.mm-spectrum-course-heading label {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 20rem);
}
.mm-spectrum-course-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}
.mm-spectrum-course-layout > main,
.mm-spectrum-course-sidebar {
  display: grid;
  gap: 1rem;
}
.mm-spectrum-course-spectrum,
.mm-spectrum-course-question,
.mm-spectrum-course-explanation,
.mm-spectrum-course-sidebar section {
  padding: 1rem;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
}
.mm-spectrum-course-question [data-mm-spectrum-course-options] {
  display: grid;
  gap: 0.5rem;
  margin-block: 0.8rem;
}
.mm-spectrum-course-question label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: center;
  min-height: 48px;
  padding: 0.7rem;
  border: 1px solid var(--mm-border);
  cursor: pointer;
}
.mm-spectrum-course-question label:has(input:checked) {
  outline: 2px solid var(--mm-accent);
  outline-offset: 1px;
}
.mm-spectrum-course-dimension {
  width: fit-content;
  padding: 0.25rem 0.55rem;
  background: var(--mm-accent-soft);
  font-weight: 800;
}
.mm-spectrum-course-hint {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-left: 4px solid var(--mm-warning);
  background: var(--mm-warning-soft);
}
.mm-spectrum-course-explanation ol {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.4rem;
}
.mm-spectrum-course-explanation li span {
  display: block;
  margin-top: 0.2rem;
}
.mm-spectrum-prerequisite {
  padding: 0.75rem;
  border-left: 4px solid var(--mm-warning);
  background: var(--mm-warning-soft);
}
.mm-spectrum-dimension-score {
  display: grid;
  grid-template-columns: 1fr 6rem;
  gap: 0.5rem;
  align-items: center;
  margin-block: 0.4rem;
}
.mm-spectrum-dimension-score progress {
  width: 100%;
}
.mm-spectrum-viewer {
  display: grid;
  gap: 0.45rem;
}
.mm-spectrum-viewer-toolbar {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.mm-spectrum-viewer-toolbar button {
  min-width: 44px;
  min-height: 40px;
}
.mm-spectrum-viewer-viewport {
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  border: 1px solid var(--mm-border);
  background: var(--mm-canvas, #fff);
}
.mm-spectrum-viewer-viewport:active {
  cursor: grabbing;
}
.mm-spectrum-viewer .mm-spectrum-svg {
  width: 100%;
  min-width: 42rem;
  display: block;
}
.mm-spectrum-guide {
  stroke: currentColor;
  opacity: 0.08;
}
.mm-spectrum-svg.hide-guides .mm-spectrum-guide {
  display: none;
}
.mm-spectrum-svg.hide-labels .mm-spectrum-peak-label {
  display: none;
}
.mm-spectrum-peak.is-selected .mm-spectrum-peak-line {
  stroke-width: 5;
}
.mm-spectrum-dept-legend {
  font-size: 0.82rem;
  line-height: 1.5;
}
.mm-spectrum-course-conditions {
  margin: 0.5rem 0 0;
}
.mm-spectrum-course-conditions div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
}
.mm-spectrum-course-feedback.is-correct,
[data-mm-spectrum-course-feedback].is-correct {
  color: var(--mm-success);
  font-weight: 700;
}
.mm-spectrum-course-feedback.is-wrong,
[data-mm-spectrum-course-feedback].is-wrong {
  color: var(--mm-danger);
  font-weight: 700;
}
@media (max-width: 760px) {
  .mm-spectrum-course-intro,
  .mm-spectrum-course-layout {
    grid-template-columns: 1fr;
  }
  .mm-spectrum-course-catalog {
    grid-template-columns: 1fr;
  }
  .mm-spectrum-viewer-viewport {
    overflow-x: auto;
  }
  .mm-spectrum-viewer .mm-spectrum-svg {
    min-width: 44rem;
  }
}
.mm-spectrum-integral-curve {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  opacity: 0.55;
}
.mm-spectrum-svg.hide-integrals .mm-spectrum-integral-curve {
  display: none;
}
.mm-spectrum-viewer-viewport.is-range-mode {
  cursor: crosshair;
  outline: 2px dashed var(--mm-accent);
  outline-offset: -3px;
}
.mm-spectrum-viewer-live {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.85rem;
}
.mm-spectrum-course-card--combined {
  border-top-color: var(--mm-success);
}

/* Mechanism Studio purpose-first workflow */
.mm-studio-purpose-panel,
.mm-studio-workflow-panel,
.mm-studio-practice-panel {
  width: min(1640px, 100%);
  margin: 0 auto 14px;
  border-block: 1px solid var(--mm-border);
  background: color-mix(in srgb, var(--mm-surface) 74%, transparent);
}

.mm-studio-purpose-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 1.4fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 2px;
}

.mm-studio-purpose-panel h2,
.mm-studio-workflow-panel h2,
.mm-studio-practice-panel h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.mm-studio-purpose-panel p,
.mm-studio-workflow-panel p,
.mm-studio-practice-panel p {
  margin: 0;
  color: var(--mm-muted);
  line-height: 1.55;
}

.mm-studio-section-kicker {
  color: var(--mm-accent);
  font: 700 0.7rem / 1 var(--mm-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mm-studio-purpose-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--mm-border-strong);
  border-radius: 10px;
  overflow: hidden;
}

.mm-studio-purpose-buttons button {
  min-height: 48px;
  border: 0;
  border-inline-end: 1px solid var(--mm-border);
  border-radius: 0;
  padding: 8px 10px;
  background: var(--mm-bg);
}

.mm-studio-purpose-buttons button:last-child {
  border-inline-end: 0;
}

.mm-studio-purpose-buttons button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mm-accent) 18%, var(--mm-surface-2));
  color: var(--mm-text);
  box-shadow: inset 0 -3px var(--mm-accent);
}

.mm-studio-practice-start {
  min-width: 180px;
  border-color: var(--mm-accent);
}

.mm-studio-workflow-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(440px, 1.7fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 2px;
}

.mm-studio-workflow-list {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.mm-studio-workflow-list li {
  display: grid;
  grid-template-columns: 28px minmax(90px, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 135px;
  padding: 9px 10px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  color: var(--mm-muted);
  font-size: 0.78rem;
}

.mm-studio-workflow-list li > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 50%;
  color: var(--mm-faint);
  font-family: var(--mm-mono);
}

.mm-studio-workflow-list li[data-state="current"] {
  border-color: var(--mm-accent);
  color: var(--mm-text);
  background: color-mix(in srgb, var(--mm-accent) 8%, transparent);
}

.mm-studio-workflow-list li[data-state="current"] > span:first-child {
  border-color: var(--mm-accent);
  color: var(--mm-accent);
}

.mm-studio-workflow-list li[data-state="complete"] {
  color: var(--mm-text);
}

.mm-studio-workflow-list li[data-state="complete"] > span:first-child {
  border-color: var(--mm-success);
  background: color-mix(in srgb, var(--mm-success) 18%, transparent);
  color: var(--mm-success);
}

.mm-studio-next-action {
  display: grid;
  gap: 8px;
  min-width: 190px;
  color: var(--mm-muted);
  font-size: 0.78rem;
}

.mm-studio-next-action strong {
  display: block;
  margin-top: 3px;
  color: var(--mm-text);
}

.mm-studio-practice-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.2fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 55%, var(--mm-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-accent) 7%, var(--mm-surface));
}

.mm-studio-practice-panel[hidden] {
  display: none;
}

.mm-studio-practice-panel [data-mm-studio-practice-progress] {
  color: var(--mm-accent);
  font: 700 0.75rem / 1 var(--mm-mono);
}

.mm-studio-app button,
.mm-studio-file-button {
  min-height: 44px;
}

@media (max-width: 1120px) {
  .mm-studio-purpose-panel,
  .mm-studio-workflow-panel,
  .mm-studio-practice-panel {
    grid-template-columns: 1fr;
  }

  .mm-studio-purpose-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mm-studio-purpose-buttons button {
    border-bottom: 1px solid var(--mm-border);
  }
}

@media (max-width: 760px) {
  .mm-studio-purpose-panel,
  .mm-studio-workflow-panel,
  .mm-studio-practice-panel {
    width: 100%;
    padding: 14px 0;
  }

  .mm-studio-purpose-buttons {
    grid-template-columns: 1fr 1fr;
  }

  .mm-studio-purpose-buttons button {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mm-studio-workflow-list {
    scroll-snap-type: x proximity;
  }

  .mm-studio-workflow-list li {
    min-width: min(72vw, 220px);
    scroll-snap-align: start;
  }

  .mm-studio-practice-panel .mm-studio-button-row,
  .mm-studio-practice-start,
  .mm-studio-next-action button {
    width: 100%;
  }
}

.mm-content-info-dialog .mm-dialog__body {
  inline-size: min(680px, calc(100vw - 32px));
}

.mm-content-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.mm-content-info-list > div {
  min-inline-size: 0;
  padding: 12px 14px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface-2);
}

.mm-content-info-list dt {
  color: var(--mm-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.mm-content-info-list dd {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  color: var(--mm-text);
  line-height: 1.55;
}

.mm-content-info-multiline {
  white-space: pre-line;
}

.mm-content-info-note {
  color: var(--mm-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  .mm-content-info-list {
    grid-template-columns: 1fr;
  }
}

.mm-account-deletion-status,
.mm-account-data-note {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mm-warning) 35%, transparent);
}
.mm-account-cloud {
  margin-block: 16px;
}
.mm-cloud-project-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.mm-cloud-project {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface);
}
.mm-cloud-project small {
  color: var(--mm-muted);
}
.mm-account-danger {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--mm-danger, #d45b66) 55%, transparent);
  border-radius: 10px;
}
.mm-account-danger button {
  justify-self: start;
}

/* Authenticated editorial console */
.mm-admin [hidden] {
  display: none;
}
.mm-admin-hero {
  margin-block-end: 24px;
  padding: 22px;
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  background: var(--mm-surface);
}
.mm-admin-kicker {
  margin: 0 0 6px;
  color: var(--mm-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mm-admin-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block: 18px;
  padding: 12px 14px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface);
}
.mm-admin-identity div {
  display: grid;
  gap: 3px;
}
.mm-admin-identity span {
  color: var(--mm-muted);
  font-size: 0.82rem;
}
.mm-admin-magic,
.mm-admin-filters,
.mm-admin-review-form {
  display: grid;
  gap: 12px;
  margin-block: 14px;
}
.mm-admin-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.mm-admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.mm-admin-summary > div {
  padding: 13px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: var(--mm-surface-2);
}
.mm-admin-summary dt {
  color: var(--mm-muted);
  font-size: 0.78rem;
}
.mm-admin-summary dd {
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
}
.mm-admin-filters {
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, 0.45fr)) auto;
  align-items: end;
}
.mm-admin-filters label,
.mm-admin-review-form label,
.mm-admin-verification label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.mm-admin-filters input,
.mm-admin-filters select,
.mm-admin-review-form select,
.mm-admin-verification select {
  min-height: 44px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 8px 10px;
}
.mm-admin-verification {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-block: 14px;
}
.mm-admin-history {
  display: grid;
  gap: 8px;
  padding-inline-start: 22px;
  color: var(--mm-muted);
  font-size: 0.86rem;
}
@media (max-width: 720px) {
  .mm-admin-heading,
  .mm-admin-identity {
    align-items: stretch;
    flex-direction: column;
  }
  .mm-admin-filters {
    grid-template-columns: 1fr;
  }
  .mm-admin-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Phase 3-3 support-surface overrides follow legacy Run and world rules. */
.mm-trainer-support__body > .mm-run-panel,
.mm-trainer-support__body > .mm-world-banner {
  width: 100%;
  max-width: none;
  margin: 0;
}

.mm-trainer-support__body > .mm-run-panel {
  border-radius: 16px;
  box-shadow: none;
}

.mm-trainer-support__body > .mm-world-banner {
  border-radius: 16px;
  opacity: 0.88;
}

@media (max-width: 760px) {
  .mm-trainer-support__body > .mm-run-panel {
    width: 100%;
    margin: 0;
  }
}

/* Phase 4-1: workspace-first Mechanism Studio */
.mm-studio-commandbar {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  width: min(1640px, 100%);
  margin: 0 auto 12px;
}

.mm-studio-commandbar__purpose,
.mm-studio-commandbar__next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface) 82%, transparent);
}

.mm-studio-commandbar__purpose > span,
.mm-studio-commandbar__next > span {
  grid-column: 1;
  color: var(--mm-faint);
  font: 700 0.68rem / 1.2 var(--mm-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mm-studio-commandbar__purpose > strong,
.mm-studio-commandbar__next > strong {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--mm-text);
  font-size: 0.9rem;
}

.mm-studio-commandbar button {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 44px;
  align-self: center;
}

.mm-studio-start {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: min(540px, calc(100% - 40px));
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--mm-accent) 58%, var(--mm-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-bg) 92%, transparent);
  box-shadow: 0 20px 60px rgb(0 0 0 / 34%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.mm-studio-start[hidden] {
  display: none;
}

.mm-studio-start h2 {
  margin: 8px 0;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
}

.mm-studio-start p {
  margin: 0 auto;
  max-width: 42rem;
  color: var(--mm-muted);
  line-height: 1.6;
}

.mm-studio-start__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.mm-studio-start__actions button {
  min-height: 48px;
}

.mm-studio-start__actions button:first-child {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
}

.mm-studio-app[data-mm-studio-workspace-state="empty"][data-mm-studio-tool-view="guided"]
  .mm-studio-workspace {
  grid-template-columns: 250px minmax(0, 1fr);
}

.mm-studio-app[data-mm-studio-workspace-state="empty"][data-mm-studio-tool-view="guided"]
  .mm-studio-sidebar--right,
.mm-studio-app[data-mm-studio-workspace-state="empty"][data-mm-studio-tool-view="guided"]
  [data-mm-studio-tool-group]:not([data-mm-studio-tool-group="structure"]):not(
    [data-mm-studio-tool-group="library"]
  ) {
  display: none;
}

.mm-studio-guidance {
  width: min(1640px, 100%);
  margin: 16px auto 0;
  border: 1px solid var(--mm-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mm-surface) 72%, transparent);
  overflow: clip;
}

.mm-studio-guidance > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--mm-muted);
  font-weight: 700;
}

.mm-studio-guidance > summary strong {
  color: var(--mm-accent);
  font-size: 0.8rem;
}

.mm-studio-guidance__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--mm-border);
}

.mm-studio-guidance .mm-studio-purpose-panel,
.mm-studio-guidance .mm-studio-workflow-panel {
  width: 100%;
  margin: 0;
  border-block: 0;
  background: transparent;
}

.mm-studio-guidance .mm-studio-purpose-panel {
  grid-template-columns: minmax(220px, 0.75fr) minmax(480px, 1.6fr);
  padding: 18px 0;
}

.mm-studio-guidance .mm-studio-workflow-panel {
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.8fr);
  padding: 18px 0 2px;
  border-top: 1px solid var(--mm-border);
}

.mm-studio-app + .mm-world-banner {
  margin-top: 28px;
}

@media (max-width: 1120px) {
  .mm-studio-commandbar {
    grid-template-columns: 1fr;
  }

  .mm-studio-guidance .mm-studio-purpose-panel,
  .mm-studio-guidance .mm-studio-workflow-panel {
    grid-template-columns: 1fr;
  }

  .mm-studio-app[data-mm-studio-workspace-state="empty"][data-mm-studio-tool-view="guided"]
    .mm-studio-workspace {
    grid-template-columns: 230px minmax(480px, 1fr);
  }
}

@media (max-width: 760px) {
  .mm-studio-commandbar {
    width: 100%;
    margin-bottom: 10px;
  }

  .mm-studio-commandbar__purpose,
  .mm-studio-commandbar__next {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .mm-studio-commandbar button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 4px;
  }

  .mm-studio-start {
    width: calc(100% - 24px);
    padding: 16px 14px;
  }

  .mm-studio-start__actions {
    grid-template-columns: 1fr;
  }

  .mm-studio-start__actions button {
    min-height: 44px;
  }

  .mm-studio-app[data-mm-studio-workspace-state="empty"][data-mm-studio-tool-view="guided"]
    .mm-studio-workspace {
    display: flex;
  }

  .mm-studio-guidance {
    width: 100%;
    margin-top: 12px;
  }

  .mm-studio-guidance > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .mm-studio-guidance__body {
    padding: 0 12px 12px;
  }
}

/* Phase 4-2 Studio recovery */
.mm-studio-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: min(1120px, 100%);
  margin: 0 auto 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--mm-warning) 62%, var(--mm-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--mm-warning) 8%, var(--mm-surface));
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
}

.mm-studio-recovery[hidden] {
  display: none;
}

.mm-studio-recovery h2 {
  margin: 5px 0 6px;
  font-size: 1rem;
}

.mm-studio-recovery p {
  margin: 0;
  color: var(--mm-muted);
  line-height: 1.55;
}

.mm-studio-recovery__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mm-studio-recovery__actions [data-mm-studio-recovery-retry],
.mm-studio-recovery__actions [data-mm-studio-recovery-backup] {
  border-color: color-mix(in srgb, var(--mm-accent) 68%, var(--mm-border-strong));
}

@media (max-width: 760px) {
  .mm-studio-recovery {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .mm-studio-recovery__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mm-studio-recovery__actions button {
    width: 100%;
    min-height: 44px;
  }
}

/* Phase 4-3: large-project navigation, inspection, and viewport controls */
.mm-studio-pagebar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 4px 0 8px;
}

.mm-studio-pagebar__navigation,
.mm-studio-viewport-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.mm-studio-pagebar__navigation label {
  min-width: min(260px, 34vw);
}

.mm-studio-pagebar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 7px 9px;
  font: inherit;
}

.mm-studio-pagebar__navigation > strong {
  color: var(--mm-faint);
  font: 700 0.72rem / 1.2 var(--mm-mono);
  white-space: nowrap;
}

.mm-studio-viewport-controls [data-mm-studio-zoom-level] {
  min-width: 66px;
  font-family: var(--mm-mono);
}

.mm-studio-viewport-controls [data-mm-studio-render-status] {
  max-width: 250px;
  color: var(--mm-faint);
  font-size: 0.72rem;
  line-height: 1.35;
}

.mm-studio-app[data-mm-studio-render-state="preparing"] [data-mm-studio-render-status],
.mm-studio-app[data-mm-studio-render-state="binding"] [data-mm-studio-render-status] {
  color: var(--mm-warning);
}

.mm-studio-page-tabs {
  align-items: center;
}

.mm-studio-page-tabs > span {
  padding-inline: 4px;
  color: var(--mm-faint);
  font-weight: 800;
}

.mm-studio-selection-inspector {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.3fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface-2) 76%, transparent);
}

.mm-studio-selection-inspector h2 {
  margin: 3px 0 4px;
  font-size: 0.9rem;
}

.mm-studio-selection-inspector p {
  margin: 0;
  color: var(--mm-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.mm-studio-selection-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.mm-studio-selection-list article {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  background: var(--mm-bg);
}

.mm-studio-selection-list strong,
.mm-studio-selection-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-studio-selection-list strong {
  font-size: 0.76rem;
}

.mm-studio-selection-list span {
  color: var(--mm-faint);
  font: 600 0.68rem / 1.35 var(--mm-mono);
}

.mm-studio-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mm-studio-canvas-shell {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.mm-studio-canvas {
  max-width: none;
  transform-origin: top left;
}

.mm-studio-app[data-mm-studio-pan-mode="true"] .mm-studio-canvas-shell {
  cursor: grab;
}

.mm-studio-app[data-mm-studio-panning="true"] .mm-studio-canvas-shell {
  cursor: grabbing;
  user-select: none;
}

.mm-studio-app[data-mm-studio-pan-mode="true"] [data-mm-studio-pan] {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
}

@media (max-width: 1120px) {
  .mm-studio-pagebar {
    align-items: stretch;
    flex-direction: column;
  }

  .mm-studio-viewport-controls [data-mm-studio-render-status] {
    margin-inline-start: auto;
  }

  .mm-studio-selection-inspector {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  }

  .mm-studio-selection-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .mm-studio-pagebar__navigation,
  .mm-studio-viewport-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mm-studio-pagebar__navigation label {
    min-width: 0;
  }

  .mm-studio-pagebar__navigation > strong,
  .mm-studio-viewport-controls [data-mm-studio-render-status] {
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    text-align: center;
  }

  .mm-studio-pagebar button,
  .mm-studio-pagebar select,
  .mm-studio-selection-actions button {
    min-height: 44px;
  }

  .mm-studio-selection-inspector {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .mm-studio-selection-list {
    grid-template-columns: 1fr;
  }

  .mm-studio-selection-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Phase 4-4: whole-object selection, marquee selection, and unified properties */
.mm-studio-property-editor {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--mm-border);
}

.mm-studio-property-editor[hidden] {
  display: none;
}

.mm-studio-property-editor h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
}

.mm-studio-property-editor form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mm-studio-property-editor form > p,
.mm-studio-property-actions {
  grid-column: 1 / -1;
}

.mm-studio-property-editor label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--mm-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.mm-studio-property-editor input,
.mm-studio-property-editor select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 8px;
  background: var(--mm-bg);
  color: var(--mm-text);
  padding: 7px 9px;
  font: inherit;
}

.mm-studio-property-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.mm-studio-app[data-mm-studio-object-select="true"] [data-mm-studio-object-select] {
  border-color: var(--mm-accent);
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface-2));
}

.mm-studio-app[data-mm-studio-object-select="true"] .mm-studio-selectable-object {
  cursor: pointer;
}

.mm-studio-object-selected {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mm-accent) 88%, transparent));
}

.mm-studio-object-selected > :not(text),
.mm-studio-object-selected:is(text) {
  stroke: var(--mm-accent);
  stroke-width: 4px;
}

.mm-studio-object-selected:is(text) {
  paint-order: stroke fill;
  stroke-width: 2px;
}

.mm-studio-marquee {
  fill: color-mix(in srgb, var(--mm-accent) 12%, transparent);
  stroke: var(--mm-accent);
  stroke-width: 2px;
  stroke-dasharray: 8 5;
  pointer-events: none;
}

@media (min-width: 1121px) {
  .mm-studio-selection-actions {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 1120px) {
  .mm-studio-property-editor {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .mm-studio-property-editor form {
    grid-template-columns: 1fr;
  }

  .mm-studio-property-editor form > p,
  .mm-studio-property-actions {
    grid-column: 1;
  }

  .mm-studio-property-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mm-studio-property-actions button {
    width: 100%;
    min-height: 44px;
  }
}

/* Phase 4-5: object productivity controls, layers, and locks */
.mm-studio-selection-list article[data-locked="true"] {
  border-style: dashed;
}

.mm-studio-property-hint {
  padding: 8px 10px;
  border-left: 3px solid var(--mm-border-strong);
  background: color-mix(in srgb, var(--mm-surface-2) 82%, transparent);
}

.mm-studio-object-locked {
  opacity: 0.72;
}

.mm-studio-app[data-mm-studio-object-select="true"] .mm-studio-object-locked {
  cursor: not-allowed;
}

.mm-studio-selection-actions button:disabled,
.mm-studio-property-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

@media (min-width: 1121px) {
  .mm-studio-selection-actions {
    max-width: 30rem;
  }
}

@media (max-width: 760px) {
  .mm-studio-selection-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phase 4-6: direct manipulation, resize handles, guides, and groups */
.mm-studio-app[data-mm-studio-object-select="true"]
.mm-studio-selectable-object:not(.mm-studio-object-locked) {
  cursor: grab;
}

.mm-studio-app[data-mm-studio-object-select="true"][data-mm-studio-dragging="true"]
  .mm-studio-selectable-object {
  cursor: grabbing;
}

.mm-studio-alignment-guides {
  pointer-events: none;
}

.mm-studio-alignment-guides line {
  stroke: var(--mm-accent);
  stroke-width: 1.5px;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
}

.mm-studio-alignment-guides line[data-mode="grid"] {
  stroke: var(--mm-warning, #fbbf24);
  stroke-dasharray: 3 4;
}

.mm-studio-snap-feedback {
  position: sticky;
  left: 12px;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -42px 12px 12px;
  padding: 7px 11px;
  border: 1px solid var(--mm-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-surface-1) 92%, transparent);
  box-shadow: var(--mm-shadow-sm);
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
}

.mm-studio-resize-overlay {
  pointer-events: none;
}

.mm-studio-resize-outline {
  fill: none;
  stroke: var(--mm-accent);
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.mm-studio-resize-handle {
  fill: var(--mm-surface-1);
  stroke: var(--mm-accent);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: nwse-resize;
}

.mm-studio-resize-handle[data-mm-studio-resize-handle="ne"],
.mm-studio-resize-handle[data-mm-studio-resize-handle="sw"] {
  cursor: nesw-resize;
}

.mm-studio-object-selected[data-group-id] {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mm-accent) 65%, transparent));
}

/* Phase 4-7: selection transforms, page alignment, and snap preferences */
.mm-studio-transform-controls {
  position: fixed;
  z-index: 24;
  inset-block-start: 84px;
  inset-inline-end: 16px;
  display: grid;
  width: 312px;
  max-height: calc(100dvh - 100px);
  overflow: auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--mm-border-subtle);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface-2) 96%, transparent);
  box-shadow: var(--mm-shadow-md);
}

.mm-studio-transform-controls[hidden] {
  display: none;
}

.mm-studio-transform-controls p {
  margin: 0;
  color: var(--mm-text-muted);
  font-size: 0.78rem;
}

.mm-studio-transform-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mm-studio-transform-actions--page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mm-studio-transform-overlay {
  pointer-events: none;
}

.mm-studio-transform-outline {
  pointer-events: none;
  fill: none;
  stroke: var(--mm-accent);
  stroke-width: 1.7px;
  stroke-dasharray: 8 4;
  vector-effect: non-scaling-stroke;
}

.mm-studio-rotate-stem {
  pointer-events: none;
  stroke: var(--mm-accent);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.mm-studio-rotate-handle,
.mm-studio-scale-handle {
  pointer-events: all;
  fill: var(--mm-surface-1);
  stroke: var(--mm-accent);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.mm-studio-rotate-handle {
  cursor: grab;
}
.mm-studio-rotate-handle:active {
  cursor: grabbing;
}
.mm-studio-scale-handle {
  cursor: nwse-resize;
}
.mm-studio-scale-handle[data-mm-studio-scale-handle="ne"],
.mm-studio-scale-handle[data-mm-studio-scale-handle="sw"] {
  cursor: nesw-resize;
}

@media (max-width: 1120px) {
  .mm-studio-transform-controls {
    position: static;
    width: auto;
    max-height: none;
    grid-column: 1 / -1;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .mm-studio-transform-actions,
  .mm-studio-transform-actions--page {
    grid-template-columns: 1fr 1fr;
  }
  .mm-studio-transform-actions button {
    min-height: 44px;
  }
}

/* Phase 4-9 reusable-part organization, backup, and sync foundation */
.mm-studio-fragment-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mm-studio-fragment-backup {
  border: 1px solid color-mix(in srgb, var(--mm-border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mm-surface-2) 72%, transparent);
}

.mm-studio-fragment-backup > summary {
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.mm-studio-fragment-backup > .mm-studio-panel {
  padding: 0 8px 8px;
}

.mm-studio-fragment-import-report {
  margin: 0;
  padding: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--mm-accent) 10%, transparent);
  color: var(--mm-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.mm-studio-fragment-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mm-studio-fragment-favorite {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 4px;
  font-size: 1rem;
  line-height: 1;
}

.mm-studio-fragment-card__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.mm-studio-fragment-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--mm-border) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mm-surface-1) 84%, transparent);
  color: var(--mm-muted);
  font-size: 0.61rem;
  white-space: nowrap;
}

.mm-studio-fragment-chip--tag {
  color: var(--mm-accent-strong);
}

.mm-studio-fragment-chip--sync[data-state="conflict"] {
  border-color: color-mix(in srgb, var(--mm-danger) 55%, var(--mm-border));
  color: var(--mm-danger);
}

.mm-studio-fragment-chip--sync[data-state="synced"] {
  color: var(--mm-success);
}

@media (max-width: 760px) {
  .mm-studio-fragment-filters {
    grid-template-columns: 1fr;
  }

  .mm-studio-fragment-favorite {
    min-width: 44px;
    min-height: 44px;
  }
}

.mm-studio-fragment-sync {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface, #fff) 92%, transparent);
}

.mm-studio-fragment-sync__actions,
.mm-studio-fragment-conflict__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-studio-fragment-sync p {
  margin: 0;
  font-size: 0.82rem;
}

.mm-studio-fragment-conflicts {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.mm-studio-fragment-conflicts[hidden] {
  display: none;
}

.mm-studio-fragment-conflict {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 12px;
}

.mm-studio-fragment-conflict__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mm-studio-fragment-conflict__side {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface-raised, #fff) 94%, transparent);
}

.mm-studio-fragment-conflict__side h4,
.mm-studio-fragment-conflict__side p {
  margin: 0 0 8px;
}

.mm-studio-fragment-conflict__side dl {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
}

.mm-studio-fragment-conflict__side dl > div {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 8px;
}

.mm-studio-fragment-conflict__side dt {
  font-weight: 700;
}

.mm-studio-fragment-conflict__side dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.mm-studio-fragment-conflict__fields label {
  flex: 1 1 150px;
}

@media (max-width: 640px) {
  .mm-studio-fragment-sync__actions,
  .mm-studio-fragment-conflict__fields {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mm-studio-fragment-sync__actions button,
  .mm-studio-fragment-conflict__fields select,
  [data-mm-studio-fragment-conflict-resolve] {
    min-height: 44px;
    width: 100%;
  }

  .mm-studio-fragment-conflict__comparison {
    grid-template-columns: 1fr;
  }
}

.mm-studio-fragment-cloud-usage {
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-accent-soft, #eef5ff) 72%, transparent);
  font-weight: 700;
}

.mm-studio-fragment-cloud-details,
.mm-studio-fragment-protection {
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-top: 8px;
}

.mm-studio-fragment-cloud-details > summary,
.mm-studio-fragment-protection > summary {
  cursor: pointer;
  font-weight: 750;
}

.mm-studio-fragment-history,
.mm-studio-fragment-devices {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.mm-studio-fragment-cloud-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mm-surface-raised, #fff) 94%, transparent);
}

.mm-studio-fragment-cloud-item strong,
.mm-studio-fragment-cloud-item span {
  overflow-wrap: anywhere;
}

.mm-studio-fragment-cloud-item button {
  justify-self: start;
}

.mm-studio-fragment-protection .mm-studio-panel {
  padding-top: 10px;
}

@media (max-width: 640px) {
  .mm-studio-fragment-cloud-item button,
  [data-mm-studio-fragment-protection-enable],
  [data-mm-studio-fragment-protection-lock],
  [data-mm-studio-fragment-protection-disable] {
    width: 100%;
    min-height: 44px;
  }
}

/* Phase 5: cross-application keyboard, mobile and assistive-technology baseline. */
html,
body {
  overflow-x: clip;
}

.mm-page :is(main, section, article, form, fieldset, nav) {
  min-inline-size: 0;
}

.mm-page button,
.mm-page select,
.mm-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.mm-page textarea,
.mm-page summary,
.mm-page [role="button"],
.mm-page [role="tab"] {
  min-block-size: 44px;
}

.mm-page input[type="checkbox"],
.mm-page input[type="radio"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.mm-page
  :is(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="tab"],
    [tabindex]
  ):focus-visible {
  outline: 3px solid var(--mm-focus);
  outline-offset: 3px;
}

html[data-mm-input="keyboard"] .mm-page :focus {
  scroll-margin-block: 88px 32px;
}

.mm-dialog[open] {
  max-block-size: min(88dvh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
}

html[data-mm-motion="none"] *,
html[data-mm-motion="none"] *::before,
html[data-mm-motion="none"] *::after {
  /* biome-ignore lint/complexity/noImportantStyles: The explicit no-motion preference must override every component animation. */
  scroll-behavior: auto !important;
  /* biome-ignore lint/complexity/noImportantStyles: The explicit no-motion preference must override every component animation. */
  animation-duration: 0.01ms !important;
  /* biome-ignore lint/complexity/noImportantStyles: The explicit no-motion preference must override every component animation. */
  animation-iteration-count: 1 !important;
  /* biome-ignore lint/complexity/noImportantStyles: The explicit no-motion preference must override every component transition. */
  transition-duration: 0.01ms !important;
}

html[data-mm-motion="reduced"] .mm-discipline-particles,
html[data-mm-motion="reduced"] .mm-global-atmosphere i:nth-child(n + 2) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  /* biome-ignore lint/style/noDescendingSpecificity: This global preference intentionally appears last in the cascade. */
  *,
  /* biome-ignore lint/style/noDescendingSpecificity: This global preference intentionally appears last in the cascade. */
  *::before,
  /* biome-ignore lint/style/noDescendingSpecificity: This global preference intentionally appears last in the cascade. */
  *::after {
    /* biome-ignore lint/complexity/noImportantStyles: The operating-system motion preference must override every component animation. */
    animation-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: The operating-system motion preference must override every component animation. */
    animation-iteration-count: 1 !important;
    /* biome-ignore lint/complexity/noImportantStyles: The operating-system motion preference must override every component transition. */
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .mm-page
    :is(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [role="button"],
      [role="tab"],
      [tabindex]
    ):focus-visible {
    outline: 3px solid CanvasText;
  }

  .mm-feedback-pop,
  .mm-discipline-burst > strong {
    color: CanvasText;
  }
}

@media (max-width: 620px) {
  .mm-dialog {
    max-inline-size: calc(100vw - 20px);
    margin: auto;
  }

  .mm-dialog__actions,
  .mm-experience-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mm-dialog__actions > *,
  .mm-experience-actions > * {
    width: 100%;
  }
}

/* Phase 7: lively, chemistry-specific sound and visual atmosphere. */
.mm-experience-mix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mm-experience-mix .mm-experience-field {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--mm-border) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--mm-surface-2) 88%, transparent);
}

.mm-experience-mix input[type="range"] {
  width: 100%;
  accent-color: var(--mm-accent);
}

.mm-experience-switches {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.mm-experience-preview {
  width: 100%;
  border-color: color-mix(in srgb, var(--mm-accent) 54%, var(--mm-border));
  background:
    radial-gradient(
      circle at 20% 10%,
      color-mix(in srgb, var(--mm-accent) 20%, transparent),
      transparent 50%
    ),
    var(--mm-surface-2);
}

html[data-mm-trainer="iupac"] {
  --mm-discipline-color: #f5b942;
  --mm-experience-ring: #ffdd73;
}

html[data-mm-trainer="spectrum"] {
  --mm-discipline-color: #62d7ff;
  --mm-experience-ring: #9ce9ff;
}

html[data-mm-trainer="arrow"] {
  --mm-discipline-color: #b993ff;
  --mm-experience-ring: #d9c1ff;
}

html[data-mm-trainer="studio"] {
  --mm-discipline-color: #61e7bd;
  --mm-experience-ring: #9af2d7;
}

html[data-mm-mode="pulse"] .mm-global-atmosphere i {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--mm-experience-ring, var(--mm-accent)) 44%, transparent),
    transparent 68%
  );
}

html[data-mm-mode="pulse"][data-mm-scene="run"] .mm-global-atmosphere i:first-child,
html[data-mm-mode="pulse"][data-mm-scene="boss"] .mm-global-atmosphere i:first-child {
  animation: mm-phase7-atmosphere 4.8s ease-in-out infinite;
}

html[data-mm-mode="pulse"][data-mm-scene="boss"] .mm-global-atmosphere i {
  filter: saturate(1.35) contrast(1.08);
}

html[data-mm-audio-state="running"] .mm-sitebar__brand {
  animation: mm-phase7-brand-breathe 3.4s ease-in-out infinite;
}

.mm-feedback-pop {
  position: relative;
  isolation: isolate;
}

.mm-feedback-pop::after {
  position: absolute;
  z-index: -1;
  inset: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid color-mix(in srgb, var(--mm-discipline-color) 74%, white);
  border-radius: 50%;
  content: "";
  translate: -50% -50%;
  opacity: 0;
}

.mm-feedback-pop[data-kind="correct"]::after,
.mm-feedback-pop[data-kind="complete"]::after,
.mm-feedback-pop[data-kind="unlock"]::after {
  animation: mm-phase7-feedback-ring 900ms ease-out both;
}

@keyframes mm-phase7-atmosphere {
  0%,
  100% {
    transform: scale(0.92) rotate(-2deg);
    opacity: 0.58;
  }
  50% {
    transform: scale(1.08) rotate(2deg);
    opacity: 0.92;
  }
}

@keyframes mm-phase7-brand-breathe {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 18px
      color-mix(in srgb, var(--mm-experience-ring, var(--mm-accent)) 58%, transparent);
  }
}

@keyframes mm-phase7-feedback-ring {
  0% {
    scale: 0.4;
    opacity: 0.9;
  }
  100% {
    scale: 4.2;
    opacity: 0;
  }
}

html[data-mm-motion="reduced"] .mm-global-atmosphere i,
html[data-mm-motion="reduced"] .mm-sitebar__brand {
  animation-duration: 8s;
}

html[data-mm-motion="none"] .mm-feedback-pop::after {
  display: none;
}

@media (max-width: 620px) {
  .mm-experience-mix {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   Meimay academic redesign — 2026-07
   ========================================================================== */

html {
  color-scheme: light;
  background: #f4f5f7;
}

body.mm-page:not([data-mm-app="admin"]) {
  --mm-bg: #f4f5f7;
  --mm-surface: #ffffff;
  --mm-surface-2: #f7f8fa;
  --mm-border: #d8dde4;
  --mm-text: #18212b;
  --mm-muted: #5f6875;
  --mm-faint-aa: #727c88;
  --mm-accent: #2457a6;
  --mm-focus: #2d66c3;
  --mm-danger: #b42318;
  --mm-warning: #9a6700;
  --mm-radius: 6px;
  margin: 0;
  min-height: 100vh;
  background: #f4f5f7;
  color: var(--mm-text);
  font-family: var(--mm-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.mm-page:not([data-mm-app="admin"]) *,
body.mm-page:not([data-mm-app="admin"]) *::before,
body.mm-page:not([data-mm-app="admin"]) *::after {
  box-sizing: border-box;
}

body.mm-page:not([data-mm-app="admin"]) [hidden] {
  display: none !important;
}

body.mm-page:not([data-mm-app="admin"]) a {
  color: inherit;
}

body.mm-page:not([data-mm-app="admin"]) button,
body.mm-page:not([data-mm-app="admin"]) input,
body.mm-page:not([data-mm-app="admin"]) select,
body.mm-page:not([data-mm-app="admin"]) textarea {
  font: inherit;
}

body.mm-page:not([data-mm-app="admin"]) button,
body.mm-page:not([data-mm-app="admin"]) select,
body.mm-page:not([data-mm-app="admin"]) input,
body.mm-page:not([data-mm-app="admin"]) textarea {
  border-radius: 6px;
}

body.mm-page:not([data-mm-app="admin"]) button {
  min-height: 40px;
  border: 1px solid #1f4f91;
  background: #2457a6;
  color: #fff;
  padding: 9px 15px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body.mm-page:not([data-mm-app="admin"]) button:hover {
  background: #1f4f91;
  border-color: #1f4f91;
}

body.mm-page:not([data-mm-app="admin"]) button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.mm-page:not([data-mm-app="admin"]) .mm-secondary-button,
body.mm-page:not([data-mm-app="admin"]) button.mm-secondary-button,
body.mm-page:not([data-mm-app="admin"]) .mm-dialog__actions button:first-child,
body.mm-page:not([data-mm-app="admin"]) [data-mm-iupac-hint],
body.mm-page:not([data-mm-app="admin"]) [data-mm-arrow-undo],
body.mm-page:not([data-mm-app="admin"]) [data-mm-arrow-clear],
body.mm-page:not([data-mm-app="admin"]) [data-mm-spectrum-course-hint] {
  border-color: #cbd2da;
  background: #fff;
  color: #293541;
}

body.mm-page:not([data-mm-app="admin"]) .mm-secondary-button:hover,
body.mm-page:not([data-mm-app="admin"]) button.mm-secondary-button:hover,
body.mm-page:not([data-mm-app="admin"]) .mm-dialog__actions button:first-child:hover,
body.mm-page:not([data-mm-app="admin"]) [data-mm-iupac-hint]:hover,
body.mm-page:not([data-mm-app="admin"]) [data-mm-arrow-undo]:hover,
body.mm-page:not([data-mm-app="admin"]) [data-mm-arrow-clear]:hover,
body.mm-page:not([data-mm-app="admin"]) [data-mm-spectrum-course-hint]:hover {
  border-color: #9da8b4;
  background: #f7f8fa;
  color: #18212b;
}

body.mm-page:not([data-mm-app="admin"]) input,
body.mm-page:not([data-mm-app="admin"]) select,
body.mm-page:not([data-mm-app="admin"]) textarea {
  border: 1px solid #bfc7d0;
  background: #fff;
  color: #18212b;
  padding: 10px 12px;
}

body.mm-page:not([data-mm-app="admin"]) input:focus,
body.mm-page:not([data-mm-app="admin"]) select:focus,
body.mm-page:not([data-mm-app="admin"]) textarea:focus {
  outline: 3px solid rgba(45, 102, 195, 0.18);
  border-color: #2d66c3;
}

/* Header */
body.mm-page:not([data-mm-app="admin"]) .mm-sitebar {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  border-block-end: 1px solid #d8dde4;
  background: rgba(255, 255, 255, 0.96);
  color: #18212b;
  backdrop-filter: blur(12px);
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 58px;
  gap: 18px;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__brand {
  min-height: 44px;
  color: #14243a;
  font: 760 1.08rem/1 var(--mm-sans);
  letter-spacing: -0.025em;
  text-transform: none;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__primary {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__primary a,
body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__language {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: #596471;
  font-size: 0.84rem;
  font-weight: 620;
  text-decoration: none;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__primary a[aria-current="page"] {
  color: #18212b;
  background: #f0f2f5;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__language:hover,
body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__primary a:hover {
  background: #f0f2f5;
  color: #18212b;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__actions {
  gap: 4px;
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__current {
  color: #25303c;
  font: 680 0.92rem/1.2 var(--mm-sans);
}

body.mm-page:not([data-mm-app="admin"]) .mm-sitebar--trainer .mm-sitebar__inner {
  width: min(1080px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
}

body.mm-page:not([data-mm-app="admin"]) .mm-trainer-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #46515d;
  text-decoration: none;
}

body.mm-page:not([data-mm-app="admin"]) .mm-trainer-back:hover {
  background: #f0f2f5;
  color: #18212b;
}

body.mm-page:not([data-mm-app="admin"]) .mm-trainer-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-settings-menu {
  position: relative;
}

.mm-settings-menu > summary {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #52606d;
  cursor: pointer;
  list-style: none;
}

.mm-settings-menu > summary::-webkit-details-marker {
  display: none;
}

.mm-settings-menu > summary:hover,
.mm-settings-menu[open] > summary {
  background: #f0f2f5;
  color: #18212b;
}

.mm-settings-menu > summary svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-settings-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + 7px);
  inset-inline-end: 0;
  z-index: 220;
  width: 230px;
  display: grid;
  padding: 6px;
  border: 1px solid #cfd5dc;
  background: #fff;
  box-shadow: 0 12px 34px rgba(34, 45, 57, 0.12);
}

.mm-settings-menu__panel a,
.mm-settings-menu__panel button {
  min-height: 38px !important;
  display: flex;
  align-items: center;
  width: 100%;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #27333f !important;
  padding: 8px 10px !important;
  font-size: 0.84rem;
  font-weight: 580 !important;
  text-align: start;
  text-decoration: none;
}

.mm-settings-menu__panel a:hover,
.mm-settings-menu__panel button:hover {
  background: #f1f3f6 !important;
}

/* Footer */
body.mm-page:not([data-mm-app="admin"]) .mm-site-footer {
  border-block-start: 1px solid #dde1e6;
  background: #fff;
  color: #68727e;
}

body.mm-page:not([data-mm-app="admin"]) .mm-site-footer__inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 0.76rem;
}

body.mm-page:not([data-mm-app="admin"]) .mm-site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

body.mm-page:not([data-mm-app="admin"]) .mm-site-footer a {
  text-decoration: none;
}

body.mm-page:not([data-mm-app="admin"]) .mm-site-footer a:hover {
  color: #18212b;
  text-decoration: underline;
}

/* Home */
.mm-home {
  width: min(1020px, calc(100% - 40px));
  min-height: calc(100vh - 129px);
  display: grid;
  align-items: center;
  margin: 0 auto;
  padding: 54px 0;
}

.mm-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid #cfd5dc;
  border-inline-start: 1px solid #cfd5dc;
  background: #fff;
  box-shadow: 0 8px 26px rgba(28, 40, 52, 0.055);
}

.mm-tool-card {
  position: relative;
  min-height: 196px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 22px;
  border-inline-end: 1px solid #cfd5dc;
  border-block-end: 1px solid #cfd5dc;
  background: #fff;
  padding: 28px 30px;
  color: #18212b;
  text-decoration: none;
  transition: background-color 130ms ease, box-shadow 130ms ease;
}

.mm-tool-card:hover {
  z-index: 1;
  background: #fafbfc;
  box-shadow: inset 0 0 0 2px #8fa4bf;
}

.mm-tool-card:focus-visible {
  z-index: 2;
  outline: 3px solid #2d66c3;
  outline-offset: -3px;
}

.mm-tool-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.mm-tool-card__icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-tool-card--iupac .mm-tool-card__icon { color: #2767b0; }
.mm-tool-card--spectrum .mm-tool-card__icon { color: #087f8c; }
.mm-tool-card--arrow .mm-tool-card__icon { color: #a05a00; }
.mm-tool-card--studio .mm-tool-card__icon { color: #6d54a3; }

.mm-tool-card__copy {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.mm-tool-card__copy strong {
  color: #17212b;
  font-size: clamp(1.22rem, 2.2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.mm-tool-card__copy small {
  color: #5e6975;
  font-size: 0.9rem;
  line-height: 1.55;
}

.mm-tool-card__arrow {
  color: #77818c;
  font-size: 1.35rem;
}

/* Shared dialogs and notices */
body.mm-page:not([data-mm-app="admin"]) .mm-dialog {
  border: 1px solid #cbd2da;
  border-radius: 8px;
  background: #fff;
  color: #18212b;
  box-shadow: 0 22px 70px rgba(25, 34, 45, 0.22);
}

body.mm-page:not([data-mm-app="admin"]) .mm-dialog::backdrop {
  background: rgba(25, 34, 45, 0.35);
}

body.mm-page:not([data-mm-app="admin"]) .mm-dialog__body p {
  color: #5f6875;
}

body.mm-page:not([data-mm-app="admin"]) .mm-notice {
  border: 1px solid #cbd2da;
  border-inline-start: 3px solid #2457a6;
  border-radius: 6px;
  background: #fff;
  color: #18212b;
  box-shadow: 0 10px 28px rgba(26, 38, 50, 0.13);
}

body.mm-page:not([data-mm-app="admin"]) .mm-consent-banner {
  border: 1px solid #cbd2da;
  background: #fff;
  color: #18212b;
  box-shadow: 0 -8px 30px rgba(28, 40, 52, 0.1);
}

/* Trainer shell */
.mm-trainer-page {
  width: min(1060px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 60px;
}

.mm-trainer-primary {
  min-width: 0;
}

.mm-trainer-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.mm-trainer-toolbar > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.mm-trainer-toolbar span {
  color: #394654;
  font-size: 0.85rem;
  font-weight: 680;
}

.mm-trainer-toolbar p {
  margin: 0;
  color: #737d88;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-iupac-hero,
.mm-arrow-hero,
.mm-world-banner,
.mm-trainer-support,
.mm-confidence-control,
.mm-global-atmosphere,
.mm-feedback-layer,
.mm-discipline-layer {
  display: none !important;
}

/* IUPAC */
.mm-iupac-app {
  width: min(900px, 100%);
  margin: 0 auto;
  color: #18212b;
}

.mm-iupac-status {
  min-height: 0;
  margin: 0;
  color: #69737e;
  font-size: 0.84rem;
}

.mm-iupac-status:empty {
  display: none;
}

.mm-iupac-question-card {
  display: grid;
  gap: 0;
  border: 1px solid #cbd2da;
  border-radius: 0;
  background: #fff;
  padding: 0;
  box-shadow: 0 8px 24px rgba(25, 38, 51, 0.055);
}

.mm-iupac-prompt {
  margin: 0;
  border-block-end: 1px solid #e0e4e8;
  padding: 18px 22px;
  color: #2e3a47;
  font-size: 0.94rem;
  font-weight: 620;
  line-height: 1.55;
}

.mm-iupac-structure {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #fff;
}

.mm-iupac-structure svg,
.mm-iupac-structure canvas {
  max-width: 100%;
}

.mm-iupac-answer-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-block-start: 1px solid #e0e4e8;
  padding: 18px 22px;
}

.mm-iupac-answer-form label {
  grid-column: 1 / -1;
  color: #4a5662;
  font-size: 0.8rem;
  font-weight: 650;
}

.mm-iupac-answer-form input {
  min-height: 46px;
  font-size: 1rem;
}

.mm-iupac-answer-actions {
  display: flex;
  gap: 8px;
}

.mm-iupac-answer-actions button {
  white-space: nowrap;
}

.mm-iupac-hint,
.mm-iupac-result,
.mm-iupac-feedback {
  margin: 0;
  border-block-start: 1px solid #e4e7eb;
  padding: 16px 22px;
}

.mm-iupac-hint {
  background: #fffaf0;
  color: #60410c;
  font-size: 0.9rem;
  line-height: 1.6;
}

.mm-iupac-result {
  font-weight: 700;
}

.mm-iupac-result:empty,
.mm-iupac-feedback:empty {
  display: none;
}

.mm-iupac-result.is-correct {
  color: #176b43;
  background: #f0faf5;
}

.mm-iupac-result.is-wrong {
  color: #9b2c24;
  background: #fff4f3;
}

.mm-iupac-feedback {
  color: #303b47;
  line-height: 1.65;
}

.mm-iupac-feedback article,
.mm-iupac-feedback details {
  border: 0;
  border-block-start: 1px solid #e3e6ea;
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
}

.mm-iupac-filter-dialog fieldset {
  border: 0;
  padding: 0;
  margin: 18px 0;
}

.mm-iupac-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-block-start: 10px;
}

.mm-iupac-filter-option {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #d7dce2;
  border-radius: 4px;
  padding: 9px 10px;
}

.mm-iupac-filter-option input {
  width: auto;
  padding: 0;
}

/* Spectrum */
.mm-trainer-page--spectrum {
  width: min(1120px, calc(100% - 32px));
}

.mm-spectrum-app {
  color: #18212b;
}

.mm-spectrum-hero {
  min-height: 48px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.mm-spectrum-hero > div:first-child {
  display: none;
}

.mm-spectrum-mode {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #cdd3da;
  border-radius: 7px;
  background: #fff;
}

.mm-spectrum-mode button {
  min-height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: #596471 !important;
  padding: 6px 12px !important;
  font-size: 0.8rem;
}

.mm-spectrum-mode button[aria-pressed="true"] {
  background: #eaf0f8 !important;
  color: #1e4d8d !important;
}

.mm-spectrum-status:empty {
  display: none;
}

.mm-spectrum-drill,
.mm-spectrum-analysis,
.mm-spectrum-course-player,
.mm-spectrum-course-selector {
  border: 1px solid #cbd2da;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(25, 38, 51, 0.055);
  padding: 22px;
}

.mm-spectrum-toolbar,
.mm-spectrum-analysis-head,
.mm-spectrum-course-toolbar {
  border-block-end: 1px solid #e1e4e8;
  padding-block-end: 14px;
  margin-block-end: 18px;
}

.mm-spectrum-modalities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mm-spectrum-modalities button {
  min-height: 34px !important;
  border-color: #cbd2da !important;
  background: #fff !important;
  color: #485562 !important;
  padding: 6px 11px !important;
  font-size: 0.78rem;
}

.mm-spectrum-modalities button[aria-pressed="true"] {
  border-color: #2d66a7 !important;
  background: #eaf3f5 !important;
  color: #086f7a !important;
}

.mm-spectrum-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.mm-spectrum-card header {
  margin-block-end: 12px;
}

.mm-spectrum-card h2,
.mm-spectrum-analysis h2,
.mm-spectrum-course-player h2 {
  color: #18212b;
  font-size: 1.15rem;
}

.mm-spectrum-question {
  color: #2f3b47;
  font-size: 1rem;
  line-height: 1.65;
}

.mm-spectrum-figure,
.mm-spectrum-course-spectrum,
.mm-spectrum-guided,
.mm-spectrum-candidates,
.mm-spectrum-resolution,
.mm-spectrum-board {
  border: 1px solid #dde1e6;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mm-spectrum-options,
.mm-spectrum-guided-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mm-spectrum-options button,
.mm-spectrum-guided-options button,
.mm-spectrum-candidates button {
  border-color: #cbd2da !important;
  background: #fff !important;
  color: #27333f !important;
  text-align: start;
}

.mm-spectrum-options button:hover,
.mm-spectrum-guided-options button:hover,
.mm-spectrum-candidates button:hover,
.mm-spectrum-options button[aria-pressed="true"],
.mm-spectrum-guided-options button[aria-pressed="true"] {
  border-color: #2d66a7 !important;
  background: #eef4fb !important;
}

.mm-spectrum-explanation,
.mm-spectrum-resolution {
  margin-block-start: 18px;
  border-color: #d6dce2;
  background: #f9fafb;
  color: #2d3945;
}

.mm-spectrum-analysis-style {
  display: none !important;
}

.mm-spectrum-grid,
.mm-spectrum-course-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.mm-spectrum-course-sidebar {
  display: none !important;
}

.mm-spectrum-board {
  margin-block-start: 14px;
}

/* Reaction mechanisms */
.mm-trainer-page--arrow {
  width: min(1040px, calc(100% - 32px));
}

.mm-arrow-app {
  color: #18212b;
}

.mm-arrow-status:empty {
  display: none;
}

.mm-arrow-practice,
.mm-arrow-course-view {
  border: 1px solid #cbd2da;
  border-radius: 0;
  background: #fff;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(25, 38, 51, 0.055);
}

.mm-arrow-practice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid #e1e4e8;
  padding-block-end: 12px;
  margin-block-end: 18px;
}

.mm-arrow-practice-toolbar button {
  border-color: #cbd2da;
  background: #fff;
  color: #3c4854;
}

.mm-arrow-problem-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 16px;
}

.mm-arrow-problem-heading h2 {
  color: #18212b;
  font-size: 1.15rem;
}

.mm-arrow-problem-heading p,
.mm-arrow-instruction {
  color: #5e6874;
  line-height: 1.6;
}

.mm-arrow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px;
}

.mm-arrow-canvas-panel,
.mm-arrow-controls,
.mm-arrow-reasoning,
.mm-arrow-analysis,
.mm-arrow-course-rule {
  border: 1px solid #dde1e6;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mm-arrow-canvas {
  min-height: 330px;
  background: #fff;
}

.mm-arrow-controls {
  padding: 18px;
}

.mm-arrow-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mm-arrow-style-picker {
  display: none !important;
}

.mm-arrow-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mm-arrow-result,
.mm-arrow-reasoning-feedback {
  line-height: 1.6;
}

.mm-arrow-analysis-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Mechanism Studio */
body[data-mm-app="studio"] {
  overflow-x: hidden;
}

body[data-mm-app="studio"] .mm-sitebar--trainer .mm-sitebar__inner {
  width: calc(100% - 24px);
  max-width: none;
}

body[data-mm-app="studio"] #main-content {
  min-height: calc(100vh - 58px);
}

.mm-studio-app {
  width: 100%;
  color: #18212b;
  padding: 14px;
}

.mm-studio-hero {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.mm-studio-hero > div:first-child {
  display: none;
}

.mm-studio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mm-studio-hero-actions button {
  min-height: 36px;
  border-color: #cbd2da;
  background: #fff;
  color: #34414d;
  padding: 7px 11px;
  font-size: 0.78rem;
}

.mm-studio-commandbar,
.mm-studio-start,
.mm-studio-guidance,
.mm-studio-practice-panel,
.mm-studio-recovery {
  border: 1px solid #d5dae0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mm-studio-guidance {
  margin-block: 10px;
}

.mm-studio-workspace {
  min-height: calc(100vh - 210px);
  display: grid;
  grid-template-columns: 250px minmax(460px, 1fr) 270px;
  gap: 10px;
}

.mm-studio-sidebar,
.mm-studio-center {
  border: 1px solid #d5dae0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mm-studio-sidebar details {
  border-block-end: 1px solid #e1e4e8;
}

.mm-studio-sidebar summary {
  background: #f7f8fa;
  color: #34414d;
  font-size: 0.8rem;
  font-weight: 680;
}

.mm-studio-panel {
  background: #fff;
}

.mm-studio-canvas-shell,
.mm-studio-canvas {
  background: #fff;
}

.mm-studio-toolbar,
.mm-studio-pagebar,
.mm-studio-viewport-controls {
  border-color: #d6dbe1;
  background: #f7f8fa;
}

.mm-studio-toolbar button,
.mm-studio-pagebar button,
.mm-studio-viewport-controls button,
.mm-studio-sidebar button {
  border-color: #cbd2da;
  background: #fff;
  color: #34414d;
}

/* Records */
.mm-records,
.mm-glossary {
  width: min(980px, calc(100% - 40px));
  min-height: calc(100vh - 129px);
  margin: 0 auto;
  padding: 48px 0 64px;
}

.mm-records > header,
.mm-glossary > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-block-end: 22px;
}

.mm-records h1,
.mm-glossary h1 {
  margin: 0;
  color: #17212b;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  letter-spacing: -0.03em;
}

.mm-records header p {
  margin: 7px 0 0;
  color: #68727d;
  font-size: 0.86rem;
}

.mm-records-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid #cfd5dc;
  border-inline-start: 1px solid #cfd5dc;
  background: #fff;
}

.mm-records-grid > section {
  min-height: 340px;
  border-inline-end: 1px solid #cfd5dc;
  border-block-end: 1px solid #cfd5dc;
  padding: 22px;
}

.mm-records-grid h2 {
  margin: 0 0 18px;
  font-size: 1rem;
}

.mm-learning-list,
.mm-learning-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-learning-skill,
.mm-learning-history li {
  border: 1px solid #dde1e6;
  border-radius: 0;
  background: #fff;
  padding: 12px;
}

.mm-learning-history li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
}

.mm-learning-history__status {
  font-weight: 680;
}

.mm-learning-history__status.is-correct { color: #176b43; }
.mm-learning-history__status.is-wrong { color: #a13027; }

.mm-learning-link {
  color: #2457a6 !important;
  font-size: 0.8rem;
  font-weight: 650;
}

.mm-learning-empty {
  color: #747e89;
  font-size: 0.86rem;
}

/* Glossary */
.mm-glossary header label {
  width: min(330px, 100%);
}

.mm-glossary header input {
  width: 100%;
  min-height: 42px;
}

.mm-glossary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid #cfd5dc;
  border-inline-start: 1px solid #cfd5dc;
  background: #fff;
}

.mm-glossary-entry {
  min-height: 150px;
  border-inline-end: 1px solid #cfd5dc;
  border-block-end: 1px solid #cfd5dc;
  padding: 20px;
}

.mm-glossary-entry > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mm-glossary-entry strong {
  color: #17212b;
  font-size: 1.02rem;
}

.mm-glossary-entry span {
  color: #6c7681;
  font-size: 0.72rem;
}

.mm-glossary-entry p {
  margin: 12px 0;
  color: #394550;
  font-size: 0.88rem;
  line-height: 1.65;
}

.mm-glossary-entry small {
  color: #7a838d;
  font-size: 0.74rem;
}

/* Trust and policy pages: light treatment */
.mm-trust,
.mm-policy {
  color: #18212b;
}

.mm-trust section,
.mm-policy,
.mm-trust-document,
.mm-trust-pricing article {
  border-color: #d7dce2 !important;
  background: #fff !important;
  color: #18212b !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .mm-studio-workspace {
    grid-template-columns: 220px minmax(420px, 1fr);
  }

  .mm-studio-sidebar--right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__inner {
    width: calc(100% - 20px);
    min-height: 54px;
    gap: 8px;
  }

  body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__brand {
    font-size: 1rem;
  }

  body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__primary {
    display: none;
  }

  body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__language {
    padding-inline: 7px;
  }

  body.mm-page:not([data-mm-app="admin"]) .mm-sitebar__current {
    display: block;
    font-size: 0.86rem;
  }

  .mm-home {
    width: calc(100% - 24px);
    min-height: calc(100vh - 124px);
    padding: 24px 0;
  }

  .mm-tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-tool-card {
    min-height: 132px;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 16px;
    padding: 20px;
  }

  .mm-tool-card__icon {
    width: 44px;
    height: 44px;
  }

  .mm-tool-card__icon svg {
    width: 40px;
    height: 40px;
  }

  .mm-tool-card__copy strong {
    font-size: 1.18rem;
  }

  .mm-tool-card__copy small {
    font-size: 0.82rem;
  }

  .mm-site-footer__inner {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .mm-trainer-page,
  .mm-trainer-page--spectrum,
  .mm-trainer-page--arrow {
    width: calc(100% - 16px);
    padding: 16px 0 40px;
  }

  .mm-trainer-toolbar {
    align-items: flex-start;
  }

  .mm-trainer-toolbar > div {
    display: grid;
    gap: 3px;
  }

  .mm-iupac-structure {
    min-height: 240px;
    padding: 14px;
  }

  .mm-iupac-answer-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 15px;
  }

  .mm-iupac-answer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-iupac-answer-actions button:last-child:not([hidden]) {
    grid-column: 1 / -1;
  }

  .mm-iupac-filter-grid,
  .mm-spectrum-options,
  .mm-spectrum-guided-options,
  .mm-arrow-select-grid,
  .mm-records-grid,
  .mm-glossary-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-spectrum-drill,
  .mm-spectrum-analysis,
  .mm-spectrum-course-player,
  .mm-spectrum-course-selector,
  .mm-arrow-practice,
  .mm-arrow-course-view {
    padding: 15px;
  }

  .mm-spectrum-hero {
    justify-content: stretch;
  }

  .mm-spectrum-mode {
    width: 100%;
  }

  .mm-spectrum-mode button {
    flex: 1;
  }

  .mm-arrow-problem-heading {
    display: grid;
  }

  .mm-arrow-canvas {
    min-height: 270px;
  }

  .mm-records,
  .mm-glossary {
    width: calc(100% - 24px);
    padding: 30px 0 48px;
  }

  .mm-records > header,
  .mm-glossary > header {
    display: grid;
    align-items: start;
  }

  .mm-learning-history li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mm-learning-history time {
    grid-column: 2;
  }

  .mm-studio-app {
    padding: 8px;
  }

  .mm-studio-hero {
    justify-content: stretch;
  }

  .mm-studio-hero-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-block-end: 4px;
  }

  .mm-studio-hero-actions button {
    flex: 0 0 auto;
  }

  .mm-studio-workspace {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .mm-studio-sidebar--left,
  .mm-studio-sidebar--right,
  .mm-studio-center {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-tool-card,
  body.mm-page:not([data-mm-app="admin"]) button {
    transition: none;
  }
}

/* Account/cloud sync remains disabled in the redesigned public UI. */
.mm-studio-fragment-sync,
.mm-studio-fragment-cloud-details,
.mm-studio-fragment-cloud-usage,
.mm-studio-fragment-devices,
.mm-studio-fragment-conflicts { display: none !important; }

/* Final light-surface corrections for legacy app-specific selectors. */
body[data-mm-app="iupac"] .mm-iupac-app,
body[data-mm-app="spectrum"] .mm-spectrum-app,
body[data-mm-app="arrow"] .mm-arrow-app,
body[data-mm-app="studio"] .mm-studio-app {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #18212b !important;
}

body[data-mm-app="iupac"] .mm-iupac-app {
  padding: 0 !important;
}

body[data-mm-app="iupac"] .mm-iupac-question-card,
body[data-mm-app="spectrum"] .mm-spectrum-card,
body[data-mm-app="spectrum"] .mm-spectrum-drill,
body[data-mm-app="spectrum"] .mm-spectrum-case,
body[data-mm-app="arrow"] .mm-arrow-canvas-panel,
body[data-mm-app="arrow"] .mm-arrow-controls,
body[data-mm-app="arrow"] .mm-arrow-analysis,
body[data-mm-app="studio"] .mm-studio-sidebar,
body[data-mm-app="studio"] .mm-studio-center {
  border-color: #cbd2da !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #18212b !important;
}

body[data-mm-app="iupac"] .mm-iupac-question-card {
  border: 1px solid #cbd2da !important;
}

body[data-mm-app="iupac"] :is(.mm-iupac-prompt, .mm-iupac-answer-form, .mm-iupac-feedback),
body[data-mm-app="spectrum"] :is(.mm-spectrum-status, .mm-spectrum-mode-switch, .mm-spectrum-drill, .mm-spectrum-case),
body[data-mm-app="arrow"] :is(.mm-arrow-status, .mm-arrow-practice, .mm-arrow-practice-toolbar, .mm-arrow-problem-heading, .mm-arrow-practice-options),
body[data-mm-app="studio"] :is(.mm-studio-hero, .mm-studio-commandbar, .mm-studio-guidance, .mm-studio-workspace, .mm-studio-toolbar, .mm-studio-pagebar) {
  color: #18212b !important;
}

body[data-mm-app="spectrum"] [data-mm-spectrum-course-back],
body[data-mm-app="spectrum"] [data-mm-spectrum-course],
body[data-mm-app="spectrum"] [data-mm-spectrum-section="course"] {
  display: none !important;
}

body[data-mm-app="arrow"] .mm-arrow-canvas-panel,
body[data-mm-app="arrow"] .mm-arrow-controls {
  padding: 18px !important;
}

body[data-mm-app="arrow"] .mm-arrow-canvas {
  border: 1px solid #d5dae0 !important;
  background: #fff !important;
}

body[data-mm-app="arrow"] .mm-arrow-controls label,
body[data-mm-app="arrow"] .mm-arrow-controls h3,
body[data-mm-app="arrow"] .mm-arrow-panel-heading,
body[data-mm-app="arrow"] .mm-arrow-panel-heading h3 {
  color: #35414d !important;
}

body[data-mm-app="studio"] {
  background: #eef1f4 !important;
}

body[data-mm-app="studio"] .mm-studio-app {
  padding: 12px !important;
}

body[data-mm-app="studio"] .mm-studio-workspace {
  background: transparent !important;
}

body[data-mm-app="studio"] .mm-studio-center,
body[data-mm-app="studio"] .mm-studio-canvas-shell,
body[data-mm-app="studio"] .mm-studio-canvas {
  background: #fff !important;
}

body[data-mm-app="studio"] .mm-studio-sidebar {
  color: #25313d !important;
}

body[data-mm-app="studio"] .mm-studio-selection-inspector {
  border-color: #d5dae0 !important;
  background: #f7f8fa !important;
  color: #25313d !important;
}

@media (max-width: 720px) {
  body[data-mm-app="studio"] .mm-studio-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body[data-mm-app="studio"] .mm-studio-hero-actions button {
    width: 100%;
  }

  body[data-mm-app="studio"] .mm-studio-sidebar details:not([open]) > :not(summary) {
    display: none !important;
  }
}


/* 2026-07-30: IUPAC two-mode layout and direct curved-arrow interaction */
body[data-mm-app="iupac"] .mm-trainer-page {
  width: min(1120px, calc(100% - 32px));
}

.mm-iupac-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 16px;
  margin-bottom: 18px;
}

.mm-iupac-filter-panel,
body[data-mm-app="iupac"] .mm-iupac-learning-style {
  margin: 0;
  border: 1px solid #cbd2da;
  border-radius: 10px;
  background: #fff;
  padding: 18px;
  box-shadow: none;
}

.mm-iupac-setup-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 14px;
}

.mm-iupac-setup-heading h2,
body[data-mm-app="iupac"] .mm-iupac-learning-style__heading h2 {
  margin: 0;
  color: #17212b;
  font-size: 1rem;
}

.mm-iupac-setup-heading p,
body[data-mm-app="iupac"] .mm-iupac-learning-style__heading p {
  margin: 4px 0 0;
  color: #6d7782;
  font-size: 0.78rem;
}

.mm-iupac-filter-panel fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.mm-iupac-filter-panel legend {
  margin-bottom: 8px;
  color: #505b66;
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-mm-app="iupac"] .mm-iupac-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body[data-mm-app="iupac"] .mm-iupac-filter-option {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  border: 1px solid #d6dbe1;
  border-radius: 7px;
  background: #fafbfc;
  padding: 8px 10px;
  color: #2d3944;
  font-size: 0.78rem;
  cursor: pointer;
}

body[data-mm-app="iupac"] .mm-iupac-filter-option:has(input:checked) {
  border-color: #7e98c7;
  background: #f0f4fa;
}

.mm-iupac-filter-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.mm-iupac-filter-footer label {
  display: grid;
  gap: 5px;
  color: #505b66;
  font-size: 0.75rem;
}

.mm-iupac-filter-footer select,
.mm-iupac-filter-footer button {
  min-height: 40px;
  border: 1px solid #cbd2da;
  border-radius: 7px;
  background: #fff;
  color: #17212b;
  padding: 8px 11px;
}

.mm-iupac-filter-footer button {
  border-color: #315f9f;
  background: #315f9f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

body[data-mm-app="iupac"] .mm-iupac-learning-style__heading {
  display: block;
  margin-bottom: 12px;
}

body[data-mm-app="iupac"] .mm-iupac-learning-style__heading > div > span {
  display: none;
}

.mm-iupac-style-grid--two {
  grid-template-columns: 1fr;
}

body[data-mm-app="iupac"] .mm-iupac-style-card {
  min-height: 84px;
  border-radius: 8px;
  background: #fafbfc;
}

body[data-mm-app="iupac"] .mm-iupac-style-card[aria-pressed="true"] {
  border-color: #315f9f;
  background: #eef3f9;
  box-shadow: inset 3px 0 0 #315f9f;
}

.mm-iupac-flow-label {
  color: #68737e;
  font-size: 0.76rem;
}

body[data-mm-app="iupac"] .mm-iupac-structure {
  background: #fff !important;
}

body[data-mm-app="iupac"] .mm-iupac-answer-form input {
  background: #fff;
  color: #17212b;
}

body[data-mm-app="arrow"] .mm-arrow-workspace {
  grid-template-columns: minmax(0, 1fr) 250px;
}

.mm-arrow-direct-help {
  border: 1px solid #d4dae1;
  border-radius: 8px;
  background: #f7f9fb;
  padding: 13px 14px;
  color: #33404c;
}

.mm-arrow-direct-help strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.mm-arrow-direct-help ol {
  margin: 0;
  padding-inline-start: 1.35rem;
  color: #64707c;
  font-size: 0.78rem;
  line-height: 1.65;
}

body[data-mm-app="arrow"] .mm-arrow-hotspot-shape {
  fill: rgba(49, 95, 159, 0.025);
  stroke: rgba(49, 95, 159, 0.16);
  stroke-width: 2;
}

body[data-mm-app="arrow"] .mm-arrow-hotspot:hover .mm-arrow-hotspot-shape,
body[data-mm-app="arrow"] .mm-arrow-hotspot:focus-visible .mm-arrow-hotspot-shape {
  fill: rgba(49, 95, 159, 0.09);
  stroke: #315f9f;
}

body[data-mm-app="arrow"] .mm-arrow-hotspot.is-source .mm-arrow-hotspot-shape {
  fill: rgba(29, 122, 93, 0.13);
  stroke: #1d7a5d;
}

body[data-mm-app="arrow"] .mm-arrow-electron-path {
  stroke: #b86b00;
  filter: none;
}

body[data-mm-app="arrow"] .mm-arrow-head {
  fill: #b86b00;
}

@media (max-width: 820px) {
  .mm-iupac-setup {
    grid-template-columns: 1fr;
  }

  body[data-mm-app="iupac"] .mm-iupac-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-mm-app="arrow"] .mm-arrow-workspace {
    grid-template-columns: 1fr;
  }

  body[data-mm-app="arrow"] .mm-arrow-controls {
    position: static;
  }
}

@media (max-width: 480px) {
  body[data-mm-app="iupac"] .mm-iupac-filter-grid {
    grid-template-columns: 1fr;
  }

  .mm-iupac-filter-footer {
    align-items: stretch;
    flex-direction: column;
  }
}


/* IUPAC mode selector: restrained academic treatment */
body[data-mm-app="iupac"] .mm-iupac-style-card {
  background: #fafbfc !important;
  color: #17212b !important;
  border-color: #d6dbe1 !important;
}
body[data-mm-app="iupac"] .mm-iupac-style-card strong {
  color: #17212b !important;
}
body[data-mm-app="iupac"] .mm-iupac-style-card span {
  color: #65707b !important;
}
body[data-mm-app="iupac"] .mm-iupac-style-card[aria-pressed="true"] {
  background: #eef3f9 !important;
  color: #17212b !important;
  border-color: #315f9f !important;
  box-shadow: inset 3px 0 0 #315f9f !important;
}


/* User-selected IUPAC modes and direct curved-arrow interaction */
body[data-mm-app="iupac"] .mm-iupac-style-grid--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
body[data-mm-app="iupac"] .mm-iupac-style-card {
  text-align: left;
  cursor: pointer;
}
body[data-mm-app="iupac"] .mm-iupac-style-card strong {
  font-size: 0.94rem;
}
body[data-mm-app="arrow"] .mm-arrow-electron-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
  stroke-width: 4.5;
}
body[data-mm-app="arrow"] .mm-arrow-hotspot {
  cursor: crosshair;
}
body[data-mm-app="arrow"] .mm-arrow-hotspot.is-source .mm-arrow-hotspot-shape {
  stroke-width: 3;
}
body[data-mm-app="arrow"] .mm-arrow-hotspot.is-source::after {
  content: none;
}
.mm-reset-main{max-width:40rem;margin:6rem auto;padding:1.5rem}