/* Background laboratory: visible only on #home-background. Main homepage stays untouched. */
body[data-route="home-background"] .cd-bg-lab-panel{
  position:relative;z-index:12;width:min(100%,1400px);box-sizing:border-box;
  margin:4px auto 0;padding:14px 20px 17px;color:#f7f0ff;
  border:1px solid rgba(205,212,255,.24);border-radius:17px;
  background:linear-gradient(110deg,rgba(21,40,81,.52),rgba(92,32,84,.44));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px rgba(242,246,255,.16);
}
body[data-route="home-background"] .cd-bg-lab-heading,
body[data-route="home-background"] .cd-bg-lab-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body[data-route="home-background"] .cd-bg-lab-heading{justify-content:space-between;padding-bottom:10px;border-bottom:1px solid rgba(221,211,255,.17)}
body[data-route="home-background"] .cd-bg-lab-heading>div{display:grid;gap:3px}
body[data-route="home-background"] .cd-bg-lab-heading strong{font-size:13px;letter-spacing:.12em;color:#ffd0ef}
body[data-route="home-background"] .cd-bg-lab-heading small{font-size:12px;color:#c3bbd5}
body[data-route="home-background"] .cd-bg-lab-heading a{color:#f6e1fa;font-size:12px;text-decoration:none}
body[data-route="home-background"] .cd-bg-lab-controls{padding-top:13px;gap:18px 24px}
body[data-route="home-background"] .cd-bg-lab-controls label{display:grid;gap:7px;font-size:12px;font-weight:750}
body[data-route="home-background"] .cd-bg-lab-controls select,
body[data-route="home-background"] .cd-bg-lab-controls button{
  border:1px solid rgba(190,186,245,.38);border-radius:9px;
  background:rgba(27,31,66,.72);color:white;padding:9px 13px;font:inherit;
}
body[data-route="home-background"] .cd-bg-lab-controls button{cursor:pointer;align-self:end}
body[data-route="home-background"] .cd-bg-lab-controls button:hover{background:rgba(178,60,147,.58)}
body[data-route="home-background"] .cd-bg-lab-controls input[type="range"]{accent-color:#f25cac;width:176px}
body[data-route="home-background"] .cd-bg-lab-controls output{color:#ff9ed6}
body[data-route="home-background"] .cd-bg-lab-controls .cd-bg-lab-check{display:flex;align-items:center;gap:9px;align-self:end;padding-bottom:7px}
body[data-route="home-background"] .cd-bg-lab-controls input[type="checkbox"]{accent-color:#f25cac}
body[data-route="home-background"] .cde-home{padding-top:24px!important}
body[data-route="home-background"] .cd-bg-lab-effects{
  position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  opacity:var(--cd-bg-lab-strength,.65);
}
body[data-route="home-background"] .cd-bg-lab-effects::before,
body[data-route="home-background"] .cd-bg-lab-effects::after{
  content:"";position:absolute;inset:-8%;
  will-change:transform;transform:translate3d(var(--bg-px,0px),var(--bg-py,0px),0);
  transition:transform 650ms ease-out;
}
body[data-route="home-background"][data-bg-experiment="original"] .cd-bg-lab-effects{display:none}
/* Three clear depth planes: cold remote gas, violet middle atmosphere, warm near highlights. */
body[data-bg-experiment="depth"] .cd-bg-lab-effects::before{
  background:
    radial-gradient(ellipse 36% 38% at 8% 20%,rgba(34,107,215,.49),transparent 88%),
    radial-gradient(ellipse 29% 37% at 64% 8%,rgba(53,113,231,.40),transparent 92%),
    radial-gradient(ellipse 36% 46% at 93% 77%,rgba(36,68,159,.55),transparent 92%),
    radial-gradient(ellipse 31% 26% at 37% 83%,rgba(78,70,189,.37),transparent 86%);
}
body[data-bg-experiment="depth"] .cd-bg-lab-effects::after{
  background:
    radial-gradient(ellipse 26% 30% at 77% 36%,rgba(251,78,183,.43),transparent 84%),
    radial-gradient(ellipse 29% 24% at 21% 79%,rgba(232,64,137,.42),transparent 89%),
    radial-gradient(ellipse 16% 13% at 91% 16%,rgba(250,177,227,.33),transparent 94%);
}
/* Aurora: taller, soft blue-violet light curtains over the existing procedural sky. */
body[data-bg-experiment="aurora"] .cd-bg-lab-effects::before{
  background:
    radial-gradient(ellipse 15% 92% at 20% 0%,rgba(51,132,229,.45),transparent 90%),
    radial-gradient(ellipse 13% 90% at 46% -15%,rgba(108,77,238,.52),transparent 92%),
    radial-gradient(ellipse 18% 94% at 73% 0%,rgba(76,154,225,.44),transparent 92%),
    linear-gradient(112deg,transparent 30%,rgba(90,78,195,.13) 44%,transparent 57%);
}
body[data-bg-experiment="aurora"] .cd-bg-lab-effects::after{
  background:
    radial-gradient(ellipse 11% 79% at 31% 0%,rgba(210,95,223,.35),transparent 94%),
    radial-gradient(ellipse 19% 85% at 89% 4%,rgba(241,100,187,.42),transparent 94%);
}
/* Cosmic ocean: luminous shores with a dark central channel; no repeating wave sprites. */
body[data-bg-experiment="ocean"] .cd-bg-lab-effects::before{
  background:
    radial-gradient(ellipse 95% 31% at 47% 100%,rgba(39,93,216,.55),transparent 84%),
    radial-gradient(ellipse 75% 25% at 56% 0%,rgba(36,88,185,.48),transparent 88%),
    radial-gradient(ellipse 55% 28% at 9% 61%,rgba(75,51,178,.29),transparent 87%);
}
body[data-bg-experiment="ocean"] .cd-bg-lab-effects::after{
  background:
    radial-gradient(ellipse 61% 16% at 24% 84%,rgba(248,72,170,.50),transparent 90%),
    radial-gradient(ellipse 61% 17% at 84% 18%,rgba(236,67,173,.45),transparent 92%),
    radial-gradient(ellipse 30% 7% at 75% 70%,rgba(255,182,220,.26),transparent 92%);
}
@keyframes cd-bg-lab-drift-a{0%,100%{translate:0 0}50%{translate:1.4% -1.5%}}
@keyframes cd-bg-lab-drift-b{0%,100%{translate:0 0}50%{translate:-1.8% 1.1%}}
body[data-route="home-background"][data-bg-motion="on"] .cd-bg-lab-effects::before{animation:cd-bg-lab-drift-a 35s ease-in-out infinite}
body[data-route="home-background"][data-bg-motion="on"] .cd-bg-lab-effects::after{animation:cd-bg-lab-drift-b 43s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
 body[data-route="home-background"] .cd-bg-lab-effects::before,
 body[data-route="home-background"] .cd-bg-lab-effects::after{animation:none!important;transition:none!important;will-change:auto}
}
@media(max-width:780px){
 body[data-route="home-background"] .cd-bg-lab-panel{padding:12px}
 body[data-route="home-background"] .cd-bg-lab-controls{gap:13px}
 body[data-route="home-background"] .cd-bg-lab-controls input[type="range"]{width:140px}
}

/* The three new modes use geometry, not the old color-only gradient presets. */
body[data-route="home-background"] .cd-bg-lab-effects{display:none!important}
body[data-route="home-background"][data-bg-isolate="on"]:not([data-bg-experiment="original"]) > .cde-global-mist{
  opacity:0!important;
}
body[data-route="home-background"] .cd-experiment-canvas{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
}
body[data-route="home-background"] .page-shell{position:relative;z-index:1}
.cd-experiment-canvas[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
 body[data-route="home-background"] .cd-experiment-canvas{animation:none!important}
}

/* Point-cloud study: unobstructed by the large clip preview. Toggle restores comparison. */
body[data-route="home-background"] .cd-bg-lab-content-control{display:none!important}
body[data-route="home-background"][data-bg-experiment="pointcloud"] .cd-bg-lab-content-control{display:flex!important}
html:root body[data-route="home-background"][data-bg-experiment="pointcloud"][data-bg-show-content="no"] .cde-home{
  opacity:0!important;pointer-events:none!important;
}
body[data-route="home-background"] .cde-home{transition:opacity .28s ease}