/* Theme variables */
    :root {
      --bg: #0b0c10;
      --fg: #e6e6e6;
      --cube-face: #101217;   /* dark face */
      --cube-stroke: #ffffff; /* bright outline for contrast on dark bg */
      --invertColor: invert(100%);
      --uninvertColor: invert(0%);

    }
    .theme-light {
      --bg: #ffffff;
      --fg: #111111;
      --cube-face: #ffffff;   /* light face */
      --cube-stroke: #000000; /* dark outline */
      --invertColor: invert(0%);
      --uninvertColor: invert(100%);
    }

    body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
    .content { /*position: relative;*/ z-index: 1; /*text-align: center; /*padding: 4rem 1rem;*/ pointer-events: auto;}

    #bg-cubes { position: fixed; inset: 0; z-index: 0; pointer-events: none; perspective: 900px; overflow: hidden; }
    .scene { position: absolute; inset: -10vh -10vw; transform-style: preserve-3d; will-change: transform; }

    .cube { position: absolute; width: var(--size, 80px); height: var(--size, 80px); transform-style: preserve-3d; opacity: 1; pointer-events: none; }

    .cube .face { pointer-events: auto; position: absolute; width: 100%; height: 100%; background: var(--cube-face); border: 2px solid var(--cube-stroke); box-sizing: border-box; backface-visibility: hidden; }
    .face--front  { transform: translateZ(calc(var(--size) / 2)); }
    .face--back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
    .face--right  { transform: rotateY(90deg)  translateZ(calc(var(--size) / 2)); }
    .face--left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
    .face--top    { transform: rotateX(90deg)  translateZ(calc(var(--size) / 2)); }
    .face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

    .face:hover { background: var(--cube-stroke); border: 2px solid var(--cube-face); }

    .floater { position:absolute; width:60px; height:30px; background:var(--fg); border-radius:15px; opacity:0.8; }
      /* Rare side-to-side wanderer (solid white orb with black outline) */
    .wanderer {
      position: absolute;
      width: var(--w, 28px);
      height: var(--h, 28px);
      background: var(--fg);
      border: 2px solid var(--bg);
      border-radius: 50%;
      box-sizing: border-box;
      pointer-events: none;
      will-change: transform;
      transform: translate3d(-9999px, -9999px, 0);
    }

    @media (prefers-reduced-motion: reduce) { .scene { transition: none; } }