/* ===================== card shell ===================== */
      .cc-card-wrap {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 520 / 400;
  height: auto;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: ew-resize;
  background: #000;
  isolation: isolate;
}

      .cc-layer {
        position: absolute;
        inset: 0;
        overflow: hidden;
        /*
        isolation gives each layer its own stacking context so their
        z-indexed labels/headlines are compared fairly by DOM order,
        rather than one layer's content escaping to always render on
        top regardless of drag position. The background makes each
        layer an actually opaque surface — without it, the "before"
        layer could sit on top correctly but still not visually cover
        anything underneath it, since it would just be transparent
        space with a few small stars on it.
      */
        isolation: isolate;
        background: var(--bg);
      }

      .cc-label {
        position: absolute;
        top: 1.5rem;
        left: 1.75rem;
        font-size: 0.72rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(245, 241, 232, 0.55);
        z-index: 5;
      }

      .cc-label-after {
        left: auto;
        right: 1.75rem;
        color: rgba(244, 242, 236, 0.7);
      }

      .cc-headline {
        position: absolute;
        bottom: 1.75rem;
        left: 1.75rem;
        right: 1.75rem;
        font-family: "Fraunces", serif;
        font-size: clamp(1.2rem, 2.5vw, 1.7rem);
        z-index: 5;
        pointer-events: none;
      }

      .cc-headline-before {
        color: var(--ink);
        text-align: right;
      }
      .cc-headline-after {
        color: var(--ink);
        text-align: left;
      }

      .cc-handle {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
        background: rgba(244, 242, 236, 0.5);
        z-index: 10;
      }

      .cc-handle::after {
        content: "⇔";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ink);
        color: #08080a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
      }

      /* ===================== galaxy backdrop ===================== */
      .gx-nebula {
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        opacity: 0.16;
        pointer-events: none;
      }

      .gx-star {
        position: absolute;
        border-radius: 50%;
        background: #ffffff;
      }

      .gx-core-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(18px);
      }