/* Efecto «depth» (Mati, 10/11): marcador de profundidad en el margen derecho. Lo inyecta fx/depth.js (la bajada con
   paralaje y la capa lejana viven en el estanque). Es un instrumento, no un adorno: una regla finita con una marca por
   metro, más larga cada cinco, y la profundidad actual en mono chica junto a un índice que baja con el scroll. Toma el
   texto secundario del tema de la barra (cambia con ella) y un velo del fondo de ese momento, para leerse sobre los koi.
   Decorativo: aria-hidden y sin puntero. Sólo en pantallas anchas y si entra en el margen sin pisar el contenido (.on). */
html.fx-depth .koi-depth { display: none; }
@media (min-width: 1100px) {
  html.fx-depth .koi-depth.on {
    display: block; position: fixed; right: 22px; top: 50%; z-index: 2; width: 1px; height: clamp(180px, 30vh, 260px);
    transform: translateY(-50%); pointer-events: none; color: var(--fg-2); transition: color .3s ease;
    font: 500 11px/1 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums;
  }
  html.fx-depth .koi-depth-rule { position: absolute; inset: 0; }
  html.fx-depth .koi-depth-rule::before { content: ""; position: absolute; right: 0; top: 0; bottom: -1px; width: 1px; background: currentColor; opacity: .22; }
  html.fx-depth .koi-depth-rule i { position: absolute; right: 0; width: 4px; height: 1px; background: currentColor; opacity: .32; }
  html.fx-depth .koi-depth-rule i.major { width: 8px; opacity: .5; }
  /* índice: un trazo un poco más largo que las marcas, y el número a su izquierda (alineado a la derecha: crece hacia el texto) */
  html.fx-depth .koi-depth-now { position: absolute; right: 0; top: 0; width: 12px; height: 1px; background: currentColor; will-change: transform; }
  html.fx-depth .koi-depth-now span {
    position: absolute; right: 18px; top: 0; transform: translateY(-50%); white-space: nowrap;
    text-shadow: 0 0 3px var(--koi-depth-bg, var(--bg)), 0 0 8px var(--koi-depth-bg, var(--bg));
  }
}