@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,900;1,14..32,900&family=Raleway:ital@0;1&family=Unbounded:wght@200..900&display=swap');

/* ---------- THEME & BASE ---------- */
    :root{
      /* base tokens kept for backward compatibility */
      --radius: 12px;
      --toolbar-height: 56px;
      --icon-size: 20px;
       --progress-light: linear-gradient(90deg, #0c6098, #00eeff);
  --progress-dark: linear-gradient(90deg, #102f25c2, #1cffb0);
    }

    /* LIGHT THEME */
    html.light-theme {
      --page-bg: #ffffff;
      --panel-bg: #e4e4e4;
      --panel-border: rgba(31,118,255,0.06);
      --btn-text: #3b88c7;
      --btn-bg: linear-gradient(180deg,#7bcaff,#94dbff);
      --btn-hover: rgba(255, 255, 255, 0.575);
      --btn-accent-shadow: 0 8px 28px rgba(31,182,255,0.18);
      --tooltip-bg: rgba(255, 255, 255, 0.9);
      --canvas-bg: #ffefef;
      --muted: #272727;
      --Pl-col: #222;
      --muted2: #017cce;
      --pl-bar: var(--progress-light);
      --ndm-marker-accent: #0c6098;
      --ndm-marker-label-bg: rgba(255, 255, 255, 0.94);
      --ndm-marker-label-border: rgba(12, 96, 152, 0.18);
      --ndm-marker-label-text: #14344b;
      --ndm-marker-line: rgba(12, 96, 152, 0.52);
    }

      /* DARK THEME (user requested gray #222 for panels) */
      html.dark-theme {
        --page-bg: #4e4d4d;
        --panel-bg: #212121; /* user requested #222 */
        --panel-border: rgba(0,255,174,0.06);
        --btn-text: #ffffff;
        /* buttons get subtle solid tone but active uses requested highlight */
        --btn-bg: linear-gradient(180deg, rgba(0, 255, 174, 0.822), rgba(0, 255, 174, 0.945));
        --btn-active-bg: rgba(0,255,174,0.76);
        --btn-hover: rgba(0, 255, 174, 0.753);
        --btn-accent-shadow: 0 8px 28px rgba(0,255,174,0.27); /* approximates #00ffaec2 */
        --tooltip-bg: rgba(0,0,0,0.8);
        --canvas-bg: #222; /* make canvas background match panel */
        --muted: #ffffff;
        --Pl-col: #ffffff;
        --muted2: rgba(0,255,174,0.76);
        --pl-bar: var(--progress-dark);
        --ndm-marker-accent: #00ffaa;
        --ndm-marker-label-bg: rgba(14, 20, 29, 0.88);
        --ndm-marker-label-border: rgba(0, 255, 170, 0.2);
        --ndm-marker-label-text: #effff9;
        --ndm-marker-line: rgba(0, 255, 170, 0.58);
      }

    /* default page */
    html, body {
  height: 100%;
  margin: 0;
  font-family: "Unbounded", sans-serif;
      
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


    /* ---------- PRELOADER (kept) ---------- */
    #preloader {
      position: fixed;
      inset: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:200000;
      background:
        radial-gradient(circle at top, rgba(19, 187, 142, 0.16), transparent 32%),
        radial-gradient(circle at bottom left, rgba(65, 124, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(7, 11, 18, 0.99), rgba(10, 14, 24, 1));
      transition: opacity .36s ease, visibility .36s;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    #preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

    #preloader:not(.hidden) ~ .ndm-watermark,
    #preloader:not(.hidden) ~ #leftPanel,
    #preloader:not(.hidden) ~ #rightPanel,
    #preloader:not(.hidden) ~ #leftReveal,
    #preloader:not(.hidden) ~ #rightReveal,
    #preloader:not(.hidden) ~ #bottomActions,
    #preloader:not(.hidden) ~ #authModal,
    #preloader:not(.hidden) ~ .ndm-assistant-widget,
    #preloader:not(.hidden) ~ [class*="assistant-widget"],
    #preloader:not(.hidden) ~ [class*="assistant-bubble"],
    #preloader:not(.hidden) ~ [class*="chat-widget"],
    #preloader:not(.hidden) ~ [id*="assistant"]{
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .pl-card { display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:16px; background: rgba(15, 23, 36, 0.94); box-shadow: 0 18px 48px rgba(0,0,0,0.52); min-width:320px; max-width:86%; border:1px solid rgba(255,255,255,0.08); }
    .pl-brand { display:flex; flex-direction:column; gap:6px; }
    .pl-title { color:var(--Pl-col); font-weight:800; letter-spacing:0.6px; font-size:18px; display:flex; gap:8px; align-items:center; }
    .pl-sub { color:var(--muted); font-size:13px; line-height:1.45; }
.pl-percent {color:var(--muted2)}
    /* ---------- PANELS & UI ---------- */
    /* left control panel */
    #leftPanel { position: absolute; left: 28px; top: 18px; width: 300px; max-height: calc(var(--ndm-mobile-viewport-h, 100vh) - 36px); background: var(--panel-bg); border-radius: var(--radius); padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); backdrop-filter: blur(8px); transition: width .22s ease, transform .28s ease, opacity .28s, background .28s; display:flex; flex-direction:column; gap:10px; overflow:auto; z-index:1000; border:1px solid var(--panel-border); }
    #leftPanel.collapsed { width:128px; padding:10px 6px; align-items:center; }

    .panel-top { display:flex; justify-content:space-between; align-items:center; gap:10px; top: 20px; }
    .brand-block { display:flex; gap:10px; align-items:center; }
    .brand-text { display:flex; flex-direction:column; line-height:1.5; }
    .brand-title { font-weight:650; font-size:15px; color:var(--btn-text);  }
    .brand-sub { font-size:12px; color:var(--muted); }

    /* ===== Improved icon buttons (size, spacing, hover) ===== */
    .icon-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-family: "Unbounded", sans-serif;}
    .icon-row .icon-btn {
      font-family: "Unbounded", sans-serif;
      background: transparent;
      border: 1px solid transparent;
      width:50px; height:40px;
      display:inline-flex; align-items:center; justify-content:center;
      border-radius:10px; cursor:pointer; color:var(--btn-text); position:relative; flex-shrink:0;
      transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      padding:6px;
      margin:0;
    }
    .icon-row .icon-btn svg { width: var(--icon-size); height: var(--icon-size); fill: currentColor; display:block; }
    .icon-row .icon-btn:hover { transform: translateY(-3px); box-shadow: var(--btn-accent-shadow); background: var(--btn-hover); }
    .icon-row .icon-btn.active { background: var(--btn-active-bg, var(--btn-bg)); color: var(--btn-text); border-color: var(--panel-border); box-shadow: var(--btn-accent-shadow); }

    @media (min-width: 921px) and (pointer: fine) {
      #leftPanel:not(.collapsed) #controlsRow {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
        align-items: center;
        justify-items: stretch;
        width: 100%;
        padding: 8px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        background: rgba(255,255,255,.045);
        box-sizing: border-box;
      }

      html.light-theme #leftPanel:not(.collapsed) #controlsRow {
        border-color: rgba(0,0,0,.08);
        background: rgba(0,0,0,.035);
      }

      #leftPanel:not(.collapsed) #controlsRow .icon-btn {
        width: 100%;
        height: 42px;
        min-width: 0;
        border-color: rgba(255,255,255,.08);
        background: rgba(255,255,255,.035);
      }

      html.light-theme #leftPanel:not(.collapsed) #controlsRow .icon-btn {
        border-color: rgba(0,0,0,.08);
        background: rgba(255,255,255,.55);
      }

      #leftPanel:not(.collapsed) #controlsRow #btnFocusIcon,
      #leftPanel:not(.collapsed) #controlsRow #btnIsolateIcon,
      #leftPanel:not(.collapsed) #controlsRow #btnHideIcon,
      #leftPanel:not(.collapsed) #controlsRow #btnRestoreIcon,
      #leftPanel:not(.collapsed) #controlsRow #screenshotBtn {
        background: rgba(255,255,255,.035);
        border-color: rgba(255,255,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
      }

      #leftPanel:not(.collapsed) #controlsRow #animationBtn,
      #leftPanel:not(.collapsed) #controlsRow #undoBtn,
      #leftPanel:not(.collapsed) #controlsRow #redoBtn,
      #leftPanel:not(.collapsed) #controlsRow #audioBtn,
      #leftPanel:not(.collapsed) #controlsRow #btnMultiIcon,
      #leftPanel:not(.collapsed) #controlsRow #themeBtn {
        opacity: .82;
      }



      html.light-theme #leftPanel:not(.collapsed) #controlsRow #btnFocusIcon,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #btnIsolateIcon,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #btnHideIcon,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #btnRestoreIcon,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #screenshotBtn {
        background: rgba(255,255,255,.55);
        border-color: rgba(0,0,0,.10);
      }

      #leftPanel:not(.collapsed) #controlsRow #audioBtn.active,
      #leftPanel:not(.collapsed) #controlsRow #themeBtn.active {
        background: rgba(255,255,255,.035);
        border-color: rgba(255,255,255,.10);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
      }

      html.light-theme #leftPanel:not(.collapsed) #controlsRow #audioBtn.active,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #themeBtn.active {
        background: rgba(255,255,255,.55);
        border-color: rgba(0,0,0,.10);
      }

      #leftPanel:not(.collapsed) #controlsRow .icon-btn.ndm-desktop-toggle-active,
      #leftPanel:not(.collapsed) #controlsRow #btnMultiIcon.active {
        background: color-mix(in srgb, var(--btn-bg) 72%, #22c55e 28%);
        border-color: rgba(34,197,94,.68);
        box-shadow: 0 0 0 1px rgba(34,197,94,.20), 0 8px 20px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.12);
        opacity: 1;
      }

      html.light-theme #leftPanel:not(.collapsed) #controlsRow .icon-btn.ndm-desktop-toggle-active,
      html.light-theme #leftPanel:not(.collapsed) #controlsRow #btnMultiIcon.active {
        background: color-mix(in srgb, var(--btn-bg) 78%, #16a34a 22%);
        border-color: rgba(22,163,74,.56);
      }

      #leftPanel:not(.collapsed) #controlsRow .icon-btn:hover,
      #leftPanel:not(.collapsed) #controlsRow .icon-btn:focus-visible {
        opacity: 1;
      }

      #leftPanel:not(.collapsed) #controlsRow .icon-btn[disabled],
      #leftPanel:not(.collapsed) #controlsRow .icon-btn.disabled {
        opacity: .42;
        cursor: default;
        box-shadow: none;
      }

      #leftPanel.collapsed #controlsRow {
        justify-content: center;
        gap: 6px;
      }

      #leftPanel.collapsed {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
        padding: 9px 8px;
        align-items: center;
        gap: 0;
        overflow: hidden;
        overflow-x: hidden;
        box-sizing: border-box;
      }

      #leftPanel.collapsed .panel-top {
        width: 100%;
        justify-content: center;
        gap: 0;
      }

      #leftPanel.collapsed .brand-block,
      #leftPanel.collapsed #controlsRow,
      #leftPanel.collapsed #leftCollapseInfo,
      #leftPanel.collapsed > div:not(.panel-top) {
        display: none !important;
      }

      #leftPanel.collapsed .panel-top > div:not(.brand-block) {
        display: flex !important;
        width: 100%;
        justify-content: center;
        align-items: center;
      }

      #leftPanel.collapsed #collapseBtn,
      #rightPanel.collapsed #rightToggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0 !important;
        display: grid;
        place-items: center;
        line-height: 1;
        margin: 0;
        border: 1px solid var(--panel-border);
        background: rgba(255,255,255,.06) !important;
        box-sizing: border-box;
      }

      #rightPanel.collapsed {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding: 9px 8px !important;
        align-items: center !important;
        gap: 0;
        overflow: hidden !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
      }

      #rightPanel.collapsed > div:first-child {
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
      }

      #rightPanel.collapsed > div:first-child > div:first-child,
      #rightPanel.collapsed .desc-body {
        display: none !important;
      }

      html[data-ndm-desktop-3a-pilot="1"] #animationBtn {
        display: none !important;
      }
    }

    html[data-ndm-desktop-3a-pilot="1"] #bAnimation {
      display: none !important;
    }

    /* reduce tooltip overlap: show tooltip above button and prevent covering neighbors */
    .icon-btn[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      bottom: calc(100% + 10px); /* place above control; avoids overlaying adjacent buttons */
      background: var(--tooltip-bg);
      color: var(--btn-text);
      padding:6px 8px;
      border-radius:8px;
      font-size:12px;
      white-space:nowrap;
      z-index: 2001;
      pointer-events:none;
      box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    }
    /* small arrow for tooltip */
    .icon-btn[data-tooltip]:hover::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: calc(100% + 4px);
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--tooltip-bg);
      z-index:2001;
    }

    /* text buttons */
    .text-btn {
      background: transparent;
      border: 0;
      color: var(--btn-text);
      padding:6px 8px;
      cursor:pointer;
      border-radius:8px;
      transition: background .12s ease, transform .12s ease;
      font-weight:600;
    }
    .text-btn:hover { transform: translateY(-2px); background: var(--btn-hover); }

    /* Right panel (description) - redesigned toggle button */
    #rightPanel { position: absolute; right: 18px; top: 18px; width: 340px; max-height: calc(var(--ndm-mobile-viewport-h, 100vh) - 36px); background: var(--panel-bg); border-radius: var(--radius); padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); backdrop-filter: blur(8px); transition: transform .22s ease, opacity .22s ease, background .28s; display:flex; flex-direction:column; gap:10px; overflow:auto; z-index:1000; border:1px solid var(--panel-border); }
    #rightPanel.collapsed { width:300px; padding:10px 8px; align-items:center; overflow:visible; }
    #rightPanel .desc-title { font-weight:800; font-size:15px; color:var(--btn-text); margin-bottom:6px; }
    #rightPanel .desc-body { color:var(--muted); font-size:13px; line-height:1.35; white-space:pre-wrap; overflow:auto; max-height:min(60dvh, calc(var(--ndm-mobile-viewport-h, 100vh) * 0.6)); }

    /* style for reveal toggles (improved appearance) */
    .reveal-btn {
      position: absolute; top: 18px; left: 18px; z-index:1200;
      background: linear-gradient(180deg, rgba(2, 154, 255, 0.87), 
      rgba(30, 146, 255, 0.815));
      color: var(--btn-text); border: none; padding:8px 10px; border-radius:10px; box-shadow: var(--btn-accent-shadow); cursor:pointer; display:none;
    }

    button:focus { outline: 2px solid rgba(31,182,255,0.22); outline-offset:2px; }

  
.pl-progress-wrap {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.pl-progress {
  height: 100%;
  width: 0%;
  background: var(--pl-bar);
  border-radius: 10px;
  transition: width 0.3s ease, background 0.4s ease;
  position: relative;
}

.pl-progress.indet {
  width: 100% !important;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}

.pl-progress.indet::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--pl-bar);
  animation: ndm-preloader-indeterminate 1.15s ease-in-out infinite;
}

@keyframes ndm-preloader-indeterminate {
  0% {
    transform: translateX(-118%);
  }
  50% {
    transform: translateX(96%);
  }
  100% {
    transform: translateX(228%);
  }
}


  

/* ===========================
   QR + WATERMARK + AUTH MODAL
   =========================== */
#qrImage{ display:block; }


.ndm-watermark{
  position: fixed;
  /* Bottom-right corner, but lifted away from the assistant bubble */
  right: 24px;
  bottom: 88px;
  left: auto;
  top: auto;
  pointer-events: none;
  user-select: none;
  /* below panels (1000), above canvas */
  z-index: 10;
  font-weight: 800;
  letter-spacing: 1.6px;
  white-space: nowrap;
  font-size: clamp(12px, 1.6vw, 22px);
  transform: none;
  /* readable on both themes */
  color: var(--wm-color, rgba(255,255,255,0.18));
  text-shadow: var(--wm-shadow, 0 2px 10px rgba(0,0,0,0.45));
}
html.dark-theme{
  --wm-color: rgba(255,255,255,0.18);
  --wm-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.75);
}
html.light-theme{
  --wm-color: rgba(0,0,0,0.14);
  --wm-shadow: 0 2px 12px rgba(255,255,255,0.85), 0 0 1px rgba(255,255,255,0.95);
}
.ndm-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 5000;
  padding: 18px;
}
.ndm-modal.open{ display:flex; }
.ndm-modal-card{
  width: min(520px, 100%);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
}
.ndm-modal-title{ font-size: 18px; font-weight: 700; color:  white; }
.ndm-modal-text{ margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.35; }
.ndm-modal-actions{ margin-top: 14px; display:flex; gap:10px; justify-content:flex-end; flex-wrap: wrap; }
.ndm-btn{
  appearance:none;
  border: 1px solid var(--panel-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  box-shadow: var(--btn-accent-shadow);
}
.ndm-btn:hover{ filter: brightness(1.05); }
.ndm-btn-ghost{
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--btn-text);
  box-shadow: none;
}
html.dark-theme .ndm-btn-ghost{ background: rgba(255,255,255,0.08); }
html.light-theme .ndm-btn-ghost{ background: rgba(0,0,0,0.06); }

.ndm-marker-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:8;
}

.ndm-selection-marker{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translate3d(-9999px, -9999px, 0);
  transition:opacity .16s ease;
  will-change:transform;
}

.ndm-selection-marker.is-visible{
  opacity:1;
}

.ndm-selection-marker__ring,
.ndm-selection-marker__dot{
  position:absolute;
  left:0;
  top:0;
  border-radius:999px;
  transform:translate(-50%, -50%);
}

.ndm-selection-marker__ring{
  width:18px;
  height:18px;
  border:1px solid var(--ndm-marker-line);
  background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
}

.ndm-selection-marker__dot{
  width:8px;
  height:8px;
  background:var(--ndm-marker-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,0.16);
}

.ndm-selection-marker__line{
  position:absolute;
  left:12px;
  top:0;
  width:clamp(1.25rem, 3vw, 1.9rem);
  height:1px;
  background:var(--ndm-marker-line);
  transform:translateY(-50%);
  transform-origin:left center;
}

.ndm-selection-marker__label{
  position:absolute;
  left:calc(12px + clamp(1.25rem, 3vw, 1.9rem) + 0.45rem);
  top:0;
  transform:translateY(-50%);
  max-width:min(14rem, calc(100vw - 3rem));
  padding:0.42rem 0.65rem;
  border-radius:999px;
  border:1px solid var(--ndm-marker-label-border);
  background:var(--ndm-marker-label-bg);
  color:var(--ndm-marker-label-text);
  font-size:clamp(0.69rem, 0.66rem + 0.12vw, 0.8rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  backdrop-filter:blur(8px);
}

.ndm-selection-marker--left .ndm-selection-marker__line{
  left:auto;
  right:12px;
  transform:translateY(-50%) scaleX(-1);
  transform-origin:right center;
}

.ndm-selection-marker--left .ndm-selection-marker__label{
  left:auto;
  right:calc(12px + clamp(1.25rem, 3vw, 1.9rem) + 0.45rem);
}

.ndm-selection-marker--fallback .ndm-selection-marker__ring{
  border-style:dashed;
}

html[data-ndm-scene-screen="phone"] .ndm-selection-marker__ring{
  width:16px;
  height:16px;
}

html[data-ndm-scene-screen="phone"] .ndm-selection-marker__label{
  max-width:min(11.5rem, calc(100vw - 2rem));
  font-size:clamp(0.64rem, 0.62rem + 0.18vw, 0.74rem);
  padding:0.38rem 0.58rem;
}

/* ===========================
   MOBILE ADAPTATION PHASE 1
   =========================== */
:root{
  --ndm-scene-vw: 1vw;
  --ndm-scene-vh: 1vh;
  --ndm-mobile-safe-top: max(0.625rem, env(safe-area-inset-top));
  --ndm-mobile-safe-right: max(0.625rem, env(safe-area-inset-right));
  --ndm-mobile-safe-bottom: max(0.75rem, env(safe-area-inset-bottom));
  --ndm-mobile-safe-left: max(0.625rem, env(safe-area-inset-left));
  --ndm-mobile-viewport-w: min(100dvw, calc(var(--ndm-scene-vw, 1vw) * 100));
  --ndm-mobile-viewport-h: min(100dvh, calc(var(--ndm-scene-vh, 1vh) * 100));
  --ndm-mobile-gap: clamp(0.625rem, 1.25vmax, 1rem);
  --ndm-mobile-inline-gap: clamp(0.75rem, 2.8vw, 1.125rem);
  --ndm-mobile-panel-radius: clamp(1rem, 2.2vw, 1.25rem);
  --ndm-mobile-panel-inline: clamp(0.875rem, 3vw, 1.125rem);
  --ndm-mobile-control-size: clamp(2.875rem, 8vw, 3.25rem);
  --ndm-mobile-action-min-h: clamp(2.75rem, 7.2vw, 3.15rem);
  --ndm-mobile-action-footprint: clamp(3.9rem, calc(var(--ndm-scene-vh, 1vh) * 8), 5rem);
  --ndm-mobile-bottom-bar-bottom: calc(var(--ndm-mobile-safe-bottom) + var(--ndm-mobile-gap));
  --ndm-mobile-bottom-bar-width: min(52rem, calc(var(--ndm-mobile-viewport-w) - var(--ndm-mobile-safe-left) - var(--ndm-mobile-safe-right) - (var(--ndm-mobile-inline-gap) * 2)));
  --ndm-mobile-floating-bottom: calc(var(--ndm-mobile-bottom-bar-bottom) + var(--ndm-mobile-action-footprint) + var(--ndm-mobile-gap));
  --ndm-mobile-top-panel-max-h: clamp(9.5rem, calc(var(--ndm-scene-vh, 1vh) * 30), 18rem);
  --ndm-mobile-bottom-panel-max-h: clamp(11rem, calc(var(--ndm-scene-vh, 1vh) * 36), 21rem);
  --ndm-mobile-overlay-max-w: min(34rem, calc(var(--ndm-mobile-viewport-w) - var(--ndm-mobile-safe-left) - var(--ndm-mobile-safe-right) - (var(--ndm-mobile-inline-gap) * 2)));
  --ndm-mobile-overlay-max-h: min(42rem, calc(var(--ndm-mobile-viewport-h) - var(--ndm-mobile-safe-top) - var(--ndm-mobile-safe-bottom) - (var(--ndm-mobile-gap) * 2)));
  --ndm-mobile-desc-font: clamp(0.76rem, 0.72rem + 0.18vw, 0.88rem);
}

body{
  background: var(--page-bg);
  overflow: hidden;
  overscroll-behavior: none;
}

#app,
#app canvas{
  width: 100%;
  height: 100%;
  touch-action: none;
}

#app{
  position: fixed;
  inset: 0;
  width: var(--ndm-mobile-viewport-w);
  height: var(--ndm-mobile-viewport-h);
  overflow: hidden;
  background: var(--canvas-bg);
}

#app canvas{
  display: block;
}

button,
a,
input,
textarea,
select{
  -webkit-tap-highlight-color: transparent;
}

.icon-row .icon-btn,
.text-btn,
.ndm-btn,
#rightToggle,
.reveal-btn,
.bottom-text-btn{
  min-height: max(44px, var(--ndm-mobile-action-min-h));
}

#bottomActions{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--ndm-mobile-bottom-bar-bottom);
  z-index: 1150;
  display: none;
  width: min(calc(100% - 24px), 760px);
  pointer-events: auto;
}

.bottomActionsRow{
  display:flex;
  align-items:center;
  gap: clamp(0.375rem, 1.2vw, 0.625rem);
  width:100%;
  overflow-x:auto;
  padding: clamp(0.375rem, 1.2vw, 0.625rem);
  border-radius: clamp(0.875rem, 1.8vw, 1rem);
  background: rgba(18,18,18,0.78);
  border:1px solid var(--panel-border);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bottomActionsRow::-webkit-scrollbar{
  display:none;
}

.bottom-text-btn{
  flex:0 0 auto;
  min-width: max-content;
  min-height: var(--ndm-mobile-action-min-h);
  padding: clamp(0.65rem, 1.8vw, 0.8rem) clamp(0.8rem, 2.2vw, 1rem);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  color: var(--btn-text);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(0.72rem, 0.68rem + 0.16vw, 0.82rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}

.bottom-text-btn:hover{
  transform: translateY(-1px);
  background: var(--btn-hover);
  box-shadow: var(--btn-accent-shadow);
}

html.light-theme .bottomActionsRow{
  background: rgba(255,255,255,0.82);
}

html.light-theme .bottom-text-btn{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}

html[data-ndm-scene-screen="tablet"] #leftPanel,
html[data-ndm-scene-screen="tablet"] #rightPanel{
  width: min(42vw, 360px);
  max-height: calc(var(--ndm-mobile-viewport-h) - var(--ndm-mobile-safe-top) - var(--ndm-mobile-safe-bottom) - (var(--ndm-mobile-gap) * 2));
}

html[data-ndm-scene-screen="tablet"] #bottomActions{
  width: min(calc(100% - 28px), min(52rem, calc(var(--ndm-mobile-viewport-w) - var(--ndm-mobile-safe-left) - var(--ndm-mobile-safe-right) - (var(--ndm-mobile-inline-gap) * 2))));
}

html[data-ndm-scene-screen="phone"] #leftPanel,
html[data-ndm-scene-screen="phone"] #rightPanel{
  position: fixed;
  left: calc(var(--ndm-mobile-safe-left) + var(--ndm-mobile-inline-gap));
  right: calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-inline-gap));
  width: auto;
  max-width: none;
  border-radius: var(--ndm-mobile-panel-radius);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.34);
}

html[data-ndm-scene-screen="phone"] #rightPanel{
  top: calc(var(--ndm-mobile-safe-top) + var(--ndm-mobile-gap));
  height: auto;
  max-height: min(
    var(--ndm-mobile-top-panel-max-h),
    max(8.5rem, calc(var(--ndm-mobile-viewport-h) - var(--ndm-mobile-floating-bottom) - var(--ndm-mobile-safe-top) - clamp(8rem, calc(var(--ndm-scene-vh, 1vh) * 22), 14rem)))
  );
  padding: clamp(0.8rem, 2.4vw, 0.95rem);
}

html[data-ndm-scene-screen="phone"] #leftPanel{
  top: auto;
  bottom: var(--ndm-mobile-floating-bottom);
  height: auto;
  max-height: min(
    var(--ndm-mobile-bottom-panel-max-h),
    max(9rem, calc(var(--ndm-mobile-viewport-h) - var(--ndm-mobile-safe-top) - var(--ndm-mobile-safe-bottom) - var(--ndm-mobile-action-footprint) - clamp(7.5rem, calc(var(--ndm-scene-vh, 1vh) * 24), 13rem)))
  );
  padding: clamp(0.95rem, 2.8vw, 1.2rem) var(--ndm-mobile-panel-inline) calc(clamp(0.95rem, 2.8vw, 1.2rem) + 0.15rem);
}

html[data-ndm-scene-screen="phone"] #controlsRow > #animationBtn,
html[data-ndm-scene-screen="phone"] #controlsRow > #btnFocusIcon,
html[data-ndm-scene-screen="phone"] #controlsRow > #btnIsolateIcon,
html[data-ndm-scene-screen="phone"] #controlsRow > #btnHideIcon,
html[data-ndm-scene-screen="phone"] #controlsRow > #btnRestoreIcon,
html[data-ndm-scene-screen="phone"] #controlsRow > #btnMultiIcon{
  display: none;
}

html[data-ndm-scene-screen="phone"] #controlsRow{
  gap: clamp(0.35rem, 1vw, 0.55rem);
}

html[data-ndm-scene-screen="phone"][data-ndm-scene-compact="1"],
html[data-ndm-scene-screen="phone"][data-ndm-scene-short="1"],
html[data-ndm-scene-screen="phone"][data-ndm-scene-phone-landscape="1"]{
  --ndm-mobile-gap: clamp(0.5rem, 1vw, 0.75rem);
  --ndm-mobile-inline-gap: clamp(0.625rem, 2.4vw, 0.9rem);
  --ndm-mobile-action-footprint: clamp(3.45rem, calc(var(--ndm-scene-vh, 1vh) * 7), 4.4rem);
  --ndm-mobile-top-panel-max-h: clamp(8rem, calc(var(--ndm-scene-vh, 1vh) * 26), 13.5rem);
  --ndm-mobile-bottom-panel-max-h: clamp(9.5rem, calc(var(--ndm-scene-vh, 1vh) * 31), 16rem);
}

html[data-ndm-scene-screen="phone"][data-ndm-scene-phone-landscape="1"] #rightPanel,
html[data-ndm-scene-screen="phone"][data-ndm-scene-phone-landscape="1"] #leftPanel{
  left: calc(var(--ndm-mobile-safe-left) + var(--ndm-mobile-gap));
  right: calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-gap));
}

html[data-ndm-scene-screen="phone"] #rightPanel.collapsed{
  transform: translateY(calc(-100% - var(--ndm-mobile-gap)));
  opacity: 0;
  pointer-events: none;
}

html[data-ndm-scene-screen="phone"] #leftPanel.collapsed{
  transform: translateY(calc(100% + var(--ndm-mobile-action-footprint) + var(--ndm-mobile-gap)));
  opacity: 0;
  pointer-events: none;
}

html[data-ndm-scene-screen="phone"] #rightPanel .desc-body{
  max-height: calc(100% - 58px);
  font-size: var(--ndm-mobile-desc-font);
  line-height: 1.45;
  padding-right: 4px;
}

html[data-ndm-scene-screen="phone"] #bottomActions{
  width: var(--ndm-mobile-bottom-bar-width);
}

html[data-ndm-scene-screen="phone"] .bottomActionsRow{
  padding: clamp(0.35rem, 1.2vw, 0.55rem);
}

html[data-ndm-scene-screen="phone"] .reveal-btn{
  position: fixed;
  width: var(--ndm-mobile-control-size);
  height: var(--ndm-mobile-control-size);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(0.875rem, 2vw, 1rem);
}

html[data-ndm-scene-screen="phone"] #rightReveal{
  top: calc(var(--ndm-mobile-safe-top) + var(--ndm-mobile-gap));
  right: calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-inline-gap));
  left: auto;
}

html[data-ndm-scene-screen="phone"] #leftReveal{
  right: calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-inline-gap));
  left: auto;
  top: auto;
  bottom: var(--ndm-mobile-floating-bottom);
}

html[data-ndm-scene-screen="phone"] .ndm-watermark{
  right: calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-inline-gap));
  bottom: calc(var(--ndm-mobile-floating-bottom) + var(--ndm-mobile-gap));
  font-size: clamp(0.76rem, 0.7rem + 0.18vw, 0.88rem);
}

html[data-ndm-scene-screen="phone"] .ndm-assistant-widget:not(.ndm-mobile-open){
  bottom: var(--ndm-mobile-floating-bottom) !important;
}

@media (max-width: 900px){
  .icon-row .icon-btn{
    width: 46px;
    height: 44px;
  }
}

@media (max-width: 768px){
  .pl-card{
    min-width: 0;
    width: min(100%, var(--ndm-mobile-overlay-max-w));
    max-height: var(--ndm-mobile-overlay-max-h);
    padding: clamp(0.875rem, 2.8vw, 1rem);
    gap: 12px;
    overflow: auto;
  }

  .pl-title{
    font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.05rem);
  }

  .ndm-modal{
    padding:
      calc(var(--ndm-mobile-safe-top) + var(--ndm-mobile-gap))
      calc(var(--ndm-mobile-safe-right) + var(--ndm-mobile-inline-gap))
      calc(var(--ndm-mobile-safe-bottom) + var(--ndm-mobile-gap))
      calc(var(--ndm-mobile-safe-left) + var(--ndm-mobile-inline-gap));
    align-items: flex-start;
  }

  .ndm-modal-card{
    width: min(100%, var(--ndm-mobile-overlay-max-w));
    max-height: var(--ndm-mobile-overlay-max-h);
    border-radius: clamp(1rem, 2.6vw, 1.15rem);
    padding: clamp(1rem, 3vw, 1.15rem);
    overflow: auto;
  }

  .ndm-modal-actions{
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ndm-modal-actions .ndm-btn{
    width: 100%;
    text-align: center;
  }
}

/* Mobile Controls UX: compact icon toolbar. JS preserves existing button handlers. */
html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] #bottomActions{
  width:min(
    calc(100% - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right))),
    352px
  );
  bottom:calc(max(12px, env(safe-area-inset-bottom)) + 8px);
  z-index:1160;
}

html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottomActionsRow{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  overflow:visible;
  padding:8px;
  border-radius:18px;
  background:rgba(12,16,24,.84);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 44px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

html.light-theme.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottomActionsRow{
  background:rgba(255,255,255,.88);
  border-color:rgba(0,0,0,.12);
}

html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottom-text-btn.ndm-mobile-toolbar-btn{
  min-width:0;
  width:100%;
  min-height:48px;
  height:48px;
  padding:0;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--btn-text, #eef8f3);
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}

html.light-theme.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottom-text-btn.ndm-mobile-toolbar-btn{
  color:#12202c;
  background:rgba(0,0,0,.045);
  border-color:rgba(0,0,0,.08);
}

html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottom-text-btn.ndm-mobile-toolbar-btn:hover,
html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottom-text-btn.ndm-mobile-toolbar-btn:focus-visible{
  transform:none;
  color:#0ff0c0;
  background:rgba(15,240,192,.13);
  border-color:rgba(15,240,192,.34);
  box-shadow:0 0 0 3px rgba(15,240,192,.12);
}

html.ndm-mobile-toolbar-enhanced[data-ndm-scene-screen="phone"] .bottom-text-btn.ndm-mobile-toolbar-hidden{
  display:none!important;
}

.ndm-mobile-toolbar-icon{
  width:24px;
  height:24px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

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

.ndm-mobile-toolbar-help-sheet{
  position:fixed;
  inset:0;
  z-index:10030;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:16px max(14px, env(safe-area-inset-right)) calc(max(14px, env(safe-area-inset-bottom)) + 10px) max(14px, env(safe-area-inset-left));
  background:rgba(0,0,0,.42);
}

.ndm-mobile-toolbar-help-sheet.is-open{
  display:flex;
}

.ndm-mobile-toolbar-help-card{
  width:min(100%, 420px);
  border-radius:20px;
  background:rgba(14,20,29,.96);
  color:#eef8f3;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:16px;
}

.ndm-mobile-toolbar-help-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.ndm-mobile-toolbar-help-title{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  margin:0;
}

.ndm-mobile-toolbar-help-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:inherit;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.ndm-mobile-toolbar-help-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.ndm-mobile-toolbar-help-list li{
  font-size:14px;
  line-height:1.42;
  color:rgba(238,248,243,.9);
}

@media (min-width:769px){
  html:not([data-ndm-mobile-toolbar-v2="1"]) .ndm-mobile-toolbar-help-sheet{
    display:none!important;
  }
}

@media (min-width:921px) and (pointer:fine){
  html[data-ndm-mobile-toolbar-v2="1"] .ndm-mobile-toolbar-help-sheet{
    display:none!important;
  }
}