:root {
      --color-paper: oklch(98.5% 0.004 248);
      --color-paper-2: oklch(96.3% 0.007 248);
      --color-surface: oklch(99.6% 0.002 248);
      --color-rule: oklch(89% 0.010 248);
      --color-rule-soft: oklch(93% 0.008 248);
      --color-neutral: oklch(58% 0.020 250);
      --color-muted: oklch(46% 0.025 252);
      --color-ink: oklch(27% 0.030 255);
      --color-accent: oklch(52% 0.15 245);
      --color-accent-strong: oklch(46% 0.17 247);
      --color-accent-soft: oklch(94% 0.02 245);

      --badge-quwwah: oklch(50% 0.22 25);
      --badge-daif: oklch(50% 0.18 145);
      --badge-mutawassit: oklch(55% 0.18 75);

      --chip-def-bg: oklch(91% 0.045 245); --chip-def-ink: oklch(42% 0.16 245);
      --chip-matan-bg: oklch(91% 0.045 300); --chip-matan-ink: oklch(45% 0.16 300);
      --chip-letters-bg: oklch(91% 0.045 190); --chip-letters-ink: oklch(42% 0.12 190);
      --chip-power-bg: oklch(91% 0.06 75); --chip-power-ink: oklch(42% 0.15 75);
      --chip-tip-bg: oklch(91% 0.05 25); --chip-tip-ink: oklch(46% 0.17 25);

      --font-display: "Space Grotesk", system-ui, sans-serif;
      --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
      --font-mono: "Space Mono", ui-monospace, monospace;
      --radius-card: 14px;
      --radius-pill: 100px;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-paper: oklch(19% 0.02 255);
        --color-paper-2: oklch(22% 0.022 255);
        --color-surface: oklch(24% 0.024 255);
        --color-rule: oklch(35% 0.02 255);
        --color-rule-soft: oklch(30% 0.02 255);
        --color-neutral: oklch(64% 0.02 252);
        --color-muted: oklch(74% 0.022 250);
        --color-ink: oklch(94% 0.01 250);
        --color-accent: oklch(74% 0.13 245);
        --color-accent-strong: oklch(80% 0.12 245);
        --color-accent-soft: oklch(28% 0.04 248);

        --badge-quwwah: oklch(75% 0.20 25);
        --badge-daif: oklch(75% 0.16 145);
        --badge-mutawassit: oklch(78% 0.16 75);

        --chip-def-bg: oklch(32% 0.06 245); --chip-def-ink: oklch(82% 0.10 245);
        --chip-matan-bg: oklch(32% 0.06 300); --chip-matan-ink: oklch(82% 0.10 300);
        --chip-letters-bg: oklch(32% 0.05 190); --chip-letters-ink: oklch(82% 0.08 190);
        --chip-power-bg: oklch(32% 0.06 75); --chip-power-ink: oklch(82% 0.09 75);
        --chip-tip-bg: oklch(32% 0.06 25); --chip-tip-ink: oklch(82% 0.10 25);
      }
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: var(--font-body);
      color: var(--color-ink);
      background-color: var(--color-paper);
      font-size: 1rem;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      display: flex;
      flex-direction: column;
      min-height: 100vh
    }

    /* Baris judul topik & tab topik, di dalam quickbar Kontrol & DNA Huruf */
    .mm-top-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .mm-title-group h1 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .mm-title-group p {
      font-size: 0.85rem;
      color: var(--color-muted);
    }

    .mm-tabs {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      overflow-x: auto;
      padding-bottom: 0.25rem;
      min-width: 0;
    }

    .mm-tab-btn {
      padding: 0.4rem 0.9rem;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-rule);
      background: var(--color-paper);
      color: var(--color-muted);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .mm-tab-btn:hover,
    .mm-tab-btn.is-active {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
    }

    .mm-controls {
      max-width: 1400px;
      margin: 1rem auto 0;
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .mm-mode-group,
    .mm-action-group {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .mm-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.85rem;
      border-radius: 8px;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      color: var(--color-ink);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .mm-btn:hover {
      background: var(--color-paper-2);
      border-color: var(--color-neutral);
    }

    .mm-btn.is-active {
      background: var(--color-accent-soft);
      border-color: var(--color-accent);
      color: var(--color-accent-strong);
    }

    .mm-search {
      position: relative;
      min-width: 260px;
    }

    .mm-search input {
      width: 100%;
      padding: 0.45rem 0.85rem 0.45rem 2.2rem;
      border-radius: 8px;
      border: 1px solid var(--color-rule);
      background: var(--color-paper);
      color: var(--color-ink);
      font-size: 0.85rem;
    }

    .mm-search svg {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-muted);
      pointer-events: none;
    }

    /* Quickbar: kontrol mode/aksi + strip DNA huruf, di luar hamburger drawer tapi
       tetap bisa dibuka/tutup sendiri (independen) supaya kanvas bisa dimaksimalkan. */
    .mm-quickbar {
      flex-shrink: 0;
      background: var(--color-surface);
    }
    .mm-quickbar-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 1.5rem;
      background: var(--color-paper-2);
      border: none;
      border-bottom: 1px solid var(--color-rule);
      cursor: pointer;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--color-muted);
      transition: color 0.15s ease;
    }
    .mm-quickbar-toggle:hover {
      color: var(--color-accent-strong);
    }
    .mm-quickbar-label {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      text-align: left;
      flex-wrap: wrap;
    }
    .mm-quickbar-label-title {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .mm-quickbar-label-desc {
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0;
      color: var(--color-muted);
      opacity: 0.75;
      line-height: 1.3;
    }
    .mm-quickbar-label-title::after {
      content: '·';
      margin-left: 0.5rem;
      opacity: 0.4;
    }
    .mm-quickbar-toggle:hover .mm-quickbar-label-desc {
      opacity: 1;
    }
    .mm-quickbar-chevron {
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .mm-quickbar.is-collapsed .mm-quickbar-chevron {
      transform: rotate(-90deg);
    }
    .mm-quickbar-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.3rem;
      height: 1.3rem;
      border-radius: 999px;
      background: rgba(230, 57, 70, 0.14);
      flex-shrink: 0;
    }
    .mm-quickbar-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: #e63946;
      flex-shrink: 0;
      animation: mm-quickbar-dot-blink 1.3s ease-in-out infinite;
    }
    @keyframes mm-quickbar-dot-blink {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
      50% { opacity: 0.3; box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
    }
    .mm-quickbar.is-collapsed .mm-quickbar-body {
      display: none;
    }
    .mm-quickbar-body {
      padding: 1rem 1.5rem 0;
    }
    .mm-quickbar-body .dna-bar-wrapper {
      margin: 1rem -1.5rem 0;
    }

    /* 28 Latin Hijaiyah Letter Strip */
    .dna-bar-wrapper {
      background: var(--color-paper-2);
      border-bottom: 1px solid var(--color-rule);
      padding: 0.75rem 1.5rem;
      flex-shrink: 0;
    }

    .dna-bar-container {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .dna-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
    }

    .dna-title {
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--color-accent-strong);
    }

    .dna-letters {
      display: flex;
      gap: 0.35rem;
      flex-wrap: wrap;
    }

    .dna-letter-btn {
      padding: 0.35rem 0.6rem;
      border-radius: 8px;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-ink);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .dna-letter-btn:hover {
      background: var(--color-accent-soft);
      border-color: var(--color-accent);
    }

    .dna-letter-btn.is-active {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 102, 179, 0.3);
    }

    .dna-ar {
      font-family: var(--font-arabic, 'Amiri', 'Scheherazade New', serif);
      font-size: 1.15rem;
      font-weight: 700;
      margin-right: 0.3rem;
      line-height: 1;
      display: inline-block;
      vertical-align: middle;
    }

    .dna-letter-btn.is-active .dna-ar {
      opacity: 1;
    }

    .dna-result-box {
      display: none;
      background: var(--color-surface);
      border: 1px solid var(--color-accent);
      border-radius: 10px;
      padding: 0.6rem 1rem;
      font-size: 0.85rem;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .dna-result-box.is-visible {
      display: flex;
    }

    .dna-reset-btn {
      padding: 0.3rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--color-rule);
      background: var(--color-paper-2);
      color: var(--color-muted);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .dna-reset-btn:hover {
      background: var(--badge-daif);
      color: #fff;
      border-color: var(--badge-daif);
    }

    /* Canvas Area & Pure CSS Horizontal Mind Map Tree -- transform-based pan/zoom
   (drag area kosong / 1 jari = geser, Ctrl+scroll / cubit 2 jari / tombol = zoom) */
    .mm-viewport {
      padding: 3rem 2rem 5rem;
      overflow: hidden;
      flex: 1;
      min-height: 0;
      position: relative;
      cursor: grab;
    }

    .mm-viewport.is-panning {
      cursor: grabbing;
    }

    .mm-viewport:fullscreen {
      background: var(--color-paper);
      min-height: 100vh;
    }

    .mm-mindmap-tree {
      display: flex;
      align-items: center;
      gap: 3.5rem;
      min-width: 1250px;
      max-width: 1600px;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 0 0;
      transition: transform 0.18s ease-out;
      will-change: transform;
    }

    .mm-mindmap-tree.is-dragging {
      transition: none;
    }

    /* Kontrol zoom mengambang, pojok kiri-bawah kanvas (kanan-bawah dipakai FAB
   akun/masukan situs -- lihat .rqm-fab di huruf.js, jadi ditumpuk di kiri saja
   bareng tombol bantuan pintasan supaya tak pernah tabrakan). */
    .mm-zoom-controls {
      position: absolute;
      left: 1rem;
      bottom: 3.7rem;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--color-surface);
      border: 1px solid var(--color-rule);
      border-radius: 999px;
      padding: 0.3rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .mm-zoom-btn,
    .mm-zoom-reset {
      border: none;
      background: transparent;
      color: var(--color-ink);
      cursor: pointer;
      border-radius: 999px;
      font-weight: 700;
      transition: background 0.15s ease;
    }

    .mm-zoom-btn {
      width: 2em;
      height: 2em;
      font-size: 1.15rem;
      line-height: 1;
    }

    .mm-zoom-reset {
      padding: 0 0.7em;
      height: 2em;
      font-size: 0.78rem;
      font-family: var(--font-mono, monospace);
      min-width: 3.4em;
    }

    .mm-zoom-btn:hover,
    .mm-zoom-reset:hover {
      background: var(--color-paper-2);
    }

    /* Tombol & panel bantuan pintasan keyboard, pojok kiri-bawah kanvas */
    .mm-shortcuts-btn {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      z-index: 20;
      width: 2.2em;
      height: 2.2em;
      border-radius: 50%;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      color: var(--color-muted);
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .mm-shortcuts-btn:hover {
      background: var(--color-paper-2);
      color: var(--color-ink);
    }

    .mm-shortcuts-panel {
      position: absolute;
      left: 1rem;
      bottom: 6.6rem;
      z-index: 20;
      background: var(--color-surface);
      border: 1px solid var(--color-rule);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
      font-size: 0.82rem;
      max-width: 260px;
    }

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

    .mm-shortcuts-panel strong {
      display: block;
      margin-bottom: 0.5rem;
      font-family: var(--font-display);
    }

    .mm-shortcuts-panel ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      color: var(--color-muted);
    }

    .mm-shortcuts-panel kbd {
      display: inline-block;
      padding: 0.05em 0.45em;
      border-radius: 5px;
      border: 1px solid var(--color-rule);
      background: var(--color-paper-2);
      color: var(--color-ink);
      font-family: var(--font-mono, monospace);
      font-size: 0.85em;
    }

    /* Center Root Node (Centered Vertically Anchor) */
    .mm-root-box {
      flex-shrink: 0;
      position: relative;
      z-index: 5;
      align-self: center;
    }

    .mm-root-box::after {
      content: '';
      position: absolute;
      right: -3.5rem;
      top: 50%;
      width: 3.5rem;
      height: 4px;
      background: var(--color-accent);
      transform: translateY(-50%);
      z-index: 1;
    }

    .mm-root-card {
      background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
      color: #fff;
      padding: 1.5rem 1.8rem;
      border-radius: 20px;
      box-shadow: 0 12px 36px rgba(0, 102, 179, 0.3);
      text-align: center;
      border: 2px solid rgba(255, 255, 255, 0.25);
      width: 230px;
      cursor: pointer;
      user-select: none;
      transition: transform 0.2s ease;
    }

    .mm-root-card:hover {
      transform: scale(1.02);
    }

    .mm-root-card h2 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
    }

    .mm-root-card p {
      font-size: 0.78rem;
      opacity: 0.9;
      margin-top: 0.3rem;
    }

    .mm-root-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
      font-size: 0.75rem;
      font-weight: 700;
      color: #fff;
      transition: transform 0.2s ease;
    }

    /* Connecting Line from Root to Primary Branches -- batang tunggal (.mm-fork-spine,
   disisipkan & diposisikan oleh JS) yang menembus TITIK TENGAH tiap cabang persis
   (bukan cuma tinggi kotaknya), supaya akurat walau tinggi tiap cabang jauh beda
   saat sebagian dibuka/ditutup -- lihat layoutForkSpines() di script bawah. */
    .mm-branches-wrapper {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      flex: 1;
      position: relative;
      padding-left: 2.5rem;
    }

    .mm-branches-wrapper>.mm-fork-spine {
      width: 4px;
      background: var(--color-accent);
      border-radius: 2px;
    }

    .mm-fork-spine {
      position: absolute;
      left: 0;
      pointer-events: none;
    }

    /* Collapsible level states */
    .mm-mindmap-tree.is-collapsed .mm-branches-wrapper {
      display: none !important;
    }

    .mm-mindmap-tree.is-collapsed .mm-root-toggle {
      transform: rotate(-90deg);
    }

    /* Primary Branch Item -- header (kiri) disejajarkan tengah terhadap tinggi total
   anak-anaknya (kanan), seperti garpu: satu tick horizontal dari batang vertikal
   ke titik tengah header, bukan nempel ke atas. */
    .mm-branch-node {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2.5rem;
      position: relative;
      width: fit-content;
      max-width: 100%;
    }

    .mm-branch-node::before {
      content: '';
      position: absolute;
      left: -2.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2.5rem;
      height: 3px;
      background: var(--color-accent);
    }

    .mm-branch-node.is-collapsed .mm-subbranch-container {
      display: none !important;
    }

    .mm-branch-node.is-collapsed .mm-branch-toggle {
      transform: rotate(-90deg);
    }

    /* Primary Branch Card Header (Fit Content - No Mentok Kanan) */
    .mm-branch-header {
      background: var(--color-accent-soft);
      border: 1px solid var(--color-accent);
      border-radius: 14px;
      padding: 0.75rem 1.25rem;
      display: inline-flex;
      align-items: center;
      gap: 1.5rem;
      width: fit-content;
      max-width: 100%;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
      cursor: pointer;
      user-select: none;
    }

    .mm-branch-header h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--color-accent-strong);
      white-space: nowrap;
    }

    .mm-branch-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-paper-2);
      border: 1px solid var(--color-rule);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-accent-strong);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .mm-branch-header span {
      font-size: 0.78rem;
      color: var(--color-muted);
      font-weight: 600;
      white-space: nowrap;
    }

    /* Secondary Sub-Branches List -- batang putus-putus tunggal (bukan segmen
   per-kartu) supaya tick tiap kartu bisa disejajarkan tengah (lihat .mm-subbranch-card)
   tanpa perlu tahu tinggi kartu tetangga. */
    .mm-subbranch-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
      padding-left: 2rem;
      position: relative;
      margin-left: 0.5rem;
    }

    .mm-subbranch-container>.mm-fork-spine {
      width: 2px;
      background: repeating-linear-gradient(to bottom,
          var(--color-accent) 0,
          var(--color-accent) 5px,
          transparent 5px,
          transparent 9px);
    }

    /* Kartu cabang (grup mis. 1A/1B, maupun topik daun mis. "Hembusan Nafas"): judul
   di kiri disejajarkan TENGAH terhadap kontennya di kanan -- pola garpu yang sama
   berulang di tiap tingkat, bukan judul menempel di atas konten. */
    .mm-subbranch-card {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1.25rem;
      position: relative;
      transition: all 0.2s ease;
      width: fit-content;
      max-width: 100%;
    }

    .mm-subbranch-card::before {
      content: '';
      position: absolute;
      left: -2rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2rem;
      height: 2px;
      background: var(--color-accent);
    }

    .mm-subbranch-card.is-collapsed .mm-subbranch-body {
      display: none !important;
    }

    .mm-subbranch-card>.mm-subbranch-title-row {
      flex-shrink: 0;
    }

    .mm-subbranch-title-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.6rem;
      cursor: pointer;
      user-select: none;
    }

    .mm-subbranch-title-row h4 {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--color-ink);
      white-space: nowrap;
    }

    .mm-subbranch-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-paper-2);
      border: 1px solid var(--color-rule);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-accent-strong);
      transition: transform 0.2s ease;
    }

    /* Distinct Color Themes per Branch -- tiap tema mewarnai header, kartu, DAN garis
   penghubung dari root/parent (bukan cuma border kartu) supaya sejak dari akar,
   jalur tiap cabang langsung terlihat beda tanpa perlu baca teks dulu. */

    /* Theme Indigo: Sifat Lazimah (hub gabungan 1A & 1B) */
    .mm-branch-node[data-theme="indigo"] .mm-branch-header {
      background: oklch(95% 0.035 290);
      border-color: oklch(78% 0.12 290);
    }

    .mm-branch-node[data-theme="indigo"] .mm-branch-header h3 {
      color: oklch(45% 0.19 290);
    }

    .mm-branch-node[data-theme="indigo"]::before {
      background: oklch(52% 0.17 290);
    }

    /* Theme 1: Blue (Memiliki Lawan) */
    .mm-subbranch-card[data-theme="blue"] h4 {
      color: oklch(45% 0.18 245);
    }

    .mm-subbranch-card[data-theme="blue"]::before {
      background: oklch(52% 0.16 245);
    }

    .mm-subbranch-card[data-theme="blue"] .mm-subbranch-toggle {
      border-color: oklch(74% 0.11 245);
      color: oklch(45% 0.18 245);
    }

    .mm-subbranch-card.is-group[data-theme="blue"]>.mm-subbranch-title-row {
      background: oklch(94% 0.03 245);
      border-color: oklch(74% 0.11 245);
    }

    /* Theme 2: Emerald Green (Tidak Memiliki Lawan) */
    .mm-subbranch-card[data-theme="green"] h4 {
      color: oklch(42% 0.18 155);
    }

    .mm-subbranch-card[data-theme="green"]::before {
      background: oklch(52% 0.16 155);
    }

    .mm-subbranch-card[data-theme="green"] .mm-subbranch-toggle {
      border-color: oklch(74% 0.13 155);
      color: oklch(42% 0.18 155);
    }

    .mm-subbranch-card.is-group[data-theme="green"]>.mm-subbranch-title-row {
      background: oklch(94% 0.03 155);
      border-color: oklch(74% 0.13 155);
    }

    /* Theme 3: Warm Amber ('Aridhah) */
    .mm-branch-node[data-theme="amber"] .mm-branch-header {
      background: oklch(96% 0.03 65);
      border-color: oklch(80% 0.12 65);
    }

    .mm-branch-node[data-theme="amber"] .mm-branch-header h3 {
      color: oklch(45% 0.18 65);
    }

    .mm-branch-node[data-theme="amber"]::before {
      background: oklch(55% 0.17 65);
    }

    .mm-subbranch-card[data-theme="amber"] h4 {
      color: oklch(45% 0.18 65);
    }

    .mm-subbranch-card[data-theme="amber"]::before {
      background: oklch(55% 0.17 65);
    }

    .mm-subbranch-card[data-theme="amber"] .mm-subbranch-toggle {
      border-color: oklch(80% 0.12 65);
      color: oklch(45% 0.18 65);
    }

    /* Kartu grup tingkat-2 (mis. 1A/1B) -- judulnya jadi chip pil berisi (fill lembut). */
    .mm-subbranch-card.is-group::before {
      width: 2rem;
    }

    .mm-subbranch-card.is-group>.mm-subbranch-title-row {
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--color-rule);
      background: var(--color-paper-2);
    }

    .mm-subbranch-card.is-group .mm-subbranch-title-row h4 {
      font-size: 0.92rem;
    }

    /* Kartu topik/leaf (mis. "Hembusan Nafas") -- judulnya TETAP jadi chip, tapi
   versi outline (garis warna tema, tanpa fill) supaya beda dari chip grup di
   atas namun tak balik jadi blok warna besar. */
    .mm-subbranch-card:not(.is-group)>.mm-subbranch-title-row {
      padding: 0.4rem 0.85rem;
      border-radius: 999px;
      border: 1.5px solid var(--color-rule);
      background: transparent;
    }

    /* Warna pembeda ANTAR-KARTU TOPIK dalam 1 grup (mis. 5 topik di bawah 1A) --
       tiap kartu dapat warna sendiri (bukan cuma satu warna seragam turunan induk),
       diberikan lewat class leaf-color-N oleh JS (lihat applyLeafColors() di
       script bawah, dihitung per posisi di antara SESAMA kartu topik saja). */
    .mm-subbranch-card.leaf-color-0::before { background: oklch(52% 0.16 245); }
    .mm-subbranch-card.leaf-color-0 h4 { color: oklch(45% 0.18 245); }
    .mm-subbranch-card.leaf-color-0 .mm-subbranch-toggle { border-color: oklch(65% 0.15 245); color: oklch(45% 0.18 245); }
    .mm-subbranch-card.leaf-color-0 > .mm-subbranch-title-row { border-color: oklch(65% 0.15 245); }

    .mm-subbranch-card.leaf-color-1::before { background: oklch(55% 0.14 195); }
    .mm-subbranch-card.leaf-color-1 h4 { color: oklch(42% 0.15 195); }
    .mm-subbranch-card.leaf-color-1 .mm-subbranch-toggle { border-color: oklch(65% 0.13 195); color: oklch(42% 0.15 195); }
    .mm-subbranch-card.leaf-color-1 > .mm-subbranch-title-row { border-color: oklch(65% 0.13 195); }

    .mm-subbranch-card.leaf-color-2::before { background: oklch(50% 0.18 320); }
    .mm-subbranch-card.leaf-color-2 h4 { color: oklch(44% 0.19 320); }
    .mm-subbranch-card.leaf-color-2 .mm-subbranch-toggle { border-color: oklch(68% 0.15 320); color: oklch(44% 0.19 320); }
    .mm-subbranch-card.leaf-color-2 > .mm-subbranch-title-row { border-color: oklch(68% 0.15 320); }

    .mm-subbranch-card.leaf-color-3::before { background: oklch(55% 0.19 25); }
    .mm-subbranch-card.leaf-color-3 h4 { color: oklch(46% 0.20 25); }
    .mm-subbranch-card.leaf-color-3 .mm-subbranch-toggle { border-color: oklch(68% 0.16 25); color: oklch(46% 0.20 25); }
    .mm-subbranch-card.leaf-color-3 > .mm-subbranch-title-row { border-color: oklch(68% 0.16 25); }

    .mm-subbranch-card.leaf-color-4::before { background: oklch(58% 0.15 85); }
    .mm-subbranch-card.leaf-color-4 h4 { color: oklch(45% 0.16 85); }
    .mm-subbranch-card.leaf-color-4 .mm-subbranch-toggle { border-color: oklch(70% 0.13 85); color: oklch(45% 0.16 85); }
    .mm-subbranch-card.leaf-color-4 > .mm-subbranch-title-row { border-color: oklch(70% 0.13 85); }

    .mm-subbranch-card.leaf-color-5::before { background: oklch(52% 0.16 145); }
    .mm-subbranch-card.leaf-color-5 h4 { color: oklch(44% 0.17 145); }
    .mm-subbranch-card.leaf-color-5 .mm-subbranch-toggle { border-color: oklch(66% 0.14 145); color: oklch(44% 0.17 145); }
    .mm-subbranch-card.leaf-color-5 > .mm-subbranch-title-row { border-color: oklch(66% 0.14 145); }

    /* Spotlight / Focus Mode — pedagogical presentation (redupkan cabang lain) */
    .mm-branch-node.is-dimmed,
    .mm-subbranch-card.is-dimmed {
      opacity: 0.32;
      filter: grayscale(0.35);
      transition: opacity 200ms, filter 200ms;
    }

    .mm-branch-node.is-spotlight,
    .mm-subbranch-card.is-spotlight {
      box-shadow: 0 10px 34px -16px oklch(52% 0.16 250 / 0.45), 0 0 0 2px oklch(52% 0.16 250 / 0.35);
    }

    .leaf-pill.is-active-sifat {
      border-color: var(--color-accent) !important;
      background: var(--color-accent-soft) !important;
      box-shadow: 0 0 0 2px oklch(52% 0.16 250 / 0.25), 0 6px 18px -8px oklch(52% 0.16 250 / 0.35);
      transform: scale(1.02);
    }

    .mm-audio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.45em;
      height: 1.45em;
      border-radius: 50%;
      border: 1px solid var(--color-rule);
      background: var(--color-paper);
      color: var(--color-accent);
      cursor: pointer;
      margin-inline-start: 0.2em;
      transition: all 150ms ease;
      flex-shrink: 0;
    }

    .mm-audio-btn:hover {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
    }

    .mm-audio-btn.is-unavailable,
    .mm-audio-btn:disabled {
      cursor: not-allowed;
      opacity: 0.4;
      color: var(--color-muted);
    }
    .mm-audio-btn.is-unavailable:hover,
    .mm-audio-btn:disabled:hover {
      background: var(--color-paper);
      color: var(--color-muted);
      border-color: var(--color-rule);
    }

    .mm-audio-btn svg {
      width: 0.85em;
      height: 0.85em;
      fill: currentColor;
    }

    /* Mobile Screen Responsive Enhancements */
    /* ============================================================
       MOBILE RESPONSIVE — ≤768px (tablet & phone)
       ============================================================ */
    @media (max-width: 768px) {
      /* Canvas */
      .mm-viewport {
        padding: 1rem 0.5rem 3rem;
      }

      /* Mindmap tree — keep 1000px min-width for pan/zoom canvas */
      .mm-mindmap-tree {
        gap: 1.5rem;
        min-width: 900px;
      }

      /* Root card */
      .mm-root-card {
        width: 170px;
        padding: 0.9rem 1rem;
      }
      .mm-root-card h2 {
        font-size: 0.95rem;
        gap: 0.35rem;
      }
      .mm-root-card p {
        font-size: 0.72rem;
      }

      /* Branch headers */
      .mm-branch-header {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
      }
      .mm-branch-header h3 {
        font-size: 0.88rem;
      }
      .mm-branch-header > div {
        font-size: 0.75rem;
      }

      /* Sub-branch */
      .mm-subbranch-title-row {
        padding: 0.5rem 0.75rem;
      }
      .mm-subbranch-title-row h4 {
        font-size: 0.82rem;
      }

      /* Leaf pills — touch-friendly min tap target */
      .leaf-pill {
        padding: 0.55rem 0.8rem;
        font-size: 0.8rem;
        min-height: 36px;
      }

      /* Quickbar — collapse by default on mobile, quick toggle */
      .mm-quickbar-toggle {
        padding: 0.55rem 1rem;
      }
      .mm-quickbar-body {
        padding: 0.75rem 1rem 0;
      }

      /* Controls row — stack on small screen */
      .mm-controls {
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
      .mm-top-row {
        gap: 0.5rem;
      }
      .mm-title-group h1 {
        font-size: 1.1rem;
      }
      .mm-title-group p {
        font-size: 0.75rem;
      }

      /* Tabs — horizontal scroll, smaller */
      .mm-tab-btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.72rem;
      }

      /* Mode & action buttons */
      .mm-mode-group,
      .mm-action-group {
        gap: 0.35rem;
      }
      .mm-btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
        gap: 0.3rem;
      }
      .mm-btn svg {
        width: 13px;
        height: 13px;
      }

      /* Search — full width on mobile */
      .mm-search {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        order: 10;
      }
      .mm-action-group {
        flex-wrap: wrap;
      }

      /* DNA bar — smaller buttons */
      .dna-letter-btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.7rem;
        min-width: 38px;
      }
      .dna-ar {
        font-size: 0.95rem;
      }
      .dna-result-box {
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
        flex-wrap: wrap;
      }

      /* Zoom controls — smaller */
      .mm-zoom-controls {
        bottom: 0.6rem;
        right: 0.6rem;
        left: auto;
        gap: 0.25rem;
        width: fit-content;
        align-self: flex-start;
      }
      .mm-zoom-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
      }
      .mm-zoom-reset {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
      }

      /* Quickbar: tutup otomatis di HP */
      .mm-quickbar:not(.is-collapsed) .mm-quickbar-label-desc {
        display: none;
      }
    }

    /* ============================================================
       SMALL PHONE — ≤480px
       ============================================================ */
    @media (max-width: 480px) {
      .mm-top-row {
        flex-direction: column;
        align-items: stretch;
      }
      .mm-tabs {
        order: -1;
        align-items: center;
      }
      .mm-tab-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.68rem;
      }
      .mm-controls {
        flex-direction: column;
        align-items: stretch;
      }
      .mm-mode-group,
      .mm-action-group {
        width: 100%;
        justify-content: flex-start;
      }
      .mm-btn span {
        display: none; /* icon only on very small screens */
      }
      .mm-btn {
        padding: 0.4rem;
        min-width: 34px;
        justify-content: center;
      }
      /* Kecuali tombol search yang tetap punya label */
      .mm-search input {
        font-size: 0.8rem;
      }
      .dna-letter-btn {
        min-width: 32px;
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
      }
      .dna-ar {
        font-size: 0.85rem;
      }
    }

    .mm-subbranch-body {
      margin-top: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .mm-sub-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--color-accent-strong);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Compact Mind Map Leaf Node Pills */
    .mm-leaf-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .leaf-pill {
      background: var(--color-paper);
      border: 1px solid var(--color-rule);
      border-radius: var(--radius-pill);
      padding: 0.45rem 0.9rem;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;
      font-size: 0.85rem;
    }

    .leaf-pill:hover {
      border-color: var(--color-accent);
      background: var(--color-surface);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .leaf-pill.is-highlighted {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
      box-shadow: 0 0 12px rgba(0, 102, 179, 0.25);
      font-weight: 700;
    }

    .dot-power {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dot-power.quwwah {
      background: var(--badge-quwwah);
    }

    .dot-power.daif {
      background: var(--badge-daif);
    }

    .dot-power.mutawassit {
      background: var(--badge-mutawassit);
    }

    .pill-title {
      font-weight: 700;
      color: var(--color-ink);
    }

    .pill-desc {
      color: var(--color-muted);
      font-size: 0.8rem;
    }

    .pill-info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--color-paper-2);
      color: var(--color-accent-strong);
      font-size: 0.72rem;
      font-weight: 700;
      margin-left: 0.2rem;
      opacity: 0.75;
    }

    .leaf-pill:hover .pill-info-icon {
      background: var(--color-accent);
      color: #fff;
      opacity: 1;
    }

    /* Quiz Mode Blur */
    .is-quiz-mode .mm-answer {
      filter: blur(5px);
      user-select: none;
      transition: filter 0.3s ease;
    }

    .is-quiz-mode .leaf-pill.is-revealed .mm-answer {
      filter: blur(0);
    }

    .quiz-hint-tag {
      display: none;
      font-size: 0.68rem;
      background: var(--color-accent);
      color: #fff;
      padding: 0.1rem 0.35rem;
      border-radius: 4px;
      font-weight: 700;
    }

    .is-quiz-mode .quiz-hint-tag {
      display: inline-block;
    }

    /* Tombol keluar layar penuh mengambang -- muncul cuma saat .mm-viewport aktif :fullscreen */
    .mm-fs-exit-btn {
      display: none;
      position: fixed;
      top: 1rem;
      right: 1rem;
      width: 2.6em;
      height: 2.6em;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      color: var(--color-ink);
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      z-index: 30;
    }

    .mm-fs-exit-btn:hover {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
    }

    .mm-fs-exit-btn.is-visible {
      display: flex;
    }

    /* Slide-out Detail Drawer */
    .mm-drawer-backdrop {
      /* detail drawer di atas nav drawer mind map (289/290) */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(3px);
      z-index: 299;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .mm-drawer-backdrop.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .mm-drawer-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      max-width: 460px;
      height: 100vh;
      background: var(--color-surface);
      border-left: 1px solid var(--color-rule);
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
      z-index: 300;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
    }

    .mm-drawer-backdrop.is-open .mm-drawer-panel {
      transform: translateX(0);
    }

    .drawer-header,
    .mm-detail-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--color-rule);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--color-paper-2);
    }

    .drawer-header h2,
    .mm-detail-header h2 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--color-ink);
    }

    .drawer-header p,
    .mm-detail-header p {
      font-size: 0.78rem;
      color: var(--color-muted);
    }

    .mm-detail-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      color: var(--color-ink);
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .mm-detail-close-btn:hover {
      background: var(--color-accent);
      color: #fff;
      border-color: var(--color-accent);
    }

    .mm-detail-body {
      padding: 1.5rem;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .mm-detail-section {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .mm-detail-section-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .mm-section-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 7px;
      flex-shrink: 0;
    }
    .mm-section-chip svg {
      width: 14px;
      height: 14px;
    }
    .mm-section-chip--def { background: var(--chip-def-bg); color: var(--chip-def-ink); }
    .mm-section-chip--matan { background: var(--chip-matan-bg); color: var(--chip-matan-ink); }
    .mm-section-chip--letters { background: var(--chip-letters-bg); color: var(--chip-letters-ink); }
    .mm-section-chip--power { background: var(--chip-power-bg); color: var(--chip-power-ink); }
    .mm-section-chip--tip { background: var(--chip-tip-bg); color: var(--chip-tip-ink); }

    .mm-detail-card-box {
      background: var(--color-paper);
      border: 1px solid var(--color-rule);
      border-radius: 12px;
      padding: 1rem;
      font-size: 0.88rem;
    }

    .mm-detail-matan-box {
      background: var(--color-paper-2);
      border-left: 3px solid var(--color-accent);
      padding: 0.85rem 1rem;
      border-radius: 8px;
    }
    .mm-detail-matan-arabic {
      font-family: var(--font-arabic, 'Amiri', serif);
      font-size: 1.35rem;
      line-height: 2;
      direction: rtl;
      text-align: center;
      font-weight: 700;
      color: var(--color-accent-strong);
    }
    .mm-detail-matan-translit {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--color-muted);
      text-align: center;
      margin-top: 0.35rem;
    }
    .mm-detail-matan-arabic:empty,
    .mm-detail-matan-translit:empty {
      display: none;
    }

    .mm-detail-letters-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
    }

    .mm-detail-letter-badge {
      padding: 0.25rem 0.55rem;
      border-radius: 6px;
      border: 1px solid var(--color-rule);
      background: var(--color-surface);
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--color-ink);
    }

    .mm-detail-footer {
      padding: 1rem 1.5rem;
      border-top: 1px solid var(--color-rule);
      background: var(--color-paper-2);
    }

    .mm-detail-ref-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.65rem 1rem;
      border-radius: 8px;
      background: var(--color-accent);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.88rem;
      transition: background 0.2s ease;
    }

    .mm-detail-ref-btn:hover {
      background: var(--color-accent-strong);
    }

    /* Print CSS Handout — landscape A4/F4, tajam untuk halaqah */
    @page {
      size: landscape;
      margin: 10mm;
    }

    @media print {

      html,
      body {
        background: #fff !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      .drawer-overlay,
      .drawer,
      .mm-drawer-backdrop,
      .mm-fs-exit-btn,
      .quiz-hint-tag,
      .dna-bar-wrapper,
      .mm-audio-btn {
        display: none !important;
      }

      .mm-viewport {
        padding: 0 !important;
        overflow: visible !important;
        min-height: 0 !important;
      }

      .mm-zoom-controls,
      .mm-shortcuts-btn,
      .mm-shortcuts-panel {
        display: none !important;
      }

      .mm-mindmap-tree {
        display: flex !important;
        position: static !important;
        transform: none !important;
        align-items: flex-start !important;
        gap: 1.2rem !important;
        min-width: 0 !important;
      }

      .mm-root-card {
        box-shadow: none !important;
        border: 2px solid #1e40af !important;
        -webkit-print-color-adjust: exact;
      }

      .mm-branch-header,
      .mm-subbranch-card {
        break-inside: avoid;
        box-shadow: none !important;
      }

      .mm-subbranch-body {
        display: flex !important;
      }

      .mm-branch-node.is-collapsed .mm-subbranch-container,
      .mm-subbranch-card.is-collapsed .mm-subbranch-body {
        display: flex !important;
      }
    }
  
    /* ===== Hue-parametrized theme (data-theme="hue") for Makharijul Huruf ===== */
    .mm-branch-node[data-theme="hue"] .mm-branch-header {
      background: hsl(var(--mm-hue) 50% 94%);
      border-color: hsl(var(--mm-hue) 55% 55%);
    }
    .mm-branch-node[data-theme="hue"] .mm-branch-header h3 {
      color: hsl(var(--mm-hue) 55% 35%);
    }
    .mm-branch-node[data-theme="hue"]::before {
      background: hsl(var(--mm-hue) 55% 55%);
    }
    .mm-subbranch-card[data-theme="hue"] .mm-subbranch-title-row h4 {
      color: hsl(var(--mm-hue) 55% 40%);
    }
    .mm-subbranch-card[data-theme="hue"]::before {
      background: hsl(var(--mm-hue) 55% 55%);
    }
    .mm-subbranch-card[data-theme="hue"] .mm-subbranch-toggle {
      background: hsl(var(--mm-hue) 50% 92%);
      border-color: hsl(var(--mm-hue) 55% 55%);
      color: hsl(var(--mm-hue) 55% 40%);
    }
    .mm-subbranch-card.is-group[data-theme="hue"] > .mm-subbranch-title-row {
      background: hsl(var(--mm-hue) 50% 94%);
    }
    [data-theme="hue"] .dot-power {
      background: hsl(var(--mm-hue, 245) 55% 45%);
    }
    /* ---- Leaf pill Arabic glyph (makhraj only) ---- */
    [data-theme="hue"] .pill-ar {
      font-family: var(--font-arabic, 'Amiri', 'Scheherazade New', serif);
      font-size: 1.2rem;
      font-weight: 700;
      margin-left: auto;
      color: hsl(var(--mm-hue, 245) 55% 40%);
    }