* {
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
    }

    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #060b14;
      color: #f8fafc;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* Subtle Islamic Geometric & Constellation Backdrop */
    .bg-grid-pattern {
      background-color: #060b14;
      background-image: 
        radial-gradient(circle at 50% 45%, rgba(16, 185, 129, 0.11) 0%, rgba(6, 182, 212, 0.05) 35%, transparent 70%),
        linear-gradient(to right, rgba(148, 163, 184, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
      background-size: 100% 100%, 48px 48px, 48px 48px;
    }

    /* Glassmorphism Panels */
    .glass-panel {
      background: rgba(15, 23, 42, 0.78);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    }

    /* SVG Links & Animated Energy Pulses */
    .branch-link {
      fill: none;
      stroke-linecap: round;
      transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
    }

    .branch-pulse {
      fill: none;
      stroke-dasharray: 8 180;
      stroke-linecap: round;
      animation: pulseFlow 4.5s linear infinite;
      pointer-events: none;
    }

    @keyframes pulseFlow {
      from {
        stroke-dashoffset: 188;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Node Styles */
    .tree-node {
      cursor: pointer;
    }

    /* V6 — no rectangular white browser focus/tap flash on SVG nodes.
       Keep the keyboard focus affordance on the circular node instead. */
    #mindmap-svg,
    #mindmap-svg * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    #mindmap-svg .tree-node,
    #mindmap-svg .tree-node:focus,
    #mindmap-svg .tree-node:focus-visible,
    #mindmap-svg .tree-node * {
      outline: none !important;
    }
    #mindmap-svg .tree-node:focus-visible .node-core {
      stroke-width: 4.5px;
    }

    .node-halo {
      transition: r 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    }

    .tree-node:hover .node-halo {
      opacity: 0.45 !important;
    }

    .node-ring {
      transform-origin: center;
      animation: slowSpin 18s linear infinite;
    }

    @keyframes slowSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Allow text selection in the article-audit drawer. */
    #inspector-drawer, #inspector-drawer * {
      user-select: text;
      -webkit-user-select: text;
    }

    /* Card katalog wajib terlihat segera: tidak ada animasi opacity pada card yang belum terpasang di DOM. */
    #drawer-posts-list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      min-height: 0;
    }
    #drawer-posts-list > article {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
      flex: 0 0 auto;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    #drawer-posts-list > article a { overflow-wrap: anywhere; }

    /* Drawer memiliki transisi sendiri, tak tergantung class transform dari CDN. */
    #inspector-drawer {
      transform: translateX(calc(100% + 2rem));
      transition: transform .42s cubic-bezier(.22, 1, .36, 1);
      will-change: transform;
    }
    #inspector-drawer.is-open { transform: translateX(0); }
    #drawer-backdrop { display: none; }
    .mode-label-mobile, .mobile-return-button, .mobile-drawer-grip { display: none; }
    #drawer-scroll-area {
      min-height: 0;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    #canvas-container { touch-action: none; }

    @media (max-width: 767px) {
      html, body { height: 100%; height: 100dvh; }
      .app-header {
        top: max(.5rem, env(safe-area-inset-top));
        left: .5rem;
        right: .5rem;
        gap: .4rem;
      }
      .brand-panel {
        width: 100%;
        min-width: 0;
        padding: .55rem .7rem;
        gap: .65rem;
      }
      .brand-panel h1 { font-size: .78rem; line-height: 1.15; }
      .brand-panel > div:last-child { min-width: 0; }
      #api-status-badge {
        max-width: 100%;
        font-size: .59rem;
        padding: .1rem .4rem;
      }
      #api-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .controls-panel { width: 100%; gap: .4rem; padding: .4rem; }
      .map-search { order: 1; flex: 1 1 100%; width: 100%; min-width: 0; }
      #search-input { min-height: 42px; font-size: 16px; }
      .mode-selector { order: 2; display: flex; flex: 1 1 auto; min-width: 0; }
      .mode-btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        min-height: 40px;
        padding: .35rem .22rem !important;
        font-size: .65rem !important;
        gap: .25rem !important;
      }
      .mode-btn svg { flex: 0 0 auto; }
      .mode-label-desktop { display: none; }
      .mode-label-mobile { display: inline; }
      .sync-btn { order: 3; min-width: 42px; min-height: 42px; display: flex; align-items: center; justify-content: center; }
      .bottom-toolbar {
        left: .5rem;
        right: .5rem;
        bottom: calc(.5rem + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .legend-panel { display: none; }
      .toolbar-controls {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: .18rem;
        padding: .25rem;
      }
      .toolbar-controls > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        min-width: 40px;
        padding: .4rem .45rem;
        flex: 1 1 auto;
      }
      .toolbar-controls > div { flex: 0 0 1px; }
      #drawer-backdrop.is-visible {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(1, 8, 12, .62);
        backdrop-filter: blur(3px);
      }
      #inspector-drawer {
        top: max(4rem, 12dvh);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 1.5rem 1.5rem 0 0;
        background: rgba(11, 19, 32, .97);
        z-index: 40;
        transform: translateY(110%);
        box-shadow: 0 -20px 60px rgba(0, 0, 0, .65);
        padding-bottom: env(safe-area-inset-bottom);
      }
      #inspector-drawer.is-open { transform: translateY(0); }
      .mobile-drawer-grip {
        display: block;
        margin: .55rem auto .2rem;
        width: 2.75rem;
        height: .27rem;
        border-radius: 99px;
        background: rgba(148, 163, 184, .5);
        flex: 0 0 auto;
      }
      .drawer-header { padding: .7rem 1rem .85rem; }
      .drawer-header h2 { font-size: 1rem; }
      .drawer-header button { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
      #drawer-scroll-area { padding: 1rem; }
      #posts-section { gap: .7rem; }
      #posts-search-input, #posts-scope, #posts-order { font-size: 16px; min-height: 44px; }
      #posts-progress { min-height: 1rem; }
      .drawer-footer { padding: .75rem 1rem; }
      .drawer-footer > a { min-height: 44px; }
      .mobile-return-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        min-height: 44px;
        padding: .65rem .85rem;
        border: 1px solid rgba(110, 231, 183, .38);
        border-radius: .75rem;
        color: #a7f3d0;
        background: rgba(16, 185, 129, .13);
        font-size: .75rem;
        font-weight: 700;
        white-space: nowrap;
      }
      .loading-message { max-width: 90vw; padding-inline: 1rem; text-align: center; }
    }
    @media (max-width: 360px) {
      .mode-btn { font-size: .58rem !important; }
      .toolbar-controls > button { min-width: 35px; }
      .brand-panel h1 { font-size: .72rem; }
      #posts-scope, #posts-order { font-size: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .branch-pulse, .node-ring { animation: none !important; }
      #inspector-drawer { transition-duration: .01ms; }
    }


    /* v5: controls collapsed by default on mobile. Strong selector and !important
       intentionally override the Tailwind CDN utility .flex inserted at runtime. */
    @media (max-width: 767px) {
      body:not(.mobile-tools-open) .app-header #map-tools-panel,
      body.mobile-drawer-open .app-header #map-tools-panel,
      .app-header #map-tools-panel[hidden] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
      body.mobile-tools-open:not(.mobile-drawer-open) .app-header #map-tools-panel:not([hidden]) {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
      }
    }

    /* v5: adjustable article typography, applies to all loaded/new article cards. */
    #drawer-posts-list { --article-font-size: 12px; }
    #drawer-posts-list .article-title {
      font-size: var(--article-font-size) !important;
      line-height: 1.55;
    }
    #drawer-posts-list .article-date,
    #drawer-posts-list .article-category {
      font-size: max(10px, calc(var(--article-font-size) * .83)) !important;
      line-height: 1.45;
    }
    #drawer-posts-list .article-category { overflow-wrap: anywhere; }
    .article-font-controls {
      display: flex; flex-wrap: nowrap; gap: 5px; align-items: center;
      border: 1px solid rgba(212,184,114,.3); border-radius: 12px;
      background: rgba(18,44,35,.8); padding: 4px;
    }
    .article-font-controls button {
      border-radius: 8px; padding: 4px 7px; min-width: 31px;
      min-height: 34px; color: #f2d798; font-size: 13px;
      font-weight: 800; background: rgba(255,255,255,.04);
      touch-action: manipulation;
    }
    .article-font-controls button:hover:not(:disabled),
    .article-font-controls button:focus-visible {
      outline: 1px solid #d7ba74; background: rgba(212,184,114,.16);
    }
    .article-font-controls button:disabled { opacity: .35; cursor: not-allowed; }
    .article-font-controls .font-size-value {
      min-width: 46px; color: #d4e5d9; text-align: center;
      font-size: 10px; font-variant-numeric: tabular-nums;
    }
    @media (max-width: 767px) {
      .article-font-controls button { min-width: 40px; min-height: 42px; font-size: 15px; }
      .article-font-controls .font-size-value { min-width: 47px; font-size: 11px; }
      #posts-section .posts-section-heading { flex-wrap: wrap; }
    }

    /* v4 — Mobile Explorer Mode: leave the knowledge map uncovered. */
    .mobile-menu-toggle, #mobile-selection-card, .mobile-branch-actions { display: none; }
    @media (max-width: 767px) {
      .app-header {
        top: max(8px, env(safe-area-inset-top));
        left: 8px;
        right: 8px;
        display: block;
        z-index: 31;
      }
      .brand-panel {
        min-height: 56px;
        padding: 7px 10px;
        gap: 7px;
        justify-content: flex-start;
        background: rgba(10, 28, 23, .93);
        border-color: rgba(94, 176, 126, .32);
      }
      .brand-panel > div:first-child {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        flex-shrink: 0;
      }
      .brand-panel > div:last-of-type { flex: 1; min-width: 0; }
      .brand-panel h1 {
        font-size: 13px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .brand-panel p { display: none; }
      #api-status-badge {
        padding: 0;
        width: 8px;
        min-width: 8px;
        height: 8px;
        border: none;
        background: transparent;
        overflow: hidden;
      }
      #api-status-badge #api-status-text { display: none; }
      #api-status-badge #api-status-dot { display: block; width: 7px; height: 7px; }
      .mobile-menu-toggle {
        flex: 0 0 40px;
        min-width: 40px;
        min-height: 40px;
        display: grid;
        place-items: center;
        color: #e5ce91;
        border: 1px solid rgba(213, 183, 116, .32);
        border-radius: 12px;
        background: rgba(23, 53, 41, .86);
        touch-action: manipulation;
      }
      .mobile-tools-open .mobile-menu-toggle {
        color: #08251b;
        background: #dabe7a;
      }
      .controls-panel {
        display: none;
        position: fixed;
        top: calc(max(8px, env(safe-area-inset-top)) + 62px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100dvh - 90px - env(safe-area-inset-bottom));
        overflow-y: auto;
        padding: 12px;
        gap: 10px;
        z-index: 33;
        background: rgba(10, 25, 26, .97);
        border-color: rgba(69, 169, 121, .45);
        box-shadow: 0 20px 45px rgba(0, 0, 0, .78);
      }
      .mobile-tools-open .controls-panel { display: flex; }
      .map-search { flex: 1 1 100%; }
      .mode-selector { width: 100%; flex: 1 1 100%; }
      .mode-btn { min-height: 44px; }
      .sync-btn { flex: 0 0 auto; }
      .mobile-branch-actions {
        display: grid;
        order: 4;
        width: 100%;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 8px;
      }
      .mobile-branch-actions button {
        border: 1px solid rgba(109, 184, 150, .26);
        border-radius: 10px;
        padding: 10px 6px;
        min-height: 42px;
        background: rgba(27, 54, 48, .9);
        color: #cdebd6;
        font-size: 11px;
        font-weight: 700;
      }
      .bottom-toolbar {
        position: fixed;
        left: auto;
        right: 9px;
        bottom: calc(128px + env(safe-area-inset-bottom));
        width: auto;
        z-index: 23;
        display: block;
        pointer-events: none;
      }
      .bottom-toolbar .legend-panel { display: none; }
      .toolbar-controls {
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 5px;
        border-radius: 15px;
        background: rgba(12, 33, 27, .86);
        border-color: rgba(113, 197, 146, .26);
      }
      .toolbar-controls > button:nth-of-type(1),
      .toolbar-controls > button:nth-of-type(2),
      .toolbar-controls > div { display: none !important; }
      .toolbar-controls > button {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 5px;
        border-radius: 10px;
        font-size: 11px;
        touch-action: manipulation;
      }
      #mobile-selection-card {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        min-height: 98px;
        display: none;
        align-items: center;
        gap: 8px;
        z-index: 25;
        padding: 12px;
        border-radius: 17px;
        border: 1px solid rgba(212, 184, 114, .40);
        background: rgba(14, 43, 32, .96);
        backdrop-filter: blur(16px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .65);
      }
      #mobile-selection-card.is-visible { display: flex; }
      #mobile-selection-card .mobile-selection-text { flex: 1; min-width: 0; }
      #mobile-selection-card .mobile-selection-eyebrow {
        display: block;
        font-size: 9px;
        letter-spacing: .1em;
        font-weight: 800;
        color: #dfc586;
      }
      #mobile-selection-title {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 5px;
        color: white;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 800;
      }
      #mobile-selection-meta {
        display: block;
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
        color: #b4cbbd;
      }
      #mobile-open-posts {
        min-height: 48px;
        min-width: 108px;
        flex: 0 0 108px;
        color: #142d23;
        font-weight: 800;
        font-size: 11px;
        line-height: 1.4;
        border-radius: 12px;
        background: linear-gradient(135deg, #e1c57a, #f3dc9d);
        box-shadow: 0 3px 15px rgba(215, 179, 96, .12);
        padding: 9px 8px;
        touch-action: manipulation;
      }
      .mobile-drawer-open #mobile-selection-card,
      .mobile-drawer-open .bottom-toolbar { visibility: hidden; pointer-events: none; }
      .mobile-drawer-open #inspector-drawer { z-index: 45; }
      .mobile-drawer-open #drawer-backdrop { z-index: 44; }
      .mobile-drawer-open .app-header { z-index: 20; }
      .mobile-drawer-open .mobile-tools-open .controls-panel { display: none; }
      #canvas-container { touch-action: none; }
    }
    @media (max-width: 360px) {
      #mobile-selection-card { padding: 9px; min-height: 94px; }
      #mobile-open-posts { flex-basis: 96px; min-width: 96px; }
      #mobile-selection-title { font-size: 13px; }
      .bottom-toolbar { bottom: calc(121px + env(safe-area-inset-bottom)); }
    }
    @media (max-height: 650px) and (max-width: 767px) {
      #mobile-selection-card { min-height: 82px; }
      .bottom-toolbar { bottom: calc(110px + env(safe-area-inset-bottom)); }
    }

    /* Custom Scrollbar for Drawer */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.4);
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(16, 185, 129, 0.35);
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(16, 185, 129, 0.65);
    }
    /* v8.7.1 — WordPress category descriptions: readable, safe rich content. */
    #drawer-description {
      overflow-wrap: anywhere;
      line-height: 1.75;
    }
    #drawer-description > :first-child { margin-top: 0; }
    #drawer-description > :last-child { margin-bottom: 0; }
    #drawer-description p, #drawer-description ul, #drawer-description ol,
    #drawer-description blockquote, #drawer-description figure {
      margin: .65em 0;
    }
    #drawer-description p { text-align: justify; }
    #drawer-description a {
      color: #6ee7b7;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    #drawer-description a:hover { color: #fcd34d; }
    #drawer-description img {
      display: block;
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 320px;
      object-fit: contain;
      margin: .75rem auto 1rem;
      border-radius: .55rem;
    }
    #drawer-description ul, #drawer-description ol { padding-left: 1.35em; }
    #drawer-description ul { list-style: disc; }
    #drawer-description ol { list-style: decimal; }
    #drawer-description li { margin: .2em 0; }
    #drawer-description blockquote {
      border-left: 3px solid rgba(110,231,183,.5);
      padding-left: .9rem;
      color: #cbd5e1;
    }
    #drawer-description h2, #drawer-description h3,
    #drawer-description h4, #drawer-description h5,
    #drawer-description h6 { color: #f1f5f9; font-weight: 700; margin: .85em 0 .35em; }
    #drawer-description code, #drawer-description pre {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    #drawer-description table { border-collapse: collapse; width: 100%; table-layout: fixed; }
    #drawer-description th, #drawer-description td {
      border: 1px solid rgba(148,163,184,.3);
      padding: .35rem;
      overflow-wrap: anywhere;
    }
    #drawer-description figcaption {
      text-align: center;
      color: #94a3b8;
      font-size: .85em;
    }


    /* v8.7.2 — Reza Ervani monogram for loading overlay and root node. */
    .loading-logo-wrap {
      filter: drop-shadow(0 0 18px rgba(16, 185, 129, 0.16)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.18));
    }
    .loading-logo-core {
      position: relative;
      width: 2.85rem;
      height: 2.85rem;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 35% 30%, #f4f4f5 0%, #d1d5db 72%, #9ca3af 100%);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.75), 0 0 0 1px rgba(15,23,42,.35);
    }
    .loading-logo-text {
      color: #0f172a;
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 1.5rem;
      line-height: 1;
      font-weight: 700;
      transform: translateY(-.02em);
      letter-spacing: -.03em;
    }