body { margin:0; overflow:hidden; background:#000; }
/* z-index:1 baseline (tied between both panels): FractalPanel's drag
   preview (fractalPanel.js's clearDragPreview/onPointerMove) temporarily
   drops a panel's own z-index to 0 for the duration of a drag, so whichever
   panel is actively being dragged always slides *under* the stationary one
   in dual view, regardless of which side it's on or DOM order. */
#mandelbrotGfx, #mandelbrotOverlay, #juliaGfx, #juliaOverlay { position:fixed; top:0; left:0; width:100vw; height:100vh; display:block; z-index:1; }
#mandelbrotOverlay, #juliaOverlay { pointer-events:none; mix-blend-mode:difference; }

/* Each panel is independently shown/hidden (toggled in JS from the
   Mandelbrot/Julia checkboxes); if both are hidden, the screen is black.
   !important: this override must beat the #mandelbrotGfx/#mandelbrotOverlay/#juliaGfx/#juliaOverlay
   ID selector above, which a same-specificity class selector cannot do —
   a hidden-but-undisplayed canvas would otherwise still sit on top and
   silently swallow pointer events meant for the visible one underneath. */
.panel-hidden { display:none !important; }

/* When both panels are visible: Mandelbrot on the left half, Julia on the
   right half. When only one is visible it keeps the full 100vw/100vh from
   the rule above. */
body.dual-view #mandelbrotGfx, body.dual-view #mandelbrotOverlay { width:50vw; }
body.dual-view #juliaGfx, body.dual-view #juliaOverlay { left:50vw; width:50vw; }
#uiToggleBtn {
  position:fixed; top:10px; left:10px; z-index:2;
  width:36px; height:36px;
  background:#0008; color:white; border:none; border-radius:8px;
  font-size:1.1em; cursor:pointer;
}
/* z-index:2 on all of the below: #mandelbrotGfx picks up z-index:1 in dual view (see
   above), which would otherwise put these behind it — position+z-index
   siblings stack by z-index regardless of DOM order, so without an
   explicit value here these default to z-index:auto (~0) and lose to it. */
#ui {
  position:fixed; top:56px; left:10px; z-index:2;
  background:#0008; padding:10px; border-radius:8px;
  color:white; font-family:sans-serif;
}
#ui.hidden { display:none; }
label { display:block; margin-top:6px; }
#resetBtn { display:block; margin-top:10px; }
.hint { font-size:0.8em; opacity:0.7; margin-top:10px; max-width:200px; }

/* Mandelbrot/Julia sections stack in single-panel view (whichever is shown);
   body.dual-view (already toggled for the canvases) puts them side by side. */
#uiPanels { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
body.dual-view #uiPanels { flex-direction:row; }
#uiPanels fieldset { border:1px solid #fff4; border-radius:6px; padding:8px; margin:0; }
#uiPanels legend { padding:0 4px; }

#selectionBox {
  position:fixed; z-index:2;
  display:none;
  border:1px dashed #0f0;
  background:rgba(0,255,0,0.15);
  pointer-events:none;
}

#gpuError {
  display:none;
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  max-width:480px; padding:16px 20px;
  background:#200; border:1px solid #900; border-radius:8px;
  color:#f88; font-family:sans-serif; text-align:center;
}
#gpuReloadBtn { margin-top:12px; }

#noVizMessage {
  display:none;
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  color:#666; font-family:sans-serif; font-size:1.1em;
}

#footer {
  position:fixed; bottom:10px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}

#repoLink {
  background:#0008; color:white; padding:6px 10px; border-radius:8px;
  font-family:sans-serif; font-size:0.85em; text-decoration:none;
}

#motto {
  color:#fff8; font-family:sans-serif; font-size:0.7em; font-style:italic;
}