/* Particle Playground styles (extracted from index.html + controls.html) */

/* ---------- ROOT / BASE ---------- */

:root{
    --pad:8px; --module-w:240px; --accent:#ff8a00; --pulse-blue:#2ab6ff;
    --track:#3e3e3e; --thumb:#fff;
  }

html, body{margin:0;height:100%;}
*, *::before, *::after{box-sizing:border-box;}

body.pp-main{background:#000;font-family:sans-serif;overflow:hidden;cursor:none;}
body.pp-controls{background:#111;color:#eee;font-family:sans-serif;margin:0;padding:8px;}

/* ---------- UTILITY CLASSES ---------- */
/* Used by ui.js + controls.html for simple visibility + hint pulsing. */
.hidden{display:none !important;}

@keyframes ppPulse{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}
.pulse{animation:ppPulse 1.15s ease-in-out infinite;}

/* ---------- MAIN DISPLAY ---------- */
/* ---- Index (main playground) ---- */

body.pp-main .container{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

body.pp-main canvas{
  width:100%;
  height:100%;
  display:block;
}

/* ---------- CURSOR DOT ---------- */
/* Cursor dot (MAIN display only) */
body.pp-main .pp-cursor-dot{
  position:absolute;
  left:0;
  top:0;
  width:12px;
  height:12px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-9999px,-9999px,0);
  transition:opacity 220ms ease;
  z-index:60;

  /*
    Projection-friendly cursor dot:
    - Always high-contrast (works on black, white, and "Blank"/vignette)
    - Alternating light/dark rings (visible even if blend-modes are unsupported)
    - Uses mix-blend-mode:difference when available for maximum contrast
  */
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.92);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.95),
    0 0 0 2px rgba(0,0,0,0.75),
    0 0 10px rgba(0,0,0,0.35);
  mix-blend-mode:difference;
}
body.pp-main .pp-cursor-dot.visible{ opacity:1; }
body.pp-main .pp-cursor-dot.visible.idle{ opacity:0; }

/* ---------- HIDDEN UI ROOT ---------- */
/* MAIN is popout-only: any hidden UI scaffolding stays fully hidden. */
body.pp-main #uiRoot{display:none !important;}

/* ---------- CONTROLS GRID ---------- */
/* ---- Controls page ---- */

body.pp-controls #ppControlsViewport{
  position:fixed;
  inset:0;
  overflow:hidden;
  padding:0;
}

body.pp-controls #ppControlsViewLayer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  transform-origin:0 0;
  will-change:transform;
  padding:8px;
}

body.pp-controls.pp-pan-active{
  user-select:none;
  cursor:grabbing;
}
body.pp-controls.pp-pan-active *{
  cursor:grabbing !important;
}

body.pp-controls #ppViewHud{
  position:fixed;
  bottom:8px;
  left:8px;
  z-index:1000;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color:#ddd;
  pointer-events:auto;
}
body.pp-controls #ppViewHud .pp-viewhud-row{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
body.pp-controls #ppViewHud .pp-viewhud-label{
  color: rgba(255,255,255,0.8);
}
body.pp-controls #ppViewZoomLabel{
  min-width: 44px;
  text-align:right;
  color:#fff;
}
body.pp-controls #ppViewZoomSlider{
  width: 140px;
}
body.pp-controls #ppViewResetBtn{
  padding: 3px 8px;
  font-size: 12px;
}
body.pp-controls #ppViewHud .pp-viewhud-hint{
  margin-top:4px;
  font-size:11px;
  color: rgba(255,255,255,0.75);
}

body.pp-controls #grid{
  display:grid;
  gap:10px;
  align-items:start;
  grid-auto-flow: dense;

  /* Masonry-style packing to avoid big empty gaps under short modules */
  grid-auto-rows: 8px;

  /* Responsive columns: packs modules into as many columns as the window allows. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ---------- CONTROLS MODULES ---------- */

body.pp-controls .module{position:relative;background:rgba(0,0,0,0.55);padding:7px;border-radius:4px;font-size:12px;color:#ccc;align-self:start;border:1px solid rgba(255,255,255,0.12);}
body.pp-controls .module h3{margin:0;font-size:11px;letter-spacing:.08em;color:#fff;}

/* ---------- MODULE LAYOUT (DRAG + COLLAPSE) ---------- */
body.pp-controls .pp-module-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
  cursor:grab;
  user-select:none;
}
body.pp-controls .pp-module-header:active{ cursor:grabbing; }
body.pp-controls .pp-module-title{display:flex;align-items:center;gap:8px;min-width:0;}
body.pp-controls .pp-module-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
body.pp-controls .pp-module-collapse{
  appearance:none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color:#eaeaea;
  border-radius:4px;
  padding:1px 7px;
  font-size:12px;
  line-height:16px;
  cursor:pointer;
}
body.pp-controls .pp-module-collapse:hover{ background: rgba(255,255,255,0.12); }
body.pp-controls .module.pp-collapsed .pp-module-body{ display:none; }
body.pp-controls .module.pp-dragging{ opacity:0.60; }
body.pp-controls .module.pp-drop{ outline:2px dashed rgba(255,255,255,0.22); outline-offset:2px; }


/* ---------- MODULE ACCENTS ---------- */
/* Module accents (subtle color-coding for fast scanning) */
body.pp-controls .module[data-accent]{ --accent: 255,255,255; }
body.pp-controls .module[data-accent="global"]  { --accent: 220,220,220; }
body.pp-controls .module[data-accent="mode"]    { --accent: 42,182,255; }
body.pp-controls .module[data-accent="movement"]{ --accent: 181,107,255; }
body.pp-controls .module[data-accent="palette"] { --accent: 255,138,0; }
body.pp-controls .module[data-accent="shape"]   { --accent: 66,255,138; }
body.pp-controls .module[data-accent="network"] { --accent: 42,123,255; }
body.pp-controls .module[data-accent="text"]    { --accent: 255,138,0; }
body.pp-controls .module[data-accent="system"]  { --accent: 230,230,230; }
body.pp-controls .module[data-accent="locks"]   { --accent: 255,92,92; }
body.pp-controls .module[data-accent="trails"]  { --accent: 136,255,42; }
body.pp-controls .module[data-accent="stroke"]  { --accent: 42,255,136; }
body.pp-controls .module[data-accent="colorTune"]{ --accent: 255,192,77; }
body.pp-controls .module[data-accent="motion"]  { --accent: 138,138,255; }
body.pp-controls .module[data-accent="swerve"]  { --accent: 42,255,213; }
body.pp-controls .module[data-accent="render"]  { --accent: 255,136,255; }
body.pp-controls .module[data-accent="interact"]{ --accent: 255,92,193; }
body.pp-controls .module[data-accent="sound"]   { --accent: 255,255,92; }

body.pp-controls .module[data-accent]{
  border-color: rgba(var(--accent), 0.40);
  box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.10);
}
body.pp-controls .module[data-accent]::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: rgba(var(--accent), 0.80);
  border-top-left-radius:4px;
  border-top-right-radius:4px;
}
body.pp-controls .module[data-accent] h3{
  color: rgba(var(--accent), 0.95);
}

body.pp-controls .subhint{font-size:10px;color:#bdbdbd;opacity:.9;margin:0 0 6px;}

/* ---------- SOUND UI (SR3) ---------- */
body.pp-controls .pp-sound-status{
  font-size: 11px;
  color:#cfcfcf;
  opacity: 0.9;
  margin: 0 0 6px;
}
body.pp-controls .pp-sound-meter{margin-top:6px;}
/* SR8: meter = smoothed fill + raw cap (keep SR6 bars as fallback) */
body.pp-controls .pp-sound-meter-grid{
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:68px;
  margin-top: 4px;
}
body.pp-controls .pp-sound-band{
  flex: 1;
  min-width: 6px;
  display:flex;
  flex-direction: column;
  align-items: stretch;
}
body.pp-controls .pp-sound-band-track{
  position: relative;
  height:58px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  overflow: hidden;
}
body.pp-controls .pp-sound-band-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background: rgba(255,255,255,0.28);
  will-change: height;
}
body.pp-controls .pp-sound-band-cap{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  bottom:0%;
  background: rgba(255,255,255,0.95);
  will-change: bottom;
}
body.pp-controls .pp-sound-band-label{
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  color:#cfcfcf;
  opacity: 0.70;
  margin-top: 2px;
}

body.pp-controls .pp-sound-meter-bars{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:4px;
  height:42px;
}
body.pp-controls .pp-sound-bar{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  transform-origin: bottom;
  transform: scaleY(0.06);
  will-change: transform;
}
body.pp-controls .btnrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
body.pp-controls .btnrow button{margin:0;}
body.pp-controls #holdBtn.is-on{ box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45); }
body.pp-controls #holdBtn.is-on{ border-color: rgba(255,255,255,0.55); }

/* ---------- SOUND PLAYER UI (SR5) ---------- */
body.pp-controls .pp-sound-player-status{
  font-size: 11px;
  color:#cfcfcf;
  opacity: 0.95;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.pp-controls .pp-sound-player-time{
  font-size: 11px;
  color:#bdbdbd;
  opacity: 0.88;
  margin: 0 0 6px;
}
body.pp-controls .pp-sound-player-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
body.pp-controls .pp-sound-btn{
  appearance:none;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color:#eaeaea;
  border-radius:4px;
  padding:4px 8px;
  font-size: 11px;
  cursor:pointer;
}
body.pp-controls .pp-sound-btn:disabled{
  opacity:0.45;
  cursor:default;
}


/* ---------- SOUND REACTIVITY (SR11): PATCH BAY UI ---------- */
body.pp-controls .pp-sound-map{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
body.pp-controls .pp-sound-map-row{border:1px solid rgba(255,255,255,0.14);border-radius:8px;padding:8px;background:rgba(0,0,0,0.18);}
body.pp-controls .pp-sound-map-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:4px;}
body.pp-controls .pp-sound-map-on{flex:1 1 180px;margin:0;}
body.pp-controls .pp-sound-map-mini{flex:0 0 auto;margin:0;}
body.pp-controls .pp-sound-map-mini > span{flex:0 0 auto;opacity:0.85;font-size:12px;max-width:none;}
body.pp-controls .pp-sound-map-mini select{flex:0 0 112px;min-width:92px;}


/* ---------- SOUND REACTIVITY (SR14): EMBEDDED MAPPING SECTIONS ---------- */
body.pp-controls details.pp-sound-embed{margin-top:10px;border:1px dashed rgba(255,255,255,0.14);border-radius:10px;padding:6px 8px;background:rgba(0,0,0,0.10);} 
body.pp-controls details.pp-sound-embed[open]{background:rgba(0,0,0,0.16);} 
body.pp-controls details.pp-sound-embed > summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;font-size:12px;opacity:0.92;} 
body.pp-controls details.pp-sound-embed > summary::-webkit-details-marker{display:none;} 
body.pp-controls .pp-sound-embed-caret{display:inline-block;transform-origin:50% 50%;transition:transform 120ms ease;} 
body.pp-controls details.pp-sound-embed[open] .pp-sound-embed-caret{transform:rotate(90deg);} 
body.pp-controls .pp-sound-map.pp-sound-map-embed{margin-top:8px;} 
body.pp-controls details.pp-sound-embed .pp-sound-map-row{background:rgba(0,0,0,0.14);} 

body.pp-controls .pp-sound-player-loop{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left: 2px;
}
body.pp-controls.pp-drag-audio #mod-audio-player{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 0 0 2px rgba(255,255,92,0.18);
}


body.pp-controls label.small{opacity:0.92;}
body.pp-controls hr{border:0;border-top:1px solid rgba(255,255,255,0.12);margin:6px 0;}

/* ---------- DEBUG OVERLAY ---------- */
/* Debug overlay (main canvas). */
#debugOverlay{
  position:fixed;
  top:8px;
  right:8px;
  z-index:99999;
  margin:0;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.55);
  color:#fff;
  font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  white-space:pre;
  pointer-events:none;
  max-width:46vw;
}

/* MAIN output must remain clean for projection.
   Debug readouts are computed, but only rendered on MAIN when Debug Metrics is enabled. */
body.pp-main:not(.pp-debug-on) #debugOverlay{ display:none !important; }

/* Command Center section styling */
body.pp-controls .cc-hint{font-size:10px;color:#bdbdbd;opacity:.85;margin:0 0 6px;}
body.pp-controls .cc-sections{display:block;}
body.pp-controls .cc-section{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);}
body.pp-controls .cc-section:first-child{margin-top:0;padding-top:0;border-top:none;}
body.pp-controls .cc-title{font-size:10px;letter-spacing:.12em;color:#fff;opacity:.9;margin:0 0 6px;}

/* ---------- CONTROL INPUTS ---------- */

body.pp-controls label{display:flex;align-items:center;margin:2px 0;gap:6px;min-width:0;}body.pp-controls label span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}body.pp-controls input[type=range]{flex:1 1 160px;min-width:120px;height:26px;background:transparent;}body.pp-controls input.value-field, body.pp-controls input[type=number], body.pp-controls input[type=text]{
    flex:0 0 76px;width:76px;background:rgba(0,0,0,0.35);border:1px solid #666;color:#eee;
    font-size:12px;text-align:right;border-radius:4px;padding:2px 6px;min-width:0;
  }body.pp-controls input[type=text]{ flex:1 1 auto; width:auto; text-align:left; }body.pp-controls input[type=checkbox]{margin-left:6px;}body.pp-controls select{flex:2 2 160px;min-width:0;background:rgba(0,0,0,0.35);border:1px solid #666;color:#eee;font-size:12px;border-radius:4px;padding:2px 6px;}body.pp-controls textarea{flex:1 1 auto;min-width:0;width:100%;background:rgba(0,0,0,0.35);border:1px solid #666;color:#eee;font-size:12px;border-radius:4px;padding:4px 6px;resize:vertical;}body.pp-controls label.stack textarea{flex:1 1 auto;min-width:0;}body.pp-controls /* Stack slider/select/text labels above their controls to prevent right-side clipping */
  label.stack{flex-wrap:wrap;align-items:flex-start;}body.pp-controls label.stack > span{
    flex:1 0 100%;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    margin-bottom:2px;
  }body.pp-controls label.stack input[type=range]{flex:1 1 auto;min-width:0;}body.pp-controls label.stack select{flex:1 1 auto;min-width:0;}body.pp-controls label.stack input[type=text]{flex:1 1 auto;min-width:0;}body.pp-controls label.stack input.value-field, body.pp-controls label.stack input[type=number]{flex:0 0 92px;width:92px;}body.pp-controls button{margin:2px 4px 2px 0;padding:4px 8px;font-size:12px;cursor:pointer;border-radius:4px;border:1px solid #555;background:#2b2b2b;color:#eee;}body.pp-controls button:hover{background:#333;}

/* ---------- MODE PICKER (NO-WRAP) ---------- */
/* Custom mode picker to avoid option text wrapping in native <select> dropdowns. */
body.pp-controls select.pp-hidden-select{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.pp-controls .pp-mode-picker{
  flex:2 2 160px;
  min-width:0;
  position:relative;
}

body.pp-controls .pp-mode-picker-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 6px;
  border-radius:4px;
  border:1px solid #666;
  background:rgba(0,0,0,0.35);
  color:#eee;
  font-size:12px;
  cursor:pointer;
  min-width:0;
}

body.pp-controls .pp-mode-picker-btn.is-open{
  border-color: rgba(255,255,255,0.45);
}

body.pp-controls .pp-mode-picker-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}

body.pp-controls .pp-mode-picker-caret{
  flex:0 0 auto;
  opacity:0.9;
}

body.pp-controls .pp-mode-picker-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 2px);
  z-index:99999;
  max-height:320px;
  overflow:auto;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.92);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  padding:4px 0;
}

body.pp-controls .pp-mode-picker.pp-open-up .pp-mode-picker-menu{
  top:auto;
  bottom:calc(100% + 2px);
}

body.pp-controls .pp-mode-picker-item{
  padding:5px 10px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  user-select:none;
}

body.pp-controls .pp-mode-picker-item:hover,
body.pp-controls .pp-mode-picker-item.is-highlight{
  background:rgba(255,255,255,0.10);
}

body.pp-controls .pp-mode-picker-item.is-selected{
  background:rgba(42,182,255,0.18);
}

/* ---------- AUTO POOL UI ---------- */
/* Auto Pool UI (checkbox filtering for auto systems) */
body.pp-controls .pool-row{display:flex;align-items:center;gap:8px;margin:4px 0 6px;}
body.pp-controls .pool-toggle{flex:0 0 auto;padding:4px 8px;font-size:11px;}
body.pp-controls .pool-count{flex:1 1 auto;font-size:10px;color:#bbb;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.pp-controls .pool-panel{margin:0 0 6px;padding:6px;border:1px solid rgba(255,255,255,0.12);border-radius:6px;background:rgba(0,0,0,0.25);}
body.pp-controls .pool-actions{display:flex;gap:6px;margin:0 0 6px;}
body.pp-controls .pool-actions button{padding:3px 7px;font-size:11px;}
body.pp-controls .pool-list{max-height:220px;overflow:auto;padding-right:4px;}
body.pp-controls .pool-item{display:flex;align-items:center;gap:8px;margin:2px 0;}
body.pp-controls .pool-item input[type=checkbox]{margin-left:0;}
body.pp-controls .pool-item span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- MODAL / RESET ---------- */
/* ---- Controls: danger buttons + reset confirmation modal ---- */
body.pp-controls button.danger{
  border-color: rgba(255,92,92,0.85);
  background: rgba(255,92,92,0.18);
}
body.pp-controls button.danger:hover{
  background: rgba(255,92,92,0.26);
}

body.pp-controls .pp-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.62);
  z-index:99999;
  padding:18px;
}

/* Honor the HTML [hidden] attribute (default UA stylesheet is too low-specificity vs rules above). */
body.pp-controls .pp-modal-overlay[hidden]{
  display:none !important;
}

body.pp-controls .pp-modal{
  width:min(420px, 92vw);
  background:rgba(32,32,32,0.98);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  padding:14px 14px 12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  color:#eee;
}

body.pp-controls .pp-modal h4{
  margin:0 0 8px;
  font-size:13px;
  letter-spacing:0.02em;
  color:rgba(255,92,92,0.95);
}

body.pp-controls .pp-modal p{
  margin:0 0 8px;
  font-size:12px;
  color:#ddd;
}

body.pp-controls .pp-modal p.small{
  font-size:11px;
  opacity:0.9;
}

body.pp-controls .pp-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}


/* ---------- SOUND REACTIVITY (SR10): DISPLAY DEBUG OVERLAY ---------- */
body.pp-main #ppSoundDebugOverlay.pp-sound-debug-overlay{
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:9999;
  pointer-events:none;
  white-space:pre;
  font:11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:rgba(255,255,255,0.92);
  background:rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:8px;
  padding:8px 10px;
  max-width:min(520px, 92vw);
}

/* ---------- SNAPSHOT SHARE (URL + PASTE LOAD) ---------- */
body.pp-controls .pp-snapshot-share{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.10);
}
body.pp-controls .pp-snapshot-share .pp-snapshot-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 8px;
}
body.pp-controls .pp-snapshot-share .pp-snapshot-label > span{
  font-size:11px;
  letter-spacing:0.06em;
  opacity:0.85;
}
body.pp-controls textarea#snapshotPaste{
  width:100%;
  min-height:56px;
  resize:vertical;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.25);
  color:#eee;
  font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body.pp-controls textarea#snapshotPaste::placeholder{
  color:rgba(255,255,255,0.45);
}
body.pp-controls .pp-snapshot-actions{
  gap:8px;
}