/* ===== RESET & BASE ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: background-color 0.3s, border-color 0.3s;
    }

    body {
      font-family: 'Outfit', -apple-system, 'PingFang SC', sans-serif;
      background: var(--app-bg);
      color: var(--text-main);
      overflow: hidden;
      height: 100vh;
    }

    /* ===== THEME VARIABLES ===== */
    :root {
      --sidebar-w: 300px;
      /* Dynamic Accent Hue: Default is 275 (Electric Indigo) */
      --accent-h: 275;
      /* Accent colors derived from oklch */
      --accent: oklch(60% 0.24 var(--accent-h));
      --accent-strong: oklch(52% 0.26 var(--accent-h));
      --accent-soft: oklch(92% 0.06 var(--accent-h) / 0.7);
      --accent-border: oklch(60% 0.24 var(--accent-h) / 0.15);
      --item-hover: oklch(60% 0.24 var(--accent-h) / 0.04);

      /* Light Mode Neutrals */
      --app-bg: oklch(97% 0.01 250);
      /* #f5f7fa */
      --sidebar-bg: oklch(98.5% 0.005 250);
      /* #f8fafc */
      --sidebar-border: oklch(92% 0.008 250);
      /* #e2e8f0 */
      --panel-bg: var(--sidebar-bg);
      --panel-bg-strong: oklch(100% 0 var(--accent-h));
      --panel-border: oklch(0% 0 0 / 0.05);
      --muted-border: oklch(92% 0.008 250);
      --control-bg: oklch(100% 0 var(--accent-h));
      --control-border: oklch(85% 0.01 250);
      --text-strong: oklch(18% 0.02 250);
      /* #0f172a */
      --text-main: oklch(35% 0.02 250);
      /* #334155 */
      --text-muted: oklch(55% 0.02 250);
      /* #64748b */
      --text-faint: oklch(72% 0.02 250);
      /* #94a3b8 */
      --card-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.04), 0 8px 16px -8px rgba(0, 0, 0, 0.02);
      --toast-bg: oklch(100% 0 var(--accent-h) / 0.95);
      --scrollbar-thumb: oklch(85% 0.01 250);
      --label-bg: oklch(100% 0 var(--accent-h) / 0.95);
      --label-border: oklch(60% 0.24 var(--accent-h) / 0.15);
      --label-text: oklch(18% 0.02 250);
      --blur-val: 0px;
    }

    body.theme-dark {
      /* Dark Mode Neutrals */
      --app-bg: oklch(14% 0.02 260);
      /* #0b0d13 */
      --sidebar-bg: oklch(16% 0.025 260);
      /* #0f111a */
      --sidebar-border: oklch(24% 0.03 260);
      /* #1e2235 */
      --panel-bg: var(--sidebar-bg);
      --panel-bg-strong: oklch(18% 0.022 var(--accent-h));
      --panel-border: oklch(100% 0 0 / 0.06);
      --muted-border: oklch(100% 0 0 / 0.06);
      --control-bg: oklch(100% 0 0 / 0.04);
      --control-border: oklch(100% 0 0 / 0.08);
      --text-strong: oklch(98% 0.005 260);
      /* #ffffff */
      --text-main: oklch(88% 0.01 260);
      /* #cbd5e1 */
      --text-muted: oklch(68% 0.02 260);
      /* #8892b0 */
      --text-faint: oklch(45% 0.02 260);
      /* #475569 */
      --accent: oklch(65% 0.22 var(--accent-h));
      --accent-strong: oklch(75% 0.18 var(--accent-h));
      --accent-soft: oklch(65% 0.22 var(--accent-h) / 0.15);
      --accent-border: oklch(65% 0.22 var(--accent-h) / 0.3);
      --item-hover: oklch(65% 0.22 var(--accent-h) / 0.06);
      --card-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.4), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
      --toast-bg: oklch(18% 0.022 var(--accent-h) / 0.95);
      --scrollbar-thumb: oklch(35% 0.02 260);
      --label-bg: oklch(18% 0.022 var(--accent-h) / 0.95);
      --label-border: oklch(65% 0.22 var(--accent-h) / 0.3);
      --label-text: oklch(98% 0.005 260);
    }

    /* ===== CANVAS WRAPPER ===== */
    #canvas-container {
      position: fixed;
      top: 0;
      left: var(--sidebar-w);
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    canvas {
      display: block;
      touch-action: none;
    }

    /* ===== SIDEBAR ===== */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: var(--sidebar-w);
      height: 100vh;
      background: var(--panel-bg);
      backdrop-filter: blur(var(--blur-val));
      -webkit-backdrop-filter: blur(var(--blur-val));
      border-right: 1px solid var(--sidebar-border);
      display: flex;
      flex-direction: column;
      z-index: 10;
      box-shadow: 4px 0 32px rgba(0, 0, 0, 0.03);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s, background-color 0.3s;
    }

    .sidebar-header {
      padding: 24px 20px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 10px var(--accent-soft);
    }

    .title-text h1 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--text-strong), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: -0.2px;
    }

    .title-text p {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 500;
    }

    .lang-btn {
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      color: var(--text-main);
      border-radius: 6px;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .lang-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ===== SEARCH BOX ===== */
    .search-box {
      padding: 8px 20px;
      position: relative;
    }

    .search-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-icon-svg {
      position: absolute;
      left: 12px;
      color: var(--text-faint);
      pointer-events: none;
    }

    .search-box input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      border-radius: 10px;
      color: var(--text-strong);
      font-size: 13px;
      font-weight: 500;
      outline: none;
      transition: all 0.2s;
    }

    .search-box input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-border);
      transform: translateY(-1px);
    }

    .search-box input::placeholder {
      color: var(--text-faint);
    }

    /* ===== SYSTEM SWITCH TAB ===== */
    .system-tabs {
      display: flex;
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      border-radius: 12px;
      padding: 4px;
      margin: 8px 20px 16px;
      position: relative;
      gap: 4px;
    }

    .system-tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 0;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .system-tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 0;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .system-tab:hover {
      color: var(--text-strong);
    }

    .system-tab.active {
      background: var(--accent);
      color: #ffffff;
      box-shadow: 0 4px 14px var(--accent-soft);
      transform: translateY(-0.5px);
    }

    /* ===== REGION TREE LIST ===== */
    .mesh-list {
      flex: 1;
      padding: 0 12px 24px;
      overflow-y: auto;
    }

    .mesh-list::-webkit-scrollbar {
      width: 5px;
    }

    .mesh-list::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 10px;
    }

    .region-group {
      margin-bottom: 4px;
      border-radius: 8px;
      overflow: hidden;
    }

    /* Top-level Region Header */
    .region-header {
      font-family: 'Plus Jakarta Sans', sans-serif;
      padding: 10px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--text-strong);
      border-radius: 8px;
      transition: all 0.2s ease;
      user-select: none;
    }

    .region-header:hover {
      background: var(--item-hover);
      color: var(--text-strong);
      transform: translateX(2px);
    }

    .region-header:hover {
      background: var(--item-hover);
    }

    .region-arrow {
      font-size: 8px;
      color: var(--text-faint);
      transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
      width: 12px;
      text-align: center;
      flex-shrink: 0;
    }

    .region-arrow.collapsed {
      transform: rotate(-90deg);
    }

    .region-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .region-count {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 500;
      flex-shrink: 0;
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      padding: 1px 6px;
      border-radius: 8px;
    }

    /* Nested Sub-region Header */
    .region-header.level-1 {
      padding-left: 28px;
      font-size: 12px;
      color: var(--text-main);
      background: transparent;
    }

    .region-children {
      overflow: hidden;
      transition: max-height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* List Leaf Item */
    .mesh-item {
      font-family: 'Outfit', sans-serif;
      padding: 8px 12px 8px 28px;
      margin: 1px 0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      border-left: 3px solid transparent;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-main);
    }

    .mesh-item.level-2 {
      padding-left: 42px;
    }

    .mesh-item:hover {
      background: var(--item-hover);
      color: var(--text-strong);
      transform: translateX(4px);
    }

    .mesh-item.active {
      background: var(--accent-soft);
      border-left-color: var(--accent);
      color: var(--accent-strong);
      font-weight: 600;
      box-shadow: inset 1px 0 0 var(--accent-border);
    }

    .mesh-label {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mesh-color {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ===== FLOATING WIDGETS (VIEWPORT) ===== */

    /* Top Left Toggles */






    /* Top Right Toggles */
    .viewport-settings {
      position: fixed;
      top: 24px;
      right: 24px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 15;
    }

    .theme-toggle-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--panel-bg);
      border: 1px solid var(--sidebar-border);
      box-shadow: var(--card-shadow);
      border-radius: 20px;
      color: var(--text-strong);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;

    }

    .theme-toggle-btn:hover {
      background: var(--item-hover);
      transform: translateY(-1px);
    }





    /* Bottom Center Navigation Bar */










    .tool-icon {
      font-size: 16px;
    }

    /* ===== LEADER LABEL (3D CALLOUT) ===== */
    #leader-label {
      position: fixed;
      pointer-events: none;
      z-index: 30;
      padding: 12px 18px;
      border-radius: 12px;
      background: var(--label-bg);
      backdrop-filter: blur(16px);
      border: 1px solid var(--label-border);
      color: var(--text-strong);
      box-shadow: var(--card-shadow);
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
      transform: translate(-50%, -120%);
      display: flex;
      flex-direction: column;
    }

    #leader-label.show {
      opacity: 1;
    }

    #leader-label .label-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-strong);
    }

    #leader-label .label-cat {
      display: none;
      /* Old category label hidden */
    }

    /* ===== DETAILS PANEL ===== */
    .detail-panel {
      position: fixed;
      top: 80px;
      /* Positioned below settings to avoid overlap */
      right: 24px;
      /* Shifted to right because toolbar is removed */
      width: 320px;
      max-height: calc(100vh - 104px);
      background: var(--panel-bg);
      backdrop-filter: blur(var(--blur-val));
      -webkit-backdrop-filter: blur(var(--blur-val));
      border: 1px solid var(--sidebar-border);
      border-radius: 16px;
      overflow: hidden;
      transform: translateX(380px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s;
      z-index: 20;
      box-shadow: var(--card-shadow);
    }

    .detail-panel.show {
      transform: translateX(0);
    }

    .detail-header {
      padding: 20px;
      position: relative;
      background: linear-gradient(135deg, var(--accent-soft), transparent);
      border-bottom: 1px solid var(--sidebar-border);
    }

    .detail-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      color: var(--text-muted);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .detail-close:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent);
    }

    .detail-muscle-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-strong);
      margin-bottom: 4px;
    }

    .detail-body {
      padding: 20px;
      overflow-y: auto;
      max-height: calc(100vh - 180px);
    }

    .detail-body::-webkit-scrollbar {
      width: 4px;
    }

    .detail-body::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 10px;
    }

    .detail-section {
      margin-bottom: 0;
    }

    .detail-section-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .detail-section-title::before {
      content: '';
      width: 3px;
      height: 12px;
      background: var(--accent);
      border-radius: 2px;
    }

    .detail-text {
      font-size: 12px;
      color: var(--text-main);
      line-height: 1.8;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .detail-text::-webkit-scrollbar {
      width: 3px;
    }

    .detail-text::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 2px;
    }

    .detail-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding: 8px 14px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent-strong);
      text-decoration: none;
      transition: all 0.2s;
    }

    .detail-link:hover {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }

    /* ===== LOADING OVERLAY ===== */
    #loading {
      position: fixed;
      inset: 0;
      background: var(--app-bg);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      transition: opacity 0.5s;
    }

    #loading.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--accent-soft);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    #loading p {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
    }

    /* ===== STATUS BAR ===== */
    .status-bar {
      position: fixed;
      bottom: 0;
      left: var(--sidebar-w);
      right: 0;
      padding: 8px 20px;
      background: var(--sidebar-bg);
      border-top: 1px solid var(--sidebar-border);
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      z-index: 5;
      display: flex;
      justify-content: space-between;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
    }

    #hover-tooltip {
      position: fixed;
      padding: 6px 12px;
      background: var(--label-bg);
      border: 1px solid var(--label-border);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-strong);
      pointer-events: none;
      z-index: 40;
      opacity: 0;
      transition: opacity 0.12s;
      white-space: nowrap;
      box-shadow: var(--card-shadow);
    }

    #hover-tooltip.show {
      opacity: 1;
    }

    /* ===== TOAST NOTIFICATION ===== */
    .toast-container {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast {
      padding: 12px 24px;
      background: var(--toast-bg);
      border: 1px solid var(--sidebar-border);
      box-shadow: var(--card-shadow);
      color: var(--text-strong);
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(8px);
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .toast-icon {
      color: var(--accent);
      font-size: 14px;
    }

    /* ===== MOBILE FLOATING BUTTONS ===== */
    #mobile-menu-btn,
    #mobile-reset-btn {
      display: none;
      position: fixed;
      z-index: 50;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: var(--card-shadow);
      -webkit-tap-highlight-color: transparent;
      border: 1px solid var(--sidebar-border);
      background: var(--panel-bg);
      color: var(--text-strong);
      backdrop-filter: blur(8px);
    }

    #mobile-menu-btn {
      top: 12px;
      left: 12px;
    }

    #mobile-reset-btn {
      bottom: 80px;
      right: 12px;
    }

    /* ===== SIDEBAR OVERLAY ===== */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 9;
      backdrop-filter: blur(2px);
    }

    /* ===== RESPONSIVE MEDIA QUERIES ===== */
    @media (max-width: 768px) {
      :root {
        --sidebar-w: 0px;
      }

      #mobile-menu-btn {
        display: flex;
      }

      .sidebar {
        width: 80vw;
        max-width: 280px;
        transform: translateX(-100%);
        border-right: none;
        border-radius: 0 16px 16px 0;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
        z-index: 50;
      }

      .sidebar.mobile-open {
        transform: translateX(0);
      }

      #sidebar-overlay.active {
        display: block;
      }

      /* Viewport adjustments */


      .viewport-settings {
        top: 12px;
        right: 12px;
      }

      .theme-toggle-btn .theme-text {
        display: none;
      }





      .nav-bar-btn .nav-text {
        display: none;
      }

      #nav-btn-fullscreen {
        display: none;
      }



      .detail-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 45vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        border: none;
        border-top: 1px solid var(--sidebar-border);
      }

      .detail-panel.show {
        transform: translateY(0);
        text-align: center;
      }

      .detail-body {
        max-height: calc(45vh - 100px);
        line-height: 1.7;
      }

      /* Status bar on mobile */
      .status-bar {
        left: 0;
        font-size: 10px;
        padding: 6px 12px;
      }

      .status-bar span:nth-child(3),
      .status-bar span:nth-child(4) {
        display: none;
      }
    }

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

    .noscript-message {
      position: fixed;
      inset: 24px;
      z-index: 999;
      display: grid;
      place-items: center;
      padding: 24px;
      border: 1px solid var(--accent-border);
      border-radius: 12px;
      background: var(--panel-bg-strong);
      color: var(--text-main);
      text-align: center;
      line-height: 1.7;
    }

    /* ===== TWEAKS PANEL ===== */








    .tweaks-row label {
      font-weight: 500;
    }



    .range-container {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 130px;
    }

    .range-container input[type="range"] {
      flex: 1;
      accent-color: var(--accent);
      cursor: pointer;
      height: 4px;
    }

    .range-container span {
      font-family: monospace;
      font-size: 11px;
      color: var(--text-muted);
      min-width: 24px;
      text-align: right;
    }

    /* Toggle Switch Styling */
    .switch {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 18px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: var(--control-border);
      transition: .4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 12px;
      width: 12px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked+.slider {
      background-color: var(--accent);
    }

    input:checked+.slider:before {
      transform: translateX(14px);
    }

    /* ===== EXPLODE ANATOMY CONTROLLER (SLIM & RESPONSIVE) ===== */
    .explode-controller {
      position: fixed;
      bottom: 40px;
      left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
      transform: translateX(-50%);
      z-index: 20;
      user-select: none;
      pointer-events: none;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.3s;
    }

    .explode-card {
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      background: var(--panel-bg-strong);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--panel-border);
      border-radius: 16px;
      padding: 7px 16px 8px;
      box-shadow: var(--card-shadow), 0 12px 32px rgba(0, 0, 0, 0.18);
      gap: 4px;
      width: 480px;
      max-width: min(520px, calc(100vw - var(--sidebar-w) - 40px));
      transition: width 0.3s, padding 0.3s, background 0.3s;
    }

    .explode-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 22px;
    }

    .explode-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-strong);
      letter-spacing: -0.01em;
    }

    .explode-title svg {
      color: var(--accent);
      flex-shrink: 0;
    }

    .explode-badge {
      font-size: 10.5px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      padding: 1px 6px;
      border-radius: 5px;
      background: var(--control-bg);
      border: 1px solid var(--control-border);
      color: var(--accent);
      min-width: 38px;
      text-align: center;
      line-height: 1.3;
    }

    .explode-reset-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-muted);
      cursor: pointer;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
      transition: color 0.2s, background 0.2s, border-color 0.2s;
    }

    .explode-reset-btn:hover {
      color: var(--accent);
      background: var(--item-hover);
      border-color: var(--panel-border);
    }

    .explode-reset-btn:active {
      transform: scale(0.94);
    }

    .explode-scrubber-row {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 20px;
    }

    .explode-slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
    }

    .explode-slider-wrap input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 3px;
      background: var(--control-border);
      outline: none;
      cursor: pointer;
      transition: background 0.2s;
    }

    .explode-slider-wrap input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent-soft), 0 2px 5px rgba(0, 0, 0, 0.3);
      cursor: grab;
      border: 2px solid #ffffff;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .explode-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
      cursor: grabbing;
      transform: scale(1.2);
    }

    .explode-slider-wrap input[type="range"]::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent-soft), 0 2px 5px rgba(0, 0, 0, 0.3);
      cursor: grab;
      border: 2px solid #ffffff;
    }

    .explode-sublabel {
      font-size: 10.5px;
      font-weight: 500;
      color: var(--text-faint);
      white-space: nowrap;
      flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .explode-controller {
        left: 50%;
        bottom: max(14px, env(safe-area-inset-bottom, 14px));
      }

      .explode-card {
        width: calc(100vw - 28px);
        max-width: 420px;
        padding: 6px 12px 7px;
        border-radius: 14px;
        gap: 3px;
      }

      .explode-title {
        font-size: 11.5px;
      }

      .explode-sublabel {
        font-size: 10px;
      }

      .explode-scrubber-row {
        gap: 7px;
      }
    }

    @media (max-width: 400px) {
      .explode-card {
        width: calc(100vw - 18px);
        padding: 6px 10px 7px;
      }

      .explode-sublabel {
        font-size: 9.5px;
      }
    }